Învățare HTML pentru începători. Fundamentele limbajului de programare WEB HTML

Cu acest ciclu, vreau să deschid o serie de lecții despre HTML. Am luat această decizie pentru că aș dori să încerc să învăț cum să creez site-uri web pentru utilizatori de la zero. Acest gând este în capul meu de ceva vreme. A apărut doar întrebarea de unde să începeți, cu HTML sau să continuați direct cu instalarea motorului și configurarea ulterioară a acestuia.

Dar dacă începeți prin a învăța motorul, atunci unii dintre utilizatorii care nu cunosc HTML vor fi lăsați afară. Prin urmare, am decis să încep cu elementele de bază și să o fac astfel încât chiar și orice începător să-și dea seama ce și cum.

Deci, ce este HTML?

Abrevierea în sine reprezintă H ureg T ext M arkip L apguage ( limbaj de marcare hipertext).

Și pentru a spune simplu, HTML- aceasta este limbaj special markup care spune browserului cum să afișeze un anumit pagină web. Adică în ce font să arate textul, în ce ordine să compun elementele, ce elemente să afișeze subliniat etc. Și în funcție de ce element va fi întâlnit de browser, în conformitate cu regulile stabilite în browserul însuși , acest element va fi afișat. Cu toate acestea, aceste reguli pot fi apoi schimbate, dar despre asta voi vorbi deja în următoarele lecții, care vor fi dedicate css.

Permiteți-mi să încep prin a vedea un exemplu de pagină web simplă, care poate fi. Acum nu ar trebui să vă concentrați atenția asupra aceia sau aceia Etichete. Totul are timpul său, pentru început, trebuie doar să acordați atenție unde este totul în cod și cum se leagă totul de ceea ce este afișat în browser. Luați în considerare un exemplu de document HTML:

Titlul paginii

O zi din viața mea

Pregătirea concertelor

M-am trezit azi devreme pentru că urma o zi grea. Până la urmă, astăzi trebuie să cânt la un concert în fața a o sută de spectatori. Și ca să mă asigur că totul merge bine, trebuie să repet programul de repetiții.

Repetiţie

Totul a mers fără probleme. Din echipa noastră, nimeni nu a pierdut ritmul și, după cum s-a dovedit, toată lumea s-a îngrijorat în zadar.

Concert

Toată lumea a evoluat grozav, deși cred că a fost un moment în care toboșarul nostru și-a pierdut ritmul. Dar am ieșit cu îndemânare din situație.

Pentru a începe, va trebui să tastați acest text în unele editor de text(Cred că cel mai convenabil este notepad++) și salvați fișierul ca index .html undeva pe disc. Făcând dublu clic pe fișierul salvat se va deschide o pagină similară cu aceasta.

Vă rugăm să rețineți că etichetele în sine nu sunt afișate, dar conținutul în sine, care se află între ele, este afișat. Și de aici puteți concluziona că etichetele acționează ca un element de design în HTML.

Uita-te la sursă. După cum probabil ați observat, înainte de cuvântul „Unul”, există o mică liniuță. Cu toate acestea, browserul nu a ținut cont de el, pur și simplu l-a înghițit în tăcere, de parcă n-ar fi existat niciodată. Mai mult, dacă încercați să puneți multe spații între cuvinte, atunci toate vor fi percepute de browser ca un singur spațiu - HTML are o astfel de caracteristică.

Și iată un alt sfat - când scrieți cod HTML, obișnuiți-vă să indentați acele etichete care sunt imbricate în altele. De exemplu, etichetele titlu și body sunt imbricate în eticheta html. Deci, atunci când scrieți aceste etichete, nu uitați să indentați corespunzător. De obicei se fac cu două spații sau file - aceasta este deja o chestiune de gust. De ce este nevoie de asta? Acum, în acea mică parte a documentului pe care l-am citat ca exemplu mai sus, nu există prea multe informații, așa că este destul de problematic să fii confuz acolo. Cu toate acestea, dacă există multe elemente imbricate pe pagină, atunci nu va fi mai ușor decât să vă pierdeți în acest cod imens și să vă dați seama cu greu în ce parte a documentului vă aflați în prezent. Deci, este mai bine să te obișnuiești imediat cu un stil bun, atunci tu însuți îl vei înțelege și îți va fi un serviciu bun în viitor.

