17.10.2015

Nu încă

Salutare tuturor!
Continuăm să studiem fundamentele HTML.
În această lecție, voi spune și arăta exemplele, cum se face fundalul De la culori sau imagini din pagina HTML.
Totul este destul de simplu!
Să începem din culoare!
Cred că nu ați ratat, unde mi-am spus cum să schimbe culoarea textului și la sfârșitul articolului a dat coduri de diferite culori și nuanțe. De ce ți-am amintit de această lecție? Da, pentru că există o masă cu coduri de culori gata făcute, luați-le și practicați imediat în această lecție.
Deci, cum să faci un fundal de culoare în HTML ...

Fundal de culoare în HTML

Culoarea fundalului în documentul HTML implicit. Cum să întrebați culoarea dacă doriți?
Acest lucru ne va ajuta atributul "bgcolor". Pentru a picta fundalul din spate, scrieți acest atribut la eticheta "corpului":

Sau așa:

Iată codul HTML complet:

Textul paginii va fi verde și fundal negru.

Rezultatul va fi acesta:

Dacă doriți să faceți un fundal din imagine, apoi la eticheta "corpului", înregistrăm atributul "Bachground":

Completați orice imagine în care pagina dvs. web mințește (pe exemplu, pagina este numită "fon" cu extensia ".gif"):

Iată codul HTML complet:

Rezultatul va fi acesta:

Dacă imaginea de fundal este afișată în folderul Imagini sau în alt dosar, acesta va arăta astfel:

Iată codul HTML complet:

Textul paginii pe un fundal frumos.

Astăzi este totul! Cred că lecția nu a fost complicată și ați înțeles cu toții. Dacă aveți întrebări, scrieți în comentarii.
Așteptați-vă în următoarele lecții.

Postarea anterioară
Următorul post.

O zi bună pentru toată lumea să învețe și să învețe ceva nou! Ați acordat vreodată atenție aspect Când se dezvoltă care creatorii au fost leneși să emită un fundal de pagini? Și m-am întors. Se pare sacrificarea. Adesea datorită lipsei de separare obișnuite între specii diferite Informațiile pe care le amestecă și dispare pur și simplu dorința de a privi în continuare o astfel de resursă web.

Astfel încât astfel de necazuri nu am decis să scriu un articol pe tema: "Cum de a face un fundal de pagini în HTML". După ce ați citit publicația, veți învăța, cu ce instrumente puteți seta designul de fundal, cum să faceți un fundal fix sau schimbat și multe altele, ceea ce vă va ajuta să faceți site-ul dvs. atractiv. Acum să începem!

Instrumente de bază pentru setarea paginilor web de fundal

Pentru a seta imaginea de fundal, dezvoltatorii de limbă web au oferit un fundal atribut. Este disponibil atât în \u200b\u200bși în CSS.

În limba marcaj - acesta este atributul etichetei corpului și în mesele de stil - proprietate universalăcare vă permite să setați la 5 caracteristici ale planului din spate în același timp. Fundalul este un element destul de flexibil care poate fi folosit pentru a încerca fundalul ca o culoare, imagine color sau chiar animație.

Deci, pentru a instala o imagine de fundal printr-o unitate HTML Suficient pentru a scrie acest cod: ...

Și în loc de cuvintele "adresa fișierului" introduceți calea către imagine.

Cu toate acestea, observați! Dacă, în forma fundalului, doriți să vedeți o panza monochon specificată din paleta de culori, atunci acest lucru se face folosind atributul Bgcolor.

De exemplu, ...

Am cerut un fundal negru pentru site-ul nostru.

Culorile din CSS și HTML sunt stabilite fie printr-un cuvânt englez (de exemplu roșu), fie printr-un cod special care constă dintr-un semn # și șase caractere după el (de exemplu, # FFDAB9).

Când introduceți oa doua opțiune în specializată produse de software Pentru dezvoltatori, paleta va apărea automat în fața dvs. Dacă tocmai ați început să învățați aceste limbi web, atunci codul de culoare poate fi amplasat pe Internet.

Fundal ca proprietate în mesele de stil cascadă

Este setat sau în fișier separat. cu stiluri CSS sau în element

Pe această notă, puteți rezuma munca noastră. Alăturați-vă rândurilor abonaților mei credincioși, puneți întrebări dacă ceva este incomprehensibil și nu Gredați un link către blogul meu și împărtășiți-l cu prietenii. Vă doresc o învățare plăcută. Pa! Pa!

Cu sinceritate, romană chuechev

În configurarea oricărui site, în plus față de funcționalitate, designul este foarte important. Aceasta este ceea ce vă întreabă propriul stil și designul unei companii sau unei persoane, pentru care site-ul este creat. Personalizați culoarea de fundal și imaginea sa nu va fi forța de muncă, urmând instrucțiunile din acest articol.

Deschideți-vă Fișier HTML. pentru notepad sau oricare altul editor de textLa care sunteți obișnuiți. De exemplu, luați o pagină primitivă a site-ului cu un minim de text. Puteți deschide fișierul folosind orice browser.

Pentru a începe cu, schimbați culoarea fundalului dvs., deoarece persoanele cu conexiuni lente la Internet nu vor putea vedea imediat imaginea de fundal a site-ului. Un timp, până când imaginea este încărcată, ei pot vedea doar culoarea site-ului dvs.
Introduceți eticheta. Parametrul Bgcolor \u003d "*****", unde ***** este un cifru de culoare. Puteți învăța culorile pentru HTML în orice editor graficSelectând opțiunea "pentru web", fie pe site https://colorscheme.ru/color-names

Aveți suficiente pentru a alege o culoare în paleta cercului și alocați intensitatea în piață. În dreapta, veți vedea două coduri pentru HTML. Copiați-le și introduceți-le în notebook.

Dispunând de culoarea și introducerea acesteia în cod, consultați Dacă ați făcut totul corect, vizualizarea paginii web primite din browser.

Acum puteți trece la introducerea imaginii de fundal. Așezați imaginea dorită în folderul de cod pentru o mai mare confort. Întreabă-l numele literelor latine.

Acum aflați locația fișierului făcând clic pe acesta cu butonul din dreapta al mouse-ului selectând șirul "Open folosind" și făcând clic pe orice browser instalat pe computer.

Copiați adresa din bara de căutare a browserului.

Acum în etichetă Introduceți șirul:

• style \u003d "Imaginea de fundal: URL ('File: /// C: / USSERS / POW_FILE.JPG')"

Salvați fișierul.

Verificați pagina dvs. web. Veți vedea că fundalul este înlocuit sub textul dvs.

Rețineți că utilizatorii care au o rezoluție mai mare a ecranului, imaginea dvs. va fi duplicată în jos și dreapta. Nu va arăta bine, dacă imaginea nu este monofonică. Pentru a corecta acest parametru, există comenzi speciale.

• fundal-Repeat: "Valoare". Opțiunile pentru valoarea dvs. pot fi: "Repeat-X" - repetă imaginea de fundal și orizontală și verticală. "Repeat-y" - repetați numai vertical. "No-repetare" - imaginea este înghețată la fața locului și nu se repetă. "Spațiu" - întreaga pagină va fi completată numărul maxim Copii ale imaginii, extrema se va lăuda. "Rotund" - aceeași opțiune, dar la marginile imaginii va fi scalată cu ușurință;
• fundal-atașament: "valoare". Dacă înlocuiți în loc de cuvântul Tag "Derulați", atunci imaginea va derula împreună cu site-ul. "Fix" - Când derulează fundalul rămâne neschimbat;
• mărimea de fundal: valoarea valorii2. Aici valorile trebuie să ia suma în pixeli. De exemplu: 100px 200px. În plus față de pixeli, valorile sunt acceptate în procente. Acesta este parametrul de umplere a imaginii. În plus față de numere, puteți introduce doi parametri: "Conține" - umpleți pagina de către imagine de-a lungul părții lungi și "capac" - completează pagina cu imaginea în lățime.

Cunoașterea elementelor de bază ale completării fundalului paginii în HTML sunt gata să creeze primul site.

În HTML, fundalul site-ului nu specifică, este scris prin stiluri CSS, dar este doar oficial teoretic. Și acum să aflăm cum este definit acest fundal.

Fundal pentru site sau bloc separat

Deoarece implementarea acestui obiectiv avem nevoie de un fișier CSS, trebuie să îl creați și să vă conectați la HTML. Acest lucru este scris în acest articol. După aceea, puteți continua să lucrați. În primul rând, trebuie să decideți ce doriți să setați fundalul. Dacă întreaga pagină este, în general, atunci o puteți face așa:

Corp (
Fundal-culoare: alb;
}

Adică, facem apel la eticheta corpului, care reprezintă întreaga pagină. Proprietatea de fundal este utilizată pentru a specifica culoarea de fundal. Dar dacă trebuie să setați un desen ca fundal, și nu o culoare solidă? Apoi merită să scrieți așa:

Corp (
Imaginea de fundal: URL (calea către imagine. Imagine de desen)
}

Pentru claritate, propun să iau în considerare totul în detaliu de exemplu. Pentru a face acest lucru, voi folosi o astfel de imagine:

De exemplu, imaginea de fundal: adresa URL (comp.png). În acest exemplu, am cerut o imagine de fundal cu numele comp (acesta este exact ceea ce l-am numit) format PNG.care se află în același folder ca și fișierul CSS.
În HTML, creați un bloc arbitrar cu dimensiuni specifice, astfel încât să demonstreze lucrarea proprietăților CSS.

Și aici pentru el stiluri:

#CT (
Imaginea de fundal: URL (comp.png);
Lățime: 600px;
Înălțime: 400px;
}

Asta am făcut:

De ce este asta? Faptul este că, în mod implicit, browserul repetă imaginea de câte ori pentru a umple complet blocul. Uneori este necesar, de exemplu, atunci când se utilizează ornamente fără sudură, dar în cazul nostru ar trebui să existe o singură imagine. Din fericire, acest lucru poate fi foarte ușor de gestionat.

Repetarea fundalului

Dacă aveți o imagine ca fundal, atunci în mod prestabilit va fi repetată orizontal și vertical pentru a umple întregul spațiu al paginii. Pentru al scoate, este utilizată proprietatea repetată de fundal și valoarea sa nu-repetă (nu repetată). Există, de asemenea, valori:

• Repeat-X - repetați numai orizontal
• Repetați-y - doar vertical

Am adăugat la proprietățile fundalului nostru grafic:

Fundal-Repeat: No-Repeat;

Poziţie

Proprietatea de poziție a fundalului determină locul în care va fi imaginea. Două valori sunt așezate aici - orizontală și verticală. Exemple: poziția de fundal: poziția inferioară a fundului în colțul din dreapta jos, partea superioară-stânga - în partea superioară inferioară (și atât de implicită), 250px 500px - offset din partea stângă colțul de sus Dreptul la 250 de pixeli și până la 500.

Să arătăm mai bine la exemple:

Poziția de fundal: dreapta sus;

Imaginea pentru a trece la marginea din dreapta sus. De asemenea, am dat un fundal galben pentru a fi vizibil la marginile sale.

poziția de fundal: 50% 50%;

Imaginea a apărut exact centrat în blocul său. Da, acest lucru este, de asemenea, posibil datorită procentului de poziție.

poziția de fundal: 70% 20%;

Fundalul este deplasat cu 70% orizontal și 20 vertical.

De asemenea, este permisă în pixeli pentru a stabili o valoare negativă a poziției. Este permis să faceți, de exemplu, când utilizați o imagine mare-sprite și trebuie să puneți în unitate partea dorită a acestui sprite.

Fixarea fundalului

Îmi place încă o proprietate numită atașament de fundal. El are doar două valori, iar prima este implicită (defilare). Aceasta înseamnă că atunci când derulați pagina, fundalul va derula și dacă utilizați o imagine fără repetări, atunci în cele din urmă se va termina și apoi se va duce la o culoare solidă.

Deci, acest lucru nu se întâmplă, atașamentul de fundal: fix este prescris și acum fundalul nostru este fixat în mod fiabil în poziție. Acest lucru poate fi comparat cu modul în care blocul definește poziționarea fixă \u200b\u200bși nu va dispărea de pe pagină atunci când îl derulați.

Înregistrarea abreviată a tuturor acestor lucruri bune

Am dezasamblat o mulțime de proprietăți care vă permit să faceți un fundal, dar dacă acestea sunt folosite totul, se transformă într-o înregistrare greoaie. Există o soluție foarte elegantă. Proprietatea de fundal vă permite să scrieți prin spații aveți nevoie de setări in aceasta ordine:
Fundal: poziția de fixare a repetării imaginii de culoare;
Și acum totul poate fi scris astfel:

Fundal: URL galbenă (comp.png) No-Repeat 20% 100px;

Dacă o anumită proprietate nu este necesară pentru a determina, atunci este pur și simplu redus (în cazul nostru, nu am înregistrat atașamentul de fundal).

Multe fundaluri

Și dacă aveți nevoie de câteva imagini de fundal? Se întâmplă să o facă. Astăzi, CSS susține o astfel de oportunitate. Sa incercam. Luați o astfel de pictogramă

I-am sunat laptopul.

Și aici este codul pentru a introduce un multiphone:

Fundal: URL (comp.png) No-Repeat 20% 100px,
URL (laptop.png) nu repetă 50% 50%;
Fundal-culoare: galben;

După cum puteți vedea, doar puneți virgul după prima imagine și prescrieți setările pentru al doilea. Culoarea solidă în acest caz este mai bună pentru a seta separat.

În același mod, puteți înregistra mai multe imagini, dar nu exagerați - prea multă grafică nu este foarte bună.

Asta am vrut să termin acest articol. Cu fundalul puteți face multe lucruri interesante, voi încerca să scriu despre ei în viitor (și ceva deja scris - de exemplu,). De succes pentru a studia această proprietate.

Setați culoarea de fundal și / sau o imagine pentru o pagină sau un element separat este suficient de simplu. Principalul lucru este să știți unde și cum se poate face, precum și să aveți un cod de culoare și / sau o imagine de fundal. Este posibil ca din acest articol să înveți multe lucruri noi, dar l-am creat în mod specific pentru începători. Prin urmare, totul va fi cât mai scurt posibil și în detaliu simultan. Principalul lucru este că nu primești nu numai vedere generala Și exemple gata făcute, dar, de asemenea, înțelegerea modului de a face un fundal în HTML.

Pentru a seta fundalul în HTML utilizați DOCTYPE intermediară

Și voi începe cu faptul că HTML5. Nici o ocazie de a întreba. Această caracteristică a fost decisă să sufere în CSS. Prin urmare, dacă intenționați să utilizați mai jos și doriți să obțineți un cod valid (corect), trebuie să rămâneți la tipul de documente de tranziție. Pentru a face acest lucru, pagina dvs. web ar trebui să înceapă cu următoarea linie:

Tranziție// en "" http://www.w3.org/tr/html4/loose.dtd "\u003e

Dacă ați dat seama, să înțelegem cum este creată fundalul. Și primul lucru aici ar trebui notat - aceasta este diferența dintre culoare de fundal și imagine de fundal. La început merge culoare de fundalcare inundă tot spațiul de pagină disponibil sau elementul său. Repetat deasupra imagine de fundal. Din punct de vedere vizual, acest lucru poate fi descris după cum urmează:

Fundal de document HTML și elementele sale

Al doilea lucru pe care trebuie să-l cunoașteți este diferența dintre corpul documentului și element al documentului. Corpul documentului Acesta este indicat în codul HTML al paginii web a etichetei corpului, care include tot conținutul paginii web. Evident, fundalul documentului documentului nu poate fi transparent. Dacă fundalul corpului documentului nu este specificat, se utilizează valoarea implicită specificată în setările browserului.

