Noțiuni de bază HTML pentru începători, ceea ce ar trebui să știe acum orice webmaster sau blogger începător. Dacă doriți să învățați cum să creați site-uri web de bază, să înțelegeți codul în sine, să știți ce se află în spatele ce și ce ar trebui să meargă, este pur și simplu imposibil să faceți acest lucru fără cunoașterea elementelor de bază ale limbajului HTML. Pe blogul meu voi avea un întreg lanț de articole pe care le voi dedica acestui subiect de la A la Z, voi descrie fiecare etichetă care este prezentă în document, ce înseamnă și cum să o folosesc corect.
Bazele HTMLDacă nu știi cele mai elementare lucruri, drumul tău este închis. Consider că fiecare persoană care decide să dezvolte și să creeze site-uri web ar trebui să cunoască și să înțeleagă elementele de bază, în ce constă site-ul în sine, cum funcționează și ce se întâmplă în codul în sine.
Desigur, există destul de multe limbaje de programare, toate sunt complexe în felul lor, dar există unele pe care trebuie neapărat să le cunoști. Dacă doriți să proiectați frumos o scrisoare care să fie trimisă prin poștă, aveți propriul grup VKontakte, un grup pe alte rețele sociale, același canal YouTube, trebuie să modificați codul de pe oricare dintre motoarele site-ului, trebuie doar să cunoască conceptele de bază.
Am dat doar câteva exemple, de fapt, acum aceste cunoștințe sunt folosite din ce în ce mai des pe Internet. Sunt mai mult un practician decât un teoretician, așa că în articolele mele din această secțiune vă voi arăta exemplele mele despre cum și ce am făcut, pas cu pas. Voi posta atât pagini de exemplu, cât și site-uri întregi.
Documentul HTML este cel mai simplu Document text, limba de etichetare pe care o întâlniți în fiecare zi pe Internet. Etichetele descriu structura unui document. Etichetele sunt formatate ca unghiular< >paranteze, în interiorul cărora este scris numele etichetei. Browserul se uită la structura documentului, îl construiește și îl afișează conform instrucțiunilor sale pe monitor, dacă, desigur, ați făcut totul corect.
Întregul proces începe chiar înainte de a vedea imaginea finală. Browserele procesează un document secvenţial, de la început până la sfârşit. Inclusiv tot ce ar trebui să fie pe pagină. Tabele, imagini, scripturi și așa mai departe, cu excepția faptului că acestea includ stiluri CSS.
Bazele pentru începătoriCe este html - dacă te uiți la ce scrie Wikipedia - (HyperText Markup Language) limbaj de marcare hipertext pentru documente. Majoritatea paginilor de pe Internet conțin marcaj de pagină în această limbă. Această limbă interpretat de browsere, textul formatat rezultat este afișat pe monitorul computerului sau pe dispozitivul mobil.
Acest limbaj este în mod inerent foarte ușor și accesibil de învățat. Oricine poate învăța și înțelege elementele de bază. Pentru a folosi un astfel de limbaj, trebuie să cunoașteți și să utilizați descriptori, care sunt numiți și etichete. Cu ajutorul etichetelor este creat un document.
În ce ar trebui să constea structura documentului, ce etichete ar trebui să fie prezente. Să privim totul cu un mic exemplu. Am scris ceva text în MS Office și l-am arătat în această captură de ecran.
Pentru a afișa acest text în browser în același mod în care a fost scris în document, trebuie să îi adăugați un marcaj de pagină, care include câteva etichete. Mai întâi, uită-te la ele, apoi îi voi descrie pe fiecare cine este responsabil pentru ce.
Bun venit pe blogul meu, acum iei o lecție despre elementele de bază ale HTML. Dacă ți-a plăcut acest articol, te poți abona la acest blog pentru a primi articole noi în căsuța ta de e-mail.
Blogul lui Evgeny Nesmelov! website Noțiuni de bază ale html și css pentru începătoriÎn ce etichete constă orice document html, ce include și unde ar trebui să fie scris totul?
< html > < body > < h2 >< / h2 > < p >Bine ați venit pe blogul meu, urmați acum tutorialul despre elementele de bază HTML. Dacă ți-a plăcut acest articol, te poți abona la acest blog pentru a primi articole noi în căsuța ta de e-mail.< / p > < h2 >Blogul Evgeniei Nesmelov! Nesmelov. ru Bazele HTML și CSS pentru începători< / h2 > < / body > < / html > |
Orice cod constă din caractere care sunt plasate între paranteze unghiulare. Toate acestea se numesc elemente. Toate elementele constau de obicei din două etichete, de deschidere și de închidere. Vă sfătuiesc să priviți inițial cu atenție etichetele; dacă omiteți una dintre ele și nu o închideți, va trebui să revizuiți părți mari ale codului pentru a găsi eroarea.
Au fost cazuri când a durat mai mult de o zi, o persoană contactează și cere ajutor, nu poate găsi o eroare pe site-ul său, așa că uitați-vă întotdeauna cu mare atenție la ce și unde scrieți. Sa mergem acum în acest exemplu Să ne uităm la fiecare element al codului, ce este scris în el, ce înseamnă și ce se întâmplă în final.
Majoritatea etichetelor sunt împerecheate, ceea ce include o etichetă de deschidere și una de închidere. Pe lângă astfel de etichete, există și etichete unice. Etichetele pot merge împreună cu altele, astfel cuibărându-se unele în altele. De exemplu, afișați textul cu caractere aldine și cursive simultan.
Text
< strong > < i >Text< / strong > < / i > |
Permiteți-mi să vă reamintesc încă o dată, trebuie să urmați regulile prezente în document. Acesta este modul în care browserul înțelege ce este pe pagină, secvența acesteia, conținutul și așa mai departe.
O etichetă este o componentă care îi spune browserului web să efectueze o anumită sarcină. De exemplu, prezența unui paragraf, tabel, formular sau imagine.
Atribut - modifică eticheta. De exemplu, puteți alinia un paragraf centrat sau aliniat la dreapta, puteți, de asemenea, să setați locația imaginii pe pagină și așa mai departe.
ÎNTOTDEAUNA închideți etichetele, dacă îl deschideți, asigurați-vă că îl închideți. În caz contrar, va apărea o eroare și documentul dvs. nu se va afișa corect pe pagină. Există și excepții, care nu trebuie uitate.
Este clar necesar să înțelegeți că există un titlu de document și corpul acestuia. Titlul este tot ceea ce este conținut în etichetă. Corpul documentului (), corpul documentului conține tot conținutul paginii. Dacă este necesar să lăsați o secțiune de cod pentru dvs., incluzând astfel aceste etichete în comentarii, eticheta este folosită pentru aceasta. Tot ceea ce se află în interiorul unei astfel de etichete servește drept comentariu și nu este perceput de browsere.
Să începem cu primul. La începutul documentului am deschis o etichetă și la sfârșit am închis-o. Acest cod este prezent în absolut fiecare document; îi spune browserului că tot ce este plasat între aceste etichete este cod HTML. Este rădăcina documentului în sine; tot ceea ce este prezent ulterior în spatele acestei etichete nu mai este inclus în document și nu este perceput de browsere. Chiar la începutul documentului, eticheta este deschisă și la sfârșit trebuie închisă.
Întreaga secțiune a acestei etichete conține toate informațiile tehnice ale documentului. Ca și eticheta anterioară, capul trebuie de asemenea deschis și închis la sfârșit. Aceste informații includ titlul paginii, descrierea, cuvintele cheie ale motorului de căutare și codificarea. Despre codificare puțin mai jos.
Conţinut
< head >Conţinut< / head > |
Această etichetă este inclusă în cap și trebuie să fie scrisă în interiorul etichetei. Această etichetă de titlu este obligatorie și trebuie să fie prezentă în fiecare document HTML. În plus, apare ca titlul ferestrei browserului. Lungimea unui astfel de antet nu trebuie să depășească 60 de caractere. Textul unui astfel de antet ar trebui să conțină cele mai complete informații care caracterizează conținutul paginii.
Dacă ați scris „Hello World” în antet, aceasta este informația care ar trebui să fie afișată pe pagină și nu alta. Nu ar trebui să înșeli oamenii și motoarele de căutare, nu le place și, prin urmare, înrăutățiți lucrurile pentru dvs. Informațiile conținute în această etichetă ar trebui să fie relevante pentru conținutul paginii dvs.
După eticheta necesară titlu, există o etichetă meta opțională, dar la fel de importantă. Această etichetă este singură. Folosind această etichetă, setați o descriere pentru pagină (descriere) și cuvintele ei cheie (cuvinte cheie).
În plus, metaeticheta poate conține date despre autorul paginii și alte proprietăți de metadate. Puteți împiedica indexarea întregii pagini de către motoarele de căutare. A pune actualizare automata pagina după 20 de secunde sau după 5 secunde urmată de trecerea la o altă pagină.
< meta name = "robots" content = "index, follow" > < meta http - equiv = "refresh" content = "20" > < meta http - equiv = "refresh" content = "5; url=http://сайт/" > |
Pot exista mai multe astfel de meta-elemente, deoarece pot transporta informații complet diferite. Alți utilizatori, când deschid pagina în browser, nu văd toate descrierile dvs.; toate acestea rămân ascunse pentru vedere.
Eticheta de stil poate fi folosită și pentru a seta stiluri pe pagină. Dacă utilizați mai multe stiluri CSS diferite, atunci este recomandabil să le setați într-un fișier separat. Dacă trebuie să specificați mai multe dintre ele, toate acestea pot fi specificate direct în documentul html.
.bază ( lățime: 100px; culoarea fundalului: #000; înălțimea: 150px; culoare: #fff; )
< style type = "text/css" > Baza( lățime: 100px; fundal - culoare: #000; înălțime: 150px; culoare: #fff; |
Sau adăugați stiluri în mod specific unei etichete; pentru a face acest lucru, trebuie să adăugați un element de stil în interiorul etichetei în sine. Această etichetă trebuie utilizată în interiorul unui container care stabilește stiluri pentru pagină. Puteți folosi mai multe astfel de etichete, aceasta nu va fi o eroare.
Un pic similar cu eticheta anterioară, eticheta de legătură vă permite să setați stiluri pentru un document care se află într-un alt fișier. Cu alte cuvinte, vă puteți conecta la un document existent masă plină stiluri css, care constă din multe proprietăți. Astfel, reduceți dimensiunea documentului, care în cele din urmă se va încărca și se va deschide mai repede pe un computer sau dispozitiv mobil cu viteză scăzută a internetului.
Puteți conecta mai mult de un fișier, nu există restricții. Nu este nevoie să închideți o astfel de etichetă. Dacă totul este făcut corect, anumite stiluri dintr-un fișier separat vor fi încărcate în documentul dvs. Această etichetă poate fi adăugată la elementele de bază ale html și nu uitați de existența sa. Rezultatul este o imagine ca aceasta:
< link href = "css/style-lg.css" rel = "stylesheet" > < link href = "css/style-md.css" rel = "stylesheet" > < link href = "css/style-sm.css" rel = "stylesheet" > |
Prin utilizarea eticheta de script Puteți conecta diferite scenarii (scripturi) la document. Este necesară prezența etichetei de închidere. Scriptul în sine poate fi localizat la începutul documentului, în interiorul sau la sfârșit.
|
Spune browserului că orice lucru plasat între aceste etichete ar trebui să apară în fereastra browserului dvs. Iată principalele etichete care pot fi prezente în absolut fiecare document. eticheta corporală servește ca corp principal al paginii, care include tot conținutul acesteia. Este recomandabil să deschideți această etichetă și să nu uitați să o închideți la sfârșitul documentului.
Titlurile paginii h1 h2 h3Să mergem mai departe, vedem o etichetă care se deschide și se închide în același mod. Această etichetă denotă titlul principal al textului; în cele mai multe cazuri, sub titlul H1 se află titlul paginii. De fapt, există doar șase rubrici de date. . Sunt folosite și în SEO, dar acesta este un subiect ușor diferit. Cu siguranță voi evidenția un articol pentru asta și le voi oferi o descriere detaliată, abonați-vă la actualizările blogului ca să nu pierdeți nimic.
Prezența unor astfel de titluri în articol va juca un rol important în promovarea paginii. În plus, utilizarea lor vă oferă o structură clară a paginii, titlul, subtitlurile, evidențierile, subparagrafele și așa mai departe. Folosește-le întotdeauna și pune-le în practică. Pe multe CMS, cum ar fi WordPress, când scrieți text, puteți vedea „titlu 1”, „titlu 2”, „titlu 3” și așa mai departe. Ei sunt cei responsabili pentru h1, h2 și h3.
Dacă scrieți textul corpului dintr-un paragraf nou, scrieți o etichetă
La început și închideți-l la sfârșit
. Marcarea unui paragraf în html este echivalentă cu crearea unui nou paragraf într-un document MS Word. Nu am adăugat nimic nou în document. Dar acest lucru nu este tot ceea ce ar trebui să fie prezent într-un document html. Să ne uităm la un alt exemplu, descrierea va veni puțin mai târziu.document HTML
Acest text va fi aldine, iar acesta este tot cu caractere cursive
< ! DOCTYPE html > < html > < head > < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / > < title >document HTML< / title > < / head > < body > < p > < b > < / b > < / p > < / body > < / html > |
Fiecare document conține un titlu și un element de titlu. Prima, care vine imediat după prima etichetă. Această etichetă conține toate informațiile despre pagină, conține și elementul. Titlu – informații despre titlul paginii, cu alte cuvinte titlul paginii, numele acesteia. În titlu indicați numele corect al paginii prin care utilizatorul vă va căuta printr-un motor de căutare, punct foarte important. Ambele elemente trebuie să fie deschise și, de asemenea, închise. Fiecare element este închis cu semnul „/”. Rezultatul este o imagine ca aceasta.
Titlu și conținutul paginii
| < / html > |
După cum puteți vedea, nu este nimic complicat. Iată cele mai de bază etichete care ar trebui să fie prezente în fiecare document html. Nu uitați să închideți fiecare dintre ele, altfel browserul nu va putea percepe imaginea completă a codului. Trebuie să știi și să-ți amintești mereu acest lucru. Apoi începeți să inserați text, imagini, videoclipuri și așa mai departe. Dar asta va fi deja în alte articole.
Editor Notepad++
Pentru a lucra cu codul, utilizați programul Notepad++. Este gratuit și nu este greu să-l găsești pe Internet. Foarte convenabil pentru înțelegerea oricărui cod; de asemenea, afișează convenabil etichetele de deschidere și de închidere. Suportăm sintaxa a peste 40 de limbaje de programare. Exact ceea ce aveți nevoie pentru a învăța elementele de bază ale html.
Blocnotesul este superior în toate privințele unui blocnotes obișnuit. Pentru confort, simplitate și învățare maximă, acest editor trebuie să fie instalat inițial pe computer. Cel mai important avantaj și comoditate este că editorul Notepad++ afișează indicii atunci când scrieți cod, ceea ce vă face munca mult mai rapidă și de mai bună calitate.
element DOCTYPEFiecare document trebuie să conțină, de asemenea, următorul element doctype. De ce este nevoie și ce ar trebui să fie în el. De obicei, oamenii nu sunt foarte pasionați de aceste linii, le copiază în documente și lucrează calm. Aceste elemente spun browserului ce versiune de html este utilizată în document, care este descrierea paginii, ce codificare este utilizată, ce cuvinte cheie sunt incluse, cine este autorul și cum se numește pagina.
Ele sunt de obicei plasate chiar la început. Există mai multe opțiuni și toate diferă unele de altele, voi scrie un exemplu care este folosit cel mai des. Acest gol poate fi folosit ca șablon gata făcut. În continuare va fi o descriere clară a fiecărei linii, nu ar trebui să existe probleme cu aceasta.
Pe scurt, într-un limbaj clar despre elementele de bază ale html: Această linie spune browserului că acest document este versiunea XHTML 1.0, se folosește limba engleză și toată această mizerie se află la această adresă. Apoi, în metaeticheta indicăm codificarea care este utilizată. Cel mai des folosit este Windows 1251.
Descriere - se atinge tema SEO, una dintre cele trei tag-uri principale care trebuie sa fie prezente in absolut fiecare document; aceasta tag indica descrierea paginii. Ce este scris pe această pagină, o scurtă descriere, nu mai mult de două propoziții. Eticheta de cuvinte cheie acoperă și subiectul SEO, această etichetă este necesară. Conține cuvinte cheie pe care utilizatorii de internet le vor folosi pentru a vă găsi prin motoarele de căutare.
ÎN eticheta de titlu vine numele documentului în sine, titlul acestuia, pe care îl vedem în browser. Probabil cea mai importantă etichetă din întregul document, care are cel mai mare impact asupra promovării paginii. Articolul despre adăugarea și proiectarea descrie această etichetă mai detaliat.
Ce trebuie să rețineți din această lecție despre elementele de bază ale html:
Toate paginile principale ar trebui să fie întotdeauna numite index. Așa este acceptat și toată lumea este obișnuită, indiferent de extensia de fișier, poate fi html sau php. Întotdeauna se numește așa.
Urmăriți un videoclip despre elementele de bază ale HTML de la Webformyself.
Limbajul de marcare hipertext, elemente de bază și structură. Voi încerca să descriu toate acestea și multe altele pe blogul meu. În primul rând, vor fi scrise informații utile pentru începători, va fi oferit un exemplu de cod și va fi oferită posibilitatea de a descărca exemplul în sine împreună cu pagina finală.
Bun venit pe paginile blogului meu. HTML este un limbaj simplu de marcare care este folosit pentru a crea pagini web. Am spus că este simplu, astfel încât să nu fii intimidat învățând-o. Limbajul html este pur și simplu ideal pentru începători - este mult mai dificil să stăpânești imediat un limbaj de programare de la zero, dar html este de fapt mult mai simplu.
În acest articol vreau să vă spun cum să învățați această limbă cel mai rapid și eficient, astfel încât într-o lună sau două să o cunoașteți perfect. Crezi că este imposibil? Am început să învăț html la sfârșitul lunii martie. La sfârșitul lunii mai știam deja 90% din etichetele necesare pentru lucru fără probleme.
Cum să înveți o limbă gratuit?Desigur, cel mai mult invatare rapida ar trebui să găsești câteva site-uri utile. În primul rând, veți avea nevoie de referința html. Chiar și programatorii experimentați îl folosesc, deoarece este pur și simplu imposibil să ții în cap zeci de etichete și atributele lor.
Din cărțile de referință pe care vi le pot recomanda - htmlbook. Acesta este un site foarte tare care colectează toate etichetele și arată rezultatul muncii lor cu o descriere detaliată. Dar cartea de referință este doar un instrument suplimentar; cel mai mare efect poate fi obținut cu o practică reală.
Cursuri interactiveȘi aici vorbesc despre cursuri interactive. Aceasta este capacitatea de a scrie cod și de a vedea imediat cum este afișat. În timpul cursurilor vi se vor da sarcini. În primul rând, cele simple, de exemplu, transformarea textului într-un titlu sau realizarea unui tabel. Atunci e mai greu. În cele din urmă, vei înțelege cu ce poți face folosind HTML. Dacă crezi că trebuie să plătești pentru asta, te înșeli.
este un site minunat cu cursuri despre html și css. Primele 16-18 cursuri sunt gratuite! Dacă doriți să vă continuați studiile și să obțineți acces la cele plătite, va trebui să plătiți 300 de ruble pe lună sau 1800 pe an. Personal, am dat 300 de ruble, am terminat totul într-o lună cursuri plătiteși a beneficiat foarte mult de el.
Importanța înregistrărilorUn alt sfat de la mine – scrie-l! Notează toate informațiile care sunt noi și importante pentru tine. Fără a-l nota, riști să nu reții cunoștințele necesare în memorie. Personal, am trei caiete generale pe raft, aproape complet pline de scris, și din când în când mă uit la ele când uit cutare sau cutare proprietate.
Studiu paralel al html și cssHTML este doar o tehnologie web care ajută la crearea structurii și aspectului unei pagini web. CSS este în întregime responsabil pentru design în dezvoltarea site-ului web. Aceste limbi trebuie învățate simultan, deoarece interacționează între ele. 
Odată ce ai dobândit unele cunoștințe, poți exersa pe cont propriu. Cum să o facă? Încercați să așezați un articol cu imagini, un tabel, o listă imbricată, un aspect simplu de pagină cu două coloane sau altceva. Trebuie să exersezi pentru că asta este singura modalitate de a înrădăcina rapid în creierul tău o înțelegere a modului în care funcționează lucrurile. Cel mai bun lucru, desigur, este să vă găsiți un profesor în această chestiune, dar cel mai probabil va trebui să plătiți pentru asta.
Lecții de la echipa webformyselfWebformyself este un portal de internet minunat care oferă o mulțime de informații despre construirea site-ului web. Pe site-ul lor puteți găsi multe articole gratuite despre HTML, CSS și aspectul site-ului, dar au lansat și tutoriale video plătite, al căror scop este să vă transmită cunoștințe utile cât mai repede posibil.
La sfârșitul zilei, ar trebui să aveți un motiv pentru care învățați aceste tehnologii web. Acest lucru se face de obicei pentru a învăța cum să creați singur layout-uri pentru site-uri web. Dacă aveți și acest obiectiv, atunci o opțiune excelentă pentru dvs. ar fi să cumpărați acces la lecții premium de pe webformyself.com. Drept urmare, puteți obține acces nu numai la lecții despre HTML și CSS, ci și la multe altele. De exemplu, JavaScript și WordPress.
Există lecții utile acolo, inclusiv posibilitatea de a crea primul aspect folosind lecțiile. Acest lucru este foarte important, deoarece veți obține o bună practică, după care vă veți putea îmbunătăți singur abilitățile, încercând să alcătuiți alte machete pentru site-urile pe care le găsiți pe Internet.
Cât durează să înveți limbi străine?În medie, HTML și CSS pot fi învățate foarte rapid cu abordarea corectă. De exemplu, mi-a luat câteva luni. Dacă știi de unde să obții cunoștințe, procesul de învățare poate fi accelerat de mai multe ori.
Site-uri bune cu materiale utileȚi-am dat-o - apoi depinde de tine. În principiu, resursele de mai sus sunt cele mai bune de pe Internet. De exemplu, peste o sută de mii de oameni au finalizat cursuri de la Htmlacademy și peste 87 de mii de persoane s-au abonat la actualizările Webformyself.
HTML (H ypert ext M arkup Language) este codul care este folosit pentru a structura o pagină web și conținutul acesteia. De exemplu, conținutul ar putea fi structurat într-un set de paragrafe, o listă de puncte cu marcatori sau folosind imagini și tabele de date. După cum sugerează și titlul, acest articol vă va oferi o înțelegere de bază a HTML și a funcțiilor sale.
Deci, ce este HTML?HTML nu este un limbaj de programare; este un limbaj de marcare care definește structura conținutului dvs. HTML constă dintr-o serie de elemente, pe care le utilizați pentru a încadra sau încheia diferite părți ale conținutului pentru a face ca acesta să apară într-un anumit fel sau să acționeze într-un anumit fel. Adăugarea „, și că în elementele goale eticheta finală nu este nici necesară, nici permisă. Dacă atributele nu sunt menționate, valorile implicite sunt utilizate în fiecare caz.”>etichetele pot face un hyperlink pentru un cuvânt sau o imagine către altundeva, pot scrie cursive. cuvinte, pot face fontul mai mare sau mai mic și așa mai departe. De exemplu, luați următoarea linie de conținut:
Pisica mea este foarte morocănosă
Dacă am dori ca linia să rămână de la sine, am putea specifica că este un paragraf prin includerea lui în etichete de paragraf:
Pisica mea este foarte morocănosă
Anatomia unui element HTMLSă explorăm puțin mai departe acest element de paragraf.
Principalele părți ale elementului nostru sunt următoarele:
Elementele pot avea, de asemenea, atribute care arată astfel:
Atributele conțin informații suplimentare despre elementul pe care nu doriți să apară în conținutul real. Aici, clasa este atributul Nume, iar editor-notă este atributul valoare. Atributul de clasă vă permite să dați elementului un identificator care poate fi folosit ulterior pentru a viza elementul cu informații despre stil și alte lucruri.
Un atribut trebuie să aibă întotdeauna următoarele:
Notă: valorile atributelor simple care nu conțin spații albe ASCII (sau oricare dintre caracterele " " ` =< >) poate rămâne necotat, dar este recomandat să citați toate valorile atributelor, deoarece face codul mai consistent și mai ușor de înțeles.
Elemente de cuibăritPuteți pune elemente și în interiorul altor elemente - aceasta se numește imbricare. Dacă am vrea să afirmăm că pisica noastră este foarte morocănoasă, am putea înveli cuvântul „foarte” într-un element, ceea ce înseamnă că cuvântul trebuie subliniat puternic:
Pisica mea este foarte morocănosă.
Cu toate acestea, trebuie să vă asigurați că elementele dvs. sunt imbricate corect: în exemplul de mai sus, am deschis
mai întâi elementul, apoi elementul; prin urmare, trebuie să închidem mai întâi elementul, apoi
element. Următoarele sunt incorecte:
Pisica mea este foarte morocănosă.
Elementele trebuie să se deschidă și să se închidă corect, astfel încât să fie clar unul în interiorul sau în exteriorul celuilalt. Dacă se suprapun așa cum se arată mai sus, atunci browserul dvs. web va încerca să ghicească cea mai bună a ceea ce încercați să spuneți, ceea ce poate duce la rezultate neașteptate. Deci nu o face!
Elemente goaleUnele elemente nu au conținut și sunt numite elemente goale. Luați element pe care îl avem deja în pagina noastră HTML:
Acesta conține două atribute, dar nu există nicio închidere etichetă și fără conținut interior. Acest lucru se datorează faptului că un element de imagine nu împachetează conținutul pentru a-l afecta. Scopul său este de a încorpora o imagine în pagina HTML în locul în care apare.
Anatomia unui document HTMLAceasta cuprinde elementele de bază ale elementelor HTML individuale, dar acestea nu sunt la îndemână singure. Acum ne vom uita la modul în care elementele individuale sunt combinate pentru a forma o întreagă pagină HTML. Să revedem codul pe care l-am introdus în exemplul nostru index.html (pe care l-am întâlnit prima dată în articolul Tratarea fișierelor):
Pagina mea de testare
Aici, avem următoarele:
- - Doctype. În negura vremurilor, când HTML era tânăr (în jurul anilor 1991/92), doctypes erau menite să acționeze ca legături către un set de reguli pe care pagina HTML trebuia să le respecte pentru a fi considerată HTML bun, ceea ce ar putea însemna verificarea automată a erorilor și alte lucruri folositoare. Cu toate acestea, în zilele noastre, nimănui nu-i pasă de ele și sunt doar un artefact istoric care trebuie inclus pentru ca totul să funcționeze corect. Deocamdată, asta este tot ce trebuie să știi.
- - elementul. Acest element include tot conținutul de pe întreaga pagină și este uneori cunoscut ca element rădăcină.
- - elementul. Acest element acționează ca un container pentru toate lucrurile tu vrei pentru a include pe pagina HTML pe care nu este continutul tu esti care se afișează vizitatorilor paginii dvs.. Acestea includ lucruri precum cuvinte cheie și o descriere a paginii pe care doriți să apară în rezultatele căutării, CSS pentru stilul conținutului nostru, declarațiile setului de caractere și multe altele.
- - Acest element setează setul de caractere pe care documentul trebuie să îl folosească la UTF-8, care include majoritatea caracterelor din marea majoritate a limbilor scrise. În esență, acum poate gestiona orice conținut textual pe care l-ați putea pune pe el. Nu există niciun motiv pentru a nu seta acest lucru și poate ajuta la evitarea unor probleme mai târziu.
- - elementul. Aceasta setează titlul paginii dvs., care este titlul care apare în fila browser în care este încărcată pagina. De asemenea, este folosit pentru a descrie pagina atunci când o marcați/o favorizați.
- - elementul. Aceasta contine toate conținutul pe care doriți să îl afișați utilizatorilor web atunci când vă accesează pagina, fie că este text, imagini, videoclipuri, jocuri, melodii audio redate sau orice altceva.
După cum am spus mai înainte, încorporează o imagine în pagina noastră în poziția în care apare. Face acest lucru prin atributul src (sursă), care conține calea către fișierul nostru imagine.
Am inclus și un atribut alt (alternativ). În acest atribut, specificați text descriptiv pentru utilizatorii care nu pot vedea imaginea, posibil din următoarele motive:
Cuvintele cheie pentru text alternativ sunt „text descriptiv”. Alt iti dau mesaj Scrieți ar trebui să ofere cititorului suficiente informații pentru a avea o idee bună despre ceea ce transmite imaginea. În acest exemplu, textul nostru actual „Imaginea mea de testare” nu este deloc bun. O alternativă mult mai bună pentru logo-ul nostru Firefox ar fi „Sigla Firefox: o vulpe în flăcări care înconjoară Pământul”.
Încercați să găsiți un text alternativ mai bun pentru imaginea dvs. acum.
Marcarea textuluiAceastă secțiune va acoperi câteva dintre elementele HTML esențiale pe care le veți folosi pentru a marca textul.
TitluriElementele de titlu vă permit să specificați că anumite părți ale conținutului dvs. sunt titluri - sau subtitluri. În același mod în care o carte are titlul principal, titlurile capitolelor și subtitrări, un document HTML poate și el. HTML conține 6 niveluri de titluri, – , deși în mod obișnuit veți folosi cel mult 3 până la 4:
Titlul meu principal Titlul meu de nivel superior Subtitlul meu Subtitlul meu
Acum încercați să adăugați un titlu potrivit paginii dvs. HTML chiar deasupra dvs element.
Notă: Veți vedea că nivelul dvs. de antet 1 are un stil implicit. Nu folosiți elemente de antet pentru a mări sau a face textul îngroșat, deoarece acestea sunt folosite din motive de accesibilitate și din alte motive precum SEO. Încercați să creați o secvență semnificativă de titluri pe paginile dvs., fără a sări peste niveluri.
Liste de paragrafeO mare parte din conținutul web sunt liste, iar HTML are elemente speciale pentru acestea. Listele de marcare constau întotdeauna din cel puțin 2 elemente. Cele mai comune tipuri de liste sunt liste ordonate și neordonate:
- element.
Dacă rămâneți blocat, puteți oricând să vă comparați munca cu exemplul nostru de cod de pe GitHub.
Aici, am zgâriat doar suprafața HTML-ului. Pentru a afla mai multe, accesați subiectul nostru.
limbaj HTML prin definiție, nu poate fi un limbaj de programare, așa cum cred în mod eronat mulți oameni fără experiență în programare. Limbajul HTML este, în principiu, o formulare inerent incorectă. Ar trebui să fie numit limbaj de marcare hipertext, deoarece HTML înseamnă asta – Limbajul de marcare hipertext. Pentru a spune simplu, HTML este o serie de etichete. Eticheta, la rândul său, este cuvântul de control, principalul. Etichetele oferă posibilitatea de a da textului standard un aspect formatat, adică de a-l evidenția cu caractere cursive, aldine, subliniere sau de a efectua o altă acțiune. Cu toate acestea, puteți efectua diverse acțiuni asupra textelor numai în programe specializate de browser, datorită cărora călătoriți efectiv pe World Wide Web. Aceste programe afișează un singur text care a fost deja modificat și ascund etichetele HTML utilizate pentru modificare. Pentru a înțelege mai bine toate acestea și a înțelege rapid despre ce vorbim, chiar pe această pagină, faceți clic dreapta pe mouse și selectați punctul „ Sursă„sau ceva similar în sens. Aceeași pagină va apărea în fața ta în forma ei adevărată.
Pentru a crea cod HTML, puteți folosi editori de text standard și puteți folosi, de asemenea, editoare vizuale, acestea fiind adesea numite vizuale. Principala diferență dintre aceste tipuri de editori este că cele vizuale sunt special create pentru tastarea codurilor HTML, JavaScript, CSS și PHP, precum și altele, și anume pentru programarea web. În plus, astfel de editori vă oferă posibilitatea de a vedea imediat ce ați făcut în program și de a identifica (a arăta) eventualele greșeli făcute în codul tipărit. Vă sfătuim să introduceți codul direct cu propriile mâini, iar editorii vizuali vă vor simplifica munca. Puteți utiliza browserul Macromedia Dreamweaver 8. Deși acest program nu este unul dintre cele mai recente, funcționalitatea sa va fi suficientă pentru dvs. și chiar în exces. Cel mai bine este să faceți acest lucru după cum urmează: introduceți codul în programul Dreamweaver, apoi salvați și faceți clic pe butonul „Vizualizare în browser”, unde puteți schimba singur setul de browsere. Apoi, reveniți la Dreamweaver și reluați procesul de editare. În acest loc veți vedea un crack pentru Macromedia Dreamweaver 8. Așa că, v-am spus despre instrumente. În continuare, să trecem direct la etichetele HTML.
În primul rând, să ne familiarizăm cu structura paginii în cod HTML, sau mai degrabă cu acele elemente care trebuie să fie întotdeauna strict prezente în ea.
Etichete de pagină imuabile în cod HTML:
, , , , ,
Vă rugăm să rețineți că mulți oameni, pentru ca programul să producă cod HTML sub formă de text, pun un spațiu liber, adică un spațiu, după paranteza unghiulară de deschidere. Nu ar trebui să faceți acest lucru când introduceți codul!
Probabil ați observat imediat că toate etichetele sunt împerecheate unul față de celălalt. O etichetă se deschide, iar cealaltă o închide. În codul HTML, aproape toate etichetele sunt asociate. Diferența dintre ele este că există o bară oblică / în fața etichetei de închidere. Aceste etichete sunt denumite și etichete container pentru că este posibil să se instaleze alte etichete între date, ca și cum ar fi fost definite într-un container. S-ar putea să vedeți deja singur cum se află alții printre etichete. Este permisă tipărirea numelor de etichete atât în fonturi mari, cât și cu litere mici; aici nu vor exista diferențe. Astfel de intrări, ca și pentru program, nu vor face nicio diferență și sunt interpretate identic de către acesta.
Deci, ce sunt etichetele imuabile pentru o pagină în cod HTML? Să luăm în considerare această problemă mai detaliat.
Etichetele de deschidere și de închidere informează programele concepute pentru a reda paginile hipertext și alte browsere că lucrează cu materiale hipertext. Fiecare document din codul html începe întotdeauna cu și se termină cu . Aceasta înseamnă că între aceste două etichete există un întreg cod html.
Etichetele conțin titlul materialului hipertext. Conține informații despre pagină în cod html. În principiu, aceste etichete nu sunt necesare, chiar dacă nu sunt prezente, browserele îți vor interpreta perfect materialul html. Cu toate acestea, dacă decideți să nu scrieți un titlu în document, introduceți totuși . Această mișcare este necesară pentru compatibilitate în diferite variante de browser. Absolut fiecare caracter aflat în aceste etichete nu va fi în niciun fel descifrat de browser. Aceasta nu include doar informații din etichete care conțin numele materialului html în sine (numele este plasat în zona superioară a panoului browserului). Cu toate acestea, acest lucru poate afecta aspectul general al documentului HTML, modul în care acesta va exista pe web și va fi clasificat în funcție de ierarhie în motoare de căutare. Mai multe detalii despre etichetele plasate în titlul materialului hipertext vor fi discutate ulterior.
Întregul scop al materialului este cod html plasate în și etichete. Acest loc conține absolut tot ce constă documentul nostru HTML și pe care îl contemplăm atunci când îl extindem (imagini grafice, date text, butoane și alte elemente). Acesta este „corpul” principal al paginii sau baza.
Alte etichete utilizate în procesul de creare a materialului html sunt situate în interiorul tuturor etichetelor neschimbate care sunt necesare. Aproape toate etichetele HTML conțin o varietate de parametri și atribute, cu ajutorul cărora veți putea recrea informațiile exact în forma în care au fost prezentate și dezvoltate. De exemplu, ați imprima:
unde este eticheta în sine, bgcolor este atributul etichetei, „#FF0000” este semnificația acestui atribut. O etichetă are o serie de atribute.
Și astfel, tonul întregii pagini va deveni roșu.
Fiți atenți aici la faptul că atributele etichetei (toate) și semnificația lor sunt plasate în eticheta de deschidere (nu are bară oblică), și niciodată în eticheta de închidere.
Astfel, ați aflat despre etichetele imuabile ale unei pagini html. Dar înainte de a trece la explorarea altora, să ne oprim pentru o mică digresiune.
Folosind cunoștințele dobândite, citite din diverse manuale despre bazele limbajului HTML pentru începători, în activități practice am identificat principala și foarte gravă greșeală pe care o au făcut-o mulți autori ai acestei literaturi. Conceput exclusiv pentru începători, aceste tutoriale și ghiduri predau elementele de bază ale HTML într-o manieră secvențială, începând cu etichetele de titlu hipertext ( ) și continuând cu etichetele pentru corpul documentului ( ). În esență, toate acestea sunt, desigur, foarte corecte. Cu toate acestea, după cum arată experiența noastră practică, acest mod de a învăța elementele de bază ale HTML nu este practic pentru începători. Explorând nenumărate etichete de titlu care sunt complet neclare pentru el însuși, un începător nu va putea vedea roadele antrenamentului său, deoarece browserul nu interpretează aceste etichete și nu va putea aplica multe dintre ele în lucrul la creația sa. în orice fel (la începutul antrenamentului cu siguranță). În acest fel, orice începător își va pierde doar energia și timpul și, cel mai important, dorința de a face orice în viitor și dacă să studieze HTML. În plus, ideea că munca de dezvoltare a unei resurse poate fi făcută numai de webmasteri experimentați pentru o mulțime de bani va prinde ferm rădăcini în capetele neexperimentate ale începătorilor. Prin urmare, vă sfătuim să lăsați totul de neînțeles pentru un timp și să mergeți mai departe. Apoi, după ce te-ai ocupat de tot ce este de înțeles, vei putea asimila restul.
Bazele HTML conțin regulile de bază ale limbajului HTML, o descriere a structurii unei pagini HTML și relațiile din structura unui document HTML între elementele HTML.
Un document HTML este un document text obișnuit care poate fi creat ca într-un document obișnuit editor de text(Notepad), iar într-unul de specialitate, cu evidențierea codului (Notepad++, Visual Studio Code etc.). Un document HTML are extensia .html.
Un document HTML constă dintr-un arbore de elemente HTML și text. Fiecare element este identificat în documentul sursă printr-o etichetă de început (deschidere) și de sfârșit (închidere) (cu rare excepții).
Eticheta de început arată unde începe elementul, eticheta de final arată unde se termină. Eticheta de închidere se formează prin adăugarea unei bare oblice / înainte de numele etichetei: .... Între etichetele de început și cele de închidere se află conținutul etichetei - conținutul.
Etichetele unice nu pot stoca conținut direct; este scrisă ca valoare de atribut, de exemplu, o etichetă va crea un buton cu textul Button în interior.
Etichetele pot fi imbricate una în alta, de exemplu,
Text
. Când investiți, ar trebui să urmați ordinea în care sunt închise (principiul „matryoshka”), de exemplu, următoarea intrare va fi incorectă:Text
.Elementele HTML pot avea atribute (globale, aplicate tuturor elementelor HTML și propriile lor). Atributele sunt scrise în eticheta de deschidere a elementului și conțin un nume și o valoare, specificate în formatul atribut name="value" . Atributele vă permit să modificați proprietățile și comportamentul elementului pentru care sunt setate.
Fiecărui element i se pot atribui mai multe valori de clasă și o singură valoare de id. Mai multe valori de clasă sunt scrise separate printr-un spațiu, . Valorile de clasă și id-ul trebuie să fie compuse numai din litere, cifre, cratime și caractere de subliniere și trebuie să înceapă doar cu litere sau cifre.
Browserul vizualizează (interpretează) documentul HTML, construindu-i structura (DOM) și afișându-l în conformitate cu instrucțiunile incluse în acest fișier (fișe de stil, scripturi). Dacă marcajul este corect, fereastra browserului va afișa o pagină HTML care conține elemente HTML - anteturi, tabele, imagini etc.
Procesul de interpretare (parsare) începe înainte ca pagina web să fie complet încărcată în browser. Browserele procesează documentele HTML secvenţial, de la început, în timp ce procesează CSS şi relaţionează foile de stil cu elementele paginii.
Un document HTML este format din două secțiuni - antetul - între etichete ... și partea de conținut - între etichete ....
Structura paginii web 1. Structura documentului HTMLHTML urmează regulile conținute în fișierul de declarare a tipului de document (Definiția tipului de document sau DTD). Un DTD este un document XML care definește ce etichete, atribute și valorile acestora sunt valabile pentru un anumit tip HTML. Fiecare versiune de HTML are propriul DTD.
DOCTYPE este responsabil pentru afișare corectă pagini web după browser. DOCTYPE specifică nu numai versiunea HTML (de ex. html), ci și fișierul DTD corespunzător de pe Internet.
...
Elementele din interiorul etichetei formează un arbore de document, așa-numitul model de obiect document, DOM (model de obiect de document). În acest caz, elementul este elementul rădăcină.
Orez. 1. Cea mai simplă structură a unei pagini web Pentru a înțelege interacțiunea elementelor paginii web, este necesar să se ia în considerare așa-numitele „relații de familie” dintre elemente. Relațiile dintre mai multe elemente imbricate sunt clasificate ca părinte, copil și soră.
Un strămoș este un element care conține alte elemente. În figura 1, strămoșul pentru toate elementele este . În același timp, elementul este strămoșul tuturor etichetelor pe care le conține: ,
, , etc.
Un descendent este un element situat într-unul sau mai multe tipuri de elemente. De exemplu, este un descendent al , și elementul
Este un descendent al ambelor și .
Un element părinte este un element care este legat de alte elemente la un nivel inferior și este situat deasupra lor în arbore. În figura 1 și . Etichetă
Este părinte numai pentru .
Un element copil este un element care este direct subordonat unui alt element la un nivel superior. În figura 1 există doar elemente , ,
Și sunt copii ai .
Element soră - un element care are un comun element părinte cu cel luat în considerare, așa-numitele elemente de același nivel. În figura 1 și sunt elemente de același nivel, precum și elemente , și
Sunt surori una cu cealaltă.
1.1. Elementul 1.2. ElementSecțiunea... conține informații tehnice despre pagină: titlu, descriere, cuvinte cheie pentru motoarele de căutare, codificare etc. Informațiile pe care le introduceți acolo nu sunt afișate în fereastra browserului, dar conțin informații care îi spun browserului cum să proceseze pagina.
1.2.1. ElementEticheta de secțiune necesară este . Textul plasat în interiorul acestei etichete apare în bara de titlu a browserului web. Titlul nu trebuie să aibă mai mult de 60 de caractere pentru a se încadra complet în titlu. Textul titlului trebuie să conțină cea mai completă descriere a conținutului paginii web.
1.2.2. ElementO etichetă de secțiune opțională este o singură etichetă. Cu ajutorul acestuia, puteți seta o descriere a conținutului paginii și a cuvintelor cheie pentru motoarele de căutare, autorul documentului HTML și alte proprietăți ale metadatelor. Un element poate conține mai multe elemente, deoarece poartă informații diferite în funcție de atributele utilizate.
Descrierea conținutului paginii și a cuvintelor cheie pot fi specificate simultan în mai multe limbi, de exemplu, în rusă și engleză:
Folosind o etichetă, puteți bloca sau permite indexarea unei pagini web de către motoarele de căutare:
Pentru a reîncărca automat pagina după o anumită perioadă de timp, trebuie să utilizați valoarea de reîmprospătare:
Pagina va fi reîncărcată după 30 de secunde. Pentru a redirecționa vizitatorul către o altă pagină, trebuie să specificați adresa URL în parametrul URL:
| set de caractere | Specifică codificarea caracterelor pentru documentul HTML curent: |
| conţinut | Conține text arbitrar care specifică valoarea asociată cu atributul http-equiv sau name, în funcție de valoarea acestora. |
| http-echiv | Controlează acțiunile browserului pe o anumită pagină web (echivalent cu anteturile HTTP). La randarea paginii, browserul va urma instrucțiunile specificate în atribut: default-style specifică stilul preferat de utilizat pe pagină. Atributul de conținut trebuie să conțină ID-ul elementului care face referire la tabel Stiluri CSS, sau identificatorul elementului care conține foaia de stil. reîmprospătare indică timpul în secunde înainte ca pagina să fie reîncărcată sau timpul înainte de redirecționarea către o altă pagină, dacă atributul conținut conține linia „url=page_address” după timp. Repornire automată pagini după o anumită perioadă de timp, în acest exemplu, după 30 de secunde: Dacă trebuie să transferați imediat vizitatorul pe o altă pagină, puteți specifica adresa URL în parametrul URL: |
| Nume | Asociat cu valoarea conținută în atributul conținut. Nu ar trebui utilizat dacă elementul are deja setate atributele http-equiv , charset sau itemprop. nume-aplicație specifică numele aplicației web utilizate pe pagină. autor specifică numele autorului documentului în format liber. descrierea defineste scurta descriere la conținutul paginii, de exemplu: generator specifică unul dintre pachetele software utilizate pentru a crea documentul, de exemplu: . cuvintele cheie conțin o listă Cuvinte cheie, separate prin virgulă, corespunzătoare conținutului paginii, de exemplu: . De asemenea, atributul nume poate lua următoarele valori din specificația extinsă, cum ar fi creator, googlebot, editor, roboți, slurp, viewport, deși niciuna dintre acestea nu a fost încă adoptată oficial. |
În interiorul acestui element sunt setate stilurile care sunt utilizate pe pagină. CSS este folosit pentru a seta stiluri într-un document HTML. Pot exista mai multe astfel de elemente pe o pagină.
În interiorul acestui element puteți scrie cod de formatare atât pentru elementele paginii web în sine, cât și pentru întreaga pagină web.
.hârtie ( lățime: 200px; înălțime: 300px; culoare de fundal: #ef4444; culoare: #666666; )
Pentru a conecta un anumit stil la un element, trebuie să atribuiți un nume adecvat elementului folosind atributul class (sau id):
...
Codul CSS poate fi încorporat direct în elementul de marcare ca valoare a atributului de stil, de exemplu:
1.2.4. Element
De asemenea, puteți seta stiluri pentru un document folosind o altă metodă - scrieți-le într-un fișier separat cu extensia .css, de exemplu, style.css.
Există două moduri de a conecta un fișier cu stiluri la o pagină web:
prin directiva @import URL
@import url(style.css);
folosind elementul. Elementul nu necesită o etichetă de închidere. Acest element definește relația dintre pagina curentă și alte documente. Pot exista mai multe astfel de elemente pe o pagină. Intrarea va arăta astfel:
| origine încrucișată | Indică dacă CORS (o tehnologie de browser care permite unei pagini web să acceseze resurse dintr-un alt domeniu) ar trebui utilizată atunci când se preia o imagine de pe un site. anonim — browserul adaugă automat un antet Origin la o solicitare între domenii, care conține numele domeniului de la care a fost făcută cererea. Dacă serverul nu răspunde cu antetul CORS Access-Control-Allow-Origin: * (sau numele domeniului în loc de asterisc), atunci încărcarea imaginii va fi blocată. use-credentials - Dacă serverul nu furnizează acreditări utilizând Access-Control-Allow-Credentials: true , atunci încărcarea imaginii va fi blocată. |
| href | Atributul principal al etichetei, valoarea este calea către fișierul cu stiluri. |
| hreflang | Determină limba textului din documentul de referință. |
| mass-media | Specifică tipul de dispozitiv la care ar trebui să fie aplicată resursa de legătură. |
| nonce | Generat la întâmplare o variabilă șir pe server care stabilește reguli pentru utilizarea stilurilor inline pentru a proteja conținutul. Valoarea atributului este un șir de text. |
| rel | Atributul definește relația dintre documentul curent și documentul la care se face referire. alternativ - un link către același document, dar într-un format diferit (de exemplu, pagini pentru tipărire, traducere, oglindă, feed în format RSS sau Atom), . arhive - indică faptul că documentul legat este de interes istoric. Link-ul poate indica o colecție de înregistrări, documente sau alte materiale. linkul autorului către o pagină despre autorul documentului sau către o pagină cu informațiile de contact ale autorului. marcați o referință la cel mai apropiat strămoș al articolului, care este linkul, sau la secțiunea articolului cel mai strâns legată de element, dacă nu există niciun strămoș. extern este folosit pentru a indica faptul că pagina către care face legătura nu face parte din acest site. mai întâi specifică o legătură care indică primul document dintr-o secvență de documente. link de ajutor către un document de ajutor. pictograma specifică calea către pictograma care va fi utilizată pentru documentul curent. ultimul indică un link care duce la ultimul documentîn succesiunea documentelor. licență Un link către informațiile privind drepturile de autor pentru un document. în continuare indică faptul că acest document face parte dintr-o serie și că linkul ajunge la următorul documentîn această serie. nofollow indică faptul că linkul nu este aprobat de autorul paginii sau că linkul este de natură comercială. noreferrer indică faptul că antetul cererii client care conține url-ul sursei cererii nu ar trebui să fie transmis atunci când urmărește linkul. pingback specifică adresa serverului de pingback, ceea ce permite blogului să notifice automat site-urile care leagă la acesta. prefetch specifică faptul că fișierul la care se face referire trebuie să fie stocat în cache în prealabil. prev indică faptul că acest document face parte dintr-o serie și că linkul este către un document anterior din acea serie. căutare indică faptul că documentul la care se face referire conține o interfață pentru căutare și resurse aferente. bara laterală indică faptul că documentul legat va fi afișat în context suplimentar de browser, dacă este posibil, iar unele browsere, când faceți clic pe un hyperlink, deschid o fereastră pentru a adăuga linkul la bara de marcaje. foaia de stil este un link către un fișier extern care va fi folosit ca foaie de stil pentru acest document. eticheta indică faptul că eticheta cu hyperlink se aplică acestui document. sus indică faptul că pagina face parte structura ierarhica, și că hyperlinkul duce la mai multe nivel inalt resursă în structură. |
| dimensiuni | Specifică dimensiunea pictogramelor pentru afișarea vizuală. Atributul sizes este utilizat numai împreună cu rel="icon" și poate lua următoarele valori: lățimi-înălțime - definește o listă de dimensiuni separate prin spații, fiecare dimensiune trebuie să fie în formatul - lățimi-înălțime (dimensiunile pictogramei sunt specificate în pixeli), de exemplu: ; orice - pictograma poate fi scalată la orice dimensiune. |
| titlu | Definește titlul unui link sau numele unui set de foi de stil alternative. Valoarea atributului este text. |
| tip | Specifică tipul MIME al documentului la care se face referire. În acest caz, ia valoarea „text/css” . |
| asincron | Atributul indică faptul că scriptul va rula asincron cu restul paginii (scriptul va începe să se execute în același timp în care se încarcă pagina). |
| set de caractere | Definește codificarea caracterelor |
| origine încrucișată | Stabilește dacă CORS va fi utilizat la încărcarea scripturilor externe (folosind atributul src). anonim — înainte de a încărca scriptul într-o solicitare între domenii, browserul adaugă automat antetul Origin, fără a trece parametri de acces (cookie, certificat X.509, autentificare/parolă pentru autentificare de bază prin HTTP). Dacă răspunsul serverului nu conține antetul Access-Control-Allow-Origin: nume de domeniu, scriptul nu va fi încărcat. use-credentials — înainte de a încărca scriptul într-o solicitare între domenii, browserul adaugă automat un antet Origin care indică parametrii de acces (cookie, certificat SSL sau perechi de autentificare/parolă). Dacă răspunsul serverului nu conține antetul Access-Control-Allow-Credentials: true, scriptul nu va fi încărcat. |
| amâna | Interpretarea scripturilor este amânată până când documentul este redat pe dispozitivul utilizatorului. |
| nonce | Oferă securitate prin protejarea împotriva atacurilor cross-site scripting (XSS). Setează reguli pentru utilizarea scripturilor încorporate folosind valori nonce și hashuri. În timpul redării paginii, browserul calculează hashuri pentru fiecare script inline și le compară cu cele enumerate în CSP. Descărcarea din alte resurse decât „ Lista albă", este blocat. |
| src | Indică locația fișierului cu scriptul; valoarea atributului este adresa URL a fișierului care conține programul JavaScript. |
| tip | Folosit pentru a declara limbajul de script folosit pentru a compune conținutul etichetei. |
Această secțiune conține tot conținutul documentului. Disponibil pentru element.
| pe amprentă | Un eveniment care se declanșează după ce o pagină este trimisă pentru imprimare sau după ce fereastra de imprimare este închisă. |
| onbeforeprint | Un eveniment care se declanșează înainte ca o pagină să fie trimisă pentru imprimare. |
| onbeforeunload | Evenimentul este declanșat atunci când vizitatorul inițiază o tranziție către o altă pagină sau dă clic pe „închide fereastra”. Vă permite să afișați un mesaj în dialogul de confirmare pentru a anunța utilizatorul dacă dorește să rămână sau să părăsească pagina curentă. |
| onhashchange | Evenimentul este declanșat atunci când partea hash a adresei URL se modifică, de exemplu, când utilizatorul trece de la example.domain/test.aspx#page1 la example.domain/test.aspx#page2 . |
| onmessage | Un eveniment are loc atunci când un mesaj este primit printr-o sursă de eveniment. |
| onoffline | Evenimentul este declanșat de browser atunci când browser-ul stabilește că conexiunea la Internet a fost pierdută. |
| pe net | Evenimentul este declanșat de browser atunci când conexiunea la Internet a fost restabilită. |
| onpagehide | Evenimentul are loc atunci când utilizatorul părăsește pagina prin navigare, cum ar fi făcând clic pe un link, reîmprospătând pagina, completarea unui formular etc. |
| onpageshow | Evenimentul are loc atunci când utilizatorul navighează la pagina web, după evenimentul onload. |
| la descărcare | Evenimentul este declanșat dacă pagina nu se încarcă dintr-un motiv oarecare sau când fereastra browserului este închisă. |
