Scribd
Upload
7 views5 pages

Message

Uploaded by

joshualegada32
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views5 pages

Message

Uploaded by

joshualegada32
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

# HTML Course - Session 1: Basics to Multimedia

## Setup and Introduction

### 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!"

## Essential HTML Elements

### 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>
```

### 4. Div and Span

#### 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>
```

### 6. Styling (Brief Introduction)

#### 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>
```

### 10. Audio

#### 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>
```

### 11. Video

#### 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

Create a simple personal webpage that includes:


1. A header with your name
2. A paragraph about yourself
3. An unordered list of your hobbies
4. An image of yourself or something you like
5. A link to your favorite website
6. An embedded YouTube video of your favorite song

This exercise will help students practice using various HTML elements together in a
real-world context.

You might also like