Navigation:
Home
Tag, You're it. Basic Markup
Navigation, Anchors & Links
Graphical Elements
What Next?
All websites consist of one or more webpages. The first page is usually named index.html or index.htm. This tells the Web Server what page to automatically load when a browser (Internet Explorer, Netscape, Mozilla, etc) comes to, or hits, the site. Naming any other pages is left to the person creating the page.
HTML (Hyper Text Markup Language) is a markup, or tag, language. You must always, with a few exceptions, begin and end with a "tag". Tags are usually not case sensitive. HTML tags are encased in '<>'s. A simple example would be <tag>Your Information Goes Here</tag>. Although <tag> is not an actual html tag, it does show us the pattern that beginning and ending html tags must follow.
Let's look at real tags and how to use them to create a webpage.
There are eight sections we will discuss here:
The basic set of HTML tags that all HTML webpages require are the html, head, and body tags with their associated closing tags. These three, like other tags, will each encompass its own data. The html tag must encompass the entire HTML page including the head and body tags. Putting these three tags into a text file and saving the file as index.html gives us the basic building blocks for an HTML file template. You could also just cut and paste this text from your browser into a blank text document and do a Save As, calling it index.html.
<html>
<head>
</head>
<body>
</body>
</html>
The visible information would actually go between the body tags.
Although we live in a world where bigger is usually better, a larger file name is not necessarily good. You may know, without a doubt, what a file is by calling it 'My Website Is So Cool You Just Have To Visit It.html', but keeping it smaller and cleaner ensures that all web servers can host your webpages and makes for fewer typing mistakes. We'll learn more about this in 'Navigation, Anchors & Links'
Have you ever noticed how web pages display a user friendly title in the upper left border of a browser? That is accomplished by using the <title> Tag in the <head> Tag.
<html>
<head>
<title>
A Writer's Web Site
</title>
</head>
<body>
</body>
</html>
Save this template and open it with Internet Explorer or Netscape, You should see your title in the upper left border, as in the example below.
The body tag has attributes you can give it to change the color of the body's different areas. The available attributes are:
Let's look at each of these and how to use them. Remember that you can use any of them, all of them, or none of them at the same time. But first, you need to understand what a Hex Number is. A Hex Number, or Hexadecimal Number, is a "number" with characters 0 - 9 and A - F and is usually 6 characters long. An example would be '#FF0000'. The "#" tells the browser that the following text is a hex number rather than plain text.
Text Tags are used to format blocks, or groups, or text. A comparison would be the Format>Paragraph or Format>Font feature of popular word processors. There are several Text Tags that we will be looking at. They are:
Although most of these tags are self-explanatory, let's looks at some that aren't.
The <pre> tag is used for Preformatted text. Everything Will be displayed EXACTLY as you type it in. The <PRE> tag honors multiple spaces, Tabs, and line breaks. The text within the <pre> tag is usually displayed in a monospace font. But this is a fantastic way to display your work without having to go back and add a lot of html code tags to get your work looking like it does in print. Notice that I have some lines longer than others and some with multiple spaces.
Text Formatting allows us to perform additional formatting to a line or paragraph. These are similar to Text Tags. They are:
This paragraph, using the <p align="center"> tag, is centered to the screen.
This paragraph, using the <p align="right"> tag, is now right justified.
A normal paragraph with a bunch of dashes to show the width of this paragraph compared to the following paragraph = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = !
This paragraph, using the <blockquote>...</blockquote> tag pair, demonstrates the usefulness of this tag. We could use quotes from famous people, excerpts from reviews, or anything else we really wanted to stand out as a unique paragraph. Note that it's indented on both sides.Another normal paragraph.
Finally we have List Tags. if you notice, up above, all of the styles have a dot, or disc, beside them. We have used a List Tag. There are three basic styles:
You can put a List inside another List as we have nested two lists at the top of this page. This is done by putting the MAIN tag (<dl>...</dl>, <ol>...</ol>, or <ul>...</ul>) with its inner <li>items</li> in place of a <li>...</li> pair of the outer List tag set. Each List tag has its own uses. Let's look at them individually...
Here's a sample definition list:
Have you ever noticed how some sites just seem to get their data on the page lined up perfectly? Sometimes it may look like a table, or spreadsheet view. Other times there are no lines? They are probably using tables to display text. Tables are similar to the List tags in that you can have a table within a table. Here are the tags:
| Cell Data 1 Title | Cell Data 2 Title | Cell Data 3 Title |
|---|---|---|
| Cell Data | Cell Data | Cell Data |
| Cell Data | Cell Data | Cell Data |
Finally, we have the attributes for the Table tags.
Although there are many, we will only cover those that are likely be most useful to you. They are:
Now that we've covered the basic tags, let's look at our template, and how it should look, using some of the above tags. Don't forget to copy and paste this template so that you may use it over and over for every webpage you want to create.
<html>
<head>
<Title>
My Writer's Web Site
</Title>
</head>
<body>
<!-- Let's Bold our Name -->
<b> Author's Name Goes Here</b>
<!-- Let's add a new line, as html will read each line as one BIG line -->
<br>
<br>
Let's write a short paragraph about the Article/Book/Short Story.
<table border=5 width="50%" align="center"><center>Stories I have written</center>
<th>Name of Article/Story<th>Description<th>Where can you find it
<tr>
<!-- Italicize the name of our article -->
<td><i>My First Article</i></td>
<td>This article was written when I was in 12th grade, but I enjoy it so much I think you would too.</td>
<td>Link to Article Will go here</td>
</tr>
<tr>
<!-- Italicize the name of our article -->
<td><i>My Second Story</i></td>
<td>I am still working on this, and will post it here, or the URL where it is published.</td>
<td>Not Published Yet</td>
</tr>
<table>
</body>
</html>
NOW we have a useful template to use, and we know what tags are and how to use them to create a web page.
These basic tags will allow you to create a website. There
are many more, but these are the ones that you will probably use most.
There are two more helpful things I want to show you in this section:
Click this link to Webmonkey to find the Special Character Codes
Click this link to Webmonkey to find the Color Codes for wherever colors can be specified.
Navigation:
Home
Tag, You're it. Basic Markup
Navigation, Anchors & Links
Graphical Elements
What Next?
Created on ... January 24, 2005