Share
Explore

Summer 2024 Introduction to Web Development

May 7 Lab Book: Interstellar Travels


Day 01 Lesson Overview:
Introduction to Web Applications and Web Application Development

Software installation (Visual Studio Code with Live Server Extension)
How to create a new web project (creating a folder and adding an index.html page) Boilerplate code for a webpage (html, head, body)

Intro to HTML Rendering text (p, heading tags) Adding links Adding images Inserting lists (ol, ul) Inserting tables (table, tr, td)

Lesson plan outline:
]Fundamentals of web applications,
HTML, the Document Object Model (DOM), and web application development using Microsoft Visual Studio Code with the Live Server extension

Lesson 1: What are Web Applications - HTML and HTTP

Objective:
Understand what web applications are and how they work.
Learn the basics of HTML and HTTP.

Lesson Plan:
Introduction to Web Applications
Definition of a web application
Examples of web applications
Client-server architecture
Understanding HTML
Introduction to HTML
Basic structure of an HTML document (e.g., <!DOCTYPE html>, <html>, <head>, <body>)
Common HTML tags and their purposes (<h1>, <p>, <a>, <img>, <div>, etc.)
Basics of HTTP
What is HTTP?
HTTP request and response cycle
Understanding URLs, HTTP methods (GET, POST), and status codes
Interactive Activity
Create a simple HTML page using Visual Studio Code
Discuss how the browser requests this page
Q&A and Homework Assignment
Create a personal bio page using HTML

Lesson 2: HTML Document Object Model (DOM)

Objective:
Understand the HTML DOM and its importance in web development.

Lesson Plan:
Introduction to the DOM
Definition and significance of the DOM
How the DOM represents an HTML document
Exploring the DOM Tree
Structure of the DOM tree (nodes, elements, attributes)
Basic DOM properties and methods
Manipulating the DOM
Using JavaScript to manipulate DOM elements (changing styles, content, attributes)
Interactive Activity
Modify an HTML page in real-time using JavaScript to see changes in the DOM
Q&A and Practical Assignment
Modify the personal bio page to include interactive elements using JavaScript

Lesson 3: Web Application Development with Microsoft Visual Studio Code and Live Server Extension

Objective:
Learn to develop web applications using Visual Studio Code and the Live Server extension.
Materials Needed:
Visual Studio Code installed with Live Server extension
Code samples and templates
Lesson Plan:
Introduction to Visual Studio Code
Features and benefits of using Visual Studio Code
Setting up Visual Studio Code for web development
Using the Live Server Extension
Introduction to the Live Server extension
Benefits of real-time reloading for development
Developing a Simple Web Application
Step-by-step creation of a web application using HTML, CSS, and JavaScript
Using Visual Studio Code and Live Server to view changes in real-time
Best Practices and Tips
Efficient use of Visual Studio Code features (extensions, shortcuts, version control integration)
Class exercise
Build a small project in class using all learned tools and techniques

megaphone

Demonstration of CSS and JavaScript.

HTML: The framing and structure of the house.
CSS: Paint, Wall-paper, visual finishings and appearance
JavaScript: The “Internet signal” between the NODES of the DOM to propogate information and events.
This code will use the local images kitten.jpg and tiger.jpg and modify the text under the images when the image changes upon button click. I'll also ensure to handle local resources correctly and dynamically update the text depending on which image is displayed.
Here's the revised HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Flip Example</title>
<style>
.image-container {
text-align: center; /* Center align content */
margin-top: 50px; /* Margin at the top */
}
#flipButton {
padding: 10px 20px; /* Padding around the text */
font-size: 16px; /* Text size */
cursor: pointer; /* Cursor appears as a pointer */
background-color: #4CAF50; /* Background color */
color: white; /* Text color */
border: none; /* No border */
border-radius: 5px; /* Rounded corners */
}
#imageCaption {
font-size: 18px;
color: #333;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="image-container">
<img id="imageToFlip" src="kitten.jpg" alt="Kitten Image" width="200">
<br>
<button id="flipButton" onclick="flipImage()">Flip Image</button>
<h3 id="imageCaption">Your Wife before the Wedding</h3>
</div>

