Lecții moderne de HTML pentru începători. Noțiuni de bază HTML pentru începători Lecții de programare HTML de la zero

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.

Misto

Bâlbâi

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

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 HTML

Pentru 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ă ne adâncim î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 documentului

Prima 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 acestora într-un document.

Aș dori să observ 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.

Tag - titlu document Titlu

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 oferi date structurate despre o pagină. Metaetichetele sunt cel mai des folosite în . Metaetichetele nu sunt necesare în structura unui document HTML.

Favicon

Ataș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 CSS

Include 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 exportate î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 o legătură 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 corp

Aici î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.

Etichetă	Descriere
	O etichetă pentru crearea de legături într-un document. Exemplu: text link Atributul href specifică documentul către care va duce linkul.
,	Face text cursive sau bold (subliniat). Exemplu: text italic text aldin (subliniat).
, , , , ,	Titlurile documentelor. Există 6 niveluri de titluri în total, dar în practică sunt folosite doar h1 până la h4. Ar trebui să existe un singur titlu în document, evidențiat cu eticheta h1, ca titlu principal al documentului. Exemple: Titlu de nivel primul Titlu de nivel al doilea Titlu de nivel al treilea... etc.
,	Liste de documente. Sunt o listă numerotată sau marcată. Elementul unei astfel de liste este eticheta Exemple: Punctul marcant 1 Punctul 2 Elementul lista numerotat 1 Elementul 2 din listă numerotat
	Paragraf. Această etichetă definește un paragraf de text separat de alte paragrafe. Este foarte recomandat să închideți această etichetă. Exemplu: Aspectul marcajului HTML este determinat în mare măsură de stilurile CSS. Cu toate acestea, unii webmasteri aleg să nu folosească stiluri în primele etape ale unui proiect.
	Imagine. Folosind această etichetă, puteți insera o imagine în marcajul HTML. Asigurați-vă că includeți text alternativ pentru toate imaginile - atributul „alt”. Această etichetă se închide automat. Exemplu:
+ +	Forme și elemente de intrare. Formularele sunt concepute pentru a introduce informații în sistemul de pe server. Un fel de feedback între utilizator și site. De exemplu, formularele sunt folosite atunci când trebuie să trimiteți un mesaj către server. În plus, formularele pot îndeplini și alte funcții, dar sarcina principală este să trimită date către server. Un exemplu este un formular simplu pentru trimiterea unui mesaj, în care utilizatorul site-ului își indică numele, E-mailul și ceva text: Textul mesajului
	Definește un subșir în cadrul unui șir. Folosit pentru a stila o parte dintr-o linie folosind CSS. Una dintre cele mai des folosite etichete. Fără design, nu se manifestă în niciun fel în browser. Exemplu: Învățarea HTML, în cele mai multe cazuri, nu provoacă dificultăți pentru începători.
,	Etichetele sunt concepute pentru a insera video și audio într-un document. Eticheta de închidere este necesară. Exemple: parametrul de control ne spune că pagina ar trebui să afișeze controale pentru conținut media, la fel ca un player audio/video obișnuit.
	Cu adevărat o etichetă regală. Cea mai folosită și populară etichetă în marcarea paginilor HTML. Acesta este un element de bloc conceput pentru a gestiona blocurile de pe site. Conceptul de aspect „minunat” este adesea folosit - aceasta înseamnă că toate blocurile de pe site sunt așezate folosind aceste etichete. Poate conține alte etichete. Exemplu: Text într-un bloc imbricat Toate elementele, în cele mai multe cazuri, sunt stilate cu proprietăți de stil CSS. Eticheta de închidere este necesară.
	Această etichetă încarcă o pagină externă în document. Exemplu:

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ă privind aspectul HTML

Dacă 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ă.

Despachetați arhiva și creați un fișier index.html în folderul cu fișierele despachetate. Deschideți fișierul creat folosind editorul de text Sublime Text;
Creați o structură inițială a documentului cu un doctype, o etichetă care conține și și procedați la editarea conținutului etichetei;
Deschideți fișierul readme.txt și finalizați sarcinile corespunzătoare din fișierul index.html pe care l-ați creat. Pentru a verifica rezultatul, deschideți index.html în browserul dvs. preferat.

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. .

