Come configurare smartphone e PC. Portale informativo
  • casa
  • Interessante
  • Separare i titoli dai paragrafi o strutturare il testo su una pagina html. come il tag Usa l'attributo align per allineare il testo

Separare i titoli dai paragrafi o strutturare il testo su una pagina html. come il tag Usa l'attributo align per allineare il testo

L'HTML è un linguaggio di tag.

Etichetta (descrittore) è un codice speciale inserito nel testo per formattare gli elementi di un documento HTML. Questo è il principale elemento di codifica adottato nello standard HTML. Il tag è racchiuso tra parentesi angolari<>. Ad esempio, il tag paragrafo è

Un tag linea orizzontale -


.

Esistono due tipi di tag: contenitori e tag singoli.

Contenitore. Questa è una coppia di descrittori composta da un tag di inizio (o apertura) e un tag di fine (o chiusura). Il tag di inizio sembra , dove TAG è il nome del tag HTML effettivo. Il tag finale sembra . I contenitori sono progettati per memorizzare alcune informazioni, come testo o altri tag HTML. Pertanto, il contenuto del contenitore è racchiuso tra i tag di inizio e di fine. Ad esempio, un elemento che è testo formattato è racchiuso tra i tag

E
.

Manico vuoto. Si differenzia dal contenitore in quanto non contiene alcuna informazione. Ha solo un tag di inizio. Un descrittore vuoto di solito esegue un'attività indipendente che non è associata a un testo specifico. Ad esempio, tag


crea una linea orizzontale.

Elemento del documento HTML sono i tag di inizio e fine del contenitore, insieme al contenuto tra di loro. Un elemento può essere un'immagine, una parte di testo, un modulo, una tabella, un elenco, un collegamento, un campo di testo, un pulsante e persino il titolo di un documento o il suo corpo principale (corpo).

Commento: linguaggio HTML senza distinzione tra maiuscole e minuscole. I tag possono essere digitati sia in maiuscolo che minuscolo, cioè. squadra è equivalente al comando <TITLE>o <TiTlE>. Non tutti i tag sono supportati da tutti i browser. Se il browser non supporta il tag, lo ignora semplicemente.</p> <p>Il più importante dei tag HTML <span>è il tag con lo stesso nome</span><HTML> <span>. Dovrebbe sempre aprire il documento, proprio come il tag</span></HTML> <span>deve essere sull'ultima riga. Questi tag significano che le linee tra di loro rappresentano un singolo</span> HTML <span>documento. Questo è importante perché il documento stesso è un file di testo normale.</span> ASCII <span>. Senza questi tag, il browser o altro visualizzatore non è in grado di identificare il formato del documento e interpretarlo correttamente.</p> <p>Il titolo del documento non lo è <a href="https://bumotors.ru/it/mozhno-li-polzovatsya-neoriginalnoi-zaryadkoi-mozhno-li-zaryazhat-iphone-ot.html">elemento obbligatorio</a>, ma un titolo ben scritto può essere molto utile. Lo scopo di un'intestazione di documento è fornire informazioni al programma che interpreta il documento. Elementi all'interno <a href="https://bumotors.ru/it/html-razdel-head.html">Sezione TESTA</a> <span>(fatta eccezione per il nome del documento registrato nella sezione</span> TITOLO <span>) non sono visibili sullo schermo. Elementi contenuti all'interno di una sezione</span> TESTA <span>i documenti sono necessari per:</p> <blockquote> <ul><p>Assegna un titolo al documento</p> <p>Definire le relazioni tra più documenti</p> <p>Di' al browser di creare un modulo di ricerca</p> <p>Definire un metodo per inviare messaggi speciali <a href="https://bumotors.ru/it/vklyuchit-vse-plaginy-kak-vklyuchit-plagin-v-brauzere.html">browser specifico</a> o altro visualizzatore</p> </ul></blockquote> <p>Sezione TESTA <span>si apre con tag</span><HEAD> <span>. Di solito questo tag segue immediatamente il tag</span><HTML> <span>. Etichetta di chiusura</span></HEAD> <span>mostra la fine di questa sezione. Tra i tag citati ci sono i tag rimanenti della sezione dell'intestazione del documento.</p> <p>Titolo della sezione <span>è l'unico elemento obbligatorio dell'intestazione del documento e serve a dare un titolo al documento. Di solito è mostrato nella barra del titolo della finestra del browser. Contenuto della sezione</span> TITOLO <span>da non confondere con il nome del file del documento. Rappresenta <a href="https://bumotors.ru/it/kak-izmenit-mezhstrochnyi-interval-v-fotoshope-ustanovka-v.html">stringa di testo</a>, che è completamente indipendente dal nome e dalla posizione del file. Il nome del file è hardcoded. <a href="https://bumotors.ru/it/chto-takoe-sistema-kompyutera-chto-takoe-operacionnaya-sistema-vidy.html">sistema operativo</a> il computer su cui è memorizzato.</p> <p>Il titolo del documento è scritto tra i tag <TITLE>e ed è una stringa di testo. Non dovresti racchiuderlo tra virgolette se non vuoi che appaiano nemmeno sullo schermo. Nella maggior parte dei casi, la sezione TITOLO occupa non più di una riga.

