Acest articol nu pretinde a fi un ghid exhaustiv al limbajului de marcare HTML. Descrie elementele de bază ale HTML - principiile de bază, conceptele și definițiile acestei tehnologii, după ce o stăpânești, poți trece cu ușurință la învățarea codării HTML.

Pentru a studia lecția, descărcați arhiva cu fișierele necesare.

HTML este un limbaj de marcare documente. pronunție corectă - HTMEL.

Ați lucrat vreodată într-un editor de documente Word sau similar aplicații de birou? Probabil știi că acest tip de editor are funcții bogate pentru editarea textului, aranjarea elementelor, inserarea imaginilor etc.

De ce, vă întrebați, să scrieți într-un articol despre HTML despre procesoarele de text? 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 vizualizam un document într-un program, în acest caz, într-un editor de birou. Dacă deschideți un astfel de document într-un simplu editor de text, de exemplu, în Notepad, vom vedea o mulțime de personaje și semne ciudate. Această mizerie de simboluri este de neînțeles pentru omenire, 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 apare în fața noastră în toată splendoarea sa cu text formatat și imagini la locul său.

HTML este un limbaj de marcare pentru browser. Cuvântul „aici este browserul, iar documentul este pagina HTML. Aceasta este însăși baza tehnologii HTML, a cărui înțelegere este necesară pentru a nu confunda limbajul de marcare al documentelor web cu limbajele de programare. Numele vorbește de la sine - cu ajutorul HTML-ului noi marcare, unde va fi afișat elementul, imaginea sau textul pe pagină și în ce ordine vor apărea unul lângă celălalt.

Da, simpla tastare și formatarea textului în aplicațiile de birou nu au nimic de-a face cu programarea. Dar cititorul atent va observa 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ă studiezi atât de multe detalii tehnice despre scrierea de markup pentru un document?

De fapt, există multe editoare cu care puteți crea și edita pagini HTML prin analogie cu Word. Adică, codul HTML sursă este ascuns pentru noi și nu urcăm în el.

Un fel de Word pentru HTML. Acești editori vizuali se numesc:

WYSIWYG editori - W pălărie Y ou S ee eu s W pălărie Y ou G et. Adică, dacă este tradus în rusă: ceea ce vedem este ceea ce primim.

Eu le numesc „woozies”. Deși acest lucru nu este corect fonetic, indică în mod clar inutilitatea acestei invenții. Începătorii folosesc foarte des astfel de editori pentru a-și crea primele site-uri. Desigur, acest lucru este convenabil - nu este nevoie să vă aprofundați în studiul etichetelor, stilurilor de design și alte lucruri, la prima vedere, neplăcute și complexe. Editorul însuși va converti 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. Ceea ce îi împiedică pe toți la rând să folosească editori vizuali pentru Formatare HTML pagini? Cert este că paginile astfel formate au de obicei mult cod în plus, foarte multe erori din punct de vedere semantic. Acum, desigur, nu există probleme cu conexiunea la Internet de mare viteză, iar diferența de dimensiune a paginii de 400 kb și 100 kb nu este semnificativă pentru viteză, totuși, un cod HTML optimizat și scris corect elimină multe probleme și oferă o mulțime de avantaje si anume:

