Basi di Web Design

Basi di Web Design con introduzioni al linguaggio HTML, nozioni di CSS, preparazione di functions.php con esempi pratici.

Tabella dei Contenuti

Linguaggio HTML

HTML è il linguaggio di markup standard per la creazione di pagine Web.

Che cos’è l’HTML?

  • HTML sta per Hyper Text Markup Language
  • HTML è il linguaggio di markup standard per la creazione di pagine Web
  • L’HTML descrive la struttura di una pagina Web
  • HTML è costituito da una serie di elementi
  • Gli elementi HTML dicono al browser come visualizzare il contenuto
  • Gli elementi HTML etichettano parti di contenuto come “questo è un titolo”, “questo è un paragrafo”, “questo è un collegamento”, ecc.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Titolo Pagina</title>
</head>
<body>

<h1>Intestazione</h1>
<p>Paragrafo</p>

</body>
</html>

 

Esempio spiegato

  • La dichiarazione <!DOCTYPE html> dichiarazione definisce che questo documento è un documento HTML5
  • L’elemento <html> è l’elemento radice di una pagina HTML
  • L’elemento <head> contiene meta informazioni sulla pagina HTML
  • L’elemento <title> specifica un titolo per la pagina HTML (che viene mostrato nella barra del titolo del browser o nella scheda della pagina)
  • L’elemento <body> elemento definisce il corpo del documento, ed è un contenitore per tutti i contenuti visibili, come intestazioni, paragrafi, immagini, collegamenti ipertestuali, tabelle, elenchi, ecc.
  • L’elemento <h1> elemento definisce un’intestazione grande
  • L’elemento <p> definisce un paragrafo

Che cos’è un elemento HTML?

Un elemento HTML è definito da un tag di inizio, alcuni contenuti e un tag di fine:

< tag iniziale > Il contenuto va qui… < /tag finale >

L’ elemento HTML è tutto, dal tag di inizio al tag di fine.

Lo scopo di un browser web (Chrome, Edge, Firefox, Safari) è leggere documenti HTML e visualizzarli correttamente.

Un browser non visualizza i tag HTML, ma li utilizza per determinare come visualizzare il documento:

 

Attributi HTML

  • Tutti gli elementi HTML possono avere attributi
  • Gli attributi forniscono informazioni aggiuntivesugli elementi
  • Gli attributi sono sempre specificati nel tag iniziale
  • Gli attributi di solito sono in coppie nome/valore come: nome=”valore”

Di seguito attributi e tag HTML più importanti.

  1. Link

Il tag <a> definisce un collegamento ipertestuale. L’ attributo href specifica l’URL della pagina a cui va il collegamento.

Esempio

<a href=”url”>testo visualizzato</a>

<a href=”https://www.illizen.it”>Visita illizen</a>

 

  1. Immagini

Il tag <img> viene utilizzato per incorporare un’immagine in una pagina HTML. L’ attributo src specifica il percorso dell’immagine da visualizzare.

Esempio

<img src=”https://www.illizen.it/ immagine.jpg”>

Note: le immagini esterne potrebbero essere protette da copyright. Se non ottieni il permesso di usarlo, potresti violare le leggi sul copyright. Inoltre, non è possibile controllare le immagini esterne; può essere rimosso o modificato improvvisamente.

Il tag <img> dovrebbe contenere anche gli attributi width e height, che specificano la larghezza e l’altezza dell’immagine (in pixel):

Esempio

<img src=”https://www.illizen.it/ immagine.jpg” width=”500″ height=”600″>

L’attributo alt per il tag <img> specifica un testo alternativo per un’immagine, se l’immagine per qualche motivo non può essere visualizzata. Ciò può essere dovuto a una connessione lenta ad esempio.

Esempio

<img src=”https://www.illizen.it /immagine.jpg ” alt=”immagine di test”>

  1. Stile

L’attributo style viene utilizzato per aggiungere stili a un elemento, come colore, carattere, dimensione e altro.

Esempio

<p style=”color:red;”>Testo in rosso </p>

<h1 style=”font-family:verdana;”>Titolo con font personalizzato</h1>

<p style=”font-size:160%;”>Testo grandezza personalizzata.</p>

<h1 style=”text-align:center;”>Titolo centrato</h1>

<p style=”background-color:Orange;”>Testo con sfondo colorato</p>

 

  1. Intestazioni

Le intestazioni HTML sono titoli o sottotitoli che desideri visualizzare su una pagina web.

 

Esempio

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

I titoli sono importanti. I motori di ricerca utilizzano le intestazioni per indicizzare la struttura e il contenuto delle tue pagine web.

