1. HTML

2. HTML Defines STRUCTURE
HyperText 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 commands
Single commands
< command> or < command />
Start/end commands
<command> ... </command>
Tags can have additional information associated with them – attributes
<command attribute=…> … </command>
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 links
You can nest them
You can put them side by side
They are not chain links
You can not intertwine them

8. Important Tag Difference
Whether they start a new line or not
Paragraphs do
Emphasize does not

9. Correctly Nested Tags Some can take any content Some have restrictions
divisions, 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 not
Does 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 restrictions
divisions, 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 Content
Allows 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 page
Main 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 fiddle
Save a fiddle
Update a fiddle