Element
(z angličtiny telo- body) je určený na ukladanie obsahu webovej stránky (obsahu) zobrazeného v okne prehliadača. Informácie, ktoré by sa mali zobraziť v dokumente, by sa mali nachádzať vo vnútri kontajnera . Tieto informácie zahŕňajú text, obrázky, značky, JavaScript atď.používa sa aj na určenie farieb odkazov a textu na webovej stránke. Tento postup je v HTML odmietaný a namiesto toho sa odporúča použiť štýly na špecifikáciu farebnej schémy a aplikovať ich na selektor tela.Často
používa sa na umiestnenie obsluhy udalosti, napríklad onload, ktorá sa spustí po dokončení načítania dokumentu do aktuálneho okna alebo rámca.Otváracie a zatváracie štítky
sa na webovej stránke nevyžadujú, ale považuje sa za dobrý štýl použiť ich na definovanie začiatku a konca dokumentu HTML.Syntax
...Záverečná značka
Nevyžaduje sa.
Atribúty
Príklad
Dokonca aj Aristoteles vo svojej „Politike“ povedal, že hudba, ktorá ovplyvňuje človeka, prináša „druh očisty, to znamená úľavu spojenú s potešením“.
Výsledok aktuálneho príkladu je znázornený na obr. 1. Pri použití udalosti onload prvku
Spustí sa skript napísaný v JavaScripte, v tomto prípade zobrazí správu, že dokument bol načítaný.Ryža. 1. Vyskakovacie okno v dokumente
Špecifikácia
Každá špecifikácia prechádza niekoľkými fázami schvaľovania.
- Odporúčanie – špecifikácia bola schválená W3C a odporúča sa ako štandard.
- Odporúčanie kandidáta ( Možné odporúčanie) - skupina zodpovedná za štandard je spokojná, že spĺňa svoje ciele, ale vyžaduje pomoc od vývojárskej komunity pri implementácii štandardu.
- Navrhované odporúčanie Navrhované odporúčanie) - v tejto fáze je dokument predložený poradnej rade W3C na konečné schválenie.
- Pracovný návrh – Vyspelejšia verzia návrhu, ktorá bola prediskutovaná a upravená na posúdenie komunitou.
- Návrh editora ( Redakčný návrh) - návrh verzie normy po vykonaní zmien zo strany redaktorov projektu.
- Návrh ( Návrh špecifikácie) - prvý návrh verzie normy.
Živý štandard HTML (Living) vyniká - nedodržiava tradičné číslovanie verzií, pretože sa neustále vyvíja a je pravidelne aktualizovaný.
Tag (štvorhra) je určený na ukladanie obsahu webovej stránky (obsahu) zobrazeného v okne prehliadača. Informácie, ktoré by sa mali zobraziť v dokumente, by sa mali nachádzať vo vnútri kontajnera BODY. Tieto informácie zahŕňajú text, obrázky, značky, JavaScript atď.
Tag používa sa aj na určenie farieb odkazov a textu na webovej stránke. Tento postup je v HTML 4 zastaraný a namiesto toho sa odporúča použiť štýly na špecifikáciu farebnej schémy a aplikovať ich na selektor . Väčšina možností je však stále podporovaná vo všetkých prehliadačoch.
Často tag používa sa na umiestnenie obsluhy udalosti, ako napríklad onLoad, ktorá sa spustí po dokončení načítania dokumentu do aktuálneho okna alebo rámca.
Otváracie a zatváracie značky BODY na webovej stránke sú voliteľné, ale je vhodné ich použiť na definovanie začiatku a konca HTML dokumentu.
Syntax
...
Záverečná značka
Požadovaný.
možnosti
odkaz – nastavuje farbu aktívneho odkazu.
pozadie – nastavuje obrázok na pozadí webovej stránky.
bgcolor - farba pozadia webovej stránky.
bgproperties - určuje, či sa má posúvať pozadie spolu s textom alebo nie.
bottommargin - odsadenie od spodného okraja okna prehliadača k obsahu.
leftmargin - vodorovný okraj od okraja okna prehliadača k obsahu.
odkaz - farba odkazu.
scroll – nastavuje, či sa majú zobrazovať posuvníky alebo nie.
text – farba textu v dokumente.
topmargin - odsadenie od horného okraja okna prehliadača k obsahu.
vlink - farba navštívených odkazov.
Príklad 1: Použitie značky BODY
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Popis parametrov tagu BODY
Parameter ALINK
Popis
Nastaví farbu aktívneho odkazu. Aktuálna farba odkazu sa zmení na aktívnu, keď na odkaz kliknete kurzorom myši alebo vyberiete pomocou klávesnice.
Syntax
Argumenty
Hodnotu farby je možné nastaviť dvoma spôsobmi.
1. Podľa mena
Prehliadače podporujú niektoré farby podľa ich názvu.
2. Podľa hexadecimálnej hodnoty
Na určenie farieb sa používajú hexadecimálne čísla. Šestnástková sústava je na rozdiel od desiatkovej sústavy založená, ako už jej názov napovedá, na čísle 16. Čísla budú nasledovné: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Čísla od 10 do 15 sú nahradené latinskými písmenami. Čísla väčšie ako 15 v šestnástkovej sústave vznikajú spojením dvoch čísel do jedného. Napríklad číslo 255 v desiatkovej sústave zodpovedá číslu FF v šestnástkovej sústave. Aby sa predišlo zmätkom pri určovaní číselnej sústavy, pred šestnástkové číslo sa umiestni krížik #, napríklad #666999. Každá z troch farieb – červená, zelená a modrá – môže nadobúdať hodnoty od 00 do FF. Farebný symbol je teda rozdelený na tri zložky #rrggbb, kde prvé dva symboly označujú červenú zložku farby, stredné dva - zelenú a posledné dva - modrú.
Predvolená hodnota
Zodpovedá farbe odkazu.
...
parameter BACKGROUND
Popis
Určuje obrázok, ktorý sa má použiť ako tapeta. Na rozdiel od bežných obrázkov nemá pozadie nastavenú šírku ani výšku a vždy sa zobrazuje v plnej veľkosti na 100 %. Ak má obrázok menšiu veľkosť ako okno prehliadača, potom sa obrázok zopakuje vodorovne doprava a nadol a zoradí sa ako mozaika. Z tohto dôvodu sa môžu na styku obrázkov na pozadí vyskytnúť viditeľné rozdiely, ktoré si návštevníci stránky všimnú. Pri výbere obrázka na pozadí sa uistite, že je medzi ním a textom na webovej stránke dostatočný kontrast. Ako pozadie možno použiť animované obrázky GIF, ktoré však odpútajú pozornosť čitateľa.
Syntax
Argumenty
Akákoľvek platná adresa obrázka – môžete použiť relatívnu alebo absolútnu cestu.
Predvolená hodnota
Nie
Príklad 3: Nastavenie tapety na webovej stránke
...
parameter BGCOLOR
Popis
Nastaví farbu pozadia webovej stránky. Tento parameter môžete použiť v spojení s pozadím a vybrať farbu pozadia blízku obrázku pozadia
Syntax
Argumenty
Pozrite si parameter ALINK.
Predvolená hodnota
Závisí od prehliadača a jeho verzie, ale farba pozadia je zvyčajne biela.
Príklad 4: Nastavenie farby pozadia webovej stránky
...
parameter BGPROPERTIES
Popis
V predvolenom nastavení sa obrázok na pozadí posúva s obsahom webovej stránky. Pomocou parametra bgproperties môžete fixovať pozadie na jednom mieste a tým prinútiť posúvať iba obsah. Táto kvalita webovej stránky sa pre webové stránky používa len zriedka, takže sa to používateľom môže zdať zvláštne a nezvyčajné.
Syntax
Argumenty
Existuje len jeden pevný parameter, ktorý fixuje pozadie. Ak chcete túto funkciu odstrániť, odstráňte parameter bgproperties zo značky BODY alebo ho nastavte na prázdnu hodnotu - "".
Predvolená hodnota
Nie
Príklad 5: Oprava pozadia
...
Poznámka
- Nie všetky prehliadače toto nastavenie podporujú, napríklad Netscape ho ignoruje.
- Všimli sme si, že pri nastavovaní obrázka na pozadí na webovej stránke prostredníctvom štýlov prestane fungovať parameter bgproperies.
parameter LEFTMARGIN
Popis
Definuje množstvo priestoru od ľavého a pravého okraja okna prehliadača po obsah webovej stránky.
Syntax
Argumenty
Kladné celé číslo, ktoré určuje posun v pixeloch.
Predvolená hodnota
10 pixelov pre Windows a 8 pixelov pre Macintosh.
Príklad 6: Zmena ľavého okraja
...
Poznámka
- Prehliadač Netscape nerozumie parametru leftmargin, na nastavenie okrajov používa parametre marginwidth - horizontálne okraje a marginheight - vertikálne okraje.
- Ak chcete nastaviť okraje od pravého, spodného a horného okraja, použite parametre rightmargin, bottommargin a topmargin.
parameter LINK
Popis
Nastaví farbu nenavštívených odkazov.
Syntax
Argumenty
Pozrite si parameter ALINK.
Predvolená hodnota
#0000FF
Príklad 7: Nastavenie farby odkazov
...
Parameter SCROLL
Popis
Parameter posúvania riadi prítomnosť posúvačov v okne prehliadača, keď obsah webovej stránky presahuje veľkosť aktuálneho okna. Toto nastavenie funguje iba v programe Internet Explorer.
Syntax
Argumenty
áno – zobrazí rolovacie lišty.
nie - zabráni zobrazovaniu posúvačov v okne.
Predvolená hodnota
Áno
Príklad 8: Skrytie posuvnej lišty
...
parameter TEXT
Popis
Nastaví predvolenú farbu textu použitého na webovej stránke. Farby jednotlivých prvkov je možné jednoducho meniť pomocou štýlov.
Syntax
Argumenty
Pozrite si parameter ALINK.
Predvolená hodnota
#000000
Príklad 9: Zmena farby textu
...
parameter VLINK
Popis
Definuje farbu navštívených odkazov, t. j. odkazov, na ktoré už používateľ „klikol“.
Syntax
Argumenty
Pozrite si parameter ALINK.
Predvolená hodnota
#551a8b (Navigátor 4); #800080 (Internet Explorer Windows); #006010 (Internet Explorer Macintosh).
Príklad 10: Nastavenie farby navštívených odkazov
...
Farba textu
Farba pozadia
Obrázok na pozadí
Farba odkazu
Polstrovanie okolo obsahu
Cvičenie
Ako už viete, medzi úvodnou značkou a uzatváraciu značku Umiestňuje sa telo stránky alebo samotný obsah stránky. Hovorí sa tomu aj slovo obsahu(z anglického content - content). Možnosti značiek určiť vlastnosti obsahu ako celku. V tejto lekcii sa pozrieme na niektoré z nich.
Farba textu
Farba textu celého dokumentu je určená parametrom text. Je mu priradený buď názov farby alebo hexadecimálna hodnota farby, rovnako ako parameter farba tag (pozri lekciu 2. Formátovanie testu):
aleboPoužitie tohto príkladu bude mať za následok, že celý text na stránke bude červený.
Parameter text je voliteľná. Ak ho vynecháte, text na stránke bude štandardne čierny. Pravdepodobne ste to už videli pri vykonávaní predchádzajúcich cvičení. :)
Farba pozadia
Farba pozadia stránky je určená parametrom bgcolor. Prijíma buď názov farby alebo hexadecimálnu hodnotu farby, rovnako ako parameter text.
aleboTento príklad bude mať za následok, že pozadie stránky bude červené.
Parameter bgcolor je voliteľná. Ak ho vynecháte, predvolené pozadie stránky bude biele. Čo ste už tiež videli pri vykonávaní predchádzajúcich cvičení. :)
Obrázok na pozadí
Pomocou parametra pozadie Môžete sa uistiť, že stránka nemá obyčajné pozadie, ale pozadie tvorí obrázok. Pre tento parameter pozadie musíte priradiť cestu k obrázku, ktorý chcete urobiť ako pozadie, ako aj parameter src tag
(Pozri lekciu 5. Obrázky):
Týmto spôsobom môžete napríklad dláždiť pozadie stránky nejakým vzorom. Nemali by ste však túto príležitosť zneužívať a robiť veľké obrázky na pozadí, aby ste stránku príliš nezťažili.
Máme napríklad tento fragment vzoru:
Ak z neho urobíme obrázok na pozadí, dostaneme stránku s takýmto pozadím:
Parameter pozadie je tiež voliteľné. Ak ho vynecháte, predvolené pozadie stránky bude biele.
Farba odkazu
Na nastavenie farby odkazov sú k dispozícii 3 parametre tagu telo:
Týmto parametrom je priradený názov farby alebo jej hexadecimálna hodnota, podobne ako ostatné parametre zodpovedné za farbu niečoho.
Takto to bude vyzerať na stránke (ak chcete vidieť všetky stavy odkazu, zapamätajte si, čo to bolo pôvodne, stlačte a podržte, uvidíte, čo sa stalo, a nakoniec uvoľnite, vráťte sa na túto stránku a uvidíte, akú má farbu ):
Tieto parametre sú voliteľné. Ak ich vynecháte, farby odkazu nadobudnú predvolené hodnoty (modrá, červená, fialová).
Polstrovanie okolo obsahu
Ak chcete, aby sa obsah stránky vzdialil od okrajov okna prehliadača o určitú hodnotu, v tomto prípade ide o značku telo su 4 parametre:
ľavý okraj- odsadenie od ľavého okraja;
pravý okraj- odsadenie od pravého okraja;
horný okraj- odsadenie od horného okraja;
spodný okraj- odsadenie od spodného okraja.
Tieto parametre nadobúdajú hodnoty v pixeloch. Nie sú potrebné a môžete ich použiť všetky naraz alebo samostatne. Môžete napríklad odsadiť iba ľavú a pravú stranu alebo iba hornú a spodnú časť atď.:
aleboAhojte chalani!
Dnes som sa rozhodol dotknúť témy, ktorá nikdy neprestane byť aktuálna medzi mladými tvorcami webstránok.
Po vytvorení stránok je vždy potrebné ich prispôsobiť. Niektoré nastavenia sa vykonávajú úpravou súborov nainštalovanej šablóny témy. Napríklad musíte vložiť kód, ktorý zobrazuje podobné položky. Ale kam to vložiť?
Takéto otázky kladú nováčikovia veľmi často. Znepokojujú ich aj ďalšie podobné problémy, ktorých riešenie je v podstate úplne rovnaké. Okrem toho sa vo svojich budúcich článkoch často uchýlim k vkladaniu kódov na rôzne miesta v šablóne. Preto je tento materiál relevantnejší ako kedykoľvek predtým.
V tomto článku vám ukážem, ako môžete veľmi jednoducho identifikovať miesto vo vašej WordPress šablóne, kam je potrebné vložiť akýkoľvek kód. Zvážim aj ďalšie dôležité body, ktoré sa vás môžu týkať v počiatočnej fáze.
Začnime úplne hore a pozrime sa na súbory, ktoré možno budete musieť upraviť, ak chcete kódy vkladať manuálne, a nie pomocou doplnkov, pretože takáto možnosť existuje. Nevítam to, ale aj tak pre lenivých popíšem takéto pluginy v nasledujúcich článkoch.
Na úplnom začiatku dávam video lekciu, pretože bez nej bude ťažké porozumieť materiálu uvedenému v textovom formáte nižšie.
Teraz všetko podrobne vysvetlím v textovom formáte.
Súbory zodpovedné za výstup každého typu stránky
Ak ste na iných blogoch čítali veľa článkov o implementácii niektorých funkcií pomocou kódov (skriptov), potom som si 100% istý, že ste videli frázy ako:
- Vložte tento kód do súboru zodpovedného za zobrazenie hlavnej stránky;
- Vložte tento kód do súboru zodpovedného za výstup záznamov a iné.
Existuje veľa súborov, do ktorých možno budete musieť vložiť kódy. Ale čo sú tieto súbory? Všetko je veľmi jednoduché.
- Výstup domovskej stránky - index.php;
- Výstup záznamov - súbor single.php;
- Výstup stránky - súbor page.php;
- Výstup archívov a kategórií - archive.php;
- Výstup päty - päta.php;
- Výstup stránky vyhľadávania - search.php;
- Výstup bočného panela - sidebar.php;
- Súbor štýlu - style.css;
- Výstupný súbor 404 stránok je 404.php.
Teraz, keď vám povedia, že musíte kód vložiť do takého a takého súboru, budete vedieť, kde ho hľadať.
Zostáva len odpovedať na otázku: ako určiť správne miesto v každom zo súborov?
Určenie miesta vloženia kódu
Najprv si prejdime tie miesta, ktoré netreba identifikovať. Budú rovnaké pre všetkých bez ohľadu na predlohu.
Na prvom mieste, identickom pre všetky šablóny, je oblasť v súbore Header.php. Toto sú otváracie a zatváracie značky
.Medzi tieto značky sú vždy umiestnené nejaké skripty, ktoré by mali fungovať pre všetky stránky webu. To znamená, že sme medzi tieto značky umiestnili skript napríklad pre sociálne tlačidlá a fungujú na všetkých stránkach webu, kde ich budeme zobrazovať.
Tieto značky sú umiestnené úplne hore v súbore Header.php.
Obsah medzi tým bude pre každého iný, pretože všetko závisí od šablóny.
Ak vám bolo povedané, že musíte vložiť tento kód medzi otváraciu a zatváraciu značku hlavy, skopírujte kód, vyhľadajte podobnú oblasť v súbore šablóny a jednoducho ju vložte medzi tieto značky.
Druhé miesto, ktoré je tiež identické pre všetky šablóny, sa nachádza v súbore zodpovednom za výstup päty – footer.php.
Skripty je možné spájať nielen vložením medzi tagy
v súbore Header.php. Môžete ich načítať aj cez súbor footer.php, čím urýchlite načítanie stránky webu.Faktom je, že keď sa stránka začne načítavať, načítava sa zhora nadol. Ak sú všetky skripty v hornej časti stránky, zobrazenie jej obsahu sa spomalí, pretože načítanie skriptov bude chvíľu trvať.
Našou úlohou je čo najrýchlejšie zobraziť obsah stránky návštevníkom aj vyhľadávačom. V tomto prípade je vhodné načítať skripty na samom konci stránky, aby sa najskôr zobrazil obsah a potom sa načítalo všetko ostatné.
Ak chcete implementovať túto možnosť, musíte otvoriť súbor footer.php a vložiť skript pred koncovú značku tela. Nachádza sa na konci obsahu súboru, pretože je zodpovedný za koniec oblasti stránky.
Ako vidíte, zobrazil som všetky skripty v tejto oblasti pred záverečnou značkou(zvýraznené modrým rámom). Mimochodom, priniesol som ich načítaním zo súborov, a nie umiestnením samotných skriptov do tejto oblasti. Potom som blog výrazne zrýchlil. Ako to urobiť, bude samostatný článok. Počkaj!
Dúfam, že keď vám povedia vložiť kód do týchto oblastí, urobíte to bez problémov.
Prejdime k zložitejšej problematike a skúsme sa naučiť identifikovať miesta v iných súboroch šablón, do ktorých sa vkladajú rôzne iné kódy. Tieto kódy zvyčajne zahŕňajú:
- Zobraziť podobné príspevky;
- výstup predplatiteľského formulára;
- Zobrazovanie sociálnych tlačidiel atď.
Všetky tieto veci sa vkladajú za hlavnú časť obsahu, teda za koniec článku. Každý má iný kód šablóny, a preto univerzálnu odpoveď na otázku "Kde končí výstupný kód môjho článku?" jednoducho nie.
Ale môžete ľahko určiť koniec kódu, po ktorom musíte implementovať funkciu, ktorú potrebujete. Tento spôsob som už čiastočne ukázal v článku o výbere šablóny WordPress (). Potom som použil štandardnú funkcionalitu internetového prehliadača.
Pre lepšie pochopenie podstaty tejto metódy vrelo odporúčam pozrieť si video na začiatku tohto príspevku. V ňom som ukázal, ako sa všetko deje v reálnom čase. No a teraz sa to pokúsim opísať čo najjasnejšie.
Ako príklad vám ukážem používanie prehliadača Google Chrome. Túto funkciu majú aj iné prehliadače, ale môžu mať trochu iný názov.
- Google Chrome - zobrazenie kódu prvku;
- Firefox - prvok preskúmať;
- Opera - kontrola prvku.
Princíp je podobný v 3 prehliadačoch. Teraz vám ukážem, ako určiť umiestnenie akejkoľvek oblasti v akejkoľvek šablóne.
Prejdite na zobrazenie kódu prvku (Google Chrome). Kliknite pravým tlačidlom myši na prázdnu oblasť stránky.
Potom sa v spodnej časti stránky zobrazí panel, ktorý zobrazuje celý zdrojový kód stránky, ktorý môžeme upravovať a vidieť, ako sa bude meniť štruktúra a vzhľad šablóny v reálnom čase. Zmeny údajov sa však neuložia. Ak to chcete urobiť, musíte upraviť samotné súbory šablón.
Takto vyzerá panel.
Šípkou som ukázal na lupu, kliknutím na ktorú si môžeme prezrieť štruktúru šablóny a určiť, z akých blokov sa naša šablóna skladá. Túto funkciu nazývam inšpektor.
Po kliknutí na inšpektor môžeme pohybovať myšou po našej stránke a uvidíme, že všetky prvky, nad ktorými prejdeme, sa začnú zvýrazňovať farebným pozadím. Ako príklad vám ukážem snímku obrazovky z článku o výbere šablóny. Tam som kurzorom myši nad názvom príspevku.
Ak potrebujeme vložiť kód po výstupe nášho článku, potom nie je ťažké uhádnuť, že musíme skontrolovať oblasť našej šablóny a nájsť blok, ktorý obsahuje celý obsah článku. Môžete vyhľadávať na konci aj na začiatku bloku. To znamená, že šablónu môžete kontrolovať zdola aj zhora.
Ale tu je jedna poznámka . Musíme nájsť nielen riadky článku, ale presne bloky, v ktorých sa nachádza samotný obsah, pretože v súboroch šablón nie sú žiadne články. Existuje iba kód, ktorý zobrazuje obsah a je uzavretý v blokoch. Hneď po značke uzatváracieho bloku
