Lucrări practice despre css pentru studenți. Lucrări practice pe HTML

Dezvoltarea metodologică a lucrărilor practice în informatică pe temele „HTML Markup Language” și „Modern Web Technologies” (pentru elevii de gimnaziu).

Când desfășurați cursuri folosind aceste dezvoltări metodologice, pentru a crea fișiere HTML și CSS, se recomandă utilizarea unui editor de text obișnuit care acceptă evidențierea sintaxelor pentru limbajele HTML și CSS și, de asemenea, de preferință, include posibilitatea de a lucra cu mai multe fișiere în modul cu mai multe pagini. .

De exemplu, Notepad++ (notepad-plus-plus.org) este potrivit pentru Windows. În editorul de text Notepad++, pentru a încheia linii lungi, trebuie să selectați View -> Line Break din meniu. Notepad2 (flos-freeware.ch/notepad2.html) este, de asemenea, un editor de text foarte bun. Cu toate acestea, nu acceptă operarea cu mai multe pagini. Setarea întreruperilor de linie în el se face folosind comanda View -> Word Wrap.

1. Document HTML. Paragrafe, rupturi de rând, aliniere1 Structura documentului HTML

Codul sursă al unui document HTML este format din etichete și conținut.

Etichetele pot avea diverse atribute cu proprietăți specificate. În versiunile mai vechi ale limbii Atributele HTML utilizat pentru proiectarea conținutului: setarea dimensiunii și culorii fontului, alinierea textului, setarea indentărilor etc. În zilele noastre, conținutul unui document HTML este de obicei formatat folosind CSS.

Orice document HTML include întotdeauna containere html, head și body, care sunt imbricate unul în celălalt, după cum urmează:

Sarcina 1. Creați un fișier și dați-i structura prezentată mai sus. Salvează-l.

Containerul principal conține de obicei un container de titlu, al cărui conținut este afișat în titlul ferestrei documentului.

Sarcina 2. Adăugați un container de titlu la document:

CALCULATOR - calculator electronic

Salvați fișierul și deschideți-l în browser. Găsiți conținutul titlului pe care l-ați introdus.

Conținutul corpului este afișat în fereastra browserului.

Eticheta containerului este folosită pentru a marca paragrafele. O singură etichetă vă permite să accesați linie nouă fără a crea un nou paragraf, adică creează o întrerupere de linie.

Sarcina 3. Adăugați următorul conținut în containerul pentru corp:

Apariția computerelor personale la începutul anilor șaptezeci (în paralel cu evoluția treptată a computerelor mari) este acum privită ca o lovitură de stat revoluționară. Amploarea influenței sale asupra societății umane este comparată cu consecințele invenției tiparului.

Există deja milioane și miliarde de computere în lume.
Numărul lor continuă să crească constant!

Salva. Actualizează documentul în browser. Observați câte paragrafe vedeți unde este ruptura de linie.

2 Alinierea paragrafelor. Stil vechi

Alinierea paragrafelor este determinată de valorile stânga (stânga), dreapta (dreapta), centru (centru) și justificare (justificat). Aceste valori pot fi atribuite proprietății de aliniere, care este valabilă pentru multe etichete.

Deci, de exemplu, alinierea centrată a paragrafului poate fi setată astfel:

Sarcina 4. Pentru paragrafele create mai devreme, setați alinierea să fie justificată (pentru primul paragraf) și aliniată la dreapta (pentru al doilea).

1.1. Creați pe server local Xampp în folderul htdocs există un test folder test, în el există css, imagini și foldere de pagini, precum și o pagină principală goală index.html a site-ului nostru de testare. Apoi, în folderul pagini, creați o pagină web goală, page_1.html, iar în folderul css, două fișiere css goale: styles_1.css și styles_2.css. Nu ștergeți folderul de testare în viitor, vom efectua toate exercițiile din acesta. În documentele html, nu uitați să specificați codarea utf-8 și titlul paginii „titlu”. Pentru acces rapid la

pagina de start

, creați un marcaj pentru acesta în browser. Calea adresei către pagină ar trebui să arate ca http://localhost/test/index.html.

Arată soluția.

Rezolvarea problemei nr. 1.1

1.2.

Recreează codul pentru pagina web prezentată în figură. Utilizați foaia de stil internă, selectoarele de elemente p și span, proprietățile CSS de culoare și lățime.

Setați lățimea paragrafului la 300 px. Folosiți culori roșu și albastru.

Arată soluția.

Condiția sarcinii nr. 1.2

Sarcini CSS p( culoare: roșu; lățime: 300px; ) span( culoare: albastru)

Rezolvarea problemei nr. 1.2

Arată soluția.

1.3.

1.5.

