U ovom postu ću vam reći, kao i obično postavite pozadinu stranice koristeći HTML kod.
Pokazat ću vam i odličnu inostranu uslugu za odabir besprijekornih pozadina.
Sada su podešavanja sajta lakša i praktičnija putem CMS konzola kao što je WordPress.
Ponekad je potrebno promijeniti šablone prodajnih stranica, a ovaj članak će vam pomoći u tome.
Ako ne znaš šta je HTML, onda se može općenito nazvati jezikom web-mjesta ili skupom pravila po kojima se stranice generiraju.
Na primjer, vidite sliku na web stranici, kada u HTML kodu stranice može izgledati ovako:
Postavlja jednobojnu boju pozadine stranice.
Da bi se instalirao jednobojna pozadina, potrebno je označiti dodati atribut bgcolor.
< html >
< head >
< title >Naslov stranice.
< body bgcolor = "#ffcc00" >
Možete zalijepiti ovaj kod u tekstualnu datoteku i spremiti ga sa ekstenzijom .html. Zatim otvorite bilo kojim pretraživačem i pogledajte rezultat.
Kao što ste mogli pretpostaviti, boja pozadine dolazi iz koda boje u atributu bgcolor="value" koje možete pronaći klikom na ovaj link.
Postavljanje slike na pozadinu HTML stranice.
To postavite pozadinsku sliku, možete koristiti atribut pozadini u oznaci .
< html >
< head >
< title >Naslov stranice.
< body background = "http://сайт/images/mlmsecret.jpg" >Zdravo. Ovo je moja prva stranica.
Možda ćete primijetiti da atribut pozadini je jednaka putanji datoteke koja se koristi kao pozadina.
Da biste brzo promijenili pozadinu ili bilo koju sliku na stranici, samo navedite novu putanju do datoteke pomoću uređivača teksta.
Da biste saznali prethodni put, potrebno je da na stranici sa slikom kliknete desnim tasterom miša na sliku i kliknete na "Kopiraj URL slike". na ovaj način ćete vidjeti naziv slike/pozadine. Tada možete jednostavno zamijeniti staru sliku svojom koristeći isti naziv datoteke.
Ovo su bile osnove za postavljanje. pozadina u html-u, sada najzanimljivije. 🙂
Moderni pretraživači vam omogućavaju da elementu dodate proizvoljan broj pozadinskih slika, navodeći parametre svake pozadine odvojene zarezima. Dovoljno je koristiti svojstvo univerzalne pozadine i navesti jednu pozadinu za nju prvo, a drugu odvojenu zarezom.
Kako rastegnuti pozadinu na punu širinu prozora?
Svojstvo background-size je namijenjeno za skaliranje pozadine, 100% je navedeno kao njegova vrijednost, tada će pozadina zauzeti cijelu širinu prozora pretraživača. Za starije pretraživače treba koristiti specifična svojstva prefiksa, kao što je prikazano u primjeru 1.
Kako dodati pozadinsku sliku na web stranicu?
Da biste dodali pozadinsku sliku na web stranicu, navedite putanju do slike unutar url vrijednosti svojstva stila pozadine, koja se zauzvrat dodaje selektoru tijela.
Da li je moguće napraviti animiranu pozadinu?
Animacija je dovoljno moćna tehnika koja može oživjeti bilo koji dokument, pa ne čudi što je ogromnu popularnost stekla Flash tehnologija koja na web stranice, osim interaktivnih, dodaje i crtane filmove. GIF grafički format također podržava najjednostavniju animaciju kroz sekvencijalne promjene kadrova. Dakle, koristeći sliku u ovom formatu, dozvoljeno je animirati ne samo pojedinačne slike, već i pozadinu web stranice ili određenog elementa.
Prvo morate napraviti animiranu sliku u GIF formatu, za koju možete koristiti Adobe Photoshop ili drugi odgovarajući program za tu svrhu. Postoje i biblioteke gotovih animiranih datoteka koje se mogu koristiti kao pozadinska slika. Zatim se slika dodaje kao pozadina koristeći svojstvo stila pozadine, kao što je prikazano u primjeru 1.
Kako postaviti pozadinu u donjem desnom uglu stranice?
Za kontrolu položaja pozadinske slike na stranici koristi se svojstvo stila background-position, koje istovremeno postavlja horizontalne i vertikalne koordinate slike. Da biste zaustavili ponavljanje pozadinske slike, koristite svojstvo background-position sa vrijednošću no-repeat .
Kako učiniti da se pozadina ne ponavlja?
Prema zadanim postavkama, pozadinska slika se ponavlja horizontalno i okomito, popločavajući cijelo polje web stranice. Međutim, ovakvo ponašanje pozadine nije uvijek potrebno, posebno u slučaju jedne slike, tako da u pomoć dolazi vrijednost bez ponavljanja dodana svojstvu stila pozadine.
Kako mogu učiniti da se pozadina ponavlja samo okomito?
Ponavljanje u pozadini obično je potrebno za stvaranje ukrasnih linija ili preliva vezanih za visinu elementa ili prozora na web stranici. U takvim slučajevima, vertikalno ponavljanje pozadine daje čvrstu sliku bez obzira na veličinu elemenata. Samo u početku treba voditi računa da se pozadinska slika ponavlja bez spojeva.
Boja pozadine je vrlo važan element svake web stranice. Prvo, postavlja pravo raspoloženje i općenito raspoloženje stranice, a drugo, olakšava percepciju teksta.
Boja pozadine web stranice se postavlja pomoću atributa bgcolor oznake
.Primjer 1: Promjena boje pozadine
Boja se može specificirati u heksadecimalnoj vrijednosti ili po imenu.
Iako možete odrediti bilo koju boju za pozadinu, većina web lokacija koristi pretežno bijelu pozadinu i crna slova kao najprihvaćeniju opciju.
pozadinska slika
Kao pozadinu, možete koristiti bilo koju odgovarajuću sliku za to. Pozadina ne bi trebala umanjiti tekst, dok bi se trebala dobro uklopiti u shemu boja web stranice i biti male veličine za brzo učitavanje. Ako, nakon gore navedenog, i dalje želite dodati pozadinsku sliku na stranicu, trebali biste koristiti pozadinski atribut oznake
.Primjer 2: Dodavanje pozadinske slike
Ako je slika manja od veličine ekrana monitora, ona će se reproducirati horizontalno i okomito.
Budući da se pozadinska slika učitava sporije od boje pozadine, može se dogoditi da tekst neće biti čitljiv neko vrijeme dok se slike ne učitaju. Ista stvar se može desiti sa slikama onemogućenim u pretraživaču. Stoga se preporučuje da uvijek postavite boju pozadine zajedno sa slikom pozadine (primjer 3).
Primjer 3: Korištenje pozadinske slike i boje pozadine
fiksna pozadina
Prema zadanim postavkama, kada se koristi traka za pomicanje, pozadinska slika se pomiče zajedno sa sadržajem web stranice. Internet Explorer vam omogućava da popravite pozadinu pomoću atributa bgproperties="fixed" oznake
.Primjer 4 - Postavljanje fiksne pozadine
Specificiranjem atributa bgproperties, kao što je prikazano u primjeru 4, pozadinska slika na web stranici će ostati nepomična, a tekst, grafika i drugi elementi će se pomicati pomoću trake za pomicanje.
Za kreiranje sajta važno je pitanje kako napraviti pozadinu u html-u. Ovaj postupak uključuje korištenje određenih oznaka - kodnih riječi i slova. Zahvaljujući njima, možete staviti drugačiju pozadinu, učiniti je monofonijom - ispuniti je ili staviti bilo koju sliku umjesto pozadine. Takve akcije će biti vrlo korisne za sve dizajnere izgleda, kao i za one koji sami odluče da "obuče" svoju web stranicu.
Pravljenje pozadine
Prije nego što napravite pozadinu html stranice, potrebno je da otvorite kod html stranice u uređivaču teksta. Zapamtite da su oznake na stranici postavljene okomito. Zatim, između oznaka
… , morate staviti oznaku- Ove oznake su potrebne da bi se razjasnio stil elemenata ove web stranice. Umjesto tri tačke potrebno je napisati - tijelo (pozadina:) . Ovo je postavka koja vam omogućava da postavite različite stilove za pozadinu stranice. Operaciju podešavanja boje možete izvršiti na dva načina. Prvi:Telo (pozadina:#000000) - Pozadina stranice bi sada trebala biti crna.
Ova metoda je također pogodna za postavljanje i boje i pozadinske slike. Nakon dvotočke možete staviti ili kod boje ili link do slike. Ili možete koristiti metodu koja znači samo postavljanje boje - određeno popunjavanje stranice. Nakon dvotočka potrebno je registrirati takozvani parametar - boju. I nakon njega stavite kod same boje. Ova metoda je dobra ako se koristi kao šablon. Registrujte ga i sačuvajte, a kada je potrebno - podesite boju, stavite na stranicu.
Umjesto obične pozadine možete staviti sliku. Ako trebate saznati: u html-u, kako napraviti sliku pozadinom, onda morate učiniti slične operacije. Registrirajte oznake, stavite tijelo (pozadina: link na sliku). Mora se imati na umu da sama slika može biti bilo gdje. I na web stranici na Internetu, ali najbolje je kreirati folder u korijenu dokumenta. U fascikli u kojoj će se pohranjivati sve informacije o stranici web-mjesta potrebno je kreirati još jednu - za slike. Operacija će izgledati ovako:
Sada će slika koju ste odabrali biti pozadina cijele stranice stranice. Nadamo se da razumijete kako napraviti pozadinu u html-u. Samo probajte i sigurno ćete uspjeti!
Mnogi početnici dizajneri izgleda, koji tek prodiru u suštinu kreiranja web stranica, često se pitaju kako napraviti pozadinsku sliku u html-u. A ako neki ljudi mogu shvatiti ovaj zadatak, onda i dalje postoje problemi pri rastezanju slike na punu širinu monitora. U isto vrijeme, želio bih da se stranica prikazuje na isti način na svim pretraživačima, tako da se mora ispuniti zahtjev kompatibilnosti među pretraživačima. Pozadinu možete postaviti na dva načina: korištenjem i CSS stilom. Svako bira najbolju opciju za sebe. Naravno, CSS stil je mnogo prikladniji, jer je njegov kod pohranjen u zasebnoj datoteci i ne zauzima dodatne stupce u glavnim oznakama stranice, ali prvo pogledajmo jednostavan način postavljanja slike na pozadinu stranice.
Osnovne HTML oznake za kreiranje pozadine
Dakle, pređimo na problem, pozadina u html-u je cijeli ekran. Da bi stranica izgledala lijepo, morate razumjeti jedan prilično važan detalj: dovoljno je jednostavno napraviti gradijentnu pozadinu ili je obojiti jednobojnom bojom, ali ako trebate umetnuti sliku u pozadinu, to neće rastegnuti na cijelu širinu monitora. U početku morate odabrati sliku ili sami napraviti dizajn s takvim proširenjem u kojem ćete prikazati stranicu stranice. Tek nakon što je pozadinska slika spremna, prenosimo je u mapu pod nazivom "Slike". U njemu ćemo pohraniti sve korištene slike, animacije i druge grafičke datoteke. Ovaj folder bi trebao biti u korijenskom direktoriju sa svim vašim html datotekama. Sada možemo prijeći na kod. Postoji nekoliko opcija za pisanje koda koji će promijeniti pozadinu u sliku.
- Napišite oznaku atributa.
- Kroz CSS stil u HTML kodu.
- Napišite CSS stil u posebnu datoteku.
Na vama je da odlučite kako pozadinu napraviti sliku u HTML-u, ali bih želio reći nekoliko riječi o tome kako bi to bilo najoptimalnije. Prvi metod, pisanjem kroz atribut oznake, odavno je zastario. Druga opcija se koristi u vrlo rijetkim slučajevima, samo zato što ima puno istog koda. A treća opcija je najčešća i najefikasnija. Evo primjera HTML oznaka:
- Prvi način za pisanje je preko atributa oznake (tijelo) u datoteci index.htm. Piše se ovako: (pozadina tijela= "ime_fascikle/ime_slike.extension")(/body). Odnosno, ako imamo sliku sa imenom "Slika" i ekstenzijom JPG, a imenik smo nazvali kao "Slike", onda će unos HTML koda izgledati ovako: (body background="Slike/Picture.jpg" )… (/tijelo) .
- Druga metoda pisanja utiče na CSS stil, ali je napisana u istoj datoteci koja se zove index.htm. (body style="background: url("../Images/Picture.jpg")").
- I treći način snimanja je napravljen u dva fajla. U dokumentu koji se zove index.htm, sljedeći red je napisan u: (head)(link rel="stylesheet" type="text/css" href="Path_to CSS_file")(/head). A u datoteci stila pod nazivom style.css već pišemo: tijelo (pozadina: url (Slike/Slika.jpg")).
Kako napraviti pozadinu kao sliku u HTML-u, mi smo demontirali. Sada morate shvatiti kako da rastegnete sliku po cijelom ekranu.
Načini rastezanja pozadinske slike na širinu prozora
Predstavimo naš ekran kao procenat. Ispostavilo se da će cijela širina i dužina ekrana biti 100% x 100%. Moramo da rastegnemo sliku na ovu širinu. Dodajmo liniju unosu slike u datoteci style.css, koja će sliku rastegnuti na punu širinu i dužinu monitora. Kako je ovo napisano u CSS stilu? Sve je jednostavno!
pozadina: url(Slike/Slika.jpg")
veličina pozadine: 100% /* ovaj unos će raditi za većinu modernih pretraživača */
Tako smo shvatili kako napraviti sliku pozadinom u html-u na cijelom ekranu. Postoji još jedan način za pisanje u index.htm datoteku. Iako je ova metoda zastarjela, neophodno je da je početnici znaju i razumiju. U (head)(style) div ( background-size: cover; ) (/style) (/head) tag, ovaj unos znači da biramo poseban blok za pozadinu, koji će biti pozicioniran po cijeloj širini prozor. Razmotrili smo 2 načina da pozadinu stranice učinimo html slikom tako da se slika proteže na punu širinu ekrana u bilo kojem od modernih pretraživača.
Kako napraviti fiksnu pozadinu
Ako odlučite koristiti sliku kao pozadinu budućeg web resursa, onda samo trebate saznati kako je učiniti nepomičnom da se ne proteže po dužini i ne pokvari estetski izgled. Dovoljno je samo uz pomoć propisati ovaj mali dodatak. Morate dodati jednu frazu iza pozadine: url(Slike/Slika.jpg") fiksiran u datoteci style.css; ili umjesto toga dodati poseban red nakon tačke zarez - position: fixed. Tako će vaša pozadinska slika postati fiksna. Tokom pomicanja kroz sadržaj na sajtu, videćete da se linije teksta pomeraju, ali pozadina ostaje na svom mestu. Tako ste naučili kako da pozadinu napravite sliku u html-u, na nekoliko načina.
Rad sa tabelom u HTML-u
Mnogi neiskusni web programeri, kada se suoče sa tabelama i blokovima, često ne razumiju kako napraviti sliku pozadinom tablice u html-u. Kao i sve i CSS stil, ovaj web programski jezik je prilično jednostavan. A rješenje za ovaj problem će biti pisanje nekoliko linija koda. Već treba da znate da je pisanje redova i kolona tabele označeno oznakama (tr) i (td), respektivno. Da bi pozadina tabele izgledala kao slika, dodajte jednostavnu frazu oznaci (tabela), (tr) ili (td) sa vezom do slike: pozadina = URL slike. Radi jasnoće dajemo nekoliko primjera.
Tabele sa slikom umjesto pozadine: HTML primjeri
Nacrtajmo tabelu 2x3 i napravimo je pozadinom slike sačuvane u folderu “Slike”: (pozadina tabele = “Slike/Picture.jpg”) (tr) (td)1(/td) (td)2(/ td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/table) . Tako će naš stol biti oslikan u pozadini slike.
Sada nacrtajmo istu tabelu dimenzija 2x3, ali ubacimo sliku u kolone pod brojem 1, 4, 5 i 6. (tabela)(tr)(td background = “Slike/Slika.jpg”)1(/td) (td )2 (/td) (td)3(/td)(/tr) (tr)(td pozadina = “Slike/Slika.jpg”)4(/td) (td pozadina = “Slike/Slika.jpg”) 5( /td) (td background = “Slike/Slika.jpg”)6(/td) (/tr) (/table). Nakon pregleda vidimo da se pozadina pojavljuje samo u onim ćelijama u kojima smo se registrovali, a ne u cijeloj tabeli.
Stranica sa više pretraživača
Postoji i takva stvar kao što je web resurs za više pregledača. To znači da će stranice stranice biti jednako ispravno prikazane u različitim tipovima i verzijama pretraživača. U tom slučaju morate prilagoditi HTML kod i CSS stil za potrebne pretraživače. Osim toga, u modernoj eri razvoja pametnih telefona, mnogi web programeri pokušavaju kreirati stranice koje su prilagođene i mobilnoj verziji i prikazu na računaru.