In linea di principio, il nome può essere di qualsiasi lunghezza e contenere qualsiasi carattere, ad eccezione di alcuni riservati. In pratica è meglio limitarsi a una riga, tenendo presente che il titolo compare nella barra del titolo della finestra del browser. Dovresti anche ricordare cosa rimarrà del nome del documento quando la finestra del browser viene ridotta a icona. Pertanto, dovresti provare a mettere le parole più importanti all'inizio del titolo.

Sebbene il WWW e c'è stata una tendenza verso un aumento dei contenuti "attivi", a cui la maggior parte dei lettori è ancora interessata parte di testo pagine. Pertanto, indipendentemente dal fatto che uno scriva o meno nuovo testo o il vecchio è in fase di conversione, il processo di elaborazione del corpo del documento richiede una notevole quantità di tempo.

Prima di procedere a riempire il documento di contenuto, ha senso crearne lo "scheletro". HTML- il documento deve contenere alcuni elementi obbligatori, senza i quali non verrà interpretato correttamente. Un esempio del modello più semplice è mostrato nell'elenco.



Questo è un documento di esempio


Inserisci qui il corpo del testo

Il modello si apre con un tag

, che, come già sappiamo, è necessario per ogni HTML- documento. Il tag è il prossimo , che inizia il titolo del documento. L'intestazione contiene l'elemento TITOLO , che inserisce il nome del documento, nel nostro caso“Questo è un documento di esempio” . Il titolo è chiuso con un tag. Poi arriva il tag , dopo di che viene posizionato il testo (corpo) del documento. Etichetta significa la fine del corpo e il tag - la fine dell'intero documento. CORPO potrebbe contenere un gran numero di attributi. Tutti loro sono importanti perché determinano l'aspetto generale del documento. Questi attributi sono mostrati nella tabella.

Scopo

UN COLLEGAMENTO definisce il colore del collegamento attualmente attivo
SFONDO punta a un URL - l'indirizzo dell'immagine utilizzata come sfondo
BGCOLOR definisce il colore di sfondo del documento
PROPRIETA' BG se impostato su FISSO , immagine di sfondo non scorre
MARGINE SINISTRO Imposta il bordo del margine sinistro in pixel
COLLEGAMENTO Specifica il colore di un collegamento che non è stato ancora visualizzato
TESTO Specifica il colore del testo
MARGINE SUPERIORE Imposta il bordo del margine superiore in pixel
VLINK Specifica il colore di un collegamento che è già stato visualizzato

Diamo un'occhiata più da vicino a questi attributi.

La determinazione del colore delle parti costitutive di un documento è il primo passo per crearlo. In caso contrario, vengono utilizzati i colori predefiniti. Sono determinati dalle impostazioni del programma visualizzatore.

Non ci sono regole per una tavolozza ben bilanciata. Devi solo ricordare che i lettori possono leggere il testo senza subire inconvenienti, cercare di mantenere un contrasto elevato tra testo e sfondo ed evitare aree con colori simili adiacenti tra loro.

HTML i colori sono specificati da numeri in un codice esadecimale. Il sistema di colori si basa su tre colori primari: rosso, blu e verde. Per ogni colore è dato valore esadecimale che vanno da 00 a FF , che corrisponde all'intervallo 0-255 in decimale. Questi valori vengono poi concatenati in un unico numero preceduto da un simbolo#. Per semplicità in HTML 3.2 definisce 16 colori standard, che, insieme ai relativi codici esadecimali, sono elencati nella tabella seguente.
Colore Il codice
Nero (nero) #000000
Magoop (marrone) #800000
Verde (verde) #008000
Oliva (oliva) #808000
Navy (blu scuro) #000080
Viola (viola) #800080
Alzavola (alzavola) #008080
Grigio (grigio) #808080
Argento (argento) #С0С0С0
Rosso (rosso) #FF0000
Lime (calce) #00FF00
Giallo (giallo) #FFFF00
Blu (blu) #0000FF
Fucsia (fucsia) #FF00FF
Acqua #00FFFF
Bianco (bianco) #FFFFFF
BGCOLOR controlla il colore di sfondo del documento. Se una la pagina ha un'immagine di sfondo, questo attributo dovrebbe fornire un colore il più vicino possibile al tono generale del disegno. Ciò consentirà al lettore, che ha impostato il proprio browser in modo da rifiutare il download delle immagini, di vedere chiaramente il testo. Molti autori non aderiscono a questa regola. In questo caso, se l'immagine di sfondo è resa con correnti scure e il colore del carattere per il testo è bianco, alcuni lettori potrebbero essere sorpresi di vedere nient'altro che una pagina bianca vuota. TESTO definisce il colore del testo del documento. Cerca di mantenere sempre un contrasto elevato del testo nelle tue pagine. Quando usi un carattere sottile, ricorda che sembra meglio scuro su uno sfondo chiaro. LINK viene utilizzato dal browser per visualizzare link non ancora visualizzati. Ovviamente, dovrebbero risaltare a colori sullo sfondo del testo principale.

L'attributo VLINK viene utilizzato per visualizzare i collegamenti che sono già stati visualizzati. Di norma, sono dipinti ombra scura lo stesso colore di

link visualizzati. UN COLLEGAMENTO definisce il colore del collegamento attualmente attivo. Si tratta di un attributo relativamente nuovo, solitamente utilizzato per la visualizzazione di documenti con più frame.

Un ID modi popolari decorare una pagina HTML significa posizionare su di essa una grafica di sfondo, visibile sotto il testo principale (attributo

SFONDO ). Questa tecnica aiuta anche a sottolineare l'integrità del documento. al contrario, dividerlo in parti logiche.

La maggior parte delle immagini di sfondo sono piccole, ma le loro controparti riempiono l'intera finestra del visualizzatore come uno sfondo. Particolarmente popolari sono le varie immagini di texture (motivi): mattoni, marmo, tutti i tipi di tessuti. Fondamentalmente, servono semplicemente a colmare le lacune nel documento. Le pagine più ponderate hanno uno sfondo che corrisponde al contenuto.

Attributi

MARGINE SINISTRO e MARGINE SUPERIORE vengono utilizzati per impostare la distanza tra i bordi sinistro e superiore del testo e i bordi corrispondenti della finestra del browser. La posizione degli altri bordi del testo non è regolabile. Questo viene fatto per garantire che la pagina possa essere visualizzata da qualsiasi browser. Non c'è modo di sapere in anticipo quale sia la dimensione della finestra del programma di lettura dei documenti. MARGINE SINISTRO imposta la distanza tra il bordo sinistro della finestra del browser, misurata in pixel. L'uso più comune di questo attributo è quando l'autore desidera un margine a sinistra che sia privo di testo e abbia un motivo o un colore diverso dal resto dell'immagine di sfondo. MARGINE SUPERIORE viene utilizzato per impostare la distanza tra il bordo superiore del testo e il bordo superiore della finestra del browser. Di solito viene utilizzato se la parte superiore dell'immagine di sfondo è di grande importanza ed è preferibile lasciarla aperta. HTML - I documenti possono includere commenti che non saranno visibili al lettore. Devono iniziare con il tag . Tutto ciò che è contenuto all'interno di questi tag rimane invisibile durante la visualizzazione della pagina. INDIRIZZO è uno degli elementi più importanti HTML . Serve per identificare l'autore del documento e (facoltativamente) per indicare l'indirizzo dell'autore. Anche le informazioni sul copyright vengono solitamente inserite qui. Questo elemento si trova all'inizio o alla fine del documento. INDIRIZZO è costituito da testo inserito tra i tag
e
. Il testo racchiuso tra questi tag viene solitamente visualizzato in corsivo nella finestra del browser.

Cercherò di condurre una mailing list secondo il principio "dal semplice al complesso". Lo condurrò in questo formato in modo che una persona che desidera apprendere le basi della costruzione del sito possa, subito dopo il rilascio della mailing list, mettere in pratica il materiale presentato.

Ma subito voglio fare una riserva che, in particolare, il linguaggio HTML è un linguaggio molto esteso e in continua evoluzione. E così, per padroneggiare questa lingua alto livello Dovresti studiare attentamente le basi (cioè i rilasci della mia mailing list). E parallelamente a questo fare pratica.

Apprendo le basi del linguaggio HTML, a cui faremo riferimento Stili CSS. Quindi, impareremo e CSS. Ma questo è un po' più tardi. Ci rivolgeremo anche a javascript per chiedere aiuto.

Nella lezione introduttiva di oggi, inizieremo imparando la struttura documento HTML e tag HTML di base.

Andare…

Ogni documento HTML inizia con la riga:

XHTML

A caso generale questa riga dice al browser che apre la nostra pagina su quali standard dovrebbe fare affidamento.

Etichetta è molto vario e il modo in cui il contenuto verrà visualizzato sulla tua pagina dipende dalla sua modifica.

Tuttavia, se disponi abilmente tutti gli elementi e i blocchi sulla pagina e applichi lo stile, tutto funzionerà ugualmente bene in tutti i browser con il giusto .