Utilizați condiția celei de-a doua probleme, dar plasați regula paragraf în fișierul extern styles_1.css și regula pentru elementul „span” în fișierul extern styles_2.css . Conectați unul dintre aceste fișiere folosind elementul de serviciu „link”, iar al doilea folosind proprietatea @import, plasând regula în elementul de serviciu „style”. În toate cele patru sarcini, rezultatul ar trebui să fie același!

Arată soluția.

Arată soluția.

Sarcini CSS @import url ("http://localhost/test/css/styles_1.css");

Rezolvarea problemei nr. 1.5

1.6.
Mai jos este codul paginii html, precum și aspectul paginii atunci când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat.

Utilizați selectorii de ID, clasă și atribute.

Arată soluția.

Sarcini CSS

„Spanie” albastră.

„span” verde.

Codul paginii pentru sarcina nr. 1.6

Apariția necesară a paginii în sarcina nr. 1.6
1.6.

#p_1( culoare: roșu; lățime: 300px; ) .s_1( culoare: albastru; ) span( culoare: verde; )

Rezolvarea problemei nr. 1.6

1.7.

Mai jos este codul paginii html, precum și aspectul paginii atunci când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat.

Este permisă utilizarea numai a selectoarelor contextuale, secundare și adiacente în regulile CSS.

Apariția necesară a paginii în sarcina nr. 1.6
Arată soluția.

CSS provocări Orange „em”

Prima linie roșie a paragrafului.

Codul paginii pentru sarcina nr. 1.7

Apariția necesară a paginii în sarcina nr. 1.7

Rezolvarea problemei nr. 1.7

Determinăm specificul și comparăm. p em(...) em.m_cl(...), deoarece (1,0,0)>(0,1,1); div p#my_id span(...) div.my_class p.red_color span:hover(...) > div p+div p.green_color span(...), deoarece (0,4,4)>(0,2,5).

Rezolvarea problemei nr. 1.9

§2. Proprietăți CSS pentru text, font, liste, tabele și formulare

2.1.

Rezolvarea problemei nr. 1.5

Mai jos este codul paginii html, precum și aspectul paginii atunci când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat.

Setați lățimea (lățimea) paragrafelor la 500px, fundal (culoarea fundalului), respectiv, setați la galben și violet (violet), distanța dintre cuvinte, respectiv, 3px și respectiv 12px, distanța dintre literele individuale - 1px și 2px, înălțimea liniei - 1.1em și 1.6em , indentarea primului rând - 1% și 3% . În al doilea paragraf, textul ar trebui să fie aliniat la dreapta. Nu uitați să tăiați (subliniați) rândurile corespunzătoare. Comparați rezultatele formatării ambelor paragrafe.

Arată soluția.

Prima teză a paragrafului.

Prima teză a paragrafului.

A doua teză mai lungă a paragrafului.

A treia și ultima teză a paragrafului.

Rezolvarea problemei nr. 1.5

Setați lățimea (lățimea) paragrafelor la 500px, fundal (culoarea fundalului), respectiv, setați la galben și violet (violet), distanța dintre cuvinte, respectiv, 3px și respectiv 12px, distanța dintre literele individuale - 1px și 2px, înălțimea liniei - 1.1em și 1.6em , indentarea primului rând - 1% și 3% . În al doilea paragraf, textul ar trebui să fie aliniat la dreapta. Nu uitați să tăiați (subliniați) rândurile corespunzătoare. Comparați rezultatele formatării ambelor paragrafe.

Setați lățimea (lățimea) paragrafelor la 500px, fundal (culoarea fundalului), respectiv, setați la galben și violet (violet), distanța dintre cuvinte, respectiv, 3px și respectiv 12px, distanța dintre literele individuale - 1px și 2px, înălțimea liniei - 1.1em și 1.6em , indentarea primului rând - 1% și 3% . În al doilea paragraf, textul ar trebui să fie aliniat la dreapta. Nu uitați să tăiați (subliniați) rândurile corespunzătoare. Comparați rezultatele formatării ambelor paragrafe.

Codul paginii pentru sarcina nr. 2.1

Apariția necesară a paginii în sarcina nr. 2.1

P_1( lățime: 500px; culoarea fundal: galben; font-family: arial; font-size: 1em; ) #p_2( font-variant: small-caps; ) .p_3( lățime: 500px; fundal-culoare: violet; font-family: "time new roman"; dimensiunea fontului: 1em: bold ) #p_4( font-style: italic; )

Soluția problemei nr. 2.2

2.3.

Rezolvarea problemei nr. 1.5

• Mai jos este codul paginii html, precum și aspectul paginii atunci când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat.

Setați lățimea (lățimea) listelor la 500px, fundal (culoarea fundalului), respectiv, setați la galben și violet (violet).

