Basic Page Structure and HTML
- Here's all you need to make a web page:
- An HTML file, which is just a plain text file with a .html or .htm extension (HTML = HyperText Markup Language)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Page Title</title> </head> <body> <h1>Header</h1> <p>Paragraph</p> <!-- Comment --> </body> </html>(Yellow boxes like this ↑ ↑ ↑ contain code/markup that you can copy into your html page.)
- What the HTML above looks like when opened in a browser:
Tells the browser which version of markup is being used.
- HTML 5 is the current standard
- <html> - the root of the document, everything else goes inside the <html> tags
<html> <!-- The head and body go in between these tags --> </html>
- <head> - functional information that does not show up in the browser window
- <meta> - meta data - in this case, charset is the character set being used in the page
- <title> -
the page title that appears in tabs and bookmarks - should be unique for each page!
<meta charset="UTF-8" />
- <body> - where the content goes!
<body> <h1>Header</h1> <p>Paragraph</p> <!-- Comment --> </body>
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6> (only one through six!)
- Only one <h1> per page (usually the same as the title of the page)
- hierarchical, like an outline (<h2>'s are subsections of <h1>'s,<h3>'s are subsections of <h2>'s, etc.)
- short phrases, not whole paragraphs
- organizes content
- improves accessibility
<h1>Illinois State University</h1> <h2>College of Fine Arts</h2> <h3>Arts Technology</h3> <h4>ATK 201</h4> <h4>ATK 301</h4> <h4>ATK 302</h4> <h3>School of Art</h3> <h3>School of Music</h3> <h3>School of Theater and Dance</h3> <h2>College of Arts and Sciences</h2> <h3>Anthropology</h3> <h3>Biology</h3> <h3>Chemistry</h3>
Paragraphs and Line Breaks
- <p> - contains one or more sentences
- <br> - creates a new line inside a paragraph (does not have a closing tag!)
- never use more than one <br> in a row! Use a <p> instead!
<p>Here is a chunk of text which is inside a paragraph</p> <p>Here is another chunk of text in another paragraph<br> with a line break.</p>
- Hidden text that does not appear in browser window
- <!-- (start comment)
<!-- anything between these two tags will not show up in the page -->
- updated meanings for HTML5
- <i> (short for italics) - alternative voice
- <em> (short for emphasis) - stress emphasis
- <b> (short for bold) - stylistically offset text (not more important).
- <strong> - strong importance
<p>The <i>schlemiel</i> spills his soup on the <i>schlimazel</i></p> <p>Do <em>not</em> walk on the grass</p> <p>This is <b>bold</b> just because I want it to be <b>bold</b></p> <p>When turning in your assignment <strong>do not forget to click submit</strong>.</p>
- Bullet lists (also good for navigation)
- <ul> - surrounds the whole list
- <li> - individual list items
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul>