Lab 1 - Intro to HTML

What is HTML?

Websites are documents written to be accessed over the internet and rendered by the browser. Hypertext Markup Language (HTML) is the language we use to instruct the browser what elements to display and its structure. In this code lab we shall learn about the fundamentals of HTML.

What you'll learn

Tags & Elements
Attributes/Properties
Section Elements
Meta Elements
Grouping Elements
Typography Elements
Interactive Elements

What you'll need

A github account.

Task 1

Open the lab 1 project in codesandbox.io by clicking the button below.

Open Lab 1

Fork the project to make it your own.

then sign with github to be able to save changes.

Every HTML document is composed of tags. Tags are the written representation of HTML elements that make up a page. Tags are written using the angle brackets and a tag name as specified by the HTML 5 standard.

Task 2

Create an HTML document by giving a text file the extension ‘.html'. Type the following into the file. Then view the file in the browser.

index.html

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p>This my first website</p><br>
        <p>Welcome</p>
    </body>
</html>

The Output Should look like:

Here we have our first few tags.

DOCTYPE: informs the browser of the type of the document, in this case, it is HTML 5
HTML: root tag of HTML document
head: Head of document
body: Body of document
p: Paragraph
br: Breakline

Note the structure of a tag; the tag name is in lowercase and is surrounded by angle brackets. Most tags come in pairs, the first of the pair is referred to as the opening/start tag while the second tag (note the forward slash) is called the closing/end tag. However, some tags do not have a closing tab such as br (breakline).

Tags that come in pairs allow us to place a tag within another, this is also called nesting. Therefore within the body tag, there exists 2 paragraph tags and a break line tag. These tags are said to be children of the body tag. Likewise, the body tag is said to be the parent of the aforementioned children.

Heading elements are text elements used to make text headings and denote the information hierarchy and structure of a text document.

Heading indicates the start of a new section, introducing another heading level indicates a sub section and a sub sub section and so on.

In addition to the tag name, attributes can be written in the opening tag of an element. Attributes are key-value pairs that provide additional information about the element. Attributes fall into 3 categories

Global Attributes

These are optional attributes that can be added to all tags and vary in function below are some examples.

Attribute	Description	Example
hidden	Hide the element from the document	<p hidden="true"> ... </p>
title	Adds a tooltip when a pointer hovers over the element	<p title="my paragraph"> ... </p>
style	Allows inline styling	<p style="color: red"> ... </p>
id	Attaches a unique identifier to the element	<p id="para-1"> ... </p>
class	Attach an identifier to group multiple elements	<p class="header-paras"> ... </p>

Required Attributes

Some elements have attributes which must be specified and given a value. The following are some examples

Tag	Required Attribute	Example
Image - img	src: Specified the source location of the image	<img src="image.png"></img>
input	type: specifies the type of input element	<input type="text">
Hyperlink - a	href: hyperlink reference url	<a href="https://g.co"></a>

Event Attributes

These are optional attributes that allow us to define some behaviour in response to an event which occurs on an html element. These attributes usually begin with "on"

Attribute	Description	Example
onload	Fires after element has finished loading	<body onload=".."></body>
onclick	Fires after an element is clicked	<button onclick="..."></button>

Task 3

Update index.html as follows. We add the language attribute "lang" to the html element and give the value "en". This instructs the browser that the document is written in english. There would be no visible difference to the page however.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
       <title>My First Page</title>
    </head>
    <body>
        <h1>This is my first website</h1>
        <p>Welcome</p>
    </body>
<html>

These are all elements which should be children of the head. We will look at the following three though they are not all.

Meta-data

These are a class of elements which allows us to add information which help describe the web page itself as well as link other files to it. Meta-data elements must be children of the head element. Meta-data elements are written with the meta tag and must provide the attributes; name and content. Here is a list of possible meta tags you can add to a website which would be used by different browsers or services.

Title

The title element sets the title of the website and would be shown in the tab of the website in the browser.

Link

The link tag is used to link external files to the website such as css files, web manifests or preloading javascript files.

Task 4

Update index.html as follows

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta name="description" content="My first website">
      <meta name="keywords" content="INFO1601, uwi, web">
      <title>My First Page</title>
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>This is my first website</h2><br>
        <p>Welcome</p>
    </body>
<html>

In this snippet we've added meta tags that provide a description of the webpage and some keywords. We also add a very important tags named viewport which makes the site readable on mobile devices. It is good practice to always have these tags on any website you build. We also added a title and linked style.css to the page. Now observe the result.

The title can be viewed in the tag and linking sytles.css has caused the presentation of the page to change.

The web was originally created to publish documents online, as such there are many text based elements available. These elements not only change the presentation of text but adds semantic context to the text for the browser.

Task 5

Update index.html with the following elements

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta name="description" content="My first website">
      <meta name="keywords" content="INFO1601, uwi, web">
      <title>My First Page</title>
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>This is my first website</h1><br>
        <p>Welcome</p>
        <b>bold</b> <br>
        <strong>Strong text</strong><br>
        <code>code</code><br>
        <samp>Sample output from a computer program</samp><br>
        <kbd>Keyboard input</kbd><br>
        <mark>highlighted text</mark> <br>
        <em>Emphasized text</em><br>
        <var>variable</var> <br>
        <cite>citation</cite> <br>
        <dfn>definition</dfn> <br>
        <u>underlined</u> <br>
        <s>strikethrough</s><br>
        Text<sub>subscript</sub><br>
        Text<sup>superscript</sup><br>
    </body>
<html>

