Beginning (X)HTML: Bonus Javascript

Course/Class Number: 58111/46065
Class Title: 58111 (X)HTML: Beginning

Resources

http://www.elizabethcastro.com/html6ed/examples/

Javascript

<script language=”JavaScript” class=”normal”>
<!– Hide this script from js-challenged browsers —

var name = “glenn”;
var domain = “gnorman.org”;
var first = “email Glenn”;
var last = “Norman”;

document.write(‘<a href=\”mailto:’ + name + ‘@’ + domain + ‘\”>’);
document.write(first + ‘ ‘ + last + ‘</a>’);

// Done Hiding –>
</script>

Beginning (X)HTML: Day 3

Course/Class Number: 58111/46065
Class Title: 58111 (X)HTML: Beginning

Resources

http://www.elizabethcastro.com/html6ed/examples/

Day 3

15. Developer Tools

Firefox Firebug

Firefox Web Developer Toolbar

A. Install Firebug.

B. Install Web Developer.

 

16. Lists [p 215]

ol, ul, li [p 216]

&bull; [p 423]

&diams; [p 429]

A. Create a new page named lists.htm.

B. Place one unordered list on the page.

C. Place one ordered list on the page.

D. Customize the bullets in your unordered list.

 

17. Uploading to Your Server

Ch 23 [p 353]

Firefox FireFTP

Mozilla FileZilla

A. Find the download page for FileZilla.

B. If it is not installed on your PC, download and install it.

 

18. Editors

Dreamweaver

Firefox Codetch – https://addons.mozilla.org/en-US/firefox/addon/codetch/

Firefox Browser Turns Editor – https://addons.mozilla.org/en-US/firefox/addon/browser-turns-editor/?src=api

www.w3schools.com/html/ “try it yourself” link

Windows: Notepad++

Mac: TextWrangler

 

19. Tables [Ch 16, p 227]

Plan/draw

tables [p 229]

tr, td

th [p 217]

attributes:

border [p 230]

width [p 232]

align [p 234 & 238]

cellpadding & cellspacing [p 242]

nesting [p 236]

colspan & rowspan [p 244]

A. Create a new page called table.htm.

B. Create a simple table from scratch.

 

20. Completing a Project

Plan, design and create:

A minimum of three pages linked to each other

Consistent page layout(s)

Graphics/graphical schemes (find them easily using Google’s Image Search)

And link to class home page

Beginning (X)HTML: Day 2

Course/Class Number: 58111/46065
Class Title: 58111 (X)HTML: Beginning

Resources

http://www.elizabethcastro.com/html6ed/examples/

Day 2

8. Special characters

Ch 21 [p 327]

App D [p 419]

A. Use at least two special characters on your index.htm page. Where did you get the code for these characters?

 

9. Elements, Attributes & Values

Elements: <p>, <div>

Attributes: align = “”

Values: “center” [p 62]

align=”center” /* is deprecated! *

App A [p 399]

A. Open w3.org

 

10. Images [Ch. 5]

formats [p 82]

img src [p 90]

alt [p 91]

width, height [p 92]

align [p 96]

as links [p 114, p 128]

A. Inside the www folder, create a folder named images

B. Download an image and save it in the images folder.

C. Place this image on your index.htm page using the tags above.

optional:

background-image [no -position, -repeat, -attachment]

imagemaps [p 116]

 

11. Links [Ch 6]

urls: absolute and relative [p 35]

a href [p 104]

title [p 72]

mailto [p 124]

named anchors [p 106]

A. On your index.htm page, create a link to your simple.htm page, using the tags above.

 

12. Creating and Using a Template

Use one master version of your page to create all your pages.

A. Save your index.htm page as template.htm

B. Remove all text and all images that aren’t part of the page layout itself.

 

13. CSS basics [Chs. 7, 8, 9]

Style rules

Structure vs. Formatting

Style rules in tags

A. Choose one paragraph and use style rules to make the text bold and red.

Internal style sheets [Ch 8, p 131]

B. Create an internal style sheet in your template.htm file.

Selectors [Ch 9, p 138]

The color attribute [plus the broader color discussion] [Ch 10, p 160-161]

color [p 160]

background-color [p 161 ]

link tag

C. Create an external style sheet called styles.css.

D. Link it to your template.htm file.

E. Move the paragraph style rule you created above to styles.css.

 

14. Font Formatting [Ch. 10]

font-family [plus the broader face & resolution discussions] [p 152]

font-size [plus absolute vs relative; no -weight, etc] [p 156]

text-align [p 165]

Size, line height

Color

A. Create style rules that format the <a>, <p> and <body> tags.

B. Paste the *topic content* (the stuff that’s on that particular page, apart from template elements) from index.htm into template.htm, then save template.htm as index.htm. Yes, save over the older copy.

Beginning (X)HTML: Tables

Course/Class Number: 58111/46065
Class Title: 58111 (X)HTML: Beginning

Resources

http://www.elizabethcastro.com/html6ed/examples/

Tables

Tables are used for two main purposes
•    data presentation: laying out tabular data, as in a spreadsheet (this is a good use)
•    page layout: dividing your page up with tables for the purpose of layout (this is no longer a good use)

While the role of tables in page layout will decrease with the increasing use of CSS, they are a critical component of many web sites.

Tables require three tags:

<table>

Establishes the fundamental structure of the table.  Among others, <table> takes the following attributes:

width: values expressed in pixels or percentages

<table width=”500″>
<table width=”75%”>

cellpadding: defines distance from the inside border of a cell to the content.  Values expressed in pixels

<table cellpadding=”3″ width=”500″>

cellspacing: defines distance between cells in a table.  Values expressed in pixels.

<table cellspacing=”4″ cellpadding=”3″ width=”500″>

border: determines the thickness of the table’s outside border only.  Expressed in pixels.

<table border=”3″ cellspacing=”4″ cellpadding=”3″ width=”500″>

<tr>

Establishes individual rows in a table.  Typically, not used for much formatting but required for sound table structure.  <tr> is nested inside table:

<table>
<tr>
. . .
</tr>
</table>

<th> and <td>

Establish individual cells in a row.  <th> denotes a header cell; <td> denotes a content cell.
The tags take the same attributes, including the following:

width:  Defines the width of an individual column.  Cumulative cell widths must equal the width of the table.

<td width=”125″>
<td width=”25%”>

height:  Defines the height of an individual row.

<td width=”125″ height=”35″>

align: Defines the alignment of content within the cell.  Values are left/center/right.

<td width=”25%” height=”35″ align=”center”>

valign:  Defines vertical alignment of individual cells.  Important because table cells default to middle vertical alignment.  Values are top/middle/bottom.

<td width=”25%” height=”35″ align=”center” valign=”top”>

Example Table:

<table border=”1″ width=”75%” align=”center” cellspacing=”3″ cellpadding=”2″>

<tr height=”40″>

<th width=”25%”>Date</th>
<th width=”25%”>Input</th>
<th width=”25%”>Outtake</th>
<th width=”25%”>Cost</th>

</tr>

<tr>

<td>Saturday, August 5</td>
<td>Rio Embudo Input, Pilar, NM</td>
<td>Horseshoe Outtake</td>
<td>$140</td>

</tr>

</table>

 

Date Input Outtake Cost
Saturday, August 5 Rio Embudo Input, Pilar, NM Horseshoe Outtake $140

Beginning (X)HTML

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.