Etichete pentru crearea unei pagini html în notepad. Tutorial „Crearea paginilor web folosind HTML”

La fel ca limbajul de marcare HyperText. HTML nu este un limbaj de programare, este un limbaj de marcare a site-ului web.

Toate browserele pot converti acest marcaj într-un format ușor de utilizat.

Acest limbaj folosește comenzi speciale numite etichete. Fiecare etichetă are propria sa funcție. Există un număr mare de etichete. În mod ideal, trebuie să înveți totul. Dar pentru un dezvoltator începător, cunoștințele de bază sunt destul de suficiente.

Comenzi HTML de bază

Lista comenzilor HTML este foarte mare. Dar nu sunt multe dintre cele principale. Pentru a începe să scrieți cod, aveți nevoie de un editor. Puteți folosi Notepad. Se recomandă utilizarea Notepad++. Arată așa.

Avantajul este că în editorii speciale etichetele sunt evidențiate într-o anumită culoare, în funcție de categorie. Comenzile pentru crearea unui site web HTML în Notepad sau orice alt program sunt aceleași. Limbajul folosit este același peste tot. Mediul de dezvoltare este doar un instrument.

HTML are etichete de închidere și non-închidere. Tot în această limbă există și conceptul de cuibărit. Fiecare obiect din cod este un element. Un element are o etichetă de deschidere, o etichetă de închidere și conținut. Mai mult, eticheta are propriile atribute suplimentare cu propriile valori.

În figură puteți vedea două etichete și . Amintiți-vă că deschiderea și închiderea sunt scrise la fel, dar numai „/” diferă. Dacă eticheta nu este închisă, atunci handlerul va considera totul ca fiind o continuare a acestui element special. Este foarte important. Mai ales în link-uri. Ne vom uita la ele puțin mai departe.

Eticheta este necesară. Mereu trebuie scris. Dar nu este nevoie să-l închideți. Conform standardelor, este necesar, dar dacă nu îl închideți, va funcționa în continuare.

Aceste comenzi HTML sunt cadrul pentru pagină. Sunt solicitate. Se inchid si ele.

Numele etichetelor corespunde semnificației. Cap – cap. Această secțiune indică servicii și informații importante care nu sunt vizibile. Secțiunea de corp este corpul documentului. Aici este conținutul care este afișat utilizatorului. Încercați să închideți imediat etichetele pentru a evita confuzia mai târziu.

Secțiunea de service precizează:

titlul documentului;
fișiere de stil;
fișiere script;
meta etichete;
linii directoare pentru motoarele de căutare;
instrucțiuni pentru roboți;
orice alte informații care pot fi folosite de programatori, dar nu de utilizatori.

Fișierul de stil este conectat astfel:

Fișierul script este următorul:

Textul trebuie să aibă un titlu. O indicam astfel:

Titlul paginii

Acest text va apărea în titlul filei browser. Acest titlu este afișat și ca rezultat al rezultatelor motorului de căutare.

Etichete pentru formatarea textului

Textul trebuie plasat în eticheta de paragraf. Se notează ca . De asemenea, puteți utiliza String pentru text.

Puteți formata textul ca în Word:

cursive
miniatură
text tăiat
text subliniat

Textul poate fi stilizat. Ne vom uita la ele la final, după ce trecem în revistă alte elemente.

Utilizarea antetelor

Există și alte comenzi HTML importante. Pentru a crea site-uri web, sunt necesare anteturi. Ele sunt indicate cu ajutorul etichetei de antet de prim nivel. Există niveluri de la 1 la 6. Este important să înțelegeți că anteturile trebuie să fie imbricate.

Un exemplu în figură.

Rețineți că se recomandă utilizarea unui singur titlu h1. În acest caz, trebuie să se potrivească cu eticheta. Desigur, poți specifica 200 de titluri h1, dar atunci vei fi penalizat de motoarele de căutare.

Utilizarea imaginilor

Imaginile sunt parte integrantă a paginilor web. Exemplul arată cum puteți insera o fotografie.

După cum puteți vedea, exemplul arată în detaliu cum se numește și cum.

Folosind link-uri

Dacă înveți comenzi HTML, atunci pur și simplu trebuie să cunoști eticheta de link. Acesta este unul dintre cele mai importante elemente care compun

În exemplul de mai sus, puteți vedea că în locul textului linkului există o imagine. Adică puteți pune atât text, cât și o imagine.

Folosind tabele

Tabelele sunt, de asemenea, folosite foarte des. Inițial, au fost destinate să prezinte informații într-o formă convenabilă. Dar apoi designerii de layout le-au folosit pentru a plasa diferite elemente ale paginii.

Tabelul este creat după cum urmează:

Textul celulei	Textul celulei
Textul celulei	Textul celulei

Atributul width specifică lățimea tabelului. Poate fi în procente sau pixeli. Border specifică grosimea chenarului.

Structura este specificată după cum urmează. Eticheta tr este un șir. Etichetați celula td. Și toate împreună - aceasta este o masă.

Tabelul poate fi aliniat. Pentru a face acest lucru, utilizați atributul align, care poate lua trei valori: Left, Center, Right. Un exemplu de utilizare este dat mai jos.

Aceste comenzi HTML (lățime și aliniere) funcționează și pentru alte elemente. Grosimea cadrului este indicată și pentru imagini.

Utilizarea Listelor

