Non sai come formattare la tua pagina HTML e stai impazzendo con l’uso dei tag e del CSS? Come primo suggerimento, dovresti dare un occhio alla guida HTML che abbiamo pubblicato nel nostro sito, che ti fornirà gli elementi basilari da conoscere. Subito dopo puoi iniziare a leggere la nostra rapida e praticissima guida per formattare HTML come desideri.
Ogni esempio contiene uno snippet di codice che potete riutilizzare a vostro piacimento. Buon lavoro!
Suggerimenti per organizzare al meglio HTML, CSS e JS
In genere la pagina HTML viene suddivisa in head e body, dove nell’head mettiamo la parte CSS mentre nel body, sul fondo, in genere mettiamo il codice Javascript. Questa regola non è obbligatoria al 100% ma tendenzialmente è meglio rispettarla che evitare di farlo.
Usa il codice
189ed7ca010140fc2065b06e3802bcd5 per ricevere 5 € dopo l'iscrizione
Quando andiamo a stilizzare un pezzo di HTML dobbiamo anzitutto definire un “contenitore” (container) che deve essere visto come un “delimitatore” della zona che vogliamo essere affetta dall’effetto. Ci sono due modi per farlo: usare un container implicito come un tag (quindi ad esempio <strong>, <u> e cosଠvia), oppure definirne uno esplicito, del tipo <span>, associarci una classe oppure un id, ad esempio <span id=”pippo123″> oppure <span class=”peppe123″>, e poi delimitarlo all’interno del testo desiderato: se abbiamo
Testo originale senza formattazione, voglio applicare una formattazione del testo qui.
lo riscriviamo come:
Testo originale con formattazione, voglio applicare una formattazione del testo <span id="pippo123">qui</span>.
Nel CSS sarà immediato creare una regola del tipo:
#pippo123{ ... }
ed inserire al posto dei tre puntini l’effetto che vogliamo ottenere, nel formato:
etichetta_css: valore;
(attenzione ai due punti e al punto e virgola finale!), quindi avremo, ad esempio:
#pippo123{ font-weight: bold; }
che renderà il testo di cui sopra in questo modo:
Testo originale con formattazione, voglio applicare una formattazione del testo qui.
Come fare il grassetto/bold in HTML
Il grassetto o bold su un carattere, una stringa o una porzione di testo si può ottenere in due modi: con il tag <strong> oppure con il tag <b>. L’effetto è identico, cambia solo leggermente il contesto (il primo è HTML semantico 5, il secondo è HTML 4).
Esempio
testo in <strong> grassetto </strong>
testo in grassetto
Come fare il corsivo in HTML
Il corsivo su un carattere, una stringa o una porzione di testo si può ottenere in due modi: con il tag <em> oppure con il tag <i>. L’effetto è identico, cambia solo leggermente il contesto (il primo è HTML semantico 5, il secondo è HTML 4).
Esempio
testo in <em> corsivo </em>
testo in corsivo
Come togliere il grassetto/corsivo in CSS
Non mancano i casi pratici in cui è necessario rimuovere l’effetto e “normalizzare” il testo; in questi casi è necessario creare una regola CSS del tipo:
font-weight: normal;
oppure, se non dovesse funzionare, potete provare cosà¬:
font-weight: normal!important;
Testo tutto in maiuscolo (CSS)
<!DOCTYPE html> <html> <head>
</head> <body> <p id="pippo123">Testo che sarà reso in Maiuscolo, anche se è SCRITTO diversamente. </p> </body> </html>
Testo interamente in minuscolo (CSS)
<!DOCTYPE html> <html> <head>
</head> <body> <p id="pippo123">Testo che sarà reso in MINUSCOLO, anche se è SCRITTO diversamente. </p> </body> </html>
Testo con la prima lettera maiuscola (capitalize, CSS)
<!DOCTYPE html> <html> <head>
</head> <body> <p id="pippo123">Testo che sarà reso con la prima iniziale maiuscola, anche se è SCRITTO diversamente. </p> </body> </html>
👇 Contenuti da non perdere 👇
- Cellulari 📱
- Internet 💻
- Lavoro 🔧
- monitoraggio servizi online 📈
- Programmare 🖥
- Reti 💻
- Scrivere 🖋
- Spiegoni artificiali 🎓
- 💬 Il nostro canale Telegram: iscriviti
- 🟠 Hosting SSD più veloce? Vediamo se è vero!
- 🟠 Come scaricare legalmente Microsoft Office
- 🟠 Che cosa vuol dire triggerare / triggerato?
