TVORBA WEBOVCH STRNEK HTML Struktura webov strnky Web

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 Editory 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 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 = Hyper. Text Markup Language Soubor značek/tagů, které zastupují jednotlivé elementy webu Zpravidla platí, že 1 tag = 1 element webu Příklady: Tag = odřádkování textu Tag <img> = obrázek

HTML - tagy Každý tag je uzavřen do špičatých závorek: <tag> 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> <head> </head> <body> </html> základní párový tag ohraničující web párový tag ohraničující hlavičku stránky ukončení tagu <head> = zde hlavička končí párový tag ohraničující samotný obsah stránky ukončení tagu <body> = konec obsahu stránky 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> = 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 = 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 { SELEKTOR = element, který formátujeme VLASTNOST = vlastnost elementu, kterou chceme změnit color: blue; font-size: 12 px; } HODNOTA = samotná úprava vlastnosti

Použití CSS Přímé formátování Vložení CSS do tagu <head> <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="obrazek. jpg" style="border-width: 1

Použití CSS Přímé formátování Vložení CSS do tagu <head> <img src="obrazek. jpg" style="border-width: 1 px"> <html> <head> <style type="text/css"> Externí soubor img { <html> <head> <link rel="stylesheet" type="text/css" href="styl. css"> </head> <body> <img src="obrazek. jpg"> } </style> </head> <body> <img src="obrazek. jpg"> </body> </html> Obsah souboru styl. css img { border-width: 1 px; } border-width: 1 px;