În lumea modernă, uneori, a avea propriul site web este la fel de important ca, de exemplu, să ai un număr de telefon sau o adresă de e-mail. Din păcate, nu toată lumea poate crea un site web profesional frumos pe cont propriu și, uneori, nici măcar nu funcționează. De asemenea, comanda de la programatori nu este o soluție ideală, deoarece nu toată lumea își poate permite.

Șabloanele de site web HTML gratuite vă vor ajuta să ieșiți din această situație. Un șablon de site web HTML este un set de pagini statice gata făcute pentru un site web pe un anumit subiect. Folosind acest șablon, puteți crea un site web simplu în doar câteva ore, cu condiția să aveți cunoștințe de bază despre marcaj HTML. În secțiunea HTML, veți dobândi aceste cunoștințe dacă mai petreceți câteva ore studiind, iar dacă vă faceți timp pentru a studia secțiunea CSS, veți putea controla pe deplin designul șabloanelor de site web HTML și le veți personaliza complet pentru a se potrivi. nevoile tale.

Un alt avantaj incontestabil al șabloanelor de site-uri web este că, în majoritatea cazurilor, acestea sunt scrise de profesioniști. Un șablon profesional de site web înseamnă nu doar un design frumos și modern, ci și modul în care este scris codul. Motoarele de căutare se uită la modul în care este scris site-ul dvs., dacă codul este optimizat SEO sau nu, și pe baza acestui lucru îți scad sau măresc poziția în rezultatele căutării. Prin urmare, un site bun nu trebuie să fie doar frumos și modern, ceea ce este important, ci și scris corect din punct de vedere al codului.

Descărcați șabloane de site web HTML gratuite și creați-vă proiectele în cel mai scurt timp.

Am decis să acord mai multă atenție începătorilor care doresc să dobândească cunoștințe în domeniul construirii site-urilor web. Profesorul meu m-a împins să fac asta, pentru că a făcut multe greșeli în manualele pentru lucrările de laborator. Aș fi bucuros să mă uit la resursa din care au fost preluate informațiile educaționale și să las acolo câteva rânduri din opinia mea. Dar acum nu este vorba despre asta. În prima mea prelegere voi vorbi despre

Eticheta indică faptul că structura documentului html începe și se termină. Majoritatea informațiilor pentru browser și motoarele de căutare sunt stocate între etichete. Etichetele conțin titlul paginii noastre. Eticheta indică faptul că informațiile suplimentare sunt destinate utilizatorului și, în mod natural, indică faptul că informațiile pentru utilizator se termină.

Acum hai să explic puțin. Toate etichetele ( tag - element de limbaj de marcare hipertext) sunt împărțite în două tipuri: „singure” și „închidere”. În plus, etichetele sunt incluse în următoarele caractere< и >, ele sunt cele care disting eticheta de textul HTML obișnuit. Să ne uităm la câteva dintre cele mai simple etichete „single”:

— o etichetă care este responsabilă pentru trecerea la o nouă linie în locul în care este instalată această etichetă. Să ne uităm la codul folosind această etichetă.

Primul meu site Bună tuturor!
Și acesta este primul meu site.

Rezultatul poate fi vizualizat.

— o etichetă care desenează o linie orizontală. Această etichetă se aplică elementelor bloc, linia începe întotdeauna pe o linie nouă. Are 5 atribute:

align — Determină alinierea liniei. Poate lua valoarea stânga, centru, dreapta.
culoare — Setează culoarea liniei.
noshade - Desenează o linie fără efecte 3D.
dimensiune — Setează grosimea liniei.
width — Setează lățimea liniei.

Codați folosind eticheta:

Primul meu site Salut tuturor! Acesta este primul meu site.

Un exemplu vizual poate fi găsit aici.

O altă etichetă „unică” este . Această etichetă este utilizată pentru a stoca informații destinate browserelor și motoarelor de căutare. Motoarele de căutare caută meta-etichete pentru a obține descrieri ale site-urilor, cuvinte cheie și alte date. Aveți voie să utilizați un număr nelimitat de metaetichete, toate trebuie să fie între și . Parametrii oricărei metaetichete sunt de forma „nume=valoare”, care este determinată de cuvintele cheie conținut , nume sau http-equiv . Deoarece metaetichetele sunt destinate mașinilor, nu fac nicio modificare vizuală, așa că voi furniza doar codul sursă:

