HTML Basics

Learning Goals

By the end of the lesson I will be able to:

Describe the process of requesting a web page using proper terminology
Create basic HTML pages using proper page setup and simple HTML tags.

Additional Resources

W3Schools
CSS Zen Garden (Just to look around. More about CSS later)

What is the Internet?

The world wide web (WWW) is more commonly known as the internet, or the web, but what IS it? Well the internet is a network of computers from all over the world connected through cables. Some of those computers are servers, others are clients. Below is a picture that shows some of the cables that connect the North America and Europe. These cables are buried in the Atlantic Ocean and are connected to huge servers on either end that make sure the data is complete before it moves on to its destination.

Over such long distances, data can become corrupt or disappear entirely, so there are many safeguards to ensure that ALL of the data gets to its destination as fast as possible.

Definitions

Server: A server is a computer (or computer program) that is responsible for processing incoming requests and delivering data to other computers called clients.

Client: A client is a computer (or computer program) that uses a service or requests information from a server.

In order to communicate properly, all computers must use a common language. This language is called HTTP, which stands for Hyper Text Transfer Protocol.

How Does it Work?

When you type a web address, such as http://www.google.ca into the address bar, your web browser (Chrome, Edge, Internet Explorer, etc.) creates an HTTP request for the web page at the address you entered. The web server located at the address you entered, finds the web page document you requested and sends it back.

Now that your web browser has the web page document, it begins to process the content into something it can display on your screen. The file contains instructions that determine the layout and additional content (like pictures, or movies) that will appear on the page. Most of the time, the language used to convey these instructions is HTML, which stands for Hypertext Markup Language.

HTML

HTML is composed of groups of elements, which have 3 parts:

Opening Tag - Tells the web browser what needs to be done to the following content
Content - The pieces of data that should be displayed
Closing Tag - Tells the web browser when to stop processing content.

For example, to create a paragraph in HTML we write

<p> This is a paragraph. </p>

In this element, the <p> is the opening tag, </p> is the closing tag and everything else ("This is a paragraph.") is the content. Only the sentence between the tags is treated as paragraph text. Note that we call <p> and </p> HTML Tags and that both are required to create an HTML element. It is also important to know that these tags are not case sensitive.

Who Came Up With All This Stuff?

Good question! An independent organization called the W3C (World Wide Web Consortium) is responsible for creating and changing all web standards. This includes HTML, CSS (Cascading Style Sheets, more on them later) and XML (eXtensible Markup Language)

Example

Below is some example HTML code. The resulting page is also displayed.

<html>

  <head>

    <title>Title of page</title>

  </head>

  <body>

    <p>This is my first homepage. <b>This text is bold</b></p>

  </body>

</html>

Explanation

First, it is important to note that EVERY open tag, has a close tag. That goes for the <html>, <head> and <body> tags as well. These 3 tags are special and require a little more explanation.

<html> ... </html>

The <html> and </html> tags are very important tags and should exist in EVERY HTML document as the first and last tags. While they do not directly affect the look and feel of a webpage, they are responsible for something more important: The <html> tag informs the web browser that the document being processed is an HTML file and should be treated as such. Without these tags, the browser may not know how to work with the document and the results are unpredictable.

<head> ... </head>

The <head> and </head> tags also do not directly affect the look and feel of a webpage. Instead the head element is the place where the look and feel is setup. The head element contains sub-elements, such as <title>, <script>, and <style>, just to name a few, that can have a profound affect on your webpage.

The title element, for example, determines what text appears in the tab at the top of your webpage. Notice that the tab in the picture says "Tile of page," which is the same as the content of the title element.

The style element is where the CSS will be located (more on CSS later). CSS is the single most powerful way you can control how your webpage appears.

<body> ... </body>

The body is where all visual elements, such as pictures, text, links, videos etc. should appear.

Failure to place tags properly when creating elements will often result in unexpected behaviour. To combat this problem follow this one simple rule:

Whenever you open a tag, immediately create the closing tag before adding the content.

Basic Tags

Below is a list of basic tags you will use often along with some explanation of what the tags do by default. These tags may be nested, which means that you can use one inside the other.

Paragraph: <p></p>

Denotes normal sized text.
Creates a new line before and after the content on the screen.

Bold: <b></b>

Emphasizes text by making it thicker than normal text.

Headings: <h#> </h#>

Emphasizes text by making it thicker than normal text.
Modifies the size of text depending on the # used
- Valid #'s are 1 (Largest) to 6 (Smallest)
Creates a new line before and after the content.
Creates extra spacing (called margins) before and after the content.

Review Work

Practice

Using your newfound knowledge of HTML you are to recreate the page displayed for your grade level. image. This recreation must be EXACT. Hint: You will need to do a little research to find a tags I haven't shown you to complete this work.

Feel free to copy the example HTML code above as a starting place.

Grade 11 - Headings.PNG

Grade 12 - FormattingTags.PNG

For both, there is an opportunity to earn a bonus mark (1 Knowledge) by demonstrating additional HTML knowledge above and beyond what we have covered so far.

Short Answer Questions

1. Explain the sequence of events that happen when you press enter after entering a web address into the address bar of your web browser.

2. If an HTML file contains only the instructions for the layout of a webpage, what has to happen if the page being displayed contains a separate image file in order for that image to be displayed in a webpage? Explain.

3. What are the 3 parts of an HTML element and why are they important?

4. What do you think would happen if...

a. the opening tag was missing in an HTML element?

b. the content was missing in an HTML element?

c. the closing tag was missing in an HTML element?

Report abuse