Beginner HTML Layout 2:Headers, Paragraphs & Hyperlinks

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

Beginner HTML Layout 1: Basics

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:

Step 2. Host your domain name

September 26th, 2008

“What the heck is hosting?!”

Whoa! Take it easy, dont panic. I remember when I first started online all of this stuff was like a foriegn language. Now its like second nature. It will get that way for you to, you just have to trudge through it.

To keep things simple, I’m going to recommend hosting at Godaddy. I know I sound like a commercial for Godaddy, but its honestly just the easiest way. I will keep it simple and just refer you to the helpful guides at Godaddy’s website. I’m here to help you make beautiful websites, not hold your hand.

Buy Linux Hosting here: http://www.godaddy.com/gdshop/hosting/shared.asp?ci=9009

Go here to learn how to setup your account and FTP to your account: http://help.godaddy.com/article/1361

Step 1. Buy a Domain Name

September 26th, 2008

The first step to building a live website is to buy a domain name. To do this go to GoDaddy.com and register a domain name. After you register your domain name, you will be able to host it. After you host your domain name, you will be able to upload files to it, and create an amazing site. A few pointers for picking out a domain name:

  1. Try your best to buy a .com. People do not remember .net’s, .org’s or other domain name extensions. If you tell people that your domain is myname.biz, they will only remember and go to .com.
  2. Try to keep the domain name simple, short, easy to remember.
  3. Definitely buy your own personal domain name. For instance, I purchased andyisaacson.com.
  4. Dont buy all of the extra crap that GoDaddy tries to sell you. Just grab your domain name and checkout. Of course, buying their paid hosting package is not a bad idea. We will go over that in the next step.

Here is a helpful tool that Godaddy created to help you buy what you need: http://godaddy.com/gdshop/wizard/start.asp?ci=13065

In the next step we will get you started with hosting your domain name.

What?! Another Code Tutorial Site?!

September 25th, 2008

YES! Well, not exactly. We like to think that we are taking a unique approach to Code Tutorials. Of course, every other blogger and code tutorial site probably says the thing. We will let you decide if this site is helpful or not. Obviously we would let you decide, since we cannot physically force you to love this site.

This site will teach you to hand code. You will not learn how to use all the features of dreamweaver and frontpage on Code A Day. Reasons that we code by hand:

  1. Coding by hand keeps things way more clean. Many editors try to add code and end up making a mess of things.
  2. Coding by hand gives you complete control over your code.
  3. People do not hire you to write editor generated code.
  4. You will have a hard time looking cool and picking up chicks.

Lets begin!