Koja oznaka određuje tip dokumenta. Direktive komentara i Doctype u Html kodu, kao i koncept blok i inline elemenata (tagova). Nekonvertirani znakovi u URL-u

Lista

Provjerite da li su oznake ispravno ugniježđene u trenutnom elementu i da li su prisutni potrebni elementi.

Poruka se javlja zbog prethodne greške na stranici.

Ispravite prethodne greške.

U kodu nije umetnuta oznaka.

Naslov

Dodajte kontejner.

Oznaka se koristi više puta u dokumentu bez priloga. Dozvoljeno je umetanje nekoliko elemenata, ali ugniježđenih jedan u drugi.

Koristite ugniježđene oznake.

Navedena oznaka nije dio HTML specifikacije.

tekst bez crtica

tekst bez crtica

Uklonite oznaku ili je zamijenite odgovarajućim ekvivalentom.

Oznaka nije prepoznata i nije dio HTML specifikacije.

desno:

Pogrešno:

Tekst

Uklonite nepoznatu oznaku.

Kontejner je prazan ili sadrži samo razmak.

Uklonite oznaku ili dodajte tekst unutar kontejnera.

U završnoj oznaci nedostaje kosa crta.

Rješenje

Promijenite redoslijed oznaka ili uklonite jednu od oznaka za otvaranje ili zatvaranje.

... sidro "..." je već definirano

Vrijednosti atributa imena različitih oznaka međusobno se podudaraju. Vrijednost imena mora biti jedinstvena.

Rješenje

Odaberite drugo ime ili promijenite prethodna imena tako da ne budu ista.

vjerovatno je zamišljen kao

Oznaka se ponavlja dva puta u HTML kodu, dok takva oznaka ne bi trebalo da sadrži samu sebe.

Zdravo svijete!

Zdravo svijete!

Rješenje

Uklonite jednu od oznaka.

nedostaje atribut "...".

Obavezni atribut oznake je obavezan, ali nedostaje.

Osnove HTML-a sadrže osnovna pravila HTML jezika, opis strukture HTML stranice i odnose u strukturi HTML dokumenta između HTML elemenata.

HTML dokument je običan tekstualni dokument koji se može kreirati ili u običnom uređivaču teksta (Notepad) ili u specijalizovanom sa isticanjem koda (Notepad++, Visual Studio Code, itd.). HTML dokument ima ekstenziju .html.

HTML dokument se sastoji od stabla HTML elemenata i teksta. Svaki element je identificiran u izvornom dokumentu početnom (otvaranjem) i završnom (završnom) oznakom (sa rijetkim izuzecima).

Početna oznaka pokazuje gdje element počinje, a krajnja oznaka gdje završava. Završna oznaka se formira dodavanjem kose crte / ispred naziva oznake: .... Između početne i završne oznake nalazi se sadržaj oznake – sadržaj.

Pojedinačne oznake ne mogu direktno pohraniti sadržaj, on se piše kao vrijednost atributa, na primjer, oznaka će kreirati dugme sa tekstom Button unutra.

Oznake mogu biti ugniježđene jedna unutar druge, na primjer,

Tekst

. Prilikom ulaganja treba slijediti redoslijed kojim se zatvaraju (princip „matrjoške“), na primjer, sljedeći unos će biti netačan:

Tekst

.

HTML elementi mogu imati atribute (globalne, primijenjene na sve HTML elemente i njihove vlastite). Atributi se upisuju u početnu oznaku elementa i sadrže ime i vrijednost, navedene u formatu atributa name="value" . Atributi vam omogućavaju da promijenite svojstva i ponašanje elementa za koji su postavljeni.

Svakom elementu se može dodijeliti više vrijednosti klase i samo jedna vrijednost ID-a. Višestruke vrijednosti klasa se pišu odvojeno razmakom, . Vrijednosti klase i id-a moraju se sastojati samo od slova, brojeva, crtica i donjih crta i moraju početi samo slovima ili brojevima.

