Contents  >

Introduction to HTML

Learning Goals

At the end of this Tutorial you will be able to:

You can view finished versions of the four sample web pages you will create in this Tutorial by clicking the links below. The finished samples will each open in a new tab of your web browser.

Introduction to HTML page-1.html
Introduction to HTML page-2.html
Introduction to HTML page-3.html
Introduction to HTML page-4.html

You will also create a website home web page with hyperlinks to your four sample web pages.

Introduction to HTML index.html

Contents

Creating your first web page

Hiding/displaying the VS Code Sidebar

Adding the <head> and <body> structure to your web page

Adding a title to the <head> of your web page

Adding a description to the <head> of your web page

Displaying your web page

Adding text to the <body> of your web page

Marking up the content in your first web page

Creating a second sample web page

Marking up the content in your second web page

Creating a third sample web page

Correcting HTML mark-up errors in your third web page

Creating a fourth sample web page

Creating lorem ipsum dummy text

Creating a home page for your website

Adding comments to the code of a web page

Hiding a web page from search engines

Installing the Auto Rename Tag Extension

Why install and use Auto Rename Tag?

Uploading your web pages to GitHub

Further resources

Creating your first web page

Let’s create a new web page – that is, an HTML file. Here are the steps:

  1. Start Microsoft Visual Code on your computer.
  2. Choose the File | New File command. Introduction to HTML VS Code creates a new, empty file in a new tab within your VS Code window.   It suggests the name of Untitled-1 for your new file. Introduction to HTML Let’s give your file a new name and save it as an HTML file.
  3. Choose the File | Save As... command. Introduction to HTML
  4. In the dialog box now displayed, save your file in your websites folder with this name:   page-1.html  
    Introduction to HTML DO NOT name your web page with an upper-case ‘P’ as in Page-1.html.
    And DO NOT use some other mixture of upper and lower-case letters, such as PAGE-1.HTML or page-1.HTML or whatever.
    Also, DO NOT enter any blank spaces in the name of your file: type page-1.html NOT page - 1.html or page -1.html.
    Introduction to HTML Because you have included the filename extension (.html), you can ignore the second box named Save as type.   After typing the name of your file, click the Save button.   Notice how VS Code now displays the name of your page-1.html file at the top of the screen. Introduction to HTML

That’s it. You have successfully created your first sample web page.

Hiding/displaying the VS Code Sidebar

By default, Visual Studio Code displays a Sidebar at the left of the screen. You can click the icon near the top-left of the screen to hide or display this Sidebar.

Introduction to HTML

Adding the <head> and <body> structure to your web page

After creating and naming your new, empty page-1.html web page, your next task is to add the basic <head> and <body> structure to it.

Visual Studio Code offers a convenient shortcut for doing this.

  1. In VS Code, click anywhere in your empty web page and type the exclamation mark ! (SHIFT key and 1 key). Introduction to HTML After one or a few seconds, the Emmet Abbreviation menu appears. Click on the first option from the menu. Or press the ENTER key. Introduction to HTML VS Code now fills your new file with the basic HTML structure. Introduction to HTML
    NOTE: The exclamation mark ! shortcut key is part of Emmet, a collection time-saving tools for web designers and developers that is pre-installed in VS Code.
  2. To make your web page easier to read and edit, add some blank lines after the closing </head> tag and before the opening <body> tag.   Click just before the <body> tag and press the ENTER key one, two or three times. Introduction to HTML When you look at the HTML of your web page on the VS Code screen, you can now see visually ‘at a glance‘ where the <head> ends and the <body> begins. Introduction to HTML
  3. Save your HTML file. You can choose the File | Save command from the menu. Or simply press Ctrl key (Windows) or Command ⌘ key (Apple) and press the s (for Save) key.

Well done. You have now created what is called a ‘valid’ web page.

Adding a title to the <head> of your web page

Now you will give a title to your web page.

  1. In the <head> of your page-1.html file, you can see that VS Code has given your page a default title of Document.   This text is located between the opening <title> and closing </title> tags.
      <title>Document</title>
    	
  2. Replace this with the following new text:
      <title>A Tale of Two Cities</title>
    	
  3. When finished, save your HTML file.

Adding a description to the <head> of your web page

Now you will add a summary description of the contents of your web page.

  1. In the <head> of your web page, at the end of the line that contains the <title> ... </title> tag pair, click with the mouse and then press the Enter key to open a new, blank line. Introduction to HTML Your web page should now look as shown below. Introduction to HTML
  2. Copy the following line:
      <meta name="description" content="A basic web page containing some text from A Tale of Two Cities, a novel published in 1859 by English author Charles Dickens.">   
    
  3. Paste the copied text in your web page, on the new, blank line you created under the <title> ... </title> tag pair.   See below. Introduction to HTML
  4. Save your page-1.html file.

