1. Fundamentals of HTML, XHTML & CSS
Lesson 2

2. In this lesson you will begin coding in HTML to provide the structure
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

3. 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 if the site validates and if it doesn’t validate what are the errors.

4. Let’s put wC3 page validator to use
Launch the bowser Google Chrome
In the URL (uniform resource locator) box, type the following –
Type any website address that comes to mind
Check for errors/warnings

5. HTML structure
Do 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.

6. Preparation Access your server folder
You will see several original folders
Right-click and create a New folder > name it > Tads_mycopy
Double-click ‘tadstees_site’ > using the shift-key on your keyboard > select both ‘index.html’ and ‘images’
Right-click to copy and paste both items inside your Tads_mycopy

7. Follow the steps below in sequentially -
Right-click ‘index.html’ > Open with BBedit
2. Click where the cursor is blinking within the body section 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

8. You just wrote your first paragraph code
HTML Cont’d
5. press enter and type the paragraph tag 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

9. HTML Cont’d <a>t-shirts</a>
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

10. You just created your first clickable link
HTML Cont’d
7. To continue with the link tag, click after the letter ‘a’ inside the opening tag and type
<a href="
Command + s to save > preview in the browser
You just created your first clickable link

11. HTML Cont’d <img src="images/tadstees_logo.png" />
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

12. HENCE THE WORD ‘CASCADING’
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 structure
HENCE THE WORD ‘CASCADING’
The strength of each style depends on how close they are to the html structure

13. Let’s style with CSS <style type="text/css"> h1 { color:#e8662d;
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

14. CSS CONT’D In BBedit, choose File > New Text Document
Congrats, you just wrote your first internal CSS code. Now, let me show you how to turn the internal into an external sheet.
In BBedit, choose File > New Text Document
Choose File > Save as >name it ‘styles.css’ > save inside Tads_mycopy folder
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.
Choose Edit > Cut
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.

15. 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
In the index.html document, click after the closing style tag
then press Enter and type –
</style)
<link rel="stylesheet" type="text/css" href="styles.css" />

16. Thank you for your focus
This concludes Teacher Demonstration Lesson 2 and carries 10% of your total grade.
Thank you for your focus
Related activities–
Listen to video tutorial (as many times as you wish)
Open the binder to Lesson 2, Read and follow the steps to begin creating a website for a ‘Smoothieworld’.
Complete Self-study_L 2 (course website)
Review_L2 (course webiste)