Scribd
Upload
26 views6 pages

Namaste HTML Lec 2

This document provides a comprehensive overview of fundamental HTML concepts, including the basic structure of an HTML page, headings, paragraphs, lists, input fields, and hyperlinks. It includes examples of each element and explains their usage in web development. Additionally, it serves as a cheat sheet for quick reference on HTML tags and their functions.

Uploaded by

vishaltiwari230996
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
26 views6 pages

Namaste HTML Lec 2

This document provides a comprehensive overview of fundamental HTML concepts, including the basic structure of an HTML page, headings, paragraphs, lists, input fields, and hyperlinks. It includes examples of each element and explains their usage in web development. Additionally, it serves as a cheat sheet for quick reference on HTML tags and their functions.

Uploaded by

vishaltiwari230996
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/ 6

📌 HTML Basics - Quick Notes

This note covers all fundamental HTML concepts we have learned so far, including headings,
paragraphs, formatting, lists, inputs, and links.

1 HTML Structure
1️⃣
Every HTML page follows this basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
</head>
<body>

<!-- Content goes here -->

</body>
</html>

● <!DOCTYPE html> → Declares this is an HTML5 document.


● <html> → The root element of the page.
● <head> → Contains metadata (title, styles, scripts).
● <body> → The main content of the webpage.

2️⃣Headings (<h1> to <h6>)


Used to define headings of different sizes.

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>

📌 <h1> is the largest, <h6> is the smallest.


3️⃣Paragraphs and Formatting
● <p> → Defines a paragraph.

Text Formatting:
<b>Bold</b>, <i>Italic</i>, <u>Underline</u>, <strong>Strong</strong>,
<em>Emphasized</em>, <small>Small text</small>, <mark>Highlighted</mark>

4️⃣Lists in HTML
📌 Unordered List (<ul>) - Uses bullet points.

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

📌 Ordered List (<ol>) - Uses numbers.

<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>

5️⃣Input Fields & Forms


Used to collect user data.

<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name">

<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter your email">
<label for="password">Password:</label>
<input type="password" id="password">

<input type="submit" value="Submit">


</form>

📌 Common Input Types:

● Text: <input type="text">


● Email: <input type="email">
● Password: <input type="password">
● Number: <input type="number">
● Date: <input type="date">
● Checkbox: <input type="checkbox">
● Radio Button: <input type="radio">
● File Upload: <input type="file">

✅ id vs name:

● id="name" → Unique identifier, used in JavaScript & labels.


● name="name" → Used to send form data to a server.

6️⃣Hyperlinks (<a> Tag)


Used to link to another webpage.

<a href="https://www.google.com">Visit Google</a>

📌 Open in new tab → target="_blank"

<a href="https://www.google.com" target="_blank">Open Google</a>

📌 Link to another page on the same website:

<a href="about.html">Go to About Page</a>

📌 Jump to a section within the same page:

<a href="#contact">Jump to Contact</a>


<h2 id="contact">Contact Us</h2>

📌 Use an image as a link:

<a href="https://www.google.com">
<img src="google-logo.png" alt="Google">
</a>

📌 Email & Phone Links:

<a href="mailto:[email protected]">Send an Email</a>


<a href="tel:+1234567890">Call Us</a>

7️⃣Full Example - Webpage with All Concepts


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Basics</title>
</head>
<body>

<h1>Welcome to My Webpage</h1>

<h2>About Me</h2>
<p>Hello! My name is <b>John</b> and I love <i>coding</i>.</p>

<h2>My Favorite Fruits</h2>


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

<h2>Steps to Learn HTML</h2>


<ol>
<li>Learn basic tags</li>
<li>Practice by creating pages</li>
<li>Build projects</li>
</ol>

<h2>Contact Me</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name">
<br><br>

<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter your email">
<br><br>

<input type="submit" value="Submit">


</form>

<p><a href="https://www.google.com" target="_blank">Search on Google</a></p>

</body>
</html>

🎯 Summary
Feature Tag Example

Headings <h1> to <h6> <h1>Heading</h1>

Paragraphs <p> <p>This is a paragraph</p>

Text <b>, <i>, <u>, <strong>, <em>, <b>Bold</b>


Formatting <small>, <mark>

Lists <ul>, <ol>, <li> <ul><li>Item</li></ul>

Forms <form>, <input> <input type="text">

Links <a> <a href="page.html">Click


Here</a>

Email Link <a <a


href="mailto:email@example. href="mailto:[email protected]">Em
com"> ail</a>

Phone Link <a href="tel:+1234567890"> <a


href="tel:1234567890">Call</a>

✅ Now you have a complete cheat sheet for HTML basics! 🚀💻

You might also like