Table of Contents

Table of Contents

Admin

All CSC 130 TA Lab Notes: https://notes.dominiquecharlebois.com/ta/csc130.html

Admin

• Lab 01 AND Lab 02 are due at the end of the lab today.

• Lab Material: Brightspace CSC 130 Course - Course Tools - Assignments - Labs 1 and 2: HTML and CSS Concepts!

• Uploading to Brightspace is OPTIONAL, but highly encouraged.

• Checkpoints are optional, thus feel free to work at your own pace and demonstrate your work at the end.

• Ask Questions! Collaborate with Peers!

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

Admin

Credit is awarded by demonstrating your work at the end of each lab:

• Students who complete all required material will obtain 3/4.

• Students who complete bonus material and collaborate with peers will obtain 4/4.

Admin

Interviews start this week! Please register for an interview time slot.

Table of Contents

Lab 01 - Overview

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.

Lab 01 - Part 01

Check Point 01

• 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.

Lab 01 - Part 02

Check Point 02

• In the file named lab1.html add the required content (i.e., the content shown in the lab 01 instruction pdf).

• Add a title to your web page, and a single paragraph that says “Welcome to my page!”.

• Save the file named lab1.html.

• Open the file named lab1.html in a web browser (e.g., Safari, Firefox, Microsoft Edge).

Lab 01 - Part 03

Check Point 03

• Add two headings: Unordered List and Ordered List.

• Create an Unordered List (i.e., bulleted points) under the appropriate heading.

• Create an Ordered List (i.e., numbered points) under the appropriate heading.

Lab 01 - Final Check Point

Final Check Point

__1

Send a message (private or public) to the lab TA.

__2

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 Check Point

Bonus Check Point

• Add hyperlinks to the bullet points.

• Add the target attribute to the hyperlinks.

• Add text effects such as bold, italics, or underline.

Remember: https://developer.mozilla.org/en-US/ is an amazing resource when you have questions!

Table of Contents

Lab 02 - Overview

Objectives

• Stylize an HTML page using CSS.

• Understand the syntax of CSS.

• Write CSS rules for classes and specific HTML elements.

Lab 02 - Part 01

Check Point 01

• 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).

Lab 02 - Part 02

Check Point 02

• 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., lab2).

• In the file named style.css add the required content (i.e., the content shown in the lab 02 instructions pdf).

Lab 02 - Part 03

Check Point 03

• Explore the file named lab2_starter.html.

• Notice the html element attribute class=“”.

• Add the required content (i.e., the content shown in the lab 02 instructions pdf).

Lab 02 - Part 04

Check Point 04

• Explore the file named lab2_starter.html.

• Notice the html element attribute id=“”.

• Add the required content (i.e., the content shown in the lab 02 instructions pdf).

Lab 02 - Part 05

Check Point 05

• Duplicate the file named lab2_starter.html as project.html (or start with a blank file).

• Add the required content (i.e., the content shown in the lab 02 instructions).

Lab 02 - Final Check Point

Final Check Point

__1

Send a message (private or public) to the lab TA.

__2

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 Check Point

Bonus Check Point

• 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).

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

Table of Contents

Lab 01 and Lab 02

Lab 01 and Lab 02 are Finished!

Final Steps

• Upload files to Brightspace (remember: optional, but highly encouraged).