(Fast) Introduction to HTML & CSS

(Fast) Introduction to HTML & CSS

Dave Kelly ( @davkell )

for @091Labs

What are HTML & CSS?

HTML structures documents on the web– Tells browser what content is (not what it

means)

CSS = presentation (how things look)

JavaScript adds interaction / behaviours

Peanut lifted from http://www.alistapart.com/articles/understandingprogressiveenhancement/

http://www.ambientage.com/blog/091labs : 1

Why separate?

Standards....

• define the mark-up you use • tell the browser what to do with it

– HTML 4.01 (Don’t use)

– xHTML1.0• Frameset (nope)• Transitional (nope)• Strict *

– HTML5 (New. Not fully supported / implemented. It’s the future.)

• All those defined standards....do all browsers work the same?

Tools

• Firefox (wide support for standards)– Firebug (Firefox add-on, Chrome also, but weak). Your

best friend with front-end web dev.– Web Developer Toolbar (Firefox add-on)

• Validators– HTML: http://validator.w3.org– CSS: http://jigsaw.w3.org

• Development environment– Netbeans / Aptana for me.... Your choice (not

WYSIWYG!!)• (My) Development process

– Firefox -> Webkit (chrome / safari) -> IE8 -> IE7 -> (IE6?)– Browsershots.org

http://www.ambientage.com/blog/091labs : 2

HTML

• Made up of “tags”  (elements)– <h1>I’m an important heading</h1> (Heading level 1)  – <img src=”images/myprofilepic.jpg” alt=”It’s a picture of me!!” />

(Image tag)– Elements can contain plain text, other elements, or both

• No state / no logic (Mark-up content only, not programming)

• xHTML Strict elements...– must be properly nested– must be closed– must be lower case– attributes must have a value

HTML Tags

• Tags are usually paired (e.g..., <h1> and </h1>) – Some elements are “self-closing” e.g. <br /> <img … />

• Some elements may include attributes, (additional information that is included inside the start tag).

• Every HTML document contains standard tags. • Each document consists of a head and body

– The head contains the title (and more…), and – The body contains the actual text that is made up of

paragraphs, lists, images, and other elements

Simple HTML Example

http://www.ambientage.com/blog/091labs : 3

Some HTML tag examples

• Headings• <h1></h1> , <h2> </h2> …… <h6> </h6>

• Paragraph: <p>Some text </p>• Lists

• Ordered List <ol> <li>I’m a list item</li></ol>• Unordered list <ul> <li>I’m a list item</li> </ul>

• Document Section <div></div> (Important for page layouts!)• Image <img src=“../images/mypic.jpg” alt=“My Picture” title=“It’s me!” />• Links <a href=“http://www.google.com”>Google</a>• Table <table><tr><td>table cell</td></tr>

<tr><td>second row cell</td></tr>

</table>

http://www.ambientage.com/blog/091labs : 4 & 5

Some HTML attribute examples

• HTML tags can have attributes => give some more info about the tag

• Most can have:

id Unique identifier for that element (on a page)

class A classname for an element (more shortly)

title Tooltip text

style Inline css (more shortly)

<h1 id=“mainHeading” class=“myHeadingClass” title=“Website title” style=“color: #000000;”>My Heading</h1>

HTML Forms

• Forms are used to accept information from the Web page user

• Forms can use text boxes, password boxes, check boxes, radio buttons, text areas, drop-down lists, hidden fields, as well as Submit and Clear buttons.

• To create a form, the <form></form> element is used.

• Forms have 2 basic attributes: action & method, e.g., <form name=“myForm” action=“processPage.php”

method=“post”>

action = “where’s the data going?”method = “how’s it getting there? (post vs get)”

HTML Forms

Control Type Tag/Attributes UsedText box <input type=“text” name=“field_name”

value=“initial_value” size=“size_of_field” maxlength=“max_chars_allowed” />

Password Input Box <input type=“password” name=“field_name” />(Similar to textbox ~ obscures data entered)

