🧾 HTML Notes – Darul Madinah Junior
College Website Project
📘 1. Introduction to HTML
HTML (HyperText Markup Language) is the standard language used to create web pages.
It uses tags (like <p>, <h1>, <img>) to structure and display content on a webpage.
Each tag usually has an opening tag <tag> and a closing tag </tag>.
🏗️ 2. Basic Structure of an HTML Document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Darul Madinah</title>
</head>
<body>
<!-- Page content here -->
</body>
</html>
Explanation:
Part Description
<!DOCTYPE html> Declares the document type (HTML5).
<html>
The root element that contains the
entire web page.
Contains meta information (title,
<head> character set, etc.) not shown on the
page.
<meta charset="UTF-8">
Sets the character encoding for the
page.
<meta name="viewport"
content="width=device-width, initial-
Makes the page responsive on mobile
scale=1.0"> devices.
<title>
Sets the title shown on the browser
tab.
<body>
Contains all visible content of the
webpage.
🏫 3. Header Section Tags
Example:
<header>
<img src="[Link]" alt="Darul Madinah Logo" style="display: block;
margin: 0 auto;">
<h1><i><u>Darul Madinah Junior College <br> Masjid</u></i></h1>
<hr style="height: 10px; background-color: green; border: none;">
</header>
Explanation:
Tag Description
<header> Defines the top section of the webpage.
<img> Displays an image.
src The file path of the image.
alt Alternate text if the image doesn’t load.
<h1> to <h6> Headings – <h1> is largest, <h6> smallest.
<i> Italic text.
<u> Underlines text.
<br> Inserts a line break.
<hr> Creates a horizontal line (used for separation).
style Used for inline CSS styling.
📄 4. Paragraph and Text Formatting Tags
Example:
<p style="text-align: center;">
<b><em>Welcome to Darul Madinah College</em></b><br>
<strong>Darul Madinah Junior College is a Mumbai-based
institution...</strong>
</p>
Tag Function
<p> Defines a paragraph.
<b> Bold text.
<strong> Important text (bold + semantic meaning).
<em> Emphasized (italic) text.
<br> Line break.
style="text-align: center;" Centers the paragraph text.
📚 5. Lists in HTML
Ordered List (Numbered)
<ol>
<li>Science</li>
<li>Commerce</li>
</ol>
Displays a numbered list.
Unordered List (Bulleted)
<ul>
<li>Physics</li>
<li>Chemistry</li>
</ul>
Nested Lists
Lists can be placed inside another list to create subtopics.
📖 6. Description Lists
<dl>
<dt>Islamiyat</dt>
<dd>Our college also focuses on the religious aspect...</dd>
</dl>
Tag Description
<dl> Description list container.
<dt> Defines the term (like a word).
<dd> Defines the description of the term.
🏫 7. Tables
<table border="2">
<thead>
<tr>
<th>Campus</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mumbai</td>
<td>50, TantanPura Street...</td>
</tr>
</tbody>
</table>
Tag Function
<table> Creates a table.
border="2" Sets table border thickness.
<thead> Header section of a table.
<tbody> Main body of the table.
<tr> Table row.
<th> Table header cell (bold & centered).
<td> Table data cell.
🎬 8. Embedding Media (YouTube Video)
<iframe width="560" height="315"
src="[Link] allowfullscreen></iframe>
Attribute Description
<iframe> Embeds external content (like a video).
width / height Set video size.
src URL of the embedded video.
allowfullscreen Allows full-screen playback.
📝 9. Forms in HTML
<form>
<label>Enter your Name:</label>
<input type="text" required>
<input type="submit">
</form>
Common Form Elements:
Tag Description
<form> Container for input fields.
<label> Describes an input field.
<input> Used for user input.
type="text" Text input box.
type="number" Numeric input box.
type="email" Email input box.
type="radio" Radio button (choose one).
type="checkbox" Checkbox (choose many).
type="submit" Submit button.
required Makes the field mandatory.
placeholder Displays a hint inside input fields.
🧾 10. Footer Section
<footer style="text-align: center;">
<p>© 2025 Darul Madinah Junior College</p>
</footer>
Tag Description
<footer> Defines the bottom section of a page.
© HTML entity for the copyright symbol (©).
🎨 11. Inline CSS Styles Used
Property Function
text-align: center; Centers text.
background-color: green; Changes background color.
margin: 0 auto; Centers elements like images.
display: block; Makes inline elements behave like block elements.
border: none; Removes border.
height: 10px; Adjusts element height.