Marley007 1 Odesláno: 31. Říjen, 2011 Share Odesláno: 31. Říjen, 2011 Po delší pauze jsem se rozhodl, že budu pokračovat ______________________________________________________ V dnešním díle se seznámíme s těmito věcmi: HTML [*:1qyh26ro]tag - a tagy s ním související[*:1qyh26ro]tag [*:1qyh26ro]tag (H1,2,3 atp.) [*:1qyh26ro] tag [*:1qyh26ro] tag [*:1qyh26ro]tagy ______________________________________________________ Tak jdem na to 1.0 V minulém díle jsme si ukázali základy, v dnešním díle si ukážeme už o něco více k samotnému kódování. Pojedeme od shora, už byste měli mít ve vašem HTML souboru tzv. DOCTYPE, jak jsme si ukazovali minule. Nyní byste si měli vytvořit tzv. hlavičku. Jak ? - Pomocí tagu tento tag je párový, takže ho pak taky musíme ukončit </head>. Další pravidlo, musí být na začátku vašeho kódu. viz. příklad: <?xml version="1.0" encoding="CP-1250"?>html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Titulek Samotý tag není zajímavý, důležité jsou věci v něm... 1.1 - tag - no, kdo umí alespoň trochu anglicky, tak už ví, co to znamená. Kdo neví, tak to znamená titulek stránky. - titulek stránky je to, co se zobrazuje v záložce - př. Pawno.cz ... tag je párový, takže ho opět musíme řádně ukončit -> ukázka v praxi: Pawno.cz 1.2 další důležitá část hlavičky jsou tagy META ... Tento tag určuje např. kódování [jazyk] stránky, či klíčová slova atp.... Nebudem tu dál kecat, jdeme do praxe: - Určování kódu stránky charset=windows-1250 - toto znamená typ kódování. Nejpoužívanější je UTF-8. Pro české znaky je však nejšetrnější Windows 1250 Používaná kódování: - UTF-8 - Windows 1250 - ISO-8859-2 Vpodstatě toto je jen na Vás, co si vyberete Další z těchto tagů vyjadřuje název stránky a to přesněji: Tyto tagy podle mě nejsou až tak důležité, ale když chcete mít web se SEO optimalizací a plnou validností, neměl by chybět... META TAGY toho vyjadřují hodně, třeba taky klíčová slova: Místo klíčová slova, doplňte slova, která co nejvíc vyjadřují váš web. slova se oddělují mezerou. dále je to například nastavení indexování roboty. Doporučuji nechat na vše povoleno: Jde nastavit určitým robotům zákaz indexování atp. K tomu ale spíše slouží soubor robots.txt Posledním META tagem, který si tu ukážeme je meta tag author, který vyjadřuje autora stránky: Myslím, že toto ani nepotřebuje delší komentář Závěrem: Tag meta NENÍ párový => musíme ho ukončit lomítkem na konci [/b][/color] 1.3 Ostatní tagy, které patří do head: Do tagu patří taky veškerý zápis interních stylů - tag To by bylo pro tag asi vše 2.0 tag Tag je párovým takže na konci ho musíme opět ukončit . Tag vyjadřuje odstavec. Nic víc nevyjadřuje Pokud chcete mít validní kód, musíte mít v tagu veškerý "volný text", volným textem se rozumí veškerý text, který nemáte např. v tagu Ukázka v praxi: Váš text 3.0 tag tento tag je pro kodera taky hodně důležitý, je párový a užívá se více druhů: - největší [1. nadpis] - nejmenší [6. nadpis] - Jak jste mohli postřehnout, jedná se tedy o tag, který tvoří nadpisy. Tudíž zvětšuje, či zmenšuje text a zalamuje automaticky řádek. v praxi to vypadá následovně: Nadpis první kategorie a zobrazí se vám: Nadpis první kategorie 4.0 Tag Pro codera jeden z těch důležitějších tagů - je to tag, který dělá odkazy, tedy, pokud si ho trošku upravíme Vaše doména Teď si to trochu rozebereme: href="http://vase-domena.cz" - toto znamená, kam bude odkaz směrovat, může to být taky například href="index.php" - to vás odkáže na soubor index.php, který se nachází v rootu webu a atribut target="_blank" znamená, že se odkaz otevře v novém okně / záložce To by bylo nastavení odkazu: Vaše doména Zvýrazněný text se zobrazí ve vaší stránce, může být nahrazen třeba obrázkem, či nadpisem, stačí mezi tagy a vložit vpostatě jakýkoliv html tag. 5.0 Tag Tento tag je opět velmi důležitý - vkládá do stránky obrázky. Po dlouhé době je to tag NEPÁROVÝ - tudíž ho ukončíme pouze lomítkem. Příklad: Stejně jako u tagu zde užíváme atribut href="" Proto ho přeskočím... Jen dodám, že v něm musí být přesná cesta vč. přípony obrázku... width="" & height="" - tyto atributy určují velikost obrázku, pokud je nezařadíte, obrázek se zobrazí ve své skutečné velikosti. alt="" - alternativní text - zobrazuje se v případě, že je obrázek nedostupný border="" - rámeček obrázku, užívá se číselný kód, či "none" => 0 6.0 Tagy Všechny tagy jsou párové a dnes už se od nich spíše upouští a nahrazují se CSS funkcemi, kdo je chce používat, tak asi i ví, co jsou zač 6.1 Tag - B - tučný text praxe: tučný text Od tohoto tagu se upouští nejvíc, je nahrazován i v HTML a to tagem , který má stejnou funkci... 6.2 Tag Jak můžete znát, tento tag dělá kurzívu, jak jsem zmiňoval, dnes se to spíše nahrazje v CSS, nicméně praxe: Text kurzíva 6.3 Tag - tento tag se používá, jak můžete znát - podtržený text praxe: podtržený text ____________________________________________________ To by bylo pro dnešek vše, myslím, že dost vyčerpávající díl.... a již brzy bude další... Link to comment Share on other sites More sharing options...
Sweet 7 Odesláno: 31. Říjen, 2011 Share Odesláno: 31. Říjen, 2011 no tak tady neni co hodnotit proste je to shit navod no nwm nechci te urazit ale nic sem se nenaucil BAF 10/10 Link to comment Share on other sites More sharing options...
mimic 27 Odesláno: 31. Říjen, 2011 Share Odesláno: 31. Říjen, 2011 Celkem dobrý, jen by sis měl udělát pořádek v tom, jestli budeš používat apostrofy nebo uvozovky... to tam házíš jak tě napadne =D Všude to změn na uvozovky... Jinak... chtělo by to častější "vydávaní" seriálu, tenhle mesíční cyklus je trochu moc, kór když sem zatim dáváš naprostý základy Link to comment Share on other sites More sharing options...
Majitel ffredyk 167 Odesláno: 1. Listopad, 2011 Majitel Share Odesláno: 1. Listopad, 2011 Tohle je zbytečný, už jenom proto, že existuje "jakpsatweb.cz" Link to comment Share on other sites More sharing options...
DooM 93 Odesláno: 1. Listopad, 2011 Share Odesláno: 1. Listopad, 2011 no tak tady neni co hodnotit proste je to shit navod no nwm nechci te urazit ale nic sem se nenaucil BAF 10/10 TY BLBE! Malem si me privodil infarkt btw Pekny TUT Link to comment Share on other sites More sharing options...
Marley007 1 Odesláno: 1. Listopad, 2011 Author Share Odesláno: 1. Listopad, 2011 jj na uvozovky změním ty meta tagy jsem ssi bral ze svý stránky, kde to mam taky nějak rozházený mmno.... to FF - je to zbytečný, ale když tahle sekce existuje, tak oproč se alespoň trochu nesnažit... Jinak te seriál bude častější, já na to teď nějak zapomněl... Link to comment Share on other sites More sharing options...
ManSlayer 3 Odesláno: 1. Listopad, 2011 Share Odesláno: 1. Listopad, 2011 už to umím ale hodí se pro nováčky.. mel bys už začít css treba neco jednoduchy napr. body{ color: #FFFFFF; font-family: Calibri; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; text-align: center; background-color: #000000; } ul{ padding: 0px 0px 0px 0px; } li{ display: list-item; list-style: none; float: left; height: 20px; width: 150px; margin: 0px 5px; padding: 0px 0px 0px 0px; } li a{ color: #1E90FF; text-decoration: none; height: 20px; width: 150px; display: inline; float: left; line-height: 20px; overflow: hidden; white-space: nowrap; font-weight: 900; padding: 0px 0px 0px 0px; } Link to comment Share on other sites More sharing options...
Brunes 1 Odesláno: 1. Listopad, 2011 Share Odesláno: 1. Listopad, 2011 výborný tutorial 10/10 Link to comment Share on other sites More sharing options...
Warabi 0 Odesláno: 10. Březen, 2012 Share Odesláno: 10. Březen, 2012 Docela dobrý 5/10 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now