Folosind comenzi HTML, puteți crea diferite tipuri de liste. Aproape exact la fel ca în editorul Word.

În limbajul HTML sunt ordonate și neordonate Un exemplu de astfel de listă.

Primul

Al doilea

Al treilea

Rezultatul va fi astfel:

Primul
Al doilea
Al treilea

Tip de listă	cod HTML
Sub formă de cerc
Sub formă de cerc
Cu markere pătrate

Listele ordonate sunt create exact în același mod, dar în loc

Aici puteți seta și tipul de afișare a listei:

"1" - numere arabe 1, 2, 3...
"A"- majuscule A, B, C...
"A"- litere mici a, b, c...
"eu"- cifre romane mari I, II, III...
"eu"- cifre romane mici i, ii, iii...

Cifrele arabe sunt afișate standard.

Deoarece acestea sunt liste numerotate, au un atribut de început care specifică valoarea de pornire a listei. De exemplu, puteți afișa o listă începând din a 10-a sau a 20-a zi.

Comenzile HTML pentru un site sunt destul de variate, dar toate urmează stiluri. Stilurile pot fi specificate ca fișier în secțiunea head: sau puteți scrie un stil gata făcut imediat.

Rețineți că există o diferență între aceste definiții de stil. Fișierul de stil poate fi specificat pe toate paginile site-ului. De îndată ce faceți modificări, această actualizare va afecta întregul site în ansamblu. Dacă specificați stiluri pe o anumită pagină, atunci modificările și utilizarea acestor clase vor fi numai în interiorul acestui fișier. Setările dvs. nu vor depăși.

Imaginați-vă că aveți 20 de pagini HTML și vă decideți să măriți antetul cu 2 pixeli. Dacă aveți totul în fișierul de stiluri, atunci trebuie doar să faceți modificări acolo. Dacă totul este individual, atunci toate cele 20 de pagini vor trebui actualizate.

Puteți specifica doar pentru o pagină după cum urmează.

Acum câteva cuvinte despre etichetele pe care le-am folosit pentru a face această pagină.

1. - aceste tag-uri trebuie sa fie prezente pe fiecare pagina web. Ei spun browserelor și motoarelor de căutare că aceasta este o pagină HTML.

Orice pagină html are următoarea structură:

2. - intre aceste tag-uri se afla tot continutul vizibil al paginii.

4. - între aceste etichete este scris titlul paginii, care este afișat chiar în partea de sus a browserului. Apropo, atunci când cauți ceva în motoarele de căutare, primul lucru care se afișează este numele paginii. O etichetă este adesea abreviată la „titlu”. Vă sfătuiesc să citiți articolul: cum să creați o etichetă

Acum să trecem la etichetele care se află în corpul paginii html (în interiorul și ).

5. - aceste etichete centrează totul în interiorul lor. În acest caz, centrul va fi centrul ecranului. Este recomandat să nu mai utilizați aceste etichete în viitor.

6. este una din clasa de etichete de titlu..., care include de obicei titlul paginii. De exemplu, această pagină are eticheta de titlu „Exemplu de creare a unei pagini html”.

Aceste etichete au o mare greutate în clasarea site-urilor, așa că trebuie folosite cu atenție și înțelepciune.

Când compuneți codul html, trebuie să respectați o regulă simplă: eticheta de titlu ar trebui să vină mai întâi, apoi pot veni, etc. Principalul lucru este că nu ar trebui să fie mai întâi, apoi, apoi etc. Trebuie să existe o ierarhie strictă. Titluri etc. poate mult.

7.
este o singură etichetă care nu necesită o etichetă de închidere. Se trece la linia următoare. În exemplul meu, am scris două etichete individuale la rând pentru a trece la rândul următor de două ori.

8. este o singură etichetă care afișează o imagine.

src este un parametru obligatoriu, care specifică adresa imaginii (în loc de URL_IMAGE, trebuie să introduceți adresa unde este stocată imaginea).
Notă:
- Dacă imaginea se află în același folder cu pagina dvs. html, atunci este suficient să scrieți numele imaginii, altfel trebuie să introduceți o adresă URL absolută sau relativă;
- Nu uitați să specificați extensia imaginii. De exemplu, .jpg, .gif, .jpeg.
alt sau titlu - puteți scrie o descriere a imaginii dvs. în acești parametri. Când treceți mouse-ul peste imagine, va apărea această descriere. Acești parametri sunt importanți pentru promovarea site-ului web, în special în căutarea de imagini. Dacă imaginea nu s-a încărcat, va fi afișat acest text, ceea ce este și un plus.

9. - aceste etichete sunt create pentru a schimba fontul, fundalul, dimensiunea etc. Pe scurt, tot ce are legătură cu formatarea textului poate fi configurat într-o singură etichetă. Această etichetă are destul de multe atribute, pe care le voi discuta într-o lecție separată.

Notă: - etichetă similară.

Există, de asemenea, o proprietate de font CSS unde puteți seta toți acești parametri.

10. - evidențiați cu aldine. Totul dintre și va fi evidențiat cu caractere aldine. De exemplu, dacă îl scrieți chiar la începutul conținutului și îl închideți la sfârșit, atunci tot textul de pe pagină va fi evidențiat cu caractere aldine. Aceasta este o etichetă destul de comună, al cărei analog este .

