Workshop 2

HTML in Depth
January 24, 2013
 
 
 

HTML Structure

html-structure.html

Filing Structure

Download inflatables.zip

White space

HTML makes no difference between horizontal and vertical spaces you make in the actual HTML file. To make a visible space, you can use the   tag.

Block vs. inline elements

Block

• div (general purpose block element)
• p (paragraph)
• h1, h2, h3, h4, h5, h6 (all headings)
• ul, ol, dl, li, dt, dd (lists, list items, etc.)
• table (tables)
• blockquote (indented paragraph meant for long passage of text)
• form (an input form)

Inline

• span (general purpose inline element)
• a (link)
• strong (strong text)
• em (emphasized text)
• img (image)
• br (line-break)
• input (input field used in forms)

You can change the display property of any element using CSS.

Types of Links

• internal link
• external link
• link that opens in a new window or tab
• link with a title
• image link
• mailto link
• id selector link

html-links.html

Troubleshooting Questions to Ask Yourself

• Do all tags (that need to) have an opening and closing tag?
• Is everything I want to display in the body section?
• Do all links or assets have the right file path?
• Are all assets uploaded/in the right place?
• Am I editing the correct file?
• Did I include the correct DOCTYPE or did I include one at all?
• Does my code validate? Markup Validation Service