Along the path of every independent blogger comes that moment when you need to make changes to your blog by entering the code and scripts that compose it. Before doing so, however, it is essential to understand how it is done and how it works, thus avoiding making any mistakes that could compromise its correct functioning. For this reason, today we discover together how a website is made by introducing the HTML code. A particular useful language to know in order to independently manage all the pages of our blog or website.
Nomenclature of site scripts
- index.html. The main page of a website that is called Home Page generally corresponds to a file called index.html placed in the folder containing all the files of the site. It is the first document that is opened by users and through the links on the home page it will be possible to access and open the other scripts corresponding to other web pages.
- Web server. Server that makes the pages of a website available through the internet to any user who requests them.
- Domain. Folder inside a web server where all the site scripts are present.
All other files that make up a site have no naming obligations. It is only strongly recommended that they are without spaces and are relevant to their content in order to facilitate a subsequent modification by identifying them immediately. For example, namewithoutspaces.html or name_without_spaces.html.
How a web page is made
The anatomy of a typical web page consists of:
- Header. Contains the logo and site name.
- First level menu. It contains all the links visible on each page of the site.
- Second level menu. It can be found both on the right and on the left and not be visible on every page of the site. Most often it is called a sidebar.
- Content area. Display of so-called articles, texts, images and videos linked to the selected first and second level menus.
- Subscript or footer. Links of interest always present on all pages of the site.
How to design a website
When designing a website, the content tree is normally used to represent all types of content that the site must have. The branches of the tree represent the links that are used to navigate from one page to another. Finally, from each page it must always be possible to return to the main page (home page) remembering to insert the link on all pages of the site. It must be simple and intuitive to facilitate navigation for the user and can be presented as shown in the figure:
- Home Page = the home page of a site.
- Category = First level menu, (the company, the blog, the gallery, the products, the contacts …)
- Sub category = Second level menu. (Various categories of articles, photos or products collection.)
- Articles = The articles or products. The specific individual pages that show the actual content.
How to build the pages of a site starting from a template
The template of a blog or website starts from the creation of a generic layout structure for all the pages of the site. It is usually saved as a file named nometemplate.html and will be used as the basis for generating all other pages on a site. In fact, all the other scripts of the pages are saved with the same HTML code.
Introduction to HTML code
What is HTML code
From what has been said so far, it can be deduced that HTML (Hyper Text Markup Language) is the main language used to build pages and websites. Its “words” are called “tags” and to create an HTML document you need an editor that allows you to save it with the .html extension. A website is therefore an HTML document viewed through a browser. A particular text file containing all the commands useful for formatting text, inserting multimedia parts and defining hypertext links. The HTML pages of a website can be dynamic and static.
- Dynamic pages. To work they need scripting languages, which are interpreted programming languages.
- Static pages. With HTML hypertexts they transmit all the necessary information and are equipped with hyperlinks to access different contents and / or pages at the same time.
HTML tags are those elements present within an HTML document that give certain characteristics to what we want to make visible online. In a nutshell, they are the markers that allow the browser to give structure to the entire HTML document. Therefore, to give a certain type of layout to the content of a web page it is necessary to make use of such tags. An HTML tag is identified by a specific name depending on its function and can contain an image, text, video, etc. It always comes in two parts:
<tag> and a closing
</tag> into which the object is inserted as in this example:
<tag> subject </tag>
The opening serves to tell the browser that in that point of the web page a marking of something begins and must be interpreted in a certain way. Closure, characterized by the “/” symbol, instead makes the browser understand that the marking of that element ends at that point.
HTML tags with no content
In an HTML document there are also tags with no content but which have a specific meaning by including information or linking other documents to the web page. These tags do not have a closing
</tag> but only have the “/” symbol before the final bracket
<tag ... />. The most common and used are:
- br. When you need to wrap, the <br> tag is used. For example, if we wanted to leave 3 white spaces between one object and another, we would insert it 3 times like this: <br> <br> <br>.
- hr. It is used to create a dividing line between different sections of a page.
- img. Tag needed to insert an image on the web page.
- link. Fundamental to link other resources to the pages of a site.
- half. Tags that contain other data.
! The specific nomenclature of HTML tags cannot be changed at all.
Structure of a web page
A web page has a standard rigid structure that is used whenever a new HTML code document is created. To set it up you need specific tags with their respective opening and closing:
<html> </html>. The html tag is the outermost tag that contains and holds the whole web page together.
<head> </head>. It presents all those elements useful for the positioning of the web page to be managed by browsers and search engines. Description, favicon, meta tag, title tag, etc.
<body> </body>. It contains all the site information visible to the user. Images, forms, tables, texts, titles and subtitles, videos and any other type of content.
HTML tags can, and sometimes must, be inserted into each other. Inside the
<html> tag there is the
<head> </head> tag and always inside the
<html> tag, at an even level of the
<head> tag there is the
<body> </body>. Basically, the opening form of a web page looks like this:
<! DOCTYPE html> is required and is used to specify that the file contains an HTML page.
Curiosity. To see the source code of a web page just click with the right mouse button anywhere on the screen and select the item “Inspect element” with Safari or “View page source” with Chrome.
Attributes of HTML tag
As we previously saw, a generic html tag looks like
<tag> text </tag>. To this string of code it is possible to add features that better specialize its behavior. By leaving a blank space between the word tag and its closure we can insert attributes. The attribute of an HTML tag indicates a property of that element.
<tag attributename = "value"> text </tag>
Structure of an attribute always has the same syntax, which must be strictly respected: attributename = ”value”. Specifically it is composed of 3 elements:
- attributename. It is the name of the attribute on which we are going to intervene.
- =. The equal is used to give a specific value to the attribute.
- “value”. Always quoted, it can be a number or some text that specify its transformation.
Almost all HTML tags have attributes and you can insert more than one for each one at the same time. However, it is always better to use them only when strictly necessary in order to try to keep the web page code as clean and light as possible. We always remember that for many changes we can also use the CSS code that allows us to dirty the HTML document less.
! The attributes must always be separated from one another by an empty space.
Main attributes of all elements of a web page
- class = “class name”. Assign one or more class names for the stylization. It can be used multiple times on the same page.
- id = “unique identifier”. It gives a unique identifying name to the element for functional and stylization purposes. It can be used only once on the same page.
- style = “inline style sheet”. Attributes presentation styles or online layouts to the element.
- title = “description text”. Provides a description of the element by appearing as a tooltip when the mouse passes over it. It is important not to confuse it with the <title> tag used for the page title placed inside the <head> tag.
Let’s analyze the font tag
To establish the characteristics of a text, the <font> tag must be used:
Basically it looks like:
<font> text </font>
By inserting attributes we could have:
<font size = "23" color = "blue" face = "Verdana"> Fashion Snobber </font>
With this HTML code string we are telling the browser to show the 23px “Fashion Snobber” written in blue and with Verdana font.
<font> tag must be inserted inside the
<body> </body> tag.
The img tag
To insert and manage images on a website, the <img> tag is used. Its structure opens and closes in a single instance without needing a closure because it is an element with no content. Taking a practical example, we could have a basic
<img> tag like this:
<img src = "https://www.fashionsnobber.com/logofashionsnobber.jpg" alt = "Logo Fashion Snobber">
Analyzing this HTML code string we notice:
- img. It is the name of the tag.
- src. Main attribute of the img tag. It does not have a numerical value, but a text that specifies the path and origin of the image. In short, it is the address of the file we want to show.
- alt. It is the alternative text that appears in the event that the server is unable to load or show the image. It is an optional attribute but very useful from an SEO point of view to facilitate indexing on search engines. Must contain text that provides a description of what the image represents.
If we want to add more information to the image, we can use the title= “text” attribute. This allows you to show text when a user pauses with the mouse over an image or link.
<Img src = "https://www.fashionsnobber.com/logofashionsnobber.jpg" title = "FashionSnobber.com" alt = "Logo Fashion Snobber" />
<img> tag you can also use the width = “value” attribute of the width and height = “value” of the height. Both have numerical values in pixels.
<Img src = "https://www.fashionsnobber.com/logofashionsnobber.jpg" title = "FashionSnobber.com" alt = "Logo Fashion Snobber" width = "480" height = "200" />
It is possible not to enter the height attribute but they are that of the width. The image will automatically be adapted to the proportion of the width. Obviously there are many other ways to customize the images by then acting on the CSS code that we will see later.
<img> tag must be inserted inside the
<body> </body> tag.
The <table> tag allows you to organize content within a web page. It has a rigid structure that determines its composition with very precise rules to be respected and whose HTML code base must never be modified. It has an opening and a closing
<table> </table> and between them there is the obligation to insert the
<tr> tag inside which only the
<th> tag can be inserted.
<tr> tag manages the table rows while the
<td> tag defines the cells and can contain anything.
<th> tag instead indicates a cell that contains a header.
Basic structure of a table in HTML code with three rows, two columns and only one data per cell can be written as follows:
If we want the first row to have a header with a single data as wide as the two columns below, we will have to use the colspan= “number” attribute applied to the
<th> tag. The colspan attribute therefore allows you to obtain a cell that occupies multiple columns.
To obtain a cell that instead extends over more than one row, you need to use the rowspan= “number” attribute applied to the
Basic example of a hypothetical web page organized with the nesting of the
<table> tag to better understand the mechanism:
<table> tag must be inserted inside the
<body> </body> tag.
<a> tags and links
In any website it is always necessary to know how to create a link between two HTML pages. In other words, for example, by clicking on a content on the home page, it is activated and another page of the site opens. This can happen either by clicking on an image or on a text. To activate this mechanism you need to use the
<a> </a> tag with its unambiguous opening and closing and all the attributes necessary to specify how and where you want to direct the link. In this way, the content inside the tag will become a link.
Example with reference to an HTML page:
Click <a href="About.html"> here </a>
Example with reference to a specific web address:
Click <a href="https://www.fashionsnobber.com"> here </a>
The href= “page name or url” attribute contains the name of the HTML page or the url, both internal and external to the site, on which we want to point.
In case we want the link to open in another browser page we will have to use the target= “_ blank” attribute in this way:
Click <a href="https://www.fashionsnobber.com" target="_blank"> here </a>
To prevent the link from being indexed on search engines, instead, we will add the rel= “nofollow” attribute.
Click <a href="https://www.fashionsnobber.com" rel="nofollow" target="_blank"> here </a>
With the attribute title= “explanatory text” we can specify the element to which the attribute refers via a text. This text appears when the mouse cursor lands on the link exactly as we saw for the <img> tag.
Click <a title="Fashion Slobber: fashion and lifestyle blog" href="https://www.fashionsnobber.com" rel="nofollow" target="_blank"> here </a>
! Addressing by file name works only if the two HTML pages created are in the same folder as the calling page.
With this introduction to HTML, you are now able to better understand the language behind every blog or website. Just complete everything with an introduction to the CSS code and you can more easily make any changes to your template if it does not fully reflect your needs. I want to clarify that by now every blogging platform provides the appropriate sections in which to operate and you just need to know the exact codes to enter. Some can be found in the practical guide “How to customize a blog on Blogger with HTML and CSS codes“. That said, if you need more specific information, I suggest you rely on HTML.it. The clearest and most complete HTML code site operating in this sector.