Jump to content

návod Seriál - vytváříme vlastní HTML/CSS Web - 2. díl


Marley007

Recommended Posts

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

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

no tak tady neni co hodnotit proste je to shit navod no nwm nechci te urazit ale nic sem se nenaucil

BAF 10/10 :d

 

:lek: TY BLBE! Malem si me privodil infarkt :lol:

 

btw Pekny TUT ^_^

Link to comment
Share on other sites

jj na uvozovky změním :d ty meta tagy jsem ssi bral ze svý stránky, kde to mam taky nějak rozházený mmno.... :d

 

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... :d

Link to comment
Share on other sites

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

  • 4 months later...

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...