Stáhnout prezentaci
Prezentace se nahrává, počkejte prosím
1
HTML a CSS Rostislav Miarka
2
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
3
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.)
4
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
5
Tagy Nepárové Párové Pouze jeden tag <tag> Dva tagy
Počáteční <tag> Koncový </tag>
6
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>
7
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>
8
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>
9
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
10
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.
11
Ukázka <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="generator" content="PSPad editor, <title>…</title> </head> <body> … </body> </html>
12
Zobrazení zdrojového kódu
V internetovém prohlížeči Je možné zobrazit v jakémkoliv prohlížeči
13
Obsah stránky Nadpisy Odstavce textu Úprava textu Odkazy Obrázky
Tabulky
14
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
15
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
16
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
17
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
18
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
19
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
20
KONTAKTY Katedra informatiky a počítačů Rostislav Miarka
Odborný asistent s vědeckou hodností 30. Dubna 22 Ostrava tel:
Podobné prezentace
