Archive for the ‘Beginner HTML’ Category

Beginner HTML Layout 2:Headers, Paragraphs & Hyperlinks

Saturday, September 27th, 2008

The 1st beginner layout we created introduced the basic elements of an html page. In this lesson you will learn about more things to put in your html page with html headers, paragraphs and creating links(otherwise known as links)!

<html>
<head>
<title>My Website</title>
</head>

<body>

<h1>Andys Website</h1>
<p>Hello World, you need to learn <a href=”http://www.codeaday.com”>HTML</a></p>

</body>
</html>

Copy the above code, paste it into a file called “index.html” and upload it to the root folder of your website. Lets begin.

The first new element in this file is the “h1″ tag. The “h1″ tag is a header tag. There are 6 header tags ranging from h1 to h6, h1 being the biggest. The header tags usually go at the top of your page or at the top of a new section on your page. You would typically place the name of your web page between the header tags, thus we have <h1>Andys Website</h1> in this example.

We extended the paragraph from our first Beginner Layout example and included a “hyperlink”. The “hyperlink” tag starts with “a” then “href”, which I believe stands for Hyperlink Reference. Then, the website that you would like to point to. So, the first part of a hyperlink looks like this: <a href=”http://www.codeaday.com”>. Now, in order to have a hyperlink, something has to be linked, and then you have to close the hyperlink with a closing “a” ( </a> ). Now, the linked item can either be text or an image. For now, we will just link text. Here is what the whole hyperlink looks like: <a href=”http://www.codeaday.com”>HTML</a>.

Here is what the code should look like after you are done:

If you want your hyperlink to open up in a new window then you need to add the target=”_blank” tag to your hyperlink. It should look like this: <a href=”http://www.codeaday.com” target=”_blank”>HTML</a>.

Tags: , , , , , ,
Posted in Beginner HTML | No Comments »

Beginner HTML Layout 1: Basics

Saturday, September 27th, 2008

This 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.

<html>
<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:

Tags: , ,
Posted in Beginner HTML | No Comments »