Lab 01 - HTML Basics

Objectives

Create an HTML file and open it in both an editor and a web browser.
Understand the basic structure of an HTML document.
Create paragraphs, lists, and hyperlinks using HTML.

Labs Overview

The primary goal for each of the labs is to provide you with an opportunity to practice the content discussed throughout the lectures.

There are CHECK POINT areas throughout each set of instructions. These are places where it might be a good idea to check in with the lab TA before progressing if there are things that were unclear to you.

You do not need to check in with the TA for each checkpoint, and may progress through the whole lab at your own speed. You will need to get checked off by the TA after you have completed the lab before leaving, or you may not get any credit for the lab.

Part 01 - Downloading an HTML Editor

Create a folder named csc130. We will save all subsequent folders and files within the folder named csc130.
Install a programming focused text editor (e.g., Notepad++, VSCode).
Open the programming focused text editor.
Create a file named lab1.html within a folder named lab1 (the .html file extension is important).

Check Point 01

Note: If you are having trouble installing a programming focused text editor, make sure to get help from a lab TA or a lab peer. We will be using the programming focused text editor throughout the lab! You cannot use Microsoft Office or similar text editors (e.g., LibreOffice, Google Docs).

Part 02 - Create Your First Web Page

In the file named lab1.html add the lines of text from HTML Starter [code:lab01-starter].
- Everything should go between the HTML tag.
- The title and metadata will go in the HEAD tag.
- The content will go in the BODY tag (we only need a single BODY tag).
Add a title to your web page, and a single paragraph that says “Welcome to my page!”. We will want to use the appropriate HTML tags for the title and the paragraph.
Save the file named lab1.html. We will want to save anytime we make an update to the file content (hint: heading and paragraph tag).
Open the file named lab1.html in a web browser (e.g., Safari, Firefox, Microsoft Edge). You can double-click the lab1.html in the operating system finder to automatically open the file in a web browser (the .html file extension allows the desired behaviour).

<html>
    <head>
    </head>

    <body>
    </body>
</html>

Check Point 02

Note: If you are having trouble with your code, make sure to get help from a lab TA or a lab peer.

A few common troubles include: spelling mistakes, no closing tags, content in the wrong order, missing required attributes.

Documentation is an important part of programming! Do not be afraid to search documentation!

Documentation Resource: https://developer.mozilla.org/en-US/

Part 03 - HTML Lists

Add two headings: Unordered List and Ordered List. You will want to use the heading tags to wrap “Unordered List” and “Ordered List”.
Create an Unordered List (i.e., bulleted points) under the appropriate heading. Add a list of places you have lived (or travelled).
Create an Ordered List (i.e., numbered points) under the appropriate heading. Add a list of your most frequented websites (text with the name of the website is acceptable).

Check Point 03

Note: If you are having trouble with your code, make sure to get help from a lab TA or a lab peer.

A few common troubles include: using the incorrect HTML tag, no closing tags, content in the wrong order.

Lab 01 - Final Check Point

Send a message (private or public) to the lab TA.
Walk through your code and your web page.

Note: You will need to show your work during lab time to receive credit.

Remember: If you are wanting full marks you will need to complete the bonus material AND participate meaningfully in the lab (e.g., help others, ask questions).

Lab 01 - Bonus Material

Add hyperlinks to the bullet points (i.e., create clickable links).
Add the target attribute to the hyperlinks.
Add text effects such as bold, italics, or underline.

Relevant Documentation Resources:

Lab 02 - CSS (Cascading Style Sheets)

Objectives

Stylize an HTML page using CSS.
Understand the syntax of CSS.
Write CSS rules for classes and specific HTML elements.

Labs Overview

The primary goal for each of the labs is to provide you with an opportunity to practice the content discussed throughout the lectures.

Part 01 - Create Files

Download the file named lab2_starter.html into a folder named lab2.
Open the file named lab2_starter.html in the programming focused text editor.
Open the file named lab2_starter.html in a web browser (e.g., Safari, Firefox, Microsoft Edge).

Check Point 01

Note: If you are having trouble with your code, make sure to get help from a lab TA or a lab peer.

A few common troubles include: downloading multiple versions of lab2_starter.html, opening a version in the programming focused text editor and another version in a web browser.

Part 02 - Adding Styles

