Home » Web Development » HTML » Introduction to HTML

Introduction to HTML

Table of Contents

Required material

In order to complete this tutorial you will need to download the following from below:

The zip file includes:

  • Fish3.ogv
  • Canadian_Flag.jpg

After you download:

  • Extract the files to the desktop

What is HTML?

You interacted with HTML on a daily basis if you surf the web at all. HTML is essentially the language that web pages are written in. It stands for “hypertext mark-up language" But really what does that mean to you?

Well here is an explanation:

Description Example
Hyper Gives itself the power to not follow and specific order. You can go anywhere on the web page when you feel like it.
Text Text Is exactly what you are reading on the screen at this moment. This, that, anything you can read.
Markup This is what changes its default appearance. Bolding some text “This" to “That"
Language What it is written in so the browser can understand the web page. It is comprised of many tags (<b>, <table>, etc.) that have specific jobs.

Abbreviations to understand before starting this walkthrough

Tag(s):
When you write html, you are writing HTML tags.
They are made up of: “<", “a word or character", “an optional space", “an attribute", “>"
Example: <p>

Attribute(s):
An attribute can go into tags to provide additional information.
Example: <a href="http://mcmas ter.ca">Link to McMaster</a>

What will I learn after this?

  • How to create an HTML document and layout a template
  • How to create a style sheet
  • Viewing your HTML document
  • Changing text color
  • Changing Background color
  • Adding a image
  • Adding a link
  • Adding a table
  • Adding a video

How to create an HTML document and layout a template

Open Notepad++ by clicking the Start, and typing notepad++ in the search bar. Click the Notepad++ that pops up.
draalin-html-1
Figure 1 – Opening Notepad++

This is the default layout of Notepad++ once you open it.
draalin-html-2
Figure 2 – Default Notepad++ layout

Type in the following text that you see in Figure 3. (Note: To get the proper programming structure with intends you must press TAB on your new lines so that they are spaced properly like in Figure 3.)
The information you have typed in will be explained in Figure 5. Now click the save draalin-html-save icon.
draalin-html-3
Figure 3 – Laying out your first HTML document

We will now save your first web page by:

  • Selecting a destination in this case your Desktop
  • Typing in the file name “index.html" in the File name box.
  • Clicking the Save button

draalin-html-4
Figure 4 – Selecting and saving a name for your new HTML document

After saving your index.html you will notice that your layout looks somewhat different from Figure 3 Well what has happened is that after saving your web page with the .html extension Notepad++ has noticed that it is no longer a .txt extension and that it will now read as a web page!

This is what you have added so far:
<!doctype html></html>

  • This is what tells the web browser like Firefox that it is an HTML document. It is also the container and root of an HTML document.

<head></head>

  • An area of the document that you can add the title, scripts, styles, meta information and more.

<title></title>

  • This defines the title of the document which can be seen in search engines, when a page is added to favorites or displayed in the toolbar of the web browser.

<link rel="stylesheet" type="text/css" href="styles.css">

  • This is a link to your style sheet, which will hold information about how elements render on your HTML document.

<body></body>

  • Contains all tags of the content of the HTML document, images, links, tables, etc.

<p></p>

  • This is an example of a tag which would be seen in the body of the HTML document.
  • It defines a paragraph.

draalin-html-5
Figure 5 – Completed HTML layout

How to create a style sheet

First of all a style sheet is a document with a “.css" (cascading style sheet) extension that holds attributes for your HTML document. It defines how your web browser should render elements.
We will now create a style sheet:

  • Click New

draalin-html-6
Figure 6 – Creating a new style sheet

  • Type in /* my style sheet */
  • Click the save button

draalin-html-7
Figure 7 – Saving your style sheet

We will now save your style sheet by:

  • Selecting a destination in this case your Desktop
  • Typing in the file name “styles.css" in the File name box.
  • Clicking the Save button

draalin-html-8
Figure 8 – Selecting a name and location for your style sheet

That’s it! You now have created your style sheet. You can move both your index.html and styles.css by clicking the tab of their name.
draalin-html-9
Figure 9 – Newly created style sheet

Viewing your HTML document

Open Firefox by clicking the Start, and typing Firefox in the search bar. Click the Firefox icon that pops up.
draalin-html-10
Figure 10 – Opening Firefox

Let’s now open up your index.html in Firefox to see what it actually looks like!

  • Click File in the top left corner
  • Click Open File

