Spazi HTML semplicemente ignora. Durante la scrittura del codice, la pressione della barra spaziatrice, Invio o Tab viene ignorata. Gli hit HTML vengono interpretati come spazi bianchi, in parole semplici- formattatori di codice (caratteri, parole, testo), quindi non vengono visualizzati. Pertanto, se devi visualizzare gli spazi, dovrai implementarli nel linguaggio del codice. Leggi questo articolo per capire come in determinate situazioni.

Esistono diversi metodi per aggiungere singoli spazi al testo. Non sono affatto complicati e richiederanno all'utente di inserire solo un paio di caratteri nello spazio previsto. Diamo un'occhiata a ciascuno di questi metodi in dettaglio.

Metodo uno. Inserisci codice HTML: inseriscilo nel punto in cui vogliamo ottenere uno spazio. "nbsp" è l'abbreviazione di una certa frase inglese - non Breaking Space, che significa spazio ininterrotto.

Questo metodo dovrebbe essere utilizzato nei casi in cui sia necessario inserire uno o due spazi tra parole o caratteri nel testo per ragioni estetiche e di stile.

Ad esempio, ti trovi di fronte al compito di far passare una pausa tra le parole, diciamo questo: " Ciao. Come stai?". Dovrai inserire un codice per ogni spazio, come questo: " Ciao. Come stai?"

Metodo due. Inserimento di un paragrafo in HTML.

Devi incollare il seguente frammento di codice

prima del testo che deve essere presentato come paragrafo.

Necessità di incollare il codice

all'inizio di ogni paragrafo.

Alla fine di ogni paragrafo, dovresti inserire un tag di chiusura simile a questo - . Poiché il tag paragrafo è un tag di coppia, non può essere chiuso.

Metodo tre. Aggiunta di schede utilizzando il modulo HTML.

È necessario utilizzare 4 o anche 5 spazi unificatori per aggiungere una tabulazione. In questo caso, il codice sarà il seguente: .

Non esiste un elemento separato per le schede in HTML. Se si desidera utilizzare la tabulazione ovunque per facilitare la lettura delle informazioni, vale sicuramente la pena dare un'occhiata più da vicino al codice CSS.

Metodo quattro. Aggiunta di interruzioni di riga all'HTML.

Dove vuoi creare un'interruzione di riga è inserire il codice
.

Se inserisci un paio di tali tag nel testo contemporaneamente -

Questo può spostare il testo di una riga in basso. Un tag in questo scenario sposta la riga successiva e il secondo lo salta.

Metodo cinque. Visualizzazione del testo come scritto utilizzando HTML

L'inserimento di un tag davanti al testo lo visualizzerà come stampato in entrambi formato dato. Tale testo conterrà tutti gli spazi che non vengono visualizzati nel codice abituale. In formato stampato, uno spazio ha lo stesso aspetto che se lo metti in standard .

In questo articolo abbiamo analizzato come inserire uno spazio in HTML usando degli esempi. Ci auguriamo che tu non abbia difficoltà in futuro. Buona fortuna!

Aggiungendo correttamente uno spazio unificatore in HTML. Disposizione valida.

Se hai provato a comporre siti Web, probabilmente saprai che quando aggiungi alcuni spazi nel testo dalla tastiera, questi non vengono salvati. I browser li trattano come un unico spazio. A volte questo porta a problemi di layout. Ora ti mostreremo come aggiungere più spazi di seguito.

Utilizzo di caratteri speciali

Nel linguaggio di markup dell'ipertesto, viene utilizzato un carattere speciale che viene interpretato dai browser come uno spazio. Eccolo:

Devi digitarlo esattamente nel modulo in cui è presentato sopra. Se devi inserire più spazi in una riga, inserisci più di questi caratteri.

Come sarebbe il nostro pezzo di codice se volessimo aggiungere tre spazi di seguito.

Sezione di prova del codice

Se dovessimo aprire una pagina del genere in un browser, questo è ciò che otterremmo:

Sezione di prova del codice

pre-etichetta

