GoBrain

Share

HTML Tutorial for Beginners

By gobrain

Jul 12th, 2024

In the world of websites, HTML, or HyperText Markup Language is the main language. It's the backbone of every website you visit since it was created by Tim Berners-Lee in 1989.

If you want to become a web developer, HTML is the starting point where your journey begins. If you are ready, let's dive into it by learning the basics, understanding its structure, and implementing some examples.

So, what exactly is HTML?

What is HTML?

To put it simply, HTML instructs web browsers on what to display on a page, such as text, images, or links.

Imagine HTML as the skeleton of a web page. It defines the different sections and elements that make up the page, but keep in mind, it doesn't determine how the page looks visually.

History Of HTML

HTML has a rich history dating back to Tim Berners-Lee's vision in the 1980s. From humble beginnings with 18 core elements in 1991, it evolved through versions such as the widely used 2.0 and the ill-fated 3.0, before finally stabilizing with the popular 4.01 in 1999. Then, HTML 5 quickly came to market. Multimedia, canvas and accessibility come to the fore on the 2008 stage.

HTML Main Structure

HTML documents are made up of elements, which are written using tags. Tags are enclosed in angle brackets, e.g., <tagname>. Most elements have an opening tag <tagname> and a closing tag </tagname>

Tags can have attributes that provide additional information about an element. For example, an image tag <img> might have attributes like src (source) and alt (alternative text).

A HTML document is composed of a root <html> tag, and two sections, <head> and <body> tag.

The <html> tag defines the document as a HTML file, while the <head> tag contains information related to the current page, such as the document's title, and the <body> tag contains the elements that will be displayed on the page.

Here is a simple HTML structure looks like:

<html lang="en">
<head>
    <title>My Web Page</title>
</head>
<body>
    <!-- Elements... -->
</body>
</html>

HTML Elements

A browser understand what to display on page through elements which is defined a open and close tag. HTML offers a wide variety of elements that can be used to create a website, but some of the most commonly used elements in a page are links, images, text, form, and container elements.

An element can also have certain attributes that control its behavior. For example, a <a> link tag can have an href attribute, which tells the browser where to go when the link is clicked.

Now let's see what HTML elements are.

Heading

Heading elements is defined as h1, h2... h6 according to the importance of its content. For example, the <h1> tag can be used for title while <h2> and <h3> tags can be used for subtitles.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Headings</title>
</head>
<body>
    <h1>Main Title</h1>
    
    <h2>Subheading 1</h2>
    <h2>Subheading 2</h2>
    
    <h3>Sub-subheading 1</h3>
    <!-- and so on... -->

</body>
</html>

Paragraph

A paragraph element is defined as <p\> tag. As its name says, it is used for text content to display on page.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Paragraph</title>
</head>
<body>
   <p>My Paragraph</p>
</body>
</html>

Image

The <img> tag defines an image element, which is used to display images on a page. Unlike most elements, which are defined using both an opening and closing tag, an image tag can be defined using only one tag, as shown below.

As for its attributes, the two most commonly used attributes for an image tag are src and alt. The src attribute specifies the source of the image, while the alt attribute provides alternative text for the image.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Images</title>
</head>
<body>
  <p>My Image</p>
 <img src="image.jpg" alt="Description of the image">
</body>
</html>

Link

The <a> tag, which stands for link, is used to create a hyperlink to either an internal or external page. The <a> tag, used with its href attribute, specifies the URL or route of the link.

A hyperlink, defined using the <a> tag, can include text or an image, which when clicked by a user, redirects them to another page.

<a href="https://www.example.com">Visit Example.com</a>

<a href="https://www.example.com">
    <img src="example.jpg" alt="Example Image">
</a>

Div

The <div> element is a container that is used for grouping elements together. With the help of <div> element, using CSS and JavaScript, the appearance or behavior of grouped elements can be specifically altered.

<div>
    <h2>Section 1</h2>
    <p>This is the content of section 1.</p>
</div>

<div>
    <h2>Section 2</h2>
    <p>This is the content of section 2.</p>
</div>

Styling The HTML Web Page With CSS

Each element in a HTML document has a default appearance, including size, color, placement, etc. This visual appearance of elements can be modified using CSS (Cascading Style Sheets).

To style elements in an HTML document, a style element must be included, which can be done in three ways: as an external stylesheet, an internal stylesheet, or inline styles.

External styling:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document Title</title>
</head>
<body>
    <!-- Content of the HTML document -->
</body>
</html>

Internal styling:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* CSS rules go here */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f0f0;
        }
    </style>
    <title>Document Title</title>
</head>
<body>
    <!-- Content of the HTML document -->
</body>
</html>

In-line Styling:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
</head>
<body>
    <p style="color: blue; font-size: 18px;">This is a blue and larger text.</p>
</body>
</html>

Adding Functionality To The HTML Web Page With JavaScript

In addition to modifying the appearance of elements, functionality can also be added to them using JavaScript, a programming language.

To achieve that, you need to also include a javascript code to your HTML file which can also can be done in two ways: as an external script and internal script.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
        <!-- External Scripts -->
    <script src="script.js"></script>
</head>
<body>

        <!-- Internal Scripts -->
    <script>
        // JavaScript code goes here
        function greet() {
            alert('Hello, World!');
        }
    </script>
</body>
</html>

Conclusion

In conclusion, HTML, which stands for Hypertext Markup Language, is the foundation of every webpage you see on the internet. It's a coding language that provides the basic structure and content for webpages, telling web browsers how to display text, images, videos, and other elements. Think of it as the skeleton of a webpage, holding everything together and giving it shape.

This guide has discussed the basics of HTML for beginners.

Thank you for reading.