Lab 18 - HTML & Web Fundamentals

Due by 11:59pm on 2024-03-28.

Starter Files

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

Topics

In project 4, you are going to have to parse through HTML, so you need to know some HTML.

Basic Structure of HTML

HTML stands for Hyper Text Markup Language.

HTML is used for creating the structure of a web page, while CSS and Javascript are used for styling and adding functionality to a web page respectively. For this class, we'll only be focusing on HTML, but you can take CS260 to learn more about CSS, Javascript (JS), and frameworks such as Django.

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 rather than older versions of HTML such as HTML4. The <html> and </html> contain all the HTML code for defining the structure of a webpage. Within those tags can go more tags 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. For this class, however, 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, the paragraph tags: <p> and </p>. Notice the closing tag is the same as the opening tag but the closing tag has a slash /. Within the opening tag there can be additional information for formatting called attributes. For example,

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

Where id="intro" is an attribute. You can think of id as a variable name for that specific paragraph tag (and you will not need to remember that for this class).

The following tags will be used to put actual content on the web page rather than organizing it.

Paragraph Tag

To display text in your web page, use the paragraph tag.

<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 out of scope for this class).

Anchor Tag

To put links to other web pages in your web page, use the anchor tag. It follows this syntax:

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

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

Image Tag

Images follow a similar pattern to anchors/links. To put images in 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 displayed within its attributes. There are additional useful attributes for images as well, such as:

alt - If the image cannot be displayed, the web browser will display the text in the alt tag. Additionally, web crawlers will use the alt tag to find 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:

Table Tag

Tables are made up of rows, and within each rows are 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.
<td> - a piece of table data.
<th> - a table heading. Similar to <td>, but it is bolded.

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:

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 Lab18 as the working folder or workspace. If you have not, in the upper right corner click File then Open Folder. Find and select your Lab18 folder.
Click Go Live. You should either see your lab18.html or some directory looking structure. If it is the latter, then try to find your lab18.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 lab18.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 lab18.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 looks for 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!

Or, if you want, you learn about Bootstrap - likely the most popular CSS framework that can easily make your website look good quick. After getting setup, the left sidebar shows several components that you can style using Bootstrap.

Lab 18 - HTML & Web Fundamentals

Lab 18 - HTML & Web Fundamentals

Starter Files

Topics

Basic Structure of HTML

Tags

Paragraph Tag

Anchor Tag

Image Tag

Table Tag

Unordered List Tag

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