≡ Menu

Webmaster Series Part 3 – Simple HTML Page

Now that you have your domain name registered and your web host set up we need to put up a website. A lot of people like to use WYSIWYG or What You See Is What You Get editors like MS Front Page or Dreamweaver. Those are not necessary. It is not difficult to design your webpages in a nice text editor. I’m going to start out with the basic structure of a website. The most basic web page looks like this.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/DTD/strict.dtd”>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

<h1>Main Heading</h1>
<p><a href=”http://www.somewebsite.com”>A Link</a></p>
<p><img src=”steeve.jpg” alt=”steeve”></p>
<p><a href=”http://www.worldofwarcraft.com”><img src=”steeve.jpg” alt=”steeve”></a></p>
<h2>Next Level Heading</h2>

Here is this page in action

Because of the way my blog is set up the above code word wraps. Click on the link above and then right click on the page and click view source to see the code how I typed it without word wrap on.

Technically you could get even simpler than this but I wanted to cover the elements of a basic html page. A web page is made up of html tags. Those are the tags you see above that have <></>. <> is an opening tag. And </> is a closing tag. Any time you open a tag you need to close it as well. When the browser finds these tags it knows what to do with the content in-between them. There is no reason to worry about where you put things or use tables. All you have to do is put the content down and it can all be put where it needs to be using CSS. CSS is the way a site should be designed. It is considered very old school to use tables these days. That does not mean that many many designers don’t still use it. A CSS rant is a whole other blog post. I am not a designer so I just put together the content and let the designer worry about how it will look.

Basic Page Explained:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/DTD/strict.dtd”> – This is the Doctype. This tells the browser the standard you want to follow. If you want to read up on this here is a good explanation of it.

<html></html> – These are the opening and closing tags for all your html.

<head></head> – This is where you put all your heading information and meta tags. The title tag is the most important one in here. A lot of people also use the keyword and description meta tags. I will talk about that in another post about SEO later.

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″> – This is the character set for your page. Unless you have a reason to do otherwise just set it to this.

<title></title> – This is your title tag. This is what show up in the top right of your browser open a web page. Most importantly this is what most people will use when they link to your site including search engines.

<body></body> – This is where you put the text that will be visible on your web page.

<h1></h1> – This is a first level heading. This tells the browser that the text in-between these tags is the Main heading. If you don’t use CSS to change the look of this tag it will be huge and not look very good.

<p></p> – This is the paragraph tag. This tells the browser that it is a paragraph. A paragraph does not just have to be a paragraph of text. It is just a way to separate elements of the page.

<a href=”http://www.somewebsite.com”>A Link</a> – This is a hypertext link. Some tags are more complicated and take different arguments. The base of this tag is <a></a>. The first part of an “a” tag is where the link is to go. So after the “<a” you put href= and then the URL within quotes. At the end you close the tag with a “>”. Now you just put the text you want to have be a link and then close the tag with a </a>.

<img src=”steeve.jpg” alt=”steeve”> – This is the way to show images. The src= argument tells the browser where to find the image to show. The alt= argument gives the browser some text describing the the image. This also is what is shown if someone has images turned off or will be spoken to a blind person using a screen reader.

<a href=”http://www.worldofwarcraft.com”><img src=”steeve.jpg” alt=”steeve”></a> – This is another way to show an image but this time the image is now a link. It is the combination of an <a> tag and a <img> tag. What you are doing is making a <a> tag but instead of putting text between the <a></a> you are putting an image.

<h2> </h2> – This is a 2nd lvl heading tag. You can have up to 6 levels of H tags.

Comments on this entry are closed.