<h1> le intestazioni dovrebbero essere usate per le intestazioni principali, seguite dalle <h2> intestazioni, poi quelle meno importanti <h3> e così via.

 

  1. Paragrafi

L’elemento <p> definisce un paragrafo.

Un paragrafo inizia sempre su una nuova riga e i browser aggiungono automaticamente uno spazio bianco (un margine) prima e dopo un paragrafo.

Esempio

<p> Questo è un paragrafo </p>

<p> Questo è un’altro paragrafo </p>

L’ elemento <br> HTML definisce un’interruzione di riga (testo a capo senza iniziare un nuovo paragrafo).

Esempio

<p>Prima riga<br>seconda<br>terza.</p>

Nota: Il <br>tag è un tag vuoto, il che significa che non ha tag di fine.

  1. Formattazione Testo

Gli elementi di formattazione sono stati progettati per visualizzare tipi speciali di testo. Di seguito le formattazioni più utilizzate:

 

<b> – Testo grassetto

<strong> – Testo importante

<i> – Testo in corsivo

<mark> – Testo Evidenziato

<del> – Testo Barrato

<ins> – Testo Sottolineato

 

Provare codice HTML con anteprima in tempo reale: CodePen

 

Nozioni di CSS

I fogli di stile a cascata (CSS) vengono utilizzati per formattare il layout di una pagina web.

 

Cos’è il CSS?

 

Con i CSS, puoi controllare il colore, il carattere, la dimensione del testo, la spaziatura tra gli elementi, il modo in cui gli elementi sono posizionati e disposti, quali immagini di sfondo o colori di sfondo devono essere utilizzati, diverse visualizzazioni per diversi dispositivi e dimensioni dello schermo e molto di piu!

 

Sintassi

Fonte Immagine: https://www.w3schools.com

Il selettore punta all’elemento HTML a cui vuoi applicare lo stile.

Il blocco di dichiarazione contiene una o più dichiarazioni separate da punto e virgola.

Ogni dichiarazione include un nome di proprietà CSS e un valore, separati da due punti.

Più dichiarazioni CSS sono separate da punto e virgola e i blocchi di dichiarazione sono circondati da parentesi graffe.

 

 

Utilizzo dei CSS

I CSS possono essere aggiunti ai documenti HTML in 3 modi:

Inline: utilizzando l’attributo style all’interno degli elementi HTML.

Interno: utilizzando un elemento <style> nella sezione <head>.

Esterno: utilizzando un elemento <link> per collegarsi a un file CSS esterno.

Il modo più comune per aggiungere CSS è mantenere gli stili in file CSS esterni.

 

CSS in linea

Un CSS in linea viene utilizzato per applicare uno stile univoco a un singolo elemento HTML.

 

Un CSS in linea utilizza l’attributo style di un elemento HTML.

 

L’esempio seguente imposta il colore del testo <h1> dell’elemento su blu e il colore del testo <p> dell’elemento su rosso:

Esempio

<h1 style=”color:blue;”>Titolo colore blu</h1>

<p style=”color:red;”>Testo di colore rosso</p>

 

CSS interno

Un CSS interno viene utilizzato per definire uno stile per una singola pagina HTML.

Un CSS interno è definito nella sezione <head> di una pagina HTML, all’interno di un elemento <style>.

L’esempio seguente imposta il colore del testo di tutti gli elementi <h1> (su quella pagina) su blu e il colore del testo di tutti gli elementi <p> elementi su rosso. Inoltre, la pagina verrà visualizzata con un colore di sfondo arancione:

Esempio

<!DOCTYPE html>

<html>

<head>

<style>

body {background-color: orange;}

h1   {color: blue;}

p    {color: red;}

</style>

</head>

<body>

 

<h1>Titolo</h1>

<p>Paragrafo</p>

 

</body>

</html>

 

CSS esterno

Un foglio di stile esterno viene utilizzato per definire lo stile per molte pagine HTML.

Per utilizzare un foglio di stile esterno, aggiungi un collegamento ad esso nella sezione <head> di ogni pagina HTML:

Esempio

<!DOCTYPE html>

<html>

<head>

  <link rel=”stylesheet” href=”styles.css”>

</head>

<body>

 

<h1>Intestazione</h1>

<p>Paragrafo</p>

 

</body>

</html>

Il foglio di stile esterno può essere scritto in qualsiasi editor di testo. Il file non deve contenere alcun codice HTML e deve essere salvato con estensione .css.

 

Ecco come appare il file “styles.css”:

 

“styles.css”:

body {

  background-color: orange;

}

h1 {

  color: blue;

}

p {

  color: red;

}

 

Colori, caratteri e dimensioni CSS

Qui dimostreremo alcune proprietà CSS comunemente usate.

