17.10.2015

Ne još

Zdravo svima!
Nastavimo sa učenjem osnova HTML-a.
U ovoj lekciji ću vam reći i pokazati primjere kako napraviti pozadinu iz boje ili slike na HTML stranici.
Prilično je jednostavno!
Počnimo sa bojom!
Mislim da niste propustili, gdje sam vam rekao kako promijeniti boju teksta i na kraju članka dao šifre za različite boje i nijanse. Zašto sam te podsjetio na ovu lekciju? Da, jer postoji tabela sa gotovim kodovima boja, uzmite ih i vježbajte ih odmah u ovoj lekciji.
Dakle, kako napraviti boju pozadine u HTML-u...

Boja pozadine u HTML-u

Zadana boja pozadine u HTML dokumentu je bijela. Kako podesiti boju po želji?
Atribut “bgcolor” će nam pomoći u tome. Da biste slikali pozadinu, dodajte ovaj atribut u oznaku "body":

ili ovako:

Ovdje je kompletan HTML kod:

Tekst stranice će biti zelen, a pozadina crna.

Rezultat će biti ovakav:

Ako želite da napravite pozadinu od slike, dodajte atribut “background” u oznaku “body”:

Popunite bilo koju sliku na kojoj se nalazi vaša web stranica (u mom primjeru, stranica se zove “fon” sa ekstenzijom “.gif”):

Ovdje je kompletan HTML kod:

Rezultat će biti ovakav:

Ako se pozadinska slika nalazi u folderu sa slikama ili nekom drugom folderu, izgledat će ovako:

Ovdje je kompletan HTML kod:

Tekst stranice na prekrasnoj 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.
Radujem se što ću vas vidjeti na sljedećim časovima.

Prethodni post
Sljedeći unos

Od autora: Dobrodošli na webformyself i danas želim da vam kažem kako da promenite pozadinu sajta. Boja pozadine ili slika u pozadini mogu igrati ogromnu ulogu u izgledu stranice, tako da morate znati kako to postaviti.

Kako promijeniti pozadinu u wordpressu

Opet, ako imate WordPress engine, onda promjena opće pozadine stranice neće biti teška. Potrebno je samo da kliknete na dugme "Prilagodi" na kartici "Izgled". Ovdje trebate odabrati “Boje”. Ovisno o predlošku koji odaberete, možda ćete moći odabrati boje za različite elemente. Ali u svakom slučaju možete odabrati boju stranice - pred vama će se otvoriti zgodan panel u boji.

Broj postavki ovdje zavisi od šablona koji imate. U svakom slučaju, svakako bi trebalo biti moguće podesiti boju za cijelu stranicu; u različitim predlošcima također možete postaviti pozadinu i boju za naslove, linkove itd.

Zapravo, to je sve što treba da znate. Ako treba da preuzmete pozadinsku sliku, izaberite odgovarajuću stavku i pronađite potrebnu datoteku na svom računaru.

JavaScript. Brzi početak

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

Nakon učitavanja slike, prikazat će vam se nekoliko korisnih postavki za konfiguraciju. Pogodnost WordPress-a 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 slici koju koristite, morate napraviti izbor.

Ponavljanje vam omogućava da značajno uštedite na veličini slike kada je mala i može se ponoviti tako da oštri prijelazi između ponavljanja nisu vidljivi. Na ovaj način možete uštedjeti desetine kilobajta u poređenju sa metodom u kojoj se učitava slika u punoj veličini velikih veličina.

Pozicija. Ovdje se nema šta objašnjavati, samo pogledajte kako se izgled stranice mijenja s različitim pozicijama pozadine. Odaberite opciju koja vam se najviše sviđa.

Uvezivanje. Ovo je vrlo zanimljiva postavka, omogućava vam da odaberete hoćete li pomicati pozadinsku sliku zajedno sa sadržajem ili je zamrznuti na jednom mjestu. Lično, uvijek volim da biram fiksnu opciju jer kada skrolujete prema dolje, pomiču se samo blokovi sadržaja.

Na primjer, ako imate pozadinu visine 1000 piksela, a ne ponovite je ili je ne snimite, onda kada skrolujete prema dolje ona će jednostavno nestati iz vidokruga. Popravljanje pozadine omogućava da slika ostane u vidokrugu u svakom trenutku. Ponekad je ovo veoma efikasno rešenje.

JavaScript. Brzi početak

Naučite osnove JavaScripta s praktičnim primjerom kako napraviti web aplikaciju.

Zapravo, to je sve za promjenu pozadine u WordPress-u. Kao što vidite, sve je najjednostavnije moguće.

