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:
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,
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ă obligatorieLegă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:- - folosit pentru a selecta un subșir care va fi supus unui stil special descris în css;
- - creează un link pe o pagină web; adresa de salt este setată de atributul href;
- - una dintre cele mai populare etichete ale timpului nostru; toți cei care decid să învețe elementele de bază ale limbajului HTMLl ar trebui să îi acorde o atenție deosebită, deoarece acesta este un element bloc, pe baza căruia se realizează cea mai mare parte a site-urilor moderne (parametri pentru blocurisunt setate în css, iar alte blocuri pot fi plasate în interiorul acestei etichete);
Selectează un paragraf din text; conținutul paragrafului se află între etichetele de deschidere și de închidere;
- - listă numerotată, ale cărei elemente sunt incluse într-o etichetă pereche
- - o listă cu marcatori, în care, ca într-o listă numerotată, elementele sunt indicate printr-o etichetă
-
- titlurile documentelor (numărul indică nivelul titlului, adică
- titlul principal și opțiunile ulterioare sunt subtitlurile sale, de altfel, titlurile de nivel
,
aproape imposibil de găsit pe Internet), este, de asemenea, important de reținut că nu poate exista decât un singur titlu pe pagină
;
- - miniatură;
- - cursive;
- - inserarea unei imagini pe o pagină web (aceasta este o singură etichetă, nu are nevoie de etichetă de închidere, dar trebuie să conțină atributul alt, care specifică textul pentru imagine);
Acestea nu sunt toate etichetele de care aveți nevoie pentru a vă crea propria pagină web, dar sunt suficiente pentru a pune bazele HTML pentru începători.
css
Dezvoltarea limbajului HTML a dus la faptul că fiecare etichetă a dobândit o masă de atribute, iar cerințele pentru apariția paginilor web au crescut semnificativ. Codul a devenit greoi și incomod, a fost greu de citit, darămite de a-l adapta sau schimba. În plus, dacă ai zece pagini pe site-ul tău care au o mulțime de titluri marcate cu verde și vrei dintr-o dată să le faci roșii, atunci trebuie să te străduiești să le schimbi manual pe fiecare. Odată cu apariția foilor de stil în cascadă, acest proces a devenit simplu și logic, iar codul HTML a devenit mult mai ușor de citit.
Aplicarea CSS
Pentru a crea pagini web, trebuie să cunoașteți elementele de bază ale HTML și CSS, deoarece astăzi nu este nimic de făcut în acest domeniu fără cunoștințe despre foile de stil în cascadă. Acestea stabilesc atribute pentru orice element care se aplică întregului document. Astfel, puteți seta culoarea pentru toate elementele simultan
Pentru a lega un fișier CSS la un document, există o etichetă de legătură. Principiul utilizării sale a fost descris puțin mai sus, dar nu este singura opțiune pentru combinarea tuturor stilurilor într-un singur loc. Există o altă etichetă