So you are hoping to make money online. Let’s dive together.
Fun fact: all websites use HTML — even this one. It’s a fundamental part of every web developer’s toolkit. HTML provides the content that gives web pages structure, by using elements and tags, you can add text, images, videos, forms, and more. Learning HTML basics is an important first step in your web development journey and an essential skill for front- and back-end developers.
Your first HTML Page
Let’s start by creating a simple HTML page. An HTML page has the following basic layout:
<!DOCTYPE html>
<html>
<head>
<!-- head definitions go here -->
</head>
<body>
<!-- the content goes here -->
</body>
</html>
Let’s start by creating a simple page that contains the phrase “Hello, World!” in the body. The page will also have a title – that thing that shows up in the title of the tab in your browser. The <title> element defines the title of the HTML page.
The <!DOCTYPE html> tag defines the document type that the browser is going to render. This is used for legacy reasons. If you want to get to the latest version of HTML (HTML5) then it’s recommended to use this tag.
The <p> element defines a “paragraph”, a block of text that has a small amount of spacing in between its top and bottom.
Notice how the tags have a start tag and an end tag denoted with a slash (</p>). Everything in between is the content of the tag. The content of a tag can usually have additional HTML tags within them.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p>This is an example of a simple HTML page with one paragraph.</p>
</body>
</html>
Basic Elements
The basic elements of an HTML page are:
- A text header, denoted using the <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tags.
- A paragraph, denoted using the <p> tag.
- A horizontal ruler, denoted using the <hr> tag.
- A link, denoted using the <a> (anchor) tag.
- A list, denoted using the <ul> (unordered list), <ol> (ordered list) and <li> (list element) tags.
- An image, denoted using the <img> tag
- A divider, denoted using the <div> tag
- A text span, denoted using the <span> tag
Links
<a href="https://www.google.com">A link to Google</a>
A link (“anchor”) is a small span of text that will direct you to a different section in the page, or to a different page. To create a link, you will need to specify where you would like the user to be directed to when the link is clicked by specifying the href attribute.
Lists
HTML provides a way to create both an ordered list (with elements counting up, 1, 2, 3…) and an unordered list with bullets instead of numbers. Lists are a good way to formalize a list of items and let the HTML styling do the work for you.
<p>Here is a list of ordered items:</p>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<p>Here is a list of unordered items:</p>
<ul style="list-style-type: none">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Tables
This page is empty. You are welcome to contribute the content by sending me a pull request:
Forms
This page is empty. You are welcome to contribute the content by sending me a pull request:
