How to create a simple web page using HTML

Table of contents:

How to create a simple web page using HTML
How to create a simple web page using HTML
Anonim

In this article, we'll show you how to create a simple web page using HTML code. HTML is one of the main components of the Internet because it defines the structure of web pages. You can create a web page using a text editor that comes with Windows or macOS.

Steps

Part 1 of 6: How to add the "head" tag (description of a web page)

4082 1 1
4082 1 1

Step 1. Open your text editor

On Windows, launch Notepad or Notepad ++, and on macOS, start TextEdit:

  • Windows - open the start menu
  • Windowsstart
    Windowsstart

    , type notepad or notepad ++ in the search bar, and then click Notepad or Notepad ++ at the top of the Start menu.

  • macOS - click on "Spotlight"
  • Macspotlight
    Macspotlight

    , type textedit, and then double-click "TextEdit" at the top of the search results.

4082 2 1
4082 2 1

Step 2. Type and press ↵ Enter

This will tell the web browser that this is an HTML document.

4082 3 1
4082 3 1

Step 3. Type and press ↵ Enter

This is the opening tag of the HTML code.

4082 4 1
4082 4 1

Step 4. Type and press ↵ Enter

This tag contains the description of the web page and header elements. The content of this tag is usually not displayed on the page. Content is the page description, metadata, CSS stylesheets, and other scripting languages.

4082 5 1
4082 5 1

Step 5. Enter

This tag contains the name of the page.

4082 6 1
4082 6 1

Step 6. Enter a name for the page

Enter the text to be displayed on the page tab.

4082 7 1
4082 7 1

Step 7. Type and press ↵ Enter

This tag closes the page name tag.

4082 8 1
4082 8 1

Step 8. Type and press ↵ Enter

This tag closes the page description tag. At this point, the HTML code should look something like this.

  My web page

Part 2 of 6: How to add the "body" tag (all content)

4082 9 1
4082 9 1

Step 1. Enter a tag below the closing head tag

This tag contains all the content of the HTML document. The content of this tag is displayed on the web page.

4082 10 1
4082 10 1

Step 2. Enter

This tag contains the title of the page. A heading is a large text, usually located at the top of the page.

4082 11 1
4082 11 1

Step 3. Enter the title of the page

This could be a page title or a greeting.

4082 12 1
4082 12 1

Step 4. Enter

after the title text and click ↵ Enter.

This tag closes the title tag.

  • Add additional titles as needed. Up to six titles can be created; this is done using tags -. The headings will have different sizes. For example, the code to create three different sized headers would be:

    

    Welcome to my page
    


    My name is Max
    

    I hope you will not be bored
4082 13 1
4082 13 1

Step 5. Enter

This tag contains a paragraph of text. Such a tag will display normal sized text.

4082 14 1
4082 14 1

Step 6. Enter your text

For example, enter a description for a web page or any other information.

4082 15 1
4082 15 1

Step 7. Enter

after the text and press ↵ Enter.

This tag closes the text paragraph tag. Below is an example of a paragraph in an HTML document:

This is the first paragraph.
  • To create multiple paragraphs under the same heading, add multiple lines in a row.
  • Change the color of the text. Enter a tag at the beginning of the text and a tag at the end. Replace the word "color" with the desired color (in English), and do not remove the quotes. These tags will allow you to change the color of any text (for example, a title). For example, to make the text blue, enter the following code:

    Whales are majestic animals.

  • You can also make the font bold, italic, and others. Below are examples of formatting text using HTML tags:

    Bold text Italic text  Underlined text  Subscript text Superscript text

Part 3 of 6: How to add additional elements

4082 16 1
4082 16 1

Step 1. Add a picture to the page

For this:

  • Enter <img src =. This tag contains a picture.
  • Copy and paste the URL of the picture after the equals sign (=) in quotes.
  • Enter> after the image URL to close the image tag. For example, if the URL for the image is http://www.myimage.com/ocean.jpg, enter the following code:

    

    • 





4082 17 1

4082 17 1




Step 2. Add a link to another web page


For this:


    

  • Enter <a href =. This tag contains a link to another page.
    • 

  • Copy and paste the URL after the equals sign (=) in quotes.
    • 

  • Enter> after the URL to close the URL.
    • 

  • Enter the link text after the ">" symbol.
    • 

  • Enter after the link text to close the link tag. Below is an example of a link to Yandex.
    

    Yandex.
    

    

    • 





4082 18 1

4082 18 1




Step 3. Add a line break


To do this, enter











… A line break will be inserted. This tag can be used to separate different sections of a page from each other.


Part 4 of 6: How to Change Colors




4082 19 3

4082 19 3




Step 1. Refer to the official list of color names and their codes in HTML color


The World Wide Web Consortium (W3C) maintains an official list of colors, which can be found at https://www.w3.org/wiki/CSS/Properties/color/keywords. Each color has an official name, a 6-digit hexadecimal code, and a decimal value. You can use any of these options to set the color of the elements on your page. In this example, we'll take the official color names.




4082 20 3

4082 20 3




Step 2. Set the background color using the tag


To do this, add the style attribute to the tag. Let's say you want to make the background of the entire page lavender:













4082 21 3

4082 21 3




Step 3. Set the text color for any tag


The style attribute can also be used to specify what color all text within a specific tag will be. For example, you want text within one of your tags


was midnightblue (dark blue):


    

  • 

  • The color change will only affect the text within the given tag
    

    … If you later open a new tag
    

    where the text also needs to be midnightblue, the "style" attribute will need to be set for that as well.
    

    • 





4082 22 3

4082 22 3




Step 4. Set the background color for the heading or paragraph


Similar to how you set the background color for the "body" tag, you can choose the background colors for other tags. For example, you want the background color











was lightgrey (light gray) and the background color of the H1 style header was lightskyblue (light blue):


    

  • 

    Part 5 of 6: How to Close HTML Code
    


    
4082 19 1

    4082 19 1
    

    

    Step 1. Enter to close the "body" tag
    

    When you're done adding text, images and other elements, enter the specified tag at the bottom of the HTML document.
    


    
4082 20 1

    4082 20 1
    

    

    Step 2. Enter to close the HTML code
    

    Enter this tag under the closing “body” tag. This will tell the web browser that there is no HTML code after this tag. All HTML code should be something like this:
    

      Yandex fan page  


    I welcome you to my page
    

    This is a Yandex fan page.
    


    Important dates
    

    January 1, 2000 - Yandex birthday
    


    Links
    

    Link to Yandex: Yandex
    
 

    

    Part 6 of 6: How to Save and Open a Webpage
    


    
4082 21 1

    4082 21 1
    

    

    Step 1. Convert the document to plain text (macOS users only)
    

    Click Format (top of the screen)> Create Plain Text (from the drop-down menu).
    

    This cannot and should not be done in Windows
    


    
4082 22 1

    4082 22 1
    

    

    Step 2. Click File
    

    It's on the menu bar at the top of the screen.
    


    
4082 23 1

    4082 23 1
    

    

    Step 3. Click Save As
    

    You will find this option in the File menu.
    

    Alternatively, press Ctrl + S (Windows) or ⌘ Command + S (Mac)
    


    
4082 24 1

    4082 24 1
    

    

    Step 4. Enter a name for the HTML document
    

    Enter it in the File Name (Windows) or Name (Mac) line.
    


    
4082 25 1

    4082 25 1
    

    

    Step 5. Change the file format from TXT to HTML
    

    For this:
    

      

    • Windows - Click the Save as Type menu, select All Files, and then enter.html at the end of the file name.
      • 

    • macOS - Enter.html instead of.txt at the end of the filename.
      • 

    


    
4082 26 1

    4082 26 1
    

    

    Step 6. Click Save
    

    It's at the bottom of the window. An HTML file will be generated.
    

    Usually HTML files are opened in the default web browser
    


    
4082 27 1

    4082 27 1
    

    

    Step 7. Close the text editor
    

    Now open the HTML file in a browser where you can view the generated web page.
    


    
4082 28 1

    4082 28 1
    

    

    Step 8. Open the HTML file in a browser
    

    To do this, double click on the HTML file. If an error notification opens, do the following:
    

      

    • Windows - Right-click on the file, select Open With, and then click on the desired browser.
      • 

    • macOS - Click on the file, click on "File", select "Open With" from the menu, and then select the browser you want.
      • 

    


    
4082 29 1

    4082 29 1
    

    

    Step 9. Edit the HTML document (if required)
    

    You may have noticed an error on the page. To fix it, edit the content of the HTML file:
    

      

    • On Windows, right-click on the file and select Edit (if Notepad ++ is installed on your computer, select Edit in Notepad ++).
      • 

    • On macOS, click the file, click File, choose Open With, and click TextEdit. Now drag the HTML file into the TextEdit window.
      • 

    


    Advice
    

      

    • You can add a side text scrollbar to a page using a tag. But remember that some browsers do not recognize this tag.
      • 

    • Many people use Notepad ++ to write and compile code.
      • 

    • Each tag needs to be closed. For example, tags should be closed like this:.
      • 

    • To center the image on the page, enter after the name of the image in the "img" tag (for example).
      • 

    





















Popular by topic