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:

Spazio di larghezza standard:Poiché non comporta un'interruzione di riga (noto anche come ritorno a capo), questo è anche noto come 'spazio di non interruzione di riga'.Spazio Em:Si chiama 'Em' perché, qualunque sia il carattere che usi, ha la stessa larghezza della lettera M. (Se abbiamo sentito la frase 'em-dash', allora sappiamo di cosa stiamo parlando).Nello spazio:Questo è noto come 'En' perché ha la stessa larghezza della lettera n nel tuo carattere tipografico.Spazio sottile:Lo spazio più stretto è lo 'spazio sottile', che è l'ultima opzione.

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:

1. spazi,
2. schede e
3. 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

1. Utilizza il segno di spazio unificatore del testo ( ) per fornire più spaziatura.
2. La proprietà di riempimento CSS può essere utilizzata per aumentare lo spazio all'interno di un elemento in diverse circostanze.
3. 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:

1. Aggiunta di formattazione e spazio HTML
2. 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&apos;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

1. Con l'attributo CSS margin, viene aggiunto spazio aggiuntivo attorno all'elemento.
2. 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

1. Sia il riempimento che il margine aumentano lo spazio di un elemento.
2. Il riempimento lascia un vuoto che è considerato un componente dell'elemento.
3. Lo spazio creato dal margine è considerato esistente al di fuori dei limiti dell'elemento.
4. 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

Intelligibilità estesa dei contenuti:Quando i clienti visitano il nostro sito, dovrebbero avere la possibilità di vedere dove stanno procedendo per ricevere la motivazione per continuare a leggere. In tutta onestà, lo spazio bianco tra i passaggi e attorno ai blocchi di testo e immagini aiuta le persone a comprendere ciò che stanno leggendo e contribuisce a un'esperienza cliente superiore in generale.Più collaborazione:Possiamo essere sinceri? Gli ospiti sono sempre di fretta mentre esplorano i locali e avere molti spazi bianchi aumenterà la connessione prevenendo interruzioni che rallentano l'ospite. In effetti, anche una leggera imbottitura attorno agli articoli ci farà notare una regione particolare sul nostro sito. Secondo una ricerca condotta da Human Elements Worldwide, lo spazio bianco aumenta la conoscenza di quasi il 20%.Capacità di presentare Call to Action (CTA):A volte, il metodo più chiaro per distinguere qualcosa è renderlo più grande. Possiamo ingrandire le immagini o ingrandire i pulsanti. Tuttavia, racchiudere l'oggetto con spazi bianchi può essere altrettanto fattibile.Un sito pulito equivale a un sito degno di nota:La sensazione iniziale del nostro sito è molto importante. Un sacco di design straordinariamente forti, una grande varietà di piani: questo gran numero di componenti aggiunge l'impressione che fa un sito; tuttavia, lo spazio bianco è particolarmente significativo perché dimostra astuzia e intraprendenza. Gli spazi bianchi non rendono il tuo sito esposto o moderato. Per quanto lunghi gli spazi bianchi vengano utilizzati nel modo giusto, aggiungeranno una sensazione di raffinatezza e prevalenza al tuo sito.Fare equilibrio:Troppo pochi spazi bianchi provocano disordine, disordine e instabilità, caratteristiche che non ti servono in relazione all'immagine del tuo sito. D'altra parte, molti spazi bianchi potrebbero presentare un'assenza di contenuto e un'assenza di indicazioni da parte del cliente. La chiave è adattare i tuoi piani e lasciare che lo spazio bianco diventi uno strumento incredibile per isolare grumi di contenuti per una semplice apertura e un'esperienza cliente ulteriormente sviluppata.Funziona come un separatore:Gli spazi bianchi isolano i componenti irrilevanti in un piano. Tende ad essere utilizzato per isolare immagini o disegni l'uno dall'altro e funziona sul formato visivo generale. L'utilizzo dello spazio bianco legittimo consente una corrispondenza più chiara di pensieri e piani convincenti.

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.