Motoarele de căutare acordă atenție acestei etichete în ceea ce privește creșterea influenței cuvintelor cheie. Dar trebuie să fii atent, deoarece evidențierea cuvintelor cheie cu caractere aldine de fiecare dată va fi percepută ca spam.

: HTML - limbaj de marcare hipertext (sau limbaj de marcare hipertext).

Deci haideți să-l cunoaștem mai bine.

Mai întâi, creați un fișier pe computer cu orice nume și extensie.html (titlul trebuie să fie în engleză- de exemplu index.html). Pentru a crea un astfel de fișier, creați un document text obișnuit ("Start" - "Toate programele" - "Accesorii" - "Notepad")și salvează ("Fișier" - "Salvare ca") oriunde introducând numele și extensia (se întâmplă ca atunci când introduceți o extensie, notepad-ul o salvează în continuare ca fișier text, dar avem nevoie de un fișier web. Pentru a face acest lucru, înainte de a salva, selectați tipul de fișier - „Toate fișierele (*.*)”).

Aceasta nu este o condiție prealabilă (deoarece puteți schimba numele primei pagini în setările serverului), ci o regulă a bunelor maniere. Numele primei pagini este de preferință index (index.html), întrucât serverul, la accesarea acesteia, produce un fișier cu același nume - index.

Când este salvat corect, pictograma fișierului ar trebui să se schimbe în pictograma browserului (Internet Explorer în mod implicit).

Acum deschideți acest fișier folosind Notepad și copiați următorul cod acolo.

Aceasta este prima pagină web!

Salvați și deschideți într-un browser.

Felicitări, tocmai ați creat prima pagină web.

Text „Aceasta este prima pagină web!” O puteți schimba cu oricare alta, de exemplu, „Aceasta este prima mea pagină web!!!” salvați, actualizați browserul și admirați rezultatul.

Dar pagina noastră nu are un titlu.

Trebuie să remediam acest lucru - vom corecta puțin codul sau, mai degrabă, îi vom adăuga un „Site Head” folosind etichete și .

Prima pagină Aceasta este prima mea pagină web!!!

Salvează, actualizează, admiră. Pagina noastră are acum un titlu.

Prima etichetă este (această etichetă este asociată, adică este necesară eticheta de închidere) - este folosită ca un container în interiorul căruia se află întregul conținut al paginii (text, imagini etc.). Deși această etichetă ( și ) este opțională, utilizarea sa demonstrează bunele maniere. Prin urmare, vă sfătuiesc să îl utilizați.

Următoarea etichetă este . Aceasta este, de asemenea, o etichetă asociată ( și ). Această etichetă nu este afișată pe pagină (cu excepția titlului), dar este necesar să se indice parametri suplimentari de pagină - descrierea paginii (utilizată de motoarele de căutare), cuvinte cheie (utilizate de motoarele de căutare), stiluri, scripturi, titlu etc.

Etichetă - este necesară o etichetă asociată ( și ) pentru a indica titlul paginii. Mai mult, această etichetă trebuie plasată doar în interiorul etichetei!

Și ultima etichetă din codul nostru este . De asemenea, o etichetă asociată ( și ), în interiorul căreia se află întreaga parte vizibilă a site-ului, de exemplu. texte, imagini, link-uri, în general informații pe care doriți să le plasați pe site.

În lecția următoare vom vorbi despre tipurile de etichete și despre regulile de scriere a acestora.

Un om nu poate trăi numai din cuvinte,
oricât le-ar fi înghițit.
Adlai Stevenson.

În general, HTML nu este un limbaj de programare. Acesta este limbajul HyperText Markup. Adică, numirea acestuia „limbaj HTML” nu este corectă.

Pentru a spune simplu, HTML este o listă de etichete (cuvinte de control) care vă permit să prezentați text simplu într-o formă formatată. De exemplu, evidențiați-o cu aldine sau cursive etc.Dar textul poate fi prezentat în acest fel doar în programe speciale (programe cu care navighezi pe internet).

Acestea afișează doar text formatat și ascund etichetele HTML care au fost folosite pentru formatare. Pentru a vă înțelege mai clar despre ce vorbesc, faceți clic dreapta pe această pagină și în meniul care se deschide, selectați „Cod sursă” sau ceva similar. Această pagină se va deschide înaintea ta în forma ei actuală.

Puteți crea cod HTML atât în programe obișnuite, cât și în programe speciale, așa-numitele. Editorii vizuali diferă de editorii de text prin faptul că sunt proiectați pentru tastarea codului HTML, CSS, JavaScript, PHP etc., adică pentru programarea web. În plus, vă permit să vizualizați imediat roadele muncii tale în browserul încorporat și să evidențiezi unele erori în codul tastat.

Recomand cu tărie să tastați tot codul manual (pentru a îmbunătăți directitatea acestor mâini), dar editorii vizuali facilitează foarte mult acest proces. Personal, folosesc. Aceasta este departe de cea mai recentă versiune, dar capacitățile sale sunt mai mult decât suficiente pentru mine.

Fac asta: introduc codul în Dreamweaver, apoi salvez și dau clic pe butonul „Vizualizare în browser” (editați singur lista de browsere din acest meniu), apoi revin la Dreamweaver și continuați editarea. Aici . Asta e tot pentru instrumente, acum să trecem la etichetele HTML.

Să începem cu structura unei pagini HTML, sau mai degrabă cu etichetele sale principale.

