Basics of HTML (some repetition) Cascading Style Sheets...

Basics of HTML (some repetition)

Cascading Style Sheets (some repetition)

Web Design

Contents• HTML Quiz• Design• CSS basics• CSS examples• CV update

What, why, who?• Before you start to create a site, it’s vital that you have clear in

your mind – What type of site you are creating? – Why you are creating the site?– Who the site is for?

• Plan your layout and menus (navigation)– Pen and paper– Whiteboard

• Mockups (closer to final)– Use special mockup programs– Graphic editor as Paint .NET– Powerpoint or whatever you got

• Design rules– Menu to the left and content to the right– Try to follow standars and content visible

Balsamiq Mockups• http://balsamiq.com/products/mockups

Writing For The Web 1• Think about who you’re writing for?• Don’t start with a long "welcome" intro...• Don’t assume that everyone reading your Web site will have

an enormous screen or a fast internet connection• Keep paragraphs short and columns narrow• Line spacing of 1.5 or 2 is good• Never use blue or underlined text• Stick to the various conventions• Don’t arrange text in columns such that the reader has to

scroll the screen up and down• Don’t waste too much above-the-fold• Check the spelling of your pages• Swedish characters problem – å, ä, ö• <meta charset="utf-8"> or set charset=ISO-8859-1

Writing For The Web 2• Fonts

– Fonts are important. Some are more readable on screens, don’t use non-standard fonts that your readers are unlikely to have installed on their computer

• Colors – Readers will use your site’s color scheme to form a

subconscious opinion about you :-)

• Hyperlinks– Those 1 or 2 words, normally in blue and underlined, which your

visitor can click on to move to another local page or another site on internet.

– <a href="more.html">More local stuff</a>– <a href="http://www.google.com">Google</a>

• Mailto links– <a href="mailto:[email protected]?Subject=Hello!">Send

Mail</a>

Repetition basics of HTML 1• An HTML file contains a mixture of page

content and formatting commands• HTML tags generally occur in pairs

Repetition basics of HTML 2• Tags: <tag> your content </tag>

– The <head> tag contains information about the page as a whole– The <title> tag which is where your page’s title gets put– The </ > tag means "close the previous tag"– The paragraph <p> tag starts each new block of text– The <b> tag makes text bold and <i> makes it italic– 6 heading levels, the main heading on your page may be <h1> or <h2>

• Meta tags– Meta-tags are a way for a web page to supply information about itself to

the web browser that is displaying the page<meta name="description" content="Latest availability for the Grand Hotel">

<meta name="keywords" content="availability, late bookings, vacant rooms">

• HTML visibility– Everyone that can view your page can read and copy your code

• HTML validation ensure that your code is correct– Built-in in some tools or use http://validator.w3.org

Accessibility design• Build accessibility (people with sight and mobility problems) in

as early as possible in the overall design process since it can be very very time-consuming to retrofit as an afterthought

– Provide alternative ALT text for every picture or image that you use– Don’t create information which can’t be understood by those who can’t

see colours properly– Ensure that there is sufficient contrast between text and background

colours– Avoid scrolling text and other dynamic effects – Avoid any technique which may produce flickering effects on-screen – Use the clearest and simplest language for site content– Keep paragraphs short, and include some white space between them – Do not use frames, screen readers don’t like them. – Dark text on a light background works better that light text on a dark

background– Use a line spacing of around 1.5 to ensure that the text on a page

doesn’t look too "heavy"

Cascading Style Sheets• CSS enable separation of apperance and content

– Old way to do styles<p><font face=verdana size=12pt> Your content </font><p>

– Tag stylep { font-family: Verdana; size: 12; }

• All your pages which are linked to the specific CSS file will be changed according to the configuration

• Pre HTML5 DOCTYPEs and DTD (Document Type Definition)

– The two main document types are XHTML 1.0 Strict and XHTML 1.0 Transitional

• Transitional is the version that allows both new-style CSS as well as old-fashioned <font> tags

• "Strict" mode doesn't allow <font> tags

The style element/attribute• The style= attribute can be used on most tags but is not

recommended to use– Defines features for a single HTML element, e.g.– <p style=”text-align: center”>Center me.</p>

• The <style> element: <style type=”text/css”> ... </style>– The <style> tag always goes in the <head> section– Defines style information for the whole HTML page– Requires the type=”text/css” attribute if using XHTML or HTML

< HTML5

• Example style for the selected element: body

<style type="text/css">body {

background-image: url(image.jpg);font-family: Verdana,sans-serif;font-size: 20px;color: green;

}</style>

The style element/attribute

CSS SyntaxA CSS rule has two main parts: a selector, and one or more declarations:

CSS font properties: http://www.w3schools.com/css/css_font.asp

h1 {font-size:2.5em;} /* 40px/16=2.5em */h2 {font-size:1.875em;} /* 30px/16=1.875em */p {font-size:0.875em;} /* 14px/16=0.875em */

Use a Combination of Percent and Em may work best!

http://www.w3schools.com/css/css_font.asp

