- HTML (hypertext markup language) is written in (ASCII) text and encoded with tags surrounded by less-than (<) and greater-than (>) brackets.
- Web pages are often created on a local computer (not necessarily online) and uploaded to an internet server using an FTP program.
- File names should be less than 8 characters with a 3-letter extension (.htm); e.g. "filename.htm"
- Tags are usually "opened" and "closed": <command></command>. Failure to close a tag will leave that feature on. Spacing and tag syntax are important in most cases. Tags are not case-sensitive.
- The code to begin a basic webpage:
<html> <head> <title>Top line of browser window </title> <meta content, title> </head>
<body>Content </body> </html>
- You can view the code for any web page by selecting Source in the browser View menu.
- Use the <title> tag to describe your page for the top of the browser window.
- Use <meta> tags to describe the content of the page for search engines.
- Body tags include:
- bgcolor (US spelling, background color)
- background (inserts tiled background image)
- text (text color)
- link (color for an external link)
- alink (active link, color when link is selected)
- vlink (visited link).
Colors can be defined by hexadecimal numbers (eg., #000000=black, #FFFFFF=white) or words (text=black bgcolor=white).
- Browser-safe Color Chart (www.mala.bc.ca/~soules/nhue.gif): the colors on this chart will display the same for both PCs and MACs.
- The body tag for this page: <body bgcolor="#FFFFFF" text="#000000" LINK="#CC3300" ALINK="#666666" VLINK="#990000">
- Decide what size screen resolution (in pixels per inch) you are designing your page for: 640 x 480, 800 x 600, 1024 x 768 are common. Screen resolution can be changed by the user.
- Use tables for layout. The code for a simple centered table that fills 80% of the screen looks like this:
<center><table width=80%><tr><td>Place contents here</td></tr></table></center>
This table will adjust to the user's screen resolution and create margins of 10% on both sides of the content. The size of the table can be given an absolute value in pixels as well: <table width=600>
- TR = table row, and starts building the table horizontally from left to right. TD = table define, and creates a cell along the row. The code for a table with 3 rows of 3 cells each:
<center><table width=80%>
<tr><td>cell 1</td><td>cell 2</td><td>cell 3</td></tr>
<tr><td>cell 4</td><td>cell 5</td><td>cell 6</td></tr>
<tr><td>cell 7</td><td>cell 8</td><td>cell 9</td></tr> </table></center>
- Tables can be nested (built inside one another).
- Table cells can have different background colors:
- External links: <a href="URL">Name of link, or Universal Resource Locator</a>
- Images are inserted with the <img src> tag. A typical tag for inserting an image:
<img src="image.gif" alt="description of image" width="x pixels" height="y pixels" hspace="horizontal space of image from text" vspace="vertical space from text" border="width of border if image is also a link" align="left or right">
- There are two common formats for images on the web: JPEG (.jpg) for photographs and GIF (.gif) for illustrations.
- HTML files are written in text; images are in binary code. Any images on a webpage must be included as separate files, usually found in the same folder as the .htm file.
- PCs display images at 96 ppi (pixels per inch); MACs at 72 ppi. When preparing images for webpages, save image files at one of these resolutions.
- Keep image files as small as possible to reduce latency: the speed at which a page will display in the browser.
- Most html composers (FrontPage etc) automatically insert the path name for images. When you change the location of your html files--for example, by FTPing to a server--you need to change the path name for the images in a text editor.
© Marshall Soules 2002
Fair Dealing applies.