HTML (HyperText Markup Language) is the foundation of web development. It provides the basic structure of web pages, allowing browsers to interpret and display content correctly. In this tutorial, we will cover the basics of HTML and build a simple web page.
What is HTML?
HTML is a markup language used to create web pages. It consists of elements enclosed in angle brackets (`<>`). These elements define the structure and content of a webpage.
Basic Structure of an HTML Document
An HTML document consists of:
`
<!DOCTYPE html>` - Declares the document type as HTML5.`
<html>` - The root element of an HTML page.`
<head>` - Contains meta information about the document.`
<title>` - Defines the title of the webpage.`
<body>` - Contains the visible content of the page.
Here's an example of a basic HTML document:
```html
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple HTML page.</p>
</body>
</html>
```
Viewing Your HTML Page in a Browser
Once you've created your HTML file, follow these steps to view it in a web browser:
1. Save the file with a `.html` extension, such as `index.html`. 2. Locate the file on your computer. 3. Right-click the file and select **Open With** > **Your Preferred Browser** (e.g., Chrome, Firefox, Edge, or Safari). 4. Alternatively, you can drag and drop the file into an open browser window.
This will render your webpage in the browser, allowing you to see how it looks and functions.
## HTML Elements
HTML elements consist of an opening tag, content, and a closing tag.
Example:
```html
<p>This is a paragraph.</p>
```
Common HTML Elements
1. Headings - `<h1>` to `<h6>` define headings, with `<h1>` being the largest.
```html
<h1>Main Heading</h1>
<h2>Subheading</h2>
```
2. **Paragraphs** - The `<p>` tag defines a paragraph.
```html
<p>This is a paragraph of text.</p>
```
3. **Links** - The `<a>` tag creates hyperlinks.
```html
<a href="https://www.example.com">Visit Example</a>
```
4. **Images** - The `<img>` tag embeds images.
```html
<img src="image.jpg" alt="A sample image">
```
5. **Lists** - Ordered (`<ol>`) and unordered (`<ul>`) lists.
```html
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
```
6. **Tables** - The `<table>` tag creates tables.
```html
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
</table>
```
7. **Forms** - Used to collect user input.
```html
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
```
## Building a Simple HTML Page
Now, let's create a simple webpage that includes headings, paragraphs, images, links, and a form.
```html <!DOCTYPE html> <html> <head> <title>My Simple Web Page</title> </head> <body> <h1>Welcome to My Website</h1> <p>This is a simple webpage created using HTML.</p> <h2>About Me</h2> <p>I am learning HTML and building my first website.</p> <h2>My Favorite Websites</h2> <ul> <li><a href="https://www.example.com">Example</a></li> <li><a href="https://www.wikipedia.org">Wikipedia</a></li> </ul> <h2>Contact Me</h2> <form> <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> ```
## Conclusion
This tutorial covered the basics of HTML, including its structure, common elements, and how to build a simple webpage. With this foundation, you can start experimenting and learning more about web development. Happy coding.