CSS Reference

http://www.w3schools.com/

Have many greatresources!

CSS and the link tag• To link to a external separate CSS style sheet, use the

link tag instead– <link rel=”stylesheet” type=”text/css” href=”string”>– rel= relation between the page and the destination resource– Requires the type=”text/css” attribute if using XHTML or HTML

< HTML5– More about CSS later!

body{

font-family: verdana, sans-serif;}div{

position: relative;left: 30px;

}p,ul,li {

font-size: 10pt;}.boldText{

font-weight: bold;}#content {

margin-left: 140px; border-left: 1px solid gray;

}

CSS – cascading style sheets• CSS is an extension to basic HTML that allows you to

style your web pages apperance– Style separates content from apperance of your page– CSS can be used to specify fonts, colors, image background,

the looks of your links and many other attributes

• CSS can be embedded into your webpage (head or inline) or stored in an external text file that you can then link to your web page

Precedence

Class based styles• A class is a style that you can use anywhere on a web

page, rather than for a particular HTML tag• You can customise and create styles to the way you want

and reuse them anywhere

<body><p class="mystyle">Hello World </p>

</body>

.mystyle {

font-family: Geneva, Arial, Helvetica, sans-serif;font-size: 20px;color: red;

}

Basics of CSS• Format > Style Sheets > Link option

to enable CSS file in Amaya

old doctype

Basics of CSS• Fonts and CSS

– Sans-serif fonts are Arial, Verdana etc. – Serifs fonts are Courier New, Times New Roman etc. with

embellishments on the ends of the characters– Serifs fonts works best for body text and sans-serif fonts for

headlines and picture captions

• Fixed with fonts versus different width fonts– Usually different width fonts looks best

• Making Styles work for you – Keep the number of styles (tag and class) to a minimum– Choose your class names with care. Pick names based on what

the class is used for, not what it looks like

• Use a better CSS editor– Topstyle Lite etc.

HTML Markup Tags Names • To make the most of HTML and CSS you need to know what

tag names are available to you• You can find a complete list on the internet, but here are a few

to get you started

HTML markup cheat sheets

ID-based styles• HTML allows you to assign a unique name, or id, to any tag on

a page. The only stipulation is that a name must be unique on that page

– <h2>About Cheddar Cheese</h2> • We can give this heading a unique id by changing the opening

h2 tag thus – <h2 id="about-cheese">About Cheddar Cheese</h2>

• Unless you say otherwise, this heading will appear as any h2 heading would, according to the h2 entry in your style sheet. But because this particular heading has its own id, we can do something rather clever in the css file, like this

• Notice that ID have # and class have . as first character in the style name

#about-cheese { color: navy; }

TopStyle CSS editor

CSS size %, px, em or xx-small - xx-largeThe unit em is relative to the users selected size for elements as font etc.If the users selected font size is 16px, 0.75em is equal to 12px. % works similar.In design with absolute layouts and many graphical effects pixels are simpler to work with.http://css-tricks.com/2580-css-font-size/

Extreme CSS

More about CSS• CSS can be very complex to set up

– There are 600 pages+ books in the subject!

• It is advised to begin with a ready-made design from resources as: http://oswd.org or http://www.opendesigns.org/

• One of the most important concept in css-based layout is the ”css box model”

– It explains how padding, spacing, justification (left, right, centred, etc.) and margins interact to affect the final position of an item on a page

From: http://www.w3.org/TR/css3-box/

http://oswd.org/

http://www.opendesigns.org/

Page layouts and div tags• Many web sites typically use a top section that uses the whole

width of the page and a 2 or 3 column layout below– Having the the title, logo etc. at top, the menu in the left column,

and the content in the other column and perhaps a footer

• CSS in combination with <div> tags can achive this layout– Div stands for division or divider and is used to specify its

position on the page, relative to the top left hand corner or to other divs

ID based CSS

Page layouts in HTML5• Doing the same layout in HTML5 works in a similar way

– Using the markup that is suited for layouts like below

• CSS is of course still needed http://www.dave-woods.co.uk/index.php/html5-tutorial-getting-started/

HTML5 – page layout elements 1

• The WHATWG spec. defines the elements as follows:

– The header element is a group of introductory or navigational aids.

– The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

– The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.

HTML5 – page layout elements 2

• The WHATWG spec. defines the elements as follows:

– The nav element should be reserved for navigation that is of primary importance.

– The aside element represents a part of the page that’s “tangentially related to the content around the aside element, and which could be considered separate from that content.”

– A footer element, according to the spec, represents a footer for the section of content that is its nearest ancestor. The “section” of content could be the entire document, or it could be a section, article, or aside element.

Debug: Chrome – Ctrl-shift-I

Debug: Internet Explorer - F12

Debug: Firefox – Ctrl-shift-I

Firefox - Web developer toolbox and Firebug plugin

Basics of HTML (some repetition) Cascading Style Sheets...

Documents

Transcript of Basics of HTML (some repetition) Cascading Style Sheets...