We tried out various typography elements and changed our first paragraph to a heading using the heading element h1. There are 6 heading elements h1- h6 of varying sizes. The hgroup element can be used to group multiple heading elements.

These elements determine the high level layout of the document. Body and Head are section elements in addition to:

Header
Nav
Article
Aside
Section
Footer

These elements are also said to be semantic. These elements by themselves would have no visual effect on the document. However, they help the developer and broswer better understand the layout of the site by recognising these tags as the building blocks of the webpage.

Task 6

Update the site with the semantic elements.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="description" content="My first website">
        <meta name="keywords" content="INFO1601, uwi, web">
        <title>My First Page</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <h1>This is my first website</h1>
        </header>

        <article>
            <section>
                <p>Welcome</p>
            </section>

            <section>
                <b>bold</b> <br>
                <strong>Strong text</strong><br>
                <mark>highlighted text</mark> <br>
                <u>underlined</u> <br>
                <s>strikethrough</s>
                Text<sub>subscript</sub><br>
                Text<sup>superscript</sup><br>
        
            </section>

            <section>
                <code>code</code><br>
                <samp>Sample output from a computer program</samp><br>
                <kbd>Keyboard input</kbd>
            </section>

            <section>
                <em>Emphasized text</em><br>
                <var>variable x</var><br>
                <cite>citation</cite><br>
                <dfn>definition</dfn>
            </section>
        </article>
           
    </body>

Here we rearranged the typography into separate sections. Although the snippet is longer it is easier to read due to proper indentation and use of the semantic elements. Note that the last element in each section does not need a breakline as sections automatically start on a newline.

These elements are for making separators, grouping children elements, lists and figures.

Thematic Breaks <hr>

The hr tag is used to separate content as it renders a line break across the page.

Preformatting <pre>

The pre tag would preserve any whitespaces made in the contents of the tag.

Blockquote <blockquote>

Used to quote content from another site.

Figure <figure>

The figure tag is used to embed an image on a page with a caption. Images can exist on a page for different reasons therefore the semantic element figure tells the browser to treat the image as such.

Task 7

We can add an image of a cat to our page by adding the following image and figure tags.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="description" content="My first website">
        <meta name="keywords" content="INFO1601, uwi, web">
        <title>My First Page</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <h1>This is my first website</h1>
        </header>

        <article>
            <section>
                <h2>Welcome</h2>
            </section>

           <section>
                <figure>
                    <img src="https://lorempixel.com/200/200/cats" alt="a random cat">
                    <figcaption>Fig 1. A random cat</figcaption>
                </figure>
           </section>
        </article>
           
    </body>
<html>

Main <main>

Main is another semantic element with the purpose of being the parent element of the main content of the page.

Lists

Ordered Lists <ol>

A list of items whereby their order has some meaning.

Unordered Lists <ul>

A list of items which order bears no meaning.

Description Lists <dl>

Used to create a list of terms and descriptions

List Item <li>

The li element denotes an item within an ordered or unordered list.

Description Term <dt>

A term in the definition list

Description Definition <dd>

The definition of a term in a definition list

Divider <div>

A generic block level grouping tag used to style content where no other grouping or section tag is applicable.

Span <span>

A generic inline level grouping tag used to style content within a single line.

Task 8

Let's change the site to list your hobbies on the site.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="description" content="My first website">
        <meta name="keywords" content="INFO1601, uwi, web">
        <title>My First Page</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <h1>This is my first website</h1>
        </header>

        <article>
            <section>
                <h2>Welcome</h2>
            </section>

           <section>
                <figure>
                    <img src="https://lorempixel.com/200/200/cats" alt="a random cat">
                    <figcaption>Fig 1. A random cat</figcaption>
                </figure>
           </section>

           <section>
                <h3>Hobbies</h3>
                <ul>
                    <li>Swimming</li>
                    <li>Coding</li>
                    <li>Music</li>
                    <li>Memeing</li>
                </ul>
            </section>

        </article>
           
    </body>
<html>

You should now see your hobbies listed

These elements can provide an enhanced experience on the web by responding to user input.

Details <details>

Creates a collapsible ui element which can be expanded to show details for a given summary.

Summary <summary>

Creates the visible heading of the details content.

Dialog <dialog>

Dialogs provide customizable dialogs box, modal or window.

Task 9

We can put our hobbies in a details tag so they can be expanded and collapsed.

We also add a dialog to our site. (Ignore the values of the onclick attributes for now)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="description" content="My first website">
        <meta name="keywords" content="INFO1601, uwi, web">
        <title>My First Page</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <h1>This is my first website</h1>
        </header>

        <article>
            <section>
                <h2>Welcome</h2>
            </section>

           <section>
                <figure>
                    <img src="https://placekitten.com/200/200" alt="a random cat">
                    <figcaption>Fig 1. A random cat</figcaption>
                </figure>
           </section>

           <section>
               <details>
                   <summary>Hobbies</summary>
                   <ul>
                    <li>Swimming</li>
                    <li>Coding</li>
                    <li>Music</li>
                    <li>Memeing</li>
                </ul>
               </details>
            </section>

            <dialog id="mydialog">
                This is a dialog
                <a href="javascript:mydialog.removeAttribute('open')">close</a>
            </dialog>

            <a href="javascript:document.querySelector('#mydialog').setAttribute('open', true)">
                Open Dialog
            </a>

        </article>
           
    </body>
<html>

If "Open Dialog" is clicked the dialog opens!

That's all for this lab. Congratulations on seeing it through. You have just been exposed to the fundamental building blocks of your everyday website.

References

Element Content Categories

WHATWG HTML 5 Spec

W3schools HTML 5