| Course/Class Number: 58111/46065 |
| Class Title: 58111 (X)HTML: Beginning |
Resources
http://www.elizabethcastro.com/html6ed/examples/
1. Getting Started
Introductions and announcements
IMPORTANT NOTE: Step by step instructions are in boxes.
Please perform every step before continuing.
Raise your hand and let me know if you have problems with any step!
About browsers
Example files
View page source: Ctrl > U or Command > U
Use Notepad in Windows, Textedit in Mac.
How to open a file with your choice of program
A. Open Firefox and keep it open for the rest of the class. Use ONLY Firefox.
B. Open the Resource link http://www.elizabethcastro.com/html6ed/examples/ in a separate tab.
Keep it open for the rest of the class.C. Create a folder on your desktop named www
D. Open a window into that folder and keep it open for the rest of class.
E. Go back to Firefox. Save Castro’s first example file as index.htm
F. Open your text editor and keep it open for the rest of the class.
G. Right-click on the index.htm file in your www folder.
Choose “Open With.”
Choose “Firefox.”H. Right-click on the index.htm file in your www folder.
Choose “Open With.”
Choose “Notepad” or “Textedit.”
2. (X)HTML [Ch. 1]
HTML vs XHTML
Attributes and Values
Boxes model
3. Files
File location
Filenames [p 34]
ABOUT: .htm vs .html
4. Essential Tags [Ch. 3]
Container tags
Inline tags
HTML vs. XHTML doctype declarations [p 56]
head [p 58]
title [p 60]
body
A. Create a new blank file in your text editor.
B. Save it as simple.htm
C. Use the <html>, <head>, <title> and <body> tags to create a properly nested HTML page.
D. Put the text “Hello World” inside the body of your new page.
REMEMBER: ANYTHING THE VIEWER SHOULD SEE MUST BE INSIDE THE BODY TAGS!
5. Block-level tags [Ch 3, p 62]
paragraphs <p>
<br> vs. <br /> [p 66]
headings <h1> – <h6> [p 61]
<div> [p 64]
<blockquote> [p 74]
comments [p 67]
preformatted [p 73]
<hr /> [p 101]
A. Use the <p>, <br />, <h1>, <blockquote> and <hr /> tags to create a properly nested HTML page.
6. HTML Standards
Flavors & doctypes [p 40]
xmlns attribute [p 56]
browser differences
7. Inline tags
<span> [p 65]
<b> vs. <strong> [p 70]
<i> vs. <em>
<u>
<big> or <small> [p 71]
<sub> or <sup> [p 76]
A. Use the <strong>, <em>, <u>, <big> and <small> tags to create a properly nested HTML page.