HTML + CSS

1.
Introduction to Web Development
The basic structure of an HTML document is as follows:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Basic Webpage</title>
</head>
<body>

</body>
</html>
<!DOCTYPE html>: Declares the document type as HTML5.
<html>: The root element that contains all the HTML content.
<head>: Contains meta-information about the page (like

character encoding, title, etc.).
<body>: Holds the visible content of the webpage.
2. HTML Elements, Tags, and Attributes
 HTML consists of elements represented by tags.
 Tags are usually in pairs like <tag></tag>.
 Attributes provide additional information about elements

(e.g., class, id, src, etc.).
Example of an image element with an attribute:

<img src="image.jpg" alt="Sample Image">
Basic HTML Tags
 Headings: HTML has six levels of headings (<h1> to <h6>),

with <h1> being the highest level.
html
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
 Paragraphs: Represented by the <p> tag.
html
<p>This is a paragraph of text.</p>
 Lists: HTML provides ordered (<ol>) and unordered
(<ul>) lists.
html

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>


<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
 Links: Use the <a> tag to create hyperlinks.
html
<a href="https://www.example.com">Visit Example</a>
 Images: Use the <img> tag to add images. It requires
the src attribute for the image URL and alt for a text
description.
html
<img src="image.jpg" alt="A description of the image">
4. Practical Task
Create a simple webpage using the tags mentioned above.

Here’s an example:
Practical: Create a Basic Webpage
Objective: Create a webpage with a heading, paragraph,

list, image, and link.
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>My First Webpage</title>
</head>
<body>


<h1>Welcome to My Webpage</h1>


<p>Hello! This is my first webpage created using HTML. I'm
excited to learn more about web development.</p>

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>


<img src="https://via.placeholder.com/150" alt="Placeholder
Image">


<p>Check out this <a href="https://www.example.com">awesome
website</a>!</p>
</body>
</html>
Explanation:
 <h1>: Displays the main heading "Welcome to My

Webpage."
 <p>: A paragraph introducing the content of the

page.
 <ul>: An unordered list of technologies (HTML, CSS,

JavaScript).
 <img>: Displays a placeholder image with a

description.
 <a>: A link directing to an external website.
 1. Basic Usage of <div>
The <div> tag in HTML is a generic container used to group together other
elements. It doesn’t add any specific styling or behavior by default but is
commonly used in conjunction with CSS to style sections of a webpage or to
structure content logically.
 You can use the <div> tag to wrap content like text, images, or other
HTML elements, often to apply styles, organize layout, or group content for
interaction (e.g., with JavaScript).
Why Use <div>?
 It helps structure content on a webpage.

 It's useful for applying styles (like background color, borders) or layout
controls (like Flexbox, Grid).
 It enables easy manipulation through CSS or JavaScript.
<div>
<h2>This is a section of content</h2>
<p>This paragraph is inside a div container. </p>
</div>
1. HTML Tables
Tables are used to display tabular data, i.e., data organized into rows and columns.
Basic Structure of an HTML Table
An HTML table is defined with the <table> element and structured using:
 <tr>: Table row

 <th>: Table header cell (for headings)
 <td>: Table data cell (for data)
Example of a Simple Table:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Table Example</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Occupation</th>
</tr>
<tr>
<td>Alice</td>
<td>28</td>
<td>Engineer</td>
</tr>
<tr>
<td>Bob</td>
<td>35</td>
<td>Designer</td>
</tr>
</table>
</body>
</html>
Explanation:
 <table border="1">: Creates a table with borders

around the cells.
 <th>: Represents table headers (Name, Age,

Occupation).
 <td>: Represents the data for each person.
Adding More Features to Tables:
You can also use the following attributes:
 colspan: To make a cell span across multiple columns.
 rowspan: To make a cell span across multiple rows.

<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Occupation</th>
</tr>
<tr>
<td colspan="3">This row spans across all three columns</td>
</tr>
<tr>
<td>Alice</td>
<td>28</td>
<td>Engineer</td>
</tr>
</table>
2. HTML Forms
Forms allow users to input data and submit it to

a server for processing. Forms contain a variety
of input elements like text fields, checkboxes,
radio buttons, dropdowns, and buttons.
Basic Structure of an HTML Form
 <form>: The main container for all form elements.
 <input>: Used to create fields like text inputs,

buttons, etc.
 <label>: Describes an input field for accessibility.
 <textarea>: For multi-line text input.

 <select> and <option>: For dropdown menus.
<form action="/submit-form" method="POST">

<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>


<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>


<p>Gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>


<input type="checkbox" id="subscribe" name="subscribe">
<label for="subscribe">Subscribe to newsletter</label><br><br>


<input type="submit" value="Submit">
</form>
Sure! Let's cover tables and forms in HTML, both of which are essential for
structuring data and gathering user input, respectively.
1. HTML Tables
Tables are used to display tabular data, i.e., data organized into rows and columns.
Basic Structure of an HTML Table
An HTML table is defined with the <table> element and structured using:
 <tr>: Table row

 <th>: Table header cell (for headings)
 <td>: Table data cell (for data)