Ma, mentre non sappiamo cosa siano i blocchi, cosa siano gli stili e come applicare questo “abrukadabra”, ritengo necessario tornare a una considerazione dettagliata quando sappiamo già qualcosa e possiamo davvero apprezzare il suo lavoro.

Nel frattempo, spostiamo la pagina.

A proposito, perché ho iniziato a guardare il documento HTML dalla parte superiore della pagina?

Perché il browser carica la pagina e "legge il codice" dall'alto verso il basso, da sinistra a destra. (Tuttavia, mentre leggiamo libri).

Probabilmente, la parola tag non è del tutto chiara?

In generale, un tag è un'istruzione che dice al browser che in questo posto documento deve essere fatto.

Usiamo i tag per creare le nostre pagine. Tutti i tag sono racchiusi nei cosiddetti "angoli" ( <тег> ). E chiusura (con una barra). Per esempio, miniatura . Specifica che il testo tra i tag forti di apertura e chiusura sarà in grassetto.

Che cos'è un tag, spero, è chiaro.

Suggerisco di digitare qualcosa con le tue mani.

Quindi iniziamo.

Avvia blocco note o wordpad in OC WINOWS. Digitiamo le seguenti righe:

XHTML

Titolo della finestra del browser

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

"testo/html; set di caratteri=windows-1251" />

"descrizione pagina" />

"parola, parola, parola" />

<span>Titolo della finestra del browser</span>

Salviamo il file con un nome, ad esempio start.html. Ora vediamo cosa abbiamo scritto.

Tra i tag e contiene informazioni che non vengono visualizzate nella pagina.

Ad esempio, tag , tra l'altro, non richiede un tag di chiusura, può indicare la codifica (charset=windows-1251) o informazioni sull'autore (name="author" content="full name") o parole per motore di ricerca, etichetta forzerà il browser ad andare automaticamente al sito mysite.ru dopo 30 secondi (esempio).

Etichetta </b> definisce il testo nella barra del titolo della finestra del browser. (Il tag si sta chiudendo).</p> <p><img src='https://i0.wp.com/webformyself.com/wp-content/uploads/2009/06/title3.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Anche nel tag <b><head> </b> potrebbe essere localizzato <a href="https://bumotors.ru/it/ishodnyh-kod-skripta-javascript-pryachem-skript-ot-postoronnih-glaz-zachem.html">script javascript</a> o vbscript racchiuso in tag <b><script> </b>….<b></script> </b>.</p> <p>E stili avvolti in tag <b><style> </b>….<b></style> </b>.</p> <p>Su questo con un tag <b><head> </b> forse finiremo.</p> <p>Questo è, infatti, il corpo del documento, tutto ciò che vediamo nella pagina è posizionato qui. Etichetta <b><body> </b> Ci sono una serie di opzioni che esamineremo, ma non è consigliabile usarle.</p> <p><b>bgcolor</b>- imposta il colore di sfondo del documento. ( <b><body bgcolor="black"> </b>)</p> <p><b>sfondo</b>- punta all'indirizzo url dell'immagine - lo sfondo del documento.</p> <p><b>testo</b>- imposta il colore del testo del documento.</p> <p><b>collegamento</b>- imposta il colore dei collegamenti ipertestuali.</p> <p><b>vlink=</b>- imposta il colore dei collegamenti ipertestuali che hai già visitato utilizzando un valore.</p> <p><b>collegamento=</b>- imposta il colore dei collegamenti ipertestuali quando viene cliccato.</p> <p><b>bgproperties=fisso</b>— l'immagine di sfondo non scorrerà. Quelli. il testo si sposterà quando si preme PageDown, ma lo sfondo no. <br> <a href="https://bumotors.ru/it/1s-8-3-komponovka-dannyh-parametry-sozdaem-novyi-otchet.html">Questo parametro</a> solo supportato <a href="https://bumotors.ru/it/kak-izmenit-domashnyuyu-stranicu-v-internet-explorer-kak-v-internet-explorer-sdelat.html">Internet Explorer</a>.</p> <p>Questi parametri possono essere combinati, ad esempio, questa pagina utilizza:</p> <p>XHTML</p> <p><BODY bgcolor="black" text="white" link="red" alink="blue"></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p><BODY bgcolor = "black" text = "white" link = "red" alink = "blue" > </p> </td> </tr></table><p>Digitiamo questa riga nel nostro esempio precedente.</p> <p>XHTML</p> <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <meta name="author" content="Ф.И.О." /> <meta name="description" content="descrizione della pagina" /> <meta name="keywords" content="parola, parola, parola" /> <meta http-equiv=refresh content="30;url=www.mysite.ru" /> <title>Titolo della finestra del browser Il testo che vedremo nel nostro browser!!!