De asemenea, merită să specificați cel mai necesar minim de etichete care ar trebui să fie într-un document HTML. Eu vorbesc despre aceasta parte:

Dar chiar dacă această parte nu este acolo, atunci majoritatea browserelor se vor uita la toate acestea prin degete și vor afișa în continuare pagina ta. Cu toate acestea, un astfel de stil frivol de a scrie cod, în care o persoană sare peste un numar mare de tags este un stil de scriere prost, așa că este o idee bună să aveți oricum toate aceste elemente pe pagina dvs. În caz contrar, poate duce la o problemă de compatibilitate cu alte browsere, care, ca urmare, poate afecta aspect site-ul dvs. și, ca rezultat - prezență.

În plus, puteți scrie comentarii într-un document HTML - acestea sunt doar informații de serviciu care vă sunt destinate exclusiv. De obicei, acestea sunt câteva note importante care servesc ca un memento pentru tine sau doar ceva la care ar trebui să fii atent. Comentariile nu sunt procesate de browser și, ceea ce înseamnă că utilizatorul nu le va vedea. De obicei sunt scrise astfel:

Și acum să încercăm să ne dăm seama singuri care etichetă din exemplul nostru de mai sus este responsabilă pentru ce.

Etichetă htmlînseamnă că începe producția de cod html.

cap– secțiunea informații despre service. Printre altele, iată titlu, care este responsabil pentru textul din bara de titlu a ferestrei browserului. Această secțiune poate fi tratată și ca informații pe care dorim să le transmitem browserului despre această pagină.

corp- începe partea principală a documentului.

h1- titlu.

h2- subtitrare.

p- paragraf.

Probabil asta e tot! Dacă acesta a fost primul tău document HTML, atunci felicitări! Da, nu arată atât de grozav pe cât ne-am dori. Dar, cu toate acestea, avem materiale pe care deja putem lucra. Și în următoarele lecții, totul va fi și mai interesant și vom atinge încet lucrul cu foi de stil în cascadă (css).

  • < Назад

Pentru a comenta, trebuie să vă înregistrați.

HTML este limbajul de marcare hipertext care a făcut web-ul așa cum îl cunoaștem și îl iubim. Datorită acestui instrument minunat, site-urile arată frumos și modern, iar comoditatea utilizării lor este, de asemenea, asigurată. HTML pur și simplu aranjează elementele unei pagini web într-un mod ușor de utilizat. Munca lui este comparabilă cu ceea ce fac MS Word sau OpenOffice. Ei transformă o masă fără chip de scrisori într-un document care are paragrafe, miniatură, cursive, tabele și chiar imagini. Aproximativ același lucru face și limbajul HTML, cu singura diferență că documentele sale sunt afișate în browser, iar posibilitățile acestui instrument sunt mult mai largi decât cele ale unui editor de text. Pentru marcare se folosesc etichete - comenzi speciale care descriu structura unei pagini web. Sunt incluse în paranteze unghiulare -<тег>astfel încât browserul să le poată distinge de cea mai mare parte a textului. În continuare, vom acoperi elementele de bază ale HTML pentru începători.

Editori vizuali

Începătorii care tocmai pun piciorul pe calea învățării HTML-ului își încep adesea munca cu programe care vă permit să creați site-uri fără nicio cunoștință. În ele, puteți aranja pur și simplu elementele pe ecran, așa cum vor fi afișate în browser. S-ar părea că aici este - o sursă de har etern, care vă permite să scăpați de majoritatea dezvoltatorilor web. Dar nu totul este atât de simplu, deoarece editorii vizuali au o mulțime de deficiențe care fac imposibilă utilizarea lor în proiecte serioase.

Toate aceste programe creează o mulțime de etichete inutile care fac versiunea finală a paginii greoaie și suboptimă. Desigur, în această epocă a internetului de mare viteză, acest lucru contează mai puțin decât înainte, dar există o serie de motive pentru care un site concis și bine scris se dovedește a fi mai practic decât omologul său creat într-un editor vizual. O pagină web realizată într-un astfel de program va fi procesată prost de roboții de căutare, deoarece fiecare kilobyte de cod este important pentru ei, iar codul greoi și ilogic cu o grămadă va fi cu greu pe gustul lor. În plus, editorii sunt adesea în urmă cu vremurile, devenind irelevanți și nu merită să cheltuiți resurse pentru dezvoltarea lor, deoarece niciun profesionist nu folosește aceste produse. Prin urmare, oricine dorește să lucreze în domeniul creării de site-uri web ar trebui să cunoască elementele de bază ale HTML.

