assignments :
week 2 - complete at the end of class,
or hand in week 3
Hand code a page in HTML with tags 1-9 according to these instructions: exercise
1
week 3 - complete at the end of class, or hand in week 4
Hand code a page in HTML with tags 10-19 according to these instructions: exercise
2
Introduction
For the next two weeks, the class will go through a series of HTML examples. These examples are contained in a series of small web pages that demonstrate one or two HTML techniques. Go through each example file in the HTML examples, and type the HTML code into Dreamweaver. Use the HTML Cheat Sheet below as your guide and link to each example, or you can link to the HTML Example directory to see all the files.
- Open the example HTML page in a web browser
- View Source in the browser to see the HTML
- Arrange your screen so you can view the HTML source at the same time as your Dreamweaver HTML window
- Type the code into the Code View (not Design View) of Dreamweaver
- Press F5 to see how your HMTL is displayed in the Dreamweaver Design View,
- Preview the page with the F12 to view it in a browser
- Try out some variations with each example
Web references:
- NCSA Beginner's Guide to HTML www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html
- Webmonky's cheatsheet hotwired.lycos.com/webmonkey/reference/html_cheatsheet/
- BBEdit HTML Editor for the Macintosh: www.barebones.com/products/bbedit.html
- Homesite HTML Editor for the PC: www.macromedia.com/software/homesite/
XHTML is a new markup language that will eventually replace HTML. It incorporates a new web technology called XML that makes web pages more flexible and the content in the pages accessible like a database. XHTML is beyond the scope of this class, but you should learn to create your HTML in the new XHTML format so your code can be converted to XHTML in the future.
Some rules to follow to make your code compatible with XHTML:
- all your tags and attributes should be lowercase
- all tags must be closed--for example, a paragraph tag <p> is not allowed without a corresponding </p>. For tags such as the line break and image tags, they must end with a space and slash. E.g. <br />, <img src="image.gif" />
- all tag attributes should be quoted. For example, in this tag <body bgcolor="#FFFFFF">, the background color must be quoted.
For more information see: http://www.w3schools.com/xhtml/default.asp
HTML
Cheat-Sheet
<html>
<head>
<title>Basic HTML Example</title>
</head>
<body>
Some text for the <b>basic html</b> example page
</body>
</html>
HTML examples :
1) background
color
<body bgcolor="#00ff00">
2) background
image
<body background="an_image.gif">
use this image as the background image (control-click to download it):
3) Heading styles
<h1>The
biggest heading</h1>
<h6>The sixth biggest heading</h6>
4) Line break
some text using a br with a
line break at the end<br />
5) Paragraph
<p>some
text in a paragraph, always has a blank line after it</p>
6) Bold and
italic
<b>Some
Bold Text</b> OR <i>Some Italic Text</i><Br>
<b>Some Bold Text AND <i>some bold and Italic
text</i></b>
How would you use html markup to produce this sentence (bold
& italic, then italic)?
7) Horizontal rule
<hr />
<hr size="20" />
<hr width="100" align="left" />
<hr width="50%" />
<hr noshade />
8) Inline image
<img src="an_image.gif" width="200" height="100" alt="An
image to be displayed" />
9) Links
A link to another web site
<a href="http://www.nytimes.com/">Link
to the New York Times</a>
A link to a page within the website
<a href="01_basicform.htm">Link to a another page on this
site</a>
A link that sends an email.
Note that this won't work right on the Academy computers because
they are not configure for email.
<a href="mailto:zzzzz@zzzzzzzz.com">Email Link</a>
The next two tags enable you to create a link to a different location on the current web page. When the user clicks on the link, the browser will scroll to the new position - assuming that the link is far enough away to need a scroll. The "href" version is the link and must include the "#", the "name" version is the location on the page to scroll to and must NOT include the "#". NOTE: You must have some text between the <a name> tag and the </a> tag, or the link won't work in Explorer. If you don't want anything to so in the name tag, use the non-breaking space HTML code:
<a
href="#lowerpoint">Link
to a location lower on this page</a>
<a name="lowerpoint">Some text lower on the
same page</a>
10) Font
<font face="Arial,
Helvetica, sans-serif" color="#ff0000" size="6">this
is some text</font>
The fonts specified are displayed in order of availability on the computer. If the leftmost font is not available, the next one is displayed, and so on until the font is found on the user's computer. Note: The designer can assume that only the following matching fonts will be available on the user's computer:
| PC | Mac |
| Arial | Helvetica |
| Times New Roman | Times |
| Courier New | Courier |
| Verdana | Verdana |
| Trebuchet | Trebuchet |
| Symbol |
Symbol |
11)
Centering
<center>Using
CENTER</center>
12)
Indenting a paragraph, creates a paragraph and adds margin on left
and right
<blockquote>some
indented text</blockquote>
13) Bulleted
list
<ul>
<li>this
is item 1 in an un-ordered list</li>
<li>this is item 2</li>
<li>this is item 3</li>
<li>this is item 4</li>
</ul>
14) Numbered list, types: numbered=no type, upper letters="A", lower letters="a", upper roman="I", lower roman="i"
<ol type="i">
<li>this is item 1 in an ordered list</li>
<li>this is item 2 in an ordered list</li>
<li>this is item 3 in an ordered list</li>
<li>this is item 4 in an ordered list</li>
</ol>
15) Preformated text,
allows use of extra spaces and line breaks to format your text
<pre>
alskf asldk
aslfk asldkf asdlk
als faslfk alskfa sldk
laksdf alsfk laskf alsdkf
alskf asldk aslkf
als kfasdlk
aslkf asldk asld
</pre>
16) Flowing text
around an image, align="left", align="right", vspace="pixels" margin
above and below image, hspace="pixels" margin left and right
of image
<img src="an_image.gif" width="200" height="100" align="left" hspace="10" vspace="10">
17) Text colors,
text=basic text color, link=links color, vlink=visited links, alink=link
when mouse down
<body text="#FF0000" link="#00FF00" vlink="#0000FF" alink="#000000" bgcolor="#FF9900">
18) Meta tags,
refresh=go to a new page after N seconds, description=used by search
engines, keywords=used by search engines
<meta http-equiv="Refresh" content="15; URL=http://academy.smc.edu">
<meta name="description" content="The New York Times on the
Web">
<meta name="keywords" content="New York Times, newspaper, international,
news, business">
19) Comments, used for identifying different parts of the code, or explaining how the code works. Comments are not displayed in the page, and are ignored by the browser. The format for a comments is: Begin a comment with "<!--", end it with "-->", and do not use "--" within the comment.
<!-- this is a comment -->
exercise 1: tags 1-9 :
Due at the end of week 2 class
Make an HTML file with the following items:
- A correct title tag
- 2 images
- A link to another web site
- Bold
- Italic
- A background color or image
- Heading
- Line break
- Paragraph tag
- Horizontal rule
Due at the end of week 3 class
Make an HTML file with the following items:
- Set the font of some text, including size and face attributes
- Set the color of the text using the body attributes text, link, vlink, and alink
- A link to show the link color
- An HTML comment
- A list
- Center
- Blockquote
- Pre-formatted text
- Create a link that scrolls the current page to a different location on the page. Use the <a href> and <a name> tags for this.
- A keywords and description meta tag
- A refresh meta tag
- Flow some text around an image, so the image is on the left, with a 20 pixel margin between the image and the text
- Flow some text around an image, so the image is on the right, with an 8 pixel margin between the image and the text