ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Computers & Software»
  • Computer Science & Programming

Learning and Using HTML

Updated on July 25, 2017

What is HTML?

Hyper Text Markup Language (HTML), in short, HTML is the language used to create webpages. The language is currently maintained by the World Wide Web Consortium (W3C).

HTML tags are added to a web page. The tags are read in order, and they tell a web browser how to render page elements, such as text, images, and videos, etc.

Text Editor

If you are new to creating and editing web pages, you will need some kind of text editor to work with the HTML language.

Your computer, no matter if it's a Windows or a Mac, comes with a text editing application. For Mac users the text editing application is TextEdit, and for Windows users the application is Notepad. However, there are many, many free or commercial text editors available for download on the internet.

You may be asking, why would I want to use a different text editor if my computer already has one?

The text editors available online contain features, such as syntax highlighting, IntelliSense, integration of other languages, etc.; features that improve development productivity.

For the purpose of this series, we are going to use one text editor / integrated development environment (IDE) that I have grown quite fond of over the past few months.

This text editor is called Atom a free and opensource IDE created by the folks at GitHub. At this point, if you do not already have Atom, go ahead and download Atom now. You can download the Atom IDE at https://atom.io

If you would like to become more familiar with Atom and its capabilities (recommended, because this goes beyond the scope of this lesson) you can head over to the Atom documentation (https://atom.io/docs) section before moving forward with this lesson to familiarize yourself with the Atom IDE and read about the available features.

Atom Text Editor

Atom.io
Atom.io | Source

Learning HTML

I am going to teach you the basics during this lesson, but there are many online resources available to learn HTML.

A particular resource that I use for referencing is the Mozilla Developer Network (MDN). There are not only reference documentation for HTML and HTML5 but also CSS, CSS3, Javascript, and more. So, if you are stuck, or you are not sure about a certain tag or attribute head over to the Mozilla Developer Network and simply search for it.


Using HTML

I think for our overall practice website project, we will work towards building a simple three-page site that displays a person's homemade projects, where a visitor of the site can see the displayed handmade items, choose to purchase a displayed item, read about the site, and contact the product maker.

Alright, let's get started.

Create a new project folder within Documents in File Explorer if you are a Windows user or within the Finder, if you are a Mac users. So, under Documents create a project folder named ExampleWebSeriesSite.

Now open Atom, and add the newly created project folder to the sidebar. You can add the folder by clicking on File, Open Folder, and select the ExampleWebSeriesSite folder within the file browser or Finder. The ExampleWebSeriesSite folder should now appear in the sidebar.

Quick Tip - You can also add the complete project folder by opening the ExampleWebSiriesSite folder, right-clicking on any file, choose to open the file with Atom, and the file will open with Atom and also add the entire project folder to the sidebar in Atom.

Now that we have a working project folder let's go ahead and add an index page to our site.

In the sidebar right-click the ExampleWebSeriesSite project folder, select New File, and name the new file index.html, press Enter.

If the file added correctly a new tab should appear with a blank index.html file to the right, and the index.html file should be included under the ExampleWebSeriesSite project folder in the sidebar.

To finish out the first lesson of this series, let's create the foundation of our project by adding some HTML to the index.html file we just created.

Let's start by adding the required HTML that should belong in every HTML page you create:


HTML

Source

Basic HTML Page Template

<!DOCTYPE html>
<html lang='en'>
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- do not remove the three meta tags above this line -->
    <meta name="description" content="Free Web tutorial by James Wassinger">

    <title> Site Template </title>

</head>

<body>

</body>
</html> 

Explanation of Basic HTML Template

Note: for convenience, you can grab the above template at any time by visiting this series' homepage.

Before going further let's take a closer look at the markup being use in the template.

The `<!DOCTYPE>` must be include in every HTML file before the `<html>` tag. The `<!DOCTYPE>` declaration tells the browser what version of HTML the page is written in.

Note: for more information on the different Doctypes used, visit the W3C's Recommended list of Doctypes.

The `<html> </html>` tag begins and ends the HTML page.

The `<head> </head>` tag contains the metadata, the `<title> </title>` tag, and links to external style sheets.

Note: the text that's written in between the `<title> </title>` tag appears on the browser tab.

The `<title></title>` tag is a required tag and it defines the title of the HTML document.

The `<body> </body>` tag contains everything visible on the web page.

Now it's time to add some content to our main page.

Remember we are starting the foundation of our sample project site. The point of this first lesson is to introduce you to HTML. We are only going to use HTML, no styling yet.

History of HTML

Complete HTML for Sample Project

<!DOCTYPE html>
<html lang='en'>
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Add short summary about website -->
    <meta name="description" content="Sam's Homemade Products, providing high quality  and unique homemade goods here.">

    <title>Sam's Homemade Products</title>

</head>

<body>
  <!-- Site navigation -->
  <nav>
    <p><a href="about.html" title="About Sam">About Sam</a> | <a href="contact.html" title="Contact Sam">Contact Sam</a></p>
  </nav> <!--/. end site navigation -->


    <!-- site title -->
    <div>
     <h1>Sam's Homemade Products</h1>
   </div> <!--/. end site title -->

    <hr />

    <div>
    <!-- homepage description -->
    <div>
      <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper nibh ac orci lacinia lobortis. Ut hendrerit, nisi vel gravida accumsan, mauris metus lacinia risus, vel elementum eros dui nec magna. Donec augue odio, aliquet vel ante nec, laoreet feugiat sem. Suspendisse consectetur scelerisque odio, vitae laoreet velit. Donec venenatis sollicitudin arcu. Morbi malesuada et ligula nec interdum. Nam ac nisi non arcu egestas pretium quis sed arcu. Integer mauris turpis, vehicula a maximus quis, tincidunt non turpis. Nunc non dui id nibh ultricies laoreet vitae a arcu. Aliquam eleifend mauris vitae consequat tempor. Mauris bibendum ultricies augue sit amet elementum. Nunc nec rhoncus odio.
      </p>
    </div><!--/. end description -->

    <!-- Product list -->
      <div>
        <div>
          <h4>Product Title</h4>
          <p><img src="http://placehold.it/350x150"></p>
          <p>Product description</p>
          <button>Buy Now &raquo;</button>
        </div>

        <div>
          <h4>Product Title</h4>
          <p><img src="http://placehold.it/350x150"></p>
          <p>Product description</p>
          <button>Buy Now &raquo;</button>
        </div>

        <div>
          <h4>Product Title</h4>
          <p><img src="http://placehold.it/350x150"></p>
          <p>Product description</p>
          <button>Buy Now &raquo;</button>
        </div>
      </div>

      <!-- set 2 -->
      <div>
        <div>
          <h4>Product Title</h4>
          <p><img src="http://placehold.it/350x150"></p>
          <p>Product description</p>
          <button>Buy Now &raquo;</button>
        </div>

        <div>
          <h4>Product Title</h4>
          <p><img src="http://placehold.it/350x150"></p>
          <p>Product description</p>
          <button>Buy Now &raquo;</button>
        </div>

        <div>
          <h4>Product Title</h4>
          <p><img src="http://placehold.it/350x150"></p>
          <p>Product description</p>
          <button>Buy Now &raquo;</button>
        </div>
      </div><!--/. end set 2-->

      <!-- set 3 -->
      <div>
        <div>
          <h4>Product Title</h4>
          <p><img src="http://placehold.it/350x150"></p>
          <p>Product description</p>
          <button>Buy Now &raquo;</button>
        </div>

        <div>
          <h4>Product Title</h4>
          <p><img src="http://placehold.it/350x150"></p>
          <p>Product description</p>
          <button>Buy Now &raquo;</button>
        </div>

        <div>
          <h4>Product Title</h4>
          <p><img src="http://placehold.it/350x150"></p>
          <p>Product description</p>
          <button>Buy Now &raquo;</button>
        </div>
      </div><!--/. end set 3-->

  </div> <!--/. end container -->

<!--footer-->
  <div>
    <p>Sam's Homemade Products &copy; 2016</p>
  </div><!--/. end footer -->
</body>
</html>

Use W3C to Validate Your HTML

Source

Let's Review the Page We Just Created

We know from the previous explanation from above that everything within the `<body></body>` tag is visible to the visitor of the page.

What are some of the tags we just added onto our index.html file?

  • `<div></div>` tags - these tags are considered as section tags, which help section out markup by placing markup in blocks, which contributes to readability.
  • `<p></p>` tags - or paragraph tags.
  • `<button></button>` tags - the button tag places a clickable buttons on a page.
  • `<h1></h1> through <h4></h4>` tags - these are heading tags. The lower the number the larger the font, and the higher the number the smaller the font.
  • `<img/>` tags - These add images to a website. You can add images by using the image tag, or through CSS, which we will discuss in another post.

Additional HTML Tags

Some additional tags to include are:

HTML comments, you can create an HTML comment by simply doing the following `<!-- example comment -->`

Quick Tip, comments are your friend. It's highly recommended to comment your pages so 1. if you haven't reviewed your HTML file in awhile you can easily know what you were trying to accomplish, and 2. if another designer needs to maintain your markup he or she will know because you commented your source well.

The anchor tag `<a></a>`. This tag allows you to link to internal website pages, as well as external websites or website pages.

Quick Tip, if you are linking to an internal page DO NOT use the entire path to the page.

Anchor tags are used and written as `<a href="contact.html" title="Contact Me">Contact Me</a>`

Creating a form

Some common form tags are `<form></form>`, `<input>`, `<button></button>` and `<textarea></textarea>`.

You will need to know the above additional tags for the end exercise(s).

Let's create a quick sample contact form, so you are familiar with creating a form.

To start we will need to add the `<form></form>` tags, much like the `<html></html>` tags the form tags begin and end the form.

Now we'll add some input fields to receive user information. We will add the following input fields to get the user's name, a subject for the message, the user's email address and an area for the user to enter a brief message.


Sample of Simple HTML Contact Form

<form action="" method="POST">
        <p>Name:</p>
        <input type="text"><br />
        <p>Email:</p>
        <input type="email"><br />
        <p>Subject:</p>
        <input type="text"><br />
        <p>Message:</p>
        <textarea row="10" col="20"></textarea><br />
	<button type="button">Submit</button>
        <!--<input type="submit" value="Submit" />-->
   </form>

A Note on Readability

Why is the HTML in your example files indented?

Indenting HTML within your HTML files is important. Indenting is highly recommended to contribute to readability.

I know for basic HTML files it seems silly to indent, but once you start adding additional HTML to your files and they become larger indenting becomes necessary and allows you and others to easily read the HTML file.

Recap

Well, this article went over quite a bit of information. We started a sample project, learned a bit about HTML, created a sample index.html file to get our project started and even learned how to create the front-end of a simple contact form.

Note, front-end is what the visitor can see on a web page. The Back-end is the behind the scenes processes that the visitor cannot see.

Practice

Now for some practice.

For practice, create two additional HTML files within our ExampleWebSeriesSite project folder. One file named about.html and the other contact.html.

Within the about.html file create a simple navigation menu linking to the other pages, a heading for the page, a few paragraphs (can be placeholder text), and include a footer.

Within the contact.html file create a simple navigation linking to the other pages, a heading for the page, a contact form, and include a footer.

If you need help or get stuck you can view the sample files under the html_lesson file folder in the project homepage.

After you complete this lesson's exercise, and when you feel ready please proceed to the next lesson Learning and Using CSS

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.