Etichetele HTML necesare (de bază) care sunt utilizate în fiecare document HTML includ următoarele:

Notă. Pentru ca browserul să scoată codul HTML ca text (nu să îl interpreteze în cod), las un spațiu după fiecare paranteză unghiulară de deschidere „”. Când introduceți codul, NU lăsați spații.

După cum puteți vedea, toate etichetele sunt asociate (există o etichetă de deschidere și una de închidere în HTML, aproape toate etichetele sunt așa); Diferența dintre eticheta de deschidere și eticheta de închidere este că eticheta de închidere este precedată de o bară oblică „/”. Astfel de etichete se mai numesc și etichete container, deoarece între ele pot fi introduse și alte etichete, adică. puneți în recipient. Puteți vedea singur că între etichete există și alte etichete.

Puteți introduce numele etichetelor cu majuscule sau cu majuscule, nu există nicio diferență. Adică, înregistrările de tip și pentru browser nu au diferențe și sunt interpretate în același mod. Acum să vorbim mai detaliat despre ce înseamnă aceste etichete.

Deci, etichetele principale arată browsere și alte programe pentru vizualizarea paginilor hipertext cu care au de-a face cu un document hipertext. Orice document html trebuie să înceapă cu și să se termine cu. Adica intre aceste tag-uri se afla TOT codul paginii html.

Între etichete se află metaetichete (titlul paginii, descrierea, cuvintele cheie etc.). Acestea stochează informații despre pagina html și informații tehnice. În general, această etichetă este opțională, adică fără ea, documentul HTML va fi afișat în mod normal de către browsere. Dar chiar dacă nu intenționați să utilizați zona de titlu, cel puțin scrieți-o simplu. Acest lucru este necesar pentru compatibilitatea între diferite versiuni de programe.

Toate informațiile aflate între etichetele „HEAD” nu sunt afișate în niciun fel de către browser (cu excepția informațiilor dintre etichete, unde se află numele documentului html, afișate în panoul superior al browserului). Dar ele pot avea un impact mare asupra aspectului unei pagini html, asupra vieții acesteia pe Internet și asupra clasamentului. Vom vorbi mai multe despre etichetele care se află în antetul unui document hipertext mai târziu.

Conținutul principal al unui document HTML este situat între etichetele și. Iată tot ce vedem când deschidem o pagină html: text, grafică, meniuri, butoane etc. Acesta este „corpul” principal al paginii.

Toate celelalte etichete utilizate la crearea unui document HTML sunt situate între (adică, în interiorul) aceste etichete necesare. Aproape toate etichetele din HTML au diverse atribute, proprietăți și parametri care vă permit să afișați informații exact așa cum a intenționat dezvoltatorul. De exemplu, dacă scrieți:

Apoi fundalul întregii pagini va fi roșu.

Aici o etichetă este, de fapt, o etichetă; bgcolor - atributul său; „#FF0000” - valoarea atributului (o etichetă poate avea mai multe atribute).

Notă. Toate atributele etichetei și valorile acestora sunt specificate în eticheta de deschidere (cea fără bară oblică), dar în niciun caz în eticheta de închidere.

Și așa, ne-am dat seama de etichetele principale ale unui document html. Acum este timpul să studiem restul mai detaliat. Aici vreau să fac o mică digresiune.

Punând în practică cunoștințele acumulate din, mi-am dat seama ce greșeală au făcut majoritatea autorilor acestor cărți și tutoriale. Toate aceste manuale, în primul rând, sunt destinate începătorilor, iar în al doilea rând, predau elementele de bază ale HTML-ului în ordine.

T . Adică, etichetele de titlu ale documentului html () sunt luate în considerare mai întâi, iar apoi etichetele „body” ().

Pe baza propriei mele experiențe, îndrăznesc să spun că această procedură de învățare a elementelor de bază ale HTML este categoric inacceptabilă pentru un începător. Un începător încearcă să studieze toate aceste etichete de titlu numeroase și puțin înțelese, în primul rând, fără a vedea rezultatele învățării sale (permiteți-mi să vă reamintesc, etichetele de titlu nu sunt afișate de browser). Și în al doilea rând, fără măcar a bănui că majoritatea acestor etichete nu vor fi necesare pentru a crea site-ul pe care l-a planificat (cel puțin la începutul lucrărilor).

Astfel, pierde doar timpul și dorința de a continua să învețe HTML. În același timp, menținând opinia că doar „gurus” o pot face pentru bani buni. Aș renunța și la această activitate dacă nu m-aș păsa de ceea ce încă nu înțeleg și nu aș merge mai departe.

Prin urmare, vă sugerez să luați în considerare mai întâi etichetele legate de „corpul” documentului html (), și abia apoi să treceți la restul. Mai mult, „corpul” paginii html conține informațiile pentru care vor veni vizitatorii site-ului. Iar crearea sau găsirea acestuia este mult mai dificilă decât scrierea codului.

Ei bine, acum, fără să ezitați un minut, faceți clic pe butonul „Următorul” și continuați să aflați cum acești tipi nebărbieriți și lipsiți de somn creează site-uri web.

Înainte de a începe călătoria prin lecțiile de construire a site-urilor web HTML și CSS, este important să înțelegem diferențele dintre cele două limbi, sintaxa fiecărei limbi și unele terminologii de bază.

HTML (HyperText Markup Language) definește structura conținutului și semnificația acestuia, definind conținut precum titluri, paragrafe sau imagini. CSS (Cascading Style Sheets) este un limbaj de prezentare creat pentru a stila aspectul conținutului, folosind, de exemplu, fonturi sau culori.

Aceste două limbi - HTML și CSS - sunt independente unul de celălalt și ar trebui să rămână așa. CSS nu ar trebui să fie scris în interiorul unui document HTML și invers. Ca regulă generală, HTML va reprezenta întotdeauna conținutul, iar CSS va defini întotdeauna stilul.

Cu această înțelegere a diferenței dintre HTML și CSS, să ne aprofundăm în HTML mai detaliat.

Înainte de a începe să lucrați cu HTML, probabil că veți întâlni niște termeni noi și adesea ciudați. Veți deveni mai familiarizați cu toate acestea în timp, dar pentru moment ar trebui să începeți cu cei trei termeni HTML de bază - elemente, etichete și atribute.

Elementele specifică modul de definire a structurii și conținutului obiectelor dintr-o pagină. Unele dintre elementele utilizate în mod obișnuit includ mai multe niveluri de titluri (definite ca elemente de la până la ) și paragrafe (definite ca

); Puteți include elemente în listă . . . și multe altele.

Elementele sunt identificate prin paranteze unghiulare care înconjoară numele elementului. Deci elementul va arăta astfel:

Etichete

Adăugarea de paranteze unghiulare< и >creează ceea ce este cunoscut ca o etichetă în jurul elementului. Etichetele apar cel mai adesea în perechi de etichete de deschidere și de închidere.

Eticheta de deschidere marchează începutul elementului. Se compune din simbolul ; De exemplu, .

Eticheta de închidere marchează sfârșitul elementului. Este format dintr-un simbol< с последующей косой чертой и именем элемента и завершается символом >; De exemplu, .

Conținutul care apare între etichetele de deschidere și de închidere este conținutul acelui element. Linkul, de exemplu, va avea o etichetă de deschidere și eticheta de închidere. Ceea ce este între aceste două etichete va fi conținutul link-ului.

Deci, etichetele de link vor arăta cam așa:

...

Atributele sunt proprietăți utilizate pentru a furniza informații suplimentare despre un element. Cele mai comune atribute includ atributul id, care identifică elementul; atributul de clasă, care clasifică elementul; atributul src, care specifică sursa conținutului încorporat; și un atribut href, care specifică o legătură către resursa asociată.

Atributele sunt definite în eticheta de deschidere după numele elementului. În general, atributele includ un nume și o valoare. Formatul pentru aceste atribute constă din numele atributului urmat de un semn egal și apoi valoarea atributului între ghilimele. De exemplu, element cu atributul href va arăta astfel:

Shay Howe

Demonstrarea termenilor HTML de bază

Acest cod va afișa textul „Shay Howe” pe o pagină web și, atunci când faceți clic pe acest text, utilizatorul va ajunge la http://shayhowe.com. Elementul link este declarat folosind o etichetă de deschidere și eticheta de închidere care acoperă textul, precum și atributul și valoarea adresei linkului declarate prin href="http://shayhowe.com" în eticheta de deschidere.

Orez. 1.01. Sintaxa HTML sub formă de schiță include element, atribut și etichetă

Acum că știți ce sunt elementele, etichetele și atributele HTML, să aruncăm o privire la prima noastră pagină web. Dacă ceva pare nou aici, nu vă faceți griji - îl vom descompune pe măsură ce mergem.

Documentele HTML sunt simple documente text salvate cu extensia .html, mai degrabă decât .txt. Pentru a începe să scrieți HTML, aveți nevoie mai întâi de un editor de text pe care să vă simțiți confortabil. Din păcate, aceasta nu include Microsoft Word sau Pages, deoarece acestea sunt editoare complexe. Cele mai populare două editoare de text pentru scrierea HTML și CSS sunt Dreamweaver și Sublime Text. Alternativele gratuite includ și Notepad++ pentru Windows și TextWrangler pentru Mac.

Toate documentele HTML conțin o structură necesară care include următoarele declarații și elemente: , și .

Declarația de tip de document sau se găsește la începutul unui document HTML și le spune browserelor ce versiune de HTML este utilizată. Deoarece vom folosi cea mai recentă versiune de HTML, tipul nostru de document va fi pur și simplu . După aceasta urmează un element care indică începutul documentului.

Pe plan intern, elementul definește partea de sus a documentului, inclusiv diverse metadate (informații însoțitoare despre pagină). Conținutul din interiorul elementului nu este afișat pe pagina web în sine. În schimb, poate include titlul documentului (care apare în bara de titlu a ferestrei browserului), link-uri către orice fișiere externe sau orice alte metadate utile.

Tot conținutul vizibil al paginii web va fi conținut în element. Structura unui document HTML tipic arată astfel:

Salut Lume! Salut Lume!

Aceasta este o pagină web.

Acest cod arată documentul, începând cu declarația tipului de document, , apoi imediat urmat de . În interior sunt elemente și . Elementul conține codificarea paginii prin etichetă și titlul documentului prin element. Un element include un titlu prin element și un paragraf de text prin . Deoarece atât titlul, cât și paragraful sunt imbricate în element, acestea sunt vizibile pe pagina web.