Utilizați proprietățile list-style-type și list-style-position acolo unde este necesar. Comparați rezultatele formatării ambelor liste.

Arată soluția.

Folosim tipul de marcator zecimal.

Punem marcatori în afara listei.

Folosim tipul marker pătrat.

Codul paginii pentru sarcina nr. 2.3

Rezolvarea problemei nr. 1.5

Apariția necesară a paginii în sarcina nr. 2.3

List_1 ( lățime: 500 px; culoarea fundal: galben; tip list-style: zecimal; list-style-position: exterior; ) .list_2( width: 500px; culoare fundal: violet; list-style-type: pătrat; list-style-position: interior;	Rezolvarea problemei nr. 2.3
2.4.	Mai jos este codul paginii html, precum și aspectul paginii atunci când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat.

Utilizați proprietățile caption-side , border-collapse border-spacing , empty-cells . Comparați rezultatul formatării ambelor tabele.

List_1 ( lățime: 500 px; culoarea fundal: galben; tip list-style: zecimal; list-style-position: exterior; ) .list_2( width: 500px; culoare fundal: violet; list-style-type: pătrat; list-style-position: interior;	Rezolvarea problemei nr. 2.3
	Mai jos este codul paginii html, precum și aspectul paginii atunci când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat.

Arată soluția.

Tabelul nr. 1

Celula 1.1

Celula 1.2

Celula 2.1

Celula 2.2

Rezolvarea problemei nr. 1.5

Lățimea paragrafului este de 400 px, înălțimea este de 10% din înălțimea zonei de vizualizare a ferestrei browserului.

Lățimea paragrafului va fi de 400 px, deoarece... lățimea este mai mică decât lățimea minimă, iar înălțimea este de 100 pixeli, deoarece înălțimea depășește înălțimea maximă.

Codul paginii pentru sarcina nr. 3.1

Apariția necesară a paginii în sarcina nr. 3.1

P_1(culoare fundal: galben; lățime: 400px; înălțime: 10vh; ) .p_2(culoare fundal: violet; lățime minimă: 400px; înălțime maximă: 100px; lățime: 300px; înălțime: 200px; )

Soluția problemei nr. 3.1

3.2.

În condiția sarcinii 3.1, este prezentat codul paginii HTML, iar mai jos este aspectul paginii când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat.

Profitați de rezultatul Problemei 3.1 adăugând proprietăți suplimentare la foaia de stil care stabilesc limitele de paragraf adecvate: chenar , border-top , border-bottom . Setați lățimea tuturor chenarelor la 4px.

Arată soluția.

Apariția necesară a paginii în sarcina nr. 3.2

P_1( culoarea fundalului: galben; lățime: 400 px; înălțime: 10vh; chenar: roșu solid 4px; marginea de sus: albastru punctat; marginea de jos: albastru punctat; ) .p_2( culoarea fundalului: violet; lățime minimă: 400px; înălțime maximă: 100px;

Soluția problemei nr. 3.2

3.3.

3.4. În condiția sarcinii 3.1, este prezentat codul paginii HTML, iar mai jos este aspectul paginii când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat. Profitați de rezultatele sarcinilor 3.1, 3.2 și 3.3 adăugând proprietăți suplimentare la foaia de stil care stabilesc indentările interne și externe ale paragrafelor: padding, padding-left, margin, margin-top. Setați umplutura în ambele paragrafe la 0.5em, apoi redefiniți-le la 0.8em. Setați marja la 30px, dar în al doilea paragraf

marginea

în partea de sus trece la 50px. Comparați rezultatele tuturor celor patru probleme.

Arată soluția.

Apariția necesară a paginii în sarcina nr. 3.4

P_1( culoarea fundalului: galben; lățime: 400 px; înălțime: 10vh; chenar: roșu solid 4px; chenar-sus: albastru punctat; chenar-jos: albastru punctat; chenar-rază: 1em; chenar-jos-dreapta-rază: 2em; chenar-jos-stânga-rază: 2em; padding-left: 0.8px; outline-offset: 2px; padding-stânga: 0,8px;

Rezolvarea problemei nr. 1.5

Soluția problemei nr. 3.4

Lățimea paragrafului trebuie să fie de 300 px, fundalul trebuie să fie violet.

Imaginea nu trebuie repetată, dimensiunile trebuie să fie de 20% din lățimea și 40% din înălțimea paragrafului. Poziția de pornire ar trebui să fie determinată de coordonatele x=15px și y=15px. Selectați doar zona de conținut a paragrafului pentru fundal.

Codul paginii pentru sarcina nr. 4.1

Apariția necesară a paginii în sarcina nr. 4.1

Background_1(culoare: roșu; culoare de fundal: galben; ) .background_2( culoare de fundal: violet; imagine de fundal: url("http://localhost/test/images/cabinet.png"); background-repeat: nu -repeat; fundal-poziție: 15px 15px; fundal-clip: .border_1 (padding: 15px; width: 2px green; )

Rezolvarea problemei nr. 4.1 4.2. Mai jos este codul paginii html, precum și aspectul paginii atunci când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat.

Rezolvarea problemei nr. 1.5

Textul primului paragraf ar trebui să fie negru, iar fundalul trebuie să fie un gradient liniar de la roșu la

alb

. Lățimea paragrafului trebuie să fie de 300 px și înălțimea sa de 150 px.

Lățimea celui de-al doilea paragraf ar trebui să fie de 300 px și înălțimea sa de 150 px.

Fundalul ar trebui să fie un gradient radial de la verde la alb. Elipsa gradientului ar trebui să aibă raze de 250px și 280px, iar centrul ar trebui să fie situat în punctul cu coordonatele x =100px și y =180px.

Arată soluția.

Textul acestui paragraf ar trebui să fie negru, iar fundalul trebuie să fie un gradient liniar de la roșu la alb. Lățimea paragrafului trebuie să fie de 300 px și înălțimea sa de 150 px.

Lățimea paragrafului trebuie să fie de 300 px și înălțimea sa de 150 px.

Fundalul ar trebui să fie un gradient radial de la verde la alb. Elipsa gradientului ar trebui să aibă raze de 250px și 280px, iar centrul ar trebui să fie situat în punctul cu coordonatele x=100px și y=180px.

Background_1( padding: 0px; lățime: 450px; înălțime: 100px; chenar: solid 3px red; animation-name: example_1; animation-delay: 1s; animation-duration: 4s; animation-iteration-count: infinit; animation-direction: inversă; animație-funcție: ease-in; ) )

Cod extern pentru foaia de stil pentru sarcina nr. 4.3

4.4.

Mai jos este codul pentru pagina html, precum și codul pentru foaia de stil externă styles_2.css. Introduceți-le în Notepad++ și experimentați prin modificarea valorilor proprietăților de tranzit.

Crearea efectelor de tranziție

Codul paginii HTML pentru sarcina nr. 4.4

Background_1( umplutură: 10px; lățime: 100px; înălțime: 100px; chenar: albastru solid 3px; culoarea fundalului: #ff0000; proprietatea tranziției: lățime, culoarea fundalului; întârzierea tranziției: 0,2s; durata tranziției: 2s; funcția de sincronizare a tranziției: ease-in ) p:hover (cursor: indicator; culoare de fundal: #0000ff; lățime: 450px; )

Cod extern pentru foaia de stil pentru sarcina nr. 4.4

§5. Afișarea elementelor dintr-un document

Rezolvarea problemei nr. 1.5

5.1.

Mai jos este codul pentru pagina html, precum și codul pentru foaia de stil externă styles_2.css. Tastați-le în Notepad++.

Observați cum se comportă paragrafele în timp ce derulați pagina și cum se modifică aspectul elementului „span” atunci când treceți cu mouse-ul peste el și, în consecință, valoarea proprietății de afișare aplicată acestuia se modifică.

Schimbarea afișajului

poziție: fixă;

poziție: absolută;

Codul paginii HTML pentru sarcina nr. 5.1

Sarcini CSS Pentru div-ul principal, poziționarea fixă ​​este setată, offset-ul de sus este de 30px, offset-ul din stânga este de 35px, lățimea div este de 300px, înălțimea div este de 400px, umplutura internă este de 15px.

div_2 Pentru al doilea div, lățimea este de 70px, înălțimea este de 50px, gradient (35px 35px la 10px 10px, #00ffff, #ffffff), umplutura este de 5px, lățimea chenarului este de 2px.

div_3 Pentru al treilea div, lățimea este de 70px, înălțimea este de 50px, gradient (45deg, #0000ff, #ffffff), padding este de 5px, lățimea marginii este de 2px 0,3.

Codul paginii pentru sarcina nr. 5.2

Apariția necesară a paginii în sarcina nr. 5.2

Div_1( umplutură: 15px; lățime: 300px; înălțime: 400px; chenar: punctat 5px #00ff00; poziție: fix; sus: 30px; stânga: 35px; ) .div_3:hover( cursor: pointer; opacitate: 0,3; ) .div_2 ( umplutură: 5px; lățime: 70px; înălțime: 50px; chenar: portocaliu solid 2px; fundal: radial-gradient(35px 35px la 10px 10px, #00ffff, #ffffff); float: stânga; ) .div_3( padding: 5px; lățime: 70px; înălțime: 2px cu puncte roșu: liniar-gradient (45deg, #ffffff);

Rezolvarea problemei nr. 5.2

5.3.

Mai jos este codul paginii html, precum și aspectul paginii atunci când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat. Caracteristicile necesare ale elementelor sunt indicate în desenele în sine. Arată soluția.

Sarcini CSS Pentru div-ul principal instalat

poziționare absolută

, offset de sus - 30px, stânga - 35px, lățimea div - 500px, înălțimea div - 200px, umplutură - 15px.

Pentru al doilea div, lățimea este de 200 px, înălțimea este de 100 px, lățimea chenarului este de 2 px. este 2px. Plutește pe dreapta. preaplin: automat

Codul paginii pentru sarcina nr. 5.3

Apariția necesară a paginii în sarcina nr. 5.3

6.1.

Mai jos este codul paginii html, precum și aspectul paginii atunci când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat.
Pentru a crea contoare pentru corpul documentului și elementul h2, utilizați proprietatea de resetare a contorului și pentru a insera valori de contor folosind proprietățile de conținut și de contor-increment. Arată soluția. Provocări CSS Introducere în HTML Ce este HTML?

Afișarea în browser a unui document web.

Conceptul de etichetă HTML și sintaxa acesteia.

Blocul de formatare a textului și

elemente inline

.

Împărțirea textului în paragrafe. Aplicarea antetelor.

Codul paginii pentru sarcina nr. 6.1

Apariția necesară a paginii în sarcina nr. 6.1

Body( counter-reset: parag_1; /* Creați un contor pentru corpul documentului */ ) h2( counter-reset: parag_2; /* Creați un contor pentru antetul „h2” */ ) /* Numărați toate „h2 „ în elementul „corp” */ /* Introduceți conținut înainte de fiecare „h2”: linie+valoare curentă contor+linie */ h2:înainte( counter-increment: parag_1 1; conținut: „§” counter(parag_1) ". "; ) /* Numărați în elementul „h2” toate „h3” */ /* Introduceți conținut înainte de fiecare „h3”: valoarea contorului curent parag_1+line+valoarea contorului curent parag_2+line */ h3:before( counter-increment: parag_2 1; counter( parag_1) "."

Soluția problemei nr. 6.1 §7. Dispunerea practică a elementelor site-ului în HTML și CSS 7.1.1 Descărcați codul tutorial pentru cadrul adaptiv al paginii, utilizați comentariile pentru a-l studia și apoi proiectați-l singur.

7.2.3 Tutorialul descărcabil arată cum să creați un buton „Înapoi la început” pe partea laterală a site-ului care apare după derularea paginii cu un număr specificat, de exemplu, pixeli. Sunt puține comentarii, dar nu există prea mult cod, așa că înțelegerea nu va fi dificilă. Studiază exemplul și apoi creează-l pe al tău.

7.3.1 Creați meniu orizontal prezentată în figură. Utilizați o listă pentru a face acest lucru, plasând legături în elementele listei. Pentru a face elementele să apară ca o linie, convertiți-le în elemente inline. Când treci mouse-ul peste elemente de meniu, ar trebui să-și schimbe culoarea în negru. Puteți descărca soluția.

Convertiți meniul în vertical. Pentru a elimina numerele de articole, utilizați proprietatea corespunzătoare pentru marcatorii de listă (consultați referința CSS).

Apariția necesară a meniului de sarcini nr. 7.3.1

7.3.2 Studiați următorul cod de meniu vertical și apoi introduceți-l singur. 7.3.3 Studiați următorul cod vertical vertical meniu cu mai multe niveluri

, apoi tastați-l singur.

7.3.4 Studiați următorul cod pentru un meniu vertical neted orizontal, apoi introduceți-l singur.

Realizarea site-ului educațional nr. 1

7.4.1 În primul rând, căutați prin paginile site-ului educațional, descărcați și studiați cu atenție codul acestuia, apoi proiectați singur site-ul (fără comentarii, doar cod).

Aspectul site-ului web educațional nr. 2 7.5.1 Pentru practică suplimentară în aspectul site-ului, încă unul studiu de caz site-ul, descărcați și utilizați comentariile pentru a-i studia codul și apoi, folosiți aspectul terminat
și șabloane grafice, proiectați singur site-ul. Foaie de stil pentru rezoluții înalte
încercați să o faceți singur. Dacă lucrați pe un laptop, atunci pentru a simula rezoluții mai mari, modificați rezoluțiile în interogările media de la 1366px, de exemplu, la 1266px, astfel încât foaia de stil pentru rezoluțiile de ecran mari să funcționeze. Când creați o foaie de stil, utilizați un factor de dimensiune de 1,3. Și apoi uitați-vă la rezultatul afișajului în browser și ajustați.

Dimensiunile imaginilor pot fi modificate fie într-un editor grafic, fie extinse folosind proprietatea CSS corespunzătoare (vezi exemplul și referința).

Dimensiunile imaginilor pot fi modificate fie într-un editor grafic, fie extinse folosind proprietatea CSS corespunzătoare (vezi exemplul și referința).

Dimensiunile imaginilor pot fi modificate fie într-un editor grafic, fie extinse folosind proprietatea CSS corespunzătoare (vezi exemplul și referința).

Dimensiunile imaginilor pot fi modificate fie într-un editor grafic, fie extinse folosind proprietatea CSS corespunzătoare (vezi exemplul și referința).

Dimensiunile imaginilor pot fi modificate fie într-un editor grafic, fie extinse folosind proprietatea CSS corespunzătoare (vezi exemplul și referința).

Dimensiunile imaginilor pot fi modificate fie într-un editor grafic, fie extinse folosind proprietatea CSS corespunzătoare (vezi exemplul și referința).

Doar pentru abonați

Reg.ru: domenii și găzduire

Cel mai mare furnizor de înregistrare și găzduire din Rusia.

Peste 2 milioane de nume de domenii în serviciu.

Promovare, corespondență de domeniu, soluții de afaceri.

Peste 700 de mii de clienți din întreaga lume și-au făcut deja alegerea.

Înapoi Înainte

30 de bune practici CSS pentru începători

CSS este un limbaj folosit la un moment dat de aproape toți dezvoltatorii. Deși uneori îl considerăm de la sine înțeles, este totuși un instrument puternic și are multe aplicații nuanțate care pot ajuta (sau împiedica) dezvoltarea unui design de calitate. Mai jos sunt 30 de recomandări bune care vă vor ajuta să scrieți cod corect și alfabetizat, evitând multe greșeli comune.

1. Faceți-l ușor de citit

Lizibilitatea ușoară a fișierului dvs. CSS este foarte importantă, deși mulți oameni subestimează acest punct. Lizibilitatea bună vă permite să vă simplificați munca cu ea în viitor, cu sprijinul site-ului, deoarece veți găsi elementele de care aveți nevoie de multe ori mai repede. De asemenea, amintiți-vă că este posibil ca fișierul dvs. să fie revizuit și corectat de altcineva.

Nota
Când scriu fișiere CSS, majoritatea dezvoltatorilor se împart în două grupuri, două extreme.

Grupa 1: Toate într-o singură linie

SomeDiv ( fundal: roșu; umplutură: 2em; chenar: 1px negru solid; )

Grupa 2: Fiecare stil are o linie separată

SomeDiv ( fundal: roșu; umplutură: 2em; chenar: 1px negru solid; )

De fapt, ambele practici sunt destul de bune, deși dezacordurile între reprezentanții acestor grupuri nu sunt neobișnuite! Doar rețineți - trebuie să alegeți opțiunea pe care doriți să o priviți. Asta este.
Nota

2. Fă-l întreg

Pe lângă faptul că vă faceți codul mai lizibil, faceți-l mai consistent. Ar trebui să începeți să vă dezvoltați propriul „sub-limbaj” CSS, care vă va permite să respectați un anumit stil de denumire. Există un anumit număr de clase pe care le creez aproape întotdeauna și le dau aceleași nume de fiecare dată. De exemplu, folosesc .legendă-dreapta pentru a alinia imaginile la dreapta.

Gândiți-vă dacă veți folosi liniuțe și subliniazăîn numele claselor și ID-urile tale și în ce cazuri ai face acest lucru. Când începi să-ți creezi propriile standarde CSS, devii mult mai aproape de a fi un profesionist CSS.

3. Începeți cu un cadru

Mulți oameni cred că nu ar trebui să folosiți cadre CSS, dar eu cred că dacă cineva și-a luat timp și a făcut un program care poate accelera procesul de dezvoltare, atunci de ce să reinventeze roata? Știu că cadrele nu ar trebui folosite peste tot, dar în multe cazuri utilizarea lor este destul de justificată.

Mulți designeri își creează propriile cadre pe măsură ce lucrează, și asta mare idee, permițându-vă să mențineți uniformitatea și integritatea codului în diferite proiecte.

Nota
nu sunt de acord. Framework-urile CSS sunt un lucru indispensabil, dar doar pentru câțiva, pentru cei care știu să le folosească bine.

„Este mai puțin o chestiune de a reinventa roata și mai mult de a înțelege cum funcționează.”

Dacă abia începi să înțelegi Cascading Style Sheets, aș recomanda să stai departe de diverse cadre timp de cel puțin un an. În caz contrar, pur și simplu te vei încurca. Învață mai întâi CSS, apoi optimizează-ți munca cu acest limbaj.
Nota

4. Folosiți zero

Majoritatea cadrelor CSS au un anulator de stil încorporat, dar dacă nu intenționați să îl utilizați, puteți recurge la alte anulatoare. Resetarea stilurilor vă permite să evitați multe probleme cu afișarea neuniformă browsere diferite, stabilirea unor parametri clari pentru dimensiunile fontului, titlurile, marginile externe și interne etc. Această „reducere la zero” vă permite să obțineți aceeași afișare în toate browserele.

Iată link-uri către unele dintre cele mai populare resetări: MeyerWeb, resetarea dezvoltatorului Yahoo. Alternativ, puteți veni cu propriul „anulator”, folosind următoarele ca bază.

5. Structurați fișierele de stil de sus în jos

Este întotdeauna logic să structurați fișierul CSS, astfel încât să puteți găsi rapid fragmentul de cod de care aveți nevoie. Vă recomand să utilizați o abordare de sus în jos, care este să vă construiți foaia de stil în ordinea în care stilurile sunt aplicate pe pagină. De exemplu:

1. Clase generale (corp, a, p, h1 etc.) 2. #header 3. #nav-menu 4. #main-content

Nu uitați să adăugați comentarii la fiecare secțiune!

/****** conținut principal *********/ stilurile merg aici... /****** subsol *********/ stilurile merg aici...

6. Elemente de grup

Adesea, elementele pot avea stiluri comune, suprapuse. În loc să rescrieți codul existent, grupați pur și simplu elementele împreună. De exemplu, titlurile dvs h1, h2Şi h3 poate avea același font și culoare:

H1, h2, h3 (familie de font: tahoma, culoare: #333)

7. Creați mai întâi marcaj HTML

Mulți dezvoltatori creează fișierul CSS în paralel cu crearea de markup HTML. Acest lucru pare logic, dar puteți economisi o mulțime de timp dacă înțelegeți mai întâi HTML și stilurile în al doilea rând. Această abordare vă permite să vă gândiți la pagină ca un întreg, să vă gândiți unde să aplicați ce stiluri și să ajungeți la un fișier de stil de sus în jos mai coeziv.

8. Aplicați mai multe clase unui element dacă este necesar

Uneori este mai bine să aplicați mai multe clase unui element deodată. Să presupunem că aveți un container div pe cine vrei sa intrebi plutire: dreapta, și aveți deja o clasă .corectîn fișierul dvs. de stiluri, care aliniază totul corect. Puteți adăuga pur și simplu o altă clasă la containerul dvs div:

Puteți adăuga câte clase aveți nevoie, separându-le cu spații.

Nota
Fii foarte atent când folosești nume precum stângaŞi corect. Imaginați-vă că trebuie să aliniați brusc un container la stânga. În acest caz, trebuie să reveniți în codul HTML și să schimbați numele clasei - totul pentru a schimba aspectul vizual al paginii. Acest lucru este nesemantic. Rețineți: HTML este pentru marcaj, CSS este pentru prezentare vizuală.

Dacă aveți nevoie de modificări HTML pentru a schimba aspectul paginii, ați făcut ceva greșit!

9. Utilizați eticheta Doctype corectă

Elementele aparținând ambelor tipuri includ:

Span, a, strong, em, img, br, input, abbr, acronim

Elementele bloc includ:

Div, h1...h6, p, ul, li, table, blockquote, pre, form

13. Aranjați proprietățile în ordine alfabetică

Utilizarea unui astfel de sistem pentru aranjarea proprietăților vă va permite să economisiți mult timp atunci când căutați proprietatea dorită.

#bumbac de zahăr (culoare: #fff; float: stânga; greutate font: înălțime: 200px; margine: 0; umplutură: 0; lățime: 150px; )

Nota
Eh.., sacrificați viteza pentru o lizibilitate ușor îmbunătățită.. Vedeți singur..
Nota

14. Folosiți compresoare CSS

Compresoarele CSS vă ajută să reduceți semnificativ dimensiunea fișierului foaia de stil prin eliminarea întreruperilor de linie inutile și combinând elemente. Toate acestea permit site-ului dvs. să se încarce mai repede. CSS Optimizer și CSS Compressor sunt două servicii online grozave pentru realizarea unor astfel de sarcini.

Odată cu reducerea dimensiunii fișierului, obțineți în mod natural o deteriorare semnificativă a lizibilității acestuia, așa că utilizați astfel de servicii atunci când nu mai este de așteptat să faceți modificări la stiluri.

15. Folosiți clase generice

În curând vei observa că există stiluri pe care le folosești din nou și din nou. În loc să adăugați acest stil la fiecare ID, puteți crea clase generice și le puteți adăuga la ID-urile altor clase CSS (vezi recomandarea #8 din acest articol).

De exemplu, am observat că folosesc plutire: dreaptaŞi float:stânga iar și iar în desenele mele. Doar adaug cursuri .stângaŞi .corect la fișierul meu de stil și aplicați-l elementelor.

Stânga (float:left) .right (float:right) ...

Astfel nu trebuie să scrii tot timpul float:stânga pentru toate elementele cărora ar trebui aplicată această proprietate.

16. Folosiți „Marja: 0 auto” pentru a centra designul

Mulți oameni noi în CSS nu înțeleg de ce nu pot folosi pur și simplu plutitor: centru pentru a obține un efect de centrare pentru elementele bloc. Dacă ar fi atât de simplu! Din păcate, trebuie să faci așa:

Marja: 0 auto; /* 0 - pentru sus și jos; automat - pentru stânga și dreapta */

17. Nu pune totul într-un DIV

Este adesea tentant să faci ceva de genul:

Textul titlului

Aceasta poate părea o soluție destul de bună, dar va începe să vă aglomereze fișierul de stiluri. În schimb, simplifică:

Textul antetului

Și deja pentru etichetă h1 puteți seta orice design de care aveți nevoie.

18. Utilizați Firebug

Ți-a plăcut materialul și vrei să-mi mulțumești?
Distribuie doar prietenilor și colegilor tăi!

Acest articol nu este destinat să fie un ghid cuprinzător pentru limbajul de marcare a documentelor HTML. Acesta acoperă elementele de bază ale HTML - principii de bază, concepte și definiții ale acestei tehnologii, stăpânind pe care, puteți trece cu ușurință în studiul codării HTML.

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 că ați lucrat vreodată într-un editor de documente Word sau similar. aplicații de birou? Probabil știi asta acest tip editorii au capacități bogate pentru editarea textului, aranjarea elementelor, inserarea imaginilor 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 în acest caz,- în editorul 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 lucru 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 aici, iar documentul este pagina HTML 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 - 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 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 iei. 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 multe cod suplimentar, sunt foarte multe erori din punct de vedere semantic. Acum, desigur, nu există probleme cu internet de mare viteză conexiunea și diferența de dimensiune a paginii de 400 kb și 100 kb nu este semnificativă pentru viteză, totuși, codul HTML optimizat și scris corect elimină multe probleme și oferă multe avantaje și anume:

• Codul HTML competent are un efect pozitiv asupra optimizarea motoarelor de căutare, viteza de scanare robot de căutare site-ul. Kiloocteții de cod generați de vuzivuga 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 trebuie folosite, de exemplu, liste
  , editorul va genera o altă etichetă de care nu avem nevoie. Depinde, desigur, de editor, dar aici ne referim soluții cuprinzătoare pentru crearea de site-uri web, nu editare ușoară text într-o zonă de text utilizând WYSIWYG.
  • 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ă. Un editor este un program și nu poate ști exact ce vrei să obții ca rezultat, generează tone de cod ținând cont de tot opțiuni posibile comportamentul documentului în browser.
  • De obicei, editori pentru design vizual Codul HTML devine rapid învechit. Ș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ță, ele nu pot genera corect și cod modern, care ar implica noi funcții ș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 editare vizuală HTML nu a fost încă inventat ș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 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ă codul document HTML O vom scrie de mână, adică o vom tasta. Aspect HTML - proces Creare HTML document. În oamenii obișnuiți și cercurile informate, este doar aspect. Orice document are o structură și anumite reguli 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ă cerute în document.

  Tag - titlu document Titlu

  Titlul este eticheta necesară, care conține metainformații textuale care sunt afișate în browser sau în titlul filei. Eticheta trebuie să fie în . De asemenea, se utilizează conținutul acestei etichete 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

  Se conectează la document CSS Fișier de stil HTML.

  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.

  Etichetă

  nu are o etichetă de închidere. Eticheta conține cod sau un link către Fișier JavaScript

  și este folosit cel mai des în interiorul etichetei, deși instrumentul de optimizare a vitezei de încărcare a paginii de la Google recomandă utilizarea acestei etichete la sfârșitul documentului, î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 trup Aici încep toate lucrurile cele mai interesante și tangibile vizual. Aspect HTML

  document. index.html 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

  în browser pentru a vedea clar ce facem în editor. Eticheta poate conține orice Etichete HTML

  necesare pregătirii documentului și asigurării funcționalității (formularului) acestuia. 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 îndrăzneț (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, cum ar fi titlul principal Aspect HTML 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: Element lista cu marcatori 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: Aspect Marcajul 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 în toate imaginile text alternativ- 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. Exemplu - formă simplă trimiterea unui mesaj in care utilizatorul site-ului isi indica numele, E-mail si ceva text: Text mesaj
  	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ă din Marcaj HTML pagini. 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ă se încarcă pagina 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 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 cu editor de text Text sublim;
• 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. .

Ne vedem din nou, prieteni!