Home
// Build Your Website
// Basic HTML Code Tutorial: How To Build A Website With HTML

Basic HTML Code Tutorial: How To Build A Website With HTML

posted by ADMIN // August 21, 2009 // Build Your Website

Print
Email
Share
Rate It

There are many good reasons to have a website on the Internet — personal expression, advertising and marketing products, sharing information, etc. But for inexperienced Internet users, the idea of building a website is daunting. There are services that will build a website to your specifications or allow you to use a template to build it yourself, but these services come with a price, either cash or required advertising on your website. The more affordable option is to build a website yourself with a basic understanding of HTML.

What is HTML?

The term HTML is short for HyperText Markup Language, but don’t be afraid of the techie wording. HTML is the code which Internet servers translate into visible web pages. HTML is written in notepad, or any other text editor, and saved as an .html document instead of a .txt document. Each web page of a website is actually a different .html document created in a text editor. These documents are uploaded to an online hosting server, which translates the HTML code into your beautiful new website.

HTML Tags

HTML code is made up of letters and symbols which are called “tags.” Tags tell the server how to display the website content. This can include color, size, and font of text, links to other pages, insertion of images, tables, and forms, and the arrangement of all items on the page. Tags always start with the less-than symbol (<) and stop with the greater-than symbol (>).

Many tags come in pairs to start and finish formatting for whatever information is enclosed by them. This short example of HTML code, <center>I’m centered</center>, shows the words “I’m centered” flanked by a start tag for centering the words on the page and a tag that tells the server to finish the centering format. The / symbol is always used to close out a tag pair and end that particular formatting. This short sentence will look like the following on a website.
I'm centered

Some tags don’t require an ending tag and can be found in HTML documents as stand-alone or single tags. A few of the most common single tags are the <hr> tag, the tag, and the <img src="x"> tag. The <hr> or Horizontal Reference tag is expressed on a website as a line across the page. The or Break tag acts like a keyboard's Enter key, beginning a new paragraph for the website content. The <img src="x"> or image search tag is the HTML code that tells the server to insert an image into the website at that location.

Test Run

Knowing the background of HTML and how tags function is helpful, but taking the HTML code for a test run is the best way to learn how to build a website. Seeing is believing, so let's try to build a simple web page from top to bottom.

All web documents must have an <html> start and end tag, signifying to the server that this document is in HTML code that needs to be translated into a website.

All web pages also need <head> start and end tags, which enclose specifics about the page like the title or keywords and descriptions. These specifics aren't visible on a website, but are needed for search purposes. Within the <head> start and end tags are the <title> start and end tags, which name the web page. The visible section of the website begins and ends with the <body> tags, which enclose all the website content from words to images.

Tags can be used in succession, but always remember to begin and end them in sequence so that the server doesn't confuse formatting. A pair of tags opened within another pair must end first. So the HTML test run of your new page should look like this:

<html>
<head>
<title>Test Run Site</title>
</head>
<body>
This is where the content appears.
</body>
</html>

If saved as an .html document and opened in an Internet browser, you'll see this code as a mostly empty white page with a sentence at the top left reading, "This is where the content appears." So it's not a Rembrandt--still, you've just built your first website!

Adding Frills

There are a great number of tags that a website builder can use to beautify their pages. The most common for simple text are:
Bold--
Italics--
Font changes--

The quotes inside the font tags enclose the descriptive aspect, such as red color or Verdana font face. The background of the web page can also be changed, adding color or a picture with the tag <bgcolor="x">. There are numerous charts for HTML color on the Internet, where you can customize the color of your text or page.

Another very important tag to consider when sprucing up the site is the image tag. Mentioned earlier as one of the few single tags, this tag will tell the server to pluck the image from your hosted files and display it on your site. An image tag like this <img src="mykitty1.gif"> notifies the server that the image "mykitty1.gif" is needed at that particular place in the expression of the code.

Essential to website creation is the ability to link pages or link your site to other sites. The tag that codes for this action is called an anchor hypertext reference tag. This tag will include a URL address for the page or site to be linked. (Example: <a href="http://www.this is a link to That Site.com/">Link</a>)

Always remember that tags inside other tags end first, so that the formatting isn't confused by the server. For example, a centered sentence with red, bold letters would look like this: <center>I'm bold.</center> There is no specific sequence of code, such as centering before font, but the tags inside other tags should end first.

Sample Site

You've had an introduction to other tags, but seeing an example of a short string of HTML code can help bring website building into focus. There are many locations on the Internet where you can find full lists of HTML codes, but the following is a sample of a simple website with a header, description, photo, and a link to find similar photos. The two tags you may not recognize are the <h1> tag for headers and the tag or paragraph tag, which arranges the enclosed content into its own paragraph.

<html>
<head>
<title>My Site</title>
</head>
<body>
<center><h1>Welcome to My Site</h1></center>
I've created this site to share my photographic art. Below you'll find my first effort at photography, with a link to my gallery of photo art. I hope you enjoy and thanks for visiting!
<hr>
<center><img src="firstphoto.gif"></center>
 
<center>You can find my photo gallery at <a href="http://www.my sites gallery.com">My Site's Gallery</a></center>
 
<hr>
</body>
</html>

Build and Conquer

HTML code is deceptively simple. Website creation can get unimaginably complicated, but the basics discussed here can at least get you started. With just a small bit of HTML knowledge, you too can build a website and conquer the Internet world.