Elemente de pagină sunt în interiorul etichetei corpului. Este demn de remarcat faptul că puteți seta imaginea de culoare și / sau fundal utilizând HTML la toate elementele documentului. De exemplu, imaginea de fundal poate fi specificată numai pentru tabele. În mod implicit, acestea au de obicei un fundal transparent.

Atribut Bgcolor pentru a crea culoarea de fundal

Pentru a întreba culoare de fundal Documentul sau elementele sale sunt utilizate de atributul BGCOLOR, de exemplu:

În acest caz, am stabilit culoarea de fundal pentru pagină ca întreg. Dar un exemplu de cum să setați culoarea de fundal pentru masă, în tag-ul tabelului:

Text cu fundal.

Este demn de remarcat faptul că culoarea de fundal din tabel poate fi, de asemenea, specificată pentru rânduri în TA TR și pentru celulele lor în etichetă TD.

Cum să aflați codul de culoare?

Probabil ați observat deja că culoarea din HTML este setată la special codDe exemplu: # EC008C. Pentru a afla codul de care aveți nevoie de culoarea, puteți utiliza unul dintre editorii grafică. De exemplu, în Photoshop puteți utiliza " Instrumentul Eyedropper."(Pipette) pentru a obține o culoare dintr-un punct din imagine. Apoi, trebuie să faceți clic pe culoarea rezultată din bara de instrumente și în fereastra care se deschide " Selector de culoare."(Selectați Color) Copiați codul de culoare.

Vă atrag atenția asupra faptului că acest cod va fi fără un semn de lattice (#) La început, acest semn va trebui să fie adăugat manual.

De asemenea, puteți utiliza numeroase servicii on-line, de exemplu:

• etc.

Principiul lor de lucru este chiar mai ușor - faceți clic pe culoarea dorită și obțineți codul IT.

Atribute fundal pentru a crea o imagine de fundal

Precum și în cazul culorii de fundal și în cazul imagine de fundalTrebuie să utilizați un atribut special, și anume fundal, de exemplu:

În acest caz, punem imaginea de fundal pentru pagină ca întreg. Este demn de remarcat faptul că, datorită limitărilor dimensiunii imaginii, acesta va fi repetat, de exemplu:

După cum vedeți, când repetarea, tranziția dintre imagini este vizibilă. Prin urmare, fotografiile speciale sunt adesea folosite, unde acest moment este luat în considerare.

Dar un exemplu de cum să setați o imagine de fundal pentru o masă, în tag-ul de masă:

Text cu fundal.

Este demn de remarcat faptul că imaginea de fundal poate fi setată numai pentru tabel ca un întreg și / sau celula separată. Pentru un șir nu va funcționa.

Calea absolută și relativă spre imaginea de fundal

În mod separat, merită acordată atenție adresa de fundal imagine. În acest caz, se folosește calea relativă la imagine, adică. Adresa este indicată în locația fișierului imagine în fișierul de pagină Web. Această opțiune nu poate fi numită deosebit de succes. Cel mai bine este să utilizați calea absolută la imagine, adică uRL-ul său complet, de exemplu:

În acest caz, nu veți avea probleme concomitente. Pentru mai multe despre el puteți citi.

Să ne rezumăm

Folosind atributele Bgcolor și fundalul este depășită din punct de vedere moral, deoarece pentru validitatea codului HTML va trebui să utilizați DOCTYPE TRANSITIONAL. Pentru a seta culoarea de fundal în HTML, utilizează coduri speciale pe care le puteți afla într-un editor grafic sau folosind servicii speciale online. Imaginea de fundal este duplicată în cozile zonei alocate și se află pe partea superioară a culorii de fundal. Pentru a specifica o imagine de fundal, este mai bine să utilizați adresa URL completă. Am totul pe asta. Multumesc pentru atentie. Noroc!

la 22:37

Editați mesajul