Scribd
Upload
10 views4 pages

HTML WebDev Lesson Notes

This document provides an overview of HTML and web development, covering key concepts such as HTML structure, iframes, tables, embedding YouTube videos, buttons, and HTML form attributes. It also introduces CSS for styling HTML content and outlines different methods to apply CSS. Additionally, a summary table highlights important tags, attributes, and styles related to the discussed topics.

Uploaded by

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

HTML WebDev Lesson Notes

This document provides an overview of HTML and web development, covering key concepts such as HTML structure, iframes, tables, embedding YouTube videos, buttons, and HTML form attributes. It also introduces CSS for styling HTML content and outlines different methods to apply CSS. Additionally, a summary table highlights important tags, attributes, and styles related to the discussed topics.

Uploaded by

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

HTML and Web Development Lesson

Notes
1. Introduction to HTML
HTML (HyperText Markup Language) is the standard language for creating webpages. It
structures content like text, images, links, forms, and multimedia.

2. Iframes
An iframe allows you to embed another webpage inside your current page.

Example syntax:
<iframe src="https://example.com" width="600" height="400" title="Example"></iframe>

Attribute Description

src URL of the page to embed

width Width of the frame

height Height of the frame

title Accessibility title

allowfullscreen Allow full-screen display

3. Tables in HTML
Tables are used to display tabular data.

Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
</table>
Tag Use

<table> Creates a table

<tr> Table row

<th> Table header

<td> Table data

4. Embedding YouTube Videos


To embed a YouTube video:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID"


title="YouTube video" allowfullscreen></iframe>

Replace VIDEO_ID with the actual ID from the video URL.

5. Buttons in HTML
Buttons trigger actions like form submission or JavaScript events.

Example:
<button type="button" onclick="alert('Hello!')">Click Me</button>

Type Function

button Normal button

submit Submits a form

reset Resets form inputs

6. HTML Form Attributes


Forms collect user input.

Example:
<form action="/submit" method="post" target="_blank" autocomplete="on" novalidate>
<input type="text" name="username" required>
<input type="submit" value="Submit">
</form>

Attribute Purpose

action Where to send data


method HTTP method: GET or POST

target Where to display response (_blank, _self,


etc.)

autocomplete Enable or disable autocomplete

novalidate Bypass browser validation

enctype Encoding type (e.g., multipart/form-data)

7. Introduction to CSS
CSS (Cascading Style Sheets) styles your HTML content.

CSS Syntax:
selector {
property: value;
}

Example:
body {
background-color: lightblue;
font-family: Arial;
}

Ways to apply CSS:

1. Inline CSS
<h1 style="color:red;">Title</h1>

2. Internal CSS
<style>
p { color: green; }
</style>

3. External CSS
<link rel="stylesheet" href="style.css">

8. Summary Table
Feature Key Tags / Attributes / Styles

iframe <iframe src="..." />


table <table> <tr> <th> <td>

YouTube <iframe
src="https://www.youtube.com/embed/...">

button <button type="...">

forms action, method, target, autocomplete,


novalidate

CSS

<table border="1">

<tr>

<th>Name</th>

<th>Age</th>

<th>Country</th>

</tr>

<tr>

<td>Alice</td>

<td>25</td>

<td>Uganda</td>

</tr>

<tr>

<td>Bob</td>

<td>30</td>

<td>Kenya</td>

</tr>

</table>

You might also like