How to Set Up Your First Web Page
To create your first Web page, you do not need to buy any expensive software. All you need is a basic knowledge of HTML code and a text editor program such as Notepad on Windows or TextEdit on Mac. Saving a file with an ".html" extension tells a Web browser to read the document as a Web page. The fundamental parts of a Web page include the title, paragraphs, images and hyperlinks. You can create all of these and make them stand out quickly and easily using only a few lines of code.
Other People Are Reading
Instructions
-
-
1
Open a new text file. Save it as "index.html" and insert the cursor on the first line. The "index" page is the main page of any website. When you visit any website, for example at "somesite.com/," that's the same as actually visiting "somesite.com/index.html" but with the file name itself hidden.
-
2
Type the following code:
<html>
<head>
<title>Welcome to My First Web Page!</title>
</head>
<body>
The "<html>" tag tells a browser that it is viewing an HTML document. The "<head>" tag acts as a container for all "head" elements, such as the "<title>" tag in this case, which displays the website's name in the browser title. Other elements you can include in the header section include meta tags or link tags to CSS or JavaScript files. The "<body>" tag opens up the section that contains the content of the document -- the stuff visitors will see on your page.
-
-
3
Type the following code:
<h1>This Is My Web Page</h1>
The "<h1>" tag stands for "header 1," and changes the default formatting for the text. In this case, it increases the font size, makes it bold and centers it. You can use headers from <h1> to <h6>.
-
4
Type the following code:
<img src="images/myimage.jpg" alt="This is my image.">
The "<img>" tag loads an image on the page. The "src" attribute is the location of the image. You can provide a full URL if the image is not on the same Web server as the page itself, or provide a partial URL if it is. In this example, the "myimage.jpg" file is located in a folder called "images" one level below the "index.html" file. The "alt" tag displays text when the visitor hovers his mouse over the image or if the image itself does not appear correctly.
-
5
Type the following code:
<p>This is a paragraph.<br/>
This is another line.</p>
The "<p>" tag opens a new paragraph of text. The "<br/>" tag is a line break. It tells the browsers to insert a new line the same as pressing the "Enter" key in a text document does. The paragraph tag has separate opening tag and a closing tags. In the closing tag, the slash comes before the tag element. The line break tag does not have separate opening and closing tags, so the slash comes after the element.
-
6
Type the following code:
<a href="mylink.html">Click here to go to another page.</a>
The "<a>" tag is the anchor tag. It creates a hyperlink to another page. Like with images, you can provide full or partial URLs for the "href" attribute.
-
7
Type the following:
<p>
In this paragraph, <b>this text is in bold</b>, <i>this text is italicized</i> and <u>this text is underlined.</u>
<br/>
<b><i><u>This text is bold, italicized and underlined.</u></i></b>
</p>
This creates a new paragraph and uses bold, italics and underlining to emphasize text. Note that unlike before, the paragraph and line break tags are on lines of their own. This is not required, but helps make the code easier to read. Also, note that all three font formatting tags nested on the final line of the paragraph are opened in one order and closed in reverse order. This too is not required, but is a good habit to get into.
-
8
Type the following code:
<p>In this paragraph, <font size="3" color="blue" face="arial">I have changed the font size, face and color!</font></p>
The "<font>" tag modifies the default font settings. However, this tag is slowly being removed from standard HTML programming and at some point in the future will no longer work on all browsers. It is being replaced by rules in cascading style sheets.
-
9
Type the following code:
<p>Things I like:
<ul>
<li>Summer Days</li>
<li>Morning Coffee</li>
<li>Vacations</i>
</ul>
</p>
The "<ul>" tag stands for an unordered list. The "<li>" tags create a bullet list, one bullet for each element. Change the "<ul>" and "</ul>" tags to "<ol>" and "</ol>" respectively to create an ordered list in which the bullets are replaced with numbers, in this case from one to three.
-
10
Type the following code:
</body>
</html>
These two lines simply close the body and html tags opened at the beginning of the document. Save your text file and close it. Open the file in a Web browser to see your first Web page.
-
1