Când un element se află în interiorul altui element, cunoscut și ca imbricat, este o idee bună să-l indentați pentru a menține structura documentului bine organizată și lizibilă. În codul anterior, ambele elemente sunt imbricate și compensate în . Structura de indentare pentru elemente continuă cu elemente noi adăugate în interiorul și .

În exemplul anterior, elementul era singura etichetă care nu includea o etichetă de închidere. Nu vă faceți griji, acest lucru a fost făcut intenționat. Nu toate elementele constau din etichete de deschidere și de închidere. Unele elemente primesc pur și simplu conținut sau comportament prin atribute dintr-o singură etichetă. este unul dintre aceste elemente. Conținutul elementului din exemplu este atribuit utilizând atributul charset și o valoare. Alte elemente tipice de auto-închidere includ:

Următoarea structură, realizată folosind o declarație de tip de document și elementele , și , este destul de comună. Dorim să păstrăm această structură de document convenabilă, deoarece o vom folosi des atunci când creăm noi documente HTML.

Indiferent cât de atent ne scriem codul, erorile sunt inevitabile. Din fericire, atunci când scriem HTML și CSS, avem validatori pentru a ne verifica munca. W3C oferă validatoare HTML și CSS care scanează codul pentru erori. Revizuirea codului nostru nu numai că ajută la redarea corectă în toate browserele, dar ajută și la predarea celor mai bune practici la scrierea codului.

În calitate de designeri web și dezvoltatori front-end, avem luxul de a participa la o serie de conferințe grozave dedicate meșteșugului nostru. Vom organiza propria noastră conferință de stiluri și vom crea un site web pentru aceasta pe parcursul următoarelor lecții. Ca aceasta!

Să comutăm puțin de la HTML și să aruncăm o privire la CSS. Nu uitați, HTML definește conținutul și structura paginilor noastre web, în timp ce CSS definește stilul și aspectul lor vizual.

Pe lângă termenii HTML, există câțiva termeni de bază CSS cu care va trebui să vă familiarizați. Acești termeni includ selectori, proprietăți și valori. La fel ca în terminologia HTML, cu cât lucrați mai mult cu CSS, cu atât acești termeni devin a doua natură.

Când adăugați elemente la o pagină web, acestea pot fi stilate folosind CSS. Un selector determină ce element sau elemente din HTML să vizeze și să le aplice stiluri (cum ar fi culoarea, dimensiunea și poziția). Selectorii pot include o combinație de valori diferite pentru a selecta elemente unice, în funcție de cât de specifici vrem să fim. De exemplu, dorim să selectăm fiecare paragraf dintr-o pagină sau să selectăm doar un anumit paragraf.

Selectoarele sunt de obicei asociate cu o valoare de atribut, cum ar fi un id sau o valoare de clasă, sau un nume de element, cum ar fi sau .

În CSS, selectoarele sunt combinate cu acolade (), care includ stilurile care sunt aplicate elementului selectat. Acest selector vizează toate elementele

P(...)

Odată ce un element este selectat, proprietatea determină stilurile care îi vor fi aplicate. Numele proprietăților vin după selector, în acolade () și chiar înainte de două puncte. Există multe proprietăți pe care le putem folosi, cum ar fi fundalul, culoarea, dimensiunea fontului, înălțimea și lățimea și alte proprietăți adăugate în mod obișnuit. În codul următor definim proprietățile de culoare și dimensiunea fontului care se aplică tuturor elementelor

P (culoare: ...; dimensiunea fontului: ...; )

Până acum am selectat doar un element printr-un selector și am determinat ce stil am dori să-i aplicăm prin proprietăți. Acum putem seta comportamentul acestei proprietăți printr-o valoare. Valorile pot fi specificate ca text între două puncte și punct și virgulă. Mai jos selectăm toate elementele

Și setați valoarea proprietății culoare la portocaliu și valoarea proprietății dimensiune font la 16 pixeli.

P (culoare: portocaliu; dimensiunea fontului: 16px; )

Pentru a testa acest lucru, în CSS setul nostru de reguli începe cu un selector, urmat imediat de acolade. Aceste acolade conțin declarații formate din perechi de proprietăți și valori. Fiecare declarație începe cu o proprietate, urmată de două puncte, valoarea proprietății și, în final, de un punct și virgulă.

O practică comună este schimbarea perechilor de proprietăți și valori în interiorul acoladelor. Ca și în cazul HTML, indentarea ajută la menținerea codului nostru organizat și clar.

Orez. 1.03. Structura de sintaxă CSS include selector, proprietăți și valori

Cunoașterea câțiva termeni de bază și a sintaxei CSS generale este un început excelent, dar mai avem câteva puncte de acoperit înainte de a ne arunca în profunzime. În special, trebuie să aruncăm o privire mai atentă asupra modului în care funcţionează selectoarele în CSS.

Selectoarele, așa cum am menționat mai devreme, indică elementele HTML care vor fi stilate. Este important să înțelegeți pe deplin cum să utilizați selectoarele și cum funcționează acestea. Primul pas este să vă familiarizați cu diferitele tipuri de selectoare. Vom începe cu cei mai de bază selectori: selectoare de tip, clasă și identificator.

Selectorii de tip vizează elemente după tipul lor. De exemplu, dacă vrem să vizam toate elementele, ar trebui să folosim selectorul div. Următorul cod arată selectorul de tip pentru elemente, precum și HTML-ul corespunzător.

