Sarcini pentru stiluri html de lucru independent. Lucrări practice pe html și css

Lucrări practice pe HTML

Sarcina nr. 1.

Crearea unui fișier HTML de bază

1. Creați un folder personal în care veți salva toate fișierele site-ului dvs.

2. Faceți clic dreapta și selectați New - Blank File.

3. Introduceți numele fișierului rasp.html.

4. Faceți clic dreapta pe „Deschide cu” - „Mousepad”

5. Introduceți un document HTML simplu:

Fișier tutorial HTML

Programul cursurilor pentru miercuri.

6. Salvați documentul și închideți editorul.

7. Deschideți documentul rasp.html făcând dublu clic pe mouse și verificați rezultatul.

Sarcina nr. 2.

Controlul plasării textului pe ecran

1. Urmați pasul nr. 4 din sarcina anterioară, pentru fișierul rasp.html

2. Faceți modificări în fișierul rasp.html, plasând cuvinteleProgram, cursuri, pentru miercuri pe linii diferite.

Exemplu:

Programa

clase

miercuri.

Nu fi surprins că aspectul paginii tale Web nu s-a schimbat.

Sarcina nr. 3.

Controlul plasării textului pe ecran 2

1. Urmați pasul nr. 4 de la prima sarcină, pentru fișierul rasp.html

2. Efectuați modificări în fișierul rasp.html:

Exemplu:

Programa

clase

miercuri.

3. Salvați textul cu modificările dvs. în fișierul rasp.html.

4. Deschideți documentul rasp.html făcând dublu clic și verificați rezultatul.

Aspectul liniilor ar trebui să se schimbe. De ce se schimbă textul?

Sarcina nr. 4.

Formatarea textului

Etichetă de flux de rând
separă o linie de textul sau graficele ulterioare.

Eticheta de paragraf

de asemenea, separă linia, dar adaugă și o linie goală, care vizual

evidențiază un paragraf.

Fișier tutorial HTML

Programa

clase

Pentru miercuri.

3. Salvați textul cu modificările dvs. în fișierul rasp.html.

4. Deschideți documentul rasp.html făcând dublu clic și verificați rezultatul.

Sarcina nr. 5.

Formatarea textului

1. Efectuați modificări fișierului RASP.HTML

Fișier tutorial HTML

Programa

clase

miercuri.

3. Salvați textul cu modificările dvs. în fișierul rasp.html.

4. Deschideți documentul rasp.html făcând dublu clic și verificați rezultatul.

5. Răspundeți la întrebarea: ce etichete sunt folosite pentru a seta fonturi subliniate, cursive și aldine?

Sarcina nr. 6.

Setați dimensiunile caracterelor unei pagini Web

Există două moduri de a controla dimensiunea textului afișat de browser:

utilizarea stilurilor de titluri,

Setați dimensiunea fontului documentului principal sau dimensiunea actuală a fontului.

Se folosesc șase etichete de titlu: de la

inainte de

(eticheta este dublă, adică necesită închidere).

Fiecare etichetă are un stil specific atribuit de setările browserului.

1. Efectuați modificări fișierului RASP.HTML

Fișier tutorial HTML

Orarul cursurilor

miercuri.

3. Salvați textul cu modificările dvs. în fișierul rasp.html.

4. Deschideți documentul rasp.html făcând dublu clic și verificați rezultatul.

5. Înlocuiți eticheta h1 cu h2-h6 și vedeți cum se modifică dimensiunea titlului.

Sarcina nr. 7.

Setați dimensiunea curentă a fontului

Eticheta fontului vă permite să setați dimensiunea fontului curent în locuri individuale ale textului în

interval de la 1 la 7.

Fișier tutorial HTML

Orarul cursurilor

miercuri.

3. Salvați textul cu modificările dvs. în fișierul rasp.html.

4. Deschideți documentul rasp.html făcând dublu clic și verificați rezultatul.

5. Înlocuiți dimensiunea fontului cu altele și vedeți cum se modifică dimensiunea textului.

Sarcina nr. 8.

Setarea culorii fontului

Etichetă oferă posibilitatea de a controla caracterul, culoarea și dimensiunea textului.

Pentru a schimba culoarea fontului, o puteți folosi într-o etichetă atributul COLOR=”X”. În loc de

“X” trebuie să înlocuiți numele în limba engleză a culorii între ghilimele (“”) sau hexazecimalul acesteia

sens. Când specificați o culoare ca număr hexazecimal, trebuie să reprezentați acea culoare

descompus în trei componente: roșu (R – roșu), verde (G – verde), albastru (B – albastru),

fiecare dintre ele are o valoare de la 00 la FF. În acest caz avem de-a face cu așa-numitul

format RGB.

