17.10.2015

Ne još

Zdravo!
Nastavljamo učiti osnove HTML-a.
U ovoj lekciji ispričat ću i pokazati primjerima kako napraviti pozadinu iz boje ili slike na HTML stranici.
Sve je prilično jednostavno!
Počnimo s bojom!
Mislim da niste propustili gdje sam pričao o tome kako promijeniti boju teksta i na kraju članka sam dao kodove za razne boje i nijanse. Zašto sam te podsjetio na ovu lekciju? Da, jer postoji tablica s gotovim kodovima boja, uzmite ih i vježbajte odmah u ovoj lekciji.
Dakle, kako napraviti pozadinu u boji u HTML-u...

Pozadina u boji u HTML-u

Boja pozadine u HTML dokumentu prema zadanim je postavkama bijela. Kako postaviti boju po želji?
U tome će nam pomoći atribut "bgcolor". Da biste slikali pozadinu, upišite ovaj atribut u oznaku " body»:

Ili ovako:

Ovdje je kompletan HTML kod:

Tekst stranice bit će zelen, a pozadina crna.

Rezultat će biti ovakav:

Ako želite napraviti pozadinu od slike, dodajte atribut "background" u oznaku "body":

Ispunite bilo koju sliku na kojoj se nalazi vaša web stranica (na primjer, moja stranica ima naziv "fon" s nastavkom ".gif"):

Ovdje je kompletan HTML kod:

Rezultat će biti ovakav:

Ako se pozadinska slika nalazi u mapi sa slikama ili nekoj drugoj mapi, izgledat će ovako:

Ovdje je kompletan HTML kod:

Tekst stranice na lijepoj pozadini.

To je sve za danas! Mislim da lekcija nije bila teška i da ste sve razumjeli. Ako imate pitanja, pišite u komentarima.
Veselim se što ću vas vidjeti na sljedećim lekcijama.

Prethodni post
Sljedeći post

Od autora: dobrodošli na webformyself i danas vam želim reći kako promijeniti pozadinu stranice. Boja pozadine ili slika u pozadini mogu igrati ogromnu ulogu u tome kako se stranica osjeća, pa morate znati kako to postaviti.

kako promijeniti pozadinu u wordpressu

Opet, ako imate wordpress motor, onda promjena opće pozadine stranice nije teška. Samo trebate kliknuti gumb "Prilagodi" na kartici "Izgled". Ovdje morate odabrati "Boje". Ovisno o odabranom predlošku, moguće je odabrati boje za različite elemente. Ali u svakom slučaju možete odabrati boju stranice - pred vama će se otvoriti prikladna ploča u boji.

Broj postavki ovdje ovisi o tome koji predložak imate. U svakom slučaju, svakako bi trebalo biti moguće postaviti boju za cijelu stranicu, u različitim predlošcima također možete postaviti pozadinu i boju za naslove, veze itd.

Zapravo, to je sve što trebate znati. Ako trebate preuzeti točno pozadinsku sliku, odaberite odgovarajuću stavku i pronađite željenu datoteku na svom računalu.

JavaScript. Brzi početak

Na dobar način, slika ne bi trebala biti preteška, jer će jako pogoditi brzinu učitavanja stranice. Idealno je koristiti takozvane bešavne pozadinske slike koje se ponavljaju vodoravno i okomito i tako ispunjavaju cijeli prostor.

Nakon učitavanja slike, prikazat će vam se nekoliko korisnih opcija za prilagodbu. Ljepota wordpressa je u tome što odmah vidite promjene, ovisno o tome koje postavke odaberete.

Prvo, od vas će se tražiti da odaberete metodu ponavljanja. Već postoje 4 opcije: ponovite samo vodoravno, samo okomito, s obje strane i ne ponavljajte. Ovisno o tome koju sliku koristite, morate napraviti izbor.

Ponavljanje može značajno uštedjeti na veličini slike kada je mala i može se ponavljati, tako da oštri prijelazi između ponavljanja nisu vidljivi. Na taj način možete uštedjeti desetke kilobajta u usporedbi s metodom u kojoj se učitava punopravna velika slika.

Položaj. Ovdje se nema što objašnjavati, samo pogledajte kako se izgled stranice mijenja s različitim položajima pozadine. Odaberite opciju koja vam se najviše sviđa.

Uvezivanje. Ovo je vrlo zanimljiva postavka, omogućuje vam da odaberete hoćete li pomicati pozadinsku sliku zajedno sa sadržajem ili je zamrznuti na jednom mjestu. Osobno, uvijek volim odabrati fiksnu opciju, jer se pri pomicanju prema dolje pomiču samo blokovi sadržaja.

Na primjer, ako imate pozadinsku sliku visine 1000 piksela, ne ponavljate je i ne popravljate je, onda kada se pomaknete prema dolje, ona će jednostavno nestati iz vida. Popravljanje pozadine omogućuje da slika uvijek ostane na vidiku. Ponekad je ovo vrlo učinkovito rješenje.

JavaScript. Brzi početak

Naučite osnove JavaScripta s praktičnim primjerom izrade web aplikacije

Zapravo, to je sve za promjenu pozadine u wordpressu. Kao što vidite, sve je što jednostavnije.

Kako promijeniti pozadinu web stranice u html-u

Pa, analizirali smo čisto vizualnu verziju, u kojoj ne morate ulaziti u kod i tamo nešto pisati. Sada ćemo shvatiti kako još uvijek promijeniti pozadinu kroz html i css. Koje su prednosti? Možete postaviti pozadinske slike ne samo za web mjesto općenito, već i za svaki element zasebno. Na primjer, za neki widget, izbornik, zaglavlje itd. To daje mnogo više mogućnosti u dizajnu stranice i promjeni njenog dizajna.

Da biste pristupili svim ovim stilovima, morate pronaći glavni stilski list svog predloška. Obično se nalazi u korijenu, ili u css mapi, i zove se style.css ili main.css.

U njemu ćete vidjeti kod koji dizajnira različite elemente vaše stranice. Ako želite globalno postaviti pozadinu, to se može učiniti tako da pozadinu dodijelite izborniku tijela, odnosno tijelu stranice.

Kako je postavljena pozadina?

Zapamtite - svojstvo pozadine. Danas je bolje koristiti skraćenu verziju ovog svojstva. Na primjer:

tijelo (pozadina: #ccc url(bg.png) bez ponavljanja 50% 50% fiksno; )

tijelo ( pozadina: #ccc url(bg.png) bez ponavljanja 50% 50% fiksno;

Što sve ovo znači? Prvi parametar obično je jednobojna. Recimo da smo postavili sivo. Boja se može izostaviti ako je navedena pozadinska slika. Kao što možete vidjeti, slika je određena pomoću konstrukcije url(put do datoteke). U skladu s tim, morate ispravno zapisati put do datoteke i svakako navesti njezino proširenje.

Svi parametri koje sam zapisao nakon toga nisu obavezni i nisu obavezni. Dakle, precizirao sam da se pozadinska slika ne smije ponavljati, pozicionirati u centar i vodoravno i okomito, te također fiksirati na jednom mjestu kako ne bi nestala prilikom pomicanja.

Kao što možete vidjeti, ovdje su svi isti parametri koje ste postavili vizualno, ali ovdje su registrirani kao vrijednosti svojstva pozadine.

U ovom primjeru koristio sam skraćeni zapis svojstva, samo je praktičniji, ali zapravo svaki pojedinačni parametar ima svoje svojstvo: boja pozadine za boju, pozadinska slika za sliku, pozadinska pozicija za postavljanje položaja .

Naravno, da biste tečno vladali ovim svojstvima, savjetujem vam da prvo pohađate naš tečaj, a ako želite postati napredni korisnik u odnosu na css jezik, onda . Tamo ćete naučiti kako postaviti nekoliko pozadina u isto vrijeme, prilagoditi njihovo ponavljanje, koristiti gradijente itd. Informacije su vrlo zanimljive i korisne za graditelje stranica.

Pa, rekao sam vam o osnovama rada s pozadinom. Pretplatite se na naš portal kako biste primali vijesti i saznali više o izgradnji web stranica.

JavaScript. Brzi početak

Naučite osnove JavaScripta s praktičnim primjerom izrade web aplikacije

61,5 tisuća

Svaka soba će izgledati puno bolje sa skupim perzijskim tepihom na podu. Što nije u redu s vašom web lokacijom? Možda je vrijeme da svoj pod “pokrijete” skupim elegantnim ručno rađenim tepihom. Pogledajmo pobliže kako napraviti pozadinu za web mjesto:

Pozadina stranice

Događa se da je stari dizajn stranice već dosadan. I želim nešto novo i ukusno. A novi dizajn će biti takav ako ga sami skuhate.

Ali mijenjanje cjelokupnog dizajna resursa na svoju ruku nezahvalna je stvar. I nemaju svi svoje ruke kako treba "naoštriti" za ovaj posao. Stoga je najlakše osvježiti stari predložak promjenom boje pozadine ili pozadinske slike resursa.

Postoji nekoliko načina za promjenu pozadine na web stranici. Za to se koriste mogućnosti CSS-a ili html-a. No mnoga pozadinska svojstva imaju isti naziv i korištenje u ovim web tehnologijama.

Osnove HTML pozadine

Nekoliko elemenata može se koristiti kao pozadina:

• Boja;
• pozadinska slika;
• Slika teksture.

Pogledajmo korištenje svakog od njih detaljnije.

Da biste postavili boju pozadine za web-mjesto, upotrijebite svojstvo background-color atributa style. To jest, da biste postavili glavnu boju za web stranicu, morate je registrirati unutar oznake . Na primjer:

Pozadina web stranice #55D52B

Osim heksadecimalnog koda boje, podržana je ključna riječ ili RGB vrijednost. primjeri:

Pozadina web stranice rgb(23,113,44)

Zelena pozadina web stranice

Postavljanje boje pozadine pomoću ključnih riječi ima niz ograničenja u usporedbi s druge dvije metode.

U html-u je podržano samo 16 ključnih riječi u boji. Evo nekoliko njih: bijela, crvena, plava, crna, žuta drugo.

Stoga, kako biste postavili pozadinu za html stranicu, bolje je koristiti hex ili RGB.

Osim odabira boje, dostupne su i druge mogućnosti prilagodbe. Postavljanje svojstva background-color na transparentno čini pozadinu stranice prozirnom. Ova je vrijednost prema zadanim postavkama dodijeljena ovom svojstvu.

Pogledajmo sada mogućnosti jezika hiperteksta za postavljanje pozadinske slike za stranicu. To se može učiniti sa svojstvom background-image.

Kao što možete vidjeti iz koda, slika je vezana putem url puta navedene u zagradama. Ali ne ispadaju sve slike tako velike da svojom veličinom ispunjavaju cijelo područje zaslona. Pogledajmo kako će se prikazati manja slika.

Pretpostavimo da razvijamo stranicu o poeziji, a kao pozadinu želimo upotrijebiti sliku Pegaza. Krilati konj će personificirati slobodu pjesnikove stvaralačke misli!

Želimo da se slika jednom prikaže na sredini ekrana. Ali, nažalost, preglednik ne razumije naše uzvišene želje. I prikazuje manju sliku za pozadinu web-mjesta onoliko puta koliko površina zaslona može stati:

Vjerojatno će četiri nasmijana konja s krilima biti previše pjesnicima za inspiraciju. Stoga zabranjujemo kloniranje našeg Pegaza. To radimo sa svojstvom background-repeat. Moguće vrijednosti:

• repeat-x - ponovite pozadinsku sliku vodoravno;
• repeat-y - okomito;
• ponoviti - na obje osi;
• no-repeat - ponavljanje je zabranjeno.

Među ovim opcijama, zanima nas posljednja. Prije promjene pozadine stranice, koristimo je u našem kodu:

Ali, naravno, bolje je ako se naš letak nalazi na sredini ekrana. Svojstvo background-position služi samo za pozicioniranje pozadinske slike na stranici. Koordinate lokacije možete postaviti na nekoliko načina:

• ključna riječ ( gore, dolje, središte, lijevo, desno);
• Postotak - odbrojavanje počinje od gornjeg lijevog kuta;
• U mjernim jedinicama (pikseli).

Koristimo najjednostavniju opciju za centriranje:

Događa se da morate popraviti položaj slike prilikom pomicanja. Stoga, prije nego što sliku učinite pozadinom stranice, upotrijebite posebno svojstvo background-attachment . Vrijednosti koje prihvaća su:

• svitak;


• fiksno.

Trebamo posljednju vrijednost. Sada će naš primjer koda izgledati ovako:

Tekstura pozadine web stranice

U prvom primjeru za pozadinu smo koristili veliki i lijepi pustinjski krajolik. Ali za takvu ljepotu morate platiti u cijelosti. Težina slike visoke kvalitete može doseći nekoliko megabajta.

Dobar dan svima koji žele učiti i naučiti nešto novo! Jeste li ikad obraćali pozornost na izgled, tijekom čijeg razvoja su kreatori bili previše lijeni ukrasiti pozadinu stranica? I okrenuo sam se. Ovo izgleda loše. Često, zbog nedostatka podjela između različitih vrsta informacija na koje smo navikli, one se miješaju i jednostavno nema želje da se dalje gleda na takav web resurs.

Da mi se takva katastrofa ne dogodi, odlučio sam napisati članak na temu: "Kako napraviti pozadinu stranice u html-u." Nakon što pročitate publikaciju, naučit ćete koje alate možete koristiti za postavljanje dizajna pozadine, kako popraviti ili promijeniti pozadinu i još mnogo toga što će pomoći da vaša stranica postane privlačna. A sad krenimo!

Osnovni alati za postavljanje pozadine web stranica

Za postavljanje pozadinske slike, dizajneri web jezika dali su atribut pozadine. Dostupan je i u , i u css.

U označnom jeziku, ovo je atribut oznake tijela, a u stilskim tablicama, to je univerzalno svojstvo koje vam omogućuje da postavite do 5 pozadinskih karakteristika u isto vrijeme. Pozadina je prilično fleksibilan element koji se može koristiti za postavljanje pozadine u obliku jedne boje, slike u boji ili čak animacije.

Dakle, za postavljanje pozadinske slike putem html jedinice samo napiši ovaj kod: ... a umjesto riječi "adresa datoteke" ubacite put do slike.

Međutim, primijetite! Ako želite vidjeti obično platno kao pozadinu, određeno vrijednošću iz palete boja, to se radi pomoću atributa bgcolor.

Na primjer, ..., postavili smo crnu pozadinu za našu stranicu.

Boje u css i html-u određene su ili engleskom riječi (na primjer, crvena) ili posebnim kodom koji se sastoji od znaka # i šest znakova iza njega (na primjer, #FFDAB9).

Prilikom tipkanja druge opcije u specijaliziranim softverskim proizvodima za programere, paleta će se automatski pojaviti ispred vas. Ako ste tek počeli učiti ove web jezike, onda možete pogledati kod boja na internetu.

Pozadina kao svojstvo u kaskadnim stilskim listovima

Postavlja se ili u zasebnoj datoteci s css stilovima ili u elementu

S tim u vezi možemo sažeti naš rad. Pridružite se redovima mojih vjernih pretplatnika, postavljajte pitanja ako nešto nije jasno i nemojte biti pohlepni za linkom na moj blog, već ga podijelite sa svojim prijateljima. Želim vam ugodno učenje. Doviđenja!

S poštovanjem, Roman Chueshov

Lekcija 7. Tekst i boja pozadine u HTML-u.

Datum: 2008-12-05

Kako postaviti boju pozadine i teksta na web stranici?

Prema zadanim postavkama, boja teksta i, općenito, bilo kojeg fonta na web stranicama je uvijek crno (#000000 ). Ali uvijek možemo postaviti apsolutno bilo koju boju koja nam se sviđa i koja izgleda pristojno ili prikladnija za dizajn određene stranice.

Postavite boju teksta

U HTML-u se boja teksta, fonta, pozadine i drugih elemenata može postaviti na dva načina:

1. Metoda 1. U par oznaka atribut je napisan s nazivom željene boje. Naziv boje je naveden na engleskom jeziku. Na primjer, boja naslova na našoj web stranici može se postaviti na sljedeći način:

Komentari na ovaj članak (lekciju):

Andrej! Kakvu divnu stranicu imate! Redovito ga koristim već drugi tjedan: proučavam vaše lekcije i video tutorijale; Čitam vašu literaturu i preuzimam programe; Poduzimam prve korake u web programiranju! I što je najvažnije, ja to mogu!!! A ja uopće nisam fizičar, nego tekstopisac! A u to se može uvjeriti svatko tko posjeti moju književnu stranicu: "PJESME OLEG GUZ" Moji podaci: e-mail: [e-mail zaštićen] web stranica: http://sites.google.com/site/stihiolegguz/

pažljivo provjerite kod

Pokušao sam promijeniti boju pozadine i ne ide! Kako promijeniti boju pozadine?