HTML

Ever since the internet came out I’ve wondered how people make websites.  The opportunity for me to learn came around in college when I took a class on html.  I know the questions that one asks when they want to know how to build a website because I asked them myself.  I’m going to try to explain how to write html code as simply as I can.  It is important for anyone who is dealing with websites to learn html even if they want their websites to look a lot fancier.

What is HTML?

HTML stands for Hypertext Markup Language.  Those of you who don’t know a lot about computer languages are thinking, “So, what does that mean?”

HTML is a language.  It’s a language that you write to tell the internet how to display a certain page.  The internet understands the commands that you write and executes them.  You have to tell the internet what font you want to use, where you want a picture to appear or what color you want the border of a table to be.

For example, in a word document, if I want the computer screen to say, “Hello World!”  I have to type those characters on the keyboard.  It’s not this simple when you want the internet to display, “Hello World!”  You have to tell it how.  This is what you must write:

<html>

<head>
<head>

<body>
Hello World!
</body>

</html>

How Do You Write HTML?

We write commands in HTML by putting them in brackets <(here is the command)>.  There are specific commands that you have to follow a few of which will be mentioned in this article.  Most of the commands you write have opening and closing “tags”(i.e.<(opening tags are just in brackets)></(closing tags have the slash after the bracket)>.  You can type these commands in any word editor (i.e. notepad, Microsoft Word..etc.) just make sure you save them as .html.

Geting Started

Let’s break the above example down into smaller parts. 

HTML Tags

First you always have to start an html site with <html> and end it with </html>.  Everything else goes between these two tags.

Header Tags

Second, you always have to have header tags, <head></head>, even if you don’t want to put anything between them.  These tags come right after <html> but before </html> as shown in the example above. 

The closing html tag, </html>, should ALWAYS be the last thing that appears in your html document.  You should write it right after you write the opening html tag though so you don’t forget to put it.  If you forget to put a closing tag, your website won’t work the way you want it to.  Therefore, always put the closing tag right after you write the opening tag, and just put the information in between the two.

Title Tags

If you want to you can put a title on your page.  This will go between the head tags.  This title will appear at the very top of your screen when your page comes up.  So open Notepad or another word editor and type in the following:

<html>

<head>
<title>
            This is my website!      
</title>
</head>

</html>

Body Tags

Now, we want to make the body of the website. This is the main information that appears in the white section of your screen. We write these in the middle of the <body> tags.  So now we have:

<html>

<head>
<title>
This is my website!      
</title>
</head>

<body>
Hello World!
</body>

</html>

Spacing HTML text

You don’t have to have the tags on their own lines or indented as shown in the above example.  The internet does not recognize spaces between tags.  The internet does recognize spaces between words you type but not between tags.  If you want to put a space somewhere other than between text you must type: &nbsp.  Each new tag is usually put on a new line so that it’s easier to read, not because it has to be.  You could write the above example as follows and it would appear the same way on the screen:

<html><head><title>This is my website!</title></head><body>Hello World!</body></html>

This way is just harder to read and harder to debug so typically tags are put on their own line with indentation.

Saving Your Website

Now you have made a website.  Now save it as website.html.  I’ll tell you what to do with this saved document in my “Make Your Site Live” article. 

What is a Tag Again?

If you’re still confused as to what a “tag” is, let me make it a little more clear.

<html></html> - these are html tags.  You have to put them at the beginning and end of each html page.
<head></head> - these are head tags. You put the title tags between these as well as a few other things, but we won’t worry about those right now.
<title></title> - these are title tags.  You put the title of your website between these.

There are a number of different tags.  Now that you know what tags in general are and what to do with them, you simply need to learn what the specific tags or commands are that let you do specific things.

Other Tags

Let me show you a few of these other commands.

<p></p> These are paragraph tags that you put when you start and end a paragraph.
<strong></strong> This command bolds whatever is between the two tags.
<br> This is a break tag.  It’s like pushing the “enter” button on the keyboard.  It puts      
whatever is after it on a new line.  This tag does not have a closing tag.
<u></u> This underlines whatever is in between the two tags.
<center></center> Centers the information between these tags.
<hr> This tag will put a line all the way across the page.  This command does not have a closing tag.
<h1></h1> This will make your text in between these tags bold and a different size.  Also there are <h2></h2> tags, <h3></h3> tags..etc. that will make your font different sizes.  Play around with these if you don’t understand completely.   

Linking to Another Site

If you want to link to another page on the internet you use:
<a href=”www.other_page’s_address”>Click here to go to my other page</a>

Adding Photos to Your Site

If you want to insert a picture into your page, use:
<img src=”name_of_pic.jpg”>
This command also does not have a closing tag.

Adding a Table to Your Site

If you want to insert a table with rows and columns, use:
<table>
   <tr>
      <td>
            This is the first row, first column.
      </td>
       <td>
            This is the first row, second column.
      </td>
   </tr>
   <tr>
      <td>
            This is the second row, first column.
      </td>
      <td>
            This is the second row, second column.
      </td>
   </tr>
</table>

If you haven’t figured it out, <tr></tr> is the row tag and <th></th> is the column tag.  These go between the tags <table></table>.

Having a Link E-mail You

Now, have you seen those websites that you click on the words “E-mail me” and it brings up your e-mail with their e-mail address in it?  Have you ever wondered how they do that?  Here’s the command:

<a href=”mailto:(your e-mail address)”>E-mail Me!</a>

Bulleting Items

Now, what if you want to bullet some items?  This is what you use:

<li>This is what I want to bullet</li>

Setting up the Font

There are a lot of things you can do with the font.  The font tags are obviously <font></font>  If you just type these tags though, nothing is going to happen.  You need to specify the font type, color, size..etc.  If you want the font to be arial, for example, the command would be:
<font face=”arial”>This text is in arial font</font>. 
For font size:
<font size=”12px”>This text is font size 12</font>
For font color:
<font color=”#000000”>This font is black</font>
Or you could do:
<font color=”black”>This font is also black</font>

Now you can put all these together:
<font face=”arial” size=”12px” color=”black”></font>

Make sure when you do this that it is typed exactly as shown above, opening and closing parenthesis, an equal sign and a space between each part.  If any of these things is missing it won’t look the way you want it to.

Putting it all Together

So let’s make a website with the information we just learned:

<html>

<head>
<title>
                        My HTML Website!
</title>
</head>

<body>

<h1>My Website</h1>
<font face=”arial” size=”12px” color=”blue”>
<p>Hi everyone!  This is my first <strong>HTML website!</strong></p>

<p> Here’s a picture of me!<br> <img src=”picture.jpg”></p>

<p> Here’s a list of things I like to do:
                        <li>Biking</li>
                        <li>Hiking</li>
                        <li>Playing with friends</li>
                        <li>Going to the movies</li>
                        <li>Eating chocolate</li>
</p>
<hr>
<p>Below is some information of how you can contact me!
<table>
<tr>
<td>Phone Number:</td>
<td>1 800 MYWEBSITE</td>
</tr>
<tr>
<td>E-mail Address:</td>
<td><a href=”mailto:me@gmail.com”>me@gmail.com</a></td>
</tr>
</table>
</p>

<p> Make sure you all <a href=”mailto:me@gmail.com”>e-mail me</a> and tell me what you think!</p>

<p> Also, you can visit my friend’s website by clicking <a href=”www.webservicez.com”>here</a></p>

</font>
</body>

</html>

Note: This html page is only for the example purposes.  I do not recommend that you put all your information out on the web for everyone to see. 

Now with the above example, obviously you need to replace some of the parts with your own information.  For example, picture.jpg won’t bring up a picture of you.  You need to type in the name that your picture is saved as.

Alright, now save your html document again as website.html.

Making Your Site Live

Now before you can post this website there are two things you need to either buy or borrow.  First you need a domain name.  Second you need someone to host your website.  You can buy these a number of different places online.  For more information on this subject see the article “Make Your Site Live”.

Debugging Your Site

So say you’ve made your site live and it doesn’t look the way you wanted it to.  What if a certain word didn’t bold like you told it to.  Most likely if something didn’t turn out the way you told it to in your html code, you wrote something wrong.  Time to debug, or in other words, go through your code piece by piece and find where you went wrong.  Follow theses steps:

  1. Check to make sure that you have opening and closing html tags.
  2. Make sure you have header tags
  3. Make sure you have body tags
  4. Check all of the tags in your code to make sure that they have brackets before and after the inside words and make sure that there are no spaces between those brackets if there shouldn’t be. 
  5. Make sure that all the closing brackets have a slash before them.
  6. Make sure that there are closing brackets on all tags that are supposed to have them. 
  7. Make sure you spelled the commands right.

 

If you’ve gone through these steps and you still have a problem, go through your code again more carefully.