share your problems,

solve your problems.

Lesson 1

Introduction to HTML

What is HTML? HTML (Hypertext Markup Language) is the standard language for creating web pages. It tells the browser how to display text, images, links, and other content on a webpage.

Basic Structure of an HTML Document

An HTML document is made up of elements. Here's a simple structure:

<!DOCTYPE html>

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>Welcome to My Web Page!</h1>

<p>This is a paragraph of text on my first webpage.</p>

</body>

</html>

Explanation:

<!DOCTYPE html>: This tells the browser that the document is written in HTML5.

<html>: This is the root element that contains all the HTML content.

<head>: Contains meta-information about the webpage, like the title, which is shown in the browser tab.

<title>: The title of the page, which appears in the browser tab.

<body>: Contains the visible content of the webpage, like headings, paragraphs, images, etc.

<h1>: A heading element (the largest heading).

<p>: A paragraph element.

Lesson 2: HTML Elements and Tags

HTML uses tags to define elements. Tags are written inside angle brackets (< >).

Some common HTML tags:

<h1> to <h6>: Headings, where <h1> is the largest and <h6> is the smallest.

<p>: Paragraph.

<a>: Anchor tag, used for links.

<img>: Image tag, used to display images.

image or place one in the same directory as your HTML file).

Lesson 2

HTML Attributes

HTML elements can have attributes. Attributes provide additional information about an element and are written inside the opening tag.

Common HTML Attributes:

id: Specifies a unique identifier for an element.

class: Specifies one or more classes for an element, which can be used for styling.

href: Specifies the URL for a link (only used in <a>).

src: Specifies the source of an image (only used in <img>).

alt: Provides alternative text for an image (only used in <img>).

style: Inline CSS to style an element.

Example with Attributes:

<!DOCTYPE html>

<html>

<head>

<title>HTML Attributes Example</title>

</head>

<body>

<h1 id="main-heading">Welcome to My Web Page!</h1>

<p class="intro">This is an introductory paragraph.</p>

<a href="https://www.example.com" target="_blank">Visit Example</a>

</body>

</html>

Explanation:

id="main-heading": The id attribute provides a unique identifier for the element. You can reference it with JavaScript or CSS.

class="intro": The class attribute allows you to group elements and apply the same style to multiple elements.

href="https://www.example.com": The href attribute specifies the destination URL for the link.

target="_blank": This attribute makes the link open in a new tab.

style="border: 2px solid black;": The style attribute applies inline CSS to the image

Lesson 3

Lists in HTML

HTML provides two types of lists:

Ordered Lists (<ol>) — Lists with numbers.

Unordered Lists (<ul>) — Lists with bullet points.

Ordered List Example:

Unordered List Example:

html

Copy code

<ul> <li>Apple</li> <li>Banana</li> <li>Cherry</li> </ul>

Explanation:

<ol>: Creates an ordered list (with numbers).

<ul>: Creates an unordered list (with bullets).

<li>: Each list item is wrapped in a <li> tag.

Lesson 4

Forms in HTML

HTML forms are essential for collecting user input and interacting with web applications. Forms allow users to enter data, which can be sent to a server for processing.

Key Form Elements

<form>: Defines the form and can include attributes like:

action: URL where the form data will be sent.

method: HTTP method used to send the data (GET or POST).

Input Elements:

<input>: Used for various types of user input.

<textarea>: Multi-line text input.

<select>: Drop-down menu.

<button>: Button for submission or interaction.

Basic Form Example

<!DOCTYPE html>

<html>

<head>

<title>Basic Form</title>

</head>

<body>

</form> </body> </html>

Input Types

The <input> element supports various type attributes:

text: Single-line text.

password: Hides the entered text.

email: Ensures email formatting.

number: Accepts numeric values.

radio: Radio buttons (choose one option).

checkbox: Checkboxes (select multiple options).

date: Date picker

Key Points to Remember:

The <form> element is the container for input elements.

Use different input types to ensure proper data validation.

Use <label> to make forms more accessible and user-friendly.

The action and method attributes define how the form data will be sent.

Lessons are posted daily .

Come back tomorrow for more lessons !!