Introduction
HTML (HyperText Markup Language) is the standard markup language used to create web pages. It defines the structure of a webpage using tags like ,<h1>, <b> ,<div> etc.
🖥️ How to Run and Create an HTML File
- Open any text editor like Notepad (Windows), VS Code, or Sublime Text.
- Create a new file and save it with .html extension — for example: index.html
- Write HTML code inside this file.
- To view it, just double-click the file or open it in a browser (like Chrome or Firefox).
🧩 HTML vs CSS vs JS vs Frameworks
HTML → Structure of the webpage
CSS → Styling of the webpage
JavaScript → Adds interaction/logic to the webpage
Frameworks → Built on top of HTML/CSS/JS to simplify development (like React, Angular)
💬 How to Write Comments in HTML
Use to write comments.
Comments are not shown on the page but help explain code or leave notes.
Example:
🧱 Basic HTML Structure
<!DOCTYPE html>
<html>
<head>
<title>Codingboot firt page</title>
</head>
<body>
<h1>Hello, HTML World!!</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:
Hello, HTML World!!
This is a paragraph.
🔤 Text Formatting Tags
<b>Bold</b> <br>
<strong>Strong</strong><br>
<i>Italic</i><br>
<em>Emphasized</em><br>
<mark>Highlighted</mark><br>
<small>Small Text</small><br>
<del>Deleted</del><br>
<ins>Inserted</ins><br>
Output:
Bold
Strong
Italic
Emphasized
Highlighted
Small TextDeleted
Inserted
📋 Lists in HTML
<ul>
<li>Java</li>
<li>PHP</li>
</ul>
<ol type="i">
<li>Spring Boot</li>
<li>Laravel
<ul type="1">
<li>Eloquent</li>
<li>Blade</li>
</ul>
</li>
</ol>Output:
🔗 Link and Image
<a href="https://example.com">Visit Example</a>
<img src="https://via.placeholder.com/100" alt="Sample Image">
Output:
Visit Example
(Displays a sample image)
🧭 HTML Table Basics
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Rohit</td>
<td>25</td>
</tr>
</table>
Output:
🧾 Advanced Table (With rowspan, colspan)
<table border="1">
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<td>Email</td>
<td>Phone</td>
</tr>
<tr>
<td>Rohit</td>
<td>Rothi@gmail.com</td>
<td>1234567890</td>
</tr>
</table>
Output:
🧾 Form Using Table Layout (Login Example)
<form>
<table border="1">
<tr>
<td>Username:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password"></td>
</tr>
<tr>
<td colspan="2" align="center"><button>Login</button></td>
</tr>
</table>
</form>Output Preview:
This creates a basic login form where labels and fields are aligned using a table.
🧾 Form Example: Registration Page
<form>
<table border="0" cellspacing="0">
<tr>
<td>First Name:</td>
<td><input type="text" name="first_name"></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="last_name"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td>Address:</td>
<td><textarea name="address"></textarea></td>
</tr>
<tr>
<td>City:</td>
<td><input type="text" name="city"></td>
</tr>
<tr>
<td></td>
<td><button type="submit">Register</button></td>
</tr>
</table>
</form>Output Preview:
🧱 Block vs Inline Elements
<div>This is a block element (div)</div>
<span>This is an inline element (span)</span>
Explanation:
- is inline
🎛️ More Semantic Tags
<header>Header Area</header>
<nav>Menu</nav>
<main>Main Content</main>
<footer>Footer Info</footer>
🎞️ Marquee Tag (Scrolling Text)
<marquee>Welcome to HTML Tutorial!</marquee>
Output:
📢 Welcome to HTML Tutorial! (scrolls across the screen)
⚠️ Note: is outdated and not supported in HTML5.
✅ Alternative: Use CSS animations for scrolling effects.
✅ Summary
- Structure your webpage using HTML tags
- Use with rowspan and colspan for complex forms
- Use semantic tags to improve clarity
- Avoid outdated tags like in modern development
Leave a Reply