• Register
36,800 points
11 5 4

If you were asked to identify the three technologies on which the development of an internet portal is based, the answer you should give is the same as the title of this lesson: HTML, CSS and Javascript cover all the aspects that revolve around a web page, from its structural component to its arrangement, to the world in which it must react to specific events, whether they are triggered by the user, the browser or elements of the page.

In this article we will deepen the three technologies, taking the opportunity to start structuring our application.

HTML:

HTML was born in 1992 and in 20 years has undergone a marked evolution.

  • In the beginning, there was hypertext: documents, mainly textual, linked together by links that the user could follow by clicking. The purpose was completely informative and each user could access the same set of information, the web was a gigantic "free encyclopedia" (more or less reliable).
  • Today the concept of navigation is flanked by that of action and we have moved from hypertext to real web applications, whose data are produced.

Despite the massive paradigm shift, the HTML of 1992 remains the solid foundation of the entire Web; there are new possibilities, such as being able to add videos to pages, but the syntax and main elements have remained practically unchanged.

What has radically changed is the approach of developers who, for whom HTML has exclusively assumed the role of a tool to define the structure and content of the page, not its graphic representation.

Let's experiment with some HTML by introducing the following listing in the index.html file:

<section id = "research">
<h1> Find Your Language </h1>
<p> Enter a programming language in the form below to search for that language. </p>
<form action = "detail.cshtml" method = "get">
<label for = "box_ricerca"> Search: </label>
<input type = "search" name = "box_ricerca" placeholder = "Enter the name of a programming language (ex: Ada)"
required />
<input type = "submit" value = "Search" />
</form>
</section>
<section id = "ranking">
<h1> The Ranking </h1>
<p> Here are the most sought after languages: </p>
<ol>
<li> <a href="detail.cshtml?box_ricerca=C#"> C # </a> </li>
<li> <a href="detail.cshtml?box_ricerca=Python"> Python </a> </li>
<li> <a href="detail.cshtml?box_ricerca=Ruby"> Ruby </a> </li>
</ol>
</section>

This page contains two sections, both delimited by the SECTION ( <section></section>) element. This element was introduced by the recent HTML 5 specifications with the intention of semantically enriching the more classic container element <div>, a section indicates that all the information contained in it shares a common characteristic.

The first section focuses on the research theme, it contains the title of the section (between <h1>and </h1>), a paragraph with explanations (between <p>and </p>) and an insertion mask ( <form></form>).

In the mask, we then have a label ( <label></label>) related to a textual input field ( <input type="search" ... />) and to a button ( <input type="submit">) for sending the data contained in the mask to the address specified by actionthe attribute of the form (the page dettaglio.cshtml).

The second section instead frames the theme of the ranking and contains, in addition to the title and an explanation paragraph, a list of the most sought-after languages ​​expressed through an ordered list of elements ( <ol>) in which each element ( <li>) is characterized by a link ( <a>) that points to the detail page ( dettaglio.cshtml) with the addition of a parameter to specify which language we want to receive details about.

If we launch the application we will probably be disappointed ... the result is in fact a messy mass of text, lists and input areas that follow one another without consistency. The time has come to give some style to what has been created, it's time for some CSS.

CSS:

The CSS is a set of property modifiers such as size, position, colour and others. Each modifier is applied to specific elements of the web page, identified through the use of selectors. Let's take an example:

. comment {width: 100px; }

In this case, we set the width of 100pxfor all elements of the page whose attribute classis equal to "commento".

The list of selectors is very extensive, as is the list of usable properties. Let's insert the following listing inside the file frontend.cssand comment it together:

/ * all elements of type section * /
section {width: 960px; margin: 10px auto; }
/ * all elements within the section
* with id 'search' * /
section # search * {text-align: center; }
/ * the section with id 'ranking' * /
section # ranking {margin-top: 30px; }
/ * all elements of type li * /
li {list-style-type: decimal; list-style-position: inside; }
/ * all elements of type h1 * /
h1 {font-size: 24px; line-height: 30px; }
/ * all elements of type p * /
p {font-size: 16px; margin-bottom: 10px; }
/ * all elements of type input with attribute
* type equal to 'search' * /
input [type = search] {width: 500px; }

In the first block, we set width of 960pxsuitable for visualization for both sections of our page 1024x768. Then we centre the sections on the page, setting marginautomatic margins ( ) to the right and left ( auto) and space them 10px at the top and bottom.

In the second block we set the top margin ( margin-top) only for the section with attribute idequal to ' classifica'. This instruction is therefore applied to an element that already has a marginwith the result of overwriting the previous property (but only for the upper part).

Finally, we decide that the ordered list is a decimal type list, that it has a body title 24pxand that the text height is 30px. We also apply some changes to the paragraph element and finally increase the width of the text entry field. Let's run the page now and appreciate the marked improvement.

Javascript:

A few lines are not enough to introduce what in effect looks like a complete programming language. We will be able to experiment with Javascript in the next lessons, for now, it is sufficient to know that its most classic function is to be able to perform actions when specific events are triggered, such as sending a form, moving the mouse, clicking on a button. and so on.

36,800 points
11 5 4