U ovom postu ću vam reći kao i obično postavite pozadinu stranice korištenjem HTML kodirati.
Također ću vam pokazati izvrsnu inozemnu uslugu za odabir bešavnih pozadina.
Danas su postavke web stranice lakše i praktičnije putem CMS konzola kao što je WordPress.
Možda će biti potrebno promijeniti predloške prodajnih web stranica, ovaj će vam članak pomoći u tome.
Ako ne znate što je to HTML, onda se to općenito može nazvati jezikom web stranica ili skupom pravila prema kojima se web stranice generiraju.
Na primjer, vidite sliku na web stranici, ali u HTML kodu stranice može izgledati ovako:
Postavite jednobojnu pozadinu stranice.
Kako bi instalirali jednobojna pozadina, treba označiti dodati atribut bgcolor.
< html >
< head >
< title >Naslov stranice.
< body bgcolor = "#ffcc00" >
Možete zalijepiti ovaj kôd u tekstualnu datoteku i spremiti ga s nastavkom .html. Zatim ga otvorite bilo kojim preglednikom i pogledajte rezultat.
Kao što ste vjerojatno pogodili, boja pozadine pojavljuje se zbog koda boje u atributu bgcolor= "vrijednost", koji možete pronaći na ovoj poveznici.
Postavljanje slike na pozadinu HTML stranice.
Da bi postavite sliku na pozadinu, možete koristiti atribut pozadina 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 pozadina jednak je putanji datoteke koja se koristi kao pozadina.
Da biste brzo promijenili pozadinu ili bilo koju sliku na stranici, samo navedite novi put do datoteke pomoću uređivača teksta.
Da biste saznali prethodni put, morate otići na stranicu sa slikom, desnom tipkom miša kliknuti na sliku i kliknuti na “Kopiraj URL slike”. na taj način ćete vidjeti naziv slike/pozadine. Tada možete jednostavno zamijeniti staru sliku svojom vlastitom, koristeći isti naziv datoteke.
To su bile najjednostavnije osnove za postavljanje pozadina u html-u, sada dolazi zanimljiv dio. 🙂
Moderni preglednici omogućuju dodavanje proizvoljnog broja pozadinskih slika elementu, navodeći parametre svake pozadine odvojene zarezima. Dovoljno je koristiti svojstvo univerzalne pozadine i za nju prvo odrediti jednu pozadinu, a drugu odvojenu zarezom.
Kako rastegnuti pozadinu na punu širinu prozora?
Za skaliranje pozadine upotrijebite svojstvo veličine pozadine; postavite njegovu vrijednost na 100%, tada će pozadina zauzeti cijelu širinu prozora preglednika. Za starije verzije preglednika trebali biste koristiti određena svojstva s prefiksima, kao što je prikazano u primjeru 1.
Kako dodati pozadinsku sliku na web stranicu?
Da biste dodali pozadinsku sliku na web stranicu, postavite put do slike unutar url vrijednosti svojstva stila pozadine, koje se zauzvrat dodaje izborniku tijela.
Je li moguće napraviti animiranu pozadinu?
Animacija je prilično moćna tehnika koja može oživjeti svaki dokument, stoga ne čudi što je Flash tehnologija, koja na web stranice dodaje crtiće, i to interaktivne, postala iznimno popularna. GIF grafički format također podržava jednostavnu animaciju uzastopnom izmjenom okvira. Dakle, koristeći sliku u ovom formatu, moguće je animirati ne samo pojedinačne slike, već i pozadinu web stranice ili određeni element.
Najprije ćete morati izraditi animiranu sliku u GIF formatu, za što možete koristiti Adobe Photoshop ili neki drugi prikladan program za tu svrhu. Postoje i biblioteke gotovih animiranih datoteka koje se mogu koristiti kao pozadinska slika. Zatim se slika dodaje kao pozadina pomoću svojstva stila pozadine, kao što je prikazano u primjeru 1.
Kako staviti pozadinsku sliku u donji desni kut stranice?
Za kontrolu položaja pozadinske slike na stranici koristi se svojstvo stila položaja pozadine; njime se istovremeno postavljaju vodoravne i okomite koordinate slike. Za otkazivanje ponavljanja pozadinske slike upotrijebite svojstvo background-position s vrijednošću no-repeat.
Kako mogu spriječiti ponavljanje pozadine?
Prema zadanim postavkama, pozadinska slika se ponavlja vodoravno i okomito, tvoreći mozaik preko cijelog polja web stranice. Međutim, ovo ponašanje pozadine nije uvijek potrebno, osobito kada se postavlja jedna slika, pa će dodavanje vrijednosti bez ponavljanja svojstvu stila pozadine pomoći.
Kako mogu učiniti da se pozadina ponavlja samo okomito?
Ponavljanje pozadine obično je potrebno za stvaranje ukrasnih linija ili gradijenata koji su povezani s visinom elementa web stranice ili prozora. U takvim slučajevima okomito ponavljanje pozadine daje dosljednu sliku, bez obzira na veličinu elemenata. Samo na početku trebali biste se uvjeriti da se pozadinska slika ponavlja bez šavova.
Boja pozadine je prilično važan element svake web stranice. Prvo, postavlja željeno raspoloženje i opće raspoloženje stranice, a drugo, olakšava percepciju teksta.
Boja pozadine web stranice postavlja se pomoću atributa bgcolor oznake
.Primjer 1: Promjena boje pozadine
Boja se može odrediti kao heksadecimalna vrijednost ili svojim imenom.
Iako možete odrediti bilo koju boju za pozadinu, većina web-mjesta koristi pretežno bijelu pozadinu i crna slova kao najčešću opciju.
Pozadinska slika
Kao pozadinu možete koristiti bilo koju prikladnu sliku. Pozadina ne smije odvlačiti pažnju s teksta, već se treba dobro uklopiti u shemu boja web stranice i biti male veličine kako bi se brzo učitavala. Ako nakon svega navedenog još uvijek želite dodati pozadinsku sliku na stranicu, trebali biste koristiti atribut pozadine oznake
.Primjer 2: Dodavanje pozadine
Ako je slika manja od veličine zaslona monitora, bit će proširena vodoravno i okomito.
Budući da se pozadinska slika učitava sporije od pozadinske boje, možete završiti s nečitljivim tekstom neko vrijeme dok se slike ne učitaju. Ista stvar se može dogoditi ako su slike onemogućene u pregledniku. Stoga se preporuča da boju pozadine uvijek postavite zajedno s pozadinskom slikom (primjer 3).
Primjer 3: Korištenje pozadinske slike i boje pozadine
Fiksna pozadina
Prema zadanim postavkama, kada koristite traku za pomicanje, pozadinska se slika pomiče zajedno sa sadržajem web stranice. Internet Explorer vam omogućuje da pozadinu učinite fiksnom pomoću atributa oznake bgproperties ="fixed".
.Primjer 4: Postavljanje fiksne pozadine
Određivanjem atributa bgproperties, kao što je prikazano u primjeru 4, pozadinska slika na web stranici ostat će nepomična, ali će se tekst, grafika i drugi elementi pomicati s trakom za pomicanje.
Za izradu web stranice 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 monokromatskom - ispuniti ili staviti bilo koju sliku umjesto pozadine. Takve radnje bit će vrlo korisne za sve dizajnere izgleda, kao i za one koji odluče sami "dotjerati" svoju web stranicu.
Izrada pozadine
Prije nego što napravite html pozadinu web stranice, morate otvoriti html kod stranice u uređivaču teksta. Morate zapamtiti da su oznake na stranici postavljene okomito. Zatim, između oznaka
… , morate staviti oznaku- ove su oznake potrebne za razjašnjavanje stila elemenata određene web stranice. Umjesto tri točke potrebno je napisati - body (background:) . Ovo je opcija koja vam omogućuje postavljanje različitih stilova za pozadinu stranice. Radnju postavljanja boje možete izvesti na dva načina. Prvi:Tijelo (pozadina:#000000) – pozadina stranice sada bi trebala biti crna.
Ova je metoda također prikladna za postavljanje boje i slike kao pozadine. Nakon dvotočke možete staviti kod boje ili poveznicu na sliku. Ili možete upotrijebiti metodu koja znači samo postavljanje boje - određene ispune za stranicu. Nakon dvotočke potrebno je napisati tzv. parametar – boju. A nakon njega stavite šifru same boje. Ova metoda je dobra ako je koristite kao predložak. Zapišite i spremite, a po potrebi postavite boju i stavite na stranicu.
Možete staviti sliku umjesto obične pozadine. Ako trebate saznati: u html-u, kako napraviti sliku kao pozadinu, tada je potrebno izvršiti slične operacije. Napišite oznake, stavite tijelo (pozadina: link na sliku). Moramo zapamtiti da sama slika može biti bilo gdje. I na web stranici na internetu, ali najbolje je stvoriti mapu u korijenu dokumenta. U mapi u kojoj će se spremati svi podaci o stranici stranice, morate stvoriti 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 pokušajte i sve će sigurno uspjeti!
Mnogi početnici dizajneri izgleda, koji samo zalaze u bit stvaranja web stranica, često se pitaju kako napraviti pozadinu kao sliku u html-u. Čak i ako neki ljudi mogu shvatiti ovaj zadatak, problemi i dalje nastaju kada se slika rasteže preko cijele širine monitora. U isto vrijeme, želio bih da se stranica prikazuje jednako na svim preglednicima, tako da mora biti zadovoljen uvjet za više preglednika. Pozadinu možete postaviti na dva načina: koristeći CSS stil. Svatko odabire najoptimalniji izbor za sebe. Naravno, CSS stil je mnogo praktičniji, jer je njegov kod pohranjen u zasebnoj datoteci i ne zauzima dodatne stupce u glavnim oznakama web mjesta, ali prvo pogledajmo jednostavnu metodu postavljanja slike na pozadina stranice.
Osnovne HTML oznake za izradu pozadine
Dakle, prijeđimo na pitanje, podloga u html-u na cijelom ekranu. Da bi stranica izgledala lijepo, morate razumjeti jedan prilično važan detalj: dovoljno je samo napraviti gradijentnu pozadinu ili je obojiti jednobojnom bojom, ali ako trebate umetnuti sliku u pozadinu, ona se neće rastegnuti preko cijele širine monitora. U početku trebate odabrati sliku ili sami izraditi dizajn s ekstenzijom u kojoj će biti prikazana stranica vaše stranice. Tek nakon što je pozadinska slika spremna, prenesite je u mapu pod nazivom "Slike". U njemu ćemo pohraniti sve slike, animacije i druge grafičke datoteke koje koristimo. Ova bi mapa trebala biti u korijenskom direktoriju svih vaših html datoteka. Sada možete prijeći na kod. Postoji nekoliko opcija za pisanje koda koji će promijeniti pozadinu slike.
- Napiši atribut oznake.
- Kroz CSS stil u HTML kodu.
- Zapišite CSS stil u zasebnu datoteku.
Kako napraviti pozadinu kao sliku u HTML-u ovisi o vama, ali želio bih reći nekoliko riječi o tome kako bi to bilo najoptimalnije. Prva metoda, koja koristi pisanje kroz atribut oznake, odavno je zastarjela. Druga opcija se koristi u vrlo rijetkim slučajevima, samo zato što se dobije puno istog koda. A treća opcija je najčešća i učinkovita. Evo HTML primjera oznaka:
- Prvi način pisanja je kroz atribut oznake (tijelo) u datoteci index.htm. Napisan je u sljedećem obliku: (body background= "Folder_name/Image_name.extension")(/body). Odnosno, ako imamo sliku s nazivom “Picture” i ekstenzijom JPG, a mapu smo nazvali “Images”, tada će unos HTML koda izgledati ovako: (body background="Images/Picture.jpg") … (/tijelo) .
- Druga metoda snimanja utječe na CSS stil, ali je zapisana u istoj datoteci pod nazivom index.htm. (tijelo style="background: url("../Images/Picture.jpg")").
- I treći način snimanja je napravljen u dvije datoteke. U dokumentu pod nazivom index.htm napisan je sljedeći redak: (head)(link rel="stylesheet" type="text/css" href="Path_to_CSS_file")(/head). A u datoteci stila pod nazivom style.css već pišemo: body (background: url(Images/Picture.jpg")).
Raspravljali smo o tome kako napraviti pozadinsku sliku u HTML-u. Sada morate razumjeti kako rastegnuti sliku preko širine cijelog zaslona.
Načini rastezanja pozadinske slike na širinu prozora
Zamislimo naš ekran u obliku postotaka. Ispada da će cijela širina i duljina zaslona biti 100% x 100%. Moramo rastegnuti sliku na ovu širinu. Dodajmo redak unosu slike u datoteci style.css, koji će rastegnuti sliku na cijelu širinu i duljinu monitora. Kako je ovo napisano u CSS stilu? Jednostavno je!
pozadina: url(Images/Picture.jpg")
veličina pozadine: 100%; /* ovaj unos je prikladan za većinu modernih preglednika */
Pa smo shvatili kako napraviti sliku kao pozadinu u html-u da ispuni cijeli zaslon. Također postoji način pisanja u datoteku index.htm. Iako je ova metoda zastarjela, neophodno je da je početnici poznaju i razumiju. U (head)(style) div ( background-size: cover; ) (/style) (/head) tagu, ovaj unos znači da dodjeljujemo poseban blok za pozadinu, koja će biti postavljena preko cijele širine prozor. Proučili smo 2 načina kako pozadinu web stranice učiniti HTML slikom tako da se slika proteže preko cijele širine zaslona u bilo kojem modernom pregledniku.
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 tako da se ne rasteže u duljinu i ne pokvari estetski izgled. Dovoljno je lako napisati ovaj mali dodatak uz pomoć. Morate dodati jednu frazu u datoteci style.css nakon pozadine: url(Images/Picture.jpg") fixed; ili umjesto toga dodajte zasebnu liniju nakon točke i zareza - position: fixed. Tako će vaša pozadinska slika postati nepomična. Tijekom Listajući sadržajem na stranici, vidjet ćete da se linije teksta pomiču, ali pozadina ostaje na mjestu. Dakle, naučili ste kako u html-u na nekoliko načina napraviti pozadinu kao sliku.
Rad s tablicom u HTML-u
Mnogi neiskusni web programeri, kada se suoče s tablicama i blokovima, često ne razumiju kako napraviti sliku kao pozadinu tablice u HTML-u. Kao i svi CSS stilovi, ovaj web programski jezik prilično je jednostavan. A rješenje za takav problem bilo bi napisati nekoliko redaka koda. Trebali biste već znati da se pisanje redaka i stupaca tablice naziva (tr) odnosno (td) oznakama. Da biste napravili pozadinu tablice u obliku slike, morate oznaci (table), (tr) ili (td) dodati jednostavnu frazu koja označava poveznicu na sliku: pozadina = URL slike. Radi jasnoće, navedimo nekoliko primjera.
Tablice sa slikom umjesto pozadine: HTML primjeri
Nacrtajmo tablicu 2x3 i učinimo njenu pozadinu slikom spremljenom u mapi “Images”: (pozadina tablice = “Images/Picture.jpg”) (tr) (td)1(/td) (td)2(/td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/tablica). Na taj način će naš stol biti oslikan u pozadini slike.
Sada nacrtajmo istu ploču dimenzija 2x3, ali ubacimo sliku u stupce označene brojevima 1, 4, 5 i 6. (tablica)(tr)(td pozadina = “Slike/Slika.jpg”)1(/td) (td )2 (/td) (td)3(/td)(/tr) (tr)(td pozadina = “Slike/Slike.jpg”)4(/td) (td pozadina = “Slike/Slike.jpg”) 5( /td) (td pozadina = “Slike/Slike.jpg”)6(/td) (/tr) (/tablica). Nakon pregleda vidimo da se pozadina pojavljuje samo u onim ćelijama u koje smo se registrirali, a ne u cijeloj tablici.
Kompatibilnost stranice s različitim preglednicima
Postoji i takva stvar kao što je kompatibilnost web resursa s više preglednika. To znači da će stranice stranice biti jednako ispravno prikazane u različitim vrstama i verzijama preglednika. U tom slučaju trebate prilagoditi HTML kod i CSS stil traženim preglednicima. Osim toga, u modernoj eri razvoja pametnih telefona, mnogi web programeri pokušavaju stvoriti stranice prilagođene i mobilnim verzijama i prikazima na računalu.
