Lab 19 - HTML & Web Fundamentals

Due by 11:59pm on April 1, 2025

Starter Files

Download lab19.zip. Inside the archive, you will find starter files for the questions in this lab.

Topics

This lab will help you get familiar with HTML and how it works. In Project 4, you’ll need to parse through HTML on webpages, so take the time now to get familiar with how HTML is structured and organized.

Basic Structure of HTML

HTML stands for Hyper Text Markup Language.

HTML is used for creating the structure of a web page. CSS is used to style a web page, while Javascript is used to add functionality. In this class, we will focus on HTML, but to learn more about CSS, Javascript (JS), and frameworks such as Django, consider taking CS260 (Web Programming).

One of the simplest web pages using HTML is the following:

<!DOCTYPE html>
<html>
    <head>
        <title>Title for web page tab</title>
    </head>
    <body>
        <p>Hello world</p>
    </body>
</html>

The <!DOCTYPE html> declaration states that this document is an HTML5 document, differentiating it from older versions of HTML (such as HTML4).

The <html> and </html> tags contain all the HTML code for defining the structure of a webpage. We’ll talk about what tags are in more detail in the next section. Within (between) those tags can go more tags that further define the page’s structure such as:

<head> - Used to contain special information about the web page such as its decoding, title, links to CSS and JS, etc.
<body> - Used to contain the main content of the web page.
<header> - Used to contain the navigation, logos, or other introductory material.
<main> - Used to contain the main content of the web page.
<footer> - Used to contain additional information like contact info, authorship information, etc.

Truthfully, a developer could put all the content directly in the <body> tag, but it would lead to poor organization as the web page got larger. In this class and for simplicity’s sake (and as we’re getting used to working with HTML), we will only use <head> and <body> tags.

Other tags included in the example above are the <title> and <p> tags which are used to put content into the webpage rather than organizing it.

<title> - Used to tell the web browser what text should go in the little tab for web pages at the top of the browser.
<p> - Used to denote a text with a newline at the end.

Tags

Most tags start with an open tag and end with a closing tag with the content to be displayed between the two tags. For example, these are paragraph tags: <p> and </p>. Notice that the closing tag is the same as the opening tag but the closing tag has a slash /. The opening tag can contain additional information for formatting or identification. These additional pieces of information are called attributes. For example,

<p id="intro"> Welcome to my web page!</p>

Here, id="intro" is an attribute. You can think of id as a variable name for that specific paragraph tag.

The following tags will be used to put actual content on the web page rather than organizing it. We will discuss the paragraph tag, anchor tag, image tag, table tag, and unordered list tag, as well as how to make comments in HTML.

1. Paragraph Tag

The paragraph tag is used to display text in your web page.

<p>Paragraph's words</p>

All text would appear in one line if you do not use the paragraph tag (or the div tag, but that’s beyond the scope of this class).

2. Anchor Tag

Use the anchor tag to insert links to other web pages in your web page. The anchor tag follows this syntax:

<a href="URL">Link Text</a>

Note that “href” attribute contains the URL of the page the link goes to, and the inside of the tag contains the text that will appear as a hyperlink on the webpage.

Note: href stands for hypertext reference.

Here is a more applicable version:

<a href="https://www.byu.edu/">Link to byu.edu</a>

Here it is being displayed:

Link to byu.edu

3. Image Tag

Inserting an image into a webpage looks a lot like inserting a link – the tags have a similar syntax. To insert images into your web page, use the image tag. It follows this syntax:

<img src="image_file_or_image_URL">

Notice that the image tag does not have a closing tag! All of its information is contained within its attributes. There are additional useful attributes for images as well, such as:

alt - Specifies ‘alt text,’ which is text that the web browser will display if it cannot display the image. Additionally, web crawlers will use the alt tag to find what the image is displaying instead of actually processing the image.
width - Used to denote the width of the web page as either pixels or a percentage, e.g., "50%" or "100px"
height - Used to denote the height of the web page as either pixels or a percentage, e.g., "120%" or "100px"

Here is an example:

<img src="shiba_inu.jpg" alt="shiba inu" width="50%" height="400px">

