Part Two: How did You Do That?
HTML (Hypertext Markup Language) is the coding associated with building webpages. HTML coding may seem confusing, but it is actually simple to use and understand. It simply instructs browsers how to display the structure of a web page, such as the webpage you are looking at now. It tells it where paragraphs start, what type of style your fonts/letters will look like, where graphics appear, links to other pages, and much more. Did you notice that when you opened the webpage you built, that only the text between the coding showed up?
HTML uses container tags, which are what actually control the look of the webpage. You will notice that most tags have an "on-off" pairing of like tags. Below are the tags you have used to build your webpage and a brief explanation of what they do. (If you are a little confused as to what I am saying, don't give up yet. Just keep reading so you at least get a general idea of why you have used the HTML tags to build your web page.)
Almost Done...
Print this page. Open Word Pad and make sure your document template.html is open. Now just follow along and you'll see how each container tag affects the page.
<HTML></HTML> This code starts and ends HTML documents. You should start and end each page with these tags.
Each webpage must begin with <HTML> and end with </HTML>. Do I need to say it again? Start and end. This is how the browser recognizes this
document as HTML and opens it by all the coding inside.
<HEAD><TITLE></TITLE></HEAD> I'm not sure why, but these two pair of tags must be together. The TITLE tags contain the "official title" of the web page. The info you put in will appear in the upper left corner of the visitors web browser. Look in the corner of this page on your browser. We named this page "Introduction to HTML".
Between the HEAD tags you can put info you don't want to be displayed on the page.
<BODY></BODY> This is the meat of the webpage. The BODY tags contain all the info, links to your pictures or other webpages, ALL the data that you want the viewer to see. ALL THE TAGS BELOW are contained within these tags and make up look of your webpage.
<FONT></FONT> The FONT tag controls the size, color, and type of text that appears on your page. If you put in the following code
<FONT SIZE=3 COLOR=RED FACE=ARIAL>Albert Belle</FONT> , it would show up on the webpage looking like this
Albert Belle
Or use
<FONT SIZE=3 COLOR=BLUE FACE=TIMES>Mike Hargrove</FONT> , and it would look like this
Mike Hargrove
Face means the style of text you want.
<IMG SRC> This tag has no matching "off" tag. It simply tells the browser which file name or location to find an image or photo. These files generally end in .jpg or .gif extensions. (We'll explain the difference later.)
<B></B> This tag simply makes the text bold face. Here's a good comparison to the above Albert Belle text:
<FONT SIZE=3 COLOR=RED FACE=ARIAL><B>Albert Belle</B></FONT> , would show up on the webpage looking like this Albert Belle
<BR> This is a line break. When inserted it starts the text on the next line without a line space, whereas a <P> inserted makes the next line a new paragraph and skips a line.
<HR> This is simply a horizontal line between the next paragraph of text. The line below and above this text is an HR tag.
Summary: I've tried to keep it as simple as possible. Again, I recommend that you print this page and follow the tags when you personalize your web page in Part 3.
(c)2004 [email protected]