Pregledač pregleda (tumači) HTML dokument, gradi njegovu strukturu (DOM) i prikazuje ga u skladu sa uputstvima uključenim u ovu datoteku (tablice stilova, skripte). Ako je oznaka ispravna, prozor pretraživača će prikazati HTML stranicu koja sadrži HTML elemente - zaglavlja, tabele, slike itd.

Proces interpretacije (parsing) počinje prije nego što se web stranica u potpunosti učita u pretraživač. Pretraživači obrađuju HTML dokumente uzastopno, od početka, dok obrađuju CSS i povezuju stilove sa elementima stranice.

HTML dokument se sastoji od dva dijela - zaglavlja - između oznaka ... i dijela sadržaja - između oznaka ....

Struktura web stranice 1. Struktura HTML dokumenta

HTML prati pravila sadržana u datoteci deklaracije tipa dokumenta (Definicija vrste dokumenta, ili DTD). DTD je XML dokument koji definira koje oznake, atributi i njihove vrijednosti vrijede za određeni HTML tip. Svaka verzija HTML-a ima svoj DTD.

DOCTYPE je odgovoran za ispravan prikaz web stranice od strane pretraživača. DOCTYPE specificira ne samo HTML verziju (npr. html) već i odgovarajuću DTD datoteku na Internetu.

...

Elementi unutar oznake formiraju stablo dokumenta, takozvani model objekta dokumenta, DOM (model objekta dokumenta). U ovom slučaju, element je korijenski element.

Rice. 1. Najjednostavnija struktura web stranice

Da bismo razumjeli interakciju elemenata web stranice, potrebno je razmotriti takozvane „porodične odnose“ između elemenata. Odnosi između više ugniježđenih elemenata klasificirani su kao roditelj, dijete i sestra.

Predak je element koji sadrži druge elemente. Na slici 1, predak za sve elemente je . Istovremeno, element je predak svih oznaka koje sadrži: ,

, , itd.

Potomak je element koji se nalazi unutar jednog ili više tipova elemenata. Na primjer, je potomak , i element

Potomak je oba i .

Roditeljski element je element koji je povezan sa drugim elementima na nižem nivou i nalazi se iznad njih u stablu. Na slici 1 i . Tag

Je roditelj samo za .

Podređeni element je element koji je direktno podređen drugom elementu na višem nivou. Na slici 1 postoje samo elementi , ,

I su djeca od .

Sestrinski element je element koji ima zajednički roditeljski element sa dotičnim, takozvani elementi istog nivoa. Na slici 1 i su elementi istog nivoa, kao i elementi , i

One su jedna drugoj sestre.

1.1. Element 1.2. Element

Odjeljak ... sadrži tehničke informacije o stranici: naslov, opis, ključne riječi za pretraživače, kodiranje itd. Informacije koje tamo unesete se ne prikazuju u prozoru pretraživača, ali sadrže informacije koje govore pretraživaču kako da obradi stranicu.

1.2.1. Element

Potrebna oznaka odjeljka je . Tekst postavljen unutar ove oznake pojavljuje se u naslovnoj traci web pretraživača. Naslov ne smije biti duži od 60 znakova kako bi se u potpunosti uklopio u naslov. Tekst naslova treba da sadrži najpotpuniji opis sadržaja web stranice.

1.2.2. Element

Opcionalna oznaka odjeljka je jedna oznaka. Uz njegovu pomoć možete postaviti opis sadržaja stranice i ključne riječi za tražilice, autora HTML dokumenta i druga svojstva metapodataka. Element može sadržavati više elemenata jer nose različite informacije ovisno o korištenim atributima.

Opis sadržaja stranice i ključnih riječi mogu se istovremeno navesti na nekoliko jezika, na primjer, na ruskom i engleskom:

Koristeći oznaku, možete blokirati ili dozvoliti indeksiranje web stranice od strane pretraživača:

Da biste automatski ponovo učitali stranicu nakon određenog vremenskog perioda, trebate koristiti vrijednost osvježavanja:

Stranica će se ponovo učitati nakon 30 sekundi. Da biste preusmjerili posjetitelja na drugu stranicu, potrebno je navesti URL u url parametru:

Da biste komentarisali, morate se registrovati.

Pozdrav, dragi čitaoci blog stranice. Želim da nastavim da pričam o osnovama rada sa HTML-om od samog početka, dosledno i ne izostavljajući ništa. Danas ćemo govoriti o posebnoj oznaci Doctype (deklaraciji), naučiti kako pravilno formatirati komentare u HTML kodu, kako napisati naslov web dokumenta i pokušati razumjeti razlike između blok i inline elemenata.

U prethodnom članku iz odjeljka (o kojem se uglavnom govorilo) završili smo činjenicom da svaki dokument na internetu mora imati određenu strukturu.

Prvi element jezika za označavanje na koji ćete naići u bilo kojem običnom web dokumentu (stranici web-mjesta) bit će posebna direktiva Doctype. Počinje uglom zagradom nakon čega odmah slijedi uzvičnik.

Sam element Doctype služi za deklarisanje tipa datog dokumenta i pomaže pretraživaču da shvati na koju verziju Html-a ili XHTML-a (kako ih klasifikuje W3C validator) treba da se osloni kada analizira kod učitane veb stranice.

Ako tip dokumenta nije naveden u ovoj direktivi u skladu sa opšteprihvaćenim pravilima, onda će pretraživač najvjerovatnije i dalje ispravno prikazati vaš dokument, ali nije činjenica da će druge popularne hiljade vaših čitalaca učiniti isto. Prema tome, Doctype mora biti prisutan u izvornom kodu stranice i mora biti ispravno kompajliran.

Ali hajde da se zadržimo na ovome malo detaljnije. Sada vidimo neku vrstu dualizma, odnosno dvije vrste dokumenata na Internetu – kao što su to radili prije odvajanja CSS-a iz utrobe HTML jezika i kako sada rade prema prihvaćenim modernim standardima.

Naravno, nakon usvajanja novih standarda, na Internetu je i dalje postojao ogroman broj dokumenata kreiranih po starim principima čistog HTML-a (bez CSS-a) i pretraživači su morali nekako da rade s njima. Microsoft je svojevremeno predložio korištenje ove direktive Doctype iz novog XML jezika za označavanje.

Možda izgleda drugačije (čitajte o tome u nastavku), ali najlakši način je koristiti ovu opciju (objasnit ću zašto malo niže u tekstu):

Na ovaj način pretraživač će razumjeti koje standarde treba koristiti za raščlanjivanje koda dokumenta. Ako se ova deklaracija dogodi, pretraživač se prebacuje u standardni način rada. Ako ga pretraživač ne pronađe na samom početku dokumenta (ili ne odgovara ispravnom pravopisu), tada će pretraživač uključiti način rada lukavih trikova.

Dokument će u ovom slučaju biti prikazan kao da je ovaj pretraživač veoma star (vintage). Ako dodate deklaraciju istom dokumentu, pretraživač će raščlaniti kod uzimajući u obzir sve trenutno dostupne standarde.

Istina, koncept starog pretraživača je vrlo nejasan. Isti lider u brzini rada i brzini prodora u srca korisnika, Google Chrome, pojavio se tek 2008. godine.

Počnimo sa standardom HyperText Markup Language standarda 4.01 (HTML 5 je još u razvoju). Za ovaj slučaj, postoje tri opcije Doctype: stroga, prijelazna i omogućena okvirom:

Druga opcija (Tranziciona) se najčešće koristi, jer dozvoljava više slobode u pisanju koda dokumenta, ali opcija sa okvirima vam verovatno neće biti od koristi, zbog nebitnosti njihove upotrebe danas.

Zapravo, postoje tri iste opcije Doctype za XHTML - stroga, prelazna i sa podrškom za okvir:

Ali da vidimo odakle dolaze ove opcije za ispravno pisanje deklaracije. Zapamtite, u prvom članku pogledali smo tabelu prihvatljivih:

I posebna tabela mogućih:

Kao što možete vidjeti, u obje ove tabele postoji kolona „Depr“, u kojoj je slovo „D“ označeno zastarjelim i zastarjelim HTML oznakama i atributima. Ovo smo već razmotrili. Ali imajte na umu da pored svakog “D” u desnoj susjednoj koloni “DTD” stoji ili “L” (Labavi DTD) ili “F” (Frameset DTD).

To. sve oznake i atributi koji nisu označeni sa "D" (ne preporučuju se) su uključeni u strogu dekoraciju Doctype (samo preporučeni elementi i ništa više). Ako i dalje dopuštate upotrebu nepreporučenih oznaka i atributa HTML jezika (označeni su slovom “D”), tada ćete morati deklarirati prijelaznu deklaraciju za takve dokumente.

Neki elementi i atributi označeni sa "F" u koloni "DTD" (npr. FRAME, FRAMESET) će biti uključeni u deklaraciju Doctype za strukture okvira. Zasnovan je na prijelaznom, kojem se za kreiranje dodaju oznake i atributi, o čemu možete pročitati na navedenom linku.

Pokušajmo sada shvatiti od kojih dijelova se sastoji deklaracija Doctype?

Prvo dolazi naziv - “Doctype”. Ovdje je, mislim, sve jasno. Slijedi “Html” - osnovni element ovog markup jezika. Zatim slijedi naznaka da li je ova deklaracija javna ili sistemska. Sve varijante Doctype su javne, što je označeno riječju “PUBLIC”.

