HTML DIV Tutorial

November 1

Il tag <div> in HTML è il modo generico per rompere le pagine web in sezioni o \ "divisioni. \" Per utilizzare il tag <div> alla sua piena efficacia, è necessario combinare con il \ "id \" o \ "classe \" attributi, che permettono di dare ad ogni <div> un nome univoco, e quindi utilizzare i CSS per rendere ogni <div> guardare esattamente come si desidera. Utilizzando il tag <div> sicuramente rientra nel regno della codifica HTML avanzato, ma con un po 'di pratica, è probabile trovare che <div> è lo strumento necessario per creare qualsiasi tipo di pagina che si desidera.

Sintassi e Naming

I <div> funzioni di tag, come la maggior parte degli altri tag in HTML: utilizza un tag di apertura, <div> e un tag di chiusura, </ div>. È possibile denominare set individuali di <div> tag tutto quello che vuoi con il \ "id \" e \ "classe \" attributi in questo modo:

<Div id = \ "barra laterale \">
<! - Contenuto ->
</ Div>

<Div class = \ "articlebox \">
<! - Contenuto ->
</ Div>

La differenza tra \ "id \" e \ "classe \" è che non ci può essere un solo ID per pagina, ma ci possono essere molte classi che vuoi. Così, mentre le pagine potrebbero avere solo una barra laterale, che potrebbe avere un sacco di diversi scatole con articoli in loro. E ricordate, è possibile denominare gli ID e le classi tutto quello che vuoi; è possibile chiamare tua sidebar \ "bigtallsectionontheright \" se si vuole veramente.

Blocco vs. Inline

<Div> tag sono \ elementi "blocco \", il che significa che ogni volta che si crea un <div>, esiste sulla propria riga per impostazione predefinita. elementi in linea, invece, possono predefinita esistere sulla stessa linea qualcos'altro. La versione in linea di <div> si chiama <span>. In linea elementi possono andare all'interno elementi di blocco, ma non può essere il contrario; Non si può attaccare <span> tag intorno ad un blocco <div>, per esempio.

CSS

La combinazione di <div> tag con i tuoi fogli di stile è dove si può davvero iniziare a personalizzare. Cascading Style Sheets (CSS) o, se non si sa, sono regole per i documenti HTML che si può attaccare nella sezione <head> di ogni pagina. Ecco un semplice foglio di stile scritto in CSS:

<Style type = \ "text / css \">

div {
font-weight: bold
ANDARE
}

div # sidebar {
Larghezza: 200px
ANDARE
font-family: Arial
ANDARE
float: right
ANDARE
}

div.articlebox {
Larghezza: 500px
ANDARE
border: 1px solid nero
ANDARE
}

</ Style>

Come si può vedere, è possibile creare regole speciali per tutti i diversi elementi della pagina. In primo luogo, il foglio di stile dichiara che il testo all'interno di tutti i tag <div> sulla vostra pagina deve essere in grassetto. Poi, si dichiara che il \ "barra laterale \" <div> elemento deve essere larga 200 pixel, utilizzare il carattere Arial, e \ "galleggiare \" sul lato destro della pagina. Infine, dichiara che <div> elementi del \ "\" articlebox deve essere larga 500 pixel e hanno un bordo nero intorno a loro.

Se stai dichiarando le regole per un id, si utilizza un cancelletto per separare l'elemento dal nome (\ "div # sidebar \"). Se stai dichiarando regole per una classe, si utilizza un punto per separare l'elemento dal nome (\ "div.articlebox \").

L'unica parte veramente strana è la \ regola "galleggiare \". Ricordate come <div> è un elemento di blocco? Ciò significa che nulla può apparire a destra oa sinistra del <div>. Utilizzando il "galleggiante \" regola \, stai dicendo che invece di comparire nel proprio blocco, \ "galleggia \" a sinistra oa destra, consentendo altre cose per apparire accanto ad essa. E 'un concetto difficile abituarsi a; vedi Risorse per ulteriori informazioni.