Kako promijeniti pozadinu web stranice u html-u

U redu, pogledali smo čisto vizuelnu verziju, u kojoj ne morate ulaziti u kod i pisati bilo šta. Sada ćemo shvatiti kako promijeniti pozadinu putem html i css-a. Koje prednosti ovo pruža? Možete postaviti pozadinske slike ne samo za web lokaciju općenito, već i za svaki element posebno. Na primjer, za neki vidžet, meni, zaglavlje itd. To daje mnogo više mogućnosti u dizajnu web stranice i promjeni njenog dizajna.

Da biste pristupili svim ovim stilovima, morate pronaći glavni stilski list vašeg predloška. Obično se nalazi u root-u, ili u css folderu, 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 možete učiniti tako što ćete dodijeliti pozadinu izborniku tijela, odnosno tijelu stranice.

Kako je postavljena pozadina?

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

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

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

Šta sve ovo znači? Prvi parametar je obično puna boja. Recimo da ga postavimo na sivo. Boja možda neće biti navedena ako je navedena pozadinska slika. Kao što vidite, slika je specificirana pomoću konstrukcije url (putanja datoteke). U skladu s tim, morate ispravno zapisati putanju do datoteke, a također obavezno naznačiti njenu ekstenziju.

Svi parametri koje sam zapisao nakon ovoga su opcioni i mogu se specificirati po želji. Dakle, precizirao sam da pozadinska slika ne treba da se ponavlja, da bude pozicionirana u centru i horizontalno i okomito, kao i da bude fiksirana na jednom mestu kako ne bi nestala prilikom skrolovanja.

Kao što vidite, ovdje su svi isti parametri koje ste vizualno konfigurirali, ali ovdje su registrirani kao vrijednosti svojstva pozadine.

U ovom primjeru koristio sam skraćenu notaciju svojstava, samo je zgodnije, ali u stvari, svaki pojedinačni parametar ima svoje svojstvo: background-color za boju, background-image za sliku, background-position za postavljanje pozicije.

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

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

JavaScript. Brzi početak

Naučite osnove JavaScripta s praktičnim primjerom kako napraviti web aplikaciju.

61.5K

Svaka soba će izgledati mnogo bolje ako je njen pod prekriven skupim perzijskim tepihom. Pa zašto je vaša web stranica lošija? Možda je vrijeme da svoj pod “pokrijete” skupim, elegantnim ručno rađenim tepihom. Pogledajmo bliže kako napraviti pozadinu za web stranicu:

Pozadina stranice

Dešava se da je stari dizajn web stranice postao dosadan. I želim nešto novo i ukusno. A novi dizajn će biti isti ako ga sami napravite.

Ali potpuno mijenjanje cjelokupnog dizajna resursa na svoju ruku nezahvalan je zadatak. I nisu svačije ruke pravilno obučene za ovaj zadatak. Stoga je najlakši način za osvježavanje starog predloška promjena boje pozadine resursa ili njegove pozadinske slike.

Postoji nekoliko načina da promijenite pozadinu na web stranici. Za to se koriste mogućnosti CSS-a ili html-a. Ali mnoga svojstva za rad s pozadinom imaju isti naziv i način primjene u ovim web tehnologijama.

Osnove rada sa pozadinom u html-u

Nekoliko elemenata se može koristiti kao pozadina:

• boja;
• Pozadinska slika;
• Slika teksture.

Pogledajmo upotrebu svakog od njih detaljnije.

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

Pozadina web stranice #55D52B

Pored heksadecimalnog koda boje, podržana je vrijednost u ključnoj riječi ili RGB formatu. primjeri:

Pozadina web stranice rgb(23,113,44)

Pozadina web stranice zelena

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

HTML podržava samo 16 ključnih riječi za postavljanje boja. Evo nekoliko njih: bijela, crvena, plava, crna, žuta i drugi.

Stoga, da biste postavili pozadinu za html stranicu, bolje je koristiti heksadecimalni ili RGB format.

Osim izbora boje, dostupne su i druge opcije prilagođavanja. Ako je svojstvo background-color postavljeno na transparentno, pozadina stranice će postati prozirna. Ova vrijednost je po defaultu dodijeljena ovom svojstvu.

Pogledajmo sada mogućnosti jezika hiperteksta za postavljanje pozadinske slike za web lokaciju. Ovo se može učiniti pomoću svojstva background-image.

