HTML Part 2 Notes
HTML Lists
1. Ordered List:
- Displays items in a numbered sequence.
- Created using the <ol> tag and <li> for each item.
- Example:
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
- Output:
1. HTML
2. CSS
3. JavaScript
2. Unordered List:
- Displays items in a bulleted sequence.
- Created using the <ul> tag and <li> for each item.
- Example:
<ul>
<li>Dog</li>
<li>Cat</li>
<li>Bird</li>
</ul>
- Output:
- Dog
- Cat
- Bird
3. Definition List (Description List):
- Used to display terms and their definitions.
- Tags:
- <dl>: Defines the description list.
- <dt>: Defines the term.
- <dd>: Defines the description.
- Example:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
- Output:
HTML
HyperText Markup Language
CSS
Cascading Style Sheets
Table for Description List Tags
| Tag | Description | Example |
|-------|---------------------------------|------------------------------------------|
| <dl> | Defines a description list. | <dl>...</dl> |
| <dt> | Defines a term. | <dt>HTML</dt> |
| <dd> | Defines the description. | <dd>HyperText Markup Language</dd> |
Nested Lists
A list inside another list.
Example:
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Spinach</li>
</ul>
</li>
</ul>
Output:
- Fruits
- Apple
- Banana
- Vegetables
- Carrot
- Spinach
Inserting Images
HTML allows images in three formats: GIF, JPEG, and PNG.
1. GIF:
- Best for animations or simple images.
- Example:
<img src="image.gif" alt="GIF Image">
2. JPEG:
- Best for photographs or detailed images.
- Example:
<img src="image.jpg" alt="JPEG Image">
3. PNG:
- Best for images with transparency.
- Example:
<img src="image.png" alt="PNG Image">
Image Tag Attributes Table
| Attribute | Description | Example |
|-----------|-------------------------------------|--------------------------------------|
| src | Specifies the image file location. | <img src="image.jpg"> |
| alt | Provides alternative text. | <img alt="Description"> |
| height | Specifies image height. | <img height="200"> |
| width | Specifies image width. | <img width="300"> |
| align | Aligns image (deprecated). | <img align="left"> |
| border | Adds border (deprecated). | <img border="1"> |
Anchor Tag Attributes Table
| Attribute | Description | Example |
|-----------|-----------------------------------------|--------------------------------------|
| href | Specifies the URL the hyperlink points to. | <a href="https://www.example.com">Visit
Example</a> |
| name | Creates a named anchor for internal linking. | <a name="top">Go to Top</a> |
Example of Hyperlink to an Email Address:
Embedding Audio
HTML5 allows embedding audio using the <audio> tag, which supports the following formats:
1. MP3: MPEG Audio Layer-3
2. WAV: Waveform Audio Format
3. OGG: Ogg Vorbis
Example of Embedding Audio:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<source src="audio.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
Audio Tag Attributes Table
| Attribute | Description | Example |
|------------|------------------------------------------|--------------------------------------|
| src | Specifies the audio file location. | <audio src="audio.mp3"> |
| type | Specifies the audio file type. | <source type="audio/mpeg"> |
| controls | Adds playback controls (play, pause, etc.). | <audio controls> |
Media Elements and Embedding Video
Media elements include audio and video. They allow embedding multimedia content in webpages.
HTML5 allows embedding video using the <video> tag, which supports the following formats:
1. MP4: MPEG-4 Video
2. WebM: WebM Video
3. OGG: Ogg Video
Example of Embedding Video:
<video controls width="640" height="360">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video element.
</video>
Video Tag Attributes Table
| Attribute | Description | Example |
|------------|------------------------------------------|--------------------------------------|
| src | Specifies the video file location. | <video src="video.mp4"> |
| type | Specifies the video file type. | <source type="video/mp4"> |
| width | Sets the width of the video. | <video width="640"> |
| height | Sets the height of the video. | <video height="360"> |
| controls | Adds playback controls (play, pause, etc.). | <video controls> |
