What do all the online sites we visit every day have in common? Simple, the markup language used to make them so!
What is a markup language? It is a language in the public domain that through the so-called “tags” defines and creates the structure of web pages; it will then be the task of the browsers, which we use every day, to translate all the tags into portions of text, images and content of various kinds.
HTML (“HyperText Markup Language”) is used to create websites and is exactly such a language, not to be confused with common programming languages like Matlab or C++.
What is a “tag”? No, in this context we don’t talk about the famous tags we use every day on Facebook to share images and content with friends.
<head>, <body>, <header>, <section>, <article>, <footer>, <div> and <p> are the main “tags” that characterise the HTML language. Each one is enclosed between the “<” and “>” symbols and contains a portion of content.
Figure 1 – Web page structure
Let’s see some of the main ones in detail.
“Cascading style sheets”, or more simply cascading style sheets, closely related but conceptually different from the HTML language. This is because they deal with the aesthetic part of the tags defined earlier, in essence HTML without CSS would only represent a bad copy of our web page. With time it has become necessary to introduce CSS to separate the contents of HTML pages from their formatting and allow a clearer and easier programming.
Alternatively, you could think about inserting the <style> tag in the .html file and define an internal style statement related only to the page containing the statement itself. Today this procedure has lost importance and has been almost completely replaced by style sheets, which make it possible to obtain a clean, streamlined and easier to consult code.
An example of CSS code could be:
font-family: ‘Lato’, Verdana, sans-serif;
On the left you define the font, size and color of the paragraphs <p> within my html page, the browser will interpret this portion of code and the user will see on screen the paragraph with “Side” font, large 14px green. On the right is simply defined the background color of the <div>.
Figure 2 – CSS rules
As you can see, both examples are composed of the same elements: a selector (p and div in our case) followed by curly brackets containing the properties and respective values.
The selector, as the name suggests, is used “to select” the element(s) of the page to which the declarations contained in the curly brackets are to be applied (the so-called “declaratory block”).
Very useful and important for those who use this type of language are also the global attributes “id” and “class”, the latter are applicable to all elements and without them CSS would not be such a powerful tool. Id and classes are really one of the keys to make the most of this language.
How do I connect the .html and .css files?
Simple! Just insert inside the <head> tag of the html sheet a link to an external sheet, which will be nothing but the css style sheet. The string to use is the following:
<link rel=”stylesheet” type=”text/css” href=”nome_foglio_di_stile.css“/>
Simply by copying and pasting this string, modifying “style_sheet_name.css” with the appropriate name, it will be possible to display the web page just created on the browser.
Anno 1990. Mi sono laureato in Economia Aziendale presso l’Università degli Studi della Tuscia. Prima SEO e sviluppatore freelancer, poi presso la concessionaria d’auto “Centro Auto VT”, le mie esperienze lavorative hanno spaziato in differenti settori. Il mio interesse nel Digital Marketing inizia grazie ad alcuni corsi professionali come PHP e Database relazioni MySQL, programmazione Wordpress e partecipando a numerosi convegni e workshop di settore. In ByTek sono SEO Specialist e utilizzo ogni giorno strumenti di Web Analytics. Running e mountainbike nel tempo libero.
Share your business goals with us and find out how we can help you
Tech company focusing on collecting, analyzing and converting customer data into actionable insights, anomaly detection and predictions in order to improve business decisions and results.
Fintech company that collects, interprets and weighs Alternative Data of various sources and mixes them with traditional datasets for advanced monitoring and investment purposes.
Tech company specialised in the digital transformation, distribution and monetization of content via mobile and smart speakers, for publishers and brands.