La struttura di quasi tutti i siti web che troviamo e utilizziamo sul web è stata creata utilizzando HTML, un sistema standardizzato per classificare i file di testo. Interruzioni di pagina, paragrafi, lettere maiuscole, corsivo e altre funzionalità vengono tutte aggiunte utilizzando HTML. Utilizzando i tag, che istruiscono i browser su come gestire il contenuto, l'HTML aiuta a creare questa struttura.
Ad esempio, inseriremo una parola tra i tag strong>bold/strong> per farlo sembrare in grassetto. Il tag di apertura (/) indica dove vogliamo che finisca il grassetto, mentre il primo tag (/) indica dove vogliamo che inizi il grassetto. Serve come base per la maggior parte delle pagine web. Quindi, questo è il punto di partenza se stai imparando a programmare.
Come aggiungere spazio in HTML
Oltre a un singolo spazio tra le parole, tutti gli spazi vuoti che inseriamo nel testo HTML da visualizzare in un browser vengono ignorati. Di conseguenza, dobbiamo programmare gli spazi vuoti che desideriamo nel nostro documento. A qualsiasi riga di testo può essere aggiunto spazio in HTML. Ad esempio, potremmo inserire spazi vuoti nel contenuto di tabelle e paragrafi utilizzando l'oggetto HTML . Poiché nell'HTML manca una lettera della tastiera per uno spazio vuoto, dobbiamo inserire l'entità per aggiungere ogni spazio.
Può sembrare semplice, ma aggiungere spazio al nostro HTML potrebbe essere impegnativo. Esistono almeno cinque diversi approcci per prendersi cura di questo.
Durante questa formazione vedremo molti casi. Dimostrerà anche come utilizzare forme di spazio più elaborate.
esempi di NFA
Tutto questo è possibile in semplice HTML senza l'uso di CSS. Ma tieni presente che è meglio aggiungere spazio al tuo HTML tramite CSS.
Che aspetto ha uno spazio ASCII?
Lo spazio è rappresentato dal simbolo ASCII 20. Ma questa è solo la pratica accettata.
Esistono cinque diversi tipi di spazi che puoi utilizzare in HTML. Appaiono identici all'occhio inesperto, sebbene abbiano funzioni alquanto distinte.
Il carattere tab, che simula la pressione del tasto tab su una tastiera, è un'altra opzione. E il carattere di ritorno a capo, che simula la pressione del tasto Invio su una tastiera, è un altro esempio.
Spazio unificatore:
Nello spazio:
Spazio Em:
Spazio sottile:
Spazio standard:
Nuova linea (ritorno):
Carattere della scheda:
Il lato sinistro rappresenta il carattere , e il lato destro rappresenta il Codice HTML.
Quanto è largo un personaggio nello spazio?
Per i caratteri spazio, esistono quattro larghezze standard:
Cosa significa il segno dello spazio in HTML?
è l'entità HTML più utilizzata.
che ha creato la scuola
Per fare in modo che questo testo riempia uno spazio, prova a lanciarlo.
Immaginiamo, ad esempio, di voler aggiungere due spazi dopo una frase, ma il motore di rendering del sito web elimina uno degli spazi da solo. Per aggiungere due spazi, potremmo essere in grado di entrare
Spazio bianco: cos'è?
I caratteri non visibili sono chiamati spazi bianchi. Sono costituiti da:
- spazi,
- schede e
- interruzioni di riga (ritorni a capo, avanzamenti di riga o entrambi),
Perché questo è cruciale?
Queste lettere, ad esempio, non sono visibili in un elaboratore di testi, ma influenzano lo spazio e la formattazione del testo. Il browser condensa numerosi caratteri di spazio bianco in un unico spazio in HTML, che è distinto dagli altri linguaggi di markup.
Ci sono diversi spazi tra le parole in questo HTML e ogni riga termina con caratteri CRLF (ritorno a capo, avanzamento riga). Tutti i caratteri degli spazi bianchi verranno compressi dal browser.
Esempio
Le cose buone richiedono più tempo.
Produzione:
Inserimento di spazi
- Utilizza il segno di spazio unificatore del testo ( ) per fornire più spaziatura.
- La proprietà di riempimento CSS può essere utilizzata per aumentare lo spazio all'interno di un elemento in diverse circostanze.
- L'attributo margin CSS consente l'aggiunta di spazio extra attorno a un elemento.
Sebbene gli spazi unificatori siano utili, non dovrebbero essere utilizzati eccessivamente, poiché ciò potrebbe interferire con il modo in cui il materiale viene visualizzato nei browser. Inoltre, astieniti dall'utilizzare spazi unificatori per scopi di stile come il rientro o la centratura di un elemento su una pagina web; le richieste stilistiche dovrebbero invece essere gestite tramite CSS.
Oltre all'entità, HTML supporta anche le seguenti entità aggiuntive per numerosi spazi vuoti adiacenti:
L'entità carattere viene utilizzata per rappresentare uno spazio. En è un'unità di misura equivalente a 8 pixel o alla metà della larghezza di un em (16 pixel).
La sintassi per un contenuto en space in-between è Ecco un esempio di come utilizzare l'entità HTML &ensp:
Ecco un esempio per l'entità spaziale.
Produzione:
L'entità viene utilizzata nell'esempio precedente per aggiungere spazi all'HTML e la sua larghezza è 8 pixel. Possono essere utilizzati anche in più luoghi vicini.
Mantenere la formattazione e la spaziatura
Se desideri mantenere la formattazione e la spaziatura specificate, ci sono due scelte:
- Aggiunta di formattazione e spazio HTML
- Usare un
tag.
Utilizzando un tag 'pre'.
Questi risultati si verificano scambiando il file
tag per il
tag:
Esempio
pre> Good things take more time
Produzione:
Sì, il
tag keeps the formatting as it was originally, but it also switches to a monospaced typeface. All of these can be fixed; however, using the <pre> tag isn't always the best option. HTML spacing is a more popular method.</pre>
shehzad poonawala
Aggiunta di formattazione e spazio HTML
In alternativa, potremmo includere elementi HTML e simboli come i seguenti:
Le cose buone lo faranno
prenditi più tempo.
Produzione:
È richiesta un'interruzione di riga
elemento.
Spazio unificatore:
Il browser non comprime gli spazi aggiunti con il carattere di spazio unificatore ().
Inoltre, come suggerisce il nome, impedisce al browser di fratturare due parole in quel punto.
Le cose belle richiedono più tempo.
Produzione:
In questo modello vengono aggiunti 10 spazi verso l'inizio del testo. Un altro è messo tra ' prende ' che non verrà isolato al termine della frase a causa di limitazioni di spazio.
L'attributo di riempimento
Lo spazio interno di un elemento viene aumentato con l'attributo di riempimento CSS.
Assume valori compresi tra uno e quattro, iniziando dai lati superiore, destro, inferiore e destro.
IL 'div' l'elemento ha un riempimento di 20 pixel su tutti i lati.
Inner spacing is 20px with a div attribute
Produzione:
stringa nell'array c
L'attributo del margine
- Con l'attributo CSS margin, viene aggiunto spazio aggiuntivo attorno all'elemento.
- Assume valori compresi tra uno e quattro, iniziando dai lati superiore, destro, inferiore e destro.
IL 'div' l'elemento ha un margine di 40 pixel su tutti i lati.
Outer spacing is 20px using the div and margin attribute
Produzione:
Imbottitura vs margine
- Sia il riempimento che il margine aumentano lo spazio di un elemento.
- Il riempimento lascia un vuoto che è considerato un componente dell'elemento.
- Lo spazio creato dal margine è considerato esistente al di fuori dei limiti dell'elemento.
- L'area cliccabile, i colori dello sfondo e altri attributi del sito web sono influenzati da questa variazione.
Si potrebbe credere che aggiungere spazi in HTML sia semplice come premere continuamente la barra spaziatrice. Ma non è proprio così che funzionano le cose. Premendo la barra spaziatrice più di una volta non verranno aggiunti più spazi vuoti vicini come avverrebbe in un documento di testo. Il browser combinerà tutti gli spazi vuoti vicini in uno solo se lo facciamo in HTML. Per dimostrare cosa succede quando utilizziamo più spazi in HTML, guardiamo un esempio:
Pertanto, dopo aver utilizzato più volte la barra spaziatrice, non è possibile aggiungere altri spazi vuoti
Produzione:
Premendo ripetutamente la barra spaziatrice in HTML, come visto nell'esempio sopra, stiamo tentando di inserire numerosi spazi vuoti consecutivi in una pagina web. Tuttavia, i browser visualizzano più spazi vuoti adiacenti come un unico spazio e ignorano gli spazi prima, dopo e all'esterno dei componenti. Il fenomeno è noto come collasso degli spazi bianchi. Sebbene la compressione degli spazi bianchi possa essere fastidiosa a volte, esistono diverse tecniche per aggiungere più spazi sia in HTML che in CSS (fogli di stile a cascata).
&
L'entità carattere viene utilizzata per rappresentare lo spazio em. La larghezza di un em, che è di 16 pixel, è equivalente a un emsp.
La sintassi per gli spazi em nel testo è Ecco un esempio di come utilizzare l'entità HTML &emsp:
Ecco un esempio di entità spaziale.
Produzione
L'entità viene utilizzata nell'esempio sopra per aggiungere spazi all'HTML e la sua larghezza è 16 pixel. Possono essere utilizzati anche in più spazi adiacenti.
&sottile
L'entità carattere viene utilizzata per rappresentare lo spazio sottile, spesso noto come spazio ristretto. Un sesto di em è la larghezza di a &
Lo spazio sottile è scritto come contenuto intermedio nella sintassi. Ecco un esempio di come utilizzare l'entità HTML ' '
Questo è un esempio di entità spaziale sottile.
Produzione
L'entità viene utilizzata nell'esempio sopra per aggiungere spazi sottili all'HTML e la sua larghezza è un sesto di em. Sono utilizzati anche in diversi spazi adiacenti.
Di seguito è riportata un'arte ASCII di 'Ciao'. # # ##### # # # ##### # # # # # # # # # #####
Produzione:
I vantaggi dell'utilizzo degli spazi bianchi
Perché gli spazi bianchi sono importanti?
Lo spazio bianco è l’elemento base di un buon design, secondo me come designer. I designer si riferiscono allo spazio negativo, o allo spazio tra i pezzi di una composizione, quando usano il termine 'spazio bianco'. È lo spazio vuoto tra grafica, margini e margini interni su una pagina che non è stato contrassegnato con nulla. All'occhio viene dato un respiro visivo dallo spazio tra colonne, righe di testo e figure.
C’è una ragione convincente per cui gli spazi bianchi sono una componente cruciale del design. Potrebbe rivoluzionare il design del nostro sito Web e fornirgli numerosi vantaggi se applicato correttamente. Dobbiamo produrre e creare layout che siano piacevoli alla vista e incoraggiare i lettori a continuare. È fondamentale tenere costantemente presente che fornire un prodotto fantastico ai nostri clienti è la nostra priorità quando progettiamo per il web.
commento CSS
Lo spazio bianco può essere utilizzato per guidare il lettore da un elemento all'altro, creare armonia ed equilibrio e aiutare a marchiare un design. I nostri obiettivi principali sono rendere il sito Web semplice e chiaro e fornire contenuti che piaceranno e apprezzeranno i nostri utenti. Lo spazio bianco non è solo uno spazio 'vuoto'; è una funzionalità di progettazione che rende possibile l'esistenza degli elementi nella pagina. L'area raggiunge un equilibrio e funge da costante promemoria dell'esistenza di bellissimi design. Per trasmettere un messaggio chiaro, non è necessario creare un layout sovraccarico di testo e grafica.