• Codul HTML competent are un efect pozitiv asupra optimizării motoarelor de căutare, viteza de accesare cu crawlere a unui site de către un robot de căutare. Kiloocteții de cod generați aici nu sunt acceptabili și chiar dăunători;
• Cod HTML generat Editor WYSIWYG are multe erori semantice. Adică, etichetele generate de un astfel de editor sunt folosite în alte scopuri, unde este necesar să se utilizeze, de exemplu, liste
  , editorul va genera o altă etichetă de care nu avem nevoie. Depinde, desigur, de redactor, dar aici ne referim solutii complexe pentru crearea de site-uri web, nu doar editarea textului într-o zonă de text folosind instrumente WYSIWYG.
  • Sunt generate o mulțime de etichete inutile și structura documentului este 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, el generează tone de cod, ținând cont de toate Opțiuni comportamentul documentului în browser.
  • De regulă, editorii pentru designul vizual al codului HTML devin rapid învechiți. Și din cauza lipsei de interes din partea profesioniștilor, ei își pierd în general sprijinul și se opresc în dezvoltare. Și HTML evoluează. Totul se dezvoltă, mai puțin vuzivugi. În consecință, ele nu pot genera corect și cod modern, în care ar fi implicate noi cipuri ș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 vizual Editare 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, precum și instrumente de automatizare Scrierea HTML există mult cod, dar mai multe despre asta în alte lecții.

  După ce s-au jucat puțin cu editorul WYSIWYG, tinerii guru HTML părăsesc această sarcină inutilă și merg mai departe.

  Structura documentului HTML

  Recomand să descărcați și să instalați editorul Sublime Text pentru cursuri. Nu recomand cu tărie să utilizați Notepad-ul încorporat în Windows 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ă tipărit. Aspect HTML- procesul de creare a unui document HTML. În oamenii obișnuiți și cercurile de cunoștințe - doar aspect. Fiecare document are o structură și anumite reguli constructie. Din ce elemente constă codul, care este structura HTML?

  Să creăm un șablon inițial pe computer - fișier index.html, deschideți-l cu un editor și inserați următorul cod în el:

  Corpul documentului 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 HTML actuală este a cincea și este dată în exemplu doctype este la zi.

  În principiu, nu are rost să ne aprofundăm în studiul tipurilor de documente, deoarece odată cu lansarea HTML5, acest design a devenit standard. Doar lipiți-l la începutul documentului de fiecare dată când începeți să așezați aspectul site-ului.

  - începutul documentului

  Prima etichetă pe care o vedem după doctype este .

  Etichetă HTML- unitatea structurală de marcare a unui document 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 în document.

  Aș dori să observ că învățarea HTML nu este o sarcină atât de dificilă așa cum ar părea la prima vedere. Învățarea etichetelor utilizate în marcarea documentelor nu este o sarcină atât de mare pentru creier.

  Deci, marcarea documentului începe cu eticheta și se termină cu o etichetă de închidere. Fiecare etichetă care conține alte etichete sau elemente trebuie să fie închisă eticheta de inchidere. De exemplu, , ,

  , etc.

  Etichetă este necesar deoarece conține întreaga structură a documentului și înfășoară restul elementelor.

  Etichetă

  În continuare, vedem etichetă , care conține și 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

  Etichetă este conceput pentru 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.

  Etichetă

  antet

  Acest text va fi aldine, iar acesta este 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 >

  Elemente de bază pentru cap și titlu

  

  Fiecare document are un element head și un element title. Primul , care vine imediat după prima etichetă . Această etichetă conține toate informațiile despre pagină, conține și elementul \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. Acest lucru trebuie cunoscut și amintit întotdeauna. Apoi începeți să inserați text, imagini, videoclipuri și așa mai departe. Dar asta va fi în alte articole.

  Editor Notepad++

  

  Utilizați Notepad++ pentru a lucra cu codul. Este gratuit și ușor de găsit online. Foarte convenabil pentru perceperea oricărui cod, este, de asemenea, convenabil să afișați 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 maxim, simplitate și învățare editor dat trebuie mai întâi instalat pe computer. Cel mai elementar avantaj și comoditate, editor de notepad++ arată sfaturi atunci când scrieți cod, ceea ce vă face munca mai rapidă și mai bună uneori.

  element DOCTYPE

  Fiecare document trebuie să specifice, 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 rânduri, le copiază în documente și lucrează calm. Aceste elemente spun browserului ce versiune de html este folosită în document, ce descriere a paginii, ce codificare este folosită, 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 sunt diferite 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 exista o descriere clară a fiecărei linii, nu ar trebui să existe probleme cu aceasta.

  Pe scurt, într-un limbaj ușor de înțeles despre elementele de bază ale html: Această linie spune browserului că acest document este Versiunea XHTML 1.0, se folosește engleza și toată această mizerie se află la această adresă. Apoi, în metaeticheta, specificați codarea care este utilizată. Windows 1251 este cel mai des folosit.

  Descriere - este afectată tema SEO, una dintre cele trei etichete principale care trebuie să fie prezente în absolut fiecare document, această etichetă indică descrierea paginii. Ce este scris pe această pagină, o scurtă descriere, nu mai mult de două propoziții. Eticheta de cuvinte cheie afectează și subiectul SEO, această etichetă este necesară. Conține cuvinte cheie prin care utilizatorii de internet vă vor 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:

  1. Aproape toate etichetele se deschid și se închid;
  2. Documentul începe cu o etichetă ;
  3. Prezența etichetei ;
  4. Prezența etichetei ;
  5. clar structura html document.

  Toate paginile principale ar trebui să fie întotdeauna denumite cu cuvântul index. Așa se acceptă și toată lumea este obișnuită, indiferent de extensia fișierului, poate fi atât html, cât și php. Întotdeauna se numește așa.

  Urmărește videoclipul de bază html de la Webformyself.

  Limbajul de marcare hipertext, elemente de bază și structură. Toate acestea și multe altele voi încerca să le descriu pe blogul meu. În primul rând, vor fi scrise informații utile pentru începători, va fi furnizat un exemplu de cod și posibilitatea de a descărca exemplul în sine împreună cu pagina finală.

  html ( H yper t ext M arkup L limbaj) 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 îl folosiți pentru a include sau a încheia diferite părți ale conținutului pentru a face să apară într-un anumit fel sau să acționeze într-un anumit fel. Anexarea pentru paragraf. Rețineți că numele etichetei de sfârșit este precedat de un caracter slash> și că în elementele goale eticheta de sfârșit 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 pune cuvinte în cursive, 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ă stea 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 HTML

  Să explorăm puțin mai departe acest element de paragraf.

  Principalele părți ale elementului nostru sunt următoarele:

  1. Eticheta de deschidere: Acesta constă din numele elementului (în acest caz, p), învelit în deschidere și închidere paranteze unghiulare. Aceasta afirmă unde începe sau începe să intre în vigoare elementul - în acest caz, unde începe paragraful.
  2. Eticheta de închidere: Aceasta este aceeași cu eticheta de deschidere, cu excepția faptului că include a slash înainteînainte de numele elementului. Aceasta afirmă unde se termină elementul - în acest caz unde se termină paragraful. Eșecul în adăugarea unei etichete de închidere este una dintre erorile standard pentru începători și poate duce la rezultate ciudate.
  3. Continutul: Acesta este conținutul elementului, care în acest caz este doar text.
  4. element: Eticheta de deschidere, eticheta de închidere și conținutul împreună cuprind elementul.

  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:

  1. Un spațiu între acesta și numele elementului (sau atributul anterior, dacă elementul are deja unul sau mai multe atribute).
  2. Numele atributului, urmat de semnul egal.
  3. Valoarea atributului, înfășurată prin ghilimele de deschidere și de închidere.

  Notă: valori ale 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ărit

  Puteți pune elemente și în interiorul altor elemente - acest lucru se numește cuibărit. Dacă am fi vrut să afirmăm că pisica noastră este foarte morocănos, am putea îngloba cuvântul „foarte” într-un ) indică faptul că conținutul său are o importanță, seriozitate sau urgență puternică. Browserele redau de obicei conținutul cu caractere aldine."> 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 elementul reprezintă un paragraf.">

  mai întâi elementul, apoi ) indică faptul că conținutul său are o importanță puternică, seriozitate sau urgență. Browserele redau de obicei conținutul cu caractere aldine."> element; prin urmare, trebuie să închidem ) indică faptul că conținutul său are o importanță puternică, seriozitate sau urgență. Browserele redau de obicei conținutul cu caractere aldine."> mai întâi elementul, apoi elementul reprezintă un paragraf.">

  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 goale

  Unele elemente nu au conținut și sunt numite elemente goale. Luați elementul încorporează o imagine în document. Este un element înlocuit."> element pe care îl avem deja în pagina noastră HTML:

  

  Acesta conține două atribute, dar nu există î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 HTML

  Aceasta 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):

  

  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 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 reprezintă rădăcina (elementul de nivel superior) a unui document HTML, deci este denumit și element rădăcină. Toate celelalte elemente trebuie să fie descendente ale acestui element."> element. Acest element include tot conținutul de pe întreaga pagină și este uneori cunoscut ca element rădăcină.
  • - elementul conține informații (metadate) care pot fi citite de mașină despre document, cum ar fi titlul, scripturile și foile de stil."> element. 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.
  • - ) definește documentele care sunt afișate într-o bară de browser sau filă de pagină.> - tag care trimite titlul paginii la cuprins;
  • , , , sunt etichete de formatare a textului și creează text aldine, text italic, care despart un paragraf, care formează numerotarea.

  Alături de etichete, al căror rezultat este văzut de vizitatorul paginii sub formă de ortografii aldine sau italice, există și etichete de serviciu, care se numesc metaetichete și oferă informațiile necesare motoare de căutare, pentru browser, dar nu sunt vizibile pentru utilizatorul normal.

  Pentru a crea o pagină html, trebuie să efectuați succesiv pașii descriși mai jos. Puteți folosi notepad obișnuit.

  1) Creați un document. Introduceți următorul cod în el:

  Conținutul acestui element va fi afișat în browser

  Notă: neapărat în » specificați codificarea documentului așa cum se arată mai sus.

  2) În continuare: fișier - salvați ca. În câmpul „tip de fișier” în loc de „txt” selectați „Toate fișierele” (toate fișierele), în câmpul pagina de coduri (codarea paginii) - selectați 65001 (UTF-8), în câmpul „nume fișier” după numele lui documentul punem un punct și extensia html (.html), apoi facem clic pe salvare. Avem un al doilea document în același folder, dar deja în html. Aceasta este pagina noastră web, care poate fi deschisă acum în orice browser.

  exemple de cod html

  • Text împărțit în paragrafe

  Paragraful 1

  paragraful 2

  paragraful 3

  • Titluri și paragrafe centrate

  Acest titlu este aliniat la centru.

  Titlul de al doilea nivel este aliniat la centru.

  Textul paragrafului este aliniat la centru.

  • Metaetichete, titlul paginii (titlu), descrierea paginii (descriere) și cuvinte cheie (cuvinte cheie)

  Paragraf cu cuvinte cheie specificate în „cuvinte cheie”

  CSS - care completează mecanismele html

  Acolo unde funcționalitatea html este insuficientă, foile de stil în cascadă - CSS - vin în ajutor. Sunt opțiuni avansate puternice pentru schimbarea aspectului unei pagini web. CSS funcționează împreună cu capabilitățile html. Aceste două seturi de parametri interacționează și nu se înlocuiesc în niciun fel.

  Opțiunile CSS pot fi plasate pe documentul web în sine utilizând:

  • Etichete, care sunt între etichete Și;
  • atributul de stil situat în interiorul oricărei alte etichete.

  De asemenea, indicii CSS pot fi atașate unui document web cu:

  • etichetă plasat între Și;
  • Directiva @import plasată între etichete.

  În procesul de scriere a unei foi de stil, este necesar să se respecte cu strictețe o sintaxă specială care implică subordonarea elementelor și ierarhia acestora, în care pozițiile sunt distribuite între pointer, proprietate, valoare, descriere și șir. Acoladele sunt folosite pentru a desemna proprietăți și pot fi atribuite mai multe proprietăți fiecărei etichete simultan.

  Modalități de a include foi de stil CSS

  Există mai multe moduri de a conecta CSS la html:

  • tabele inline, în care o foaie de stil este încorporată în antetul paginii folosind eticheta;