<script>
function flipImage() {
var image = document.getElementById('imageToFlip');
var caption = document.getElementById('imageCaption');
if (image.src.includes('kitten.jpg')) {
image.src = 'tiger.jpg';
caption.innerHTML = 'Your Wife after the Wedding';
} else {
image.src = 'kitten.jpg';
caption.innerHTML = 'Your Wife before the Wedding';
}
}
</script>
</body>
</html>

image.png

Local Image Source: The image sources have been updated to kitten.jpg and tiger.jpg, which should be stored in the same directory as your HTML file.
Dynamic Text: The caption under the image now changes dynamically when you click the button to flip the image. This is handled by checking the current source of the image and updating the innerHTML of the caption accordingly.
JavaScript Function: The flipImage function now uses includes to check if the current image source contains 'kitten.jpg'. This method is more reliable when the full path to the image might change due to different deployment or development environments.
Style and Layout: Minor improvements to the CSS for better readability and aesthetics.
Ensure that both images (kitten.jpg and tiger.jpg) are in the same directory as this HTML file for this to work correctly when loaded in a browser.<!DOCTYPE html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Flip Example</title> <style> /* Using class selector for styling the container */ .image-container { text-align: center; /* Center align content */ margin-top: 50px; /* Margin at the top */ }
/* Using ID selector for styling the button */ #flipButton { padding: 10px 20px; /* Padding around the text */ font-size: 16px; /* Text size */ cursor: pointer; /* Cursor appears as a pointer */ background-color: #4CAF50; /* Background color */ color: white; /* Text color */ border: none; /* No border */ border-radius: 5px; /* Rounded corners */ } </style> </head> <body> <div class="image-container"> <img id="imageToFlip" src="kitten.jpg" alt="Kitten Image" width="200"> <br> <button id="flipButton" onclick="flipImage()">Flip Image</button> </div>
<script> function flipImage() { var image = document.getElementById('imageToFlip'); // Use local filenames for comparison if (image.src.includes('kitten.jpg')) { image.src = 'tiger.jpg'; // Switch to the second local image } else { image.src = 'kitten.jpg'; // Switch back to the original local image } } </script> </body> </html>

Explanation:

HTML Structure: The HTML contains a div element with the class image-container that centers the content within it and applies a margin at the top for spacing. Inside this div, there is an <img> tag with an id of imageToFlip and a <button> with an id of flipButton.
CSS Styling:
The .image-container class selector is used to style the container, centering the content and applying a margin.
The #flipButton ID selector specifically styles the button, setting its background color, text color, cursor appearance, and other properties for visual appeal and usability.
JavaScript:
The flipImage() function checks the current source of the image. If it's the initial kitten image, it changes to another kitten image upon clicking the button. If it's the second image, it switches back to the original.
This function is called when the button is clicked, demonstrating a basic interaction on the web page.
This page is an introductory example of how to interactively change an element on a web page using JavaScript along with applying specific CSS styles using class and ID selectors.
This is a practical demonstration suitable for beginners in web development to understand the dynamics of HTML, CSS, and JavaScript.


minus

Let’s revise this html to use dynamic CSS which changes the theme and appearance of the page: warm and inviting css thematic elements when kitten is displayed. Scary and terrifying CSS thematic elements when tiger is displayed

Under JavaScript control, we will change the CSS and change the appearance of the page.

To incorporate dynamic CSS changes based on the image displayed (kitten or tiger), you can modify the HTML and add CSS to change the theme of the page dynamically.
Here's how you can set up the HTML and CSS to change the overall appearance based on which image is displayed:

HTML with Dynamic CSS


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Theme Example</title>
<style id="dynamicStyle">
body {
transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

/* Default style for the kitten (warm and inviting) */
.warm {
background-color: #FFDAB9; /* peach color */
color: #6A5ACD; /* slate blue */
}

/* Style for the tiger (scary and terrifying) */
.terrifying {
background-color: #2F4F4F; /* dark slate gray */
color: #DC143C; /* crimson for a scary effect */
}

.image-container {
text-align: center; /* Center align content */
margin-top: 50px; /* Margin at the top */
}

#flipButton {
padding: 10px 20px; /* Padding around the text */
font-size: 16px; /* Text size */
cursor: pointer; /* Cursor appears as a pointer */
border: none; /* No border */
border-radius: 5px; /* Rounded corners */
transition: background-color 0.5s ease-in-out;
}

/* Default button style */
.warm #flipButton {
background-color: #FA8072; /* salmon */
color: #FFFFFF; /* white */
}

