Beginner HTML Layout 1: Basics
Saturday, September 27th, 2008This first piece of code has all of the basic elements of a web page. Copy and paste this code into a file named “index.html” and upload it to your website’s root directory.
<head>
<title>My Website</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
First we have the opening <html> tag at the top. This basically tells your web browser that you are starting an html document. Whenever we have an opening tag, we close it. Notice that we closed the <html> tag with a </html> tag at the bottom of the document. The </html> tag MUST go at the very bottom of everything else on the page.
Next we have the “head” opening and closing tags. We put very important items between the <head> and </head> tags that will not be seen on the web page. The most important item being the “title” tag. Everything between your <title> and </title> tags will show up in the top of your browser as seen below.
If your site gets found in search engines, your “title” tag will be the main link that you see. Other things that you will put in your “head” tags include meta descriptions, meta keywords, starting javascript code, and a much more. But we will get to that stuff later.
Ok, the next set of tags you see are the “body” tags. Everything between the <body> and </body> tags will be seen on the web page itself. In this example we only have two words within the body tags. The words are placed in paragraph tags ( <p> and </p> ). Anytime you put text on your web page, place it within paragraph tags.
Here is what our first web page looks like:
