HTML Computer Code

HTML (HyperText Markup Language) is the standard language used to create and design webpages. It structures content on the web using various elements and tags. Here’s a basic overview:

Basic Structure of an HTML Document

An HTML document starts with a <!DOCTYPE html> declaration and is enclosed in <html> tags. Inside the <html> tags, there are two main sections: <head> and <body>.

<!DOCTYPE html>
<html>
<head>
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Key HTML Tags

<html>: The root element that contains the whole document.
<head>: Contains meta-information about the document, like the title and link to stylesheets.
<title>: Sets the title of the webpage (shown in the browser tab).
<body>: Contains the content of the webpage, including text, images, and other elements.
<h1> to <h6>: Header tags used to define headings. <h1> is the largest, and <h6> is the smallest.
<p>: Defines a paragraph.
<a>: Defines a hyperlink. Use the href attribute to specify the URL.
```
<a href="https://www.example.com">Visit Example.com</a>
```
<img>: Embeds an image. Use the src attribute to specify the image source and alt for alternative text.
```
<img src="image.jpg" alt="A description of the image">
```
<ul> and <ol>: Define unordered (bulleted) and ordered (numbered) lists, respectively. Use <li> for list items.
```
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
```

<table>: Defines a table. Use <tr> for table rows, <th> for table headers, and <td> for table data.

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

Example: Simple Webpage

Here’s a complete example of a simple webpage:

<!DOCTYPE html>
<html>
<head>
    <title>Simple Webpage</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is a simple HTML document.</p>
    <a href="https://www.openai.com">Learn more about OpenAI</a>
    <h2>My Favorite Fruits</h2>
    <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Cherry</li>
    </ul>
    <img src="https://via.placeholder.com/150" alt="Placeholder Image">
</body>
</html>

This example demonstrates the basics: a heading, a paragraph, a link, a list, and an image. HTML is quite versatile and can be extended with attributes and combined with CSS and JavaScript for more advanced functionality.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us