Here it is being displayed:

4. Table Tag

Tables are made up of rows, and each row contains pieces of data. The first row is typically the table’s heading. HTML tables follow the format where:

<table></table> - denotes the start and stop of the table.
<tr> - table row.
<th> - a table heading. Similar to <td>, but it is bolded.
<td> - a piece of table data.

Consider the following:

<table>
    <!-- First Row -->
    <tr>
        <th></th>
        <th>Dogs</th>
        <th>Cats</th>
    </tr>
    <!-- Second Row -->
    <tr>
        <td>Cuteness</td>
        <td>10</td>
        <td>0</td>
    </tr>
    <!-- Third Row -->
    <tr>
        <td>Memes</td>
        <td>10</td>
        <td>10</td>
    </tr>
</table>

Here it is being displayed:

	Dogs	Cats
Cuteness	10	0
Memes	10	10

An unordered list is made up of multiple list items. To put a unordered list in your web page, use the follow format.

<ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
</ul>

Here it is being displayed:

6. Comments

You can put comments in HTML code by doing the following:

<!-- THIS IS A COMMENT -->

Explore

It is time to see some HTML being used!

Go to the CS111 Website.
Right click on the webpage. You should see a list of options. (or use F12 in both Chrome and Firefox)
Select Inspect (or View Page Source to only see HTML).
Scan through the HTML and see if you see any tags that look familiar! (If you do not see HTML, make sure you are under/selected the Elements tab)
Go under the Network tab and see how much data and how many requests go into loading a page. You should see something like this:

Tools for Developing in HTML

VS Code

Install the ‘Live Server’ extension to view your webpage with live changes.

On the left sidebar menu, click extensions (it looks like four squares).
In the search box, search live server
Click Live Server by Ritwick Dey and install. You may need to restart VS Code for the extension to be fully implemented.
Now, near the bottom right of the window, there should be a Go Live button. If you have not already, make sure you opened up lab19 as the working folder or workspace. If you have not, in the upper right corner click File then Open Folder. Find and select your lab19 folder.
Click Go Live. You should either see your lab19.html or some directory looking structure. If it is the latter, then try to find your lab19.html as it reflects your own file system

Pycharm

Pycharm should already have a built-in server. If you hover over your HTML code, you should on the right some choices on how to display the HTML.

Select your preferred option and you should be good to go!

You can refer to Jet Brain’s Website for HTML and Pycharm for more information if needed.

Required Question

Q1: Create Your Own Web Page

Create your own web page that includes at least one of each of the following:

A paragraph tag
A link with an href attribute
An image with a src and alt attribute (you can use the images given in lab19.zip)
A table with a header row, at least one data row, and at least one column. The table must use the <tr>, <td>, & <th> tags properly
An unordered list with at least one list item

If you want, search up additional HTML tags, such as the audio tag (<audio>), and use them in your web page.

Submit

Submit the lab19.html file on Canvas to Gradescope in the window on the assignment page.

Going Further

Intro to Cascading Style Sheets (CSS)

HTML mainly focuses on the structure of a webpage rather than its functionality or how it looks. To add functionality to your webpage, you will have to include Javascript which will not be covered in this class but is covered in CS260. To change how a webpage looks, you can use Cascading Style Sheets (CSS). To do this, you can add a style attribute to most tags. Within each style attribute goes the properties of the tag. Each tag has their own properties with their own values that alter how the tag looks on the webpage. For example, the paragraph tag <p> has a style property "color: <color>;". Altogether, it can look like this:

<p style="color: blue">This is blue text</p>

You can stack up multiple properties by just putting the next property right after the previous with a semicolon separating each of the properties. For example, with the font-size property:

<p style="color: blue; font-size: 40px">This is blue text that has a 40 pixel font</p>

There are several tags with several unique properties, so if you want to change how other tags look, it is worth searching those properties up on the internet.

Organization

Currently, if we wanted to make all our paragraphs have a certain property, say a font color of green, we would have to do put a style attribute with each paragraph tag:

