ESEMPIO
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Il Tuo Sito</title>
<style>
/* Aggiungi qui i tuoi stili CSS se necessario */
</style>
</head>
<body>
<header>
<h1>Benvenuto nel mio sito</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#chi-siamo">Chi Siamo</a></li>
<li><a href="#contatti">Contatti</a></li>
</ul>
</nav>
<section id="home">
<h2>Home</h2>
<p>Benvenuto nel nostro sito. Qui troverai informazioni interessanti!</p>
</section>
<section id="chi-siamo">
<h2>Chi Siamo</h2>
<p>Siamo un gruppo di persone appassionate che...</p>
</section>
<section id="contatti">
<h2>Contatti</h2>
<p>Puoi contattarci all'indirizzo email: info@[Link]</p>
</section>
<footer>
<p>© 2023 Il Tuo Sito. Tutti i diritti riservati.</p>
</footer>
</body>
</html>
COMANDI HTML
1. <!DOCTYPE html>: Dichiara la versione di HTML che stai utilizzando (HTML5 nel caso più comune).
2. <html>: Elemento radice che contiene tutto il documento HTML.
3. <head>: Contiene informazioni come il titolo della pagina, collegamenti a fogli di stile (CSS), script
JavaScript e metadati.
4. <meta>: Fornisce informazioni supplementari sul documento, come il set di caratteri utilizzato e le
istruzioni per la visualizzazione su dispositivi mobili.
5. <title>: Definisce il titolo della pagina che appare nella barra del browser o nella scheda.
6. <body>: Contiene il contenuto effettivo della pagina web, come testo, immagini, link, ecc.
7. <h1> to <h6>: Intestazioni di livello 1 a 6, utilizzate per i titoli e i sottotitoli.
8. <p>: Definisce un paragrafo di testo.
9. <a>: Crea un link ipertestuale. L'attributo href specifica l'URL di destinazione.
10. <img>: Incorpora un'immagine nella pagina. L'attributo src specifica il percorso dell'immagine e
l'attributo alt fornisce una descrizione testuale dell'immagine. L'attributo alt è importante
per l'accessibilità e fornisce una descrizione testuale dell'immagine per gli
utenti che utilizzano lettori di schermo o che hanno disabilitato il caricamento
delle immagini.
11. <ul>, <ol>, <li>: Crea elenchi non ordinati (ul), ordinati (ol) e gli elementi dell'elenco (li).
12. <div>: Utilizzato per raggruppare e strutturare il contenuto. Spesso usato con CSS per applicare stili
o layout specifici. <div> è utile per raggruppare e strutturare il contenuto.
13. <span>: Simile a <div>, ma per porzioni di testo o elementi più piccoli. è ideale per applicare stili a
porzioni di testo.
14. <table>, <tr>, <td>: Crea tabelle e le relative righe e colonne.
15. <form>, <input>, <button>: Crea moduli per raccogliere input dall'utente.
16. <label>: Etichetta associata a un campo di input in un modulo.
17. <textarea>: Crea un'area di testo multi-linea all'interno di un modulo.
18. <select>, <option>: Crea menu a discesa.
19. <br>: Inserisce un'interruzione di riga.
20. <hr>: Inserisce una linea orizzontale.
21. <nav> e <ul>/<li>: Per la creazione di menu di navigazione.
22. <section>, <article>, <aside>:Per strutturare il contenuto in sezioni semantiche.
23. <figure> e <figcaption>: Per includere immagini o altri contenuti multimediali con didascalie.
24. <header>, <main>, <footer>: Per organizzare il contenuto in parti chiave della pagina.
25.
Proprietà di Base CSS:
1. Colore del testo:
color: #RRGGBB;
2. Colore di sfondo:
background-color: #RRGGBB;
3. Dimensione del testo:
font-size: 16px;
4. Tipo di carattere:
font-family: "Arial", sans-serif;
5. Allineamento del testo:
text-align: center;
6. Margine e padding:
margin: 10px; padding: 10px;
7. Bordo:
border: 1px solid #000;
Layout:
12. Larghezza e altezza:
width: 300px; height: 200px;
13. Visualizzazione e posizionamento:
display: block; position: relative;
14. Float:
float: left;
15. Flexbox:
display: flex; justify-content: space-between; align-items: center;
16. Grid:
display: grid; grid-template-columns: 1fr 1fr 1fr;
17. Pseudo classi: Hover
selector:hover {property: value;}
UTILI CSS GRAFICH
CSS:
1. Box Model:
margin, padding, border per la gestione del modello box.
2. Selezione e Pseudo-classi:
:hover, :active, :focus per interattività.
3. position e z-index:
Per controllare la posizione degli elementi nella pagina.
4. flex e grid (CSS Grid Layout):
Per la creazione di layout flessibili e complessi.
5. Transizioni e Animazioni:
transition e animation per aggiungere effetti di transizione e animazione.
6. font-family e font-size:
Per controllare il tipo di carattere e la dimensione del testo.
7. background e linear-gradient:
Per creare sfondi interessanti e gradienti.
8. box-shadow e text-shadow:
Per aggiungere ombre agli elementi.
9. Media Queries:
Per rendere il sito web responsive su diversi dispositivi.
10. transform e transition:
Per effetti di trasformazione come rotazione e scaling.
Modificare sfondo intera pagina
body {
background-color: #f0f0f0; /* Cambia il colore di sfondo */
/* oppure */
background-image: url('[Link]'); /* Usa un'immagine come sfondo */
background-repeat: no-repeat; /* Impedisce la ripetizione dell'immagine */
background-size: cover; /* Adatta l'immagine alla dimensione del contenitore */
}
In questo esempio, background-color definisce un colore di sfondo, mentre
background-image consente di utilizzare un'immagine come sfondo. Puoi combinare
queste proprietà a seconda delle tue esigenze.
Modifica dello sfondo di un'area specifica:
#mio-div {
background-color: #fff; /* Cambia il colore di sfondo */
/* oppure */
background-image: url('[Link]'); /* Usa un'immagine come sfondo */
background-repeat: no-repeat; /* Impedisce la ripetizione dell'immagine */
background-size: cover; /* Adatta l'immagine alla dimensione del contenitore */
Questi sono solo esempi di base. Puoi personalizzare ulteriormente lo sfondo
utilizzando altre proprietà CSS come background-position , background-attachment ,
e così via, a seconda delle tue esigenze specifiche.7
FONT
1. Definizione del Tipo di Carattere (font-family):
Puoi specificare il tipo di carattere che desideri utilizzare per il testo con la proprietà font-family.
body { font-family: "Helvetica", sans-serif; }
In questo esempio, il browser cercherà di utilizzare il font "Helvetica". Se questo non è disponibile, utilizzerà
un tipo di carattere sans-serif di fallback.
2. Dimensione del Testo (font-size):
La dimensione del testo può essere controllata tramite la proprietà font-size.
h1 { font-size: 24px; }
Puoi specificare la dimensione in pixel, em, rem o altre unità di misura.
3. Colore del Testo (color):
La proprietà color controlla il colore del testo.
p { color: #333; /* Colore esadecimale */ }
Puoi utilizzare nomi di colore, valori RGB o esadecimali per definire il colore del testo.
4. Stile del Testo (font-style):
La proprietà font-style può essere utilizzata per impostare il testo in corsivo o normale.
em { font-style: italic; }
5. Peso del Carattere (font-weight):
La proprietà font-weight controlla lo spessore del testo.
strong { font-weight: bold; }
Puoi utilizzare valori come "bold", "normal", numeri da 100 a 900, o "bolder" e "lighter" per specificare il
peso del carattere.
6. Trasformazioni del Testo (text-transform):
text-transform può essere utilizzato per trasformare il testo in maiuscolo o minuscolo.
.uppercase-text { text-transform: uppercase; }
Puoi utilizzare i valori uppercase, lowercase, o capitalize.
7. Decorazioni del Testo (text-decoration):
La proprietà text-decoration gestisce decorazioni come sottolineatura o linee attraverso il testo.
a { text-decoration: none; /* Rimuove la sottolineatura dai link */ }
8. Allineamento del Testo (text-align):
Puoi utilizzare text-align per allineare il testo.
div { text-align: center; }
9. Caratteristiche Avanzate con @font-face:
Puoi utilizzare @font-face per incorporare tipi di carattere personalizzati nel tuo sito web.
@font-face { font-family: 'MioCarattere'; src: url('percorso/mio-carattere.woff2') format('woff2'); } body
{ font-family: 'MioCarattere', sans-serif; }
Assicurati di avere i diritti d'autore appropriati prima di utilizzare tipi di carattere personalizzati.
Questi sono solo alcuni degli esempi di come puoi gestire i font in HTML e CSS. Puoi combinare queste
proprietà per ottenere stili di testo personalizzati e adattarli alle tue esigenze di design.
FONT CONSIGLIATI
1. Sans-Serif:
Roboto: Un font sans-serif moderno e versatile, progettato per essere leggibile su schermi digitali.
Open Sans: Pulito e amichevole, adatto sia per il corpo del testo che per i titoli.
Lato: Un font sans-serif elegante con un aspetto moderno.
2. Serif:
Georgia: Un classico font serif con una buona leggibilità su schermi e stampa.
Times New Roman: Tradizionale e ampiamente utilizzato, particolarmente adatto per il testo
stampato.
Merriweather: Un font serif moderno con una buona leggibilità, adatto sia per il corpo del testo che
per i titoli.
3. Monospace:
Courier New: Un font monospace pulito e leggibile, spesso utilizzato per la scrittura di codice.
Inconsolata: Progettato appositamente per la programmazione, offre una buona leggibilità e
chiarezza.
4. Google Fonts:
Google Fonts è una vasta raccolta di font gratuita e open source. Alcuni popolari includono:
Montserrat: Versatile e moderno, adatto per titoli e testo di grandi dimensioni.
Raleway: Elegante e leggibile, spesso usato per titoli.
Nunito: Un font sans-serif amichevole e pulito.
5. Font Awesome:
Se hai bisogno di icone, Font Awesome è una libreria di icone basata su font che puoi incorporare
nel tuo sito web.
COLLEGAMENTI ESTERNI
Collegamento a un Sito Web Esterno:
<a href="[Link] target="_blank">Visita il Sito Web Esterno</a>
href: L'attributo href specifica l'URL del sito web esterno.
target="_blank": L'attributo target="_blank" apre il link in una nuova finestra o scheda del browser.
Collegamento a un Video di YouTube:
<a href="[Link] target="_blank">Guarda il Video su
YouTube</a>
Puoi anche incorporare direttamente un video di YouTube nel tuo sito utilizzando l'elemento <iframe>. Ecco
un esempio:
<iframe width="560" height="315" src="[Link]
frameborder="0" allowfullscreen></iframe>
src: L'attributo src specifica l'URL del video di YouTube.
width e height: Specificano le dimensioni dell'iframe.
Assicurati di sostituire gli URL nei codici di esempio con quelli effettivi dei siti web o dei video di YouTube
che desideri collegare. Inoltre, quando si collega a siti web esterni, è sempre una buona pratica includere
target="_blank" per aprire il link in una nuova finestra o scheda e non far uscire gli utenti dal tuo sito.
GIF
<img src="[Link]" alt="Descrizione dell'animazione">
Puoi anche controllare l'aspetto dell'animazione utilizzando le proprietà CSS. Ad esempio, puoi definire la
larghezza e l'altezza dell'immagine e applicare stili aggiuntivi se necessario:
img { width: 300px; height: 200px; border: 2px solid #ccc; border-radius: 10px; }
Ricorda che le GIF possono essere pesanti in termini di dimensioni di file, quindi assicurati di ottimizzare le
tue immagini per ridurre i tempi di caricamento della pagina.