Distingeți între atributele universale și neuniversale. Cele universale sunt potrivite pentru aproape orice etichetă, iar cele neuniversale sunt potrivite pentru una sau mai multe, dar nu pentru toate...

Atributul este scris în etichetă, după valoarea sa, dar înainte de paranteza unghiulară de închidere. Mai întâi, se pune atributul în sine, apoi semnul egal și apoi valoarea în sine între ghilimele. Arata cam asa:

Text

Ce rezultă din acest exemplu? Am deschis un paragraf, iar în interiorul etichetei am setat atributul align, care este responsabil pentru alinierea textului. Apoi, punem semnul „=", ceea ce înseamnă că atribuim o valoare acestui atribut. Mai mult, între ghilimele, scriem tocmai această valoare. În acest caz, este „centru”. Aceasta înseamnă că vom centra textul în acest (și numai în acesta!) Paragraf. Incearca-l tu insuti.

Dar nu uitați să verificați site-ul htmlbook... Acolo vei găsi cu siguranță ceea ce corespunde cu ce. Aceasta este doar o referință desktop pentru orice dezvoltator web, cu atât mai puțin pentru un începător.

Alinia

După cum ați înțeles deja, acest atribut înseamnă alinierea textului. De obicei, este plasat în acele etichete care sunt responsabile pentru conținutul în sine (text, imagini etc.). În general, îl puteți pune în titluri (

,...,

), în paragrafele (

), poze , element bloc (

).

Valori posibile ale atributelor:

• alinierea stânga - stânga (implicit)
• alinierea dreapta - dreapta
• aliniament centru - centru
• justificare - aliniere pe toată lățimea

Încearcă să exersezi și vezi cum se schimbă elementele tale.

Titlu

Sună cunoscut, nu-i așa? Într-adevăr. Există o astfel de etichetă și o punem între ele și ... Dar acum vorbesc despre atribut și se potrivește aproape oricărei etichete, deoarece este universal. Și ai nevoie de el ca indiciu atunci când stai. Și concluzia este că tu însuți scrii acest indiciu. Arata cam asa:

Ce este 5-3?

Ce vedem aici? La început, deschidem un paragraf, apoi prescriem atributul în sine și îi dăm valoarea „De ce ești prost? Vor fi 2". În continuare, scriem textul afișat, iar la final închidem eticheta

.

Ce se întâmplă după aceea? Salvați documentul și vedeți singur. Când treceți cu mouse-ul peste text cu cursorul, ar trebui să apară un sfat explicativ.

Mai multe sensuri

O etichetă poate conține câte atribute doriți. Principalul lucru este că acestea corespund acestei etichete. Iată un exemplu:

Conţinut

După cum puteți vedea, totul este destul de simplu aici, doar într-o etichetă trebuie să scrieți toate atributele separate printr-un spațiu. Din acest exemplu, putem vedea că conținutul va fi aliniat la dreapta, iar când trecem cu cursorul mouse-ului peste el, va apărea un tooltip. E simplu. Sper că totul este clar?

Ei bine, acum să revenim la Lukomorya, ceea ce am făcut în ultima lecție.

Exemplu viu

• Aliniați tot textul din document cu Lukomorye în centru (împreună cu titlurile),
• În antetul primului nivel, puneți indiciu „Autorul lucrării - A.S. Pușkin"

Dacă nu aveți fișierul completat din lecția anterioară, atunci luați-l și puneți toate atributele necesare, astfel încât totul să meargă conform instrucțiunilor.

Și conform tradiției, fă totul singur la început. Și dacă nu funcționează, atunci vezi pașii pe care i-am scris mai jos.

După aceea, salvăm documentul html și îl rulăm. Verificăm ce am făcut. Este corect? Cred că ar trebui să reușești. Dar totuși, simt că mulți dintre voi s-au săturat să pună atribute în fiecare catren. Îți voi arăta cum să faci acest proces mai ușor.

Dacă trebuie să setați același atribut pentru un segment mare, atunci eticheta ne va ajuta în acest sens.

... Un DIV este doar un element de bloc gol care servește ca un fel de container pentru îmbinare. Aici puteți împinge diverse atribute cu scopul de a aplica fragmentului general. Și dacă doriți să aplicați un atribut întregului document, atunci îl puteți adăuga în general la eticheta principală .