<!DOCTYPE html>
<html>
    <head>
        <title>Title for webpage tab</title>
    </head>
    <body>

        <p style="color: green;">Hello world!</p>
        <p style="color: green;">To be or not to be.</p>
        <p style="color: green;">Tomato, Tomato. Potato, Potato.</p>
        <p style="color: green;">Mean Dr. Coconut jumped over a palm tree</p>
        <p style="color: green;">Moose, alpaca, moose, moose, alpaca ... narwhal</p>

    </body>
</html>

This is tedious, but there are multiple solutions to solve this issue. One is to put all the paragraph tags in a division tag <div> and put the style attribute in that tag. As a result, all the properties would cascade into the tags that the <div> tag contains. For example:

<!DOCTYPE html>
<html>
    <head>
        <title>Title for webpage tab</title>
    </head>
    <body>

        <div style="color: green;">
            <p>Hello world!</p>
            <p>To be or not to be.</p>
            <p>Tomato, Tomato. Potato, Potato.</p>
            <p>Mean Dr. Coconut jumped over a palm tree</p>
            <p>Moose, alpaca, moose, moose, alpaca ... narwhal</p>
        </div>

    </body>
</html>

A more conventional and better solution would be to use the style tag (not attribute) in the <head> tags and put the properties for the tags in it. It follows this format:

<tag> {
    property: value;
    property: value;
    ...
    property: value;
}

This is called a declaration block.

Using the previous webpage as an example:

<!DOCTYPE html>
<html>
    <head>
        <title>Title for webpage tab</title>

        <style>

            p {
                color: green;
            }

        </style>

    </head>
    <body>

        <p>Hello world!</p>
        <p>To be or not to be.</p>
        <p>Tomato, Tomato. Potato, Potato.</p>
        <p>Mean Dr. Coconut jumped over a palm tree</p>
        <p>Moose, alpaca, moose, moose, alpaca ... narwhal</p>

    </body>
</html>

IDs and Classes

In some cases, we might not want to change all the paragraph tags, but only individual paragraph tags. To do this we can assign either a class or id to a tag and make CSS refer to that individual tag when assigning properties:

<p id="id_name" class="class_name"> Dr. Coconut</p>

A class can belong to multiple tags, but an id can only belong to one tag.

Within the <style> tag, the syntax for assigning properties to tags with classes or an id is like so:

<style>

    #id_name {
        property: value;
    }

    .class_name {
        property: value;
    }

</style>

Linking to a CSS File

As a webpage gets larger, it is worth separating the HTML, the structure of a webpage, and the CSS, the code determining the appearance of a webpage, into separate files.

To do this, create a CSS file that follows the format <file_name>.css and put all declaration blocks in the file.

For example, within example.css, we could put this:

p {
    color: green;
}

Then, within the original html file, we would need to put this line of code:

<link href="example.css" rel="stylesheet">

Here is the final product of our html file:

<!DOCTYPE html>
<html>
    <head>
        <title>Title for webpage tab</title>
        <link href="example.css" rel="stylesheet">
    </head>
    <body>

        <p>Hello world!</p>
        <p>To be or not to be.</p>
        <p>Tomato, Tomato. Potato, Potato.</p>
        <p>Mean Dr. Coconut jumped over a palm tree</p>
        <p>Moose, alpaca, moose, moose, alpaca ... narwhal</p>

    </body>
</html>

Q2: Add CSS

Now make some CSS changes to your webpage!

If you want to do more with CSS, visit Bootstrap - likely the most popular CSS framework that can easily make your website look good quickly. After getting set up, the left sidebar shows several components that you can style using Bootstrap.

Lab 19 - HTML & Web Fundamentals

Lab 19 - HTML & Web Fundamentals

Starter Files

Topics

Basic Structure of HTML

Tags

1. Paragraph Tag

2. Anchor Tag

3. Image Tag

4. Table Tag

5. Unordered List Tag

6. Comments

Explore

Tools for Developing in HTML

VS Code

Pycharm

Required Question

Q1: Create Your Own Web Page

Submit

Going Further

Intro to Cascading Style Sheets (CSS)

Organization

IDs and Classes

Linking to a CSS File

Q2: Add CSS