HTML Lang Notes
Uploaded by
mogaltejaswini13HTML Lang Notes
Uploaded by
mogaltejaswini13HTML Basics for Beginners
HTML (HyperText Markup Language) is the standard language for creating web pages.
Here's a simple explanation of how it works:
Basic Structure of an HTML Document
```html
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first paragraph.</p>
</body>
</html>
```
Key Components:
1. `<!DOCTYPE html>` - Declares this is an HTML5 document
2. `<html>` - Root element of the page
3. `<head>` - Contains meta information about the page
4. `<title>` - Sets the title shown in browser tabs
5. `<body>` - Contains the visible page content
Common HTML Tags
Text Formatting
- `<h1>` to `<h6>` - Headings (h1 is largest)
- `<p>` - Paragraph
- `<strong>` or `<b>` - Bold text
- `<em>` or `<i>` - Italic text
- `<br>` - Line break (self-closing)
Links and Images
```html
<a href="https://www.example.com">Visit Example</a>
<img src="image.jpg" alt="Description of image">
```
Lists
```html
<ul> <!-- Unordered list (bullets) -->
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol> <!-- Ordered list (numbers) -->
<li>First item</li>
<li>Second item</li>
</ol>
```
Tables
```html
<table>
<tr> <!-- Table row -->
<th>Header 1</th> <!-- Table header -->
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td> <!-- Table data -->
<td>Data 2</td>
</tr>
</table>
```
Forms
```html
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
```
HTML5 Semantic Elements
These help describe the meaning of content:
- `<header>` - Introductory content
- `<nav>` - Navigation links
- `<main>` - Main content
- `<article>` - Independent content
- `<section>` - Thematic grouping
- `<aside>` - Sidebar content
- `<footer>` - Footer content
Creating a Complete Page
```html
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
body { font-family: Arial, sans-serif; }
header { background-color: f0f0f0; padding: 20px; }
</style>
</head>
<body>
<header>
<h1>Welcome to My Site</h1>
<nav>
<a href="home">Home</a> |
<a href="about">About</a> |
<a href="contact">Contact</a>
</nav>
</header>
<main>
<article>
<h2>About Me</h2>
<p>I'm learning HTML to build websites!</p>
</article>
</main>
<footer>
<p>© 2023 My Website</p>
</footer>
</body>
</html>
```
Key Points to Remember
1. HTML uses angle brackets (`< >`) for tags
2. Most tags come in pairs (opening and closing)
3. Some tags are self-closing (`<img>`, `<br>`)
4. HTML provides structure, while CSS adds styling
5. Attributes provide additional information (e.g., `href` in `<a>`)