HTML a CSS Rostislav Miarka
HTML Hyper Text Markup Language Značkovací jazyk Speciální značky – tagy Párové a nepárové tagy HTML elementy – prvky stránky – jsou určené tagem Definujeme rozložení dokumentu – nadpisy, text, obrázky, tabulky, odkazy
Tvorba www stránky Webové stránky jsou soubory s příponou .htm nebo .html Zdrojový kód = obsah tohoto souboru Zdrojový kód je klasický text Tvorba v Poznámkovém bloku ve Windows, PSPad atd. Zobrazení www stránky v internetovém prohlížeči (IE, Edge, Firefox, Chrome atd.)
Zdrojový kód stránky Obsahuje tagy Obsahuje i „obyčejný“ text Text by měl být vždy uvnitř nějakého tagu Tagy by se neměly navzájem křížit Více mezer = 1 mezera Odřádkování ve zdrojovém kódu neznamená odřádkování na stránce
Tagy Nepárové Párové Pouze jeden tag <tag> Dva tagy Počáteční <tag> Koncový </tag>
Atributy / parametry U jakéhokoliv tagu mohou být atributy Název atributu Hodnota Zápis název=“hodnota“ <tag atribut1=“hodnota1“ atribut2=“hodnota2“ …> </tag>
Základní struktura webové stránky I Úplně na začátku je definice typu dokumentu <!DOCTYPE html> Nemusí být nutně uvedena, ale je lepší ji uvést Celý obsah stránky je uzavřen v párovém tagu html <html> … </html>
Základní struktura webové stránky II Webová stránka se dělí na dvě základní části Hlavička – párový tag head <head> … </head> Tělo – párový tag body <body> … </body>
Hlavička stránky Nezobrazuje se Může obsahovat další tagy Titulek stránky – tag title Propojení s jiným souborem – tag link Informace o dokumentu – tag meta
Tělo stránky Obsah stránky, který vidí uživatel v prohlížeči Obsahuje nadpisy, text, obrázky, tabulky, odkazy, formuláře atd.
Ukázka <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title>…</title> </head> <body> … </body> </html>
Zobrazení zdrojového kódu V internetovém prohlížeči Je možné zobrazit v jakémkoliv prohlížeči
Obsah stránky Nadpisy Odstavce textu Úprava textu Odkazy Obrázky Tabulky
CSS Cascading Style Sheets Kaskádové styly Určují, jak mají být zobrazeny jednotlivé HTML elementy Usnadňují práci Nejčastěji bývají uloženy v samostatném souboru
Možnosti CSS Formátování obsahu stránky Text – typ písma, tučné, kurzíva, zarovnání textu Barvy – barva písma, barva pozadí, obrázky na pozadí Velikost – výška a šířka Zobrazení Okraje a rámečky
Zápis CSS Přímo ve zdrojovém kódu stránky jako atribut tagů – název atributu je style V hlavičce stránky (v tagu head) V externím souboru s příponou .css, který je připojen ke stránce
Syntaxe CSS Styl přímo v tagu V hlavičce nebo v externím souboru Pouze definování vlastností v uvozovkách u atributu style název1: hodnota1; název2: hodnota2; V hlavičce nebo v externím souboru Selektor Definování vlastností ve složených závorkách
Selektory CSS Selektor elementu Selektor id Selektor class (třída) Název elementu = název tagu, který představuje element Selektor id Používá atribut id, který může být uveden u elementů stránky Selektor class (třída) Používá atribut class, který může být uveden u elementů stránky
Ukázky zápisu Atribut tagu V hlavičce dokumentu V externím souboru <div style="color: red;" >…</div> V hlavičce dokumentu <style> p {font-family: Verdana; color: blue;} </style> V externím souboru Stejným způsobem jako v hlavičce, pouze bez tagu style
KONTAKTY Katedra informatiky a počítačů Rostislav Miarka Odborný asistent s vědeckou hodností 30. Dubna 22 701 03 Ostrava tel: 597 092 186 e-mail: rostislav.miarka@osu.cz