Message
Message
### Guidelines:
- Explain the importance of organizing project files
- Introduce VSCode as a popular code editor
- Demonstrate how to create a new HTML file
- Briefly explain the purpose of each recommended extension
### Example:
"Let's start by creating a new folder called 'my_first_website'. Open this folder
in VSCode. Now, let's create a new file called 'index.html'. This will be our
homepage."
## HTML Structure
### Guidelines:
- Explain the concept of HTML elements and tags
- Demonstrate the basic structure of an HTML document
- Emphasize the importance of proper nesting
### Example:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first HTML page!</p>
</body>
</html>
```
## Local Development
### Guidelines:
- Explain the concept of localhost and its importance in web development
- Demonstrate how to use Live Server extension in VSCode
### Example:
"When we use localhost:5000, we're telling our computer to act as a web server.
It's like creating a mini-internet on our own computer!"
### 1. Headings
#### Guidelines:
- Explain the hierarchy of headings
- Demonstrate how to use headings for structuring content
#### Example:
```html
<h1>Main Title</h1>
<h2>Subtitle</h2>
<h3>Section Header</h3>
```
### 2. Paragraphs
#### Guidelines:
- Explain the use of paragraphs for organizing text
- Demonstrate how browsers handle whitespace in HTML
#### Example:
```html
<p>This is a paragraph. HTML will ignore extra spaces and line breaks.</p>
<p>This is a new paragraph.</p>
```
### 3. Formatting
#### Guidelines:
- Explain the difference between semantic and non-semantic formatting
- Demonstrate various text formatting options
#### Example:
```html
<p>This text is <b>bold</b> and this is <strong>strongly important</strong>.</p>
<p>This text is <i>italic</i> and this is <em>emphasized</em>.</p>
<p>H<sub>2</sub>O is water and 2<sup>3</sup> is 8.</p>
<p>This is <ins>inserted</ins> text and this is <del>deleted</del> text.</p>
<p>This is <mark>highlighted</mark> text.</p>
```
#### Guidelines:
- Explain the difference between block-level and inline elements
- Demonstrate how to use div and span for structuring and styling
#### Example:
```html
<div style="background-color: lightgray; padding: 10px;">
<p>This is a block of content inside a div.</p>
<p>Here's some text with a <span style="color: blue;">blue span</span> inside
it.</p>
</div>
```
### 5. Iframe
#### Guidelines:
- Explain the purpose of iframes
- Demonstrate how to embed external content
- Discuss security considerations
#### Example:
```html
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d3022.9663095890486!2d-74.00425878428698!3d40.71277737933185!2m3!1f0!2f0!3f0!3m2!
1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a47df06b185%3A0xc80b8f06e177fe62!2sNew%20York
%2C%20NY!5e0!3m2!1sen!2sus!4v1582909273598!5m2!1sen!2sus" width="600" height="450"
frameborder="0" style="border:0;" allowfullscreen=""></iframe>
```
#### Guidelines:
- Introduce the concept of CSS
- Demonstrate inline styling as a simple way to add visual elements
#### Example:
```html
<p style="color: red; font-size: 20px; font-family: Arial, sans-serif;">This
paragraph has custom styling.</p>
```
### 7. Lists
#### Guidelines:
- Explain the different types of lists and their uses
- Demonstrate how to create nested lists
#### Example:
```html
<h3>Unordered List</h3>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
<h3>Ordered List</h3>
<ol type="A">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h3>Description List</h3>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
```
### 8. Links
#### Guidelines:
- Explain the structure of a basic link
- Demonstrate different types of links (internal, external, email)
- Explain the use of the target attribute
#### Example:
```html
<p>Click <a href="about.html">here</a> to learn more about us.</p>
<p>Visit <a href="https://www.example.com" target="_blank">Example.com</a> for more
information.</p>
<p>Contact us at <a href="mailto:[email protected]">[email protected]</a>.</p>
```
### 9. Images
#### Guidelines:
- Explain the structure of the img tag
- Emphasize the importance of the alt attribute for accessibility
- Demonstrate how to link an image
#### Example:
```html
<img src="cat.jpg" alt="A cute cat" width="300" height="200">
<a href="https://www.example.com">
<img src="logo.png" alt="Company Logo">
</a>
```
#### Guidelines:
- Explain the structure of the audio tag
- Demonstrate how to provide multiple source files for browser compatibility
#### Example:
```html
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
```
#### Guidelines:
- Explain the structure of the video tag
- Demonstrate various attributes for controlling video playback
- Show how to provide multiple source files for browser compatibility
#### Example:
```html
<video width="320" height="240" controls autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
```
## Hands-on Exercise
This exercise will help students practice using various HTML elements together in a
real-world context.