Non sempre il testo può essere formattato nel modo corretto utilizzando tag di markup standard. Allo stesso tempo, digitandolo dalla tastiera, puoi ottenere il risultato desiderato. Ma alla fine, quando visualizzi la pagina in un browser, tutta la formattazione manuale cadrà e otterrai testo normale. Lo stesso risultato sarà se si aggiungono manualmente più spazi unificatori di seguito, semplicemente facendo clic sul tasto con lo stesso nome.

Come essere in una situazione del genere?

Ecco un esempio di testo con uno spazio lungo. L'abbiamo ottenuto racchiudendo il testo in un tag PRE.

Come puoi vedere, vengono salvate anche diverse interruzioni di riga consecutive. Ecco a cosa serve questo tag. Lascia la formattazione manuale per il testo che è racchiuso in esso.

Video per l'articolo:

Conclusione

Utilizzare questi metodi solo per inserire una formattazione del testo speciale. Non dovresti usare questi metodi per ottenere la posizione degli elementi sulla pagina. Ad esempio, aggiungi più spazi unificatori in modo che l'elemento successivo sia a destra della pagina. Per fare ciò, usa i fogli di stile.

Ciao, cari lettori del sito del blog. Poco prima, siamo già riusciti a parlare di come abbiamo anche appreso del design in esso contenuto. Oggi abbiamo a nostra volta il concetto di gap nell'HTML, così come la formattazione del codice ad esso associato durante la scrittura (per comodità della sua successiva lettura e percezione).

Ebbene, poiché toccheremo l'argomento dello spazio unificatore e della sillabazione morbida, dovremo concentrare la nostra attenzione sui cosiddetti caratteri speciali o mnemonici usati nel linguaggio Html, che ti permetteranno di aggiungere molti caratteri aggiuntivi al codice del documento web, come quello già menzionato sopra. Ma prima le cose principali.

Spazi e caratteri di spazi bianchi in linguaggio HTML

Prima di passare alla questione della formattazione del testo con l'ausilio di tag appositamente studiati per questo (paragrafo, intestazioni, ecc.), voglio soffermarmi sul momento in cui gli spazi, le interruzioni di riga (Invio) e le tabulazioni vengono interpretate nel linguaggio HTML , come viene eseguita la suddivisione del testo nella finestra del browser quando viene ridimensionata.

È vero, per questo tipo di formattazione visiva (che non sarà visibile sulla pagina Web), molto spesso non usano gli spazi stessi, ma i caratteri di tabulazione e interruzione di riga. C'è una tale regola: quando inizi a scrivere un nidificato tag html, poi rientro con una tabulazione(tasto Tab sulla tastiera) e quando chiudi questo tag, rimuovi il rientro (combinazione di tasti Maiusc + Tab sulla tastiera).

Devi farlo in modo tale che i tag di apertura e chiusura siano allo stesso livello verticale (lo stesso numero di schede dal bordo destro della pagina del tuo editor Html, ad esempio Notepad ++, che ho scritto di). Inoltre, ti consiglio di fare più interruzioni di riga subito dopo aver scritto l'elemento di apertura e di scrivere subito l'elemento di chiusura allo stesso livello (numero di tabulazioni), per non dimenticare di farlo in seguito.

Quelli. gli elementi di apertura e chiusura dovrebbero essere allo stesso livello verticalmente, e spostiamo i tag interni di un carattere di tabulazione e posizioniamo nuovamente gli elementi di chiusura e apertura sullo stesso livello.

Per semplice web documenti, questo può sembrare eccessivo, ma quando ne crei di più o meno complessi, lo fanno il codice sarà molto più chiaro e leggibile per l'abbondanza di spazi, e sarà anche molto più facile notare errori in esso dovuti alla disposizione simmetrica dei tag.

Caratteri speciali o mnemonici nel codice Html

Quindi, ora parliamo del cosiddetto personaggi speciali, la cui usabilità ho annunciato all'inizio di questo articolo. I caratteri speciali sono talvolta chiamati anche mnemonici o sostituzioni. Hanno lo scopo di risolvere un problema sorto da molto tempo nel linguaggio di markup ipertestuale, relativo alle codifiche utilizzate.