Kao što možete vidjeti iz koda, slika je povezana putem url putanje navedene u zagradama. Ali nisu sve slike toliko velike da njihova veličina ispunjava čitavu površinu ekrana. Da vidimo kako će se prikazati manja slika.

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

Potrebno nam je da se slika jednom prikaže na sredini ekrana. Ali, nažalost, pretraživač ne razumije naše uzvišene želje. I prikazuje manju sliku za pozadinu stranice onoliko puta koliko površina ekrana može primiti:

Možda će četiri nasmejana konja sa krilima biti prevelika inspiracija za pesnike. Stoga zabranjujemo kloniranje našeg Pegaza. Ovo radimo koristeći svojstvo background-repeat. Moguće vrijednosti:

• repeat-x – ponavljanje pozadinske slike horizontalno;
• repeat-y – vertikalno;
• ponavljanje – na obe ose;
• bez ponavljanja – ponavljanje je zabranjeno.

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

Ali, naravno, bilo bi bolje da se naš letak nalazi na sredini ekrana. Svojstvo background-position je upravo namijenjeno za pozicioniranje pozadinske slike na stranici. Koordinate lokacije možete postaviti na nekoliko načina:

• Ključna riječ ( gore, dolje, centar, lijevo, desno);
• Procenat – odbrojavanje počinje od gornjeg lijevog ugla;
• U mjernim jedinicama (pikseli).

Koristimo najjednostavniju opciju centriranja:

Dešava se da morate popraviti poziciju slike prilikom pomicanja. Stoga, prije nego što napravite sliku kao pozadinu stranice, koristite posebno svojstvo background-attachment. Vrijednosti koje prihvata su:

• svitak;


• fiksno.

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

Tekstura pozadine web stranice

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

Dobar dan svima koji žele da nauče i nauče nešto novo! Da li ste ikada obraćali pažnju na izgled, tokom čijeg razvoja su kreatori bili previše lijeni da osmisle pozadinu stranica? I jesam. Izgleda loše. Često se, zbog nedostatka uobičajenih podjela između različitih vrsta informacija, miješa i jednostavno nema želje da se nešto dalje pogleda na takvom web resursu.

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 web stranica bude privlačna. Sada počnimo!

Osnovni alati za postavljanje pozadine web stranica

Da bi postavili pozadinsku sliku, programeri web jezika su dali atribut pozadine. Dostupan je i u , i u css.

U markup jeziku, ovo je atribut body tag-a, au stilskim listovima, to je univerzalno svojstvo koje vam omogućava 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 preko html jedinice samo napišite sljedeći kod: ... i umjesto riječi “adresa datoteke” ubacite putanju do slike.

Međutim, imajte na umu! Ako želite da vidite jednobojno platno kao pozadinu, određeno vrijednošću iz palete boja, onda se to 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).

Kada unesete drugu opciju u specijalizovani softver za programere, paleta će se automatski pojaviti ispred vas. Ako ste tek počeli učiti ove web jezike, onda možete potražiti kod boja na internetu.

Pozadina kao svojstvo u kaskadnim stilovima

Postavlja se ili u zasebnom fajlu sa css stilovima, ili u elementu

Na ovoj noti možemo sumirati naš rad. Pridružite se redovima mojih vjernih pretplatnika, postavljajte pitanja ako vam nešto nije jasno i nemojte biti pohlepni sa linkom na moj blog, već ga podijelite sa svojim prijateljima. Želim vam ugodno iskustvo učenja. Ćao ćao!

Srdačan pozdrav, Roman Chueshov

Lekcija 7. Boje teksta i 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 crna (#000000 ). Ali uvijek možemo postaviti apsolutno bilo koju boju koja nam se sviđa i koja izgleda pristojno ili je 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 uparenim oznakama atribut je napisan označavajući naziv željene boje. Naziv boje je naznačen na engleskom. Na primjer, boja naslova na našoj web stranici može se postaviti na sljedeći način:

Komentari na ovaj članak (lekciju):

Andrey! Kakav divan sajt imate! Koristim ga redovno već drugu sedmicu: proučavam vaše lekcije i video tutorijale; Čitam vašu literaturu i preuzimam programe; Pravim prve korake u web programiranju! I što je najvažnije, ja to mogu!!! Ali ja uopšte nisam fizičar, već tekstopisac! A u ovo se može uveriti svako ko poseti moj književni sajt: “PESME OLEGA GUZA” Moji podaci: email: STIH [email protected] web stranica: http://sites.google.com/site/stihiolegguz/

pažljivo provjerite kod

Pokušao sam promijeniti boju pozadine i nije uspjelo! Kako promijeniti boju pozadine?