FUNDAMENTALS OF HTML, XHTML & CSS

Lesson 4

THE OBJECTIVES -

In this lesson you will begin coding in HTML to provide the structure

You will learn the three possible locations of CS sheets and the strength of each in relation to HTML

You will style with CSS

THE W3C AND PAGE VALIDATION

Page validation is viewed by many web designers as a tool to help troubleshoot HTML and CSS problems such as a typographical errors or incorrect syntax (rules).

I’d like you think of the W3C page validation as the equivalent of spellcheck.

Remember that 100% validations is a worthy goal but not always possible nor necessary.

Lets test a popular website and see of the site validates and if it does not validate what are the errors.

LET’S PUT WC3 PAGE VALIDATOR TO USE

Launch an internet bowser In the URL (uniform resource

locator) box, type the following – http://validator.w3.org/ Type any website address that

comes to mind Check for errors

PREPARATION

On the Desktop, right-click to create a New Folder and name it TadsTees

Double-click this folder to open it and create a New Folder and name it images

Launch the text editor, BBEdit (if at home, any text editor available) then choose File > New > HTML document

Title it index.html then click create Choose File > Save as > index.html inside the Tad

Tees folder Visit my website at www.karinehmasihi.com and

from Lesson Files download Tad Tshirt logo from lesson 4 resources

Drag it inside the images folder within Tad Tees folder

HTML STRUCTUREDo you remember Tad the T-shirt designer? Well he’s receiving private coding lessons from one of the web designers. The designer begins by explaining the basic structure of an HTML page.

FOLLOW THE STEPS BELOW IN SEQUENTIALLY -

1. Launch BBEdit and choose File > Open > index.html

2. Click where the cursor is blinking within the body tag and type the following code –

<h1>Tad's Tees is open for business!</h1>

3. Choose File > Save >

4. Choose Markup > preview in Chrome

Congratulations, you have written your first h1 code

HTML CONT’D

5. press enter and type the paragraph below-

<p>All of us here at Tad's Tees are very excited to announce the expansion of our retail store. To celebrate the occasion we are now offering for sale 6 new limited edition t-shirts with new designs.</p>

Command + s to save > preview in the browser

You just wrote your first paragraph code

HTML CONT’D

6. Next, to create a hyperllink, write the following ‘anchor tag’ either side of the word t-shirts

<a>t-shirts</a>

Command + s to save > preview in the browser

HTML CONT’D

7. To continue with the link tag, click after the letter ‘a’ inside the opening tag and type

<a href="http://www.karinehmasihi.com">t-shirts</a>

Command + s to save > preview in the browser

You just created your first clickable link

HTML CONT’D

8. To insert the logo we downloaded earlier inside the images folder, click once after the open body tag and press enter and type

<img src="images/tadstees_logo.png" />

You just wrote the code for an image link

Command + s to save > preview in the browser

STYLING WITH CSS

There are three locations to save a cascading style sheets (CSS)

External (with a <link> tag to link it to an html file) Internal (above the body tag)

Inline (within html codes<a>t-shirt</a> tag

HENCE THE WORD ‘CASCADING’ The strength of each style depends on how close they are to the html structure

LET’S STYLE WITH CSS

To write an internal style for heading 1 or h1, click below the closing head tag </head> and type -

<style type="text/css">

h1 { color:#e8662d; }

</style>

(there is no space between the bracket and the slash)

Command + s to save > preview in the browser

Congratulations, you just wrote your first code in CSS

Congrats, you just wrote your first internal CSS code. Now, let me show you how to turn the internal into an external sheet.

1. In BBedit, choose File > New Text Document

2. Choose File > Save as > styles.css inside the TadsTees folder

3. In the index.html document locate the rules created within the <style> tags and select them. Not the the opening <style> and closing </style> tags.

4. Choose Edit > Cut

5. In the styles.css document, choose Edit > Paste > Save

The entire external style sheet acts as a substitute for the <style> tags in the HTML document, hence the reason we don’t need to copy the opening and closing tags.

CSS CONT’D

CSS EXTERNAL CONT’D

In the index.html document choose File > Save > preview in the browser

And notice the style has gone To bring the style back we need to write a <link> tag to

link the index.html with the styles.css documents

1. In the index.html document, click after the closing style tag </style) then press Enter and type –

<link rel="stylesheet" type="text/css" href="styles.css" />

This concludes Teacher Demonstration Lesson 4 and carries 10% of your total grade.

Thank you for your focus