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.

Disclaimer About Us