Div(...)

... ...

Clasele vă permit să selectați un element în funcție de valoarea atributului clasei. Selectorii de clasă sunt puțin mai specifici decât selectorii de tip, deoarece selectează un anumit grup de elemente, mai degrabă decât toate elementele de același tip.

Clasele vă permit să aplicați aceleași stiluri diferitelor elemente simultan, folosind aceeași valoare a atributului de clasă pentru mai multe elemente.

În CSS, clasele sunt reprezentate de un punct de început urmat de valoarea atributului de clasă. Selectorul de sub clasă selectează toate elementele care conțin valoarea atributului de clasă minunată, inclusiv elementele și

Minunat (...)

...

Identificatorii sunt chiar mai precisi decât clasele, deoarece vizează doar un element unic la un moment dat. Așa cum selectorii de clasă folosesc valoarea atributului de clasă, identificatorii folosesc valoarea atributului id ca selector.

Indiferent de tipul de element afișat, valoarea atributului id poate fi folosită o singură dată pe o pagină. Dacă ID-urile sunt prezente, atunci acestea ar trebui rezervate pentru elementele importante.

În CSS, identificatorii sunt reprezentați de un simbol hash în față, urmat de valoarea atributului id. Aici id-ul va selecta doar elementul care conține atributul id cu valoarea shayhowe .

#shayhowe ( ... )

...

Selectoarele sunt lucruri extrem de puternice, iar cele descrise mai sus sunt printre cele mai comune selectoare pe care le întâlnim. Aceste selectoare sunt doar începutul. Există multe selectoare avansate disponibile și sunt ușor disponibile. Odată ce vă simțiți confortabil cu ele, nu vă fie teamă să le verificați pe unele dintre cele mai avansate.

Bine, să începem să punem totul cap la cap. Adăugăm elemente în pagină în interiorul HTML-ului nostru, apoi putem selecta acele elemente și le putem stila folosind CSS. Acum să conectăm punctele dintre HTML și CSS pentru a face ca cele două limbi să funcționeze împreună.

Pentru a face CSS-ul nostru să vorbească cu HTML-ul nostru, trebuie să îndreptăm spre fișierul CSS din HTML. O bună practică este să includem toate stilurile noastre într-un singur fișier extern, indicat într-un element al documentului nostru HTML. Utilizarea unui CSS extern ne permite să aplicăm aceleași stiluri pe tot site-ul și să facem modificări rapide.

Alte opțiuni pentru încorporarea CSS includ utilizarea stilurilor interne și inline. Este posibil să întâlniți aceste opțiuni în realitate, dar ele sunt, în general, descurajate, deoarece fac ca actualizarea site-urilor să fie greoaie și greoaie.

Pentru a crea foaia noastră de stil externă, dorim din nou să folosim editorul de text ales pentru a crea un fișier text nou cu extensia .css. Fișierul nostru CSS ar trebui să fie salvat în același folder sau subdosar ca fișierul nostru HTML.

În interiorul elementului, este folosit elementul, care definește relația dintre fișierele HTML și CSS. Deoarece ne conectăm la CSS, folosim atributul rel cu o valoare de foaie de stil pentru a indica relația lor. În plus, atributul href este folosit pentru a indica locația sau calea fișierului CSS.

În următorul exemplu de document HTML, elementul indică o foaie de stil externă.

Pentru ca CSS să fie redat corect, valoarea căii a atributului href trebuie să se potrivească direct cu locul în care este stocat fișierul CSS. În exemplul anterior, fișierul main.css este stocat în aceeași locație cu fișierul HTML, cunoscut și sub numele de folder rădăcină.

Dacă fișierul CSS este situat într-un subdosar, atunci valoarea atributului href trebuie să corespundă în mod corespunzător acelei căi. De exemplu, dacă fișierul nostru main.css a fost salvat într-un subdosar numit foi de stil, atunci valoarea atributului href ar fi stylesheets/main.css. Aceasta folosește o bară oblică (sau bară oblică) pentru a indica mutarea într-un subdosar.

În acest moment paginile noastre încep să prindă viață, încet, dar sigur. Încă nu am aprofundat prea mult în CSS, dar poate ați observat că unele elemente au stiluri pe care nu le-am declarat în CSS. Este browserul care își impune propriile stiluri preferate acestor elemente. Din fericire, putem rescrie aceste stiluri destul de ușor, ceea ce vom face în continuare folosind o resetare CSS.

Fiecare browser are propriile stiluri implicite pentru diferite elemente. Modul în care Google Chrome afișează titlurile, paragrafele, listele și așa mai departe poate diferi de modul în care o face Internet Explorer. Pentru a asigura compatibilitatea între browsere, resetarea CSS a devenit utilizată pe scară largă.

O resetare CSS preia toate elementele HTML de bază cu un stil dat și oferă un stil consecvent în toate browserele. Aceste resetări implică, de obicei, eliminarea dimensiunilor, umpluturii, marginilor sau stilurilor suplimentare care scad aceste valori. Deoarece cascada CSS funcționează de sus în jos (veți afla despre asta în curând) - resetarea noastră ar trebui să fie în vârful stilului nostru. Acest lucru asigură că aceste stiluri sunt citite mai întâi și că toate browserele diferite funcționează dintr-un punct de referință comun.

