week 2 html

Speaking in Code

HTML

Brian Lee

Carolynn Vu (TA)

Speaking in Code

Recap: The Internet

• We have not yet transcended the laws of nature

• Web is a library of documents and files

• Browsers are Readers of HTML

• Communicate via Protocols (rules)

Speaking in Code

Recap: HTML

• HyperText Markup Language

• Way to organize content for browsers to read

Speaking in Code

Recap: HTML Tags

• Don’t forget to close tags

– <html></html>

– <img src=‘blah.jpg’ />

• <!DOCTYPE html>

– Instruction to browser that it page is html

Speaking in Code

<head> vs. <body>

• What goes in the <head>

– Titles, scripts, style sheets

– What makes this page work?

• What goes in the <body>

– Content

– ie) paragraphs, text, tables

Speaking in Code

What do the tags do?

• <html>

• <head>

• <title>

• <body>

• <h1>

• <p>

• <img>

– Starts and ends HTML documents

– Defines important aspects of page

– Sets title of page (ie. top of tab)

– Viewable portion of page

– Type of header

– Paragraphs

– Images (anything special about this?)

Speaking in Code

Recap: Format of Web Pages

<!DOCTYPE html><html>

<head><title>Best Page Ever</title>

</head><body>

<h1>Largest Header</h1><p>Paragraph</p><strong>Bold Text</strong><a href=‘http://www.google.com’>Link to Google</a>

</body></html>

Speaking in Code

Common Mistakes

• Don’t forget to close tags

<html><html/> (what’s wrong)

• Avoid Typos

<title>What the.. Not Working</tile>

• When writing <a href=‘http://www.google.com'></a>

– http:// crucial!

Speaking in Code

Best Practice - Indenting

• Indenting allows for cleaner code

• User-readability

– Not only others but for yourself!

• Helps catch mistakes

– Did you close the tag?

Speaking in Code

What happens if you don’t indent

<!DOCTYPE html><html><head><title>Best Page Ever</title></head><body><h1>Largest Header</h1><p>Paragraph</p><strong>Bold Text</strong><a href=‘http://www.google.com’>Link to Google</a></body></html>

Speaking in Code

Lists!

Ordered list <ol>

1. Wake up

2. Eat

3. Sleep

Unordered list <ul>

• Make slides for class

• Go grocery shopping

• Look for apartments

Speaking in Code

List Items

Speaking in Code

Comments

• Useful for leaving notes

• Does not show in the browser

<body><!– This list means absolutely nothing --><ol>

<li>List Item 1</li><li>List Item 2</li><li>List Item 3</li>

</ol></body>

Speaking in Code

Styling

• Webpages don’t have to be ugly

• Can style in line

<body><ol>

<!– Wow cool font bro <li style='font-family:Garamond; font-size:16px'>List Item 1</li><li>List Item 2</li><li>List Item 3</li>

</ol></body>

Speaking in Code

Ready to Try It Yourself?

http://bit.ly/htmlbasics2

Recommended for next week:


mailto:http://bit.ly/htmlbasics2





Speaking in Code

Sync-Up!

• We can make lists

– As deep

• As you want

• Styling

– Keep in mind we will

use CSS later

<ul><li>

We can make lists<ul>

<li>As Deep<ul>

<li>As you want</li>

</ul></li>

</ul></li>

</ul>

Speaking in Code

Reiterating Indentation<body><p>Sometimes I think that indentation might be unnecessary and takes an extra key stroke but then things like this can happen where you have a million lines and have no idea which tags have to be closed where well that sucks</p><ul><li>Imagine<ul><li>This was<ul><li>Over</li><li>300+ Lines of HTML</li></ul></li></ul></li></ul></body>

week 2 html

Documents