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.
Part 1 of 6: How to add the "head" tag (description of a web page)
Step 1. Open your text editor
On Windows, launch Notepad or Notepad ++, and on macOS, start TextEdit:
- Windows - open the start menu
, 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"
, type textedit, and then double-click "TextEdit" at the top of the search results.
Step 2. Type and press ↵ Enter
This will tell the web browser that this is an HTML document.
Step 3. Type and press ↵ Enter
This is the opening tag of the HTML code.
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.
Step 5. Enter
This tag contains the name of the page.
Step 6. Enter a name for the page
Enter the text to be displayed on the page tab.
Step 7. Type and press ↵ Enter
This tag closes the page name tag.
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)
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.
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.
Step 3. Enter the title of the page
This could be a page title or a greeting.
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
Step 5. Enter
This tag contains a paragraph of text. Such a tag will display normal sized text.
Step 6. Enter your text
For example, enter a description for a web page or any other information.
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
Step 1. Add a picture to the page
- 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:
Step 2. Add a link to another web page
- 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.
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
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.
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:
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.
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
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.
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.
January 1, 2000 - Yandex birthday
Link to Yandex: Yandex
Part 6 of 6: How to Save and Open a Webpage
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
Step 2. Click File
It's on the menu bar at the top of the screen.
Step 3. Click Save As
You will find this option in the File menu.
Alternatively, press Ctrl + S (Windows) or ⌘ Command + S (Mac)
Step 4. Enter a name for the HTML document
Enter it in the File Name (Windows) or Name (Mac) line.
Step 5. Change the file format from TXT to HTML
- 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.
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
Step 7. Close the text editor
Now open the HTML file in a browser where you can view the generated web page.
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.
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.
- 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).