În general, în acest caz, nu trebuie să puneți atributul align = "center" în fiecare etichetă. Trebuie doar să pui

înainte de antet și închideți-l cu

la finalul întregului text. Ei bine, înăuntru

set align = "center", dar o singură dată. Dupa parerea mea, este mult mai rapid si mai comod si in final iese la fel.

Cum este? Ai dat seama de principiul general? Doar că vom studia și mai mult. Principalul lucru este că înțelegeți însuși principiul plasării etichetelor și atributelor. În acest caz, adresați-vă întrebările. Voi fi bucuros să le răspund.

Ei bine, pentru o predare cu drepturi depline a principiului creării unui site, recomand să vizionați un curs video excelent " HTML5 și CSS3 de la zero la Pro„. Acolo vei învăța HTML, CSS, vei învăța cum să inventezi site-uri de cărți de vizită, bloguri și chiar magazine online. Cursul este pur și simplu minunat pentru un dezvoltator web începător.

Ei bine, termin pentru azi. Sper că ți-a plăcut articolul și ți-a fost de folos. Nu uitați să vă abonați la actualizările blogului meu pentru a fi mereu la curent cu cele mai interesante și pentru a nu rata noile lecții. Ei bine, îmi iau rămas bun de la tine pentru azi. Vă doresc succes în stăpânirea materialului. Pa! Pa!

Salutări, Dmitri Kostin.

< FONT MĂRIMEA=… CULOARE=... FAȚĂ= ...> text FONT>

MĂRIMEA- seturi marimea fontului pentru a fi folosit de textul conținut în elementul FONT. Puteți specifica dimensiunea absolută a fontului specificând un număr întreg de la 1 la 7. Pentru un font, puteți specifica și mărime relativă prin atribuirea unui număr întreg cu semn pentru atribut (de exemplu, ar putea fi SIZE = "+ 1" sau SIZE = "- 2").

CULOARE- indică Culoare, care va fi folosit pentru a evidenția acest fragment de text. Culorile sunt specificate ca valori RGB cu notație hexazecimală sau este selectată o valoare a caracterului uneia dintre culorile standard.

FAȚĂ- seturi tipografie, de exemplu FACE = ARIAL.

text - text prin teletip (monospațiat).

text - stil italic ( cursive).

text- stil cu îndrăzneţ font.

text U>- stil cu subliniere text.

text MARE>- tipărirea textului în font mărime crescută(mai mare decât textul din jur).

text MIC>- tipărirea textului în font dimensiuni reduse(mai mic decât textul din jur).

text SUB>- imprimați textul cu o schimbare în jos ( indicele sau indice).

text SUP>- tipăriți text cu shift în sus ( superscript sau superscript).

text GRAVE> sau < S> …S> - stil cu text barat.

Etichete html speciale

Etichetă< ABORDARE> folosit pentru a evidenția autorul documentului și adresa acestuia (de exemplu, e-mail).

Unele simboluri sunt caractere de controlîn HTML și sunt adăugate la text numai folosind secvențe ESC:

paranteză unghiulară stânga"<" - <

paranteză în unghi drept „>” ->

ampersand „&” - &

