TVORBA WEBOVÝCH STRÁNEK HTML
Struktura webové stránky Web se skládá z několika elementů: Texty Obrázky Objekty (flashové animace, videa, hudba apod.) Skripty (jednoduché programy) Každá webová stránka má svůj zdrojový kód Říká prohlížeči, jak by měla stránka vypadat Skládá se ze značek neboli tagů Každý z výše uvedených elementů je na webu zastoupen nějakým tagem
Vytváření webové stránky Psaní zdrojového kódu Zdrojový kód je pouze text, proto ho lze psát například v poznámkovém bloku Textovému souboru s kódem pak stačí jen změnit koncovku na .html nebo .htm Takto vytvořená stránka už může být spuštěna v prohlížeči Editory Existují i editory, pomocí kterých můžete vytvářet stránky bez znalosti HTML Export dokumentů Dokumenty některých aplikací (např. Office) lze exportovat jako webové stránky Soubor > Uložit jako (webovou stránku)
HTML HTML = HyperText Markup Language Soubor značek/tagů, které zastupují jednotlivé elementy webu Zpravidla platí, že 1 tag = 1 element webu Příklady: Tag <br> = odřádkování textu Tag <img> = obrázek
HTML - tagy Každý tag je uzavřen do špičatých závorek: Existují dva typy tagů: Nepárové tagy 1 tag = 1 element webu Např. tag <img> pro vložení obrázku Párové tagy Tag má dvě části: začátek a konec Např. tag <p> pro vložení odstavce Použití: <p>Obsah odstavce</p> Druhá část tagu(ukončovací) musí mít po první špičaté závorce lomítko
Struktura HTML stránky <html> základní párový tag ohraničující web <head> párový tag ohraničující hlavičku stránky </head> ukončení tagu <head> = zde hlavička končí <body> párový tag ohraničující samotný obsah stránky </body> ukončení tagu <body> = konec obsahu stránky </html> ukončení tagu <html> = zde web končí
Příklady nejpoužívanějších tagů Tyto tagy zastupující jednotlivé elementy webu se vkládají do obsahu stránky, tedy mezi počáteční tag <body> a ukončovací tag </body> <br> = nepárový tag pro odřádkování textu <img> = nepárový tag pro vložení obrázku <a> = párový tag pro vložení odkazu <p>,<div> = párové tagy pro odstavec <font> = párový tag pro formátování textu (velikost, barva…) <b> = párový tag pro tučné písmo <i> = párový tag pro písmo vyznačené kurzívou <u> = párový tag pro podtržené písmo
TVORBA WEBOVÝCH STRÁNEK CSS
Co je CSS CSS = Cascading Style Sheets V překladu „kaskádové styly“ Jazyk popisující, jak se mají na webu zobrazovat jednotlivé elementy Doplňuje HTML Srovnání s HTML: Příklad: HTML dokáže vložit obrázek, CSS dokáže určit jak má být velký, kde má být umístěný, jaký má mít rámeček, jak moc je odsazený od ostatních elementů apod.
Proč používat CSS Oproti HTML má mnohem rozsáhlejší možnosti formátování elementů webu Odděluje strukturu webu (elementy) od jeho formátování (formát elementů) Dynamická správa stránek Větší přehlednost atd…
CSS zblízka p { color: blue; font-size: 12px; } SELEKTOR = element, který formátujeme VLASTNOST = vlastnost elementu, kterou chceme změnit HODNOTA = samotná úprava vlastnosti
Použití CSS Přímé formátování Vložení CSS do tagu <head> <img src="obrazek.jpg" style="border-width:1px"> Vložení CSS do tagu <head> <html> <head> <style type="text/css"> img { border-width: 1px; } </style> </head> <body> <img src="obrazek.jpg"> </body> </html> Externí soubor <html> <head> <link rel="stylesheet" type="text/css" href="styl.css"> </head> <body> <img src="obrazek.jpg"> </body> </html> Obsah souboru styl.css img { border-width: 1px; }