HTML este un limbaj de etichetă.
Etichetă (descriptor) - cod special inserat în text pentru a formata elementele unui document HTML. Acesta este elementul de codificare de bază adoptat în standardul HTML. Eticheta este inclusă între paranteze unghiulare. De exemplu, o etichetă de paragraf este
Și eticheta linie orizontală - .
Există două tipuri de etichete: containere și etichete simple.
Container. Aceasta este o pereche de descriptori formată dintr-o etichetă de început (sau de deschidere) și o etichetă de sfârșit (sau de închidere). Eticheta de început are forma , unde TAG este numele etichetei HTML efective. Eticheta finală arată ca . Containerele sunt concepute pentru a stoca anumite informații, cum ar fi text sau alte etichete HTML. Prin urmare, între etichetele de început și de sfârșit, conținutul containerului este închis. De exemplu, un element care este text formatat este inclus între etichetele AND.
Mâner gol. Diferă de un container prin faptul că nu conține nicio informație. Are doar o etichetă de pornire. Un mâner gol îndeplinește de obicei o sarcină separată, fără legătură cu un anumit text. De exemplu, o etichetă creează o linie orizontală.
Element de document HTML- Acestea sunt etichetele de început și de sfârșit ale containerului împreună cu conținutul cuprins între ele. Un element poate fi o imagine, o bucată de text, un formular, un tabel, o listă, un link, un câmp de text, un buton și chiar titlul documentului sau al părții sale principale (corpul).
cometariu: limbaj HTML nu face distincție între majuscule și minuscule. Etichetele pot fi tastate atât cu majuscule, cât și litere mici, adică comanda este echivalentă cu comanda sau. Nu toate etichetele sunt acceptate de toate browserele. Dacă browserul nu acceptă eticheta, pur și simplu o ignoră.
Cea mai importantă dintre etichetele HTML este eticheta cu același nume. Trebuie să deschidă întotdeauna documentul, așa cum eticheta trebuie să fie pe ultima linie. Aceste etichete înseamnă că liniile dintre ele reprezintă un singur document HTML. Acest lucru este important deoarece documentul în sine este un fișier text simplu ASCII. Fără aceste etichete, un browser sau alt vizualizator nu este în măsură să identifice formatul documentului și să-l interpreteze corect.
Titlul documentului nu este element obligatoriu, dar un titlu bine scris poate fi de mare ajutor. Scopul antetului documentului este de a oferi informații programului care interpretează documentul. Elemente din interior Secțiunea CAP(cu excepția titlului documentului înregistrat în secțiunea TITLE) nu sunt vizibile pe ecran. Elementele conținute în secțiunea HEAD a unui document sunt necesare pentru:
Dați documentului un titlu
Definiți relațiile dintre mai multe documente
Spuneți browserului să creeze un formular de căutare
Definiți o metodă pentru trimiterea de mesaje speciale browser specific sau alt program de vizionare
Secțiunea HEAD se deschide cu eticheta. De obicei, această etichetă vine imediat după . Eticheta de închidere indică sfârșitul acestei secțiuni. Între etichetele menționate se află etichetele rămase din secțiunea antetului documentului.
Secțiunea TITLUL este singurul element necesar al titlului documentului și servește pentru a da un titlu documentului. De obicei, este afișat în bara de titlu a ferestrei browserului. Conținutul secțiunii TITLE nu trebuie confundat cu numele fișierului documentului. Reprezinta șir de text, complet independent de numele și locația fișierului. Numele fișierului este strict definit sistem de operare computerul pe care este stocat.
Numele documentului este scris între etichete și și este un șir de text. Nu ar trebui să-l pui între ghilimele dacă nu vrei să apară nici pe ecran. În cele mai multe cazuri, secțiunea TITLE nu are mai mult de un rând.
În principiu, numele poate fi de orice lungime și poate conține orice caractere, cu excepția unora rezervate. În practică, este mai bine să te limitezi la o singură linie, ținând cont că numele apare în bara de titlu a ferestrei browserului. De asemenea, ar trebui să vă amintiți ce rămâne din titlul documentului când minimizați fereastra browserului. Prin urmare, ar trebui să încercați să plasați cele mai importante cuvinte la începutul titlului.
Deși a existat o tendință către conținut mai „activ” pe WWW, majoritatea cititorilor sunt încă interesați partea de text pagini. Prin urmare, indiferent dacă este scris text nou sau cel vechi este convertit, procesul de lucru pe corpul documentului durează o perioadă considerabilă de timp.
Înainte de a începe să completați documentul cu conținut, este logic să-i creați „cadru”. Un document HTML trebuie să conțină câteva elemente necesare, fără de care nu va fi interpretat corect. Un exemplu de șablon simplu este afișat în listă.
Acesta este un exemplu de document
Introduceți textul corpului aici
Șablonul se deschide cu eticheta
, care, după cum știm deja, este necesar pentru fiecare document HTML. Următoarea etichetă este începutul titlului documentului. Titlul conține un element TITLE care introduce titlul documentului, în cazul nostru „Acesta este un exemplu de document”. Titlul este închis cu eticheta. Urmează eticheta, după care este plasat textul (corpul) documentului. O etichetă înseamnă sfârșitul corpului, iar o etichetă înseamnă sfârșitul întregului document. BODY poate conține un numar mare de atribute. Toate sunt importante deoarece determină aspectul general al documentului. Aceste atribute sunt prezentate în tabel.Scop |
|
| O LEGĂTURĂ | definește culoarea legăturii active în prezent |
| FUNDAL | indică adresa URL a imaginii care este folosită ca fundal |
| BGCOLOR | definește culoarea de fundal a documentului |
| BGPROPERTIES | dacă este setat la FIXED , imagine de fundal nu defilează |
| MARGINEA STÂNGĂ | Setează marginea din stânga în pixeli |
| LEGĂTURĂ | Specifică culoarea unui link care nu a fost încă vizualizat |
| TEXT | Definește culoarea textului |
| TOPMARGIN | Setează marginea superioară în pixeli |
| VLINK | Specifică culoarea unui link deja vizualizat |
Să aruncăm o privire mai atentă asupra acestor atribute.
Determinarea culorilor părților constitutive ale documentului este primul pas către crearea acestuia. Dacă nu se face acest lucru, sunt utilizate culorile implicite. Ele sunt determinate de setările programului de vizualizare.
Nu există reguli pentru o paletă bine echilibrată. Trebuie doar să rețineți că, pentru ca cititorii să poată citi textul fără a întâmpina inconveniente, încercați să mențineți un contrast ridicat între text și fundal și să evitați apropierea de zone cu culori similare.
Culorile HTML sunt specificate prin numere hexazecimale. Sistemul de culori se bazează pe trei culori primare - roșu, albastru și verde. Pentru fiecare culoare este specificat valoare hexazecimală variind de la 00 la FF, corespunzând intervalului 0-255 în zecimală. Aceste valori sunt apoi combinate într-un singur număr, precedat de simbolul #. Pentru simplitate, HTML 3.2 definește 16 culori standard, care împreună cu codurile lor hexazecimale sunt date în tabelul de mai jos.| Culoare | Cod |
| Negru | #000000 |
| Magoop (visiniu închis) | #800000 |
| Verde | #008000 |
| măsline | #808000 |
| Bleumarin (albastru închis) | #000080 |
| Violet | #800080 |
| Teal | #008080 |
| gri | #808080 |
| Argint | #С0С0С0 |
| roșu | #FF0000 |
| tei (tei) | #00FF00 |
| Galben | #FFFF00 |
| Albastru | #0000FF |
| fucsia (fucsia) | #FF00FF |
| Aqua | #00FFFF |
| alb | #FFFFFF |
Atributul VLINK este folosit pentru a afișa linkuri care au fost deja vizualizate. De regulă, ele sunt mai colorate umbra inchisa aceeasi culoare ca nu
link-uri vizualizate. ALINK specifică culoarea link-ului activ în prezent. Acesta este un atribut relativ nou, folosit de obicei pentru vizualizarea documentelor cu mai multe cadre.Singur moduri populare a decora o pagină HTML înseamnă a plasa elemente grafice de fundal pe ea, vizibile sub textul principal (atribut
FUNDAL ). Această tehnică ajută la evidențierea integrității documentului. dimpotrivă, împărțiți-l în părți logice.Majoritatea imaginilor de fundal au dimensiuni mici, dar copiile lor, cum ar fi tapetul, umplu întreaga fereastră de vizualizare. Diverse imagini texturate (con model) sunt deosebit de populare: cărămizi, marmură, tot felul de țesături. Practic, ele servesc pentru a umple pur și simplu golurile din document. Paginile mai atente au fundaluri care se potrivesc cu conținutul.
Atribute
LEFTMARGIN și TOPMARGIN sunt folosite pentru a seta distanța dintre marginile din stânga și de sus ale textului și marginile corespunzătoare ale ferestrei browserului. Locația altor margini de text nu este reglabilă. Acest lucru se face pentru a se asigura că pagina poate fi vizualizată de orice browser. Este imposibil să știți dinainte care este dimensiunea ferestrei cititorului de documente. LEFTMARGIN setează distanța dintre marginea din stânga a ferestrei browserului, măsurată în pixeli. Cel mai adesea, acest atribut este folosit atunci când autorul dorește să aibă în stânga o marjă fără text și să aibă un model sau o culoare diferită de restul imaginii de fundal. TOPMARGIN este folosit pentru a seta distanța dintre marginea superioară a textului și marginea superioară a ferestrei browserului. Este de obicei folosit atunci când partea de sus a imaginii de fundal este importantă și se dorește să fie lăsată deschisă. Documentele HTML pot include comentarii care nu vor fi vizibile pentru cititor. Ele trebuie să înceapă cu eticheta . Tot ceea ce conține aceste etichete rămâne invizibil atunci când vizualizați pagina. ADDRESS este unul dintre cele mai importante elemente ale HTML. Servește la identificarea autorului documentului și (opțional) la indicarea adresei autorului. Informațiile privind drepturile de autor sunt de obicei plasate aici. Acest element este situat fie la începutul, fie la sfârșitul documentului. ADRESĂ constă dintr-un text plasat între etichete și. Textul cuprins între aceste etichete este de obicei afișat cu caractere cursive în fereastra browserului.Voi încerca să conduc buletinul informativ conform principiului „de la simplu la complex”. O voi desfășura exact în acest format, astfel încât o persoană care ar dori să învețe elementele de bază ale construirii site-ului web să poată imediat, după lansarea buletinului informativ, să pună în practică materialul prezentat.
Dar aș dori să fac imediat o rezervă că, în special, limbajul HTML este un limbaj foarte extins, care evoluează constant. Și prin urmare, pentru a stăpâni această limbă în nivel inalt Ar trebui să studiați temeinic elementele de bază (adică problemele mele din buletinul informativ). Și în același timp practică.
Pe măsură ce învățăm elementele de bază ale HTML, ne vom referi la Stiluri CSS. Aceasta înseamnă că vom studia și CSS. Dar asta e puțin mai târziu. De asemenea, vom apela la javascript pentru ajutor.
Pentru lecția introductivă de astăzi, vom începe prin a afla despre structura unui document HTML și despre etichetele HTML de bază.
Merge…
Fiecare document HTML începe cu linia:
XHTML
|
ÎN caz general această linie spune browserului care deschide pagina noastră pe ce standarde ar trebui să se bazeze.
Eticheta este foarte diversă, iar modificarea ei determină modul în care va fi afișat conținutul pe pagina ta.
Cu toate acestea, dacă aranjați cu pricepere toate elementele și blocurile de pe pagină și aplicați stilul, atunci totul va funcționa la fel de bine în toate browserele cu .
Dar, deși nu știm ce sunt blocurile, ce stiluri sunt și cum să aplicăm această „abrucadabra”, consider că este necesar să revenim la o considerație detaliată atunci când știm deja cum să facem ceva și putem cu adevărat să-i evaluăm munca.
Între timp, să mergem în jos pe pagină.
Apropo, de ce am început să mă uit la documentul HTML din partea de sus a paginii?
Pentru că browserul încarcă pagina și „citește codul” de sus în jos, de la stânga la dreapta. (Totuși, la fel cum citim cărți).
Poate cuvântul etichetă nu este complet clar?
În general, o etichetă este o instrucțiune care spune browserului ce să facă acest loc documentul trebuie făcut.
Folosim etichete pentru a ne crea paginile. Toate etichetele sunt închise în așa-numitele „colțuri” ( ). Și unul de închidere (cu o oblică). De exemplu, miniatură. Specifică faptul că textul dintre etichetele puternice de deschidere și de închidere va fi aldine.
Sper că este clar ce este o etichetă.
Vă sugerez să introduceți ceva cu propriile mâini.
Asadar, haideti sa începem.
Lansați notepad sau wordpad în OC WINOWS. Să introducem următoarele rânduri:
XHTML
Titlul ferestrei browserului
Titlul ferestrei browserului
|
Să salvăm fișierul sub un nume, de exemplu start.html. Acum să ne dăm seama ce au scris.
Între etichete se află informații care nu sunt afișate pe pagină.
De exemplu, eticheta, apropo, nu necesită o etichetă de închidere; poate indica codificarea (charset=windows-1251) sau informații despre autor (name="author" content="Full name") sau cuvinte pentru motor de căutare, eticheta va forța browserul să meargă automat pe site-ul mysite.ru după 30 de secunde (exemplu).
Eticheta definește textul din bara de titlu a ferestrei browserului. (Etichetă de închidere).
Eticheta poate conține și scripturi javascript sau vbscript inclus în etichete.... .
Și stilurile incluse în etichete... .
Probabil că vom termina cu această etichetă.
Acesta este, de fapt, corpul documentului; tot ceea ce vedem pe pagină se află aici. Eticheta are un set de parametri pe care îi vom analiza, dar nu este recomandat să le folosim.
bgcolor - setează culoarea de fundal a documentului. ( )
fundal - indică adresa URL a imaginii - fundalul documentului.
text - setează culoarea textului documentului.
link - setează culoarea hyperlinkurilor.
vlink= - setează culoarea hyperlinkurilor pe care le-ați vizitat deja folosind o valoare.
alink= - Setează culoarea hyperlinkurilor atunci când se face clic.
bgproperties=fixed - imaginea de fundal nu se va derula. Acestea. textul se va muta atunci când este apăsat PageDown, dar fundalul nu.
Acest parametru doar suportate Internet Explorer.
Acești parametri pot fi combinați, de exemplu, pe această pagină se utilizează:
XHTML
|
Să introducem această linie în exemplul nostru anterior.
XHTML
Codificarea în sine nu este afișată direct pe pagina web, dar încă joacă un rol important. Dacă nu este setat în mod explicit, pot apărea erori la deschidere browsere diferite, iar lectura poate să nu fie posibilă.
— din punct de vedere al volumului, putem spune că acest bloc include cele mai multe informații, deoarece în el este format corpul paginii. Acesta este exact ceea ce va fi afișat pe ecran.
Orez. 1. Acesta este un exemplu tipic etichetele necesare, care formează structura documentului.
- - etichete de titlu pereche foarte importante care sunt afișate pe o pagină web. De regulă, h1 conține titlul unui articol sau al unei alte publicații, h2 conține subtitluri, h3 conține subtitluri ale subtitlurilor etc. Un document mare ar putea avea nevoie de toate aceste etichete.
Titlul este redat ca element de bloc și are umplutură în partea de sus și de jos. Se recomandă împărțirea textelor mari în mai multe subtitluri, deoarece astfel percepția cititorului asupra materialului se îmbunătățește. De asemenea, antetul are functie importanta in ceea ce priveste optimizarea site-ului in functie de cerinte motoare de căutare. Cuvânt cheieîn antet și subtitluri îmbunătățește relevanța paginii.
— formează un paragraf (paragraf) de text. De asemenea foarte element important. Este puțin probabil ca cineva să vrea să citească un text continuu care nu este împărțit în paragrafe în niciun fel, nu?
Paragraful are și mici liniuțe. ÎN editori vizuali Sistemele de gestionare a conținutului pot plasa automat această etichetă ori de câte ori faceți două întreruperi de rând.
Poate că cele mai de bază etichete care sunt responsabile pentru structură au fost descrise mai sus. Fiecare pagină web le are. Dar cum se formează o etichetă și ce include aceasta?
Structura etichetă htmlSă înțelegem imediat cu un exemplu.
Titlu
Aici puteți vedea că noi nu am scris doar. Puteți adăuga atribute suplimentare oricărei etichete. Sunt scrise în partea de deschidere a elementului.
În primul rând, numele atributului în sine este scris și apoi valoarea acestuia este setată. În acest exemplu, linia class = „title” va lega clasa de stil de titlu la titlul nostru, astfel încât să putem accesa acest element în css prin intermediul acestuia.
Între etichetele împerecheate am notat ceea ce va fi afișat direct pe ecran. După aceasta, ar trebui să închideți eticheta. Uitarea de a face acest lucru poate duce la erori interesante. De exemplu, tot textul de pe o pagină poate fi transformat într-un titlu. ÎN etichete unice nu poti scrie text liber, puteți seta doar anumite atribute în ele.
Bună ziua, dragi cititori ai blogului! Astăzi vom vorbi despre structurarea textului pe paginile web, despre caracteristicile afișajului acestuia și vom analiza cum să împărțim textul în fragmente logice separate: titluri, paragrafe, liste.
Există multe etichete pentru lucrul cu textul în html, dar mai întâi trebuie să vorbim despre unele caracteristici de afișare a textului în browser. În primul rând, orice număr de spații, file și întreruperi de linie dintr-un rând apare ca un singur spațiu. Acestea. Poziționarea textului folosind spații și file nu va funcționa.
De exemplu, aceste rânduri pe o pagină web vor fi afișate la fel, în ciuda ortografiei diferite:
Bun venit pe site-ul nostru!
Bun
Bine ati venit pe site-ul nostru!
Bine ati venit
la noi
site!
Excepție este eticheta, în cadrul căreia toate spațiile și cratimele sunt afișate ca atare.
În al doilea rând, textul ocupă lățimea ferestrei browserului. Dacă o linie lungă de text este mai largă decât fereastra browserului, întreruperile de rând vor fi inserate automat la spații sau cratime. Dacă nu există spații sau cratime în linie, iar linia nu se potrivește cu lățimea ferestrei, atunci browserul va afișa dungă orizontală sul.
Acum să trecem la considerare elemente structurale text în markup html.
Paragrafe în HTMLDe obicei, blocurile de text sunt separate prin paragrafe. Acest lucru facilitează citirea unor bucăți mari de text. Limbajul HTML pentru crearea unui paragraf conține etichetă asociată
. Sintaxa pentru crearea paragrafelor este următoarea:
Acesta este primul paragraf.
Și acesta este al doilea paragraf
Paragrafele dintr-o pagină HTML sunt separate prin mici indentări de elementele anterioare și ulterioare. Etichetă
De asemenea, un element de bloc. Ce s-a întâmplat elemente de bloc Am scris în articolul „”. Permiteți-mi să vă reamintesc că elementele bloc se caracterizează prin faptul că ocupă toată lățimea disponibilă a paginii HTML, înălțimea elementului este determinată de conținutul său și începe întotdeauna pe o linie nouă.
Să ne uităm la un exemplu de utilizare a paragrafelor pe o pagină web. Să deschidem editor de text, introduceți codul HTML și salvați-l cu extensia html:
Site despre mașini.
Site despre mașini.
Clasificarea mașinilor
Autoturism;
Marfă;
SUV;
Buggy;
Ridica;
Sport;
Curse.
La deschidere acest fișier va arata cam asa:
Pentru moment, pagina noastră conține doar paragrafe.
Pentru a alinia textul într-o etichetă de paragraf
Sprijină atributul de aliniere. Poate lua una dintre cele patru valori:
- stânga — aliniați textul la stânga;
- center — aliniați textul la centru;
- dreapta — aliniază textul la dreapta;
- justificare - alinierea latime, i.e. aliniați textul simultan la dreapta și la stânga. Pentru a face acest lucru, browserul plasează spații între cuvinte.
În mod implicit, atributul align este lăsat. Un exemplu de utilizare a atributului align:
Acest text se află într-un paragraf despre pagina html va fi lăsat aliniat!
Acest text va apărea în centrul paginii în browser!
Acest text va fi aliniat la dreapta!
Și browserul va alinia această bucată mare de text în lățime, adică. simultan pe marginea dreapta si stanga! Pentru a face acest lucru, browserul web va introduce spații suplimentare între cuvinte, iar paragraful va căpăta un aspect îngrijit, ușor de citit!
Și așa va fi afișat în browser:
Titlurile sunt folosite pentru a evidenția secțiuni de text pe o pagină web. Există șase niveluri de titluri în html. Cel mai nivel superior este nivelul 1 - etichetă, iar cea mai mică este nivelul 6, eticheta. Etichete -
