Creating the Web Page
1
Open a text editor. On a Windows computer, you'll usually use Notepad, whereas Mac users will use TextEdit:
- Windows - Open Start , type in notepad, and click Notepad at the top of the window.
- Mac - Click Spotlight , type in textedit, and double-click TextEdit at the top of the results.
2
Set up your document type for HTML. Type in <!DOCTYPE html> and press ↵ Enter, then type in <html> and press ↵ Enter again. Finally, type in <head>and press ↵ Enter. The top of your document should resemble the following:[1]
<!DOCTYPE html> <html> <head>
3
Add a tab title for your web page. This is the title which will appear on the browser tab when you open the page (e.g., "Facebook"). Type in <title>, enter your web page's tab title, and type in </title>. You'll then add the closing "Head" tag, which is </head>, on its own line. The title section should look like this:
4 Indicate the beginning of your page's body text. Type in <body> below the closed "Head" tag. This ensures that the rest of your document's text will be considered website text until you close the "Body" tag. You should have the following: <title>My Web Page</title> </head>
<body>
5
reate a page heading. Your page heading is the title which will appear at the top of your website. To create one, type in <h1>, add your heading, and then close the tag with </h1>. For example:
<h1>Welcome to My Page!</h1>
6
Add additional headings as you go. There are six different headings that you can create by using the <h1></h1> through <h6></h6> tags. For example, to create three different-sized headings in succession, you might write the following:
<h1>Welcome to My Page!</h1> <h2>My name is Bob.</h2> <h3>I hope you like it here.</h3>
7
Create a paragraph. Paragraph tags are used to create distinct blocks of text. To place text in a paragraph, type in <p> and type in your text, then type in </p> to close the tag:
<p>This is my paragraph.</p>
- You can add multiple paragraph lines in a row in order to create a series of paragraphs under one heading.
8
Change text color. You can change the color of any text by framing the text with the <font color="color"></font> tags, making sure to type your preferred color into the "color" section (you'll keep the quotes). For example, to turn a paragraph's text blue, you would write the following:[2]
<p><font color="blue">Whales are majestic creatures.</font></p>
- You can turn any text (e.g., headers) into a different color with this set of tags.
- HTML supports a surprisingly large number of colors, so feel free to experiment with different color names.
9
Format text with bold, italic, or underlining. Bold text, italic text, and underlined text can be created with the <b></b> tags, the <i></i> tags, and the <u></u> tags respectively. You can also create subscript text (used for things like numbers before square roots) and superscript text (used for things like squaring numbers):[3]
<b>Bold text</b> <i>Italic text</i> <u>Underlined text</u> <sub>Subscript text</sub> <sup>Superscript text</sup>
10
Add a picture to your page. You can use the <img src="URL"></img>tags to embed an existing image in your web page. For example, if the image's URL is "www.mypicture.com/lake", you would write the following:
<img src="www.mypicture.com/lake"></img>
11
Link to another page. You can add an link to another website by using the <a href="link">link text</a> tag set, where link is the URL for the website to which you want to link and link text is the text that will act as the link. For example, to link to Facebook, you would type the following:[4]
<a href="www.facebook.com">This is the link to Facebook's website</a>.
12
Close the web page's tags. As with any tag in HTML, you'll have to close the <body> and <html> tags that are at the top of your document by typing in the following at the bottom of the document:
</body> </html>
13
Review your web page. You can add more paragraphs, headings, and text anywhere on the page in between the <body></body> tags if needed. One example of a completed web page is as follows:
<!DOCTYPE html> <html> <head> <title>wikiHow Fan Page</title> </head> <body> <h1>Welcome to My Page!</h1> <p>This is a fan page for wikiHow. Make yourself at home!</p> <h2>Important Dates</h2> <p><i>January 15, 2019</i> - wikiHow's Birthday</p> <h2>Links</h2> <p>Here is a link to wikiHow: <a href="www.wikihow.com">www.wikihow.com</a></p> </body> </html>
14
Make any last-minute changes. If you see any errors in your code, correct them before proceeding. Once you're certain that your HTML accurately reflects your expectations, you can proceed to the next part.