Example of a Simple Table:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Table Example</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Occupation</th>
</tr>
<tr>
<td>Alice</td>
<td>28</td>
<td>Engineer</td>
</tr>
<tr>
<td>Bob</td>
<td>35</td>
<td>Designer</td>
</tr>
</table>
</body>
</html>
Explanation:
 <table border="1">: Creates a table with borders around the cells.

 <th>: Represents table headers (Name, Age, Occupation).
 <td>: Represents the data for each person.
Adding More Features to Tables:
You can also use the following attributes:
 colspan: To make a cell span across multiple columns.

 rowspan: To make a cell span across multiple rows.
Example with colspan:
html
Copy code
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Occupation</th>
</tr>
<tr>
<td colspan="3">This row spans across all three columns</td>
</tr>
<tr>
<td>Alice</td>
<td>28</td>
<td>Engineer</td>
</tr>
</table>
2. HTML Forms
Forms allow users to input data and submit it to a server for processing. Forms
contain a variety of input elements like text fields, checkboxes, radio buttons,
dropdowns, and buttons.
Basic Structure of an HTML Form
 <form>: The main container for all form elements.

 <input>: Used to create fields like text inputs, buttons, etc.
 <label>: Describes an input field for accessibility.
 <textarea>: For multi-line text input.
 <select> and <option>: For dropdown menus.
Example of a Simple Form:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Form Example</title>
</head>
<body>
<form action="/submit-form" method="POST">


<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>


<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>


<p>Gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>


<input type="checkbox" id="subscribe" name="subscribe">
<label for="subscribe">Subscribe to newsletter</label><br><br>


<input type="submit" value="Submit">
</form>
</body>
</html>
Explanation:
 <form action="/submit-form" method="POST">: The form's data will
be sent to the /submit-form URL via a POST request.
 <input type="text">: Creates a text field.
 <input type="email">: Creates a field specifically for email input.
 <input type="radio">: Creates a set of radio buttons.
 <input type="checkbox">: Creates a checkbox.
 <input type="submit">: A submit button to send the form data.
Semantic Elements (HTML5)
Semantic HTML elements provide meaning to the structure of the content.
Introduce elements like:
<header>: Represents the header of a document or section.
<footer>: Represents the footer of a document or section.
<article>: Represents self-contained content.
<section>: Defines sections in a document.
Example of Semantic Elements:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Semantic HTML Example</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h2>Article Title</h2>
<p>This is an article about web development. Semantic HTML
helps to structure the content properly.</p>
</article>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>

HTML + CSS

Uploaded by

HTML + CSS

Uploaded by

1.

Introduction to Web Development

The basic structure of an HTML document is as follows:

<head>: Contains meta-information about the page (like

<body>: Holds the visible content of the webpage.

2. HTML Elements, Tags, and Attributes

 HTML consists of elements represented by tags.

 Tags are usually in pairs like <tag></tag>.

 Attributes provide additional information about elements

Example of an image element with an attribute:

 Headings: HTML has six levels of headings (<h1> to <h6>),

Create a simple webpage using the tags mentioned above.

Practical: Create a Basic Webpage

Objective: Create a webpage with a heading, paragraph,

 <h1>: Displays the main heading "Welcome to My

 <p>: A paragraph introducing the content of the

 <ul>: An unordered list of technologies (HTML, CSS,

 <img>: Displays a placeholder image with a

 <a>: A link directing to an external website.

 1. Basic Usage of <div>

Why Use <div>?

 It helps structure content on a webpage.

Basic Structure of an HTML Table

 <tr>: Table row

Example of a Simple Table:

 <table border="1">: Creates a table with borders

 <th>: Represents table headers (Name, Age,

 <td>: Represents the data for each person.

Adding More Features to Tables:

You can also use the following attributes:

 colspan: To make a cell span across multiple columns.

 rowspan: To make a cell span across multiple rows.

Forms allow users to input data and submit it to

Basic Structure of an HTML Form

 <form>: The main container for all form elements.

 <input>: Used to create fields like text inputs,

 <label>: Describes an input field for accessibility.

 <textarea>: For multi-line text input.

Basic Structure of an HTML Table

 <tr>: Table row

Example of a Simple Table:

 <table border="1">: Creates a table with borders around the cells.

Adding More Features to Tables:

You can also use the following attributes:

 colspan: To make a cell span across multiple columns.

Example with colspan:

Basic Structure of an HTML Form

 <form>: The main container for all form elements.

Example of a Simple Form:

<form action="/submit-form" method="POST">

Semantic Elements (HTML5)

Semantic HTML elements provide meaning to the structure of the content.

Introduce elements like:

<header>: Represents the header of a document or section.

<footer>: Represents the footer of a document or section.

<article>: Represents self-contained content.

<section>: Defines sections in a document.

Example of Semantic Elements:

You might also like