Dall'autore: benvenuto nel blog webformyself. Il linguaggio html, come molte altre cose nella nostra vita, ha una certa struttura. Nel nostro caso, viene posato da squadre speciali. Quali tag definiscono la struttura della pagina html e dove dovrebbero essere posizionati? Proverò a parlarne oggi.

tag della struttura del documento html

Qualsiasi, assolutamente qualsiasi documento html ha alcuni frammenti identici. Il numero di intestazioni, paragrafi ed elenchi nelle pagine web può variare, ma ci sono alcuni tag che devono essere presenti nel codice sorgente di qualsiasi sito.

- qualsiasi file html inizia con questa istruzione. Questo frammento di codice viene utilizzato per specificare il tipo di documento. Perché è necessario? Il fatto è che ci sono diverse versioni del linguaggio html, c'è anche la sua modifica. Specificando un doctype, aiuti il ​​browser a determinare con precisione il tipo e ad interpretare il codice senza errori.

In precedenza, i valori per questo parametro erano molto lunghi e incomprensibili. Oggi tutto è stato semplificato e per lavorare con la versione moderna del linguaggio è necessario utilizzare la seguente riga:

< ! DOCTYPE html >

Tutto, viene indicato il tipo di documento e puoi andare avanti.

- l'elemento contenitore principale della pagina, in cui sono inseriti i tag del titolo e del corpo della pagina. È accoppiato e si chiude proprio alla fine del documento.

etichetta di coppia A che contiene informazioni molto importanti per il funzionamento della pagina web, ma il suo contenuto non viene visualizzato in alcun modo. Questo contenitore contiene il titolo della pagina, possibilmente meta tag, codifica, inclusi file esterni come fogli di stile e script. Ecco un esempio di come la codifica viene scritta in testa:

< meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" >

La codifica stessa non viene visualizzata direttamente in alcun modo sulla pagina web, eppure gioca un ruolo importante. Se non è impostato in modo esplicito, potrebbero verificarsi errori durante l'apertura browser diversi e la lettura potrebbe non essere possibile.

- in termini di volume, possiamo dire che questo blocco include la maggior parte delle informazioni, perché è in esso che si forma il corpo della pagina. Questo è esattamente ciò che verrà visualizzato sullo schermo.

Riso. 1. Questo è un tipico esempio tag richiesti, che costituiscono la struttura del documento.

- tag di intestazione abbinati molto importanti che vengono visualizzati su una pagina web. Di norma, h1 racchiude il titolo di un articolo o di un'altra pubblicazione, h2 - sottotitoli, h3 - sottotitoli di sottotitoli, ecc. Un documento di grandi dimensioni potrebbe effettivamente aver bisogno di tutti questi tag.

Il titolo viene visualizzato come elemento di blocco ed è riempito in alto e in basso. Si consiglia di dividere i testi di grandi dimensioni in molti sottotitoli, perché in questo modo la percezione del materiale da parte del lettore migliora. Anche l'intestazione ha funzione importante in termini di ottimizzazione del sito per i requisiti motori di ricerca. Parola chiave nell'intestazione e nei sottotitoli migliora la pertinenza della pagina.

- forma un paragrafo (paragrafo) del testo. Anche molto elemento importante. Quasi nessuno vuole leggere un testo continuo che non sia in alcun modo suddiviso in paragrafi, giusto?

Il paragrafo ha anche piccoli trattini. A editori visivi sistemi di gestione dei contenuti, questo tag può essere apposto automaticamente ogni volta che si effettuano due interruzioni di riga.

Forse i tag più elementari responsabili della struttura sono stati descritti sopra. Ogni pagina web li ha. Ma come si forma in generale il tag e cosa include?

struttura dei tag html

Diamo subito un'occhiata a un esempio.

intestazione

È chiaro che non ci siamo limitati a scrivere

. Puoi aggiungere attributi aggiuntivi a qualsiasi tag. Sono scritti nella parte di apertura dell'elemento.

Innanzitutto, viene scritto il nome dell'attributo stesso, quindi viene impostato il suo valore. In questo esempio, la riga class = "title" legherà il titolo della classe di stile al nostro titolo, in modo che attraverso di essa possiamo fare riferimento a questo elemento in css.

Tra i tag accoppiati, abbiamo annotato ciò che verrà visualizzato direttamente sullo schermo. Successivamente, chiudi il tag. Dimenticare di farlo può portare a bug interessanti. Ad esempio, tutto il testo di una pagina può diventare un'intestazione. A singoli tag non posso scrivere testo arbitrario, in essi possono essere impostati solo determinati attributi.

Ciao cari lettori del blog! Oggi parleremo della strutturazione del testo nelle pagine web, delle caratteristiche della sua visualizzazione e considereremo come suddividere il testo in frammenti logici separati: intestazioni, paragrafi, elenchi.

