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.
- <header>: is the first container of elements visible on the web page, not to be confused with <head> equally important but which contains elements that allow the correct functioning of the code such as the link to the .css style sheet. The <header> is a useful element to enclose any content with introductory intent, such as the brand logo and the navigation menu.
- <body>: is the central element that defines and identifies the body of the entire page. It is unique and can contain all the other tags mentioned above and many others like
to insert images or <h1>, <h2>, <h3>, <h4>, <h5>, <h6> to insert titles with different importance and size.
- <section>: represents a generic section of a document or application, intended as a thematic grouping of contents. Generally there is a title that introduces the topic.
- <article>: is a standalone section that can identify a forum post, a magazine or newspaper article, a blog article, a comment, an interactive widget, or anything with independent content.
- <footer>: is the element that must contain information at the bottom of the page such as the website owner’s logo and contacts, links to related documents, copyright data, and so on. It does not necessarily have to be inserted only at the end of the document.
- <div>: was born as an abbreviation of “divide” intended as separator, today can be defined the most neutral tag of the markup because it allows you to create sections within the web page in order to separate content from each other. The purpose of <div> is to act as simple containers, then it will be the designer’s task to change their appearance and size to make them suitable for every need.
- <p>: is the container that provides within it the insertion of text and other tags such as , or the insertion of a link to another page or more commonly “link”.
What are CSS?
“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.
