Per rendere la nostra pagina WEB più presentabile, divideremo il testo in paragrafi ed evidenzieremo il titolo. L'HTML ha 6 livelli di intestazioni di sezione del documento, numerate da 1 a 6. Le intestazioni sono dichiarate da una coppia di tag con numeri corrispondenti al livello, ad esempio,
- il titolo della sezione di primo livello, e - il titolo della sezione di sesto livello. I titoli differiscono dal testo normale per la dimensione e la larghezza delle lettere. L'intestazione di primo livello h1 viene solitamente visualizzata con un carattere molto grande, mentre l'intestazione di sesto livello h6 viene solitamente visualizzata con un carattere molto piccolo.Titoli
Non confondere i titoli delle sezioni del documento con il titolo del documento discusso in precedenza, definito dall'elemento
.Usiamo la prima frase come titolo del testo: per fare questo è sufficiente limitarla con i tag
E
.Inserisci i tag nel testo del file other.html
E
in modo da limitare la prima frase del testo e questo pezzo di codice assume la forma seguente:Benvenuti nella pagina aziendale di SD!
Diamo un'occhiata al risultato acquisito.
Salvare il file selezionando il comando del menu Blocco note File - Salva.
L’operazione di salvataggio deve essere sempre effettuata prima di visualizzare il documento, perché apre il file per la visualizzazione caricandolo nella RAM del computer da disco. Se non salvi il file dopo aver modificato il codice HTML, non vedrai alcuna configurazione nel browser.
Ripristina la finestra del browser facendo clic sul relativo pulsante sulla barra delle applicazioni.
Premere il pulsante F5 o il pulsante Aggiorna sulla barra degli strumenti della finestra di lavoro del programma. Il file other.html verrà ricaricato e vedrai come appare l'intestazione di primo livello nella finestra del browser.
Guarda come appariranno i titoli degli altri 5 livelli modificando i numeri nei tag: h2, h3 e così via Dopo ogni configurazione, non dimenticare di salvare il file e aggiornare l'immagine nella finestra del browser.
Una volta terminati gli esperimenti, ripristina nuovamente i tag nel file other.html
.Utilizzando i 6 livelli di rubriche che mette a tua disposizione Linguaggio HTML, puoi farlo semplicemente documento leggibile con una struttura intuitivamente chiara. Ricorda che il tuo documento sarà sempre molto più leggibile se sarà chiaramente suddiviso in sezioni e sottosezioni.
Allineamento della rotta
Per impostazione predefinita, il titolo è allineato al bordo sinistro della pagina. Ma può anche essere allineato a destra o centrato. Per il corretto allineamento in un tag
Viene utilizzato l'attributo align="right" e per centrare - align="center". È consentita anche un'indicazione ovvia dell'allineamento a sinistra: align="left".
Aggiungi all'etichetta
attributo align="center" per centrare il titolo. Questo elemento dovrebbe assomigliare a questo:
Benvenuti nella pagina aziendale di SD!
In futuro non ti ricorderemo la necessità di salvare il file con il codice iniziale e aggiornare l'immagine nel browser prima di visualizzarla.
Come rendere il testo evidenziato (in grassetto) in HTML
Passiamo ora al resto del testo. Aumentiamo le sue dimensioni e rendiamo il testo in grassetto corsivo. Per impostare lo stile grassetto, vengono utilizzati tag accoppiati .
Inserisci quello di apertura nel file other.html e chiusura tag in modo da limitare il testo Qui scoprirai... Questo elemento dovrebbe assumere la seguente forma:
Come rendere il testo in corsivo in HTML
Lo stile corsivo viene impostato utilizzando i tag .
Inserisci un tag HTML nel codice iniziale E in modo che l'elemento modificato assuma la seguente forma:
Qui potrai conoscere le nostre attività, prodotti software sulla nostra azienda e sulle attrezzature che produciamo
Gli elementi di markup possono essere annidati, come in questa struttura, dove l'elemento … nidificato all'interno di un elemento …. I browser moderni sono in grado di gestire correttamente i tag nidificati. Pertanto, è necessario garantire che l’ordine di investimento non venga violato. Il browser sarà difficile da utilizzare se l'annidamento viene interrotto. Ad esempio, questa voce sarebbe errata: …. Il rispetto della nidificazione è una parte molto importante della cultura generale della scrittura del codice HTML.
Come rendere il testo sottolineato in HTML
Utilizzando un paio di tag puoi impostare lo stile sottolineato di una parte di testo limitato da questi tag e utilizzando una coppia di tag - mostra il testo nel carattere teletype.
Va notato che recentemente il tag semplificato ed enfatizzato utilizzando gli stili. equivalente . Sì, il nuovo analogo sembra più ingombrante, ma sfortunatamente questo è più vero. L’aspetto principale a favore di ciò è che la versione bulky è cross-browser, cioè adatta a tutti i browser, quando Non tutti i browser lo supportano.
Come incrementare il testo in HTML
Ora aumentiamo la dimensione del carattere del testo. Questo può essere fatto utilizzando vari metodi.
Tag aumentare la dimensione del carattere del testo racchiuso tra di loro.
Aggiungi tag rispettivamente all'inizio e alla fine del pezzo di codice sopra E in modo che l'elemento assuma la seguente forma:
Qui potrai conoscere le nostre attività, i prodotti software della nostra azienda e le attrezzature che produciamo
Utilizzo dei tag puoi ridurre la dimensione del carattere del testo rispetto a quella iniziale.
Un altro metodo per specificare la dimensione del carattere è utilizzare i tag con l'attributo dimensione. Come valori per questo attributo vengono utilizzati i numeri interi da 1 a 7. In questo caso, il valore 1 corrisponde alla dimensione del carattere più piccola e il valore 7 corrisponde alla dimensione più grande.
Utilizzo al posto dei tag visualizzare i tag , guarda come cambia la dimensione del carattere del testo per diversi valori dell'attributo size, da 1 a 7.
Puoi anche utilizzare i numeri da 1 a 7 con un segno + (più) o - (meno) come valore dell'attributo dimensione. In questo caso la dimensione del carattere aumenta o diminuisce di conseguenza, rispetto a quella iniziale, ad esempio, dei tag La dimensione del carattere aumenterà di un livello rispetto a quella attuale. Controlla.
Imposta 5 come valore dell'attributo size per la porzione di testo in questione: . Il codice HTML per questo pezzo dovrebbe essere così:
Qui potrai conoscere le nostre attività, i prodotti software della nostra azienda e le attrezzature che produciamo.
Nei tag L'attributo color può essere utilizzato anche per specificare il colore del carattere limitato dai tag di testo. I significati di questo attributo sono gli stessi degli attributi precedentemente discussi che descrivono il colore dello sfondo e del testo del documento.
Per impostazione predefinita, il paragrafo con il testo Qui lo scoprirai... è allineato a sinistra. Centrare orizzontalmente utilizzando i tag
Inserisci tag
Tieni presente che abbiamo utilizzato i tag per centrare il paragrafo
Attenzione! Per i tag del 2010 ,
=
=
Ce ne sono anche molti altri tag obsoleti, che non può essere descritto in questo articolo, quindi è meglio familiarizzare subito con i siti WEB specializzati su questa edizione. Ma i principali li ho postati qui un po' più in alto
Codici di allocazione
Il linguaggio HTML consente due approcci alla selezione dei caratteri dei frammenti di testo. Da un lato puoi indicare direttamente che il carattere su una determinata sezione del testo può essere grassetto o corsivo, in altre parole puoi indicare chiaramente lo stile del carattere del testo, come abbiamo fatto in questo esperimento; D'altra parte, puoi contrassegnare qualsiasi parte di testo come avente uno stile logico diverso dal solito, lasciando l'interpretazione di questo stile al browser. Lo stile logico mostra quindi il ruolo di un pezzo di testo, ad esempio il suo enorme significato rispetto al testo ordinario, o il fatto che questo pezzo è una citazione. IN proprio lavoro sarai in grado di utilizzare i tag successivi che definiscono gli stili booleani. Controlla come funzionano nei diversi browser.
- usato per definire una parola. Per impostazione predefinita il testo viene visualizzato in corsivo.
- per evidenziare le parole e rafforzarle. Per impostazione predefinita il testo viene visualizzato in corsivo.
- per evidenziare i titoli di libri, film, spettacoli, ecc., viene visualizzato in corsivo per impostazione predefinita.
- per frammenti di codice di programma. Visualizzato sul display con un carattere a larghezza fissa.
- utilizzato per il testo che l'utente inserisce dalla tastiera. Può apparire con caratteri diversi in browser diversi. Il tag è obsoleto.
- serve per visualizzare i messaggi del programma. Visualizzato con un carattere a larghezza fissa. Il tag è obsoleto.
- per frammenti particolarmente importanti. Solitamente evidenziato in grassetto.
- utilizzato per indicare che un pezzo di testo o una parola è una variabile simbolica, cioè un testo che può essere sostituito da diverse espressioni. Visualizzato in corsivo per impostazione predefinita. Il tag è obsoleto.
La specifica HTML 4.0 offre un metodo più avanzato per specificare gli stili per il testo e altre parti, utilizzando un linguaggio speciale chiamato CSS (Cascading Style Sheets). I fogli di stile rappresentano un enorme risultato nel campo della progettazione WEB, poiché ampliano la capacità di migliorare l'aspetto delle pagine. I fogli di stile semplificano la definizione dell'interlinea, del riempimento, dei colori utilizzati per il testo e lo sfondo, della dimensione e dello stile del carattere e così via. Alla maggior parte delle parti dell'HTML è possibile applicare uno stile utilizzando un attributo style, che viene inserito all'interno del tag di apertura di un elemento. Le coppie della forma “proprietà: valore” vengono utilizzate come valore dell'attributo style. Ad esempio, in un pezzo di codice che descrive l'intestazione della sezione,
l'attributo style="color:blue" specifica che la proprietà color ha il valore blue, in altre parole il testo dell'intestazione di primo livello deve essere visualizzato in blu.
Allineamento con gli stili
Vediamo come utilizzare il linguaggio Cascading Style Sheets per specificare lo stile di un pezzo di testo che inizia con le parole Qui imparerai...
Per specificare lo spessore del carattere, utilizzare la proprietà font-weight con i valori lighter (narrow), bold (semi-bold), bolder (bold), ad esempio style="font-weight: bold".
Per determinare lo stile corsivo, utilizzare la proprietà font-style con il valore corsivo. Pertanto, per dare al testo uno stile corsivo grassetto, dovresti trovare l'attributo style in questo modo: style="font-weight: bold; font-style: italic". Nota: le caratteristiche possono essere inserite in qualsiasi ordine e devono essere separate da un punto e virgola.
Se è necessario specificare la dimensione del carattere, è necessario utilizzare la proprietà font-size, i cui valori possono essere specificati in valori relativi o assoluti. I valori relativi sono percentuali e punti (pt), pixel (px), centimetri (cm), millimetri (mm) sono utilizzati come valori assoluti. Per esempio:
style="dimensione carattere: 200%"
style="dimensione carattere: 16pt"
style="dimensione carattere: 100px"
Specificando le dimensioni assolute anziché relative, privi gli utenti che visualizzano le tue pagine della possibilità di aumentare o diminuire la dimensione del carattere utilizzando il comando del menu del browser in base alla loro visione e alla risoluzione del monitor. I caratteri verranno visualizzati solo nella dimensione specificata. Pertanto, è meglio specificare la dimensione del carattere in percentuale. In questo caso, la dimensione del carattere sarà più piccola o più grande di una percentuale specificata rispetto a quando formattata utilizzando il tag HTML predefinito.
Per determinare il metodo di allineamento orizzontale del testo, utilizzare la proprietà text-align con i valori left (a sinistra), right (a destra), center (centro), giustifica (larghezza). Pertanto, per indicare che il testo Qui imparerai... deve essere formattato in grassetto corsivo con una dimensione pari al 150% dell'originale e allineato al centro, il suo stile dovrebbe essere il seguente:
style="font-weight: grassetto; font-style: corsivo; font-size: 150%; text-align: center"
Utilizzeremo questo attributo nei tag<р>, che consentono di presentare il testo come un paragrafo separato.
Modifica un elemento HTML che includa il testo Imparerai qui... rimuovendo i tag
<р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center">Qui potrai conoscere le nostre attività, i prodotti software della nostra azienda e le attrezzature che produciamo
Vedete, l'HTML consente una varietà di tecniche di stile. Tuttavia, l'uso del linguaggio dei fogli di stile CSS a cascata è più auspicabile.
Altre opzioni di allineamento e stile
Abbiamo esaminato solo un caso d'uso per il linguaggio dei fogli di stile, in cui la definizione dello stile è posizionata specificamente all'interno del tag dell'elemento che stai descrivendo.
Questo viene fatto utilizzando l'attributo style, che viene utilizzato con la maggior parte dei tag HTML standard. Ma ci sono altri usi per i CSS.
IN HTML standard, senza introdurre fogli di stile, per assegnare determinati parametri a qualsiasi elemento, come colore, dimensione, posizione nella pagina e simili, bisogna delineare ogni volta queste caratteristiche per ciascun elemento, anche se si devono posizionare decine di tali parti su una pagina, non diversi l'uno dall'altro. Devi inserire lo stesso pezzo di codice HTML in una pagina 10 volte, aumentando la dimensione del file e il tempo necessario per scaricarlo da Internet.
I fogli di stile funzionano in modo diverso, più comodo ed economico. Per assegnare determinate caratteristiche ad un elemento, devi delineare una volta questo elemento e trovare questa descrizione come stile, e poi semplicemente indicare che l'elemento che vuoi progettare opportunamente deve assumere le caratteristiche dello stile da te descritto. Comodo, no?
Inoltre, puoi salvare la descrizione dello stile non nel testo della tua pagina WEB, ma in fascicolo separato- questo ti consentirà di utilizzare la descrizione dello stile su un numero qualsiasi di pagine WEB. Un altro vantaggio correlato è la possibilità di modificare il design di un numero qualsiasi di pagine, correggendo solo la descrizione dello stile in un file separato.
Inoltre, il linguaggio dei fogli di stile ti consente di lavorare ancora di più con il design dei caratteri delle pagine il livello più alto rispetto all'HTML standard.
Attualmente, il linguaggio CSS ha un numero piuttosto elevato di parametri per le parti di HTML che può controllare. Utilizzando “sicuro”, ovvero compatibile con il numero più grande browser Elementi CSS- caratteristiche dei caratteri, colori delle parti e dello sfondo, caratteristiche del testo e dei bordi - puoi facilitare notevolmente il tuo lavoro e rendere le tue pagine WEB più attraenti in termini di progettazione del testo.
In HTML, il testo in grassetto può essere creato in diversi modi. Questi includono:
- Etichetta B;
- Etichetta forte;
- Proprietà CSS peso del carattere.
Parliamo di ciascuna delle opzioni di selezione del testo in ordine.
Testo in grassetto: tag
Etichetta B L'HTML viene applicato in questo modo:
Costruttore di siti web "Nubex"
Per etichetta deve avere una chiusura e ha accesso ad attributi universali (come classe, ID, titolo eccetera.)
Nonostante la validità del tag B e non è condannato dalle specifiche HTML, il tag è più rilevante da utilizzare forte, scopriamo perché.
Testo in grassetto: tag
Secondo le specifiche HTML, il tag B serve ad evidenziare il testo in grassetto. Al contrario, il tag forte HTML viene utilizzato per l'evidenziazione importante frah, parole chiave di questa pagina.
Questo tag è di notevole importanza nel posizionamento delle pagine nei risultati di ricerca, quindi è ampiamente utilizzato nella promozione dei siti Web e nell'ottimizzazione SEO. I motori di ricerca tengono conto del testo racchiuso nei tag e contrassegnarlo come importante.
Etichetta utilizzata forte allo stesso modo:
Costruttore di siti web "Nubex"
Potresti notare che esternamente l'applicazione dei tag E non è affatto diverso (poiché tutto browser moderni interpretarli in modo quasi identico), ma ci sono differenze semantiche nel codice di motori di ricerca dopo tutto, hanno un posto dove stare. Pertanto, la maggior parte degli ottimizzatori SEO consiglia di utilizzare il tag forte.
Testo in grassetto utilizzando CSS
Abbiamo già notato l'importanza del tag forte durante la promozione sui motori di ricerca, ma cosa fare se è necessario evidenziare una grande quantità di testo in grassetto (ma non è necessario che il testo sia contrassegnato come importante per i motori di ricerca) o se è necessario controllare il grado di "grassetto" di il carattere? In questi casi, viene utilizzata la proprietà CSS peso del carattere. Si applica come segue:
I nostri siti sono, infatti, passo enorme nello sviluppo web.
Lo facciamo per davvero qualità siti.
Affidati a noi e ti aiuteremo non ti deluderemo.
Valori più audace E accendinoÈ possibile impostare il livello di grasso in modo che sia maggiore (o inferiore) rispetto a quello genitore. Utilizzando un valore numerico (100-900) è possibile impostare il grado di contenuto di grassi.
Esistono tre modi per rendere il testo in grassetto Pagina HTML, ma non affrettarti a utilizzare immediatamente quello che ti piace, poiché tale selezione può avere significati diversi e influenzare l'ottimizzazione del sito per il motore di ricerca.
Carattere in grassetto con tag forte
Questo metodo è adatto se vuoi evidenziare una parte importante del testo in grassetto. Il tag HTML è un tag di formattazione logica e la sua essenza è “sottolineare” l'importanza del frammento selezionato.
Esistono altri tag di formattazione logici in HTML. Ad esempio, un tag rende il testo in corsivo e indica l'enfasi sulla frase evidenziata.
Altri tipi di selezione del testo sono descritti nell'articolo :.
Testo semplice evidenziato un pezzo di testo importante. Testo semplice.
Testo in grassetto utilizzando il tag b
Testo semplice testo in grassetto. Testo semplice.
Stili CSS in grassetto
Il testo in grassetto può essere realizzato non solo utilizzando speciali Tag HTML. Puoi ottenere un output in grassetto su qualsiasi tag impostando la proprietà font-weight: bold; (non funziona con tutti i caratteri).
Tale evidenziazione sarà di natura stilistica, senza aggiungere peso logico al testo selezionato.
Inoltre, puoi selezionare un tag specifico o un gruppo di elementi contemporaneamente impostando gli stili tramite una classe CSS.
Proprietà CSS all'interno dell'attributo style:
Testo in grassetto.
Testo in grassetto.
Testo in carattere normale.
Testo in grassetto.
Cosa fare se non riesci a rendere il testo in grassetto?
Se non riesci a rendere il testo in grassetto, è probabile che gli stili CSS degli elementi vengano sovrascritti sul tuo sito. In questo caso, dovrai modificare questi stili. Nella maggior parte dei casi ciò verrà fatto tramite il file del foglio di stile CSS principale. Se non lo capisci, contatta il webmaster. Con un alto grado di probabilità, la risoluzione di questo problema non richiederà più di 5 minuti di lavoro (anche se, ovviamente, potrebbero esserci delle eccezioni).
Continuiamo a lavorare con i font e in questa lezione vedremo come impostare le proprietà che conferiscono a un font un aspetto in grassetto o corsivo. In precedenza abbiamo già visto come creare caratteri in grassetto o corsivo usando HTML tag Ma come già sappiamo, HTML non deve essere utilizzato per progettare un documento, è destinato solo a creare markup e struttura della pagina, quindi tutto deve essere formattato tramite un foglio di stile CSS. E ora diamo un'occhiata a come vengono impostate tali proprietà.
Carattere corsivo CSS
La proprietà ti aiuta a formattare il testo in corsivo stile carattere: ; , a cui è assegnato il valore corsivo , che sta per "Stile carattere - Corsivo".
Ora immaginiamo che ci siano molti paragrafi nella pagina e alcuni di essi debbano essere scritti in corsivo. Ciò che facciamo è creare una classe per il paragrafo desiderato e quindi specificare che l'elemento con quella classe deve essere corsivo.
HTML
Quarto paragrafo Quarto paragrafo Quarto paragrafo
Imposta la proprietà per il carattere corsivo.
Se hai creato tali paragrafi e hai impostato una proprietà per essi, il testo del secondo paragrafo diventa corsivo. Abbiamo impostato questa proprietà per l'intero paragrafo, ora complichiamola e impostiamo il corsivo solo per due parole nel quarto paragrafo. Come fare questo? IN HTML Nella lezione abbiamo esaminato il tag a livello logico . Questo tag viene utilizzato proprio per le situazioni in cui è necessario assegnare una classe a una parte dell'elemento. E quindi incorporiamo un tag nel quarto paragrafo e gli assegniamo una classe classe="corsivo">
. Di conseguenza, otteniamo la seguente voce:HTML
Primo paragrafo Primo paragrafo Primo paragrafo Primo paragrafo
Secondo paragrafo Secondo paragrafo Secondo paragrafo Secondo paragrafo
Terzo paragrafo Terzo paragrafo Terzo paragrafo Terzo paragrafo
Quarto paragrafo Quarto paragrafo Quarto paragrafo
Quinto comma Quinto comma Quinto comma Quinto comma
Corsivo(stile carattere: corsivo;)
Ora il secondo paragrafo e parte del quarto paragrafo appaiono in corsivo. IN demo questo è chiaramente mostrato.
Carattere CSS in grassetto
Per impostare il carattere in grassetto, utilizzare un'altra proprietà chiamata peso carattere: ; in altre parole, è anche chiamato peso del carattere. Inizialmente la saturazione è impostata su normale cioè, la saturazione del carattere è normale e impostando il valore grassetto assumerà un aspetto audace.
Grassetto (peso carattere: grassetto;)
È inoltre possibile impostare il valore di saturazione in numeri da 100 Prima 900 con incrementi 100 . Senso normale equivale ad una figura 400 e il valore grassetto figura 700 . Senso 900 non è supportato da tutti i caratteri, quindi se imposti questo valore, potresti non notare la differenza rispetto al valore 700 . Questa condizione è simile alla seguente:
Grassetto(peso carattere:700;)
IN html code fa esattamente la stessa cosa: se devi selezionare l'intero paragrafo, impostalo nuova classe, se parte del testo, utilizza il tag classe="corsivo"> . Diamo un'occhiata a un piccolo esempio:
HTML
Primo paragrafo Primo paragrafo Primo paragrafo Primo paragrafo
Secondo paragrafo Secondo paragrafo Secondo paragrafo Secondo paragrafo
Terzo paragrafo Terzo paragrafo Terzo paragrafo Terzo paragrafo
Il quarto paragrafo Quarto paragrafo Quarto paragrafo
Quinto comma Quinto comma Quinto comma Quinto comma
Grassetto( peso carattere: grassetto; )
Di conseguenza, abbiamo evidenziato in grassetto la parte del quarto paragrafo, dove è allo stesso tempo in corsivo, e l'intero quinto paragrafo. Queste sono altre due proprietà che abbiamo studiato. Sono usati abbastanza spesso, quindi vale la pena ricordare che:
- È specificato il carattere corsivo: stile carattere: corsivo; .
- Il carattere grassetto è impostato: peso del carattere: grassetto; .
- Per riportare il carattere al peso normale, impostare il valore: peso del carattere: normale; o significato peso del carattere: 400 ; , che in questo caso significa la stessa cosa.
Qui abbiamo esaminato altre due proprietà dei caratteri. Guarda dentro Dimostrazione cosa avresti dovuto ottenere alla fine e passiamo allo studio delle seguenti proprietà.
Ciao, cari lettori del blog! Di questo articolo parleremo tag di formattazione del testo. I primi esempi includono rendere il testo in grassetto o corsivo. Vedremo anche l'impatto di alcuni tag sull'ottimizzazione interna del sito web e le regole per scriverli. Puoi leggerlo nell'articolo indicato. A proposito, puoi trovare elementi simili di progettazione del testo in molti editor di testo, ad esempio in Word.
I tag sono divisi in 2 tipi: a blocchi e in linea. Quando si utilizza il primo, è possibile modificare il contenuto di parte del testo (righe, singoli frammenti o parole), mentre i secondi lo sono. I tag di formattazione che esamineremo in questo articolo sono principalmente minuscoli.
Regole e ordine di scrittura dei tag
Sai già cosa sono i tag di apertura e di chiusura. In caso contrario, leggi l'articolo fornito all'inizio di questo materiale. In breve, esistono due tipi di tag: singoli (ad esempio, transfer to nuova linea) e contenitore (in coppia). Quindi, tutti i tag di formattazione del testo lo sono accoppiato. Ciò significa che ogni elemento ha un tag di apertura e di chiusura e l'evidenziazione deve essere posizionata tra di loro. Ad esempio, la selezione corretta di una frase sarebbe simile a questa: Frammento selezionato
Quando il browser elabora questo frammento, vedrai il seguente testo: Frammento selezionato. A proposito, non tutti i tag vengono visualizzati nel feed RSS ().
La cosa principale quando si scrivono i tag è ricordarsi di chiuderli. Altrimenti tutto il testo della pagina verrà evidenziato in grassetto (nell'esempio con il tag ). Ma ci sono casi in cui è necessario evidenziare un determinato frammento contemporaneamente sia in grassetto che in corsivo. Ma non esiste alcun tag che esegua questa azione. C'è solo una via d'uscita da questa situazione: utilizzare due tag contemporaneamente. Non importa in quale ordine li usi. Pertanto, scrivendo testo con tag come questo:
Frammento selezionato
o così:
Frammento selezionato
Riceverai comunque Frammento selezionato corsivo e audace allo stesso tempo. Tuttavia è preferibile utilizzare la prima opzione, perché inizialmente era l’unica e corretta. Inoltre, non dimenticare che ciascun browser può elaborare i tag in modo diverso (), a seconda delle impostazioni. Passiamo ora ai tag di formattazione stessi.
Testo in grassetto e corsivo - tag , , E
Più tag popolari formattare il testo - evidenziarlo grassetto E corsivo. Solitamente vengono utilizzati per dare importanza ad un frammento. Il primo caso serve per selezionare un frammento contenente informazioni utili O parole chiave. Il corsivo ha lo stesso scopo del testo in grassetto, ma l'informazione è meno importante perché il corsivo è meno evidente sullo sfondo del corpo del testo rispetto al testo in grassetto.Consideriamo prima rendendo il testo in grassetto. Ci sono due tag utilizzati per questa azione − E . Differenze di aspetto NO. Tuttavia, dato che ciascun browser può interpretare ogni elemento in modo diverso, potresti notare delle differenze. Ecco come appare il testo nei tag E in una forma già elaborata dal browser:
Testo nei tag forte
Testo nei tag b
Ed ecco come appaiono queste due righe nel codice sorgente della pagina:
Testo nei tag forte Testo nei tag b
Possiamo osservare la stessa situazione nel caso di tag in corsivo E . Prova a trovare le differenze tra i due esempi:
Testo nei tag em
Testo nei tag I
E qui fonte:
Testo nei tag em Testo nei tag I
Quindi, i tag considerati in grassetto e corsivo in realtà non sono diversi, ma allora perché abbiamo bisogno, ad esempio, del tag se ci ? Dopotutto, quest'ultimo contiene un solo carattere (senza contare le parentesi) e quindi è più facile da scrivere. E il punto è che i tag E influenza . Se circondi le parole chiave con questi tag, ciò avrà un effetto benefico sulla promozione del sito web. La cosa principale è non esagerare: il testo dovrebbe contenere al massimo il 5% di testo in grassetto nel tag e la stessa quantità di corsivo nel tag .
Se vuoi solo evidenziare qualche punto del testo, usa il tag O . In generale, penso che anche i motori di ricerca considerino più importante il testo in questi tag, ma ottimizzazione interna hanno ancora meno influenza di E .
Tag per evidenziare il testo con una riga - , E
Ora diamo un'occhiata ad alcuni tag che utilizzano un trattino nella progettazione del testo. Il più famoso per te editor di testo — etichetta
o sottolineare. Questo tag non ha alcun impatto sul ranking (per quanto ne so), ma evidenziare del testo e focalizzare l'attenzione su di esso aiuterà. Ho fornito un esempio dell'utilizzo di questo tag appena sopra. Altri due tag simili nello scopo: E . Entrambi svolgono la funzione di cancellare il testo. Puoi utilizzare questo tag in qualsiasi situazione: se stai aggiornando un documento (o meglio una parte di esso), puoi cancellare quello vecchio e aggiungerne uno nuovo; se hai intenzione di scrivere qualcosa che si discosta dall'argomento del materiale; qualcosa che non corrisponde agli standard morali ed etici.
Le differenze tra questi due tag sono solo nella loro scrivere, per cui è preferibile utilizzare il primo, perché in primo luogo, è più comodo scrivere e, in secondo luogo, la tua pagina conterrà meno codice HTML e i motori di ricerca lo adorano.
Etichetta e attributi: parametri dei caratteri del testo
Consideriamo ora un tag che non viene utilizzato senza attributi. Usandolo è possibile impostare i parametri per un certo frammento testo. In generale, ora è preferibile utilizzare (fogli di stile a cascata), perché... utilizzandoli puoi ridurre notevolmente l'intero codice HTML della pagina. Quindi, diamo un'occhiata allo stesso tag . Tutto esiste per lui tre attributi:
- viso- il carattere stesso. Ad esempio, Arial, Courier o Verdana. Puoi elencarne diversi, perché non tutti gli utenti dispongono di un set esteso di font, e scrivendone diversi nell'attributo face, il browser potrà scegliere quale utilizzare, o meglio, quale è presente nel sistema;
- misurare— un attributo che indica la dimensione del testo. Può essere espresso sia in unità convenzionali che in pixel;
- colore- colore del testo. Questo attributo può essere utilizzato sia nei codici colore HTML che in quelli word. I primi hanno la forma #FFFFFF (dove F è un qualsiasi numero o lettera dalla A alla F), mentre i secondi si scrivono in parole semplici(ad esempio, rosso - rosso).
Ecco come appare il testo nel tag utilizzando ciascun attributo:
Questo testo è 6px
Questo testo è rosso Questo testo è in carattere Arial Questo testo è rosso e misura 5pxE questo è ciò che vedrai dopo aver elaborato il codice scritto: 
Blocca gli elementi di progettazione del testo: intestazioni -, paragrafo
, paragrafo
Infine, esamineremo gli elementi blocco, utilizzati in quasi tutti i documenti. Questi sono i tag di intestazione e paragrafo. Consideriamo il primo. Esistono 6 tipi di intestazioni e ognuna ha il proprio tag. Ogni tipo ha solo il proprio numero di serie e viene registrato tramite tag
, ,..., . Ecco come appaiono tutte le intestazioni una volta elaborate:
. Ecco come appaiono tutte le intestazioni una volta elaborate:
Il numero dopo la parola titolo corrisponde al numero nel tag
Ora parliamo del tag di evidenziazione del paragrafo
La funzione di questo tag è quella di separare il testo tra un altro testo identico e una riga vuota. Se guardi il codice sorgente di un documento, puoi vedere quanto segue:
I rettangoli verdi contengono un paragrafo, i rettangoli rossi ne contengono un altro. Ed ecco come appare questo codice dopo l'elaborazione da parte del browser (la freccia punta su una riga vuota):
Di conseguenza, otteniamo una separazione abbastanza evidente di un paragrafo da un altro, il che è vantaggioso: leggere diventa più conveniente.
Questa è la fine dell'articolo su tag di formattazione del documento. Ce ne sono molti di più di quelli che ho descritto in questo materiale. È solo che c'è molto da dire su alcuni di essi, per cui ad essi saranno dedicati articoli separati con una recensione completa!