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.
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 **
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>.
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.