Etichete

După cum sa menționat mai sus, etichetele descriu structura unei pagini web către browser. Cele mai multe dintre ele au o etichetă de deschidere și de închidere, dar nu toate. De exemplu, ..., unde conținutul este în loc de puncte. Primul arată unde începe eticheta, iar al doilea o închide. Pot exista și alte elemente de marcare a paginii în interior, acestea pot fi imbricate unul în celălalt ca o păpușă de cuib. Este important să închideți etichetele în timp util, astfel încât pagina să fie afișată corect.

Există, de asemenea, etichete unice care nu trebuie să fie închise. În ele, conținutul este în interior, așa cum poate fi scris pentru majoritatea etichetelor HTML și setează proprietățile elementului. Este indicat în eticheta de deschidere și arată cam așa: atribut = "...", unde în loc de puncte există o valoare de atribut. Cunoașterea etichetelor este primul și cel mai important pas în stăpânirea HTML-ului. Elementele de bază ale acestei arte implică și înțelegerea structurii unei pagini web.

Structura documentului

Fiecare document HTML are o extensie corespunzătoare, cum ar fi Index.html. Astfel, browserul poate înțelege cu ce are de-a face și poate afișa pagina corect. Este recomandabil să stocați toate fișierele folosite pentru a crea site-ul într-un singur director, ceea ce vă va facilita foarte mult viața în viitor. Elementele de bază ale limbajului de marcare hipertext HTML necesită o înțelegere clară a structurii unui document. Începe cu eticheta, care spune browserului versiunea de HTML care este utilizată în acest document. Pe acest moment a cincea versiune a limbii este relevantă, deci nu este nevoie să inventați nimic aici, puteți introduce în siguranță eticheta de mai sus la începutul oricărei pagini.

Apoi vin principalele structuri pereche care alcătuiesc „scheletul” sitului. Prima etichetă în care toate celelalte sunt imbricate − .... Orice lucru din afara acestuia nu este recunoscut ca pagină web de către browser, așa că deschide documentul și îl închide. Această etichetă este necesară pentru orice document. Conține, de asemenea, câteva etichete obligatorii, care vor fi discutate mai jos.

cap

În interiorul etichetei ... conține informații tehnice care nu vor fi afișate pe pagină, dar reprezintă totuși o parte importantă a documentului HTML. În acest loc sunt puse bazele site-ului, aici se selectează codificarea și se introduce numele paginii. Este conținut într-o etichetă obligatorie .... Numele este afișat în partea de sus a browserului, unde puteți plasa și o mică pictogramă care caracterizează conținutul paginii. Este recomandabil să specificați imediat codificarea documentului pentru afișarea corectă a acestuia. Acest lucru se poate face cu eticheta . Metaetichetele oferă informații despre structura paginii și sunt de obicei situate în interiorul capului.

Legătură

Cunoașterea elementelor de bază ale HTML implică și utilizarea stilurilor în cascadă sau css. Acestea stabilesc proprietățile elementelor care vor fi afișate pe pagină. Abordarea modernă a acestei sarcini presupune introducerea unor caracteristici precum culoarea, înălțimea și locația elementului, în fișier extern pentru mai multă comoditate. Eticheta este folosită pentru a conecta fișierul CSS . Când este terminat, arată astfel: , unde href indică locația fișierului și tipul indică tipul acestuia.

Corp

În această parte a documentului HTML este creată partea vizibilă a paginii. Tot ceea ce se face în interiorul „corpului” va fi afișat de browser. LA sunt folosite un număr mare de etichete HTML. Elementele de bază sunt formatarea textului, lucrul cu link-uri și cele mai simple instrumente pentru structurarea unei pagini web. Pentru a începe în HTML, este suficient să cunoașteți etichetele de bază și să le puteți utiliza. Mai jos sunt cele mai populare: