Elementi e tecniche di layout HTML
Gli elementi di layout HTML definiscono il layout della pagina in cui gli elementi devono essere organizzati per ottenere una pagina ben strutturata. Mentre le tecniche di layout HTML abbelliscono gli elementi per ottenere una pagina in un formato presentabile. Tenendo conto dell'importanza degli elementi HTML e delle tecniche HTML, questa guida intende fornire i seguenti risultati di apprendimento:
- Quali sono gli elementi di layout HTML
- Framework CSS
- Layout della griglia
- Layout Flexbox
- Proprietà galleggiante
Elementi di layout HTML
L'HTML5 ha escogitato il supporto di vari elementi semantici che possono essere utilizzati per progettare il layout della pagina HTML. Si possono usare gli elementi semantici in modo organizzato per ottenere il layout desiderato. I seguenti elementi HTML sono impostati per impostare il layout della pagina di conseguenza.
: La sezione dell'intestazione definisce la parte di intestazione del documento
: Questo elemento viene utilizzato per creare una nuova sezione all'interno di una pagina
IL
: Un articolo all'interno di una pagina HTML può essere definito usando questo tag.
IL
: Questo elemento crea un'intestazione per sintetizzare qualsiasi informazione o dettaglio su quell'intestazione. Dopo aver fatto clic su quell'intestazione, le informazioni verrebbero visualizzate che vengono archiviate al suo interno.
: Il tag viene utilizzato per menzionare informazioni dettagliate su qualsiasi cosa/oggetto specifico.
: Rappresenta il piè di pagina di una sezione/documento.
Per saperne di più sugli elementi semantici HTML, fai clic qui.
Tecniche di layout HTML
Le tecniche di layout HTML aiutano a creare un layout multicolunno e le tecniche possono essere scelte da una delle seguenti forniture qui fornite.
Framework CSS
I framework CSS aiuterebbero a creare un layout reattivo e attraente di una pagina web. Questi quadri includono varie classi integrate dotate di stili, quindi non è necessario creare i tuoi stili. Tra i vari framework CSS, W3.CSS e bootstrap sono ampiamente utilizzati.
Come usare il W3.Framework CSS
È un framework CSS moderno ben definito che dovrebbe fornire un'alta funzionalità di stili per una pagina web. Il suo scopo è quello di fornire una diversa alternativa al framework Bootstrap. Per usare il W3.Classe CSS, devi semplicemente inserire il seguente link alla tua pagina HTML.
Come utilizzare il framework bootstrap
Il framework Bootstrap è un altro framework CSS che ha anche lezioni integrate per fornire vari tipi di stili alle pagine HTML. Per utilizzare il framework Bootstrap, hai due possibilità:
- Scarica bootstrap
- Utilizzare il collegamento CDN direttamente nel documento HTML (consigliato)
I seguenti collegamenti CDN ti assistono nell'importazione delle istanze bootstrap per modellare la tua pagina web.
Incolla il seguente collegamento nel tag Head (consigliato)
Posizionare il seguente script alla fine (consigliato) del tag del documento
Posizionando i link sopra, saresti in grado di utilizzare varie classi bootstrap per modellare la tua pagina HTML di conseguenza.
CSS galleggia
Questa tecnica è molto utile nel posizionare elementi HTML. Per impostazione predefinita, gli elementi vengono posizionati uno dopo l'altro. Tuttavia, è possibile utilizzare la proprietà galleggiante/chiara per manipolare il posizionamento predefinito di elementi. La proprietà chiara viene utilizzata per rompere la continuità della proprietà float, in modo tale che se si desidera posizionare l'elemento sulla riga successiva, è necessario utilizzare la proprietà chiara.
La funzionalità di CSS galleggia e proprietà chiare è facile da imparare ma difficile da implementare. L'esempio seguente si riferisce all'uso del galleggiante e delle proprietà chiare.
Html
Html
CSS
JavaScript
Il codice HTML di cui sopra crea tre divisioni con nomi di classe "Prim1","Prim2" E "Prim3".
CSS
.Prim1Float: a sinistra;
larghezza: 33%;
Background-color: Orange;
.Prim2
Float: a sinistra;
larghezza: 33%;
Background-color: LightskyBlue;
.Prim3
chiaro: a sinistra;
larghezza: 66%;
Background-color: Lightgreen;
L'ingrediente principale di questo esempio è il CSS che mostra come vengono utilizzate le proprietà galleggianti e chiare. Il float = "Sinistra"La proprietà viene utilizzata nei primi due Divs mentre il terzo div ha il clear = "Sinistra".
Produzione
Layout Flexbox
Il modulo CSS Flexbox (Box Flexible) aiuta a creare una struttura di layout flessibile senza utilizzare il galleggiante o qualsiasi elemento di posizionamento. Inoltre, gli elementi possono essere disposti in una riga o una colonna (solo una dimensione). Per utilizzare la tecnica CSS Flexbox, è necessario aggiungere class = "Flex-Container"All'elemento e al"Schermo"La proprietà di Flex-Container deve essere impostata su"flettere". Gli elementi figlio non richiedono alcuna classe, sono appena regolati con la classe genitore.
L'esempio fornito di seguito dimostra meglio l'uso di un layout flessibile.
.Flex-Containerdisplay: flex;
Html
CSS
Nel codice sopra, a div è creato con class = "Flex-Container"E la sua proprietà di visualizzazione è impostata su"flettere".
Produzione
Layout della griglia
Il layout della griglia consente di organizzare vari elementi figlio in modo presentabile. Il layout della griglia offre la disposizione in due dimensioni (con riga e colonna contemporaneamente). Per usare questo, la classe = "Grid-Container"È usato per l'elemento genitore mentre la classe ="Grid-Item"È usato per gli elementi figlio. Inoltre, il Schermo La proprietà del contenitore della griglia può essere impostata su griglia o a inline-grid.
.Grid-Containerdisplay: griglia;
Html
CSS
JavaScript
Nel codice sopra, la classe del genitore div è impostato per "Grid-Container"E gli articoli per bambini hanno lezioni"Grid-Item".
Produzione
L'output mostra la differenza principale tra layout della griglia e flessibile. Il layout della griglia è stato ampliato in multidimensions mentre il layout flessibile organizza gli elementi in un'unica dimensione.
Conclusione
Elementi di layout HTML e tecniche di layout HTML forniscono la funzionalità per progettare una pagina Web in modo presentabile. Per questo, in questo articolo sono forniti vari elementi semantici HTML e layout HTML. Gli elementi semantici servono al meglio lo scopo del loro utilizzo e quindi sono considerati un ingrediente importante della pagina web. Le tecniche di layout HTML possono includere framework CSS (bootstrap o W3.CSS), Float CSS, scatola flessibile CSS e griglia CSS.