In this article, you will learn how to use HTML to write your first website! The article will provide illustrative examples for better understanding. Immediately make a reservation that the article was originally designed for those who are just starting to learn HTML. In addition, we promise that after reading the article you are guaranteed to create your first site.
HTML stands for HyperText Markup Language, that is, a language for organizing text.
Unlike programming languages (JavaScript, PHP, etc.), which use scripts to perform actions on websites, an ordering language (HTML) uses tags to mark up the contents of websites.
Getting started with HTML from scratch
Just as the English language consists of the letters A, B, C, etc., so the HTML language consists of peculiar "letters": <p>, <hr />, <h1>, etc. Such peculiar "letters "HTML among webmasters are called tags.
The following is an example HTML tag.
<u> <u></u> .</u>
HTML tags paired with CSS language styles quickly and efficiently allow you to create websites.
HTML place among other languages
As you know, a good website is built in at least 5 languages.
A modern website is built in languages:
- HTML (structure and ordering).
- CSS (style filling).
- JavaScript (actions in the browser).
- PHP (server action).
- SQL (data storage).
HTML is the main fundamental language on which others are based. Therefore, learning HTML should be the first step for anyone who is learning how to create sites on the Internet.
<html> tag
Over the long history since the creation of the HTML language has undergone changes. At the moment, most Internet sites are switching to the latest version of the language - HTML5. But even in HTML5, the basics of the language remained unchanged.
The structure of an HTML page can be compared to a sandwich. Just as a sandwich has two slices of bread, so does an HTML document have opening and closing HTML tags.
These tags, like bread in a sandwich, surround everything inside.
<html> ... </html>
<head> tag
As you continue to learn HTML, you should definitely become familiar with the <head> tag. Directly inside the parent <html> tag is the entire content of the site, including the <head> tag. This tag is required and contains all the settings of the page of the site for which it is written. These settings are not visible to site visitors, they are only visible to browsers (Google Chrome, Mozilla Firefox, and so on).
The web page settings block contains all the "non-displayable" elements that help the browser correctly display your site on the Internet.
<html> <head>...</head> </html>
All options that can be configured inside the <head> tag, we will consider, but a little later - when the time comes.
<body> tag
The <body> tag, like the <head> tag, is located inside the <html> tag.
This tag is needed in order to display on your site all the information that you want to display.
Headings, paragraphs, tables, pictures and links are just a small part of the elements that may be contained within the <body> tag.
The basic structure of an HTML document:
<html> <head>...</head> <body>...</body> </html>
Your first site
Now you know that using the HTML language you can create sites and that the main tags are used for this:
- <html>. Outlines the borders of a web page.
- <head>. Contains settings for displaying a web page in a browser.
- <body>. Contains all the elements of web pages (pictures, videos, text, and so on) that you want to show visitors to the site.
We will talk about other tags, such as <header>, <nav>, <section> very soon.
It would be great if the reader did not just read this article, but also immediately ran to hone the acquired skills. To hone your HTML skills, you will need to create your first website, which will serve as a testing ground for your new abilities.
It is known that mobile operators (MTS, MegaFon, and so on) provide us with mobile services. Similarly, the services of creating and managing sites are provided to us by hosting operators. To create your website, go to the site of any free hosting operator.
Verified hosting operators include BEGET or REG, for example. You can choose any.
After a short registration, after 24 hours, your first website on the Internet will be automatically created, which will be visible to the whole world, and you can begin to practice!
Modern site structure
Now that you have your own site, check out what tags the <body> tag contains and how they organize information on sites.
The picture above schematically shows the structure that came with the advent of the latest version of the HTML language - HTML5. Together with HTML5 came not just new tags, but also the meaning of building websites. All the tags that you see in the image are contained within the main <body> tag. These tags help you "outline" the structure of your site and give it meaning.
For example, inside the <header> ... </header> tags, it’s convenient to place the site header (<h1> </h1> tags) and the site description (<p> </p> tags).
Inside the <nav> </nav> tags it’s convenient to place the menu (links) of the site (<a> </a> tag).
Inside the <section> </section> tags it’s convenient to place any large block of information related in meaning. This can be several articles, each of which is “wrapped” in <article> </article> tags, or photos (<img src = ""> tag), or tables (<table> </table> tags) and much more .
Inside the <aside> </aside> tags it’s convenient to place any information that is inappropriate for the meaning of <section> </section>.
Inside the <footer> </footer> tags, it is customary to place additional information such as contact details, additional sections of the site, and so on.
So, you are now a little advanced in what modern sites are made of. Let us give an example so that the turmoil in the head changes into reverence for enlightenment.
So, when you open the file manager on the site of your hosting operator and find a document called index.php, feel free to write in it, as from scratch, the structure of your site.
<html> <head> <meta charset="utf-8"/> <title> </title> </head> <body> <header> <h1> </h1> <p> </p> </header> <nav> <center><a href=""> №1</a> | <a href=""> №2</a> | <a href=""> №3</a></center> </nav> <section> <h2> </h2> <div> , , CSS , , .</div> </section> <footer>© </footer> </body> </html>
Remember, we said that the <head> indicates various settings for the site? So:
- Using <meta charset = "utf-8" /> we show browsers that there can be both Russian and English characters on the site (otherwise, when you open the site, you will see terrible krakozyabry).
- <title> </title> is used to indicate the name of the page that appears in the browser tab and in the search engine (Yandex, Google and the like).
Of course, without connecting CSS styles, your site will look sparingly (black letters on a white background), but for a start, be sure to try writing your first page in HTML.
Congratulations! You have just created your first web page on your own website! It will be more interesting further!