1 HTML

2 HTML Defines STRUCTUREHyperText Markup Language HTML should be used for defining WHAT is on the page NOT how it LOOKS Why? Consistency Alternate presentation Simplicity CSS (Cascading Style Sheets) for format (next week)

3 General Rules Two types of commandsSingle commands < command> or < command /> Start/end commands ... Tags can have additional information associated with them – attributes … Blank lines and spaces don’t matter

4 Regular text = paragraph Header numbers represent style, not order The Basics Regular text = paragraph Header numbers represent style, not order Lists consist of list delimiters and list items

5 Want to do something else?Resources Google it!

6 VoiceOver Rotor (start at 1:15)Using HTML: Voiceover VoiceOver Rotor (start at 1:15)

7 X HTML Start/End Tags Are like boxes: They are not chain linksYou can nest them You can put them side by side They are not chain links You can not intertwine them

8 Important Tag DifferenceWhether they start a new line or not Paragraphs do Emphasize does not

9 Correctly Nested Tags Some can take any content Some have restrictionsdivisions, footers Some have restrictions Paragraphs can not have lists inside them Some tags are limited as to where they can appear List items can only appear in lists Incorrectly nested tags MAY appear to work

10 Is Everything Working? Check the following If notDoes COMP 101 show up on your schedule? Do you have COMP 101 in Sakai? Did you get an invitation to Piazza? Is your name on the PAGES list? Do you have space on www101s17.cs.unc.edu? After class, sign the sheet and identify what is missing

11 HTML

12 Correctly Nested Tags Some can take any content Some have restrictionsdivisions, footers Some have restrictions Paragraphs can not have lists inside them Some tags are limited as to where they can appear List items can only appear in lists Incorrectly nested tags MAY appear to work

13 Tags That Can Take Any ContentAllows you to break up your page into logical pieces Good structure Formatting (next week) Visible page structure header main footer Many different other tags div, section, …

14 Structuring Your Page Header should contain Footer closes the pageMain title Navigation (coming soon) Footer closes the page Author Date Main Everything else

15 Special Characters

16 Special symbols < and > are special symbols with special meanings How would you display A < B ? Suggestions? < for < and > for > & is an escape symbol, handled specially. Always ends with ; Means that you need a special way to display “&” too: & Full lists on Resources page

17 jsfiddle

18 Setting up jsfiddle Create a free account Verify your address

19 Using jsfiddle Log in to your account Create a new fiddleSave a fiddle Update a fiddle