Basic HTML Tutorial
1. Basic Structure of an HTML Document
Every HTML document has a basic structure with essential tags. Here's a simple example:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first webpage using HTML.</p>
</body>
</html>
```
Explanation of the Structure:
- `<!DOCTYPE html>`: This declaration tells the browser to expect HTML5 code.
- `<html lang="en">`: The root element of the HTML document. `lang="en"` specifies the language of
the document (English).
- `<head>`: Contains meta-information about the document (such as its title, character set, and
viewport settings).
- `<meta charset="UTF-8">`: Specifies the character encoding for the document (UTF-8 supports
most characters).
- `<meta name="viewport" content="width=device-width, initial-scale=1.0">`: Ensures the page is
responsive on different screen sizes (especially mobile).
- `<title>`: Defines the title of the webpage, which appears in the browser tab.
- `<body>`: Contains the main content of the webpage (text, images, links, etc.).
- `<h1>`: Represents the main heading of the page. `<h1>` is typically the largest and most
important heading.
- `<p>`: Represents a paragraph of text.
2. Common HTML Elements:
Here are some other common elements you will often use in HTML:
- Headings:
- `<h1>`, `<h2>`, `<h3>`, etc., are used for headings of different levels, from `<h1>` (most
important) to `<h6>` (least important).
- Paragraphs:
- `<p>`: Defines a paragraph.
- Links:
- `<a href="URL">Text</a>`: Creates a hyperlink. The `href` attribute specifies the link's
destination.
```html
<a href="https://www.example.com">Visit Example</a>
```
- Images:
- `<img src="image.jpg" alt="description">`: Embeds an image. The `src` attribute specifies the
image file, and the `alt` attribute provides a description if the image cannot be displayed.
```html
<img src="image.jpg" alt="A beautiful landscape">
```
- Lists:
- **Unordered List** (bulleted list):
```html
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
```
- **Ordered List** (numbered list):
```html
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
```
- Divisions (for organizing content):
- `<div>`: A block-level element used to group other elements.
- `<span>`: An inline element used for small sections of text.
3. Basic HTML Example:
Here's a more complete HTML document demonstrating these elements:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Simple Webpage</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple webpage to demonstrate HTML.</p>
<h2>Unordered List</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>Introduction</li>
<li>Learning HTML</li>
<li>Building Webpages</li>
</ol>
<h2>Link Example</h2>
<p>Click <a href="https://www.w3schools.com">here</a> to learn more about HTML.</p>
<h2>Image Example</h2>
<img src="https://via.placeholder.com/150" alt="Placeholder Image">
<h2>Div Example</h2>
<div style="background-color: lightgray; padding: 20px;">
<p>This is a div container.</p>
</div>
</body>
</html>
```
4. More Tips:
- Always close your tags (for example, `<p>...</p>`, `<h1>...</h1>`).
- Use indentation to make the code more readable.
- Tags like `<meta>`, `<img>`, and others that don't have closing tags are self-closing.
