How to Create a Simple Web Page with HTML

PDF download Download Article
PDF download Download Article

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
Part 1 of 6:

Adding a Head to Your HTML

PDF download Download Article
  1. On a computer running the Windows operating system, you'll usually use Notepad , or Notepad++ whereas macOS users will use TextEdit and ChromeOS users will use Text:
    • Windows - Open Start
      Windows Start
      , type in notepad , or notepad++ and click Notepad or "Notepad++ or sublime" at the top of the window.
    • macOS - Click Spotlight
      Mac Spotlight
      , type in textedit , and double-click TextEdit at the top of the results.
    • ChromeOS - Open launcher, then click Text. (The icon says Code Pad).
  2. This tells the web browser that this is an HTML document. [1]
    Advertisement
  3. This is the opening tag for your HTML code .
  4. This is the tag that opens your 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]
  5. This is the tag to add a title to your page. [3]
  6. This can be any title you want to name your web page.
  7. This is the tag to close your title tag.
  8. This is the tag to close your head. Your HTML code should look something like this. 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
My Web Page </ 
 title 
 > 
 </ 
 head 
 >
    9. Advertisement
Part 2
Part 2 of 6:

Adding a Body and Text to Your HTML

PDF download Download Article
  1. This tag opens the body of your HTML document. Everything that goes in the HTML body displays on the web page. [4]
  2. This is the tag to add a heading to your HTML document. A Heading is large bold text that typically goes at the top of your HTML document. [5]
  3. This can be the title of your page or a greeting.
  4. This tag 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 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.
  5. This is the tag to open a paragraph. Paragraph text is used to display normal sized text. [6]
  6. This can be a description for your web page or any other information you wish to share.
  7. This the tag to close 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 <font color="color"> and </font> 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><font color="blue">Whales are majestic creatures.</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 
 >
    • If you use bold and italic text for emphasis, not just for styling, use the <strong> 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] .
    8. Advertisement
Part 3
Part 3 of 6:

Adding Additional Elements to Your HTML

PDF download Download Article
  1. You can add an image to your HTML using 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" 
 >
  2. You can add a link to your HTML using the following steps: [11]
    • Type <a href= 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 
 > 
.
  3. Add a line break to your HTML. You can add a line break by typing <br> to your HTML. This creates a horizontal line that can be used to divide different sections of your page. [13]
    4. Advertisement
Part 4
Part 4 of 6:

Customizing Colors

PDF download Download Article
  1. The World 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.
  2. Set the background color in the <body> tag. You'll be doing this by adding the style attribute to the tag. Let's say you wanted to make the background color of the entire page lavender :
    • <body style="background-color:lavender;">
  3. Set the text color for any tag. You can also use the style attribute to 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 midnightblue : [14]
    • <p style="color:midnightblue;">
    • The color change will only affect the text within that <p> tag. If you start another <p> tag later that should also be midnightblue , you'll need to set the style attribute there as well.
  4. Similar to how you 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> lightgrey , and the background color of an H1-style header lightskyblue , you'd use:
    • <p style="background-color:lightgrey;">
    • <h1 style="background-color:lightskyblue;">
    5. Advertisement
Part 5
Part 5 of 6:

Closing Your HTML Document

PDF download Download Article
  1. After you have finished adding all 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.
  2. This tag goes below 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 
 >
    3. Advertisement
Part 6
Part 6 of 6:

Saving and Opening Your Web Page

PDF download Download Article
  1. Click the 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.
  2. It's in the menu bar at the top of the screen.
  3. It's in the drop-down menu below "File".
    • Alternatively, you can press Ctrl + S (Windows) or ⌘ Command + S (Mac) to do so.
  4. Type whatever you want to name your document into the "File name" (Windows) or "Name" (Mac) text box.
  5. You'll need to change the document 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 .html at the end of the file's name.
    • MacOS - Replace the .txt at the end of the file's name with .html instead.
    • ChromeOS - Click the "Save as" button. Name the file with .html at the end. The beginning is up to you.
  6. It's at the bottom of the window. Doing so will create an HTML file. [16]
    • HTML files typically open with your default web browser.
  7. At this point, you're ready to open your HTML file in your browser so that you can view your web page.
  8. In most cases, you'll be 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.
  9. You may notice an error in your 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]
    • On Chromebook, close the Text app, open Files, find your file, and then click on it.
    10. Advertisement

Sample HTML


Community Q&A

Search
Add New Question
  • 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.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 76 Helpful 254
  • 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.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 125 Helpful 404
  • 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.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 32 Helpful 101
See more answers
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Tips

      • Many people use Notepad++ to write and compile their code. [19]
        Thanks
        Helpful 0 Not Helpful 0
      • Tags should always be closed in a mirror image of their open counterparts. For example, <tag1><tag2> should be closed as </tag2></tag1> .
        Thanks
        Helpful 0 Not Helpful 0
      • 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.
        Thanks
        Helpful 0 Not Helpful 0
      Show More Tips
      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!
      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.
        Thanks
        Helpful 5 Not Helpful 3
      Advertisement

      You Might Also Like

      A Complete Guide to Making Your Own Website
      How to
      Start a Blog
      4 Ways to Add a Link to a Picture
      How to
      Run a HTML File in Visual Studio Code
      How to
      Insert Spaces in HTML
      How to
      Write HTML Code
      How to
      Run a HTML File
      How to
      Insert Images with HTML
      How to
      Change the Button Color in HTML
      Add a Background Image to a Website: Step-by-Step Tutorial
      How to
      Open HTM Files
      Simple Ways to Find the Hex Code of Any Color on Your Computer
      How to
      Resize iFrames in HTML
      How to
      Make a Birthday Card with HTML and CSS
      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
      1. ↑ https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML
      2. ↑ https://www.w3.org/TR/html401/struct/links.html
      3. ↑ https://www.w3schools.com/html/html_links.asp
      4. ↑ https://www.freecodecamp.org/news/html-new-line-how-to-add-a-line-break-with-the-br-tag/
      5. ↑ https://www.freecodecamp.org/news/how-to-change-text-color-in-html/
      6. ↑ https://support.apple.com/guide/textedit/work-with-html-documents-txted0b6cd61/mac
      7. ↑ https://condor.depaul.edu/sjost/hci201/documents/notepad.htm
      8. ↑ https://notepad-plus-plus.org/
      9. ↑ https://support.apple.com/guide/textedit/work-with-html-documents-txted0b6cd61/mac
      10. ↑ https://notepad-plus-plus.org/

      About This Article

      Article Summary X

      1. Open a text editor.
      2. Type ″<!DOCTYPE html>″ on the first line.
      3. Type ″<html>″ on the next line.
      4. Type ″<head>″ on the next line.
      5. Type your page’s title between ″<title>″ and ″</title>″ tags.
      6. Type ″</head>″ on the next line.
      7. Type ″<body>″ on the next line.
      8. Enter the content of your page.
      9. End the page with ″</body></html>″

      Did this summary help you?
      In other languages
      Thanks to all authors for creating a page that has been read 4,720,905 times.

      Reader Success Stories

      • Brian B.

        May 1, 2023

        "I'm retired with a background in telecommunications research. Had forgotten a lot of programming skills. Used ..." more
      More reader stories Hide reader stories
      Share your story

      Is this article up to date?

      Advertisement