Per lavorare con il testo in html, ci sono molti tag, ma prima dobbiamo parlare di alcune caratteristiche della visualizzazione del testo nel browser. Innanzitutto, un numero qualsiasi di spazi consecutivi, tabulazioni e interruzioni di riga viene visualizzato come un unico spazio. Quelli. il posizionamento del testo utilizzando spazi e tabulazioni non funzionerà.

Ad esempio, queste righe su una pagina Web verranno visualizzate allo stesso modo nonostante la loro diversa ortografia:

Benvenuti sul nostro sito web!


Bene
benvenuto nel nostro sito!


Ben arrivato
a noi
sito web!

L'eccezione è etichetta

, all'interno del quale tutti gli spazi e i trattini vengono visualizzati così come sono.

In secondo luogo, il testo occupa la larghezza della finestra del browser. Se una lunga riga di testo è più larga della finestra del browser, le interruzioni di riga verranno automaticamente inserite in spazi o trattini. Se non ci sono spazi o trattini nella stringa e la stringa non si adatta alla larghezza della finestra, il browser visualizzerà barra orizzontale scorrere.

Ora diamo un'occhiata elementi strutturali testo nel markup html.

Paragrafi in HTML

Di solito, i blocchi di testo sono separati da paragrafi (paragrafi). Ciò semplifica la lettura di grandi porzioni di testo. Il linguaggio HTML per la creazione di un paragrafo ne contiene una coppia etichetta

. La sintassi per la creazione dei paragrafi è la seguente:

Questo è il primo paragrafo.


E questo è il secondo paragrafo.

I paragrafi su una pagina html sono separati da un piccolo rientro dagli elementi precedenti e successivi. Etichetta

È anche un elemento di blocco. Che cosa elementi di blocco Ho scritto nell'articolo "". Lascia che te lo ricordi elementi di blocco sono caratterizzati dal fatto che occupano l'intera larghezza disponibile della pagina html, l'altezza dell'elemento è determinata dal suo contenuto e inizia sempre su una nuova riga.

Considera un esempio di utilizzo di paragrafi su una pagina web. Apriamo editor di testo, digita il codice HTML e salvalo con l'estensione html:





Sito sulle automobili.


Sito sulle automobili.



Classificazione auto


Passeggeri;


Carico;


SUV;


passeggino;


Raccogliere;


Gli sport;


Da corsa.



Quando si apre dato file ci sarà qualcosa del genere:

Finora, la nostra pagina contiene solo paragrafi.

Per allineare il testo in un tag di paragrafo

Supporta l'attributo allineare. Può assumere uno dei quattro valori:

    • sinistra- allineamento del testo a sinistra;
    • centro- allineamento del testo al centro;
    • Giusto— allineamento del testo sul bordo destro;
    • giustificare- allineamento in larghezza, cioè allineamento del testo contemporaneamente sui bordi destro e sinistro. Per fare ciò, il browser inserisce degli spazi tra le parole.

Predefinito attributo allineaè rimasto. Un esempio di utilizzo dell'attributo align:

Questo testo al paragrafo pagina html sarà allineato a sinistra!


Questo testo nel browser verrà visualizzato al centro della pagina!


Questo testo sarà allineato a destra!


E il browser allineerà questo grande pezzo di testo in larghezza, ad es. sia a destra che a sinistra allo stesso tempo! Per fare ciò, il browser web inserirà spazi extra tra le parole e il paragrafo apparirà pulito e facile da leggere!

Ed ecco come verrà visualizzato nel browser:

Titoli in HTML

Le intestazioni vengono utilizzate per evidenziare sezioni di testo su una pagina web. Ci sono sei livelli di intestazioni in html. al massimo livello superioreè livello 1 - tag

e il più basso è il livello 6, il tag

. tag

sono elementi di blocco della pagina. Il contenuto dell'intestazione di primo livello viene visualizzato nel carattere in grassetto più grande e le intestazioni dell'ultimo sesto livello in quella più piccola.

La sintassi per la creazione delle intestazioni è:





intestazioni html


Intestazione di primo livello


Intestazione di secondo livello


Intestazione di terzo livello


Intestazione di quarto livello


Intestazione di livello 5

Intestazione di livello 6


Risultato:

Anche le intestazioni svolgono un ruolo importante nella promozione del sito, poiché i motori di ricerca aggiungono una valutazione al testo se si trova all'interno del tag dell'intestazione.

Aggiungiamo i titoli alla nostra pagina:

Sito sulle automobili.


Benvenuti nel nostro sito automobilistico. Qui troverai molti articoli interessanti e utili sulle auto, le loro caratteristiche tecniche e caratteristiche.


In termini scientifici, un'auto è:


Veicolo stradale senza cingoli a motore meccanico con almeno 4 ruote.


Classificazione auto


Le auto sono dei seguenti tipi:


Passeggeri;


Carico;


