How to Write HTML Web Pages
HTML, or HyperText Markup Language, is basically a set of tags that communicate instructions to Internet browsers on how to display information on the screen. Once you understand what each tag is and what it does, writing a web page is almost as easy as writing a grocery list.
Other People Are Reading
Instructions
-
HTML 101
-
1
Open a new Notepad file and save it to your desktop as "index.html." Find the file on your desktop; double-click it to open it in your web browser. For now, it should appear as a blank page. As you make and save changes to the Notepad file, refresh this web page to test the HTML and check its appearance in your browser.
-
2
Create the following set of tags:
<HTML>
</HTML>
These tags tell your browser that everything contained within these tags is written in or (in the case of CSS or javascript) is compatible with HTML. -
-
3
Create your web page header. On the line under the <HTML> tag, enter the following set of tags: <HEAD> </HEAD>
-
4
Give your page a title. Between the header tags, insert the following: <TITLE>HTML Test Page</TITLE>. Save your work and refresh the page in your web browser. The page should still appear blank, but the title should now appear in the web browser's title bar.
-
5
Create META tags on a new line under the title:
<META NAME="description" CONTENT="This page is designed using plain HTML">
<META NAME="keywords" CONTENT="HTML, web design, web page design"> -
6
Create the body of your web page. This is the part that will appear in web browsers.
On a new line underneath the </HEAD> tag, enter the following tags: <BODY></BODY> -
7
Create your content. Between the <BODY> and </BODY> tags, write the information that will appear on your web page. For this exercise, type (or copy and paste) the following:
HTML Is Easy
This web page is made using simple, basic hypertext markup language. HTML is used to display text in different styles and colors. Text can be boldface, underlined, italicized or crossed out. HTML can also be used to create links and add images to a page. -
8
Create page background, text and link color attributes inside the <BODY> tag as follows:
<BODY bgcolor="tan" text="navy" link="blue" vlink="midnight" alink="aqua">
This will give your page a tan background with navy blue text. Hyperlinked text will appear bright blue at first, will turn aqua when visitors click on it and finally become midnight blue for those who have already visited that link. -
9
Find the headline, "HTML Is Easy." Add the following tags to center and emphasize the headline:
<center><H1>HTML Is Easy</H1></center> -
10
Use the paragraph, or <P> tag, to break the remaining text into two paragraphs. Place this tag in front off the line, "This web page is made using simple, basic hypertext markup language." Place it again in front of the line, "HTML can also be used to create links and add images to a page."
-
11
Apply the appropriate formats to the words "boldfaced", "underlined", "italicized" and "crossed out." In HTML, the sentence will look like this:
Text can be <B>boldface</B>, <U>underlined</U>, <I>italicized</I> or <STRIKE>crossed out</STRIKE>. -
12
Locate the phrase, "create links," in the last line of the text. Turn this into a hyperlink to the Google home page by inserting Link tags before and after the phrase, as follows:
<a href="http://www.google.com">create links</a> -
13
Add a Creative Commons licensed photo on a new line and center it as follows:
<P><center><IMG src="http://farm1.static.flickr.com/42/122959202_92ef086559.jpg"></center>
Link the photo back to the original source, specify its display size, kill an unsightly link border and give proper credit in an image title that will appear when visitors mouse over the image.
Inside the <IMG> tag, add the size and border attributes:
<IMG src="http://farm1.static.flickr.com/42/122959202_92ef086559.jpg"> width="240" height="160" border="0">
Add the Link tags on either side of the Image tag:
<a href="http://www.flickr.com/photos/janelinton/122959202/"><IMG src="http://farm1.static.flickr.com/42/122959202_92ef086559.jpg"> width="240" height="160" border="0" alt="Image by I_Shutter on Flickr"></a>
Inside the Link tag, add the title:
<a href="http://www.flickr.com/photos/janelinton/122959202/" title="Image by I_Shutter on Flickr">
Congratulations. You've just written your first web page in HTML.
-
1
Tips & Warnings
The header is the section that provides instructions to the web on how to display and catalogue your page. It contains the title generally displayed on the web browser's title bar as well as meta tags that describe the page's content and provide key words, which make it easy for search engines to list your page. In more advanced pages, this is also where the CSS and javascript goes. To customize any of the header content, simply replace the quoted text with your own title and meta content. You can link to any page on the Web. Replace the Google URL with the URL, complete with the "http://" prefix, of the page you wish to link to instead. Note that the IMG tag stands alone. There is no </IMG> closing tag. Though we used standard color names in our Body attributes, HTML can also read hexidecimal color codes, which allows more precise color matching. HEX codes can be found in the Custom Colors section of most imaging programs; or you can find online color converters, such as Draac.com's color converter, which can convert both standard English names and RGB values into HEX code. This article is just to get you started. Fortunately, there is no shortage of HTML tutorials on the web. Check out the reference links to find tutorials on advanced formatting techniques and to learn the vast capabilities of HTML in web design.
A missing closing tag, missing quotation marks or even a simple typo can break your web page, but don't worry. Such mistakes are as easy to find and fix as they are to make, thanks to validators such as the W3C 's Markup Validator. These programs verify that your code is correct and can be easily read and understood by all web browsers.
