Preliminary information
Before you even get down to business and start writing your first HTML page, let me give you some useful information about the language and technologies with which you will need to become familiar in order to succeed.
First, it is good to know precisely the meaning of the word HTML: it is the acronym of the expression HyperText Markup Language, which you can translate as a markup language for hypertext. Contrary to what this may imply, however, HTML is not a programming language (since it is not based on flows of linked actions, nor on a basic algorithm), but a declarative markup language: this category of languages simply marks a series of elements and specifies their order of appearance.
In the particular case of HTML, the language's job is to indicate to its interpreter (e.g. the browser) the typology of elements to display, as well as the how they must be arranged within the single page: in particular, the definition occurs by enclosing the element in question between two tag, that is, between two markers identified by terms very similar to English, including between angle brackets (for example, is the HTML tag that identifies a table).
At the time of writing this guide, the most recent version of HTML is HTML 5: it is an evolution of the basic language able to define, in addition to the structure of the page, also the behavior of numerous types of multimedia content (e.g. video streams, interactive elements, audio streams and so on) and to monitor numerous aspects of the device from which the pages are viewed (such as the percentage of screen brightness or the aspect ratio to use for specific resolutions), all without integrating "external" components such as Flash elements or Java applets, time makes indispensable to obtain similar results.
Precisely for this reason, to date, HTML 5 is widely used, as well as for the implementation of Web sites and portals, also in the development of apps for smartphones and tablets and in the implementation of management panels for other types of "connected" devices. ".
Basically, a page created with HTML only is defined static page, i.e. designed to always show the same content, mainly not modifiable by the current conditions of the environment from which it is viewed, nor by the user's behavior during navigation.
However, it is possible to make HTML collaborate with numerous other languages, in order to build more complex pages, rich in content and, above all, dynamic: among the most popular languages of this type it is worth mentioning the CSS, used to define the style of the elements that make up a page, and the JavaScript, a programming language that allows you to dynamically manipulate the page making it, if necessary, interactive.
Parts of an HTML page
After having provided you with the fundamental notions about the nature of HTML language, it is time to start our journey, analyzing the composition of a page of this type and the most used tags within it.
First of all, it is imperative to make a distinction that is nothing short of fundamental: the code with which an HTML page is created is specified by the programmer within a plain text file, editable both with basic software (such as Notepad or WordPad on Windows or TextEdit on macOS), and with other complex programs (first of all, Adobe Dreamweaver), while the content of the page is what is displayed inside the browser (images, parts of text, forms, buttons and so on) when you “navigate” the page.
Consequently, it is possible to say with certainty that the browser is a HTML interpreter, that is a program in order to "understand" the elements specified in the various tags of the page, interpreting the instructions, and to show the user the structure of the page thus generated. Unless particular development tools integrated in browsers are used, normally the HTML code is not displayed during navigation: what is shown on the screen, however, is the arrangement and structure of the page elements, dictated by the instructions present in the code.
In any case, as I mentioned earlier, the elements that make up the page are enclosed between two markers o tag, a beginning and an end, which they can accept or not parameters (depending on the type of element defined): the start tag is composed of an English-like term between two angle brackets (such as ), while the day finale puts the symbol before the end Slash or "/"(AD art. ).
The parameters, if present, are indicated in the initial marker, using a syntax similar to parameter = ”value”; for example, to define the path and width of an image, the parameters src = "address" and width = "size" are used (eg. ).
These tags are indicated, in order of appearance, in a text file with extension .html, for example page.html. In particular, there are some tags that must necessarily appear in an .html file and that you will list in detail below.
- - this is the first tag that must be inserted in a code file, useful to specify that the file in question contains an HTML page. If necessary, the version of HTML used is indicated in its parameters.
- - this is the marker that encloses the entire page. It accepts as parameters different aspects of the page itself, such as the language and the schema used by the markup.
- - this tag contains the information through which the page is managed by the interpreters (the browser, the crawler of search engines and so on): for example, it is possible to indicate in this tag the title of the page, his feature icon, character set and other specific information.
- - this marker contains all the information relating to the body of the page, ie the elements that will be shown on the screen. For example, i is specified in this tag titles and subtitles ( , , etc.), i paragraphs and its content (), the images (), And hyperlinks o anchors (), the tables (), And forms () and so on.
How to build an HTML web page
Is everything clear so far? Very well, the time has come to enter into the concrete and to understand materially how to create an HTML page putting together the information obtained so far.
As repeated several times, a page of this type is nothing more than a set of specific tags enclosed in a simple text file, which will be interpreted by a browser (or by other programs dedicated to the purpose) to display on the screen the structure designed by those who build the page itself. Below, I'll explain the operation of the markers most used in the creation of an HTML page and specified in its body (i.e. in the relative sectionbody>).
- Titles e subtitles - markers , e , typically, they are used to specify the page titles and subtitles (eg. Welcome to my site!). By default, the text enclosed between these tags takes on a different formatting, both in size and style, from that present in the other elements of the page.
- Paragraphs - the content of a paragraph is enclosed in tags e .
- Images - the tag that allows you to include images in an HTML page is . It admits parameters such as src (i.e. the address of the image), width e height (for definition of dimensions) e align (to define the arrangement of the text with respect to the photo in question).
- Anchors - anchor tags (i.e. e ) allow you to insert hyperlinks within an HTML page. The target of the link is specified in the parameter href, while the link text (ie the "clickable" text) is enclosed between the start and end markers (for example Configurehow site).
- Text formatting tag - as you can easily imagine, there are tags that allow you to define (at least in part) the style of the text to be displayed on the page: the words or phrases to be formatted are enclosed between the start and end markers. The most used are (for bold text), (for the one in italics) e (for the one underlined).
- Division tag - In some cases, you may want to give the different sections of an HTML page particular characteristics, without however dividing them graphically through paragraphs, tables or frames. For this purpose, the division tags, or are used : they divide the page into graphically invisible sections, united by specific and customizable characteristics. For example, you can assign a class to an element of type div (), to then define the specific peculiarities of the elements contained within it through the CSS style sheet or a definition in-page. I will tell you about it in detail in the appropriate section of this guide.
- Bulleted lists - exactly as the name implies, this type of tag allows you to define bulleted lists and, if desired, ordered. The beginning and the end of one bulleted list are decreed by the tags e (unordered list), while for the ordered list tags are used e (ordered list). Each element of the list is enclosed in tags e (list item).
- Forms - some HTML tags are specifically geared towards creating fillable forms. For example, the start and end of a form are specified by markers e </form>, the various input elements (text boxes, check boxes, and so on) are identified by the tag and specified by the parameter type. Instead, the tag is used to create boxes within a form . I'll show you how to use some of these tags in the HTML login page section.
How to create a basic HTML page
After analyzing how the most important markers work, you are finally ready to create your first basic HTML page! In fact, everything lies in putting together everything seen in the previous sections, so as to structure a real Internet page: without hesitating further, open the text editor included in your operating system (such as the Block notes di Windows o TextEdit di MacOS) and paste the following text into it.
Hello everybody! The configurehow site Created from a thematic guide Hello! I'm configurehow and I wrote this guide to teach you how to build an HTML web page. I bet you recognize the city below! To access my website click here.
When you have finished, save with name the newly created file using the extension .html (With art. mysite.html) and, to view the page in the browser, do Double-click on the file you just saved. Well: you just managed to create your first HTML page! If you wish, you can view the page code by right clicking in a random spot on the page and choosing the option View page source from the menu proposed by the browser.
Remember that, in this way, the created HTML page will only be visible inside the computer you are using; if you want to make the page reachable from the internet instead, you have to buy one hosting space that can host it, possibly to be combined with a domain to reach it easily. If you are interested in this eventuality, I invite you to consult my guide to the best hosting.
How to create an index.html page
Typically, a page like index.html it is nothing more than the home page of a website that contains a description (summary or detailed) of the site itself, with hyperlinks to the other pages that make it up. For example, if you are going to create a personal website, the index.html page could be composed of a short description of yourself, a photo and some links that lead to other thematic pages, such as a biography (bio.html), a portfolio (portfolio.html) and a contact page (contacts.html), which you must take care to create separately. Just to get an idea, this could be the code for such an Internet page.
Hello everybody! The configurehow site Created from a thematic guide Hello! I am configurehow and this is my test site. Biography of Works of Contacts of To access the guides section click here.
As you can easily guess, the hyperlinks to the other pages of the site have been inserted within one unordered bulleted list. Furthermore, the page has been assigned one colorful background via the parameter bgcolor (that is, backgroundcolor) attached to the tag
How to create an HTML login page
It is in your interest to create one pagina HTML is logged, that is, a part of the site that allows access to a protected section after entering a username and password? You can easily do this using the form tags, which I told you about earlier, using code similar to the one below.
Login page Log in to the site action = "scriptAccesso.php"> Remember me on this computerinput type = "submit" name = "login" value = "Login"> Did you forget your password? Click here to reset it .
The difficulty, in this case, is to tell the browser how to check that the username and password have been entered correctly, where the user presses the button to authenticate (in this case, ): generally, this operation is accomplished by calling a particular script (written with language javascript, php, ASP or others), which compares the fields in the appropriate boxes with the records of a database or a text file. In the above code, this script is specified in the parameter action of the tag , which indicates the action to be taken when the type button is pressed Submit (in our case, “Sign in”).
For more information about the procedure for creating login scripts in PHP, I invite you to consult the basic tutorial of HTML.com.
How to create an HTML page with CSS
As I mentioned earlier, although HTML is able to manage the basic formatting of elements, it is possible to use a specific language that allows you to change the aesthetics, layout and decorations to your liking: the CSS. This language has an extremely different syntax from that of HTML, mainly focused on the graphic definition of the various elements.
This type of code can be included in an HTML page in two ways: the first, useful when the elements are few and limited to a single page, consists in enclosing it within the tags e , declared in the section .
The second, on the other hand, involves writing the code inside a text file with the extension . Css, which can be imported into one or more HTML pages using the tag (With art. ); again, the marker is specified in the section of the page.
For example, below I show you the code of a CSS style sheet that can color all the elements belonging to the class colour: in particular, the text will be colored blue, with a black background and will be surmounted by a line. Also, the character spacing will be increased to 5 pixels.
.color {color: blue; background-color: black; text-decoration: overline; letter-spacing: 5px;}
To verify that the stylesheet works, paste the above code into a plain text file and save it with the name style.css, within the same page where you previously saved the basic HTML page.
To embed the sheet, open the latter in editing (right-clicking with the mouse on the .html file, choosing the item Open with from the proposed menu and selecting the program Bloco Note / TextEdit from the next list) and, immediately below the tag , enter the specified string below.
Finally, save the file, double click on the respective html and… enjoy the result!
Tools for creating HTML pages
If you have made it this far, it means that you have acquired the basic knowledge necessary for create an HTML page and that you are ready to take your first steps in complete autonomy. So, once you understand the use of tags and how to build the structure of a Web page, you would like to have a complete overview of the tools that can help you easily carry out your work: below I indicate those that, in my opinion, they may be more useful to you.
HTML editor
Are you interested in some program that allows you to create HTML sites, even with the aid of a graphic part that allows you to create new elements even with keyboard and mouse and without necessarily acting on the code? Well, HTML editors of this type are called WYSIWYG (what you see is what you get, which you can translate with what you see is what you get) and are widespread both at an amateur and professional level. Below I indicate some of them.
- BlueGriffon - it is an HTML editor based on the Firefox browser engine, which includes an excellent WYSIWYG module but, if necessary, also allows you to work in code-only mode, a very useful feature for the more experienced. You can download it for free from its official website.
- Amaya - is an open source HTML editor created and distributed by the W3 consortium (W3C). Thanks to a convenient WYSIWYG interface, it allows you to create pages and entire sites in HTML, style sheets, small scripts and other parts of Web platforms, even “drawing” everything with the mouse. You can download Amaya from this page.
- Adobe Dreamweaver - is an extremely powerful semi-professional tool that, thanks to the various tools present within it, allows you to design simple and complex Internet sites. In addition to being an HTML editor, Dreamweaver can handle CSS, JavaScript, graphics files, and more. You can purchase Dreamweaver (with the possibility of a free 7-day trial) from its official website.
The ones I mentioned are some of the most used HTML editors, but they are not the only ones: in this regard, I have created for you a specific guide on HTML programs, in which you can find many other software of this type that can help you bring to finish your work.
How to create an HTML page with Notepad
How do you say? You prefer to stay on the "classic" and practice writing HTML code using only the Block notes Windows? I'm here to please you! Keep in mind that this program was designed to write basic text files, therefore it does not provide specific features for HTML editing (such as error reporting, parameter suggestion, and so on).
All clear? OK, let's proceed: first, start the program by calling it from the folder Windows Accessories menu Home (l'icona a forma di pennant located in the lower right corner of the screen), type in the HTML code of your interest and go to the menu File> Save As ..., located at the top left, to access the save options.
At this point, select the option All files (*. *) give menu to tendin Save eat and indicates a name to be assigned to the file in the appropriate text field, taking care to specify the extension .html (With art. mysite.html). When you are done, press the button Save And that's it.
How to create an HTML page with Word
Microsoft Word is an extremely powerful program that, if needed, can be used to create great HTML pages in mode WYSIWYG. How? Simple! First of all, start the program and use the tools in it (such as tables, graphs, text formatting, lists, images and so on) to build the Web page as you would like to view it in the browser.
When you're done, click on the menu Fillet Word, choose the option Save with name, indicates the folder in which to save the file and, subsequently, specify the file name and set the drop down menu Save eat (File format on Mac) on the voice Web page, if you are interested only in saving the text, or on Web page in single file to also save images, used fonts and other “external” elements to Word within the same file.
Note: to keep faith with the original formatting, Word may add some "proprietary" tags in order not to alter the display of the page. If it is your intention to exclude them and limit yourself to saving only the HTML markers, you must select the item Web page Filtrata give menu to tendin Save as / Format fillet.
How to create an HTML page online
How do you say? Are you going to create your HTML page directly on the Internet, without installing any program on your computer? Then a CMS could be right for you: in fact, a Content Management System is a system, also written in Web language, which allows you to manage all the phases of the creation of an HTML page (or an entire website) through a management with graphic interface.
On the Internet, there are several free CMSs (which also offer a hosting space) that allow you to easily create and publish one or more Web pages: two of the most used nowadays are certainly WordPress.com e Google Sites, which I told you about in detail in my guides on how to create a site with WordPress and how to create a site with Google Sites.
There are also platforms more oriented towards the creation of static HTML pages, such as Weebly, Yola o Xoom: I've explained to you specifically how they work in my guide on how to create a website for free.
Useful resources
Now that you have learned all, absolutely all, the basic techniques for creating various types of HTML pages, you have begun to get a taste for them and would like to learn more about the subject, since you have sensed that the power of HTML goes far beyond beyond what I explained to you in the previous bars of this guide? Don't worry, I'm not going to leave you alone, not even at this stage: in the lines to come, in fact, I have every intention of providing you with additional resources to consult to increase your knowledge on the subject.
- HTML.com HTML Guide - in all likelihood, this is one of the most complete, articulated and rich in insights guides available on the Net: it is divided into thematic sections and includes authentic lessons, practical examples and exercises of various kinds. Moreover, the HTML.com guide is constantly updated.
- W3Schools.com - this portal, promoted and published by the W3C, is entirely dedicated to HTML and the other technologies that go around it. Its peculiarity is to be able to perform numerous self-verification exercises, at the end of each lesson, to verify and evaluate the new skills acquired.
- HTML 5 with CSS and JavaScript - if you prefer printed paper to digital, you can't help but take a look at this text: in addition to being a basic manual for creating HTML sites, it is a rather complete reference for creating mobile applications ( and non) web-based, which combine HTML 5 with CSS and JavaScript.