Există o grămadă de resetări CSS diferite disponibile pentru utilizare, toate având propriile lor puncte forte. Unul dintre cele mai populare de la Eric Meyer, resetarea lui CSS este adaptată pentru a include noi elemente HTML5.

Dacă te simți puțin aventuros, există și Normalize.css creat de Nicholas Gallagher. Normalize.css nu se concentrează pe utilizarea unei resetari hard pentru toate elementele de bază, ci pe setarea stilurilor comune pentru acele elemente. Acest lucru necesită o înțelegere mai profundă a CSS, precum și cunoașterea a ceea ce ați dori să obțineți din stiluri.

După cum am menționat mai devreme, diferitele browsere redă elementele diferit. Este important să recunoaștem importanța compatibilității și a testării între browsere. Site-urile nu ar trebui să arate exact la fel în toate browserele, dar ar trebui să fie aproape. Ce browsere doriți să susțineți și în ce măsură va trebui să luați o decizie în funcție de ceea ce este mai bine pentru site-ul dvs.

Există mai multe lucruri la care trebuie să acordați atenție atunci când scrieți CSS. Vestea bună este că poți face totul și este nevoie doar de puțină răbdare pentru a le stăpâni.

Să ne întoarcem la locul unde am rămas ultima dată pe site-ul nostru de conferințe și să vedem cum putem adăuga niște CSS.

În dosarul nostru de stiluri-conferință, să creăm un nou folder numit assets. Aici vom stoca toate resursele pentru site-ul nostru web, cum ar fi stiluri, imagini, videoclipuri etc. Pentru stilurile noastre, să continuăm și să adăugăm un alt folder de foi de stil în folderul assets.
Folosind un editor de text, să creăm un nou fișier numit main.css și să-l salvăm în folderul foi de stil pe care tocmai l-am creat.

Prin vizualizarea fișierului index.html în browser putem observa că elementele și

Conține deja stilul implicit. În special, au o dimensiune unică a fontului și spațiu în jurul lor. Folosind resetarea lui Eric Meyer, putem atenua aceste stiluri, permițând fiecăruia să pornească de la aceeași bază. Pentru a face acest lucru, aruncați o privire pe site-ul său, copiați codul și lipiți-l în partea de sus a fișierului nostru main.css.

/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 Licență: niciuna (domeniu public) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronim, address, mare, cita, cod, del, dfn, em, img, ins, kbd, q, s, samp, mic, grevă, puternic, sub, sup, tt, var, b, u, i, centru, dl, dt, dd, ol, ul, li, fieldset, formular, etichetă, legendă, masă, legenda, tbody, tfoot, thead, tr, th, td, articol, deoparte, pânză, detalii, încorporare, figură, figcaption, subsol, antet, hgroup, meniu, navigare, ieșire, ruby, secțiune, rezumat, timp, marcaj, audio, video (margine: 0; umplutură: 0; chenar: 0; dimensiune font: 100%; font: moștenire; aliniere verticală: linie de bază ; ) /* Resetare rol de afișare HTML5 pentru browsere mai vechi */ articol, deoparte, detalii, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( ghilimele: niciunul; ) blockquote:fore, blockquote:after, q:fore, q:after (conținut: ""; conținut: none; ) tabel (border- colaps: colaps; distanță-limită: 0; )

Fișierul nostru main.css începe să prindă contur, așa că haideți să-l conectăm la fișierul index.html. Deschideți index.html într-un editor de text și adăugați un element la , imediat după element.
Deoarece indicăm spre stiluri prin element, adăugați un atribut rel cu foaia de stil value .

Vom include, de asemenea, un link către fișierul nostru main.css folosind atributul href. Amintiți-vă, fișierul nostru main.css este salvat în folderul foi de stil, care se află în folderul assets. Deci valoarea atributului href, care este calea către fișierul nostru main.css, ar trebui să fie assets/stylesheets/main.css.

Conferinta de stiluri

Este timpul să ne verificăm munca și să vedem cum funcționează împreună HTML și CSS. Deschiderea fișierului index.html (sau reîmprospătarea paginii dacă este deja deschisă) în browser ar trebui să arate un rezultat ușor diferit față de cel anterior.

Orez. 1.04. Site-ul nostru Styles Conference cu resetare CSS

Mai jos puteți vizualiza site-ul web Styles Conference în starea sa actuală, precum și descărca codul sursă curent al site-ului.

Deci, totul este bine! Am făcut câțiva pași mari în acest tutorial.

Gândiți-vă, acum cunoașteți elementele de bază ale HTML și CSS. Pe măsură ce continuăm și petreci mai mult timp scriind HTML și CSS, vei deveni mult mai confortabil să lucrezi cu aceste două limbi.

Pentru a recapitula, am acoperit următoarele:

Diferența dintre HTML și CSS.
Introducere în elementele, etichetele și atributele HTML.
Configurarea structurii primei pagini web.
Introducere în selectoare, proprietăți și valori CSS.
Lucrul cu selectoare CSS.
Pointer către CSS din HTML.
Importanta resetarii CSS.

Acum să aruncăm o privire mai atentă la HTML și să ne familiarizăm puțin cu semantica.

Termeni HTML obișnuiți prin Scripting Master
Termeni și definiții CSS prin Impressive Webs
Instrumente CSS: Resetați CSS prin Eric Meyer