La proprietà color CSS definisce il colore del testo da utilizzare.

La proprietà font-family CSS definisce il carattere da utilizzare.

La proprietà font-size CSS definisce la dimensione del testo da utilizzare.

 

Esempio

Uso delle proprietà CSS color, font-family e font-size:

 

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

  color: blue;

  font-family: verdana;

  font-size: 300%;

}

p {

  color: red;

  font-family: courier;

  font-size: 160%;

}

</style>

</head>

<body>

 

<h1>Intestazione</h1>

<p>Paragrafo</p>

 

</body>

</html>

 

Bordo, Imbottitura e Margine CSS

La proprietà border CSS definisce un bordo attorno a un elemento HTML.

Esempio

Utilizzo della proprietà del Bordo, Imbottitura e Margine CSS (caratterizziamo un paragrafo aggiungendo un bordo solido di colore arancione, uno spazio tra il testo e il bordo ed un margine al di fuori del bordo rispetto ad un altro elemento):

 

p {

  border: 2px solid orange;

  padding: 30px;

 margin: 50px;

}

 

Immagine Background

Per aggiungere un’immagine di sfondo su un elemento HTML, usa l’attributo style HTML e la proprietà background-image CSS :

Esempio:
<div style=”background-image: url(‘https://www.illizen.it/ immagine.jpg’);”>

Il selettore di classi CSS

Il selettore di classe seleziona gli elementi HTML con un attributo di classe specifico.

 

Per selezionare elementi con una classe specifica, scrivi un carattere punto (.), seguito dal nome della classe.

Esempio

In questo esempio tutti gli elementi HTML con class=”center” saranno rossi e allineati al centro:

 

.center {

  text-align: center;

  color: red;

}

Esempio:

Selezione universale ( seleziona tutti gli elementi HTML della pagina):

* {

  text-align: center;

  color: blue;

}

Preparazione di functions.php

Cos’è il linguaggio PHP?

PHP (acronimo ricorsivo per PHP: Hypertext Preprocessor) è un linguaggio di scripting generico open source ampiamente utilizzato che è particolarmente adatto per lo sviluppo web e può essere incorporato in HTML.

La vera potenza di PHP deriva dalle sue funzioni.

PHP ha più di 1000 funzioni integrate e inoltre puoi creare le tue funzioni personalizzate.

Funzioni PHP definite dall’utente

Oltre alle funzioni PHP integrate, è possibile creare le proprie funzioni.

  • Una funzione è un blocco di istruzioni che può essere utilizzato ripetutamente in un programma.
  • Una funzione non verrà eseguita automaticamente al caricamento di una pagina.
  • Una funzione verrà eseguita da una chiamata alla funzione.

Una dichiarazione di funzione definita dall’utente inizia con la parola function:

 

Sintassi

Function nomedellafunzione() {

  codice da eseguire;

}

Nota: il nome di una funzione deve iniziare con una lettera o un carattere di sottolineatura. I nomi delle funzioni NON fanno distinzione tra maiuscole e minuscole.

 

Nell’esempio seguente, creiamo una funzione denominata “saluto()”. La parentesi graffa di apertura ( { ) indica l’inizio del codice della funzione e la parentesi graffa di chiusura ( } ) indica la fine della funzione. La funzione restituisce “Ciao!”. Per chiamare la funzione basta scrivere il suo nome seguito da parentesi ():

 

Esempio

<!DOCTYPE html>

<html>

<body>

<?php

function saluto() {

  echo “Ciao!”;

}

saluto(); // call the function

?>

</body>

</html>

 

A cosa servono le funzioni php?

A volte, è necessario eseguire la stessa attività più volte in uno script. Ad esempio, supponiamo di voler mostrare un messaggio che accoglie un utente in questo modo:

 

<?php

 

echo ‘Benvenuto!’;

Se vuoi mostrare lo stesso messaggio in altri posti, devi copiare la dichiarazione sopra e incollarla in molti posti.

Ma quando vuoi cambiare il messaggio da Benvenuto! a Bentornato! devi cambiarlo in vari punti. Renderà il codice molto difficile da costruire.

È qui che entrano in gioco le funzioni. Una funzione consente di assegnare un nome a un blocco di codice e riutilizzare quel blocco di codice in più posizioni senza duplicare il codice.

Per definire e chiamare una funzione definita dall’utente, utilizzare i seguenti passaggi:

Innanzitutto, definisci una funzione chiamata benvenuto() in questo modo:

<?php

 

function benvenuto()

{

          echo ‘Benvenuto!’;

}

Quindi, chiama la funzione benvenuto() in qualsiasi punto in cui desideri mostrare il messaggio:

<?php

 

benvenuto();

 

Successivamente, se desideri avere un messaggio diverso, puoi modificarlo centralmente nella funzione benvenuto() anziché in più posizioni.

Utilizzando una funzione, puoi riutilizzare un blocco di codice e semplificare la manutenzione dello script.

 

Definire una funzione

 

Per definire una funzione, si utilizza la seguente sintassi:

<?php

 

function function_name() {

    statement;

}

 

Analizzando la sintassi precedente:

 

Innanzitutto, specifica il nome della funzione seguito dalla parola chiave function. Il nome della funzione deve iniziare con una lettera o un carattere di sottolineatura (_) seguito da zero o più lettere, o cifre. Senza l’utilizzo di spazi.

In secondo luogo, definire una o più istruzioni all’interno del corpo della funzione. Il corpo della funzione inizia con { e termina con }.

Come nell’esempio sopra, si può definire una funzione chiamata benvenuto()come segue:

<?php

 

function benvenuto()

    echo ‘Benvenuto!’;

}

 

