BASIC HTMLIt’s important to understand the logic and formatting conventions for HyperText Markup Language when creating a web page or site. While Dreamweaver writes the code for you as you work, there are times when understanding how the code works is critical. It isn’t hard to understand the basics so please take the time to review, and even memorize the following information. An HTML document is a series of characters that, through its special syntax, defines a document. The fundamental pieces of HTML are the brackets that define a command, or "tag."
|
|
|
Opening a tag begins with placing the code within < > brackets. Closing the command requires adding a slash before the code word, also within the < > brackets. The first part is called the “start tag.” Content occurs in between the two tags and is followed by the “end tag.”
|
|
|
To create a title for a page, for instance, you might type:
Just about everything you do will require start and end tags. When typing code in the code inspector window in Dreamweaver, you can have Dreamweaver automatically add the end tag for you. Then just click between the two and type. Set this option in the Code Hints category under Dreamweaver > Preferences.
|
|
|
DOCUMENT STRUCTUREAt the beginning of every HTML document is a “document type declaration.” Dreamweaver inserts this code for you, so you don’t have to worry about memorizing it. Because it starts with an exclamation point, it isn’t interpreted as HTML code.
|
|
|
To begin the actual code of a document, HTML tags follow the document type declaration. Everything that will appear on your page occurs between these tags:
|
|
|
The next element that needs to exist is the head tag. All kinds of javascript and other coding lives within the head tags. The text doesn’t display on your page; it’s there to tell the browser how to behave.
|
|
|
The first element within the head tag is the title of your page: remember that the title is what displays in the title bar of the browser. Don’t confuse it with the name of your html document! If you don’t title your page, the browser will use the name of the file as its title—not very professional!
|
|
|
Now we can move on to the actual content of the document, which is contained within the <body> </body> tags. Notice the <p> and </p> tags surrounding this sentence. Every time you want to begin and end a paragraph, you must surround it with the <p> tags.
|
|
|
TEXT FORMATTINGThere are web pages that may contain nothing but images including the text. Understanding how to deal with text from scratch is important nonetheless. As you have already seen, text must begin and end with tags—at the very least, it resides within the <body> </body> tags. But that's boring, Here are some of the ways you can spice up the text on your site.
|
|
|
The heading tags include <h1> through <h6>, with <h1> being the largest. |
|
|
Text is formatted using the <font> tag. NOTE: the font tag has been deprecated - meaning that you should use CSS to define your font, size, color, etc. rather than the font tag itself. |
|
|
To make your text larger or smaller, use the <font size=" "> tag. Insert a plus number to make the type larger, or a minus number to make it smaller.
|
|
|
Formatting paragraphs is also simple. The default for HTML is flush left. You can add tags to change that. To separate one paragraph from another, make sure to enclose each one within the <p> and </p> tags.
|
|
|
To end a line without creating a new paragraph, use the <br> tag. |
|
|
IMAGESThere are two image formats that HTML can recognize: gif and jpg. Newer versions of some browsers will be able to recognize png files as well, but don’t go there yet! A gif file is smaller and less exact. It's a terrific format for simple graphics with little shading or variation in tone. A jpg file's size is determined when you save the file. The jpg process actually eliminates certain elements from the file to make it smaller. This is called "lossy" compression. The fewer elements you want eliminated, the higher the resolution quality, and the larger the file. Since file size contributes significantly to how quickly your page will display, smaller file sizes are always best. The physical size of images is important as well. Since they are only meant to be seen on a computer screen their pixels per inch should be set to 72. All images should be scaled or cropped to the exact size you want them to appear on your page before inserting them in your HTML document. Gif files are small files and are great for dealing with images with few colors. You can also have a transparent background with a gif image. The primary difference between the two formats is that gif files are saved as "indexed color." That means references to any colors that are not present on the image are deleted from the file. Gif images can have anywhere from two to 256 colors, while jpg images always have 256. The other difference, as noted earlier, is that in order to make a jpg file smaller, it is stripped of inconsequential information. That information can never be replaced later, so each time you work on a jpg file and save it again, you will loose more information, eventually degrading the image to the point where it is unusable. Once you've gotten your images together, you need to place reference to them in your html document. The images you place using html aren't really embedded in your document. The code represents a path from the browser to the computer on which your images are stored. That's why it's so important to establish your file hierarchy before you begin. For specifics about creating and using images, see that section...
|
|
|
There are two ways to call up an image in HTML. The first is an "absolute path," which requires a reference to the entire url or address of the image. This is an absolute path that includes all the information a browser needs to locate the image and display it on the screen.
|
|
|
A "relative" path is easier to type and can be used very
successfully as long as you manage the location of your objects within
a standard, pre-organized set of folders.
|
|
|
BACKGROUNDSI'm sure you've seen a variety of background colors. They are created using a simple <body bgcolor=" "> tag. There are 256 colors to choose from; each has a 6 character reference code called a “hex code”. White = #ffffff and black = #000000. All color specifications need to be preceded with the number sign (#). If you've used the color palette to mix a color, it will be assigned the appropriate code; you can use a color not in the "web-safe" palette, although it may display differently on Macs vs. PCs.
|
|
<body bgcolor=”#FF3300”>
|
To create a textured background, or a repeating image, you need to specify the gif or jpg file you want to use. |
<body bgimage=”/bgtexture.jpg”>
|
|
TABLESTables are one way to create a standard format for all the pages in your site. They require diligence to manage but the look of your site will benefit from their use. There is a lot of coding that goes on in creating a table. It's all fairly logical, however, if you remember the open < > and close </> tags for each cell, or square, and each row you create.
|
||
It’s a good idea to have a plan for what you will need by sketching out a table first: we’ll use a table with three columns and four rows. |
|
|
Ultimately, we’ll combine some columns and rows to create a table that looks more like this. |
|
|
Within the opening table tag, you can specify the width of the table in either pixels or percent, the width of a border, if you want one, and the alignment of the table in relationship to the page. Cellpadding refers to space inside each cell that separates it’s contents from the edge of the cell. Cellspacing is space between each cell and row.
|
 |
