Contents  >

Marking Up with HTML

IBAT Next Course

Learning Goals

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

You can view a finished version of this exercise by clicking the image below.

GitHub image

Contents

Creating your first web page

Editing the <head> of your web page

Creating a web page with Sublime Text

Displaying your web page

Adding text to the <body> of your web page

Marking up the text in your web page

Hiding your web page from search engines

Updating the <head> of your web page

Validating your web page

Uploading your web page 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 Studio Code on your computer.
  2. Choose the File | New File command. GitHub image Visual Studio creates a new, empty file in a new tab within your Visual Studio window. It suggests the name of Untitled-1 for your new file. GitHub image Let’s give your new file a name and save it as an HTML file.
  3. Choose the File | Save As command. GitHub image
  4. In the dialog box now displayed, save your file in your websites folder with this name:  base-0.html   These are two ways you can save your file with this name:
    • In the File name box, enter the full file name of base-0.html. Because you have included the filename extension (.html), you can ignore the second box named Save as type. GitHub image
    • In the File name box, enter the only the first part of the file name, base-0. You will then need to select the correct filename extension of HTML from the dropdown list in the Save as type box. GitHub image When you do, you can see that the full file name of base-0.html is now displayed in the File name box. You can now click the Save button. GitHub image
    Notice how Visual Studio now displays the name of your file at the top of the screen. GitHub image
  5. Next, let’s add the basic <head> and <body> structure to your new HTML file. Visual Studio offers a shortcut for doing this.  Click in your empty file and press the exclamation mark ! key. Then, click on the first option from the pop-up menu – or press either the ENTER or TAB key. GitHub image Visual Studio now fills your new file with the basic HTML structure. GitHub image NOTE: The exclamation mark ! shortcut key is part of Emmet, a collection time-saving tools for web designer and developers that are included with Visual Studio. They can also be added to other text editors such as Sublime Text.
  6. 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.

Editing the <head> of your web page

Let’s edit the ‘standard’ text in the <head> that was created by Visual Studio.

The <head> of your HTML file should now look as shown below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  
  <title>Sample web page with default styling</title>

  <meta name="description" content="A sample web page without a linked stylesheet file.">  

  <meta name="author" content="Mary Smith">

  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-NNNNNNN-1"></script>  
  <script>  
       window.dataLayer = window.dataLayer || [];  
       function gtag(){dataLayer.push(arguments);}
       gtag('js', new Date());
       gtag('config', 'UA-NNNNNNN-1');
  </script>
</head>

Save your web page.

Creating a web page with Sublime Text

If you are using Sublime Text rather than Microsoft Visual Studio Code, follow these steps to create a new HTML file.

  1. Start Sublime Text on your computer.
  2. Choose the File | New File command. GitHub image Sublime Text creates a new, empty file in a new tab. It suggests the name of untitled for your new file. GitHub image Let’s give your new file a name and save it as an HTML file.
  3. Choose the File | Save As command. GitHub image
  4. In the dialog box now displayed, save your file in your websites folder with this name:  base-0.html
  5. In your new, empty HTML file, copy-and-paste all the text from the above HTML file created with Microsoft Visual Studio. Because Sublime Text uses a different default colour scheme, your pasted text will look as shown below. GitHub image
  6. As always when you copy-and-paste <head> text into an HTML file, ensure the following are correct:
    • The text inside the <title> tag.
    • The text inside the <meta name="description"> tag.
    • The text inside the <meta name="author"> tag.
    • The Tracking ID within the Google Analytics Tracking Code.
  7. Save your base-0.html file.

