Archive
This post is archived and may contain outdated information. It has been set to 'noindex' and should stop showing up in search results.
This post is archived and may contain outdated information. It has been set to 'noindex' and should stop showing up in search results.
Beginner Website Guide - Learn Basic HTML
Feb 11, 2012Web DevelopmentComments (0)
In this guide you will learn very basic HTML and how to make a simple text-only website. This guide is focused on the absolute beginner, though you should be proficient in general computing tasks such as file and folder creation, navigating, and changing file extensions (on Windows, be sure to show file extensions).
You'll need a text editor to edit HTML with. Notepad or TextEdit will do for now. I prefer NotePad++, but you may want to wait on that.
HTML stands for HyperText Markup Language. Its job is to tell the web browser about the structure of the website and what elements it contains. An HTML document generally has the file extension .html or .htm. Each website may contain many HTML documents (pages), such as about.html, contact.html, and gallery.html.
When building a website, it makes sense to start with the home page. That is, the page that people first land on when they type in your web address. This file has the file name index.html. The reason it isn't home.html is because the "index" file in a directory is the file that will be shown by default by web servers. Without index.html, somebody browsing your website might see a list of directory contents instead of your HTML website.
The building blocks of HTML are called tags. Tags are enclosed in less-than and greater-than signs, like this: <html>. Tags are used by the browser to structure the website and display elements. Some tags need to have an end tag, while others stand alone. An end tag has a slash (/) after the less-than sign to signify that it is an end tag. View this example:
The <b> tag is the bold tag. If you surround some text with it, the browser will display that text as bold. In the above example, the word "text" would be displayed bold. Notice the end tag: </b>. Without the ending tag, the browser wouldn't know where you want to stop bolding and would probably bold the rest of the document!
The above example had both a start and an end tag. Here is an example of a stand alone tag:
The <br> tag is called the break tag. It tells the browser to go to the next line. In the above example the HTML is all on one line. In the browser output, the text after the <br> tag would be on the next line down. You can put two <br> tags next to each other and the browser will go down two lines.
The anchor tag, <a>, also known as the link tag, creates links that you can click. Here the anchor tag turns a portion of text into a clickable link:
The anchor tag above has an attribute called href. The href tells the anchor tag the URL/address of the link, which is surrounded in quotes. Notice also that the anchor tag has an ending tag (</a>), so that the browser knows where to stop the link.
You've learned a few basic HTML tags, which are useful inside bodies of text. To make a full web page, you'll need to use a few more HTML tags, which do some important things. Take a look at this example:
index.html
The <html> and </html> tags surround the entire HTML document. Just about everything you create goes inside of these tags. They essentially tell the browser that this is HTML and should be displayed as a web page.
The <head> and </head> tags surround the portion of the HTML document that contains header information for the browser. In this case, only the <title> tag, which tells the browser what to put in the title bar when someone browses to that page.
The <body> and </body> tags surround the portion of the document that gets outputted to the browser window, and is where most of your work will be done. Right now, it just contains some text that says "Stuff goes here."
Try creating an "index.html" document, adding the above HTML to it, and opening it in your browser (drag-and-drop it onto your browser window). Now try bolding the text <b> and adding some line breaks (<br>). Work with it for a bit to get the hang of using HTML tags before continuing.
Note that I use indentation to give the HTML document a nice hierarchy. It is purely stylistic, but usually makes the code easier to build and maintain.
Now that you've got your feet wet, let's take it a step further. Here I've added some more tags and information to the web page:
index.html
The page now has a navigation menu, with links to other pages. Those other pages haven't been created yet, so let's do that now. Create an about.html page and a contact.html page in the same folder as the index.html page. Change some of the information on the pages to make them unique.
Here is what my pages look like:
about.html
contact.html
You'll notice one unfamiliar thing here. It is the "mailto:" part of the contact link. What that qualifier does is tell the browser that it is an email address link, and to open the user's email client.
Now with your three pages complete, you should be able to browse between them by clicking the links in the navigation bar. This completes the first part of the beginner website tutorial. Try creating more pages and linking to them. Create a new website or two from scratch and memorize these basic HTML tags.
HTML markup tells the browser about the structure and elements of a web page. A website is comprised of many web pages that are linked together via anchor links, generally in a navigation bar. HTML tags are the building blocks of HTML. Some tags have a start and end tag, while others are stand-alone tags.
<b> - Bold tag. Bolds a section of text. Must have an ending tag (</b>).
<br> - Break tag. Goes to the next line. No ending tag.
<a> - Anchor/link tag. Makes a section of text clickable. Must have an ending tag (</a>).
You'll need a text editor to edit HTML with. Notepad or TextEdit will do for now. I prefer NotePad++, but you may want to wait on that.
Website and HTML Basics
HTML stands for HyperText Markup Language. Its job is to tell the web browser about the structure of the website and what elements it contains. An HTML document generally has the file extension .html or .htm. Each website may contain many HTML documents (pages), such as about.html, contact.html, and gallery.html.
When building a website, it makes sense to start with the home page. That is, the page that people first land on when they type in your web address. This file has the file name index.html. The reason it isn't home.html is because the "index" file in a directory is the file that will be shown by default by web servers. Without index.html, somebody browsing your website might see a list of directory contents instead of your HTML website.
HTML Tags
The building blocks of HTML are called tags. Tags are enclosed in less-than and greater-than signs, like this: <html>. Tags are used by the browser to structure the website and display elements. Some tags need to have an end tag, while others stand alone. An end tag has a slash (/) after the less-than sign to signify that it is an end tag. View this example:
Hello. Part of this <b>text</b> is bold.The <b> tag is the bold tag. If you surround some text with it, the browser will display that text as bold. In the above example, the word "text" would be displayed bold. Notice the end tag: </b>. Without the ending tag, the browser wouldn't know where you want to stop bolding and would probably bold the rest of the document!
The above example had both a start and an end tag. Here is an example of a stand alone tag:
This is the first line of text.<br>This is the second line.The <br> tag is called the break tag. It tells the browser to go to the next line. In the above example the HTML is all on one line. In the browser output, the text after the <br> tag would be on the next line down. You can put two <br> tags next to each other and the browser will go down two lines.
The anchor tag, <a>, also known as the link tag, creates links that you can click. Here the anchor tag turns a portion of text into a clickable link:
You can go to Google by <a href="http://www.google.com">clicking here</a>. Search away!The anchor tag above has an attribute called href. The href tells the anchor tag the URL/address of the link, which is surrounded in quotes. Notice also that the anchor tag has an ending tag (</a>), so that the browser knows where to stop the link.
Your First Website
You've learned a few basic HTML tags, which are useful inside bodies of text. To make a full web page, you'll need to use a few more HTML tags, which do some important things. Take a look at this example:
index.html
<html>
<head>
<title>My First Website</title>
</head>
<body>
Stuff goes here.
</body>
</html>The <html> and </html> tags surround the entire HTML document. Just about everything you create goes inside of these tags. They essentially tell the browser that this is HTML and should be displayed as a web page.
The <head> and </head> tags surround the portion of the HTML document that contains header information for the browser. In this case, only the <title> tag, which tells the browser what to put in the title bar when someone browses to that page.
The <body> and </body> tags surround the portion of the document that gets outputted to the browser window, and is where most of your work will be done. Right now, it just contains some text that says "Stuff goes here."
Try creating an "index.html" document, adding the above HTML to it, and opening it in your browser (drag-and-drop it onto your browser window). Now try bolding the text <b> and adding some line breaks (<br>). Work with it for a bit to get the hang of using HTML tags before continuing.
Note that I use indentation to give the HTML document a nice hierarchy. It is purely stylistic, but usually makes the code easier to build and maintain.
Your First Website Continued
Now that you've got your feet wet, let's take it a step further. Here I've added some more tags and information to the web page:
index.html
<html>
<head>
<title>My First Website</title>
</head>
<body>
<b>My First Website</b>
<br>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
<br>
<br>
Welcome to my first website. There's not much here yet.
</body>
</html>The page now has a navigation menu, with links to other pages. Those other pages haven't been created yet, so let's do that now. Create an about.html page and a contact.html page in the same folder as the index.html page. Change some of the information on the pages to make them unique.
Here is what my pages look like:
about.html
<html>
<head>
<title>About : My First Website</title>
</head>
<body>
<b>My First Website</b>
<br>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
<br>
<br>
<b>About</b>
<br>
<br>
This is the first website I've ever built!
<br>
It uses bold, break, and anchor tags!
</body>
</html>contact.html
<html>
<head>
<title>Contact : My First Website</title>
</head>
<body>
<b>My First Website</b>
<br>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
<br>
<br>
<b>Contact</b>
<br>
<br>
Email me here:
<br>
<a href="mailto:myemail@domain.com">myemail@domain.com</a>
</body>
</html>You'll notice one unfamiliar thing here. It is the "mailto:" part of the contact link. What that qualifier does is tell the browser that it is an email address link, and to open the user's email client.
Now with your three pages complete, you should be able to browse between them by clicking the links in the navigation bar. This completes the first part of the beginner website tutorial. Try creating more pages and linking to them. Create a new website or two from scratch and memorize these basic HTML tags.
Summary
HTML markup tells the browser about the structure and elements of a web page. A website is comprised of many web pages that are linked together via anchor links, generally in a navigation bar. HTML tags are the building blocks of HTML. Some tags have a start and end tag, while others are stand-alone tags.
<b> - Bold tag. Bolds a section of text. Must have an ending tag (</b>).
<br> - Break tag. Goes to the next line. No ending tag.
<a> - Anchor/link tag. Makes a section of text clickable. Must have an ending tag (</a>).