Radio Buttons <input type=“radio name=“group_name” value=“value_if_selected” [checked=“checked”] />

Check Boxes <input type=“checkbox” name=“field_name” [checked=“checked”] value=“value_if_selected” />

List Boxes <select name=“field_name”> <option> (Defines each item in the list)</option>

HTML Forms

Control Type Tag/Attributes UsedLarge Text Area <textarea name=“field_name”

cols=“no_of_columns” rows=“no_of_rows” ></textarea>

Hidden Field <input type=“hidden” name=“field_name” value=“value_of_field” />

Submit Button <input type=“submit” [value=“text_for_button”] name=“field_name” />

Reset Button <input type=“reset” [value=“text_for_button”] name=“field_name” />

CSS (Cascading Style Sheets)

• Handles presentation of web page – It allows document authors to specify the look of a web page

(e.g. fonts, spacing, margins,etc.) separately from the structure of the web page (e.g. body, text, links, etc.)

• There are 3 ways document styles can be defined:

1. Inline (No!)

2. Internal (ehhhm….no)

3. External (Yes!)

• Concept of the “Cascade”– If a duplicate style is declared, it “cascades” through various

layers, each overriding the previous…

The Cascade

• The Layers1. User agent settings (default browser styles - user is usually

able to modify some of these)

2. Any External (Linked) style sheets (.css file)

3. Any Internal styles (in head section inside <style> tags)

4. Inline Styles (in the style attribute of an element)

• Each level of style overrides the previous level where duplicate properties are defined

Creating Style Rules

• There are 2 pieces to each rule:– The Selector ~ tells the rule what elements it should

apply to– The Rule ~ does the formatting of the element

– Made up of a property:value pair

• The formatting of rules:Selector { property1: value1;

property2: value2;

propertyN: valueN;

}

http://www.ambientage.com/blog/091labs : 6

Selectors: Match by Element

• Easiest selector method is to use an element name, e.g.

– p { color: #000000; }

• Doing this causes all the tags of that name (i.e.<p>) to be formatted according to the style rule declared.

• Possible to do this for multiple elements

– h1, h2, h5, p { colour: #ff0000;}

Selectors: Match by Class

• Used to display elements of the same type in different ways, e.g.

– If the page you’re working with has 2 colours in its background, you need to put light text on the dark background, and dark text on the light background

• Classes are defined using a dot (.) and a given name, e.g.

– .lightText { color: #ffffff }

• To use the class in the document: – <p class=“lightText”>This is white text</p>

Selectors: Match by Identifier

• Used to display a specific element in a different way, e.g.

– If you need an element on a page presented in a particular way, you can use an Identifier (remember an element’s id attribute is unique to a page)

– Identifiers are defined using a hash (#) and a given name, e.g.

– #siteTitle{ font-family: ‘Times New Roman’, serif}

• To use the class in the document: – <h1 id=“siteTitle”>My Site Name</h1>

Inline Style Rules

…only apply to the current element…

Maintenance nightmare

Overrides other styles if duplicates declared

(because of the cascade)

Internal Style Rules

…only apply to the current page…

still slightly nightmarish to maintain

External Style Sheets (.css)

• These allow you to…– customise & alter the look of multiple web pages – ensure continuity of design throughout the website

• To link an external style sheet to a HTML page use the <link> tag in the <head> section of the document, e.g.

http://www.ambientage.com/blog/091labs : 7

Link Styles

• Pseudo-classes are identifiers understood by the browser to apply to a subset of elements, without the element needing to be explicitly tagged with the style

Pseudo-Class Matches

a:link { } Unvisited Links

a:visited { } Visited Links

a:hover { } The link that the browser pointer is hovering over

a:active { } Active Links

a:focus { } The link that has user interface focus

Questions?

Get in touch…• dkelly@ambientage.com• @davkell• linkedin.com/in/davkell

• www.ambientage.com• www.davidkelly.ie

• Slides & Footnotes • www.ambientage.com/blog/091labs/