/* Button style for the tiger theme */
.terrifying #flipButton {
background-color: #8B0000; /* dark red */
color: #FFFF00; /* yellow */
}
</style>
</head>
<body class="warm">
<div class="image-container">
<img id="imageToFlip" src="kitten.jpg" alt="Kitten Image" width="200">
<br>
<button id="flipButton" onclick="flipImage()">Flip Image</button>
</div>

<script>
function flipImage() {
var image = document.getElementById('imageToFlip');
var body = document.body;
var button = document.getElementById('flipButton');

if (image.src.includes('kitten.jpg')) {
image.src = 'tiger.jpg';
body.className = 'terrifying';
button.className = 'terrifying';
} else {
image.src = 'kitten.jpg';
body.className = 'warm';
button.className = 'warm';
}
}
</script>
</body>
</html>

How It Works:

CSS Classes for Themes: Two classes, .warm and .terrifying, are defined to represent different themes. These classes are applied to the <body> element and modify the background color, text color, and other style properties to match the theme.
Dynamic Style Application: When the "Flip Image" button is clicked, the JavaScript function flipImage() toggles the image between a kitten and a tiger. Depending on the current image, it also switches the class of the <body> element to apply the corresponding theme.
Transitions: CSS transitions are added to smoothly animate the changes in background color and text color when the theme switches.
Button Styling: The button's style changes along with the theme to maintain consistent aesthetic adjustments.
This setup ensures that the theme of the webpage changes dynamically to match the content, enhancing the user's visual experience and making the interaction more engaging.


Day 2 May 7


image.png



Activity A:

Lab Workbook Chapter: Understanding and Organizing Web Content


In today’s class, we bridge the gap between our previous lessons on basic HTML elements and the more advanced topic of semantic structuring in web development.

Learning Outcomes:

‘semantic’ → means meaning
Deepen your understanding of how to effectively organize web content using both non-semantic and semantic HTML tags.
By the end of this chapter, you should be able to discern when to use each type of element to enhance the accessibility and SEO of your web pages.

Review of Previous Lessons
Before we dive into the new concepts, let’s review what we’ve learned so far:
Basic HTML Tags: Elements like <div>, <span>, <img>, and <a> provide the basic functionality for building web pages.
Attributes and Values: We explored how attributes modify the behavior of HTML tags, such as src in <img> for image source or href in <a> for linking to other pages.
Styling with CSS: Introduction to inline and external styling to enhance the appearance of web elements.
With these foundations in place, we can now explore how to use HTML more effectively to organize and describe the content of web pages semantically.
Non-Semantic Elements
Non-semantic HTML elements tell nothing about their content to the browser or the developer.
Examples include:
<div>: The most common block-level container, useful for styling or grouping elements but does not convey any meaning about its contents.
<span>: Similar to <div>, but used for inline grouping and styling.
These elements are essential when specific semantic elements do not fit the content's needs or when you need to control layout or styling.

However, overusing these can lead to less accessible and harder-to-read codebases.


Organizing Content with Semantic Tags