Quando digiti un testo da tastiera, i caratteri della tua lingua vengono codificati secondo un algoritmo predeterminato, quindi vengono visualizzati sul sito utilizzando i caratteri che utilizzi (dove trovarli e come installarli per il sito) grazie alla decodifica.

Esistono molte codifiche, ma per il linguaggio Html è stata adottata per impostazione predefinita una versione estesa delle codifiche.

In questa codifica del testo, è stato possibile annotare solo 256 caratteri: 128 da ASCII e altri 128 per lettere della lingua russa. Di conseguenza, si è verificato un problema con l'utilizzo su siti di caratteri che non sono inclusi in ASCII e non sono caratteri russi che fanno parte della codifica di Windows 1251 (CP1251). Bene, ti è venuto in mente di usare una tilde o un apostrofo e le possibilità di un tale inizialmente utilizzato linguaggio HTML la codifica non è inclusa.

È per questi casi che sono state inventate le sostituzioni, o, in altre parole, i mnemonici. Inizialmente caratteri speciali avevano vista digitale record, ma poi per i più comuni sono state aggiunte le loro controparti alfabetiche per facilitarne la memoria.

In generale, un mnemonico è un carattere che inizia con una e commerciale "&" e termina con un punto e virgola ";". È per questi motivi che il browser, durante l'analisi del codice Html, estrae da esso caratteri speciali. La e commerciale nel codice di sostituzione numerica deve essere immediatamente seguita dal cancelletto "#", a volte chiamato hash. E solo allora segue il codice numerico del carattere desiderato nella codifica Unicode.

È possibile scrivere più di 60.000 caratteri in Unicode: la cosa principale è che il simbolo mnemonico di cui hai bisogno è supportato dal carattere utilizzato sul tuo sito. Esistono font che supportano quasi tutti i caratteri Unicode e sono disponibili opzioni con solo un determinato set di caratteri.

L'elenco completo dei caratteri speciali sarà semplicemente enorme, ma mnemonici più comunemente usati puoi prendere in prestito, ad esempio, da questa tabella:

C'è abbastanza interessante modo per ottenere codice html mnemonico per il personaggio di cui hai bisogno. Per fare ciò, sarà sufficiente aprire l'editor Microsoft Word, crea un nuovo documento e seleziona "Inserisci" - "Simbolo" dal menu in alto (io uso la versione 2003, quindi non so come fare un'operazione simile nelle versioni successive).

Nella finestra che si apre, devi selezionare un font, ad esempio Times New Roman (o qualsiasi altro che sarà sicuramente presente sulla maggior parte dei computer dei visitatori del tuo sito - Courier o Arial, ad esempio).

Aggiungi dall'elenco che si apre al tuo documento di parole tutti i caratteri speciali di cui hai bisogno e salva questo documento Word come pagina Web (selezionata dall'elenco a discesa ".html" durante il salvataggio). Bene, allora non ti resta che aprire questa pagina web in un qualsiasi editor Html (va bene lo stesso Notepad++) e vedrai tutti i codici digitali dei mnemonici di cui hai bisogno:

Il metodo è un po' complicato, ma se hai voglia di usare qualche raro simbolo speciale sulla pagina del tuo sito, allora sarà più semplice che cercare tabelle su Internet come quella sopra. Dovrai inserire il codice del carattere speciale risultante nel posto giusto e al posto di esso nella pagina web, il browser visualizzerà il carattere che ti serve (ad esempio, uno spazio unificatore).

Spazio unificato e sillabazione morbida negli esempi

Come accennato in precedenza e come si può vedere dalla tabella dei caratteri speciali riportata poco sopra, alcuni mnemonici in Html hanno ricevuto, oltre al digitale, anche una designazione simbolica per la loro più facile memorizzazione. Quelli. invece del cancelletto "#" (cancelletto) nelle varianti di caratteri, vengono utilizzate le parole. Ad esempio, lo stesso spazio unificatore può essere scritto come (mnemonico digitale) o come (carattere).

