- To begin: Open Notepad (Start > Accessories > Notepad) on your pc, or TextEdit on your Mac. You will need a software that allows you to save your .html document as strictly text, NOT .rtf or a .doc. This is important; we don't want to add any hidden formatting. Type the following:
<html> <body>Everything that is seen on the page itself is contained within here. </html> |
- There are 4 basic tags that always appear on an .html document:
<html></html> - <head></head>
- <title></title>
- <body></body>
These form a basic web (.html) page. There are few exceptions (mainly <frames></frames>) that uses a different tag than <body></body>), but just knowing these tags creates a web document visible online.
- In general, you want to save this page as a text document with the extension .html or .htm. File > Save As > name.html. If you are asked, you want to make sure it is a text document and not rich text format. Occasionally, on a mac, you will also need to make sure that UTF-8 is checked. Here is a helpful link.
- Remember these basic rules for coding a web page:
- Tags always come in pairs. Hypertext Markup Language (HTML) uses these tags to tell the web browser (e.g. Mozilla Firefox, Safari, Internet Explorer, Netscape Navigator, etc.) how to display the page - what you want the page to look like.
- We always begin and end the web page with the <html></html> tags. It's like telling the browser that this is a web page so treat it like one...and then when you are through, telling the computer "all done, that's it". So in most cases, if you View > Source in your browser, you will see that the code for the page has <html> as the very first word, and </html> as the very last word.
- We wrap these tags around words or groups of words when we want to attach meaning to them. In the above example, we wrapped the text of the whole page with the <html></html> tags. We can also wrap a tag around a word like this: <em>emphasis</em> which is telling the browser to show the word emphasized in italics.
- Tags can be "nested" inside of other tags. For instance, any tags we add to a web page that begins and ends with the <html></html> tags are nested in the page. The next tags on a web page is the <head></head> tag. This tag contains information about the page itself. I use the <head></head> tags to surround the <title></title> tags. The <title>tag is nested within the <head>tag.
- We close every tag. The occasional tag like the break tag that does not have a close tag is closed within itself, like this: <br />
- At the very top of the page, before the HTML begins, we put in the doctype, to let the browser know what type of html or xhtml we are writing. For this class, we will use <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <html> <body>Everything that is seen on the page itself is contained within here. </html> |
- This is the basic web page. Do a search for html cheatcodes for examples of other tags. Webmonkey offers one of my old time favorites: http://www.webmonkey.com/reference/HTML_Cheatsheet
- HTML has moved on to XHTML, which is a stricter formatting. In HTML 4.01, there were some tags that did not have the close tag. To make your code XHTML compatible, these tags now include the slash (/) after a space, within the opening tag. An example was the <img /> tag, and the break <br /> tag . The <br /> tag puts a return with only one line, after a sentence.
To save your .html page
- There are two things to remember: Save all your web pages and images in one folder, and always call the first page of any folder "index.html" or "index.htm" (without the quotes.)
- We almost always name the very first page of a web site "index.html" or "index.htm". This will be the page a browser looks for when someone types your URL into the address bar of a browser.
- The root folder is the one folder that contains everything related to your web site - all the web pages, images, movies, sounds, scripts, etc.
- We can create sub-folders within our main (root) folder, but ultimately, everything is in one folder.
- We can have more than one index.html. It just means the first page to call in a folder if no other page is requested. However, our homepage named index.html must not be in any folder other than the root folder. Browsers are not smart enough to know which sub-folder you may have put it in, so make sure you don't! Else you get one of those Error! Page Can't Be Found! pages.
- We do not put any characters (!{at}#$%^&*) or any spaces in the names we save files and folders as.
- All names are in lower case.
- To save, on a pc, Ffile > Save as and save with the name index.html but its type as text (see below).
- I saved the new web page index.html into my root folder "casabasa" and I am not putting it into any of my other folders that I use for organization.
- Knowing your directory, and where you save your work is very important because of paths. Paths tell the browser where to locate our other web pages, and to insert pictures and movies. They are described in our HTML document via the "a href" and the "img src" tags, for instance. With our home page, however, the browser has just been told a URL, like www.casabasa.com, not a specific page. It automatically searches for a page called index.html as the first page.
That's it. Everything else just builds on this basic web page. To preview what your web page looks like in a browser, just open Firefox, Safari, Internet Explorer, or whatever browser you use to access the Internet. You do not have to be online - connected to the Internet - to do this. A browser displays HTML content. It is only necessary to connect to the Internet when you want something from another's computer...like to send and receive email, or to view someone else's web site.
In Mozilla Firefox:
- File > Open File
In Internet Explorer:
- File > Open
- In the new dialog box that appears, click on Browse to find your HTML page
To add some "style"
Let's add an internal style sheet to the page. Your book will have you work with style sheets, but here is a "quickie" using an inline style sheet that uses the <style></style> tags within our <head></head> tags:
| <head> <title>Internal style sheet</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- body { background-color: #CCCCCC; } a:link { color: #003300; text-decoration: none; } a:visited { text-decoration: none; color: #990000; } a:hover { text-decoration: underline; color: #0033FF; } a:active { text-decoration: none; color: #FF3399; } --> </style></head> |
- body {
background-color: #CCCCCC;
} is how I tell the browser I want the background of the page to be a certain color. If you have worked with a graphics software like Photoshop, you probably know that #CCCCCC is a light gray. To see a selection of colors that you can describe using the hexidecimal color palette, or browser safe colors, visit John December's http://www.december.com/html/spec/color.html. You should also read one of my favorite web authors, Lynda Goodman: http://www.lynda.com/hex.html. - We could just as well put an image into the background of our web page. That style sheet (internal) would look like this:
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Internal style sheet</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- body { background-image: url(../graphics/bkgrndgold.gif); } --> </style></head> <body> |
Inserting images, hyperlinks, email addresses via paths
To add paragraphs, we type what we want to say, then surround each paragraph with the paragraph tags: <p></p>.
<html> <body> </body> |
The spacing I'm showing between tags really don't matter. They are only there to make reading the code easier. HTML tags only tell the browser how you want the page to appear, and unless we specifically add tags that space a paragraph or text, then spacing does not appear (no matter how many times we hit the space bar!)
We can change some tags by adding attributes to the tags. Attributes give specific instructions about a tag. For instance, if we want to align the <p></p> paragraph tags, we can add the attribute "align". It would then read like this:
<html> <body> </body> |
Here is a similar page that had the image and email tags added to them, as well as a link to another page, our portfolio. The page itself looks like this (click this link).
| <html> <head> <title>My First Web Page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> |
Remember that within the <head></head> tags is information about the web page itself. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> is just saying what is contained on the page. src="*", width="*", and height="*" are all attributes of the <img> image tag. Because there is no </img> close image tag, we close the tag within itself by including the slash "/" at the end of the phrase.
The <a href="portfolio.htm">*</a> anchor tag is what creates a hypertext link. HREF stands for hypertext reference. I am linking my home page, index.html, to another page, portfolio.htm. It's path says that both documents are within the same folder. This is called a relative link. If I wanted to link to a site outside of my web site, I would have to put the complete URL like this: <a href="http://www.yahoo.com/index.htm">Go To Yahoo</a>. This is called an absolute link. (If you want to know how to link using Dreamweaver, visit my tutorial on linking pages, graphics and named anchors.
<img src="images/logo_wink.gif" width="75" height="85" alt="my logo" / > is the path to my graphic, which is an animated .gif. Because my logo graphic is not in the same folder as my home page, the path says go to a folder named "images" and there you will find logo_wink.gif (see below).
The path describes to the computer browser, where it will find something in relation to the document that is being viewed. From index.html, I go to the images/logo_wink.gif. When we link a document or an image, we are telling the browser where it can find the image or other document. Images are not really "on" the web page. We see it because we tell the browser to show it in a certain place on our HTML document, and we tell the browser where it can find the image.
<a href="mailto:sharon{at}casabasa.com"> is the hypertext link and path to email. Essentially, it is a command to send an email by saying "mailto". The phrase
- <p>Please email me at <a href="mailto:sharon{at}casabasa.com"> sharon{at}casabasa.com</a>, because I get lonely.</p>
is saying: [open new paragraph] Please email me at [go to Internet and send an email to the address sharon{at}casabasa] sharon{at}casabasa.com [close the tag so only the words between the tags is blue and underscored], because I get lonely.[close the paragraph tag]
I show the complete email address they are linking to as a courtesy to my viewer. I could have just as easily written "my web address" between the tags. By telling the viewer where they are clicking, if they can't access my email address because of restrictions on a particular computer, they can write down the address and access it from home or their personal email.
Adding a table to hold information
For the longest time, tables were the designer's friend in laying out a web page. It gave us the ability to place images and text exactly where we want it to appear on the page:
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Casa Basa Enterprises ~ blending art with technology</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- body { background-color: #FFFFCC; } --> </style></head> <body> |
To see this page displayed through your browser, click on this link. Stripping down to just the table itself, it would look something like this:
| <table> <tr> <td> </td> <td> </td> <td><h1></h1></td> </tr> <tr> <td> <table> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> |
I start and end with the <table></table> tags. Each set of <td></td> makes a cell within a table row, <tr></tr>. I have three sets of three table rows, and in each table row, I described three table cells, <td></td>. Td stands for table data. When you stack the table data one on top of the other in the three rows, we create columns. The table would look like this:
Look closely at the code and you will see another <table> table tag inserted within a set of <td> table data cells. This is called nesting a table within a table, and I use it to hold links to my other pages. That table contains three rows, but only one column. Now the table looks like this:
|
|||||
The phrase " " stands for non-breaking space. It's used as a space holder when there is no data within a cell. As soon as we enter text or an image, we remove the " " since it is no longer needed.
Today, the use of tables as a design tool are on the outs and the move is more towards CSS. I have a tutorial on CSS in general, and another one on attaching a style sheet to an HTML page, if you want to know more. Or visit some of the recommended links from my home page.
~ peace, polka and piwo
nd