|
The next line of code begins the first row <tr>. It also establishes that the contents of the cells in that row will align to the left and top edges of the cells. Once this row is filled, you close it with a </tr> tag.
|
 |
|
After establishing a row, use <td> to define the contents of a cell (table data). "This was my sunflower" is the text that appears in the first cell of the first row. |
 |
|
The second cell in the row is created with another set of table data <td> tags. The " " code means this cell is empty.
|
|
|
We begin to define the third cell with the <td> tag. We are also combining this cell with the three others that will be below it: the "rowspan" tag merges cells together within a column. This large cell contains the sunflower image. This last cell is then closed with the </td> tag. Then the row is closed with a </tr>. |
|
|
Take a look at the code all by itself (in orange), to see the pattern that’s beginning to emerge: |
|
|
The second row has 3 cells as well but we only have to define 2 of them, since the third one was merged with the previous row (rowspan="4"). Since we’re not putting anything in either cell, the <td> content for both cells is “&nsp;” |
 |
|
The third row also has 3 cells; only 2 need to be defined because of the rowspan=”4” formatting in the first row. The first cell is empty. The second cell contains text. Then the row is closed with a </tr>. |
|
|
The next commands create a new row <tr> and begin to define the contents of the first cell in that row <td>. To combine two cells within a row, you use the colspan tag—in this case, we’re combining the first two columns (colspan=”2”). Specify a background color, and colored text using the bgcolor=" " and the font color=" " tags within the <td> tag. Note: you must close the <font> tag before you close the <td> tag. The close row tag </tr> occurs at the end of this cell since the contents of the third column were defined earlier with the rowspan attribute. Finally, we've finished the table.
|
 |
|
Without any formatting or contents, the bare code would look like this Why do you need to know all this? Well, even though Dreamweaver makes it easier to add columns or rows to a table after you’ve already inserted one, it’s nice to understand the structure so you can alter the code manually if needed. And, there have been times when poor planning on my part (I admit it!) has made that necessary.
|
|
|
COMMON TAGSThere are several kinds of tags used in HTML. Physical tags specify type styles and formats. There are several of them and they are quite easy to remember.
|
|
|
The principle physical tags include: Bold <b> </b> Italic <em> </em> Underline <u> </u> Typewriter <tt> </tt> Preformatted text <pre> </pre> Break <br> Paragraph <p> |
|
|
Logical styles create paragraph formatting. Cite <cite> </cite> Code <code> </code> Definition <dfn> </dfn> Emphasis <em> </em> Keyboard <kbd> </kbd> Strike <s> </s> Strong <strong> </strong> |
|
|
List styles tags are used to create indented lists. List styles are useful for itemizing things, or listing bulleted or numbered items. Unordered lists <ul></ul> Ordered lists <ol> </ol> Definition lists <dl> </dl> |
|
|
CREATING LINKSThere are many reasons why you might want to create a link, or several, from your site. One is to provide further reference to your viewer—sending him or her to another site for more information; another kind of link will generate email to you; a third kind will take the viewer to another area within your document or site. Linked text is typically underlined and in a different color from the rest of your document. You can specify the color of your links both before they are clicked on, after someone has followed one, and to change color when someone mouses over it. <a href=" "> is the beginning of a link tag. The text or image that becomes the link comes next, then the closing tag </a> For an external link, you would type: For an internal link, you first need to define a "named anchor” next to the text or image you want to link to. Create the named anchor by inserting your cursor where the anchor
is to appear and typing: To create the link, select the text you want to trigger it and surround
it with There is no reason why a link has to be text. If you want a picture to trigger a link, you simply surround the <img> tag with the link tag by typing the path to the image you want to use as a link, rather than typing text. This is the same code you’d use to make a button image the link trigger. Way back where we started, we defined the text and background colors. Within the same <body> tag, after those are defined, you can add your link colors. link= “#000000“ is a primary link to something else. vlink=“#000000“ is the color that the link will turn after someone has clicked on it. alink=“#000000“ is the color a link turns when clicked. Remember that you need to specify your colors with a 6-digit hex code, preceded by a number sign (#).
|
 |
|
GLOSSARY OF BASIC TAGS<a> </a> anchor: used to create a link internal to the page or site <a href> </a> creates a link to another html page <align “ “> aligns text or images to the left, center, or right <b> </b> bold text <body bgcolor=“ “> creates a colored background <br> break a paragraph into several lines (each <br> acts like a soft return) <center> </center> centers the text or image in the browser window (or table cell) <dl> definition list mailto: creates a link to the browser’s email function, already addressed to the recipient <font> </font> defines the look of the text <fontsize=“ “> </font> determines the size of the text <font color=“ “></font> creates colored text <head> </head> is the area within which you define the title and meta information for a web page <html> </html> begins and ends a web page document <em> </em> creates italics <img src=“ “> creates a link to the image that is to be displayed <li> list item <ol> </ol> ordered list <p> begins a paragraph <pre> </pre> generates a text block exactly as it was typed <s> </s> creates text with a horizontal line through it (strike through) <strong> </strong> creates emphasized text, and look different depending on the browser <sub> </sub> subscript <sup> </sup> superscript <table> </table> used to begin and end a table <td> </td> table data: used to define the contents of a cell <tr </tr> table row: begins and ends a row in a table <tt> </tt> creates text in a typewriter or monospaced font <u> </u> underlined text <valign=“ “> puts images at the top, middle or bottom of a table cell |
||
|
 |
|
