Scribd
Upload
4 views

How-to-Create-a-Simple-Web-Page-with-HTML_-9-Steps-with-Pictures

This document provides a step-by-step guide on how to create a simple web page using HTML, covering essential elements such as the head, body, text formatting, images, and links. It includes instructions on saving the HTML file and viewing it in a web browser. Additionally, it offers tips for customization and troubleshooting common issues.

Uploaded by

veeragreza2008
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

How-to-Create-a-Simple-Web-Page-with-HTML_-9-Steps-with-Pictures

This document provides a step-by-step guide on how to create a simple web page using HTML, covering essential elements such as the head, body, text formatting, images, and links. It includes instructions on saving the HTML file and viewing it in a web browser. Additionally, it offers tips for customization and troubleshooting common issues.

Uploaded by

veeragreza2008
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

4/16/24, 9:46 AM How to Create a Simple Web Page with HTML: 9 Steps (with Pictures)

How to Create a Simple Web Page with


HTML
Written by Nicole Levine, MFA
Last Updated: February 2, 2024 Fact Checked

This wikiHow teaches you how to write a simple web page with HTML (hypertext markup
language). HTML is one of the core components of the World Wide Web, making up the
structure of web pages. Once you've created your web page, you can save it as an
HTML document and view it in your web browser. Creating an HTML page is possible
using basic text editors found on both Windows and Mac computers.

Part
1 Adding a Head to Your HTML

Open a text editor. On a computer running the Windows operating


1 system, you'll usually use Notepad, or Notepad++ whereas macOS users
will use TextEdit and ChromeOS users will use Text:

Windows - Open Start , type in note p ad , or note p ad++ and


click Notepad or "Notepad++ or sublime" at the top of the window.

macOS - Click Spotlight , type in text e dit , and double-click


TextEdit at the top of the results.
ChromeOS - Open launcher, then click Text. (The icon says Code Pad).

Type in <!DO C TYPE html> and press ↵ Enter . This tells the web
2
browser that this is an HTML document.[1]
Advertisement

Type <htm l > and press ↵ Enter . This is the opening tag for your HTML
3 code.

Type in <hea d > and press ↵ Enter . This is the tag that opens your
4 HTML head. The HTML head information that is not usually displayed on
your web page. This information can include, the title, meta data, CSS style
sheets, and other scripting languages.[2]

https://www.wikihow.com/Create-a-Simple-Web-Page-with-HTML 1/10
4/16/24, 9:46 AM How to Create a Simple Web Page with HTML: 9 Steps (with Pictures)

Type in <tit l e> . This is the tag to add a title to your page.[3]
5
Type a title for your web page. This can be any title you want to name
6 your web page.

Type in </ti t le> and press ↵ Enter . This is the tag to close your title
7 tag.

Type </he a d> and press ↵ Enter . This is the tag to close your head.
8 Your HTML code should look something like this.

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>

Advertisement

Part
2 Adding a Body and Text to Your HTML

Type in <bod y > below the closed "Head" tag. This tag opens the
1 body of your HTML document. Everything that goes in the HTML body
displays on the web page.[4]

Type in <h1> . This is the tag to add a heading to your HTML document.
2 A Heading is large bold text that typically goes at the top of your HTML
document.[5]

Type a heading for your page. This can be the title of your page or a
3 greeting.

Type </h1 > after your heading text and press ↵ Enter . This tag
4 closes your heading.
Add additional headings as you go. There are six different headings that
you can create by using the <h1> < /h1> through <h6> < /h6> tags.
These create headings of different sizes. For example, to create three

https://www.wikihow.com/Create-a-Simple-Web-Page-with-HTML 2/10
4/16/24, 9:46 AM How to Create a Simple Web Page with HTML: 9 Steps (with Pictures)

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>

The headings shows the priority or importance of the text. But its not
necessary to use a higher heading if you want to use any lower heading.
One can directly use H3, even if there is no H1 in your post.

Type <p> . This is the tag to open a paragraph. Paragraph text is used to
5 display normal sized text.[6]

Type some text. This can be a description for your web page or any other
6 information you wish to share.

Type </p> after your text and press ↵ Enter . This the tag to close
7 your paragraph text. The following is an example of paragraph text in
HTML:

<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.
You can change the color of any text by framing the text with the <fon t
colo r ="color"> and </fo n t> tags. Make sure to type your
preferred color into the "color" section (you'll keep the quotes). You can
turn any text (e.g., headers) into a different color with this set of tags. For
example, to turn a paragraph's text blue, you would write the following
code: <p>< f ont color="blue">Wh a l e s a r e m a j e s t i c
crea t ures.</font></p>
You can add bolds, italics and other text formats using HTML. The following
are examples of how you can format text using HTML tags:[7]

<b>Bold text</b>
<i>Italic text</i>
<u>Underlined text</u>
<sub>Subscript text</sub>
<sup>Superscript text</sup>

https://www.wikihow.com/Create-a-Simple-Web-Page-with-HTML 3/10
4/16/24, 9:46 AM How to Create a Simple Web Page with HTML: 9 Steps (with Pictures)

If you use bold and italic text for emphasis, not just for styling, use the
<str o ng> and <em> elements instead of <b> and <i> . This
makes your web page easier to understand when using technologies like a
screen reader[8] or the reader mode provided in some browsers[9] .

Advertisement

Part
3 Adding Additional Elements to Your HTML

Add a picture to your page. You can add an image to your HTML using
1 the following steps:[10]
Type <img src= to open your image tag.
Copy and paste the image URL after the "=" sign in quotation marks.
Type > after the image url to close your image tag. For example, if the
image's URL is "http://www.mypicture.com/lake", you would write the
following:

<img src="http://www.mypicture.com/lake.jpg">

Link to another page. You can add a link to your HTML using the
2 following steps:[11]
Type <a h r ef= to open your link tag.
Copy and paste URL after the "=" sign in quotation marks.
Type > after the URL to close the link portion of the HTML.
Type a name for the link after the closing bracket.
Type </a> after the link name to close the HTML link.[12] The following is
an example of a link to Facebook.

<a href="https://www.facebook.com">Facebook</a>.

Add a line break to your HTML. You can add a line break by typing
3 <br> to your HTML. This creates a horizontal line that can be used to
divide different sections of your page.[13]

Advertisement

https://www.wikihow.com/Create-a-Simple-Web-Page-with-HTML 4/10
4/16/24, 9:46 AM How to Create a Simple Web Page with HTML: 9 Steps (with Pictures)

Part
4 Customizing Colors

Check out the list of official HTML color names and codes. The World
1 Wide Web Consortium (W3C) manages an official list of colors that you'll
find at https://www.w3.org/wiki/CSS/Properties/color/keywords. Each color has
an official name, 6-digit hexadecimal code, and a decimal value. You can use
any of these values to add color to elements of your webpage. For this
example, we'll use the official color names.

Set the background color in the <bod y > tag. You'll be doing this by
2 adding the styl e attribute to the tag. Let's say you wanted to make the
background color of the entire page lave n der :
<bod y style="background- c o l o r : l a v e n d e r ; " >

Set the text color for any tag. You can also use the styl e attribute to
3 specify which color you'd like all text within a particular tag to be. For
example, let's say you wanted to make the text in one of your <p> tags
midn i ghtblue :[14]
<p s t yle="color:midnight b l u e ; " >
The color change will only affect the text within that <p> tag. If you start
another <p> tag later that should also be midn i ghtblue , you'll need
to set the style attribute there as well.

Set the background color for a header or paragraph. Similar to how you
4 set the background color for the body tag, you can also set background
colors for other tags. Let's say you wanted to make the background color of an
<p> ligh t grey , and the background color of an H1-style header
ligh t skyblue , you'd use:
<p s t yle="background-col o r : l i g h t g r e y ; " >
<h1 s tyle="background-co l o r : l i g h t s k y b l u e ; " >

Advertisement

Part
5 Closing Your HTML Document

Type </bo d y> to close your body. After you have finished adding all
1 your text, images and other elements to the body of your HTML document,
add this tag at the bottom of your HTML document to close the body of your
HTML document.
https://www.wikihow.com/Create-a-Simple-Web-Page-with-HTML 5/10
4/16/24, 9:46 AM How to Create a Simple Web Page with HTML: 9 Steps (with Pictures)

Type </ht m l> to close your HTML document. This tag goes below
2 the tag to close your HTML body at the end of your HTML document. This
tells the web browser there is no more HTML code after this tag. Your entire
HTML document should look something like this:

<!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="http://www.wikihow.com">wikiHow</a>
</p>

</body>
</html>

Advertisement

Part
6 Saving and Opening Your Web Page

Convert your document to plain text (Mac users only). Click the
1 Format menu item at the top of the screen, then click Make Plain Text in
the resulting drop-down menu.[15]
This step is neither necessary nor possible on Windows.

Click File . It's in the menu bar at the top of the screen.
2
Click Save as . It's in the drop-down menu below "File".
https://www.wikihow.com/Create-a-Simple-Web-Page-with-HTML 6/10
4/16/24, 9:46 AM How to Create a Simple Web Page with HTML: 9 Steps (with Pictures)

3
Alternatively, you can press Ctrl + S (Windows) or ⌘ Command + S (Mac)
to do so.

Enter a name for your HTML document. Type whatever you want to
4 name your document into the "File name" (Windows) or "Name" (Mac) text
box.

Change the document's file type. You'll need to change the document
5 from a text file to an HTML file. Use the following steps to change the file
type:
Windows - Click the "Save as type" drop-down box, click All Files, and
then type .htm l at the end of the file's name.
MacOS - Replace the .txt at the end of the file's name with .htm l
instead.
ChromeOS - Click the "Save as" button. Name the file with .htm l at the
end. The beginning is up to you.

Click Save . It's at the bottom of the window. Doing so will create an
6
HTML file.[16]
HTML files typically open with your default web browser.

Close your text editor. At this point, you're ready to open your HTML file
7 in your browser so that you can view your web page.

Open the HTML document with your browser. In most cases, you'll be
8 able to double-click the HTML document to do this. If double-clicking the
document results in an error, do the following:
Windows - Right-click the document, select Open with, and click your
preferred browser.
Mac - Click the document once, click File, select Open With, and click your
preferred browser.

Edit the HTML document if needed. You may notice an error in your
9 HTML page. To change it, you can edit the HTML document's text:
On Windows, you can right-click the document and click Edit in the
resulting drop-down menu (if you have Notepad++ installed, this will say
Edit with Notepad++ instead).[17]
On Mac, you'll want to click the document to select it, click File, select
Open With, and click TextEdit. You can also drag the document into
TextEdit.[18]

https://www.wikihow.com/Create-a-Simple-Web-Page-with-HTML 7/10
4/16/24, 9:46 AM How to Create a Simple Web Page with HTML: 9 Steps (with Pictures)

On Chromebook, close the Text app, open Files, find your file, and then
click on it.

Advertisement

Community Q&A

Question

How do I upload my webpage and make it public?

Community Answer

You can set up your own server, but I recommend buying web hosting from
some of the available hosting companies. There are also free hosts out there,
but they would put their ads on your webpage.

Question

Can I create a web page using Notepad?

Community Answer

Yes. Write the code and then press edit-save and then call it what ever you
want. After you called it something, you have to type .html at he end. Save
and use as needed.

Question

Can I create an interactive design of a website using only HTML?

Community Answer

Yes, you can put some pictures on there and a background as well.

Advertisement

https://www.wikihow.com/Create-a-Simple-Web-Page-with-HTML 8/10
4/16/24, 9:46 AM How to Create a Simple Web Page with HTML: 9 Steps (with Pictures)

Tips

Many people use Notepad++ to write and compile their code.[19]

Tags should always be closed in a mirror image of their open counterparts. For
example, <tag1><tag2> should be closed as </tag2></tag1>.

You can add side-scrolling text to your website using the <marquee>
</marquee> tag, but keep in mind that this tag might not be recognized by
some browsers.

Advertisement

Warnings

It's best to host your own images on Imgur or similar if you plan on uploading
images to your web page. Posting other people's pictures may result in
copyright infringement.

Advertisement

References

1. https://www.w3schools.com/howto/howto_website.asp
2. https://developer.mozilla.org/en-
US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
3. https://developer.mozilla.org/en-
US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
4. https://www.freecodecamp.org/news/html-background-image-how-to-add-
wallpaper-images-to-your-website/
5. https://www.freecodecamp.org/news/html-background-image-how-to-add-
wallpaper-images-to-your-website/
6. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
7. https://www.w3schools.com/html/html_formatting.asp
8. https://alistapart.com/article/conversational-semantics/
9. https://alistapart.com/article/accessibility-for-vestibular/#section6

https://www.wikihow.com/Create-a-Simple-Web-Page-with-HTML 9/10
4/16/24, 9:46 AM How to Create a Simple Web Page with HTML: 9 Steps (with Pictures)

10. https://developer.mozilla.org/en-
US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML
11. https://www.w3.org/TR/html401/struct/links.html
12. https://www.w3schools.com/html/html_links.asp
13. https://www.freecodecamp.org/news/html-new-line-how-to-add-a-line-break-
with-the-br-tag/
14. https://www.freecodecamp.org/news/how-to-change-text-color-in-html/
15. https://support.apple.com/guide/textedit/work-with-html-documents-
txted0b6cd61/mac
16. https://condor.depaul.edu/sjost/hci201/documents/notepad.htm
17. https://notepad-plus-plus.org/
18. https://support.apple.com/guide/textedit/work-with-html-documents-
txted0b6cd61/mac
19. https://notepad-plus-plus.org/
Advertisement

https://www.wikihow.com/Create-a-Simple-Web-Page-with-HTML 10/10

You might also like