Quando si scrivono articoli, se è necessario inserire una e commerciale (&) o una parentesi aperta (<), то для этого обязательно нужно использовать спецсимволы. Дело в том, что эти знаки в Html означают начало тега и браузер будет рассматривать их именно с этой точки зрения и отображать в тексте не будет.

Cioè se stai scrivendo un articolo in cui dovrai inserire nel testo, ad esempio, il tag display< body>oppure devi solo inserire un segno meno di (<), то сделав это без использования подстановок на веб странице вы ничего не увидите, т.к. браузер, обнаружив «<» , поймет, что это Html тег, а не текст статьи.

Pertanto, sarà necessario inserire la seguente costruzione per risolvere un problema del genere:

Lo stesso vale per la visualizzazione del codice degli stessi mnemonici, perché iniziano con una e commerciale. Sarà necessario inserire un codice nel testo con la sostituzione del segno e commerciale con la sua sostituzione (carattere speciale):

Questo dovrà essere fatto per entrare nella pagina<, а не отображение левой угловой скобки (<), в которую преобразует браузер мнемонику <, обнаружив при разборе знак амперсанда. Хитро, но вы все поймете попробовав это на практике.

Inoltre, molto probabilmente utilizzerai uno spazio unificatore, che sembrerà uno spazio normale su una pagina Web, ma il browser non lo tratterà affatto come uno spazio e non trasferirà su di esso(ad esempio, questo sarebbe appropriato per frasi come 1400 GB, ecc., che non sarebbe desiderabile riportare un trattino su righe diverse):

1400 GB.

A volte può verificarsi la situazione opposta, quando nel testo sono presenti parole molto lunghe e si desidera assicurarsi che, se necessario, il browser potrebbe rompere queste parole con un trasferimento. A tal fine, viene fornito un simbolo speciale "trasferimento morbido" -

Parola lunga, lunga;

Quando diventa necessario spostarsi su un'altra riga, il browser inserisce un trattino al posto del mnemonico a capo automatico e invierà il resto della parola alla riga successiva. Se c'è spazio sufficiente per contenere tutta questa parola su una riga, il browser non disegnerà alcuna nuova riga. Questo è tutto, è semplice.

Buona fortuna a te! A presto sul sito delle pagine del blog

Puoi guardare altri video andando su

Potresti essere interessato

MailTo - che cos'è e come creare un collegamento e-mail in Html
Tag e attributi delle intestazioni H1-H6, riga orizzontale Hr, interruzione riga Br e paragrafo P secondo lo standard Html 4.01
Come inserire un collegamento e un'immagine (foto) in HTML - tag IMG e A

Cos'è?

In html, ci sono molti tag, attributi, valori diversi che vengono utilizzati in varie situazioni. Alcuni vengono utilizzati solo per lo scopo previsto, altri hanno impostazioni flessibili che consentono di utilizzarli in una varietà di varianti. Oltre ai normali tag, html ha caratteri mnemonici speciali. Con il loro aiuto, puoi visualizzare varie icone, icone, ecc. Sullo schermo degli utenti. Uno dei caratteri speciali più utili è lo spazio unificatore. Questo elemento sarà discusso in questo articolo.

Scopo

In html, uno spazio unificatore può essere utilizzato in un'ampia varietà di situazioni. L'uso più comune di questo elemento è aumentare naturalmente la spaziatura tra caratteri o parole. Alcuni potrebbero già indignarsi e porre una domanda logica: "Perché non utilizzare semplicemente uno spazio normale con il tasto spazio sulla tastiera?". Il fatto è che il browser ignorerà tutti gli spazi extra tra parole o caratteri tranne il primo assegnato. Indipendentemente da quanti di essi saranno presenti nel codice sorgente della pagina, ne verrà comunque visualizzato solo uno. Pertanto, se desideri mettere due o più spazi uno dopo l'altro, dovrai utilizzare un carattere speciale. Inoltre, ci sono altri casi in cui viene utilizzato questo elemento, ad esempio:

• Linea rossa. Sebbene questo modo di visualizzare un nuovo paragrafo sia usato raramente su Internet, è comunque utile sapere che se inserisci diversi di questi spazi all'inizio, ottieni un effetto di rientro.
• Tavolo. A volte quando si costruisce una tabella, appaiono celle vuote che devono essere riempite con qualcosa, altrimenti l'intera struttura viene deformata a causa di ciò. In alternativa, puoi inserire uno spazio unificatore. Quindi gli utenti vedranno una cella vuota e la tabella rimarrà com'era.
• Disegni per attirare l'attenzione. Usando questo elemento, puoi costruire un'immagine dai simboli. O a volte tale spazio viene utilizzato per focalizzare l'attenzione degli utenti.

Applicazione

Uno spazio html unificatore viene assegnato scrivendo caratteri speciali, ovvero "". Cioè, inserendo questa voce nel codice sorgente, otterrai un intervallo aggiuntivo. La sua lunghezza sarà uguale al solito spazio. La voce "" sta per "NO-BREAK SPACE", che si traduce come "spazio non divisibile". Puoi usare la notazione alternativa " ", che darà lo stesso effetto.

Peculiarità

Le caratteristiche distintive di questo elemento includono il fatto che se metti un tale spazio tra due parole (caratteri), in ogni caso rimarranno sulla stessa riga. In alcuni casi, viene visualizzata una barra di scorrimento orizzontale (quando gli elementi escono dallo schermo). A volte gli sviluppatori usano questo elemento solo per questa caratteristica. Ad esempio, quando è davvero importante che il testo sia su una riga.

Conclusione

Nella maggior parte dei casi, uno spazio unificatore sarà inutile. Poiché raramente è necessario impostare un intervallo lungo. Ma, in un modo o nell'altro, è necessario conoscere questo elemento. Dopotutto, un giorno tornerà utile per qualsiasi sviluppatore di file html.

Tutti quelli che ci hanno provato creare siti web in HTML affrontato un tale problema. Quasi tutto Tag HTML ritagliare spazi extra. E questa volta ti darò un esempio di questo "ritaglio", e ti dirò anche come assicurarti che gli spazi non vengano ritagliati.

Iniziamo scrivendo un semplice codice HTML:

Qualche testo Continua...

Se guardi il risultato, vedrai che tutti i nostri spazi sono stati ritagliati e ne rimane solo uno. E così fanno quasi tutti i tag.

Ci sono tre opzioni visualizzare spazi extra in HTML. Il primo modo è usare il tag<pre>:

Qualche testo Continua...

Di conseguenza, vedrai che le lacune rimangono, ed è esattamente quello che volevamo.

Ma c'è un altro modo che uso regolarmente: l'entità "". Questa entità sostituisce semplicemente il carattere spazio:

Qualche testo Continua...

Di conseguenza, vedrai anche tutta una serie di spazi. Per me, questo metodo è migliore perché non è necessario utilizzare tag aggiuntivi. Ma questa è una questione di gusti. Dove necessario spazio extra in html, inserisci "" e goditi il ​​risultato.

E infine, l'ultimo modo è Utilizzo CSS. Per fare ciò, devi solo aggiungere questo stile:

P(
spazio bianco: pre;
}

Questo metodo è il più veloce e semplice, tuttavia non lo uso, poiché nella mia pratica sono pochi i casi in cui devo aggiungere molti spazi consecutivi. E se accadono, uso l'entità " " più volte. Inoltre, proprietà degli spazi bianchi non supportato da tutti i browser (in particolare, IE6 e IE7 non supportano), che già limita l'ambito di questo metodo.

In generale riassumo:

1) Se una parte del testo contiene molti spazi in luoghi diversi, utilizza il tag<pre>.

2) Se hai un solo momento da qualche parte in cui hai bisogno di più spazi di seguito, usa l'entità "  ";

3) Se l'intera pagina è tessuta da un mucchio di spazi consecutivi (anche se questo è estremamente raro), usa la proprietà spazio bianco con significato pre.

Se vuoi saperne di più su HTML, quindi dai un'occhiata al mio corso gratuito con un esempio di creazione di un sito web su HTML: