Munca practica prin 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 Click dreapta mouse-ul și selectați „Nou” - „Fișier gol”.

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

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

5. Apelează html simplu document:

Instruire fișier HTML

Programul cursurilor pentru miercuri.

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

7. Deschideți documentul rasp.html dublu click mouse-ul ș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 de asta aspect pagina dvs. 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ă corespunde unui stil specific, specificate prin parametri 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 de text î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 înlocuit nume englezesc culorile între ghilimele (“”) sau hexazecimalul acestuia

sens. Când specificați culoarea număr hexazecimal trebuie să ne imaginăm această 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

cu atributul align, care determină metoda de aliniere. Atributul align poate lua următoarele valori: stânga, dreapta, centru, justificarealinierea la stânga, dreapta, centru și, respectiv, lățime.

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 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.

* Treceți cu 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) un design bun. acest proces). Mai jos sunt 30 recomandari bune, care vă va 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 există adesea dezacorduri între reprezentanții acestor grupuri! Doar rețineț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 lucrează, și asta buna idee, permițându-vă să mențineți uniformitatea și integritatea codului în diferite proiecte.

Nota
nu sunt de acord. cadre CSS - lucru de neînlocuit, 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

Are întotdeauna sens să structuram fișier CSS astfel încât să puteți găsi rapid partea 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ținutul 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ă un fișier CSS în paralel cu crearea Marcaj 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. Folosiț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, veți obține î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ă modificarea stilurilor.

15. Folosiți clase generice

Vei observa în curând 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)

În acest fel, nu trebuie să scrii în mod constant 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 realiza efectul de centrare pt elemente de 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, păstrează-l simplu:

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!