HTML a CSS Rostislav Miarka HTML Hyper Text

  • Slides: 20
Download presentation
HTML a CSS Rostislav Miarka

HTML a CSS Rostislav Miarka

HTML • • • Hyper Text Markup Language Značkovací jazyk Speciální značky – tagy

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 •

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

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é – Pouze jeden tag – <tag> • Párové – Dva tagy

Tagy • Nepárové – Pouze jeden tag – <tag> • Párové – Dva tagy – Počáteční <tag> – Koncový </tag>

Atributy / parametry • • • U jakéhokoliv tagu mohou být atributy Název atributu

Atributy / parametry • • • U jakéhokoliv tagu mohou být atributy Název atributu Hodnota Zápis název=“hodnota“ <tag atribut 1=“hodnota 1“ atribut 2=“hodnota 2“ …> </tag>

Základní struktura webové stránky I • Úplně na začátku je definice typu dokumentu –

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

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 –

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,

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.

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

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

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

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í

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

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 – Pouze definování vlastností v uvozovkách u

Syntaxe CSS • Styl přímo v tagu – Pouze definování vlastností v uvozovkách u atributu style – název 1: hodnota 1; název 2: hodnota 2; • V hlavičce nebo v externím souboru – Selektor – Definování vlastností ve složených závorkách

Selektory CSS • Selektor elementu – Název elementu = název tagu, který představuje element

Selektory CSS • Selektor elementu – 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 – <div style="color: red; " >…</div> • V hlavičce

Ukázky zápisu • Atribut tagu – <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

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