All done. You are now finished working with the <head> of your first sample web page.

Displaying your web page

Let’s display your page-1.html web page in a web browser.

  1. Open File Explorer (Windows 10) or Windows Explorer (Windows 7), and display the contents of your websites folder.   Your choice of default web browser determines which icon is shown for your HTML files.
    • If you have set Google Chrome as your default web browser, your screen should look as shown below. Introduction to HTML
    • If you have set Mozilla Firefox Developer Edition as your default web browser, your screen shown look as below. Introduction to HTML
    In either case, double-click the page-1.html file to open it.
  2. If some other web browser is your default:
    • Right-click the page-1.html file.
    • From the context menu displayed, choose Open with.
    • Select either Firefox Developer Edition or Google Chrome to open the web page. file-explorer-right-click
  3. Your web page should look as shown below. Introduction to HTML Note the address of your web page in the Address Bar of your web browser.
    • The first part of the address shows the name of the folder (websites) that contains your web page.
    • The second part of the address shows the name of the file (page-1.html). Introduction to HTML
    Also in the Address Bar of the web browser you can see that the forward slash / character is used to separate the name of the file from the name of the folder where the file is located. Introduction to HTML
  4. Because you have not yet added any content to the <body> of your web page, it looks as if it is empty.   However, your web page does contain the correct content within its <head>.   To view this:
    • Right-click anywhere on the web page.
    • From the context menu displayed, choose the View Page Source command. Introduction to HTML
  5. Your web browser opens a new tab and displays the HTML source code of your web page. Introduction to HTML

Adding text to the <body> of your web page

In this section, you will copy-and-paste some text content to the <body> of your web page.

  1. Drag down and across all the text in the grey box below to select it.

    A Tale of Two Cities

    It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair.

    We had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way - in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.

    Small Heading
    There were a king with a large jaw and a queen with a plain face, on the throne of England; there were a king with a large jaw and a queen with a fair face, on the throne of France. In both countries it was clearer than crystal to the lords of the State preserves of loaves and fishes, that things in general were settled for ever.

    Small Heading
    All these things, and a thousand like them, came to pass in and close upon the dear old year one thousand seven hundred and seventy-five. Environed by them, while the Woodman and the Farmer worked unheeded, those two of the large jaws, and those other two of the plain and the fair faces, trod with stir enough, and carried their divine rights with a high hand.

    Smaller Heading
    A wonderful fact to reflect upon, that every human creature is constituted to be that profound secret and mystery to every other. A solemn consideration, when I enter a great city by night, that every one of those darkly clustered houses encloses its own secret; that every room in every one of them encloses its own secret; that every beating heart in the hundreds of thousands of breasts there, is, in some of its imaginings, a secret to the heart nearest it!

    by Charles Dickens, published by Chapman & Hall in 1859.

  2. Right-click on the selected text and, from the context menu, choose Copy. Introduction to HTML
  3. In VS Code, with the page-1.html file open, click on the first blank line after the opening <body> tag. Introduction to HTML Now, paste the copied text.
  4. VS Code may add one or more blank lines after the opening <body> tag and before the pasted text. You can delete these blank lines. Introduction to HTML
  5. Save your file and then display it in your web browser.

As you can see, the web browser ignores any paragraph breaks in the file and displays all the text content as a single block.

Introduction to HTML

This is because the content is not marked up with HTML tags.

Marking up the content in your first web page

Now you will mark-up the text of your web page with opening and closing pairs of the following HTML tags: <h1>, <h2>, <h3> and <p>.

The < symbol is known as the left angle bracket. And the > symbol is known as the right angle bracket.

Introduction to HTML
  1. Wrap the main heading text “A Tale of Two Cities” within <h1> ... </h1> tags.
  2. Wrap the two “Small Heading” texts within <h2> ... </h2> tags.
  3. Wrap the “Smaller Heading” text within <h3> ... </h3> tags.
  4. Wrap the remaining paragraphs of text with <p> ... </p> tags.
  5. On the last line, wrap the words “Charles Dickens” within italics <i> ... </i> tags.
  6. And wrap the words “Chapman & Hall” within bold <b> ... </b> tags.
  7. The body of your HTML file should now look as shown below. Introduction to HTML
  8. Save your page-1.html web page file.
  9. Display your web page in your web browser. It should now look as shown below. Introduction to HTML

You have now finished working with your first sample web page.

Click page-1.html (final) to view a finished sample of this first web page in a new tab of your web browser.

Creating a second sample web page

In this section, you will use your first sample web page named page-1.html as the basis for creating a second sample web page, named page-2.html.

  1. In VS Code, with the page-1.html file open, choose the File | Save As... command, and save your web page in your websites folder this new name:   page-2.html Introduction to HTML  
    Introduction to HTML DO NOT name your web page with an upper-case ‘P’ as in Page-2.html.
    And DO NOT use some other mixture of upper and lower-case letters, such as PAGE-2.HTML or page-2.HTML or whatever.
    Also, DO NOT enter any blank spaces in the name of your file: type page-2.html NOT page - 2.html or page -2.html.
  2. Drag down and across all the text in the grey box below to select it.

    IBAT Chocolates

    We transform ethically-sourced organically-grown, high-quality cocoa beans into delicious chocolate.

    O’Payo
    Ethically-sourced cocoa beans supplied by Ingemann Fine Cocoa. Based in Tipitapa, Nicaragua, Ingemann currently receives wet beans from 450 small holders. These farmers receive a premium of 25% on their wet beans (compared to market rate for dried beans) as well as cultivation support and collection at farm gate.

    Ingredients: Organic cocoa beans and organic sugar.

    Nahua
    Nahua is Costa Rica's leading fine flavour cocoa producer with a social mission committed to improving the lives of the local smallholder farmers. Like our other cocoa bean suppliers, Nuhua collects wet beans at the farm gate and ferments them centrally. This takes the burden of mastering the complex fermentation process off the farmer and ensures the cocoa beans are fermented and dried to an exacting standard.

    Ingredients: Cocoa beans and organic sugar.

  3. Right-click on the selected text and, from the context menu, choose Copy.
  4. In VS Code, in your page-2.html file, select all the text inside the <body> ... </body> tags.
  5. Paste the copied text, so that the new text replaces the old.
  6. Save your page-2.html file and then display it in your web browser. It should look as shown below. Introduction to HTML

Your next task is to mark up this text with HTML tags.

Marking up the content in your second web page

Now you will mark-up the text of your web page with the following HTML tag pairs: <h1>, <h2>, <h3> and <p>.

  1. Wrap the main heading “IBAT Chocolates” within <h1> ... </h1> tags.
  2. Wrap the entire first paragraph within <h2> ... </h2> tags.
  3. Wrap the two sub-headings “O'Payo” and “Nahua" within <h3> ... </h3> tags.
  4. Wrap the remaining paragraphs of text within <p> ... </p> tags.
  5. Wrap the two words “Ingredients” within bold <b> ... </b> tags.
  6. Wrap the two ingredient contents within italics tags <i> ... </i> tags.
  7. The body of your HTML file should now look as shown below. Introduction to HTML
  8. Save your web page and display it in your web browser. It should now look as shown below. Introduction to HTML
  9. One final step remains: in the <head> of your second sample web page, you need to update the title and the description details.   Copy the marked-up lines below, and paste them into your page-2.html file to replace the old title and description information.
      <title>IBAT Chocolates</title>
      <meta name="description" content="We transform ethically-sourced organically-grown, high-quality cocoa beans into delicious chocolate.">   
    
    The <head> of your web page should now look as shown below. Introduction to HTML
  10. Save your page-2.html file.

You have now finished working with your second sample web page.

Click page-2.html (final) to view a finished sample of this second web page in a new tab of your web browser.

Creating a third sample web page

In this section, you will create a third sample web page named page-3.html based on a page from the Internet. Here are the steps.

  1. Click on the following web page to open it in a new tab of your web browser:   https://www.munnelly.com/webdesign/exercises/page-3.html
  2. Right-click anywhere on the web page and, from the context menu now displayed, choose the View Page Source command. Introduction to HTML
  3. Select all the content of the web page. You can do this by:
    • Clicking with your mouse in the top-left corner of the page, and then dragging the mouse all the way down to the bottom-right corner of the page.
    • Clicking with your mouse anywhere in the page, and pressing the Ctrl key (Windows) or Command ⌘ key (Apple) key along with the letter ‘a’ key (for All).
  4. Copy the selected content.
  5. You can now close this tab of your web browser.
  6. Switch to VS Code, and choose the File | New command.
  7. In your new, empty web page, paste the content you copied from the Internet.
  8. Choose the File | Save As... command, and save this new file in your websites folder with the following name:   page-3.html Introduction to HTML
    Introduction to HTML DO NOT name your web page with an upper-case ‘P’ as in Page-3.html.
    And DO NOT use some other mixture of upper and lower-case letters, such as PAGE-3.HTML or page-3.HTML or whatever.
    Also, DO NOT enter any blank spaces in the name of your file: type page-3.html NOT page - 3.html or page -3.html.

Correcting HTML mark-up errors in your third web page

Your copied-and-pasted content for page-3.html already contains HTML tags. But with some deliberate errors!

NOTE: To get the most value from this example, ensure you have installed the HTMLHint Extension for Visual Studio Code. See the instructions here.

  1. In VS Code, look at the purple line along the bottom of the screen. Introduction to HTML You can see a warning that your web page contains five errors.
  2. Click on the number 5 to display the list of errors in the web page. You can also see the line number on which each error occurs. HTML Hint warnings
  3. Correct the errors and, when finished, resave your page-3.html web page.
  4. Display the page in your web browser. It should now look as shown below. Introduction to HTML

You have now finished working with your third sample web page.

Click page-3.html (final) to view a finished sample of this third web page in a new tab of your web browser.

Creating a fourth sample web page

In this section, you will create a fourth sample web page named page-4.html based on a page from the Internet. Here are the steps.

  1. Click on the following web page to open it in a new tab of your web browser:   https://www.munnelly.com/webdesign/exercises/page-4.html
  2. Right-click anywhere on the web page and, from the context menu now displayed, choose the View Page Source command. Introduction to HTML
  3. Select and copy the entire content of the web page. You can then close this tab of your web browser.
  4. Switch to VS Code, and choose the File | New command.
  5. In your new, empty web page, paste the content you copied from the Internet.
  6. Choose the File | Save As... command, and save this new file in your websites folder with the following name:   page-4.html Introduction to HTML  
    Introduction to HTML DO NOT name your web page with an upper-case ‘P’ as in Page-4.html.
    And DO NOT use some other mixture of upper and lower-case letters, such as PAGE-4.HTML or page-4.HTML or whatever.
    Also, DO NOT enter any blank spaces in the name of your file: type page-4.html NOT page - 4.html or page -4.html.

Creating lorem ipsum dummy text

Your copied-and-pasted content for page-4.html already contains correct HTML tags.

But you will notice that there is no text within many of the <p> ... </p> tags.

This will not cause an HTML error. It just means that, as a web designer, you have not yet been provided with text content to work with.

Introduction to HTML

In cases like this, you can use “dummy” or “placeholder” text called Lorem Ipsum. Follow these steps.

  1. Click inside the first pair of empty <p> ... </p> tags. Introduction to HTML
  2. Type the word “lorem" (without quotes).
  3. When the Emmet Abbreviation menu appears after one or two seconds, click on it or press the Enter key. Introduction to HTML VS Code now creates 30 words of Lorem Ipsum text, as shown below. Introduction to HTML
  4. Repeat this step for the four other remaining empty paragraphs.   Note that you can change the number of words of Lorem Ipsum that are generated by typing a number after the word “lorem". For example:   lorem40 or lorem12
  5. When finished, save your page-4.html web page and display it in your web browser. It should look similar to that shown below. Introduction to HTML

You have now finished working with your fourth sample web page.

Click page-4.html (final) to view a finished sample of this fourth web page in a new tab of your web browser.

Creating a home page for your website

In this section, you will use your fourth sample web page named page-4.html as the basis for creating a front or ‘home’ page named index.html for your website.

  1. In VS Code, with the page-4.html file open, choose the File | Save As... command, and save your web page in your websites folder this new name:   index.html Introduction to HTML  
    Introduction to HTML DO NOT name your web page with an upper-case ‘I’ as in Index.html.
    And DO NOT use some other mixture of upper and lower-case letters, such as INDEX.HTML or index.HTML or whatever.
    Also, DO NOT enter any blank spaces in the name of your file: type index.html NOT index .html
  2. In the <head> of your new index.html file, update the title and the description tags by copying and pasting the marked-up lines below to replace the old title and description tags.
      <title>Mary Smith | Home Page</title>
      <meta name="description" content="Welcome to my website that showcases some of my digital creations.">   
    	
    Replace the name “Mary Smith" with your own name. And edit the text as you wish. The <head> of your web page should look similar to the sample below. Introduction to HTML
  3. Delete all the content from inside the <body> ... </body> tags of the web page. Introduction to HTML
  4. Enter the new content below. Introduction to HTML
  5. Save your web page and view it in your web browser. It should look like that below. Introduction to HTML
  6. Click on the four hyperlinks to ensure they all work correctly.

