![Page 1: Create a free account Verify your email address](https://reader036.vdocument.in/reader036/viewer/2022082819/56649f345503460f94c5248e/html5/thumbnails/1.jpg)
HTML Basics
![Page 2: Create a free account Verify your email address](https://reader036.vdocument.in/reader036/viewer/2022082819/56649f345503460f94c5248e/html5/thumbnails/2.jpg)
Setting up CODEPEN
Create a free account Verify your email address
![Page 3: Create a free account Verify your email address](https://reader036.vdocument.in/reader036/viewer/2022082819/56649f345503460f94c5248e/html5/thumbnails/3.jpg)
Using CODEPEN
Log in to your account Click on the posted codepen URL Click Fork
![Page 4: Create a free account Verify your email address](https://reader036.vdocument.in/reader036/viewer/2022082819/56649f345503460f94c5248e/html5/thumbnails/4.jpg)
HTML Defines STRUCTURE
HyperText Markup Language HTML should be used for defining
WHAT is on the pageNOT how it LOOKS
Why?› Consistency› Alternate presentation› Simplicity
CSS (Cascading Style Sheets) for format (Thursday)
![Page 5: Create a free account Verify your email address](https://reader036.vdocument.in/reader036/viewer/2022082819/56649f345503460f94c5248e/html5/thumbnails/5.jpg)
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
![Page 6: Create a free account Verify your email address](https://reader036.vdocument.in/reader036/viewer/2022082819/56649f345503460f94c5248e/html5/thumbnails/6.jpg)
HTML Start/End Tags
Are like boxes:› You can nest them› You can put them side by side
They are not links› You can not intertwine them
![Page 7: Create a free account Verify your email address](https://reader036.vdocument.in/reader036/viewer/2022082819/56649f345503460f94c5248e/html5/thumbnails/7.jpg)
Another Important Difference
Whether they start a new line or not› Paragraphs do› Emphasize does not
![Page 8: Create a free account Verify your email address](https://reader036.vdocument.in/reader036/viewer/2022082819/56649f345503460f94c5248e/html5/thumbnails/8.jpg)
Correctly Nested Tags
Some can take any content› 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
![Page 9: Create a free account Verify your email address](https://reader036.vdocument.in/reader036/viewer/2022082819/56649f345503460f94c5248e/html5/thumbnails/9.jpg)
Formatting your SOURCE
Comments<!-- any text you want -->
Indentation› Nested parentheses› Multi-line
Line up start and end Things inside belong one tab over
› Single line Start, content, end on a single line
Always include your name in date in every file
![Page 10: Create a free account Verify your email address](https://reader036.vdocument.in/reader036/viewer/2022082819/56649f345503460f94c5248e/html5/thumbnails/10.jpg)
The Basics
Regular text = paragraph
Header numbers represent style, not order
Lists consist of list delimiters and list items
![Page 11: Create a free account Verify your email address](https://reader036.vdocument.in/reader036/viewer/2022082819/56649f345503460f94c5248e/html5/thumbnails/11.jpg)
Lab