In questo esempio, il nome della funzione è welcome. La funzione benvenuto() visualizza il messaggio scelto.

La funzione benvenuto() non ha input. Mostra il messaggio di benvenuto.

In pratica, le funzioni spesso accettano input. Gli ingressi rendono le funzioni riutilizzabili e più utili. E gli input di una funzione sono chiamati parametri.

Una funzione può avere zero o più parametri. Per aggiungere uno o più parametri a una funzione, puoi utilizzare la seguente sintassi:

<?php

 

function function_name(parameter1, parameter2, …) {

}

 

All’interno del corpo della funzione, puoi utilizzare i parametri come le variabili. Infatti i parametri sono le variabili locali.

 

Ad esempio, se desideri accogliere gli utenti tramite i loro nomi utente, puoi aggiungere un parametro $username alla funzione welcome come segue:

<?php

 

function welcome_user($username)

{

          echo ‘Welcome ‘ . $username;

}

 

All’interno del corpo della funzione, puoi utilizzare i parametri come le variabili. Infatti i parametri sono le variabili locali.

Ad esempio, se desideri accogliere gli utenti tramite i loro nomi utente, puoi aggiungere un parametro $username alla funzione welcome come segue:

<?php

 

function benvenuto_utente($username)

{

          echo ‘Benvenuto’ . $username;

}

 

La funzione benvenuto_utente() ha un parametro $username. Visualizza un messaggio di benvenuto all’utente concatenando il messaggio Benvenuto con $username.

 

Chiama una funzione

Quando una funzione non ha alcun parametro, puoi chiamare la funzione usando il suo nome seguito da parentesi in questo modo:

 

<?php

 

function_name();

 

Per esempio:

 

<?php

 

function welcome()

{

          echo ‘Welcome!’;

}

benvenuto();

 

La funzione benvenuto() mostra il seguente messaggio:

Benvenuto!

Restituisci un valore

 

Una funzione può restituire un valore. Per restituire un valore da una funzione, usi l’istruzione return:

 

return value;

 

L’istruzione return termina immediatamente l’esecuzione della funzione corrente e restituisce il valore.

Il valore può essere un valore letterale come un numero e una stringa. Inoltre, può essere una variabile o un’espressione.

 

Codice HTML all’interno della funzione

In genere, una funzione contiene solo codice PHP. Tuttavia, è possibile definire una funzione che contiene codice HTML. La seguente funzione benvenuto() visualizza il messaggio di benvenuto racchiuso in un span tag:

 

<?php function Benvenuto_utente($username) { ?>

          <span>Benvenuto <?= $username ?></span>

<?php } ?>

 

Tag HTML <span>

 

Ad esempio un elemento <span> che viene utilizzato per colorare una parte di un testo:

 

<p>Mi piacciono gli occhi <span style=”color:blue”>blu</span> e grandi.</p>

Definizione e utilizzo

  • Il tag <span> è un contenitore in linea utilizzato per contrassegnare una parte di un testo o una parte di un documento.
  • Il tag <span> è facilmente stilizzato da CSS o manipolato con JavaScript utilizzando l’attributo class o id.
  • Il tag <span> è molto simile all’elemento <div> , ma <div> è un elemento a livello di blocco mentre <span> è un elemento in linea.

Condividi

Condividi su facebook
Facebook
Condividi su twitter
Twitter
Condividi su linkedin
LinkedIn
Condividi su telegram
Telegram
Condividi su whatsapp
WhatsApp
Condividi su email
Email

Articoli Correlati

Iscriviti alla Newsletter

Invieremo solo i migliori Articoli per Te, non abbiamo bisogno di Spam. Leggi la Privacy Policy di illizen.it