SUV;


passeggino;


Raccogliere;


Gli sport;


Da corsa.

E vediamo che sulla nostra pagina, oltre ai paragrafi, ci sono dei titoli evidenziati in grassetto grande:

tag

-

come tag

Utilizzare l'attributo align per allineare il testo. Quando si utilizza questo attributo, tutto è lo stesso del tag

Elenchi numerati e puntati in HTML

L'elenco viene utilizzato per formare un elenco numerato o non numerato di qualsiasi frase o significato. Viene chiamato un elenco con elementi numerati numerato, e con punti non numerati - segnato.

Negli elenchi puntati, gli elementi sono contrassegnati da indicatori posizionati a sinistra degli elementi dell'elenco. Il browser web visualizza l'elenco rientrato a sinistra e dispone in modo indipendente i punti elenco o la numerazione necessari. Gli elenchi e i relativi elementi sono elementi di blocco di una pagina Web.

Qualsiasi elenco in HTML è un insieme di elementi, ognuno dei quali è inserito all'interno di un tag

  • . Quindi tutti gli elementi vengono inseriti all'interno del tag
      , se hai bisogno di un elenco puntato o all'interno di un tag
        se vuoi una lista ordinata.




        intestazioni html


        Elenco puntato:


        • primo punto.

        • secondo punto.

        • terzo punto.

        Elenco numerato:

        1. il primo elemento di un elenco numerato.

        2. la seconda voce dell'elenco numerato.

        3. la terza voce dell'elenco numerato.



        E assomigliano a questo:

        Gli elenchi puntati possono utilizzare diversi tipi di punti elenco. Per definire il tipo di marcatore in un tag

          aggiunto attributo tipo se vogliamo impostare il tipo di marcatore per tutti gli elementi della lista o aggiungere lo stesso attributo al tag
        • se è necessario impostare il tipo di marcatore per un elemento specifico. L'attributo type può assumere i seguenti valori:

          • disco - cerchio pieno;
          • cerchio - cerchio;
          • quadrato - quadrato.

          L'attributo di tipo predefinito è disco. Esempio di utilizzo:


          • Paragrafo 1

          • Punto 2

          • Punto 3



          • Paragrafo 1

          • Punto 2

          • Punto 3



          • Paragrafo 1

          • Punto 2

          • Punto 3

          Visualizza nel browser:

          L'elenco numerato supporta anche l'attributo type, che può essere utilizzato per specificare i seguenti tipi di marker:

          • A - lettere latine maiuscole;
          • a - lettere latine minuscole;
          • I - numeri romani maiuscoli;
          • i - numeri romani minuscoli;
          • 1 - Numeri arabi.

          Per impostazione predefinita, in un elenco ordinato, l'attributo type imposta i punti elenco su numeri arabi. Oltre all'attributo type, supporta un elenco ordinato attributo di inizio, che specifica il numero da cui inizierà l'elenco. Nella specifica HTML5 per un elenco numerato c'era anche attributo invertito, che inverte la numerazione . Quelli. invece di 1, 2, 3, l'elenco sarà numerato 3, 2, 1. Ma l'attributo invertito è ancora supportato da un numero molto ridotto di browser.

          Gli elenchi possono essere inseriti uno dentro l'altro, creando elenchi nidificati. elenco annidato posti all'interno degli elementi

        • elenco esterno:


          • primo punto.

          • secondo punto.

            • il primo elemento nell'elenco nidificato.

            • il secondo elemento nell'elenco nidificato.

            • il terzo elemento nell'elenco nidificato.



          • terzo punto.

          E nel browser:

          HTML ha un terzo tipo di elenco, che è un elenco di termini e delle loro definizioni. Questo elenco viene specificato utilizzando il tag di coppia

          . Al suo interno sono poste le coppie "termine - definizione". I termini sono racchiusi in un tag di coppia
          e le definizioni sono in un tag di coppia
          :


          Termine 1

          Definizione 1

          termine 2

          Definizione 2

          Visualizza nel browser:

          La nostra pagina Web ha un paragrafo sulla classificazione delle auto. Facciamo questa classificazione usando un elenco puntato:


          • Passeggeri;

          • Carico;

          • SUV;

          • passeggino;

          • Raccogliere;

          • Gli sport;

          • Da corsa.

          E vediamo il risultato:

          linee orizzontali

          Per separare o evidenziare ulteriormente i blocchi di testo in HTML, ce n'è uno singolo Tag HR - linea orizzontale. Ecco come appare nel codice html:

          Primo paragrafo




          Secondo comma

          Ed ecco come viene visualizzato:

          La linea orizzontale HTML si estende orizzontalmente per l'intera larghezza della pagina Web e ha uno spessore di uno o due pixel, a seconda del browser utilizzato.

          È possibile utilizzare gli attributi per impostare l'aspetto di una linea orizzontale. Etichetta


          supporta i seguenti attributi:

          • align - determina l'allineamento della linea;
          • colore: imposta il colore della linea;
          • size - imposta lo spessore della linea in pixel;
          • larghezza - imposta la larghezza della linea in pixel.

          Inseriamo una linea orizzontale nella nostra pagina WEB. Rendiamolo verde, spesso 1 px e largo 320 px:

          Sito sulle automobili.


          Benvenuti nel nostro sito automobilistico. Qui troverai molti articoli interessanti e utili sulle auto, le loro caratteristiche tecniche e caratteristiche.


          In termini scientifici, un'auto è:


          Veicolo stradale senza cingoli a motore meccanico con almeno 4 ruote.




          Classificazione auto


          Le auto sono dei seguenti tipi:



          • Passeggeri;

          • Carico;

          • SUV;

          • passeggino;

          • Raccogliere;

          • Gli sport;

          • Da corsa.

          Il risultato sarà qualcosa del genere:

          HTML- sta per HyperText Markup Language, che è il linguaggio più utilizzato per scrivere pagine web.

          • Ipertesto si riferisce al modo in cui le pagine web (documenti HTML) sono collegate. Pertanto, un collegamento disponibile su una pagina Web è chiamato ipertesto.
          • Come suggerisce il nome, l'HTML è un linguaggio di markup, il che significa che usi l'HTML per "marcare" semplicemente un documento di testo con tag che indicano al browser web come strutturarlo per la visualizzazione.

          L'HTML è stato originariamente progettato per definire la struttura dei documenti, come intestazioni, elenchi, paragrafi e così via, per facilitare lo scambio di informazioni scientifiche tra i ricercatori.

          L'HTML è ormai ampiamente utilizzato per formattare le pagine web con i vari tag disponibili nel linguaggio HTML.

          documento HTML

          L'esempio seguente mostra un documento HTML nella sua forma più semplice:

          Titolo del documento

          intestazione

          Ecco il contenuto del documento...

          Salviamo il codice nel file HTML document.html usando il tuo editor di testo preferito. E apri il file con un browser web come Internet Explorer, Google Chrome o Firefox ecc. Dovrebbe mostrare il seguente risultato:

          Tag per la creazione di un documento HTML

          Come discusso in precedenza, l'HTML è un linguaggio di markup e utilizza vari tag per formattare il contenuto. Questi tag sono racchiusi tra parentesi angolari. La maggior parte dei tag ha tag finali corrispondenti, ad eccezione di alcuni tag. Ad esempio, tag ha un tag di chiusura e tagga ha un tag di chiusura e altri.

          L'esempio precedente utilizza i seguenti tag per creare un documento HTML:

          EtichettaDescrizione
          Questo tag definisce il tipo di documento e la versione HTML.
          Questo tag copre l'intero documento HTML e consiste principalmente nel titolo del documento, che è rappresentato dai tag ... e il corpo del documento, rappresentato dai tag ... .
          Questo tag rappresenta il titolo del documento, che può contenere altri tag html come , <link>eccetera.</td> </tr><tr><td><title> </td><td>Etichetta <b><title> </b> utilizzato all'interno di un tag <head>per specificare il titolo del documento.</td> </tr><tr><td><body> </td><td>Questo tag rappresenta il corpo del documento, che contiene altri tag html come <h1>, <div>, <p>E altri.</td> </tr><tr><td><h1> </td><td>Questo tag rappresenta il titolo.</td> </tr><tr><td><p> </td><td>Questo tag rappresenta un paragrafo.</td> </tr></table><p>Conoscere questi tag è abbastanza per creare un documento html (pagina html).</p> <p>Per imparare l'HTML, devi conoscere i vari tag e capire come si comportano durante la formattazione di un documento di testo. Imparare l'HTML è facile in quanto gli utenti devono solo imparare a utilizzare tag diversi per formattare testo o immagini per creare una bella pagina web.</p> <h2>Struttura del documento HTML</h2> <p>La struttura di un tipico documento HTML sarebbe simile a questa:</p><p>Tag di dichiarazione del documento <html> <head> <title>Tag associati al titolo del documento Tag associati al corpo del documento

          Impareremo tutti i tag head e body nei tutorial successivi, ora vediamo cos'è un tag di dichiarazione del documento.

          Dichiarazione

          Dichiarazione di tagutilizzato dal browser Web per comprendere la versione di HTML utilizzata nel documento. L'attuale versione di HTML è 5 e utilizza la seguente dichiarazione:

          Esistono molti altri tipi di dichiarazioni che possono essere utilizzati in un documento HTML, a seconda della versione di HTML utilizzata. Vedremo maggiori dettagli su questo quando discuteremo del taginsieme ad altri tag HTML.

          Articoli correlati in alto