Displaying your web page

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

  1. Open your File Explorer (Windows 10) or Windows Explorer (Windows 7), and display the contents of your websites folder.
  2. 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. GitHub image
    • If you have set Mozilla Firefox Developer Edition as your default web browser, your screen shown look as below. GitHub image
  3. Double-click on the base-0.html file to open it in your default web browser. GitHub image Note the address of the file in the Address Bar for your web browser.
    • The first part of the address shows the name of the folder that contains the file (websites).
    • The second part of the address shows the name of the file (base-0.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 the <head> tag.   To view this, right-click anywhere on the web page and, from the pop-up menu, choose the View Page Source command. GitHub image Your web browser opens a new tab and displays the source code of your web page. GitHub image

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. Let’s begin by adding some space between the <head> and the <body> of the HTML file. This will make your file easier to read and edit.   Click just before the <body> tag and press the ENTER key once or twice. GitHub image
  2. Drag down and across all the text in the grey box below to select it.

    Heading 1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in ipsum at risus feugiat facilisis at et orci.

    Heading 2
    Donec ut leo eget risus mattis mattis non vitae massa. Suspendisse potenti. Aenean efficitur fermentum orci ac blandit. Quisque tempus tincidunt metus at interdum. Aenean elementum vehicula tellus id gravida. Aenean mollis sollicitudin elit.

    Morbi eu ipsum sed nunc porta posuere. Donec et mi accumsan, eleifend augue ac, pellentesque risus. Maecenas in egestas dolor, vitae consequat dui.

    Heading 3
    Ut quis rhoncus lorem. Duis mauris arcu, luctus et velit eu, luctus rutrum magna. Morbi volutpat bibendum libero sed pellentesque. Maecenas eu scelerisque mauris. Morbi eu ipsum sed nunc porta posuere. Donec et mi accumsan, eleifend augue ac, pellentesque risus.

    Heading 3
    Pellentesque non dignissim tellus. Suspendisse potenti. Ut convallis euismod quam non luctus. Etiam vel sapien at sem elementum tempor eget at dolor. Integer et fringilla dolor. Duis velit turpis, faucibus id lorem a, eleifend pellentesque nisi.

    Nunc rhoncus, massa in scelerisque lacinia, nulla justo porta eros, vel pulvinar mauris ligula vitae dui. Quisque massa nibh, venenatis sed tortor ut, tincidunt imperdiet sapien. Ut vehicula sit amet orci non sollicitudin.

  3. Right-click on the selected text and, from the pop-up menu, choose Copy. GitHub image
  4. In Visual Studio, click on the first blank line after the opening <body> tag. GitHub image Now, paste the copied text.
  5. Visual Studio adds a few blank lines after the opening <body> tag and before the pasted text. You can delete these lines. GitHub image
  6. Save your file and then display it in your web browser. As you can see, the web browser ignores any the line breaks in the file and displays all the content within the <body> as a single paragraph. GitHub image This is because the content is not marked up with HTML tags.

Marking up the text in your web page

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

  1. Wrap the Heading 1 text within <h1>...</h1> tags.
  2. Wrap the Heading 2 text within <h2>...</h2> tags.
  3. Wrap the three occurrences of the Heading 3 text with <h3>...</h3> tags.
  4. Wrap the remaining paragraphs of text with <p>...</p> tags.
  5. The body of your HTML file should now look as shown below. 
    <body>
  <h1>Heading 1</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in ipsum at risus feugiat facilisis at et orci.</p>  

  <h2>Heading 2</h2>
  <p>Donec ut leo eget risus mattis mattis non vitae massa. Suspendisse potenti. Aenean efficitur fermentum orci ac blandit. Quisque tempus tincidunt metus at interdum. Aenean elementum vehicula tellus id gravida. Aenean mollis sollicitudin elit.</p>  

  <p>Morbi eu ipsum sed nunc porta posuere. Donec et mi accumsan, eleifend augue ac, pellentesque risus. Maecenas in egestas dolor, vitae consequat dui.</p>  

  <h3>Heading 3</h3>
  <p>Ut quis rhoncus lorem. Duis mauris arcu, luctus et velit eu, luctus rutrum magna. Morbi volutpat bibendum libero sed pellentesque. Maecenas eu scelerisque mauris. Morbi eu ipsum sed nunc porta posuere. Donec et mi accumsan, eleifend augue ac, pellentesque risus.</p>  

  <h3>Heading 3</h3>
  <p>Pellentesque non dignissim tellus. Suspendisse potenti. Ut convallis euismod quam non luctus. Etiam vel sapien at sem elementum tempor eget at dolor. Integer et fringilla dolor. Duis velit turpis, faucibus id lorem a, eleifend pellentesque nisi.</p>  

  <p>Nunc rhoncus, massa in scelerisque lacinia, nulla justo porta eros, vel pulvinar mauris ligula vitae dui. Quisque massa nibh, venenatis sed tortor ut, tincidunt imperdiet sapien. Ut vehicula sit amet orci non sollicitudin.</p>  

</body>
  6. Save your web page and display it in your web browser. It should now look as shown below. GitHub image

Hiding your 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. Scroll to the <head> of your web page.
  2. 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. GitHub image
  3. When finished, save your web page.

Updating the <head> of your web page

Before you validate your web page and upload it to GitHub, ensure the following details are correct within the <head> of your base-0.html file.

GitHub image

Validating your web page

To check the HTML in your web page is correct or valid, use the official W3C Markup Validation Service as follows.

  1. Go to this web page: https://validator.w3.org.
  2. Click the Validate by Direct Input tab. Powerpoint Project
  3. Select your entire HTML file (both <head> and <body>), and copy-and-paste it into the box named Enter the Markup to validate. Powerpoint Project
  4. Click the Check button.
  5. If you see any errors, return to your base-0.html file in your text editor, fix the errors, save the file, and copy-and-paste the entire file again.  In the HTML Validator, click the Back button of your web browser to again display the Validate by Direct Input tab. Click once in the tab and paste in your corrected HTML file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.

Uploading your web page to GitHub

After validating your web page, you are now ready to upload it to your account on GitHub.

  1. Sign in to your account at GitHub.com. At the left of the screen, you can see a list of your repositories. Upload to GitHub
  2. On your GitHub home page, click the name of the repository that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub.   username.github.io   GitHub Upload
  3. On the next screen displayed, near the centre of the screen, click the Upload files button. Project Animation Google Fonts
  4. Select or drag-and-drop the base-0.html file to upload it to your GitHub account. Project Animation Google Fonts
  5. After uploading the file, scroll down to the bottom of the screen, enter a short message in the Commit changes box and click the Commit changes button.

Your web page is now published on GitHub at a web address similar to the following, where username is the username you have chosen for your GitHub account:

https://username.github.io/base-0.html

It may take a few minutes for your uploaded file 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

Tutorial: HTML for absolute beginners
By Luke Fabish at the Luke Fabish Blog


Return to Contents.