ghilimele duble """ - "

Există multe ESC-uri pentru caractere speciale, cum ar fi „” pentru  și „®” pentru . Una dintre caracteristici este înlocuirea caracterelor din a doua parte a tabelului de caractere (după al 127-lea caracter) cu secvențe de evacuare pentru transferul fișierelor text cu limbi naționale pe canale pe 7 biți.

secvențe ESC caz sensibil: NU POATE fi folosit în loc de<.

Cele mai frecvent utilizate etichete sunt prezentate în Tabelul 2.

Tabelul 1.2 - Etichete de bază pentru formatarea documentelor HTML

	Atribut	Funcţie
	versiune = linia	Specifică versiunea HTML care a fost folosită pentru a crea acest document
		Textul inclus în etichete va fi afișat cu caractere cursive
Etichetă HEAD - etichete de început și de sfârșit ale părții de antet a unui document HTML
etichetăTITLU- etichete de început și de sfârșitHTML-document
etichetăA- etichete de început și de sfârșit care vă permit să creați un hyperlink (atributhref) sau identificatorul de fragment (atributNume) antetHTML-document
	href = url	Specifică adresa URL a documentului țintă al hyperlinkului (obligatoriu dacă nu este o ancoră de nume)
	metode = listă	Setează o listă de metode de afișare specifice browserului (separate prin virgule)
	nume = linia	Specifică numele identificatorului de fragment (obligatoriu dacă nu este o ancoră de link hipertext)
	rel = conexiune	Determină relația acestui document cu documentul țintă
	rev = conexiune
	tinta = Nume	Specifică numele cadrului sau ferestrei de afișare a documentului referit
	titlu = linia
		Specifică un URN independent de locație pentru acest hyperlink
etichetăABORDARE- textul inclus în aceste etichete este o adresă
etichetăB- textul inclus în aceste etichete va fi afișat cu caractere aldine
etichetăBAZA- este indicata bazaUrlpentru toate rudeleUrlîn acest document
	Atribut	Funcţie
	href = url	Url-ul de bază este specificat
	tinta = Nume	Setează fereastra țintă implicită pentru toate linkurile în document. Este destinat în principal redirecționării link-urilor către alte cadre. Există patru valori speciale: _blank, _parent, _self și _top.
etichetăBASEFONT- indică dimensiunea fontului pentru textul următor
	Atribut	Funcţie
	dimensiune = sens
etichetăMARE- textul inclus în etichete va fi afișat într-un font mai mare
etichetăCORP- etichetele de început și de sfârșit ale corpului documentului
	alink = Culoare	Setarea culorii legăturilor hipertext active dintr-un document
	fundal = url	Specifică adresa URL a imaginii de fundal
	bgcolor = Culoare	Setarea culorii de fundal a unui document
	bgproperties = sens	Dacă sens egal fix, imaginea de fundal este împiedicată să defileze împreună cu conținutul documentului (IE2 și mai mare)
	leftmargin = valoare n nu	Setați dimensiunea (în pixeli) a marginii din stânga a documentului (IE2 și mai mare)
	link = Culoare	Setarea culorii linkurilor hipertext „nevizitate” dintr-un document
	text = Culoare	Setarea culorii textului simplu dintr-un document
	topmargin = sens	Setați dimensiunea (în pixeli) a marginii de sus a documentului (IE2 și mai mare)
	vlink = Culoare	Setarea culorii link-urilor „vizitate” din document
etichetăBR- întrerupeți fluxul de text curent și reluați-l de la începutul rândului următor
	Atribut	Funcţie
		Setează „înfășurarea” în jurul obiectului, a cărui locație este specificată de valoarea acestui atribut (stânga, dreapta sau toate). Când împachetați la o nouă linie, textul va fi poziționat astfel încât obiectul să rămână vizibil
etichetăCENTRU- centrarea textului inclus în etichete
etichetăCITA- textul inclus în etichete este un citat
etichetăCOMETARIU- Comentariu în textul documentului. Comentariile vor fi vizibile în orice browser. Pentru toate browserele, comentariul este prezentat ca
etichetăDD- precizează partea descriptivă pentru elementul listei de definiții
etichetăDFN- textul inclus în etichete este formatat ca definiție
etichetăDL- crearea unei liste de definiții care conțin etichete< dt> și< dd>
etichetăDT- se setează o parte descriptiv-condițională pentru un element din lista de definiții
etichetăÎNCORPORARE- etichete de început și de sfârșit care vă permit să descrieți obiectul care urmează să fie încorporat în document. În funcție de tipul obiectului încorporat, pe lângă cele indicate mai jos, pot fi incluși parametri suplimentari
	Atribut	Funcţie
		Specifică adresa URL a obiectului încorporabil. Acest atribut este obligatoriu
	inaltime = n	Specifică înălțimea zonei pe care o va ocupa obiectul încorporat
	nume = Nume	Specifică numele obiectului încorporabil
		Specifică lățimea zonei pe care o va ocupa obiectul încorporat
etichetăFONT- stabilirea dimensiunii, culorii sau tipului de literă a textului inclus în etichete
	Atribut	Funcţie
		Setarea culorii textului etichetat
	fata = lista	Setează tipul textului etichetat (setează primul dintre numele fonturilor specificate într-o listă separată prin virgulă)
	dimensiune = sens	Setează dimensiunea fontului de bază. Interval - de la 1 la 7
etichetăHn- textul inclus în etichete este un titlu de niveln... Valori posibilen- de la 1 la 6
	Atribut	Funcţie
	aliniază = tip de	Specifică modul în care titlul este aliniat: stânga (stânga, implicit), centru (centru) sau dreapta (dreapta)
etichetăHR- întrerupeți fluxul de text curent. La pauză va fi introdusă o riglă orizontală.
	Atribut	Funcţie
	aliniază = tip de	Specifică modul în care este aliniată rigla: aliniată la stânga (stânga), centrată (în centru, în mod implicit) sau aliniată la dreapta (dreapta)
		Nu utilizați umbrirea volumetrică atunci când afișați rigla
		Setarea lățimii riglei la un număr întreg de pixeli
	latime = sens
etichetăeu- textul inclus în etichete va fi afișat cu caractere cursive
etichetăIMG- o imagine este inserată în fluxul de text curent
	Atribut	Funcţie
	alt = text	Setează text alternativ pentru browserele care nu acceptă imagini
	Bordura = n	Setarea grosimii (în pixeli) a marginii imaginilor conținute în hyperlinkuri
		Adăugarea de funcții de control al redării pentru clipurile video încorporate (IE2 și mai mare)
	Dynsrc= url	Dat deUrl-adresa clipului video de afisat( IE 2 și mai mare)
	Inaltime = n	Setează înălțimea imaginii în pixeli
	Hspațiu = n	Setează plasarea la stânga și la dreapta imaginii zonelor de spațiu liber cu o lățime de n pixel
		Se indică faptul că atunci când se utilizează această etichetă în interiorul unei etichete imaginea este selectată cu mouse-ul
	bucla = sens	Setează numărul de repetări ale redării video. Sens poate fi întreg sau infinit (IE2 și mai mare)
	Lowsrc = url	Indicat de imaginea de joasă rezoluție pe care browserul ar trebui să se încarce mai întâi. Este urmată de o imagine specificată de atribut (IE2 și mai mare)
		Specifică adresa URL inițială a imaginii care va fi redată. Acest atribut este obligatoriu
	începe = start	Specifică când se redă videoclipul (opțiuni: fileopenormouseover)
	Usemap = url	Specifică zona sensibilă la mouse-ul imaginii
	Vspace = n	Setează poziționarea deasupra și dedesubtul imaginii zonelor de spațiu liber prin npixel
		Specifică lățimea imaginii în pixeli
etichetăKBD- textul inclus în etichete este introdus caracter cu caracter (ca la tastarea de la tastatură)
etichetăLEGĂTURĂ- în titlu (< cap >) documentul este determinat de un link de la acest document către un alt document
	Atribut	Funcţie
	href = url
	metode = listă	Setează o listă de metode de afișare specifice browserului pentru acest link (separate prin virgule)
	rel = conexiune	Determină relația acestui document cu documentul țintă. Pentru InternetExplorer3.0rel = stil înseamnă existența unei foi de stil externe
	rev = conexiune	Se determină feedback-ul documentului țintă cu datele
		Specifică adresa URL a foii de stil externe care va fi folosită pentru a formata documentul ( IE2 și mai mare)
	titlu = linia	Setează titlul documentului țintă
	tip = text / css
		Pentru documentul țintă, este specificat un nume generic de resursă, indiferent de locația acestuia
etichetăHARTĂ- se determină aria imaginii sensibilă la mișcarea mouse-ului
	Atribut	Funcţie
	nume = linia	Numele acestei zone este stabilit. Acest atribut este obligatoriu
etichetăNOBR- nu sunt permise pauze în textul inclus în etichete
etichetăP- etichete de început și de sfârșit de paragraf
	aliniază = tip de	Setează modul în care textul este aliniat într-un paragraf: stânga (stânga), centru (centru) sau dreapta (dreapta)
etichetăTEXT SIMPLU- specifică că restul documentului trebuie afișat neprocesat ca text preformatat
etichetăPRE- textul inclus în etichete va fi afișat astfel. modul în care a fost preformatat, fără procesare, cu respectarea strictă a întreruperilor de rând și a spațiilor
		Browserul va aranja textul astfel încât linia să încapă (dacă este posibil) n caractere
etichetăS
etichetăMĂMĂLIGĂ- textul inclus în etichete este un șablon
etichetăMIC- textul inclus în etichete va fi afișat într-un font mai mic
etichetăDISTANȚIER- introduceți un separator în document(NumaiN3)
	tip = tip de	Specifică tipul de separator: vertical – o zonă de spațiu gol de dimensiunea specificată este plasată între două linii de text; orizontal – o zonă de spațiu gol de dimensiunea specificată este plasată între cuvinte sau caractere; bloc – inserări o zonă dreptunghiulară
		Specifică (în pixeli) lățimea separatorului orizontal sau înălțimea separatorului vertical
		Specifică lățimea separatorului de bloc
	inaltime = n	Specifică înălțimea separatorului de bloc
	aliniază = sens	Specifică modul în care separatorul de bloc este aliniat cu textul din jur.
etichetăSPAN- textul inclus în etichete va fi formatat folosind foaia de stil(NumaiIE3 și mai mare)
	Atribut	Funcţie
	stil = elementele	Elementele din foaia de stil sunt setate pentru text într-un interval dat
etichetăLOVITURĂ- textul inclus în etichete va fi afișat cu o linie orizontală tăiată
etichetăSUB- textul inclus în etichete va fi afișat ca indice
etichetăCINA- textul inclus în etichete va fi afișat ca superscript
etichetăTT- textul inclus în etichete va fi afișat în font monospațial
etichetăVAR- textul inclus în etichete este numele variabilei

Culoarea fontului de pe site poate fi setată folosind codul HTML. Pentru aceasta există o etichetă font... Prin definiție, eticheta font servește ca un fel de „înveliș” sau „container” pentru text, prin controlul proprietăților cărora le poți schimba aspectul textului.

Etichetă font se aplică după cum urmează:

Creator de site-uri web "Nubex"

Cel mai simplu mod de a schimba culoarea fontului în HTML este folosirea atributului culoare etichetă font:

Creator de site-uri web "Nubex"

Aceasta setează culoarea la albastru pentru cuvântul etichetat. font.

Dar, pe lângă parametrul de culoare, eticheta are și alte atribute.

Atributele etichetei FONT

Etichetă font are doar trei atribute:

• culoare- stabileste culoarea textului;
• mărimea- stabilește dimensiunea textului;
• față- setează familia de fonturi.

Parametru culoare poate fi specificat printr-un nume de culoare (de exemplu, „roșu”, „albastru”, „verde”) sau un cod hexazecimal (de exemplu, # fa8e47).

Atribut mărimea poate lua valori de la 1 la 7 (valoarea implicită este 3, care corespunde la 13,5 puncte pentru fontul Times New Roman). O altă opțiune pentru setarea atributului este „+1” sau „-1”. Aceasta înseamnă că dimensiunea va fi redimensionată de la bază cu 1 mai mult sau, respectiv, mai puțin.

Să luăm în considerare aplicarea acestor atribute în exemplul nostru:

Creator de site-uri web "Nubex"

Am aplicat eticheta font la un cuvânt, i-au dat o dimensiune de 6, o culoare portocalie și o familie de fonturi „Serif”.

Setarea culorii textului cu CSS

Dacă trebuie să aplicați o anumită formatare (de exemplu, să schimbați culoarea textului) la mai multe secțiuni ale textului, atunci ar fi mai corect să utilizați codul CSS. Există un atribut de culoare pentru aceasta. Să ne gândim cum să-l folosim în exemplul nostru:

Constructor site-uri "Nubex"

Aici setăm albastru pentru cuvântul „Constructor” (dimensiunea sa, implicit, este 100% din bază), verde și 125% pentru cuvântul „site”, portocaliu și 150% pentru cuvântul „Nubex”.

Pe lângă utilizarea dimensiunilor și stilurilor standard ale fonturilor, puteți defini fonturi pentru fiecare fragment de text folosind etichete speciale. Cel mai simplu mod este să folosești așa-numitul stiluri fizice:

Pentru fiecare etichetă de stil fizic, există o etichetă de final corespunzătoare care împiedică aplicarea ulterioară a stilului. De exemplu, pentru etichetă eticheta de închidere este.
Mai jos este un exemplu de program și apariția diferitelor stiluri de fizică:

<НЕАD><ТIТLЕ>Stiluri fizice

<В>Îndrăzneţ
cursive
Subliniat
Barat
<ТТ>Maşină de scris
<ВХ1>cursiv aldine
<ВХ1><и>Subliniere cursiv aldine

Orez. 649. Stiluri fizice

În cadrul etichetei de titlu, puteți insera o etichetă de stil fizic pentru a modifica întregul titlu sau doar o parte din acesta. De exemplu, pentru a pune în italice o porțiune a textului definită ca titlu, puteți utiliza următoarea construcție:

<НЕАD><ТIТLЕ>Stiluri fizice și logice

<Н2>Aceasta - modificat Titlu de nivel 2

Orez. 650. Modificarea stilului de font al unei părți de titlu

Folosind o etichetă personalizată puteți personaliza fontul pentru imaginea textului: setați fontul, dimensiunea și culoarea. În primul rând, puteți seta dimensiunea implicită a fontului principal utilizat în document. eticheta fontului principal are formatul ... Mărimea fontului de bază poate fi setată de la 1 la 7. Dacă nu utilizați această etichetă, dimensiunea fontului de bază implicită este setată la 3.
etichetă setează dimensiunea fontului curent pentru fragmentele de text individuale. Stilurile nu sunt afectate de această etichetă. Gama de valori posibile este de la 1 la 7. Această etichetă vă permite, de asemenea, să controlați dimensiunea fontului curent în raport cu cel principal. Pentru a face acest lucru, utilizați caracterul + (pentru a crește) și caracterul - (pentru a micșora) dimensiunea fontului cu cantitatea specificată. De exemplu, dacă dimensiunea fontului principal este setată la 3, atunci eticheta setează dimensiunea fontului curent la 5.
Pentru a seta fontul, utilizați eticheta ... De exemplu:

Dacă această etichetă nu este utilizată în documentul dvs., atunci browserul va folosi fontul setat în setarea sa. Prin urmare, este posibil ca textul de pe ecranul utilizatorului să nu arate așa cum l-ați imaginat. De asemenea, trebuie avut în vedere faptul că, dacă fontul pe care l-ați atribuit nu este instalat pe computerul utilizatorului, browserul va reda textul în fontul implicit.
Poți în etichetă specificați o listă de fonturi separate prin virgule. În acest caz, browserul va folosi primul font pe care îl găsește. De exemplu, puteți scrie eticheta:

FACE = „Arial, Sans Serif, Courier”>

De obicei, fonturi similare sunt specificate în listă. Se recomandă să atribuiți cele mai populare fonturi. Când plasați informații textuale pe o pagină, este mai bine să nu atribuiți deloc un nume de font, bazându-vă pe setările standard ale browserului. Dar apoi, atunci când proiectați pagina, ar trebui să utilizați și setările standard ale browserului pentru a sincroniza percepția dvs. asupra textului cu posibila percepție a utilizatorului. La urma urmei, nu creezi o pagină pentru tine, ci pentru cititorii tăi.
Folosind atributul COLOR din etichetă puteți seta culoarea fontului:

Argumentul pentru atributul COLOR este notația hexazecimală pentru codul de culoare (roșu, verde și albastru, cu alte cuvinte, RGB). Următorul program demonstrează controlul fonturilor:

<НЕАD><ТIТLЕ>Instalarea fonturilor

<Р>font Aria ABVGDEZHZIK
<Р>Font Courier ABVGDEZHZIK
<Р>font SYMBOL ABVGDEZHZIK

Orez. 651. Utilizarea diferitelor fonturi

Rețineți că în etichetă puteți utiliza unele sau toate atributele sale posibile. De exemplu:

În formulele matematice, precum și pentru notele de subsol, se folosesc adesea indici care diferă de textul principal prin poziție (puțin mai mare sau mai mică) și dimensiune. Etichetele sunt folosite în acest scop. și pentru superindice și, respectiv, subindice.

<НЕАD><Т1ТLЕ>Indici/ NEAD>

<НЗ>Un exemplu de utilizare a indicilor
<Р>(5 + x ²)^{x + 3}

A ₁+ a ₂+ a ₃
<Р>Note de subsol ²