1. Web Design (4) Validation and Tag Attributes

2. Brackets - text colours Commented-out items:grey Tags:blue Attribute names:green Text in double quotes:orange

3. Validation In Brackets click on the ‘Extension Manager’ (2 nd icon down ‘lego brick’ on right of screen) In the search box enter ‘W3CValidation’ What does W3C stand for? World Wide Web Consortium What does W3C do? Sets standards in coding for browsers to follow Click on ‘install’

4. W3C Validation – try out Make a purposeful error to your work e.g. remove a tag ending What does the W3C Validation window (at the foot of the page) tell you? Note: the Validation Window will appear and disappear by clicking on the yellow triangle (bottom right of screen) Now correct the error & ‘Save All’ (via ‘File’ or Ctrl+Alt+S) Look again at the W3C Validation window

5. More tag possibilities Within your text (inline), you can add to text: Bold Italic Underline Also you can highlight text using For a horizontal rule line use Now experiment for a while, using these new tags

6. Unordered lists (bullet points) Communities along the Wye Valley: Chepstow St Arvans Tintern Llandogo Redbrook Monmouth ( list item)

7. Ordered lists (numbers) Ken Follett’s 20 th Century trilogy: Fall of Giants Winter of the World Edge of Eternity

8. Tags often have ‘Attributes’ For example: A list of those who crossed the finish line after the first ten runners! Smith Jones White

9. Tags, Attributes and Values A tag in its basic form has a start tag Then some content and an end tag However tags can have ‘Attributes’ With corresponding ‘Values’ W3Schools.com ^ Attribute ^ Attribute Value Enter this code into brackets & go to live preview Roll over the text and what do you notice ? The title attribute has created a ‘tooltip’ in which is displayed the attribute value

10. Tags with no inner content Tags with inner content: eg some inner text here However, some tags do not need an inner content. One example is the image tag. From our group website is the following code:

11. The Image Tag src (short for ’source’) defines the URL of the image What does URL stand for? Universal Resource Locator In this case, the browser is sent to the images folder of this website (alt defines the alternative text for the image) More about images later!

12. Three Tag Groups Tags can be divided into three groups: Block-level, Inline and Invisible Block-level – a tag that begins and ends a line Can you give an example?

13. Three Tag Groups (cont.) Inline – tags that are usually nested inside block-level tags Can you give an example? Together, block-level and inline tags look like this : The quick brown fox jumps over the lazy dog

14. Three Tag Groups (cont.) Invisible – tags that do not show content on the web page, but instead give the browser information or instruction. Can you give an example? Fred’s Home Page Note: Invisible Tags are not to be confused with ‘commented out’ code, which the browser ignores completely.