Click index.html (final) to view a finished sample of this home web page in a new tab of your web browser.

Adding comments to the code of a web page

In a web page, a comment is one or more lines of text that are visible only in the source code – but are not actually displayed in the web browser.

You can see an example of a short, one-line comment below.

  <!-- This is a comment -->

And here is an example of a longer, multi-line comment.

  <!-- 
  Generated by Animista on 2019-4-3 8:17:9
  http://animista.net, t: @cssanimista
  -->

Follow these steps to create a comment in VS Code.

By default, VS Code displays comments in a dark green colour.

Hiding a web page from search engines

Google and other search engines use software programs called spiders to crawl the web for web pages to add to their list of indexed web pages. Only web pages listed in such an index will appear in search engine results.

If you don't want a particular web page to be found by Google or other search engines, follow these steps:

  1. Open your web page in VS Code.
  2. In the <head> of your web page add the following new line:
      <meta name="robots" content="noindex">
    
    You can add this anywhere within the head. Typically, it is placed just after the charset line, as shown below. Introduction to HTML
  3. When finished, save your web page.

Installing the Auto Rename Tag Extension

A VS Code Extension web designers find useful when marking up content with HTML tags is called Auto Rename Tag. About three million people have downloaded it. Here are the steps to install Auto Rename Tag.

  1. Along the left of your VS Code screen is a vertical list of large icons. This is known as the Activity Bar. Click on the Extensions icon in the Activity Bar. User Settings Microsoft Visual Studio Code
  2. Visual Studio opens a new window named Extensions at the left of your screen. Typically, it will show a list of currently popular Extensions. At the top of the list is a search box. User Settings Microsoft Visual Studio Code
  3. In the Extensions search box, type Auto Rename Tag. User Settings Microsoft Visual Studio Code
  4. You can drag the right border of the Extensions window further to the right, to see the full text of the search results. User Settings Microsoft Visual Studio Code
  5. Click the Install button under the Auto Rename Tag search result.
  6. The top part of your VS Code window should now look similar to that below. User Settings Microsoft Visual Studio Code HTMLHint is now successfully installed and ready to use. You do not need to restart VS Code.
  7. To close the Auto Rename Tag Extension window, click the close (X) icon at the top. Introduction to HTML
  8. To close the Extensions search box, click the large Extensions icon in the Activity Bar at the left of the VS Code screen.

Why install and use Auto Rename Tag?

The Auto Rename Tag extension will hekp you avoid errors when marking up content with HTML tag pairs such as <h1>, <h3>, <p> and so on.

Consider the example below, where the text “Main Heading” is wrapped in a pair of opening and closing h1 tags.

  <h1>Main Heading</h1>

In short, the Auto Rename Tag extension ensures that the opening and closing HTML tags in your web pages always match.

Uploading your web pages to GitHub

After creating your web pages, you are now ready to upload them to your account on GitHub.

  1. Open a new tab in your web browser and go to GitHub.com. If you are not already signed in to your GitHub account, sign in now. github-signin
  2. On your GitHub home page, click the name of the repository (‘repo’) that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub.   username.github.io github-signin
  3. On the next GitHub screen displayed, near the right of the screen, you can see a button named Add file. Click on it. github-upload-portfolio
  4. From the dropdown list displayed, choose the option Upload files. Project Animation Google Fonts
  5. In File Explorer (Windows 10) or Windows Explorer (Windows 7), select or drag-and-drop the following five files to upload them to your GitHub account.   index.html
    page-1.html
    page-2.html
    page-3.html
    page-4.html Project Animation Google Fonts
  6. Finally, scroll down to the bottom of the GitHub screen, enter a short message in the Commit changes box click the Commit changes button, and wait for the upload to complete. Project Animation Google Fonts

Your web pages are now published on GitHub at web addresses similar to the following, where username is the username you have chosen for your GitHub account:

https://username.github.io/index.html
https://username.github.io/page-1.html
https://username.github.io/page-2.html
https://username.github.io/page-3.html
https://username.github.io/page-4.html

It may take a few minutes for your uploaded files to appear on GitHub.

Further resources

Basic web pages
From Interneting is Hard

HTML introduction – anatomy of a web page
By John Espirian at the John Espirian Blog

Video: HTML for Absolute Beginners
From Traversy Media


Return to Contents.