Această linie indică faptul că creatorul paginii consideră că pagina utilizează codificarea UTF-8. În HTML5 totul a devenit mai simplu pentru a specifica codificarea, tot ce aveți nevoie este următoarea linie:

Există și alte etichete simple (, ,
, , , , , , , , , , , , , ), dar vă voi prezenta puțin mai târziu.

Acum să vorbim despre etichetele de „închidere”. Însuși numele „etichetă de închidere” indică faptul că eticheta necesită o închidere obligatorie. Acest lucru se face pentru a limita clar partea de text pe care o afectează eticheta.

Pentru un exemplu clar, să ne uităm la etichetă, care este folosită pentru a evidenția textul; Etichetele sunt limite care definesc zona de selecție a textului. Iată codul în care au uitat să închidă eticheta din ultima linie:

Primul meu site Bună tuturor! Și acesta este primul meu site.
Salutare tuturor! Și acesta este primul meu site.

După cum puteți vedea, nu este nimic complicat, acum puteți crea mai multe pagini legate între ele.

Există mai multe moduri de a evidenția textul pe o pagină. Acest lucru se poate face folosind stiluri sau puteți folosi etichete. Suntem (deocamdată) interesați de a doua variantă.

— setează fontul la aldine.

— setează stilul fontului italic.

— adaugă o subliniere textului.

— menită să sublinieze textul. Browserele afișează acest text cu caractere cursive.

- taie textul. Această etichetă a fost eliminată din HTML5, este recomandat să o utilizați în schimb

— afișează textul ca text monospațial. Eliminat din HTML5.

— afișează fontul ca superscript. Fontul apare deasupra liniei de bază a textului și la o dimensiune redusă.

— afișează fontul ca indice. Textul este poziționat sub linia de bază a caracterelor rămase în linie și este redus în dimensiune.

— menită să sublinieze textul. Browserele afișează acest text cu caractere aldine.

— reduce dimensiunea fontului cu una în comparație cu textul obișnuit. În HTML, dimensiunea fontului este măsurată în unități convenționale de la 1 la 7, dimensiunea medie implicită a textului este 3. Eticheta reduce textul cu o unitate convențională. Etichetele imbricate sunt permise, iar dimensiunea fontului va fi mai mică cu 1 la fiecare nivel imbricat, dar nu poate fi mai mică de 1.

— mărește dimensiunea fontului cu una în comparație cu textul obișnuit. În HTML, dimensiunea fontului este măsurată în unități de la 1 la 7, dimensiunea medie implicită a textului este 3. Astfel, adăugarea unei etichete crește textul cu o unitate. Etichetele imbricate sunt permise, iar dimensiunea fontului va fi mai mare cu fiecare nivel.

— folosit pentru a evidenția citatele din text. Conținutul containerului este afișat automat în browser între ghilimele.

— conceput pentru a evidenția ghilimele lungi într-un document. Textul marcat cu această etichetă este afișat în mod tradițional ca un bloc aliniat cu umplutură în stânga și în dreapta (aproximativ 40 de pixeli), precum și în partea de sus și de jos.

— definește un bloc de text preformatat. Un astfel de text este de obicei afișat într-un font monospațial și cu toate spațiile între cuvinte. În mod implicit, orice număr de spații dintr-un cod dintr-un rând sunt afișate ca unul singur pe pagina web. Etichetă Vă permite să ocoliți această funcție și să afișați text așa cum este cerut de dezvoltator.

Este un element bloc, începe întotdeauna pe o linie nouă, paragrafele de text care se succed sunt separate prin padding. Cantitatea de umplutură poate fi controlată folosind stiluri. Dacă nu există etichetă de închidere, sfârșitul paragrafului este considerat a coincide cu începutul următorului element de bloc.

