Scripting Language – HTML
[Link]
HTML Basics & Structure
Complete Guide to HTML Fundamentals
📝 Text Formatting & Links
Images, Lists & Tables
📋 Forms in HTML
[Link]
What is HTML?
HTML stands for:
• HyperText
• Markup
• Language
HTML is the standard markup language for creating web pages. It
describes the structure and content of web documents using
elements and tags.
Key Features:
• Platform independent
• Easy to learn and use
• Supported by all browsers
• Foundation of web development
[Link]
Basic HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
DOCTYPE: Declares document type
html: Root element of the page
head: Contains metadata
body: Contains visible content
[Link]
HTML Elements and Tags
Tag Structure:
<tagname>Content</tagname>
Most HTML elements have an opening tag and closing tag with content in
between.
Self-closing tags:
<br /> <img /> <hr />
Common Elements:
<h1>Heading 1</h1> <h2>Heading 2</h2> <p>Paragraph</p>
<div>Division</div> <span>Inline text<
[Link]
HTML Attributes
Attributes provide additional information about HTML elements
and are always specified in the opening tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Attributes Example</title>
</head>
<body>
<h1 id="main-title" class="header">Welcome</h1>
<p style="color: blue;">This is a blue paragraph.</p>
<div class="container" id="content">
Content area
</div>
</body>
</html>
Common attributes: id, class, style, title, lang
[Link]
Text Formatting Tags
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Text Formatting</title>
</head>
<body>
<p><b>Bold text</b></p>
<p><i>Italic text</i></p>
<p><u>Underlined text</u></p>
<p><strong>Important text</strong></p>
<p><em>Emphasized text</em></p>
<p><small>Smaller text</small></p>
<p><mark>Highlighted text</mark></p>
</body>
</html>
[Link]
Creating Links
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML Links</title>
</head>
<body>
<h1>Different Types of Links</h1>
<!-- External link -->
<a href="[Link] Google</a>
<br><br>
<!-- Internal link -->
<a href="#section1">Go to Section 1</a>
<br><br>
[Link]
Creating Links
<!-- Email link -->
<a href="[Link] Email</a>
<br><br>
<!-- Download link -->
<a href="[Link]" download>Download PDF</a>
<!-- Internal section target -->
<h2 id="section1">Section 1</h2>
<p>This is the section you jumped to.</p>
</body>
</html>
[Link]
Working with Images
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML Images</title>
<style>
body {
text-align: center; /* Aligns all inline elements including text and images */
}
img {
margin: 10px 0; /* Adds spacing between images */
}
</style>
</head>
Important: Always include the alt attribute for accessibility!
[Link]
Working with Images
<body>
<h1>Image Examples</h1>
<!-- Basic image -->
<img src="[Link]"
alt="Description" />
<!-- Image with dimensions -->
<img src="[Link]" alt="Photo"
width="300" height="200" />
<!-- Responsive image -->
<img src="[Link]" alt="Banner"
style="width: 100%;" />
</body>
</html> [Link]
Working with Images
Required vs Optional Attributes:
• src - ✅ Required: Path to image file
• alt - ✅ Required: Text for screen readers
• width/height - Optional: Size control
• title - Optional: Tooltip on hover
[Link]
HTML Lists
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML Lists</title>
<style>
body {
text-align: center; /* Aligns headings */
}
ul, ol {
display: inline-block; /* Allows lists to be centered */
text-align: left; /* Keeps list items aligned properly */
}
</style>
</head>
[Link]
HTML Lists
<body>
<h2>Unordered List</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</body>
</html>
[Link]
HTML Lists
• <dl> - Description List container
• <dt> - Description Term (what you're defining)
• <dd> - Description Definition (the explanation)
Use Case:
Perfect for glossaries, FAQs, and term definitions.
[Link]
HTML Tables - Basic Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML Tables</title>
<style>
table {
border-collapse: collapse;
margin: 20px auto; /* Center table horizontally */
text-align: center; /* Center text inside cells */
}
th, td {
padding: 10px;
}
th {
background-color: #f2f2f2;
}
</style>
[Link]
HTML Tables - Basic Structure
</head>
<body>
<h2 style="text-align:center;">Student Information</h2>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
[Link]
HTML Tables - Basic Structure
<td>Alice</td>
<td>22</td>
<td>London</td>
</tr>
</tbody>
</table>
</body>
</html>
NOTE:
• <table> - Table container
• <tr> - Table row
• <th> - Table header cell
• <td> - Table data cell
[Link]
HTML Forms - Basic Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML Forms</title>
<style>
form {
width: 300px;
margin: 50px auto; /* center form */
padding: 15px;
border: 1px solid #ccc;
border-radius: 8px;
background: #f9f9f9;
}
label {
display: inline-block;
width: 80px; /* align labels */
margin-bottom: 10px; [Link]
}
HTML Forms - Basic Structure
input[type="text"],
input[type="email"] {
width: 180px;
padding: 5px;
margin-bottom: 10px;
}
input[type="submit"] {
margin-left: 85px; /* align with input fields */
padding: 6px 15px;
}
</style>
</head>
[Link]
HTML Forms - Basic Structure
<body>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" /><br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
action: where to send form data | method: how to send data
(GET/POST)
[Link]
Form Input Types
Input Type Purpose Example
text Single line text <input type="text">
<input
password Password field
type="password">
<input
email Email address
type="email">
<input
number Numeric input
type="number">
<input
checkbox Multiple choice
type="checkbox">
<input
radio Single choice
type="radio">
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Form Input Types</title>
</head>
<body>
<form>
<table>
<tr>
<td>Text:</td>
<td><input type="text" placeholder="Text input" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" placeholder="Password" /></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" placeholder="Email" /></td>
</tr>
<tr>
<td>Number:</td>
<td><input type="number" placeholder="Number" /></td>
</tr>
<tr>
<td>Date:</td>
<td><input type="date" /></td>
</tr>
<tr>
<td>Checkbox:</td>
<td><input type="checkbox" /> Checkbox</td>
</tr>
<tr>
<td>Radio:</td>
<td><input type="radio" name="option" /> Radio</td>
</tr>
<tr>
<td>File Upload:</td>
<td><input type="file" /></td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="submit" value="Submit" />
</td>
</tr>
Summary
What We've Learned:
✅ HTML Structure: DOCTYPE, html, head, body elements
✅ Text Formatting: Bold, italic, emphasis tags
✅ Links: External, internal, email, and download links
✅ Images: Adding images with proper attributes
✅ Lists: Ordered and unordered lists
✅ Tables: Basic and advanced table structures
✅ Forms: Input types, form elements, and validation
[Link]