draalin-html-11
Figure 11 – Opening your index.html document

Browse to where you saved your document earlier in Figure 4 once you have selected it click Open
draalin-html-12
Figure 12 – Browse and open your index.html document

This is what your website looks like so far!
You can see that your title is being displayed both on the top and tab of the browser.
Your paragraph is also being displayed in the body of the document.
draalin-html-13
Figure 13 – Viewing your index.html document

Now let’s take this a step further and add other tags to our document.

  • Switch over to your Notepad++ with the index.html open

Changing text color

We will begin by changing the color of our paragraph that we added earlier. Open up your styles.css by clicking the tab in Notepad++ labeled “styles.css".

  • Type in the following lines 3-5:

draalin-html-14
Figure 14 – Changing text color

What we have done here is added the color red to everything with a p (paragraph) tag.
Let’s take a look at what we have changed but first we must:

  • Save the page hold “CTRL+S".
  • Open up Firefox and press “F5" on your keyboard to refresh to see your changes.

draalin-html-15
Figure 15 – Red colored paragraph

Changing background color

We will now change the background color of your document! Open again open up your Notepad++ styles.css document.

  • Type in the following lines 3-5:

draalin-html-16
Figure 16 – Changing background color through css

  • To save the page hold “CTRL+S".
  • Open up Firefox and press “F5" on your keyboard to refresh to see your changes.

draalin-html-17
Figure 17 – Changing background colour to dark gray

Adding an image

We will now add an image to your document! Open open up your Notepad++ index.html document.

  • Type in the following line 8:

draalin-html-18
Figure 18 – Adding an image

  • To save the page hold “CTRL+S".
  • Open up Firefox and press “F5" on your keyboard to refresh to see your changes.

draalin-html-19
Figure 19 – Image of Canadian Flag

Adding a link

Now we will add a link to our document, a link is way to get to another page.
Open again open up your Notepad++ index.html document.

  • Type in the following line 10:

draalin-html-20
Figure 20 – Adding anchor text

  • To save the page hold “CTRL+S".
  • Open up Firefox and press “F5" on your keyboard to refresh to see your changes.

draalin-html-21
Figure 21 – Anchor text

Adding a table

Open again open up your Notepad++ index.html document.
Now we will add a table, a table is divided into rows and data cells.

  • Type in the following lines 11-24:

draalin-html-22
Figure 22 – Adding a table

Explanation of what you see in the table:

  • <table border="1"></table> defines the table itself.
  • <tr> is for table row
  • <th> is for table head
  • <td> is for table data
  • To save the page hold “CTRL+S".
  • Open up Firefox and press “F5" on your keyboard to refresh to see your changes.

draalin-html-23
Figure 23 – Table

Adding a video

Now we will add a video to our document.
Open again open up your Notepad++ index.html document.

  • Type in the following lines 25-27:

draalin-html-24
Figure 24 – Adding a video

Explanation of what you see in the table:
<video width="320″ height="240″ controls></video> defines the area of where the video w ill be played and its width/height.
<source src="fish3.ogv" type="video/ogg"> defines where the source of the video is coming from, which is your desktop.

  • To save the page hold “CTRL+S".
  • Open up Firefox and press “F5" on your keyboard to refresh to see your changes.

draalin-html-25
Figure 25 – Display of the video

About Tyler Bailey

Tyler Bailey is a university student who owns and runs draalin.com. Follow me on
  • Dan

    Caught this on Tech Republic. Looks like a clear and well presented intro to html. Thank you very much. 🙂

    • Glad you enjoy it! If you need any help with anything specific just ask here or on our forums!

  • ram

    Thank your Somuch…Im very Glad To See Your Tutorial..
    im frm india
    im a medical student..but much intrested in these languages
    Here Its Not Full Tutorial..Jus 1%
    But But..It Is Very Very Useflll..Must Need it For EveryBeginer…
    i Jus Know Html ..I learnt Basics Longback Forgot…But I don Knw Css…
    But You Made It So Simple…CREATED hopeS to learnd HTML n Css Again..
    I nver Ther Css Is this much Understandble…

    I hope I vl To To Learn ALL HTML N CSS Required For Simple Webdesinging…
    Thank You Somuch

    N ithink This Is new Site..
    I hope Within 3 months YOU Will Get Gud Amount F visitors..
    thank you again

    • No problem, I am happy it is helping you out!