Divisioni (< div >) in HTML dividono le sezioni della pagina per scopi di styling. L'aggiunta di un tag < div > al codice HTML della pagina web crea un naturale interruzione di riga o contenitore separato. Divs contengono contengono elementi di blocco, tali < h1 > e < p > ed elementi inline. Testo non può estendersi a due div. Lo stile di un paragrafo con due diversi div crea due distinti blocchi di testo.

La soluzione consiste nell'utilizzare un tag < span >. Il tag < span > è molto simile al tag < div > in quanto separa aree della pagina per lo styling, tranne esso può contenere solo elementi inline. Utilizzare < span > per modificare gli stili all'interno di un paragrafo, una singola riga di testo o una singola parola.

Istruzioni

1

Aprire l'editor HTML e creare la pagina HTML. Inserire il codice seguente per creare la pagina:

< html >

< head >

<style type="text/css">

</style>

< / head >

< corpo >

<div id= "content">

<p>Hello, World!</p>

</div>

< / body >

< / html >

Il tag < html > Crea la pagina web. Il tag < head > detiene i meta dati e stili in linea della pagina, ma non viene visualizzato sullo schermo. Il tag < style > indica al browser come stile della pagina. Il browser legge e Visualizza tutto tra i tag < body >. Il tag < div > Crea un contenitore per il testo. Il tag < p > rende un paragrafo. Utilizzare "Hello, World!" come testo di supporto del posto per questo esercizio.

2

Inserire lo stile tra i tag < style >. Questa pagina sarà stile il div "contenitore" e "Hello, World!" Il contenitore sarà il 50% della larghezza dello schermo. "Hello, World!" avrà due stili. "Ciao," è il carattere di colore rosso e "World!" è il carattere verde. Rappresenta il segno di cancelletto (#) "id" per l'elemento div e il punto (.) davanti a "Ciao" e "mondo" rappresenta "classe".

< style type = "text/css" >

contenitore () {

Larghezza: 50%;

}

.Hello () {

colore: rosso;

}

{. World

colore: verde;

}

< / stile >

3

Aggiungere il tag span "Hello", e "Mondo!" rispettivamente. Inserire il nome della classe dopo "span". Il tag di paragrafo (< p >) non ha una classe o un id perché esso non era in stile in questo esercizio. Browser Internet creare blocchi per i paragrafi per impostazione predefinita.

< div id = "contenitore >

<p>

< span class = "hello" > "Hello, < / span >< span class ="mondo"> mondo! < / span >

</p>

< / div >

4

Salvare il documento come "helloworld.html". Fare clic su nuova pagina da aprire in un browser per esaminarlo per eventuali errori.

Consigli & Avvertenze

• Trattino i tag nidificati per mantenere il codice pulito e organizzato.
• Chiudere tutti i tag per evitare errori del browser.
• Nelle vicinanze tutti span tag per evitare errori del browser.