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 –  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 and from Lesson Files download Tad Tshirt logo from lesson 4 resourceswww.karinehmasihi.com  Drag it inside the images folder within Tad Tees folder

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.

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 – Tad's Tees is open for business! 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- 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. 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 t-shirts 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 t-shirts 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 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 tag to link it to an html file)  Internal (above the body tag)  Inline (within html codes t-shirt 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 and type - h1 { color:#e8662d; } (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 tags and select them. Not the the opening and closing 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 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 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 –

 This concludes Teacher Demonstration Lesson 4 and carries 10% of your total grade. Thank you for your focus