Semantic HTML elements clearly describe their meaning in both the browser and the developer, making web pages more informative and easier to read.
Using semantic tags improves SEO and accessibility. Examples include:
<article>: Defines content that forms an independent part of a document or site, such as a blog post or news article.
<section>: Represents a standalone section within a document, which doesn’t have a more specific semantic element to represent it.
<header>, <footer>: Define the header or footer of a page or section, typically containing introductory content or navigational links, and concluding content, respectively.
<nav>: Designates navigation links.
<aside>: Marks content that is tangentially related to the content around it, such as a sidebar to a main article.
<figure> and <figcaption>: Used together to mark up a media item (like an image, diagram, or chart) along with its caption.

Lab Exercise: Applying Semantic HTML
Objective: Convert a non-semantic HTML document into a semantically structured one.
Task:
Use VSC to create the provided HTML document containing typical blog elements wrapped in <div> tags.
Identify the sections of the document that correspond to specific semantic elements.
Replace non-semantic <div> tags with the appropriate semantic tags.
Validate the accessibility and SEO improvements using Chromium Dev Tools LIGHTHOUSE.
Example Transformation:
Convert this:
<div class="blog-post">
<div class="post-header">
<h2>Welcome to Our Blog</h2>
</div>
<div class="post-content">
<p>This is a great day to start learning HTML!</p>
</div>
</div>
To this:
<article>
<header>
<h2>Welcome to Our Blog</h2>
</header>
<section>
<p>This is a great day to start learning HTML!</p>
</section>
</article>

Conclusion
Use Chromium Devtools / Lighthouse report - Pay attention to the Performance and Accessibility metrics.
Understanding when and how to use semantic elements versus non-semantic ones is crucial for developing well-structured, accessible, and SEO-friendly web pages.
This chapter’s lab exercise will reinforce these concepts by letting you apply semantic structuring to real-world HTML content.
This prepares you for future topics, including more advanced HTML5 elements and ARIA roles for enhancing web accessibility.

megaphone

What are the main structural elements of HTML 5

HTML5 introduces several structural elements that enhance the semantic markup of web pages, making them more meaningful and accessible. These elements help define the sections and layout of a page more clearly than previous versions of HTML, which relied heavily on generic <div> elements for layout purposes.
Here are the main structural elements introduced in HTML5:
<header>: Represents introductory content or navigational links. A page or section can have multiple headers.
<footer>: Serves as the footer for a section or page, often containing information like copyrights, links to privacy policies, or contact information. Like headers, footers can be used multiple times throughout a document, depending on the structure.
<nav>: Designates navigation links. Typically used for major block of navigation links; however, it is not intended for every set of links found in the document.
<article>: Defines a self-contained composition in a document, page, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include a forum post, a magazine or newspaper article, or a blog entry.
<section>: Represents a standalone section of a document, which doesn't have a more specific semantic element to represent it. It should be used for grouping thematic content, and it typically includes a heading.
<aside>: Marks content that is tangentially related to the content around the <aside> tag. The content could be considered a sidebar to the main content, such as related links, glossaries, or side notes.
<hgroup>: Used to group a set of <h1><h6> elements when a section has multiple headings, but it has been removed from the HTML5 specification and should be avoided as it is obsolete.
<figure> and <figcaption>: The <figure> element is used to mark up a photo, diagram, illustration, code listing, etc., that is referenced in the main flow of the document. The <figcaption> element provides a caption or legend for the figure.
<main>: Specifies the main content of the document. There should be only one <main> element per document. The content inside the <main> element should be unique to the document and not repeated across documents (such as sidebars, footers, or navigation links).
<mark>: Used to highlight text for reference purposes, often for marking a run of text due to its relevance in another context.
These elements are part of HTML5's push to make web content more accessible and to enable more sophisticated CSS styling and JavaScript manipulation.
By using these elements, web developers can create clearer, more logically structured pages that are better understood by browsers, search engines, and assistive technologies.


Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.