Add the link to the CSS file named style.css in the file named lab2_starter.html.
Create a file named style.css within a folder named lab2. The style.css file must be saved into the same directory as your lab2_starter.html (i.e., the folder named lab2 in the folder named csc130).
Create a CSS rule that sets the background color of the BODY of the HTML to black. You can do this by setting color to black (or by using the hex code #000000 or by rgba(0,0,0,1)).
Create a set of rules for the h1 and p tags’ font color. Make the headings yellow and the paragraphs white.
Create a set of rules for the other elements. Add rules to make all the content visible by selecting colors that contrasts with the background.

<html>
    <head>
        <link href="style.css" type="text/css" rel="stylesheet">
    </head>

    <body>
    </body>
</html>

Check Point 02

Note: If you are having trouble with your code, make sure to get help from a lab TA or a lab peer.

A few common troubles include: spelling mistakes, incorrect rule syntax, not saving the files, not refreshing the browser, incorrectly linking the stylesheet.

Documentation is an important part of programming! Do not be afraid to search documentation!

Documentation Resource: https://developer.mozilla.org/en-US/

Part 03 - Classes

Explore the file named lab2_starter.html.

You will notice that there are HTML elements with the class attribute.
```
<html>
    <head>
        <link href="style.css" type="text/css" rel="stylesheet">
    </head>

    <body>
        <main>
            <div class="content"></div>
        </main>
    </body>
</html>
```
The class attribute lets us style everything within the targeted HTML element (i.e., everything within the DIV element with the class attribute called “content”).

The file named lab2_starter.html contains three classes:
- content: the class for all of the main web page content
- caption: the class for image (and maybe also table) captions
- reference: the class for references
We might want to style all three of the above classes differently, but also have different parts across our web page, or web pages to be consistent (so all of our captions look the same, and all of our references look the same, etc).

Remember: To create a rule for a class we use the dot notation.

For example, to create a style rule for all HTML elements labeled with a class called “important”, we would write the following:
```
.important {
    color: red;
    font-weight: bold;
    font-size: 50px;
    text-transform: uppercase;
}
```
This would make everything with the class called “important” in upper-case, large, bold, red font.
Add padding to the content class (this will indent it from the edges).
Change the font size and color of the reference class elements.

Check Point 03

Note: If you are having trouble with your code, make sure to get help from a lab TA or a lab peer.

A few common troubles include: spelling mistakes, incorrect rule syntax, not saving the files, not refreshing the browser, incorrectly linking the stylesheet.

Documentation is an important part of programming! Do not be afraid to search documentation!

Documentation Resource: https://developer.mozilla.org/en-US/

Part 04 - IDs

Explore the file named lab2_starter.html.

You will notice that there are HTML elements with the id attribute.
```
<html>
    <head>
        <link href="style.css" type="text/css" rel="stylesheet">
    </head>

    <body>
        <main>
            <div id="ecs-image"></div>
            <div>
                <p id="welcome">Hello</p>
            </div>
        </main>
    </body>f
</html>
```
The ID attribute lets us style specific elements. We use a single ID attribute per web page (i.e., an ID attribute called ecs-image will only be used once per web page).

Remember: To create a rule for an ID we use the # notation.

For example, in the HTML file we want a particular section of the document to display an image of the ECS building.

Add a CSS ID rule for our ID called #ecs-image.

#ecs-image {
    background-image: url(
    "https://www.uvic.ca/assets2012/images/photos/main/campus-info-maps-maps/main-blg-ecs.jpg"
    );
    background-repeat: no-repeat;
    height: 250px;
}

The code snippet [code:lab02-id-ecs-image] creates a CSS rule that sets the background image of our DIV element.

Add a CSS class rule for our class called caption.
```
.caption {
    position: relative; top: 200px;
}
```
The code snippet [code:lab02-class-caption] sets the caption element to be positioned relative to the top of the DIV, and in particular 200px from the top.
Add a CSS rule for our header 2 (i.e., h2) elements.
```
h2 {
    border-bottom: 1px solid; border-top: 1px solid;
    padding: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 100;
    width: 60%;
}
```
The code snippet [code:lab02-h2] styles all h2 elements on the web page.

Remember: To create a rule for an HTML element we use the HTML element (i.e., we do not use dot or # notation).

Check Point 04

Note: If you are having trouble with your code, make sure to get help from a lab TA or a lab peer.

A few common troubles include: spelling mistakes, incorrect rule syntax, not saving the files, not refreshing the browser, incorrectly linking the stylesheet.

Documentation is an important part of programming! Do not be afraid to search documentation!

Documentation Resource: https://developer.mozilla.org/en-US/

Part 05 - Final Exploration

Duplicate the file named lab2_starter.html as a file named project.html (or start with a blank file) within a folder named lab2.
Create a simple web page about your project idea.

The following questions from the textbook (chapter 01) can help guide the presented content on your web page.

What is the project idea?
Is this a traditional web app, or AR, or both?
What is the hypothesis for your idea?

Check Point 05

Note: If you are having trouble with your code, make sure to get help from a lab TA or a lab peer.

Lab 02 - Final Check Point

Send a message (private or public) to the lab TA.
Walk through your code and your web page.

Note: You will need to show your work during lab time to receive credit.

Remember: If you are wanting full marks you will need to complete the bonus material AND participate meaningfully in the lab (e.g., help others, ask questions).

Lab 02 - Bonus Material

Add a Transform Function to the website.
Add additional classes to the HTML elements.
AND/OR Add additional HTML elements and add attributes class and id.
AND/OR Explain the importance of CSS rule structure (i.e., is the position within the CSS file important).

Relevant Documentation Resources:

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function