web design

La prima pagina web in HTML

La creazione di una pagina web, il design dei siti e la creazione di effetti sempre più risaltanti è un lavoro sempre più ricercato al giorno d’oggi. Tutti i programmatori di pagine web però, nonostante l’avanzamento e il miglioramento delle tecniche, hanno iniziato e tutt’ora creano pagine web basate sul linguaggio di markup HTML – HyperText Markup Language.

Esso, associato ad una buona conoscenza di CSS (sigla di Cascading Style Sheets, in italiano fogli di stile a cascata), ovvero un linguaggio usato per definire la formattazione di documenti HTML, XHTML e XML, permette di creare un vero e proprio sito web con un design, definendone i colori, i bordi delle immagini, il font-style e così via.

Creiamo così la prima pagina web attraverso l’utilizzo di Visual Studio Code, uno dei migliori editor di testo presenti sul mercato.


pagina web

Consiglio l’utilizzo di un’estensione particolarmente  utilizzata per la creazione rapida di pagine web presente  all’interno di Visual Studio Code ovvero HTML Snippets.  Essa permette l’autocompletamento del testo HTML per velocizzare la scrittura della pagina web. 
Per installarla basta andare nella sezione Extension oppure cliccare la combinazione Ctrl+Shift+X e cercare HTML  Snippets.


A questo punto creiamo il nostro file in formato HTML e iniziamo a realizzare la nostra prima pagina web, l’Hello Word.

<!DOCTYPE html>
<h1>Hello Word</h1>

Cerchiamo di capire il significato di queste righe di codice; Alla prima riga definiamo il documento di tipo HTML. Possiamo notare come il linguaggio sia formato da dei tag (<>), ognuno di essi definisce un elemento. Capiamo meglio.

Il tag <h1> presente nella seconda riga definisce un elemento predefinito del linguaggio che si riferisce alla creazione di un titolo principale. Esistono quindi molti tag (etichette), ad esempio, il tag <p> che definisce la creazione di un paragrafo, il tag <title> che permette la definizione del titolo della pagina web.

Leggi articolo   Max tra due numeri

I tag HTML non sono “case sensitive ciò significa che scrivere <head> <HEAD> è esattamente la stessa cosa. In ogni caso la consuetudine è quella di scrivere i tag in minuscolo.

L’Hello Word in HTML

Salvando il file e aprendolo con Chrome o con qualsiasi browser verrà visualizzata la scritta Hello Word in questo modo:

Questa scritta, con questo tipo di font e caratteristiche è lo stile che il linguaggio ha di base. Aggiungiamo un piccolo paragrafo dopo il titolo e vediamo cosa accade:

Anche il paragrafo ha un suo stile già predefinito e uguale per ogni pagina web. Questo tipo di documento però NON è completo, o meglio, dispone di elementi utili alla realizzazione di una pagina web ma mancano dei tag fondamentali che servono per realizzare delle pagine ottimizzate e funzionali.

I tag fondamentali per una pagina web ottimizzata

La nostra pagina deve comporsi, infatti, di alcuni tag fondamentali che ora vedremo.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2> Pagina Web Completa</h2>
    <hr>
    <p>
        Una pagina web completa, formata da i tag chiave.
    </p>
    
</body>
</html>

Come possiamo notare, i tag chiave sono pochi e semplici da ricordare. La pagina HTML deve essere formata da:

  • <html>
  • <head>
  • <body>

Questi tre tag definiscono:

  • il tipo di documento (html);
  • la “testa” (head) è la parte che non viene visualizzata nel browser quando la pagina viene caricata. Contiene informazioni come il <title>, della pagina, i link ai CSS e altri metadata;
  • Infine il “corpo” (body) che definisce il corpo della pagina, cioè la “porzione visibile” di un qualsiasi documento HTML all’interno della quale sono presenti i tag come i titoli, i paragrafi, le colonne e così via …
Leggi articolo   Lista di parole

Un CSS per amico

Ogni pagina web può essere modificata attraverso l’utilizzo di CSS, ovvero dei fogli di stile che vanno a dare “forma e colore” ad ogni singolo elemento. Vediamo un esempio di modifica di stile al titolo creato attraverso il tag <h2>:

<h2 style="color: red; font-size: 30px; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;"> Pagina Web Completa</h2>

Il risultato :

Vediamo come sia possibile una completa modifica allo stile e al colore del titolo tramite l’utilizzo di semplice codice CSS. Come per tutte le materie informatiche vanno studiate le tecniche di utilizzo e le fondamenta del linguaggio affinché si possa realizzare un vero e proprio sito web completo e dal design affascinante.

Condividi il post

Condividi su facebook
Condividi su google
Condividi su twitter
Condividi su email
Condividi su whatsapp