Bazele html pentru începători într-un limbaj ușor de înțeles. Limbajul HTML pentru începători - de unde să începi și unde să mergi
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.
Un document HTML este cel mai simplu document text, un limbaj de etichetare pe care îl î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ă este interpretată de browsere, iar 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. În primul rând, 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 din cod 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. Să folosim acum acest exemplu pentru a ne uita 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 capăt. 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. Pe lângă aceasta, 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 de titlu obligatorie, 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. Setați pagina să se reîmprospăteze automat 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.
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; inaltime: 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. 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, puteți atașa o foaie de stil CSS completă, care constă din multe proprietăți, unui document existent. 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 viteze reduse de internet.
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" > |
Folosind eticheta de script, puteți conecta diferite scenarii (scripturi) la un 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 body 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.
Titluri de pagină 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 majoritatea cazurilor, 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, atunci 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 instalat inițial pe computerul dumneavoastră. 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 documentele lor și lucrează în liniște. 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 îi 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 codarea care este utilizată. Cel mai des folosit este Windows 1251.
Descriere - este atins subiectul SEO, una dintre cele trei tag-uri principale care trebuie sa fie prezente in absolut fiecare document acest 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.
Eticheta de titlu conține 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 denumite index. Acesta este modul în care este acceptat și toată lumea este obișnuită cu el, indiferent de extensia de fișier, poate fi fie html, fie 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, ca 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 într-adevăr 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, pentru cea mai rapidă învățare, ar trebui să găsiți mai multe 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 acestora.
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ă, veți dobândi o înțelegere a ceea ce puteți face cu 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 plătit 300 de ruble, am finalizat toate cursurile plătite într-o lună și am beneficiat foarte mult de ea.
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 creează structura și aspectul unei pagini web. CSS este în întregime responsabil pentru design în construirea 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, pentru că 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.
Ți-am oferit site-uri bune cu materiale utile - atunci 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.
Noțiuni de bază HTML conține 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 fie într-un editor de text obișnuit (Notepad), fie într-unul specializat cu evidențiere de cod (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 trebuie să fie compuse numai din litere, cifre, cratime și liniuțe 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șarea corectă a unei pagini web de către 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 .
Un element soră este un element care are un element părinte comun cu cel în cauză, 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 foaia de stil CSS sau ID-ul 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. Reîncărcați automat pagina 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. descriere definește o scurtă descriere a conținutului paginii, de exemplu: generator specifică unul dintre pachetele software utilizate pentru a crea documentul, de exemplu: . cuvintele cheie conține o listă de cuvinte cheie, separate prin virgulă, care se potrivesc cu conținutul 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 într-un element 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ă | Specifică 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 | O variabilă șir generată aleatoriu 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. marcajul este 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. last specifică o legătură care indică ultimul document dintr-o secvență de documente. 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 duce la următorul document din acea 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 dintr-o structură ierarhică și că hyperlinkul indică un nivel superior de resursă din 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 format - 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ă hash-uri pentru fiecare script inline și le compară cu cele enumerate în CSP. Descărcările din resurse care nu sunt incluse în „lista albă” sunt blocate. |
| 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ă. |
Acest articol nu este destinat să fie un ghid cuprinzător pentru limbajul de marcare a documentelor HTML. Descrie elementele de bază ale HTML - principiile de bază, conceptele și definițiile acestei tehnologii, stăpânind pe care, puteți trece cu ușurință în studiul codării HTML.
Pentru a studia lecția, descărcați arhiva cu fișierele necesare.
HTML este un limbaj de marcare a documentelor. Pronunția corectă este HTT.
Probabil ați lucrat vreodată în editorul de documente Word sau în aplicații de birou similare? Probabil știi că acest tip de editor are capacități bogate pentru editarea textului, aranjarea elementelor, inserarea de imagini etc.
De ce, ați putea să vă întrebați, să scrieți despre procesoarele de text într-un articol despre HTML? Dar de ce. Dacă vă dați seama, ce este un editor de birou? Aceasta este o aplicație pentru editarea și afișarea documentelor.
Cuvântul cheie aici este document. Adică creăm, edităm și vizualizăm un document într-un program, în acest caz - într-un editor de birou. Dacă deschidem un astfel de document într-un editor de text simplu, de exemplu, Notepad, vom vedea multe simboluri și semne ciudate. Această mizerie de simboluri este de neînțeles pentru umanitate, dar de înțeles pentru computere. Datorită acestui limbaj intern, documentul Word capătă o anumită structură și aspect în editorul propriu-zis, iar documentul ne apare în toată splendoarea cu text formatat și imagini în locul lor.
HTML este un limbaj de marcare a documentelor pentru browser. Word este browserul, iar documentul este pagina HTML Aceasta este însăși baza tehnologiei HTML, a cărei înțelegere este necesară pentru a nu confunda limbajul de marcare al documentelor web cu limbajele de programare. folosind HTML noi marcare, unde pe pagină va fi afișat elementul, imaginea sau textul și în ce ordine vor apărea unul lângă celălalt.
Da, simpla tastare și formatare a textului în aplicațiile de birou nu are nimic de-a face cu programarea. Dar cititorul atent va observa un detaliu important - într-un procesor de text tastăm, edităm și formatăm text și imagini folosind butoane și meniuri vizuale, dar de ce este scris codul HTML de mână? De ce să înveți atât de multe detalii tehnice despre scrierea de markup pentru un document?
De fapt, există o mulțime de editori cu care poți crea și edita pagini HTML, similar cu Word. Adică, codul HTML sursă este ascuns pentru noi și nu intrăm în el.
Un fel de Word pentru HTML. Acești editori vizuali se numesc:
WYSIWYG editori - Ce vezi tu ce ai primit. Adică dacă îl traducem în rusă: ceea ce vedem este ceea ce primim.Eu le numesc „wuzivoogies”. Deși acest lucru este incorect din punct de vedere fonetic, demonstrează în mod clar lipsa de sens a acestei invenții. Începătorii folosesc foarte des astfel de editori pentru a-și crea primele site-uri web. Desigur, acest lucru este convenabil - nu trebuie să vă aprofundați în studiul etichetelor, stilurilor de design și alte lucruri, la prima vedere, neplăcute și complexe. Editorul însuși convertește automat acțiunile noastre în cod HTML.
Dar, după cum se spune, nu se întâmplă nimic. Mai precis, această abordare are dezavantaje foarte serioase. Ce îi împiedică pe toată lumea să folosească editori vizuali pentru a proiecta pagini HTML? Cert este că paginile astfel formate au de obicei mult cod inutil și multe erori din punct de vedere semantic. Acum, desigur, nu există probleme cu o conexiune la Internet de mare viteză, iar diferența de dimensiune a paginii de 400 kb și 100 kb nu este semnificativă pentru viteză, cu toate acestea, codul HTML optimizat și scris corect elimină multe probleme și oferă multe avantaje, și anume:
- Codul HTML competent are un efect pozitiv asupra optimizării motoarelor de căutare și asupra vitezei cu care un robot de căutare accesează cu crawlere un site. Kiloocteții de cod generați de vuzivuga nu sunt acceptabili și chiar dăunători;
- Codul HTML generat de editorul WYSIWYG are multe erori semantice. Adică, etichetele generate de un astfel de editor sunt folosite în alte scopuri, unde trebuie folosite, de exemplu, liste
- , editorul va genera o altă etichetă de care nu avem nevoie. Depinde, desigur, de editor, dar aici ne referim la soluții complexe pentru crearea de site-uri web, și nu doar editarea textului într-o zonă de text folosind instrumente WYSIWYG.
- Sunt generate o mulțime de etichete inutile și structura documentului devine umflată. Să presupunem că mutați un element într-un astfel de program, mai întâi la dreapta, apoi la stânga, apoi la centru - fiecare acțiune lasă o urmă în codul HTML sursă. Editorul este un program și nu poate ști exact ce vrei să obții ca rezultat, generează tone de cod, ținând cont de toate opțiunile posibile pentru comportamentul documentului în browser;
- De regulă, editorii pentru designul vizual al codului HTML devin rapid depășiți. Și din cauza lipsei de interes din partea profesioniștilor, aceștia sunt în general lipsiți de sprijin și nu se mai dezvoltă. Și HTML evoluează. Totul se dezvoltă, cu excepția wuzivoogi-ului. În consecință, ei nu pot genera cod corect și modern care să folosească noi caracteristici și soluții.
- A susține și a dezvolta astfel de proiecte este o pedeapsă cerească. Nu se poate vorbi deloc despre utilizarea modelelor și reutilizarea codului.
Deci, vom scrie HTML numai cu pixuri. Instrumente adecvate pentru editarea vizuală HTML nu au fost încă inventate și este puțin probabil să apară. Limbajul de marcare HTML este ușor de învățat și de înțeles și există multe instrumente pentru automatizarea scrierii codului HTML, dar mai multe despre asta în alte lecții.
După ce s-au chinuit puțin cu editorul WYSIWYG, tinerii guru HTML părăsesc această sarcină inutilă și merg mai departe.
Structura documentului HTMLPentru cursuri, recomand să descărcați și să instalați editorul Sublime Text. Vă recomand cu căldură să nu utilizați Blocul de note Windows încorporat pentru aspectul HTML dacă nu doriți să vă rupeți psihicul în primele etape ale învățării HTML.
Am decis că vom scrie manual codul documentului HTML, adică să-l introducem. Aspectul HTML este procesul de creare a unui document HTML. În oamenii de rând și în cercurile informate, este doar aspect. Orice document are o structură și anumite reguli de construcție. Din ce elemente constă codul, care este structura HTML?
Să creăm un șablon inițial pe computer - fișierul index.html, să îl deschidem folosind un editor și să lipim următorul cod în el:
Antet Corpul documentului Vă rugăm să rețineți că documentele HTML au extensia .html.
Deci, în ordine din exemplu.
- tipul documentului (doctype)Această construcție este întotdeauna indicată la începutul documentului, astfel încât browserul să „înțeleagă” corect ce versiune de HTML este folosită la construirea documentului.
Datorită faptului că HTML este în continuă evoluție, are mai multe versiuni, ca orice produs software. Versiunea actuală de HTML este a cincea, iar tipul de document dat în exemplu este actual.
În principiu, nu are rost să aprofundăm în studiul tipurilor de documente, deoarece odată cu lansarea HTML5, acest design a devenit un standard. Doar introduceți-l la începutul documentului de fiecare dată când începeți să creați un aspect al site-ului web.
- începutul documentuluiPrima etichetă pe care o vedem după doctype este .
O etichetă HTML este o unitate structurală de marcare a documentelor HTML. Codul HTML este format din blocuri numite etichete. Fiecare etichetă are propria sa funcție, iar învățarea limbajului de marcare HTML înseamnă în cele din urmă învățarea etichetelor și a proprietăților lor într-un document.
Aș dori să remarc că învățarea HTML nu este atât de dificilă pe cât ar părea la prima vedere. Învățarea etichetelor utilizate în marcarea documentelor nu este o povară atât de mare pentru creier.
Deci, marcarea documentului începe cu o etichetă și se termină cu o etichetă de închidere. Fiecare etichetă care conține alte etichete sau elemente trebuie să fie închisă cu o etichetă de închidere. De exemplu, , , etc.
Eticheta este obligatorie deoarece conține întreaga structură a documentului și este un wrapper pentru alte elemente.
EtichetăÎn continuare, vedem eticheta, care conține alte elemente care nu ne sunt încă clare. Conține alte elemente - asta înseamnă că elementele sau etichetele se află între etichetele de deschidere și de închidere ale construcției:
conținut sau alte etichete
Scopul etichetei este de a stoca metainformațiile unui document HTML, adică informații care nu sunt afișate în documentul în sine, dar sunt importante și determină în mare măsură modul în care va arăta și se va comporta documentul.
Această etichetă este necesară în document.
Titlul este o etichetă obligatorie care conține metainformații textuale care apar în browser sau în titlul filei. Eticheta trebuie să fie în . De asemenea, conținutul acestei etichete este folosit de motoarele de căutare pentru a afișa documentul în rezultatele căutării.
MetaetichetăMetaeticheta este o etichetă specializată concepută pentru a furniza date structurate despre o pagină. Metaetichetele sunt cel mai des folosite în . Metaetichetele nu sunt necesare în structura unui document HTML.
FaviconAtașează documentului un fișier cu o imagine favicon. Favicon este o pictogramă în miniatură afișată lângă titlul documentului într-o filă de browser. Un favicon este un fișier grafic care măsoară 16 x 16 (sau 32 x 32) pixeli, care poate avea diferite formate, cum ar fi png, jpg, ico, gif. Formatul ico este folosit în mod tradițional. Favicon-urile animate sunt fișiere gif care conțin animație. Puteți vedea o favicon animată, de exemplu, pe VKontakte, când sosește un mesaj nou.
Stiluri de documente CSSInclude un fișier CSS cu stil HTML în document.
CSS- în cascadă Stiluri de document HTML. Fiecare etichetă care se află în etichetă are un set de proprietăți, cum ar fi culoarea, lățimea, înălțimea, poziția față de alte elemente. Toate aceste proprietăți sunt stiluri CSS care pot fi transferate într-un fișier extern. Designul conectează fișierele externe la documentul HTML, inclusiv stilurile CSS.
Notă: proprietatea href a unui construct specifică locația fișierului extern. În exemplul nostru, fișierul stil.cssȘi favicon.ico, se află în același folder cu fișierul index.html. nu are o etichetă de închidere.
EtichetăEticheta conține cod sau un link către un fișier javaScript și este folosită cel mai adesea în interiorul unei etichete, deși instrumentul de optimizare a vitezei paginii de la Google recomandă utilizarea acestei etichete la sfârșitul unui document, înainte de eticheta de închidere.
În exemplul nostru, este conectat un fișier extern script.js, care se află în același folder cu fișierul principal index.html.
Așadar, prieteni, ne-am uitat la principalele elemente care sunt folosite cel mai des în etichetă. Pe lângă aceste elemente, există o serie de altele care sunt mai specifice și mai opționale.
Corp, alias corpAici încep toate lucrurile distractive și tangibile vizual în aspectul HTML al unui document.
Să trecem direct la aspectul părții vizibile a paginii. Tot ceea ce scriem și aspectul în interiorul etichetei va fi afișat în browser. Să deschidem dosarul nostru index.htmlîn browser pentru a vedea clar ce facem în editor.
Eticheta poate conține orice etichete HTML necesare pentru proiectarea documentului și pentru a oferi funcționalitatea (formularul). Voi oferi un tabel cu cele mai utilizate etichete și le voi descrie pe scurt pe fiecare. Puteți rula imediat exemplele date în editor.
Nu am luat în considerare toate etichetele și acest lucru nu este necesar în această etapă. Principalul lucru este să înțelegeți ideea de bază a HTML, să învățați cum să utilizați etichetele prezentate mai sus și apoi să treceți mai departe.
Vă rugăm să rețineți că toate numele din fișierele incluse trebuie scrise cu caractere latine, fără spații.
De exemplu, nu:
Acest lucru este necesar pentru o mai mare compatibilitate a conținutului paginii. În plus, standardele pentru scrierea codului HTML dictează.
Deci, acum cunoaștem câteva elemente de bază ale HTML: ce structură ar trebui să aibă un document HTML tipic, cunoaștem unele dintre cele mai populare etichete, este timpul să trecem la partea cea mai delicioasă - și anume cookie-urile.
Temă practică pe aspectul HTMLDacă nu ați descărcat încă arhiva cu exemple, faceți-o. De exemplu, puteți să vă uitați la fișierul example.html, care se afla și în arhivă.
Aceasta încheie lecția despre elementele de bază ale HTML, în următoarea lecție „CSS Basics” vom învăța cum să gestionăm stilurile elementelor documentului, să cunoaștem foile de stil în cascadă, să învățăm cum să folosim clasele de stil și să facem aspectul nostru frumos și colorat. .
Ne vedem din nou, prieteni!
HTML înseamnă H yper Text M arkup Language, adică. Hypertext Markup Language este elementul de bază al paginilor web, folosit pentru a crea și prezenta vizual pagini web.
HTML adaugă markup textului simplu. Hipertextul conține diverse link-uri prin care paginile web sunt conectate între ele. Cu HTML, oricine poate crea atât site-uri web statice, cât și dinamice. HTML este un limbaj care descrie structura și semantica conținutului unui document web. Conținutul unei pagini web este marcat cu ajutorul etichetelor, care reprezintă elemente HTML. Exemple de astfel de elemente sunt: , și așa mai departe. Aceste elemente formează elementele de bază ale oricărui site web.
HTML a fost inventat în 1991 de omul de știință Tim Berners-Lee și a fost inițial destinat schimbului de documente între oamenii de știință de la diferite universități. Cu invenția sa, Tim Burns-Lee a pus bazele internetului modern.
Există mai multe versiuni de HTML. Standardul de limbă este actualizat și completat continuu și, ca urmare, o nouă versiune de HTML este lansată aproape în fiecare an. Versiunea „HTML 2.0” a fost prima specificație standard HTML, care a fost publicată în 1995. HTML 4.01 este versiunea majoră a HTML care a fost publicată la sfârșitul anului 1999 și este utilizat pe scară largă astăzi. Astăzi, cea mai populară versiune este HTML-5, care este o extensie a HTML 4.01, publicată în 2012.
Un document HTML sau o pagină web este un document text simplu care conține etichete (care, la rândul lor, sunt text simplu cuprins între paranteze unghiulare). O pagină web poate fi tastată fie într-un editor de text obișnuit (Notepad, WordPad, Word etc.) fie într-unul specializat cu evidențiere de cod (Notepad++, Sublime Text etc.). Documentele HTML sunt stocate ca fișiere cu extensia .htm sau .html.
Exemple online în fiecare lecțiePe măsură ce prezentăm materialul, fiecare lecție va oferi exemple care vă vor ajuta să înțelegeți fiecare cod în detaliu și, prin practică, să vă bucurați de învățare. Cu editorul nostru HTML online, puteți edita un document HTML și apoi faceți clic pe butonul portocaliu „Run” din editor, care se află deasupra ferestrei editorului din stânga, pentru a vedea rezultatul. Dacă utilizați un editor HTML specializat, atunci puteți copia exemplul și vizualiza rezultatele muncii dvs. în browserul instalat pe computer.
Exemplu HTML: Incearca-l tu insutiTitlul paginii
Acesta este titlul
Acesta este un paragraf.
Exemple HTML online
Tutorialul HTML vă oferă peste 100 de exemple online care vă vor ajuta să stăpâniți cu ușurință limbajul de marcare. Mai bine să vezi o dată decât să auzi de o sută de ori! Teoria plus practica este cheia succesului tău în stăpânirea HTML-ului.
