HACKLOG 2×04 – Fondamentali di Web Design (HTML/CSS/JS)

In the Web the reference language for building
the backbone of a website is called HTML (today also called HTML5, because of the
its version): this language, defined of “mark up”, allows you to create a hierarchy
of the elements, more or less complex. For example, in HTML they identify themselves
the types of elements (such as links, videos, images, buttons etc …) and their relationship between them
(the image is inside a container, the container is inside a table, the table is inside
another container and so on). The html file (which has the extension .html)
inside it looks like this. HTML is based on tags: the tags open
and they close with the symbols of major and minor. By convention (almost) all tags are opened
and they close and can enclose them other tags. HTML can be commented on: everything
is present betweenis not considered from the browser but can be read in the code
source. HTML becomes: as you can see there are some
spaces (assigned with the [TAB] key of the keyboard). Although not strictly necessary, it is one
convention used by programmers for read the code better and understand its structure
hierarchical. We also spend two words on the three fundamental tags
HTML:: Within this tag we say
which is present in the HTML code: Within this tag we communicate
to the browser of the parameters that are not shown to the user but who can use for the correct
operation of a web page: Within this tag we say
that the content should be shown to the user The HTML is therefore the way in which it is structured
the site, exactly like columns and walls are at the base of a house. The coat of paint is made from another language
markup, called CSS, which shows up in slightly different way. Let’s look at an example: Here are some considerations on the
CSS: The CSS lives of selectors: as you have seen we have
used the body, h1 and div tags: these elements are already present in HTML and allow
to interface with them The CSS contains properties and values: inside
braces {and} are possible specify a property followed by a value. The translation of the selector body says: lo
background (background) is yellow (yellow). CSS can be commented on: everything
is contained between / * and * / is not considered from the Browser
The CSS becomes indented: as with HTML, they are followed conventions to better understand the
language. There are several, each following one
line of thought. In more complex projects we prefer
use an external file that contains code CSS. So let’s edit the HTML file
the code block, calling an external file named style.css: So let’s create the style.css file and let’s go
to insert the content of code used previously: In this way we will have a much more code
clean and easy to maintain. At the base of these two languages ​​(plus a
third, as we will see later, there are the Phishing attacks, or more commonly
scams on the web. The evolution of the World Wide Web has allowed
users to interact with the sites: this means that, based on the actions performed
by a user, these can modify the page results. This kind of operation is carried out
from a scripting language (which unlike of the former, it is a real language
programming) called clientscript. The most common, and now a common standard, is
the Javascript. With Javascript we can create based events
on user interactions (like the click or the hover, the scroll and so
Street). The simplest event we can create
is an alert, a popup message on the page user (often abused by malicious websites): As you can see, the code here is inside too
the page (defined inline) also in this case we can move it up
a new file and evoke it. Then we create the script.js file and insert
the Javascript code that we intend to evoke. Let’s change the content of the HTML page with
the following: In this case we also make our considerations:
Javascript is a scripting language: unlike the first two it is a language
in effect and requires that the code is written correctly. Javascript is an interpreted language:
can therefore use variables, objects, arrays, conditions, functions and everything you do
finds in a normal programming language Javascript can be commented: comments
supported are on // one line or on / * more stripes */

Leave a Reply

Your email address will not be published. Required fields are marked *