Art 444 Lecture Notes

Syllabus
---------------------

Calendar/Schedule

---------------------

Lecture Notes

---------------------

Projects

---------------------

Resources

---------------------

Student Work

Art 444 Lecture Notes

Basic HTML Tags

A HMTL page consists of a set of tags or commands that direct the browser in placing text, images and other site assets. A Tag uses of a pair of brackets: < > with a specific directive contained within. For instance, all HTML pages begin with the tag <HTML> and end with the tag </HTML>. Notice the ending tag uses a forward slash (/) to tell the browser to end the directive. Tags normally come in an opening and closed pair <HTML> </HTML> but not always.

You can use a basic word processor like SimpleText (Mac) or another basic word processor to write HTML code. You should use line breaks while typing your code to make it easier to read and to find mistakes. Save your files with names 8 characters or less in lower case with no spaces (important for those working on PCs) with the .html extension. Be sure to stay organized keeping your site assets in the same folder. Otherwise, you may end up breaking your site links.

To see code in action use the View Source command found in Netscape or I.E. (View> Page Source). You can then copy and paste the entire HTML code into your text editor or into Dreamweaver (make sure you paste in the Code Inspector) to study how the page was put together! You can view code while working in Dreamweaver as well - click on the Show Code Inspector (Dreamweaver 3 & 4) or Show Code & Design Views (Dreamweaver 4 only).

<HTML> </HTML> -All HTML pages begin & end with this tag.
<HEAD> </HEAD> -Contains Header information such as the title of the page, meta tags, javascripts
<TITLE> </TITLE> -Where you specify the title of the page
<BODY> </BODY> -Where you specify the background color for the page, text and link colors, or a tiling background image. This is where the content you actually see in browser is located in the code.

BODY TAG ATTRIBUTES:
BGCOLOR="FFFFFF" -Hexadecimal color of page
TEXT="000000" -Hexadecimal color of the text
LINK="CC3300" -Hexadecimal color of the link text and the border around a linked image
VLINK="CC00CC" -Hexadecimal color of the the visited link (when you return to page where the link was it changes to this color to show you that you have already visited it)
ALINK="FF6699" -Hexadecimal color of a link on MouseDown (appears when you click down the mouse)
BACKGROUND="spot.gif" -Creates a tiling or repeating background image.
Example: <BODY BGCOLOR="FFFFFF" BACKGROUND="spot.gif" TEXT="000000" LINK="CC3300" VLINK="CC00CC" ALINK="FF6699">
HTML to insert a graphic into a web page:
<IMG SRC="image.gif" WIDTH="100" HEIGHT="200"> Always include the Height & Width of your image in pixel dimensions. Although your image will still display properly without the width/height tags, it is important to do so as the browser will reload the page after loading text to make room for the images. With width & height specified, the browser will first load HTML text, etc. adding a correctly sized placement box where the image will later load into. To find the pixel dimensions of your image open it in Photoshop: Image>Image Size or open or drag & drop it into the browser window. You will see then see the pixel dimensions displayed on the browser's title bar.

Border Tag: For a colored border around your image use BORDER="1" or specify the size in pixels of the border you prefer. The color of the border will be the text color specified in the page's body tag. If the image is a link, then the border color use the specified LINK, ALINK and VLINK colors.
To control leading between lines of text and objects:
<P> -paragraph break
<BR> -line break (returns text directly under the line above)
Here is a Basic HTML Page example:
<HTML>
<HEAD>
<TITLE>Welcome!</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000" LINK="CC3300" VLINK="CC00CC" ALINK="FF6699">
<P>
Welcome to my web site!
</P>
<IMG SRC="image.jpg" HEIGHT="300" WIDTH="250">
</BODY>
</HTML>
Linking Basics:
To create a link with text:
<A HREF="newpage.html">Go to the next page</A> Note: this will make 'Go to the next page.' an entire link.
Go to my <A HREF="cat.html">cat</A> page. Note: Only the word "cat" is a link.
To create link with an image:
<A HREF="newpage.html"><IMG SRC="image.gif" HEIGHT="100" WIDTH="100" BORDER=0> </A>
Note: If you do not want a border around your linked image use BORDER=0 in the tag.
To create a Email Link use:
<A HREF="mailto:person@acme.com">Contact Us!</A>
Note: Always remember to use the anchor tag </A> at the end of your linked text or graphic. This tells the browser where to end the link. Also, external site links start with an absolute url such as http://...