.... - HTML oferă șase titluri la diferite niveluri, care indică importanța relativă a secțiunii de după titlu. Astfel, eticheta reprezintă cel mai important titlu de nivel, iar eticheta servește la indicarea titlului de al șaselea nivel și este cel mai puțin important. În mod implicit, titlul de la primul nivel este afișat cu cel mai mare font aldine, iar titlurile de nivel ulterioare sunt mai mici. Etichetele ,..., se referă la elemente de bloc, ele încep întotdeauna pe o linie nouă, iar după ele sunt afișate alte elemente pe linia următoare. În plus, spațiul alb este adăugat înainte și după titlu. Eticheta are un atribut de aliniere, care determină alinierea titlului poate lua următoarele valori: stânga - titlu aliniat la stânga, centru - aliniat centrat, dreapta - aliniat la dreapta, justificare - justificat (atât la dreapta, cât și la stânga); . Această valoare funcționează numai pentru anteturile care sunt mai lungi de o linie.

— este un container pentru modificarea caracteristicilor fontului, cum ar fi dimensiunea, culoarea și caracterul. Deși această etichetă este încă acceptată de toate browserele, este considerată învechită și se recomandă renunțarea la utilizarea ei în favoarea stilurilor. Eticheta are 3 atribute: culoare — setează culoarea textului, față — determină fontul fontului, dimensiunea — setează dimensiunea fontului în unități convenționale.

— marchează textul ca citat sau notă de subsol pentru alt material. Această evidențiere este utilă pentru schimbarea stilului textului prin CSS și este, de asemenea, folosită pentru a separa codul HTML în elemente structurale. Browserele setează de obicei textul din interiorul unui container să fie italic.

— indică faptul că secvența de caractere este o abreviere. Folosind atributul titlu, abrevierea este descifrată, ceea ce permite acelor persoane care nu sunt familiarizate cu ea să înțeleagă abrevierea. În plus, motoarele de căutare indexează versiunea full-text a abrevierei, care poate fi folosită pentru a îmbunătăți clasarea documentului.

În mod implicit, textul inclus în container este subliniat cu o linie punctată.

Mai jos este codul în care am folosit toate aceste etichete:

Primul meu site

HTML și CSS sunt două dintre tehnologiile de bază pentru construirea paginilor Web. HTML oferă structura paginii, CSS aspectul (vizual și sonor), pentru o varietate de dispozitive. Alături de grafică și scripting, HTML și CSS sunt baza construirii paginilor web și aplicațiilor web. Aflați mai multe mai jos despre:

„paragraf”, „listă”, „tabel” și așa mai departe

XHTML este un varianta HTML care utilizează sintaxa XML, Extensible Markup Language. XHTML are toate aceleași elemente (pentru paragrafe etc.) ca și varianta HTML, dar sintaxa este ușor diferită. Deoarece XHTML este o aplicație XML, puteți utiliza și alte instrumente XML cu aceasta (cum ar fi XSLT, un limbaj pentru transformarea conținutului XML).

CSS este limbajul pentru descrierea prezentării paginilor Web, inclusiv culorile, aspectul și fonturile. Permite adaptarea prezentării la diferite tipuri de dispozitive, cum ar fi ecrane mari, ecrane mici sau imprimante. CSS este independent de HTML și poate fi folosit cu orice limbaj de marcare bazat pe XML. Separarea HTML de CSS facilitează întreținerea site-urilor, partajarea foilor de stil între pagini și adaptarea paginilor la diferite medii. Aceasta este denumită separarea structurii (sau: conținutului) de prezentare.

Prelegerea s-a încheiat, sper că cunoștințele dobândite vă vor fi de folos! În următoarea prelegere, vă voi spune ce stochează eticheta, vom învăța cum să efectuăm tot felul de manipulări cu imagini și să ne familiarizăm cu tabelele.

La scrierea acestui articol, descrierea unor etichete a fost preluată de aici

Salutare tuturor!!! Mă bucur că ai decis să cucerești culmile elementelor de bază ale HTML și aceasta este alegerea potrivită. La urma urmei, înainte de a vă crea primul site web, trebuie să cunoașteți elementele de bază ale HTML. Mai mult decât atât, va trebui să te ocupi de codarea HTML pe un site web de mai multe ori. Recomand cu căldură să consultați tutorialele HTML pentru începători de pe blogul meu și vă garantez că, după finalizarea acestui curs, veți putea crea o pagină web sau chiar un site web cu ușurință.

Să începem! Mai întâi, să aflăm
HTML – (din engleză. H ypert ext M arkup Language) este un limbaj de marcare hipertext. A fost dezvoltat pentru prima dată de omul de știință britanic Tim Berners-Lee în 1991-1992. HTML a fost destinat doar să marcheze text, imagini și tabele pe paginile web. Acum, limbaje de programare precum JavaScript și VBScript pot fi de asemenea inserate într-un document HTML.

HTML nu este un limbaj de programare; este destinat doar pentru marcarea documentelor text.

Pentru a învăța HTML, trebuie doar să aveți un browser și un bloc de note standard sau .
Pentru a deschide Standard Notepad, faceți următoarele pe computer: „Start” => „Programe” => „Accesorii” => „Notepad” .

Dacă ați auzit despre programe care simplifică munca de scriere a codului HTML (Microsoft FrontPage, Adobe Dreamweaver), atunci nu vă recomand să le folosiți în această etapă a instruirii. Antrenează-ți abilitățile într-un bloc de note standard sau în editorul de text Notepad++, iar când vei finaliza acest curs, vei putea folosi programe pentru a accelera lucrurile. Abonați-vă la actualizările blogului meu și citiți cum să utilizați Microsoft FrontPage și Adobe Dreamweaver.

Pentru o mai bună înțelegere, am pregătit un exemplu. Privește cu atenție poza:

Explicaţie.

1). Orice document HTML începe cu această linie:

Cu această linie spunem browserului că documentul nostru HTML respectă specificația internațională versiunea 4.01. Datorită acestei linii, pagina ta va arăta la fel.
Nu este necesar să vă amintiți această linie, documentul HTML va funcționa fără ea. Asta doar pentru ca tu să știi ce este.

2). și este începutul și sfârșitul documentului.

3). și - șeful documentului. Aici sunt adesea introduse etichete de serviciu suplimentare; una dintre aceste etichete este . Veți afla despre alte etichete de serviciu în lecțiile ulterioare, în această etapă de formare, aceste informații sunt suficiente.

4).
și - titlul documentului.

Acest antet va fi afișat în browser:

in cautare sunt index sau in Google.
5).

și - corpul documentului.

Iată conținutul documentului, de exemplu, text, imagini, tabele, muzică, filme etc. Veți afla mai multe despre cum să inserați muzică, text, imagini în corpul documentului în lecțiile următoare.
Notă:< >Veți citi și auzi adesea cuvântul „etichetă”. , , , ,
,

O etichetă este tot ceea ce se află între paranteze
. De exemplu:

etc. - toate acestea sunt etichete.

Etichetele nu sunt vizibile la vizualizarea paginii într-un browser, dar tot ceea ce nu este între paranteze va fi afișat în browser la vizualizare.
Există multe etichete și au scopuri diferite.

Există etichete care trebuie închise. De exemplu,

deschide eticheta
.

și asigurați-vă că închideți eticheta

Și există etichete unice, de exemplu, aceasta

...

O etichetă este un fel de container care poate conține text, imagini și alte etichete...

○ Acordați atenție secvenței corecte a etichetelor de deschidere și închidere:

...

Eticheta pe care am deschis-o prima este închisă ultima, a doua este penultima etc.
○ Iată un exemplu de secvență incorectă a etichetelor de deschidere și de închidere. Cu această comandă, pot apărea erori pe pagina web:

Eroarea a fost în și.
Așa arată codul HTML obligatoriu standard pentru o pagină web.

Titlul paginii Textul paginii, tabele, imagini, muzică și videoclip.

Nu vă descurajați dacă înțelegeți puțin sau aproape nimic din tot ce este scris mai sus. În a doua lecție va fi mai multă practică și vei putea să scrii totul manual și să vezi cum funcționează HTML.

Continuați cu următoarea lecție

Numele complet este HyperText Markup Language. Este un limbaj de marcare hipertext care este utilizat pe scară largă în timpul construcției paginilor web și documentelor. Calea HTML a început în prima jumătate a anului anii 90. La acea vreme era extrem de primitiv, dar deja ajuta la crearea unor pagini simple pentru web. De atunci, limba s-a dezvoltat constant, iar astăzi a învățat deja multe. Fără HTML, în forma cu care suntem obișnuiți, site-urile web pur și simplu nu ar exista. Aproape toate site-urile web folosesc HTML într-o oarecare măsură.

Standardul actual de astăzi este HTML5, care a fost lansat oficial în 2014. Acesta este un standard revoluționar care a permis limbajului să atingă un nou nivel.

Nou în HTML5:

Algoritmul de analiză sa schimbat în timpul dezvoltării structurii DOM;
Au apărut noi etichete, cum ar fi audio, video și altele. Apropo, acum puteți crea un player web numai folosind HTML. Anterior, trebuia să utilizați Adobe Flash Player;
Redefinirea unor reguli și semantică pentru utilizarea elementelor HTML.

Dacă îl priviți la nivel global, HTML5 a devenit mai mult decât următoarea versiune a limbajului, dar o platformă cu drepturi depline pentru dezvoltarea de aplicații. Anterior, capacitățile lui se limitau la construirea unei structuri, astăzi este mult mai inteligent. Odată cu lansarea standardului, domeniul de utilizare a limbii s-a extins foarte mult. Pe lângă direcția tradițională de dezvoltare web, este folosit pentru a crea programe de calculator pe Windows 8 și mai nou, precum și pentru a dezvolta aplicații pentru smartphone-uri pe toate platformele populare.

Totul a ajuns la punctul în care HTML5 a început să fie utilizat în două domenii cheie:

Ca o versiune actualizată a limbajului HTML;
Ca o platformă funcțională pe care puteți construi aplicații web de complexitate diferită. Adevărat, nu veți putea crea o aplicație completă folosind HTML5 pur și CSS3;

Cine actualizează HTML5? Limbajul este dezvoltat de W3C sau de numele său complet - World Wide Web Consortium - aceasta este o organizație internațională care rămâne independentă de anumiți dezvoltatori. De asemenea, produce specificații, definiții și standarde pentru HTML5. Specificația originală și completă este disponibilă pe site-ul oficial prin link-ul ( disponibil în engleză). Organizația nu a finalizat lucrările la limbă, dimpotrivă, continuă să o dezvolte.

Este important să înțelegeți că specificația HTML5 și implementarea acestei tehnologii în anumite browsere sunt concepte diferite. Multe browsere web în curs de dezvoltare au început să implementeze treptat funcțiile HTML5 chiar înainte de lansarea acestei versiuni. Astăzi, cele mai recente browsere acceptă toate funcțiile HTML5. Suportul complet este oferit de: Chrome, IE 11, Firefox, Edge, Opera. Versiunile relativ vechi nu acceptă standarde noi, de exemplu, IE 8 și anterioare. IE 9 și 10 implementează deja standardele, dar doar parțial.

Adesea, browserele pot funcționa în general cu noul standard, dar gestionează caracteristicile diferit sau pur și simplu aruncă o eroare. Prin urmare, atunci când dezvoltați browsere încrucișate, trebuie să luați în considerare toate caracteristicile browserelor. În acest moment, suportul pentru standardul din browserele web este deja la un nivel bun.

Pentru a vă asigura că versiunea actuală a browserului acceptă HTML5, puteți face un scurt test.

Ce este util în timpul dezvoltării pentru HTML5? Instrumentul cheie este un editor de text, în care va fi introdus codul pentru viitoarea pagină web. Unul dintre cele mai populare și multifuncționale editoare este Notepad++. Este disponibil pe site-ul oficial absolut gratuit. Pe lângă distribuția gratuită, are și toate funcțiile necesare, are o mulțime de plugin-uri utile și evidențiază etichetele de deschidere și de închidere.

De asemenea, un editor bun care acceptă majoritatea sistemelor de operare este Visual Studio Code. Este capabil să ruleze pe MacOS, Windows și Linux. În ceea ce privește capacitățile, acest produs software este ușor superior Notepad++.

Al doilea instrument important este un browser web, este util pentru testarea codului. Orice browser de la un dezvoltator binecunoscut va face. Dacă trebuie să creați o aplicație multiplatformă, va trebui să instalați toate browserele web populare pe sistem.