Topics:

• the "Back-up" talk
• user accounts
• meet the lab, lab rules
• meet the computers
• exactly what does "monitors OFF!" mean?
• printing

Topics to be Covered

• HTML
• CSS
• Principles of Web Design
• Programming Concepts in Javascript:
• How the Internet Works: Host/Client Relationship, Protocols, TCP/IP
• How to Create Progressive Web Apps
• Using API's and JSON

A discussion on academic integrity and the importance of learning to code without relying on AI. There is value of building a strong foundation in programming.

Notes for Ms. Wear

Lesson accompanied by exercises on Google Classroom:

1. Files and folder Management
2. Test Your Typing Skills
3. Windows Shortcuts

We will try and watch one of these each day.

How the Internet Works.

In class intro to HTML 5, valid documents, and HTML elements.

Lesson: What does HTML stand for? Basic syntax, some basic tags, and important resources

Useful HTML Resources

Intro to HTML 5 Tutorials at w3Schools.

Valid HTML5 document (Explanation)

HTML Validator

HTML Reference

All of this material will be assessed by periodic quizzes.

In class we will create a simple complete valid HTML/CSS/JS template to use for all future assignments.

Step 1: Learn the following HTML elements.

Use the links provided to research and learn the following HTML elements. Then for each one not already in your helloworld index.html , add an example of its correct usage.

• Html
• Head
• Body
• h1-h6
• p
• pre
• sub
• sup
• comments
• hr and br
• em
• strong
• Entities and Special Characters

Step 2: Create a Biography Page

Create a new folder called "About Me" and create a new index.html with no content in the body. Turn this page int oa simple "About Me" page that includes the following:

• A heading (h1-h6) for your name or a creative title.
• A paragraph (p) introducing yourself (or a fictional character).
• A preformatted text block (pre) with a fun fact or poem.
• Subscript (sub) and superscript (sup) somewhere in your text (e.g., "H₂O is water" or "E=mc²").
• A horizontal rule (hr) to separate sections.
• Emphasized (em) and strong (strong) text to highlight key points.
• At least two special characters or HTML entities (e.g., ©, ♥).
• Add an HTML comment somewhere explaining what each particular section does.
• Format your content neatly with proper indentation.

In this exercise, you will expand your About Me page by adding lists, links, images, audio, and video.

Ordered and Unordered Lists

1. Read -> the W3 Schools Lists Tutorial.
2. Add -> incorporate a relevant Ordered List and Unordered List to your About Me page.
3. Validate your code

Anchors (Links)

1. Read -> the W3 Schools Links Tutorial.
2. Add -> a link to a relevant website to your About Me page. Test that the link works.
3. Read -> Create an anchor link at the bottom of the page that says "Back to Top" and jumps back to the top of the page.
4. Add -> a "back to top" link to the bottom of About Me page. Test that the link works.
5. Validate your code

Images and Filepaths

1. Read -> the W3 Schools Filepaths Tutorial.
2. Read -> the W3 Schools Images Tutorial.
3. Create -> In your About Me folder, create a new folder called "images".
4. Download a relevant image from Pexels.com and save it in your new images folder
5. Add -> using a relative path, add the image you saved to your About Me page. Test that the image works by viewing your page in a browser.
6. Validate your code

Audio

1. Watch: the Audio tag.
2. Download this song Busy City.mp3
3. Insert the song into your About Me page and SAVE IT IN YOUR HTML FOLDER.
4. w3 Schools Reference Audio Tag
5. Validate your code

Video

1. Watch: the Video tag.
2. Download this video of the earth from Nasa Earth Video
3. Insert the video into your About Me page.
4. w3 Schools Reference Video Tag
5. Validate your code

In Class Lesson: What does CSS stand for? How to use an external CSS file and how to apply basic properties to html elements.

Useful CSS Resources

w3Schools Intro to CSS

CSS Validator

CSS Reference

All of this material will be assessed by periodic quizzes.

CSS Properties to know:
border, margin, padding, border-radius, background-color, color, font-family, font-size, font-style, font-variant, text-decoration, text-decoration-color, text-align, text-shadow

Create a new file called style.css in the same folder as your About Me HTML file.

Link your style.css file to your index.html using the link tag inside the head.

Add the following styles to improve your page’s appearance:

1. Change the background color of your page.
2. Set a different font for your text.
3. Add padding and margins to space out sections.
4. Make emphasized text a different color.
5. Add a drop shadow to your main heading.
6. Validate your CSS and your HTML.

Get Assessed

Get Ms. Wear to assess your About Me page for Exercises 1-3.

In Class Lesson

1. color names
2. color values: Hex, RGB, HSL
3. alpha channels
4. modifying colours

Useful Resources

• Hex Codes Explained, Video
• Color Chart
• Legal Colour Values

In class lesson inline vs block, div, span, border, margin, padding

Useful Resources

CSS Box Model

Inline vs Block Elements

CSS Element Relationships.

In Class Lesson

1. classes
2. ids
3. pseudo classes
4. more specific selectors

Useful Resources

• W3 Selectors Reference

Image Formats

1. Watch Video: Image File Formats.
2. Watch Transparency.
3. More on Image file type and format guide

How to put images in a website:

1. The img tag
2. The Background Image Property
3. Read about Responsive Images

Free Images Resources: MDInfoTech Graphics Resources

PhotoPea - free online image editor

How to create Web Friendly Image from a high resolution photo.

1. use a high quality image
2. minimize byte size
3. crop it, before downsizing
4. make it the actual size it will appear in the webpage
5. use jpg for images (85%), png for graphics with transparency, gif for animation

SVG is a language that uses XML format to define vector-based graphics for the Web. Every element of SVG can be animated. SVG can be written directly into the HTML document or created with a vector drawing program like Inkscape.

1. Watch Vector Graphics Explained.
2. Watch and code along with SVG for Newbs Part 1
3. Watch and code along with SVG for Newbs Part 2
4. Your Assignment: Create an original piece of 'artwork' by coding basic SVG shapes. It will be marked for completion marks, but bonus marks will be granted for extra creativity and artistic ability.

Resources:

1. w3 Schools SVG Tutorials
2. Inkscape Tutorials

1. Complete this website as shown
2. Validate the HTML and the CSS
3. Note: Update the CSS for the classes button, row, and hero as shown below to get the website to work on a screen wider than 1200px.

                
                .row {
                   margin: auto;
                   max-width:100%;
                }
                
                .button {
                   margin-top: 30px;
                   width: 100%;
                   text-align: center;
                }
                .hero {
                   position: absolute;
                   width:100%;
                   height:10px;
                   margin-left: 0px;
                   margin-top: 0px;
               }
                

4. Evaluation: 10/10 if completed correctly and validates, 8/10 if any mistakes, 6/10 if you tried.