HTML For the Absolute Beginner
Overview
HTML, which stands for Hypertext Markup Language, is the language used for writing web pages. HTML documents contain the text of a web page, as well as additional instructions about how the page should appear. Web browsers like Internet Explorer, FireFox, and Safari, interpret the code and then display the page according to those instructions.
HTML is a plain text format, meaning that HTML documents can be created and edited using a simple text editor such as Windows Notepad or Mac TextEdit. These programs are included as part of the operating system on their respective machines. All you need to know in order to follow the instructions on this page is how to create and save a plain text file. If you don't know how to use those tools to create and save plain text files click here for a list of resources to help get you going.
Tags and Containers
The primary unit of HTML syntax is called a tag. Tags are presented as an instruction bracketed with greater-than and less-than symbols. For example:
<title> or <font>
With a few notable exceptions tags appear as pairs - an opening tag and a closing tag. Closing tags match the opening tag except that they begin with a forward slash:
</title> or </font>
Tags tell the browsers how to apply structure and format to the text. Text can be large or small. It can be plain, bold, or italic. It can automatically be rendered in the default font of the system or the tag might specify a different font. Some text might be in paragraphs, other text in bulleted lists. HTML tags can also be used to instruct the browser to load images, create links to other pages, and many of the other functions that make up our experience of a web page.
The basic usage of HTML tags is that opening and closing tags pairs form a container around the text to which the tags are to be applied. In the following
example, the title tags form a container around the text we wish to designate as the title of the page:
<title>This is the Title of My Web Page</title>
Structure of an HTML Document
The basic structure of HTML documents follows the container model just described. The first tag we will formally introduce is the HTML tag itself which follows the convention of an opening and closing tag each bracketed by greater than and less than symbols:
<html>
...
</html>
All of the HTML code within a document is contained within the HTML tag pair.
The other tag which needs to be present in every HTML document is the body tag:
<body>
...
</body>
The body tag contains (predictably) the body of your document and all your visible text. Continuing the notion of containers, the body tag pair is nested within the container created by the html tag pair:
<html>
<body>
...
</body>
</html>
Hello World
We're now ready to create our first HTML document. In keeping with a tradition nearly as old as computing itself, we will create a web page that announces
itself to the world. Our Hello World document will build on the containers we established in the previous example and simply add the text we wish to display
- in this case "Hello World." To try this example yourself, you can either type or copy and paste the following code into a text editor and save the plain
text file with an html extension - i.e. hello-world.html. If you double-click or otherwise launch the file your system should recognize it as a web
page and open it in your default web browser:
Congratulations on your first web page!
Prettying Things Up
Now that we have our basic structure in place we can begin to add some formatting to our documents. The next tag we'll consider is actually part of a family of tags - the headings tags. HTML provides six headings tags numbered 1 to 6 which take the format:
<h1>...</h1>
The headings tags change the size and style of the text between them. If you were to save the following as an html file:
Depending on your browser's default settings, the text on your page should display something like this:
Hello World
The remaining five headings tags should get progressively smaller. Here is some code that lines them all up for you:
Depending again on your browser's default settings, the text on your page should display something like this:
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Some plain text for contrast
White Space and New Lines
A very important concept to understand in HTML layout, is the fact that HTML for the most part ignores extra spaces and line breaks in the text file you create. In other words, a section of your HTML might look like this in your text editor:
This sentence is
all going to appear
on one line.
But it would actually render like this in your browser:
This sentence is
all going to appear
on one line.
Although this behavior might seem a little counterintuitive, the reason is simple enough. The web browser expects the format instructions to come in HTML tags. Ignoring any apparent format within the text file prevents contradictions in rendering the page, while at the same time leaving the door open for you to format your code to be as readable as possible when viewed in a text editor.
Paragraphs
The paragraph tag is simply the letter p enclosed in brackets. The complete syntax takes the form:
<p>
...
</p>
The browser will insert a blank line in between the sections of text that you indicate as paragraphs, giving you now some control over the layout of your
page. To see how this works you can experiment with the following sample:
The Head Section
The head tag:
<head>
...
</head>
is in some ways the functional compliment to the body tag. Structurally, the head section precedes the body section, while both are contained within the html tags:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
You'll recall that the body tag contains the body of your document and all your visible text. The head section contains global information about your
document that is separate from the content. It may contain information about the author of the page, the language of the page, a description, and a wealth
of other information including special style instructions. One of the most common elements found in the head section - one found in virtually every web page
- is a title. Although the text of a page title does not appear on the page, most browsers show the title in the window caption bar. Also, search engines,
directories, and other web page index systems tend to use the title provided in the tag as the name of the page. The title tag was already gently introduced
in an earlier example. Now we'll see that the title tag - and the text of the title - is placed in the head section. The sample below is identical to the
example provided in the section on paragraphs, except now a head section has been added in the appropriate place and contains a title:
Wrapping Up and Moving On
You should now have a grasp of the basic concepts in writing HTML.
- HTML is made up of plain text accompanied by tags which contain formatting and other special instructions for the web browser.
- Opening and closing tags pairs form a container around the text to which the tags are to be applied.
- HTML documents themselves are contained within HTML tags.
- The body section holds all your visible text.
- The head section contains global information about your document that is separate from the content.
Armed with this basic understanding you should be well prepared to start learning HTML in earnest. From this point your journey need not necessarily be linear. Take advantage of the countless HTML references, articles and tutorials across the web. There are more than 80 tags in the last official HTML specification and you will want to try to develop a sense of what these tags are and therefore what possibilities they open. It will probably take some time, and some frustration, before you are able to design web pages to your own satisfaction. But be patient and it will come.
Good Luck!
See more from Web Design
Other Pages You Might Enjoy...
The Meissen Porcelain Manufactory
For more than 300 years the Meissen Porcelain Manufactory has been a central figure in European porcelain. It was at Meissen that the first true hard-paste porcelain was manufactured outside of China, and the story of that accomplishment has the high drama of fiction - all the more intriguing because it is true.
Pirated Glassware that Collectors Want to Own
The 1996 discovery of what is believed to be the wreckage of Blackbeard’s ship Queen Anne’s Revenge, is providing historians and collectors new information about the fragile and transparent objects that came onto the North American Continent before arrival of the first piece of cut glass.
Collecting Antique Furniture
Of all the collectible antiques, the broad category of furniture is perhaps the most widely held and most satisfying. Frequently handed down through generations, the various chairs, tables, cabinets and other pieces are often in use, adding character and constancy to our daily lives. This guide includes an overview of the significant styles and historical periods, and other important information for collectors.
Collecting Antique Clocks and Watches
Information for collectors of antique clocks and watches. Includes a history of clock and watchmaking, an overview of styles, and important terminology.
Collecting Antique Jewelry
Embodying the wealth and treasure of bygone days, the antique jewelry pieces available today include some of the world's most valuable artifacts. Includes a history of jewelry making, an overview of the major historical periods, and a glossary of antique jewelry terminology.
Javascript Chatterbot Workshop
Home of the Do It Yourself Chatterbot Project. Has a ready to go chatterbot shell and full instructions on how to program it.
An Unorthodox Javascript Form Submission
Describes three fixes in handling an unorthodox Javascript form submission. Executing Javascript before submitting the data to the server; altering the behavior of the PHP running on the server so that it would return to the original page; and restarting animated GIFs.
Bring Your Web Site to Life With PHP
PHP is the scripting language that powers some of the biggest Web 2.0 content providers in the business. Whether you're looking to add a simple feedback form to your site, or have your heart set on building the next Facebook, read up on PHP in this informative tutorial and get started tonight.
Use JavaScript to Dynamically Update Your Website
Learn to use this simple JavaScript technique to change content and make instant updates across your entire site. Whether you update five pages or thousands, this handy web tip is a must read!
Using HTML Tables to Format Your Web Page
Follow these simple steps to master the use of the HTML table features and deliver beautiful layouts for all of your web page design work.
Tips for Improving Website Navigation
In order for visitors to find the right information, a website's navigation path needs to be clear. Without a clear navigation path, visitors will become confused and leave before they can make a purchase.In order for visitors to find the right information, a website's navigation path needs to be clear. Without a clear navigation path, visitors will become confused and leave before they can make a purchase.
Choosing the Right Color for Your Web Site
When people build a web site for their business (or hire a web design company to make it for them), not much thought is put into deciding what color their web site will be as most would rather focus on more important tasks like creating content, web site optimization and promotion. Most simply choose the most web-friendly colors, others use their company’s logo as base while some decide to just use their favorite color.
Designing A Website That Loads Quickly
The amount of time it takes for your website to load onto the visitor's screen is a major influence on traffic to your site. Research has shown that most internet users will leave your website if it takes more than 10 seconds to load and some potential guests will exit even faster. A quick loading website is vitally important to the success of your site.
How to Create Web2.0 Applications using AJAX and Clientside HTTP Requests
AJAX is an acronym that stands for Asynchronous Javascript and XML. A web 2.0 application, or AJAX application, runs on a single web page, and uses clientside javascript to initiate and process additional requests to the server.
Getting a Grip on VBScript Arrays with UBound
The ubound function returns the highest subscript in the given dimension of an array and can simplify your array handling tasks.
VBScript Split Function
The VBScript Split function takes a string and returns an array broken up by the delimiter of your choosing. This functionality can make short work of parsing plain text, CSV, tab delimitted, or virtually any type of string you can imagine.