How to HTML All By Hand: HTML Part 1

The Beginnings of A Beautiful Page

by Joey Delli Gatti

HTML means Hyper-text Markup Language. It’s not really scripting or programming for the most part. It is just a way to note how you want things viewed on your Web page.

Web pages usually consist of a few basic elements: writing, links, pictures, and sometimes some fancy effects. The fancy effects and page styles and dynamic, personalized pages for each person who visits the site is controlled by scripting and programming language; however, you can make a wonderful page without all of that and with just a little effort.

You can write your page in a simple txt document and save it as “index.html”.

Start by opening up a new text document in WordPad or TextEdit. The basics of a Web page are shown below. Type out the following:

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

You’ll notice that I indented parts of it. By indenting each time that you start one of these “tags”, you can more easily see where the ending tags go. Ending tags are marked by a /. Ending tags show that you’re done with that specific aspect of your page.

<HTML> tells your Web browser to start reading the document and treating it as HTML content.

<HEAD> isn’t actually displayed on the Web page that you create, but it holds scripts, codes, the <title> that shows up in the browser’s tab. If you look in the browser’s tab for this page, you’ll notice that it simply says “Blog”. That is the title of my page. At the end of your head, you close with a </HEAD>

<BODY> is the area that displays all the stuff on your Web page: pictures, links, and writing. At the end of all your visual things, you close with a </BODY>. Directly following this tag is pretty much always the end of your Web page, marked by </HTML>

So, you can see that whatever you tell the Web browser to start, you also have to tell it to end (for the most part). Situations that don’t require you to open or that don’t require you to close are carriage returns, marked by </br>; Image tags, marked by <img src=””>; and some argue paragraphs, marked by <p>. Personally, I close all my paragraphs with the </p> tag.

To specify exactly how you want things to be displayed on your page, or to specify attributes, you can use other tags or specify data within tags, like this:

<BODY bgcolor=”black”>

<P align=”center”>

<FONT color=”white” size=”+1″>

This will make your pages background black, your paragraph center aligned, and your font white and larger than your paragraph text.

Here is a list of some other things to include in your page:

<b>bolds the specified text</b>

<i>italicizes the specified text</i>

<s>strikes the specified text</s>

<p>starts a new paragraph</p>

<font color=”” size=”” face=””>In the font tag, you can specify your font color, size, and font face</font>

<a href=”” target=”new”>In the ‘a’ tag, you can specify a lot of different things. Here we just specify the adresse and that the page will open in a new window.</a>

<img src=”” height=”” width=”” border=”some number goes here” bordercolor=””>In the img tag you can specify the location or folder where you are storing the picture, the size of the picture, and a border width and color for your photo.

OK. I’m done frying your brain all at once with this. Let’s continue with our page. Try the following. I colored the tags to make it easier to see – your tags don’t have to be in color. You also don’t have to indent, but I highly suggest it.

<HTML>

<HEAD>

<title>Howdi World

</title>

</HEAD>

<BODY align=”center” bgcolor=”khaki”>

<p align=”center”>

<font size=”+2″>

<b>My First Web Page</b></br>

<img src=”http://static.zoovy.com/img/kraftyatkrafts/-/I/ink_96666gg_small_flower.jpg” height=”100px” width=”100px” border=”1″></br>

</font>

</p>

<p align=”left”>

<font color=”black”>Hi, my name is ___________.</br>

I am just starting to learn HTML and I think I like it.</br>

This page is simple, but that’s OK. It’s just a beginning</br>

I will get better at this and will soon learn tables so that</br>

I can really make my pages pop!

</font>

</p>

<p align=”center”>

<a href=”http://www.w3schools.com/HTML/html_links.asp” target=”new”>My favorite HTML reference site</a>; <a href=”http://mimweddings.com”>My wedding videographer</a>; <a href=”mailto:yourEmail@AtYourDomain.com” subject=”look at this cool page!”>

</p>

<!–This is just a note and won’t show up on my page.>

</BODY>

</HTML>

Save your page as “index.html”. Double click the file to open it in your Web browser. Your page should look like the image below and say “Howdi World” in the page’s tab:

If your page looks more spread out, that’s OK. Just resize the browser window until it looks like this. If your page looks messed up, graphics don’t show up, things are missing or pieces of code show up on your page, then you probably missed something or added something. Check your work by doing the following:

1. Make sure that all your open and close tags are correct like this <TAG></TAG>.

2. Make sure that you have all the quotation marks like this <TAG src=”stuff in here”>

3. Make sure that you included all the tags and that you have no extra spaces like this: <TAG > or <TAG width=”number here” >

4. Check that you arent missing a space like this: <IMGsrc=”http://adresshere/nameoffile.jpg”>

5. Go through links and image tags to make sure they’re formatted correctly and that the Web adresses are correct.

So, we learned the basic elements of a Web page and that nearly all tags have to have an opening tag and a closing tag, with a few exceptions. We learned a little about specifying attributes or qualities of different things on our page. We may have also learned what happens when we’re careless and miss or add something extra. If you made it this far, then good job!

Now it’s time to go eat my BLT that my wife made me. I also need to get ready for the little neighborhood party that we’re hosting. Chao!

Check lesson 2 when you’re ready.