Exemple de scriere a textului în format RGB sunt prezentate în Tabelul 1:

1
. Efectuați modificări fișierului RASP.HTML

Fișier tutorial HTML

Programa

Cursuri pentru miercuri.

3. Salvați textul cu modificările dvs. în fișierul rasp.html.

4. Deschideți documentul rasp.html făcând dublu clic și verificați rezultatul.

5. Schimbați culoarea cu alta și vedeți rezultatul etichetei fontului.

Sarcina nr. 9.

Aliniați textul pe orizontală.

Alinierea textului determină aspectul său și orientarea marginilor paragrafului și poate fi la stânga, la dreapta, centrat sau justificat. Eticheta de paragraf este utilizată de obicei pentru a seta alinierea textului

1. Efectuați modificări în fișierul RASP.HTML

Fișier tutorial HTML

Programa

cursurile de miercuri.

3. Salvați textul cu modificările dvs. în fișierul rasp.html.

4. Deschideți documentul rasp.html făcând dublu clic și verificați rezultatul.

Realizați o pagină Web conform exemplului următor.

Culoarea textului este indicată între paranteze. Alinierea textului trebuie să fie prezentă.

Dați un nume fișieruluibiscuit.html

Reg.ru: domenii și găzduire

Cel mai mare registrator și furnizor de 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.

* Treceți mouse-ul peste pentru a întrerupe derularea.

Inapoi inainte

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! Nu uitați - trebuie să alegeți opțiunea pe care doriți să o priviți. Asta e tot.
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ă și când veți folosi liniuțe și liniuțe de subliniere în numele și ID-urile clasei. 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 funcționează și aceasta este, de asemenea, o idee grozavă pentru a menține codul consistent și consecvent în cadrul proiectelor.

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 inegală în diferite browsere prin setarea unor parametri clari pentru dimensiunile fonturilor, titluri, margini 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!

/****** continutul 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, este mai bine să grupați pur și simplu elementele. 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 un 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ă .dreaptaî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 dreapta. Imaginați-vă că brusc trebuie să aliniați 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 se mai așteptă 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 plutește la stânga iar și iar în desenele mele. Doar adaug cursuri .stângaȘi .dreapta 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 plutește la 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:

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

Antet

Ș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!

Sarcinile HTML Fundamentals sunt concepute pentru a consolida munca pe un set de următoarele subiecte: Structura HTML, comentarii în HTML, etichete principale, de bază Atributele HTML. .

Sarcini pentru imagini în HTML: inserarea unei imagini în HTML(cod imagine HTML), Dimensiunea imaginii HTML, alinierea imaginii...în HTML.

Atribuții avansate HTML și CSS

Atribuții HTML cu Emmet. Aspect rapid, comandă Emmet (așa-numitele Emmet cheat sheet). După finalizarea sarcinilor cu pluginul Emmet, viteza aspectului/dezvoltării dumneavoastră va crește semnificativ. .

Sarcini pe selectoare CSS. selectoare CSS: selectoare de clasă css, selectoare de atribute css, selectoare css adiacente, selectori de context css, selectoare de copii + în css, prioritatea selectorului. .

Loc de munca Poziționare CSS important pentru înțelegerea aspectului complex. Iată sarcini pe care trebuie să le înțelegeți și să lucrați cu: poziție absolută, poziție relativă, poziție fixăȘi poziție statică, Proprietăți CSS sus stânga jos dreapta. .

Sarcini de aspect de formulare

1. Creați un formular de autentificare pe site, la fel ca în Twitter Bootstrap (fără a utiliza acest cadru). De exemplu, ca în .
2. Creați un formular de dispecer pe site
3. Conectați pluginul jQuery pentru a selecta data/luna din câmp
4. Creați o casetă de selectare similară unei rețele sociale.
5. Creați un formular de înregistrare a vizitatorilor site-ului
6. Creați un formular similar cu cel care sortează produsele în Yandex.Market

Una dintre sarcinile unui designer de layout este să scrie cod pentru cross-browser. Cod care va permite paginilor să arate la fel sau cât mai asemănător în cel mai mare număr de browsere. .

Capacitățile CSS moderne vă permit să creați minunat și să lucrați cu fundalul colorându-l umplere cu gradient. Set mic Sarcini de animație CSS.

Sarcini pentru interogări media (site-uri mobile). Crearea unei versiuni mobile a site-ului este o parte importantă a abilităților de dezvoltator web. Temele sunt dedicate următoarelor subiecte: crearea site-ului mobil, verificarea versiunii mobile a site-ului. .

Sarcini privind aspectul PSD și cadrele CSS. Aspectul site-ului bazat aspect PSD- cea mai importantă parte a muncii unui web designer. În lecțiile HTML acoperim pașii de bază machete de la PSD la HTML. Sarcini .