I onda postoje dva identifikatora dokumenta. Prvi se zove javni identifikator (“-//W3C//DTD HTML 4.01//EN”). Minus znači da ova deklaracija nije registrovana u ISO standardu. Nakon toga slijedi naziv konzorcijuma, njegov naziv i jezik na kojem je napisan. Drugi identifikator specificira putanju do datoteke stroge varijante.

Pa, dozvolite mi da vam sada kažem cijelu istinu o Doctypeu. Pretraživačima je stalo samo do njegovog formalno ispravnog pravopisa, ali nikada neće otići na web stranicu konzorcija da bi preuzeli datoteku navedenu u njoj.

Čak i ako odaberete opciju stroge deklaracije i istovremeno koristite oznake i atribute koji se ne preporučuju u modernoj verziji Html-a, tada će vas svaki pretraživač i dalje ispravno razumjeti - to je provjerena i potvrđena činjenica.

Stoga, bez daljeg odlaganja, u Html 5 pisanje Doctype će izgledati ovako:

To je sve. Ostao je samo “Html”. I uprkos činjenici da HTML 5 još nije u potpunosti implementiran, ovu opciju podržavaju svi moderni pretraživači i možete je bezbedno koristiti. Oh kako, a ti kazes...

U servisnoj zoni web dokumenta (između oznaka Head), naslov ovog dokumenta (web stranice) mora biti napisan, zatvoren u elementima naslova (pogledajte na slici ispod).

Veoma je teško precijeniti značaj informacija sadržanih u njemu (ne pretjerujem). Kada odaberete ključne riječi u Yandex Wordstat-u (koristeći za ovu svrhu), tada ćete nakon sastavljanja semantičkog jezgra svakako morati spomenuti odabrane ključne riječi u zaglavlju naslova.

Koliko su riječi sadržane u naslovu važne za buduću uspješnu promociju projekta, možete saznati iz članka, a iz članka ćete naučiti kako napisati riječi koje su vam potrebne u naslovu za Joomla i WordPress.

Sada, prije nego što pređemo na razmatranje specifičnih oznaka, zadržimo se na konceptu kao što su komentari u HTML kodu. Često su uključeni kako bi se kasnije lakše pronašli pravi dijelovi ili kako bi drugi lakše razumjeli namjeru autora. Podrazumijeva se da tekst ovih komentara ni pod kojim uvjetima ne smije biti prikazan na web stranici, pa su u kodu oblikovani na poseban način.

Komentari u Html-u su bili posebno relevantni za vrijeme vladavine rasporeda tablice (čitajte o tome), jer se tada, u poređenju sa modernim rasporedom blokova (opisanim ovdje na primjeru), bilo vrlo lako zbuniti šta je prikazano u kojoj ćeliji tabele:

Vjerovatno ste iz gornjeg primjera već shvatili da svi komentari u HTML jeziku počinju na isti način kao i svi drugi elementi - ugaonom zagradom, ali odmah nakon njega, prilikom kreiranja komentara, morat ćete staviti uzvičnik (kada sam opisivao Doctype spomenuo sam da su i komentari deklaracije, koje moraju početi sa

Sav tekst komentara koji će se nalaziti između ovih dvostrukih crtica pregledači će smatrati servisnom informacijom i neće biti obrađen ni na koji način. Ispravnost njegovog pisanja može se jasno ocijeniti korištenjem opisanog:

Ali unutar komentara možete staviti ne samo tekst, već i sve što vam se sviđa. Na primjer, vrlo često postoje komentarisani fragmenti Html koda i ovaj odjeljak neće biti obrađen od strane pretraživača. Ono što je izvanredno je da se komentar može otvoriti na jednom redu koda, a zatvoriti čak i nakon stotinu redova, a dio koda koji je tako zatvoren za pretraživač jednostavno će prestati da postoji.

Sve je prilično jednostavno i mislim da sa njima nećete imati problema. Iako postoji jedna suptilnost u radu sa višerednim komentarima u HTML-u. Ne možete staviti drugi u jedan komentar, inače dio komentarisanih informacija može biti prikazan od strane pretraživača na web stranici. Pogledajmo ovu konstrukciju kao primjer:

nastavak eksternog komentara-->

Dakle, prilikom raščlanjivanja koda web stranice, pretraživač će otkriti početne znakove deklaracije komentara i početi tražiti završne. Pronaći će ga iza riječi “Priloženi komentar”, ali sve ostalo (u našem slučaju ovo je nastavak vanjskog komentara ->) će biti obrađeno od strane pretraživača i prikazano na web stranici.

U principu, ako koristite uređivač s pozadinskim osvjetljenjem kada pišete HTML kod, odmah ćete primijetiti da nešto nije u redu zbog promjene boje vašeg komentara:

Sve oznake koje se mogu koristiti unutar Body elemenata (ono što se prikazuje na web stranici i čiju listu možete pronaći u W3C validatoru) mogu se podijeliti u dvije grupe: inline i blok oznake.

Blok elementi se koriste za izgradnju strukture web dokumenta, a inline elementi se koriste za formatiranje dijelova teksta (redova). Štaviše, uvijek morate slijediti jedno nepokolebljivo pravilo - nemojte zatvarati blok oznake unutar malih slova.

Najupečatljiviji i najindikativniji predstavnici linija i blok oznaka su, redom, Div (blok element - otuda naziv blok raspored) i Span (linija). Ove oznake jezika za označavanje hiperteksta su uparene, tj. imaju oznaku za otvaranje i zatvaranje.

Općenito, Div i Span oznake nemaju apsolutno nikakvu svrhu ili značenje u čistom HTML-u bez upotrebe CSS kaskadnih stilova. Oni su kontejneri koji vam omogućavaju da promijenite svojstva elemenata koje sadrže putem CSS-a.

Ako u izvornom kodu stranice upišete nekoliko Div elemenata zaredom, tada će na web stranici svaki od njih najvjerovatnije pokušati zauzeti sav raspoloživi prostor u širini, pa će se takvi spremnici nalaziti jedan ispod drugog. . U normalnim uslovima, Div kontejneri neće stajati jedan pored drugog osim ako ih na to ne prisilite.

Na primjer, ovaj HTML kod će biti prikazan u tri bloka smještena jedan ispod drugog:

U Firefox pretraživaču, uz jedan vrlo koristan, koristim i dodatak koji puno pomaže kod . Između ostalog, može prikazati blok elemente okružujući ih okvirom. Upravo je ovaj programski dodatak kreirao plave okvire oko Div kontejnera na gornjoj slici ekrana.

Span oznake mogu sadržavati dijelove teksta (redove) Html koda kako bi im dali određena svojstva putem CSS-a, a takvi elementi mogu biti postavljeni u isti red jedan pored drugog. Na primjer, ovaj kod u pretraživaču će izgledati ovako:

Sadržaj Span ovdje je također istaknut pomoću dodatka za web programere. Jer Pošto su Span elementi inline, ne biste trebali zatvarati blok oznake unutar njih, na primjer, iste Div kontejnere.

Sretno ti! Vidimo se uskoro na stranicama blog stranice

Možda ste zainteresovani

Šta je jezik za označavanje hiperteksta Html i kako pogledati listu svih oznaka u W3C validatoru
Oznake i atributi naslova H1-H6, horizontalna linija Hr, prijelom reda Br i paragraf P prema Html 4.01 standardu
Font (lice, veličina i boja), blok citata i pre tagovi - naslijeđeno formatiranje teksta u čistom HTML-u (ne koristi se CSS)
Liste u Html kodu - UL, OL, LI i DL oznake
Kako umetnuti link i sliku (fotografiju) u HTML - IMG i A tagove
Znakovi razmaka i njihovo oblikovanje koda u HTML-u, kao i posebni znakovi razmaka i druge mnemonike
Kako se postavljaju boje u Html i CSS kodu, odabir RGB nijansi u tabelama, Yandex izlaz i drugi programi Select, Option, Textarea, Label, Fieldset, Legend - Html oznake u obliku padajućih lista i tekstualnih polja
Kako napraviti hipervezu (A, Href, Target blank), kako je otvoriti u novom prozoru na sajtu, a takođe napraviti sliku kao link u HTML kodu
Iframe i Frame - šta su to i kako najbolje koristiti okvire u HTML-u

Pozdrav dragi početnici webmasteri. U ovoj lekciji ćemo raditi na izgledu naše web stranice.

Kao što sam ranije napisao, izgled stranice kreira predložak.

A u ovoj lekciji ćemo naučiti kako promijeniti WordPress predložak, odnosno promijeniti boje, veličine, raspored elemenata, sliku u zaglavlju stranice i općenito sve što vidimo pri ulasku na stranicu.

Ali prije nego što počnete, preporučljivo je proći kroz i, ili barem imati pri ruci referentnu literaturu, inače, mnogo od onoga o čemu ću ovdje govoriti jednostavno neće biti jasno.

Možete, naravno, koristiti moj, ali je bolje da ipak učite.

Pored navedenog, potrebno je pročitati objavu i slijediti preporuke date u njoj. Vrlo su jednostavne.

Počnimo s uređivanjem standardne teme "Dvadeset deset". Ova tema je podrazumevano instalirana na WordPress build-u, i to je ona koja se može videti odmah nakon instaliranja motora.

Inače, ovaj resurs sadrži i ovu temu, samo malo ispravljenu. Ili bolje rečeno, preuređen do temelja.

Izradit ćemo vlastiti web dizajn pomoću alata Web Inspector.

Ovaj osnovni alat za programere je podrazumevano dostupan u svim modernim pretraživačima i može mu se pristupiti pomoću tastera F12.

Možete ga pozvati i desnim klikom na stranicu i odabirom "Prikaži kod elementa" ili "Ispitaj element"

Dizajn moje stranice se već nekoliko puta mijenjao, i vidite staru verziju, ali to ne mijenja suštinu.

Još ne znam sve mogućnosti ovog alata (definitivno ću ga morati proučiti i proučiti), ali ono što znam je dovoljno da radim šta god želim sa temom.

Kao što vidite, u velikom polju s lijeve strane nalaze se redovi sa html kodom. Svaki red je html kod jednog od elemenata koji se trenutno nalaze na stranici.

Ako zadržite pokazivač miša preko njega, element koji mu odgovara na stranici bit će označen drugom bojom, a pored njega će se pojaviti fusnota koja označava ime selektora odgovornog za ovaj element u stilskoj tablici i njegovu veličinu u pikselima.

Ako kliknete na ovu liniju, ona će postati plava, kao da je fiksirana, a polje sa desne strane će prikazati sva svojstva i vrijednosti ​​​podešene, u našem slučaju, na blok sa menijem, u stilu. .

Kao što vidite, blok menija u listi stilova označen je selektorom #access i daje mu sljedeće vrijednosti:

širina - 940 px
leva margina - 0 px

Idemo ispod

boja pozadine - žuta (izvorno crna)
vidljivost elementa - vidljiva
Lebde sa leve strane - verovatno da ne bi odgurnuli naslov
gornja margina – 80 px, i centrirana
Donja margina – 30 px
okvir - debljina, čvrsta, žuta (u početku crna)

Sada znamo gotovo sve o ovom elementu i možemo ga, po želji, pomjeriti prema dolje ili gore, promijeniti mu boju ili veličinu, pritisnuti ga na bilo koju od četiri strane ekrana ili sakriti od pogleda.

Da biste sve ovo uradili potrebno je da odete na Konzola - Izgled - Editor i tamo pronađete fajl style.css

Kliknemo na nju i, podižući stranicu malo više, vidimo datoteku sa stilskim listovima otvorenu za uređivanje. Prije svega, kopirajte cijeli fajl i sačuvajte ga u nekom editoru, možda u Notepad-u.

U ovoj datoteci trebamo pronaći #access selektor. Prvo će se pojaviti u odjeljku =Structure, ali tamo će biti grupiran s drugim selektorima koji imaju ista svojstva i vrijednosti.

Nemojmo za sada uklanjati #access iz ove grupe, jer mi je širina navedena u ovoj grupi, na primjer, odgovarala. Spuštamo se dalje do odjeljka “Meni”. Ovdje je naš blok predstavljen u punom sjaju.

Ovo je mjesto gdje ga možete pomicati gore-dolje tako što ćete promijeniti vrijednost u svojstvu margine, promijeniti boju i ako je ne stavite u svojstvo prikaza umjesto bloka, onda ga učinite nevidljivim.

Ne zaboravite ažurirati fajl nakon svake manipulacije!

Posebno sam odabrao blok menija za demonstraciju jer ima složenu strukturu. Uostalom, u glavnom bloku sadrži i blokove veza, i tekst u tim vezama, koji je i sam zaseban blok.

Kao što ste već primijetili, u web inspektoru svaki red počinje trokutom. Ako je usmjeren udesno, u njemu se krije još nekoliko linija. Kliknemo na trokut i otvara nam se kod elemenata koji se nalaze u bloku menija.

Ovi elementi, zauzvrat, sadrže više elemenata i moramo ih sve otvoriti, odnosno sve što se nalazi u bloku menija.

Sada, pomičući kursor duž linija u lijevom polju, u desnom polju gledamo kako pronaći ovaj ili onaj element u datoteci stila. css i shvatiti koje vrijednosti želimo promijeniti.

Zatim idemo u editor, pronalazimo željeni selektor i mijenjamo ono što imamo na umu. Pokazaću vam šta sam promenio da bi meni dobio isti izgled i funkcionalnost kao na ovoj stranici.

Ako neko želi da ukloni ovaj meni sa stranica sajta u potpunosti, onda da bi to uradio treba da ode na Izgled > Editor i otvori datoteku header.php za uređivanje.

U kodu fajla nalazimo oznaku i brišemo je, i sve posle nje, do prve.

Možete ga jednostavno učiniti nevidljivim. Da biste to uradili, u datoteci style.css, svojstvo display:none se dodaje selektoru #access.

Sada da vidimo kako zamijeniti sliku u zaglavlju stranice. Recimo da vam sve slike predložene u temi nisu odgovarale i odlučili ste instalirati nešto potpuno svoje. Možete vidjeti gdje možete dobiti sliku za zaglavlje na stranici, a kada se pronađe ili napravi, stavite je u mapu slika teme.

Zatim idemo na datoteku style.css i vidimo šta treba učiniti da željena slika nestane, ali se pojavi željena.

Pronalazimo odjeljak “=Header” koji sadrži sve što se odnosi na zaglavlje stranice i tamo nalazimo birač slika. Zatim mijenjamo vrijednost display:block u display:none i slika nestaje sa ekrana.

Zatim idemo gore do odjeljka “=Structure” i u selektoru #wrapper napravimo sljedeći unos. Pozadina: svojstvo je tamo po defaultu, ovo je pozadina stranice, tako da dodamo svojstva samo za sliku.

U vrijednost svojstva background-image stavljamo adresu nove slike koju smo pronašli ili napravili, prethodno učitanu u mapu slika teme.

Ako je web lokacija hostovana, tada se ova mapa nalazi u: naziv_site > public_html > wp-content > > teme > slike.
Ako je stranica još uvijek na lokalnom hostingu, onda je put do ove mape: Z > home > ime_stranice > www > wp-content > > teme > slike.

U prvom slučaju, slika se preuzima pomoću upravitelja datoteka, u drugom se slika jednostavno pohranjuje u ovu mapu.

Ovdje ćete nakon instalacije morati samo podesiti background-position svojstvo kako biste što preciznije postavili zaglavlje na stranicu, a svojstvo pozadine je neophodno u slučaju da se slika u zaglavlju ne otvori nekim posjetiteljima.

U ovom slučaju, zaglavlje će imati barem pozadinu.

To se radi na sljedeći način. Idite na Console - Entries - Add Entry, prebacite uređivač na HTML način rada i kroz program za učitavanje slika (Add media file) učitajte željenu sliku.

Kod za ovu sliku se pojavljuje u uređivaču. Potrebno ga je kopirati i izbrisati “Record”.

Zatim idite na “Izgled - Editor” i otvorite datoteku header.php za uređivanje, u kojoj nalazimo red

Odmah nakon ovog reda zalijepimo kopirani kod slike. Kod ima klasu poravnanja class="aligncenter" , a ovisno o potrebi, aligncenter se može zamijeniti alignleft ili alignright.

To će ovisiti o tome na kojoj se ivici ili u sredini nalazi slika.

Ako nakon pohranjivanja i pregleda, sliku treba još malo pomaknuti, negdje, onda se vraćamo u editor, a u kod slike, u img tag, ubacujemo atribut style sa svojstvom margin:

style="margin:0 0 0 0;"

Gdje umjesto nula ubacujemo potrebne veličine uvlačenja i tako pomičemo sliku u željenom smjeru.

Boja polja se može promijeniti tako što se malo spusti do odjeljka "=Globalni elementi" u selektoru oznaka "body". Moja polja su napravljena od umnožene slike. Kasnije sam ga uklonio i ostavio jednostavno, ali možete vidjeti kako se to radi (slika na margini).

Ako promijenite samo boju, samo promijenite vrijednost u svojstvu pozadine

Ovdje se mijenja veličina, tip i boja fonta web mjesta

A veličina, boja, izgled naslova i opisi stranica u zaglavlju su ovdje. Ovdje možete podesiti položaj naslova i opisa prilikom promjene zaglavne slike.

Zaustavimo se tu za sada. Probajte, promijenite se, pomaknite se, postanite bolji. Vrlo brzo ćemo stranicu prebaciti na pravi hosting. Naravno, i tu ćemo napraviti neke promjene, ali to moramo učiniti sigurnije i brže, i napraviti što manje grešaka.

Gotovi HTML šabloni na ruskom