Stáhnout prezentaci
Prezentace se nahrává, počkejte prosím
1
HTML, XHTML a CSS Základy jazyků značek
2
Základní tagy HTML <p>odstavec</p>
<h1>nadpis1</h1> <b>tučně</b>, <i>kurziva</i>, <u>podtržení</u> <ul><li>seznam s odrážkou</li><ul> <ol><li>seznam s řazením</li><ol> <table><tr><th>záhlaví</th><td>buňka</td></tr> </table> <div>blok</div> <form>formulář</form> <br> odřádkování, <nbsp> slovní mezera, <hr> vodorovné podtržení
3
Zápis tagů do textového souboru *.html např. poznámkovým blokem
pomocí editorů HTML např.: PSPad vloží šablonu, tagy se umisťují Ctrl + Space, indexování dle abecedy
4
Šablona pro HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, <title> Stránka </title> </head> <body> </body> </html>
5
Filozofie XHTML oddělení obsahu od formy (struktury stránky od formátování objektů) struktura – XHTML formátování a umisťování objektů – CSS CSS dodá stránkám dynamiku
6
Postup práce v XHTML otevřít šablonu XHTML vložit text
doplnit tagy vymezující obsah (nadpis, adresa, odstavce, bloky) vytvořit CSS soubor s pozicemi bloků, formátováním doplnit meta tagy validovat publikovat
7
XHTML rozdíly proti HTML
XML: XHTML:
8
Vkládání stylů Přímo v textu zdroje u formátovaného elementu. Anglicky je to "in-line" styl, já tomu říkám přímý styl. Je to nešikovné, ale občas se to používá. Pomocí "stylopisu" (angl. "stylesheet") v hlavičce stránky. Stylopis je jakýsi seznam stylů. Je v něm obecně napsáno, co má být jak zformátováno, například že nadpisy mají být zelené. Použitím externího stylopisu -- to je soubor *.css, na který se stránka odkazuje tagem LINK. V souboru je umístěný stylopis. Hlavní výhoda je v tom, že na jeden takový soubor se dá nalinkovat mnoho stránek, takže pak všechny vypadají podobně.
9
Přímo do těla skriptu Do zdroje se napíše tato deklarace odstavce:
<p style="color: red">Tento odstavec bude červený.</p> Vysvětlení: <p> je značka vymezující odstavec; z anglického paragraph. Atribut "style" je obecný atribut podobný třeba atributu "align", jenže je mocnější.
10
Stylopisem Do hlavičky dokumentu se napíše stylopis uzavřený mezi tagy <style></style>: <style> p {color: red} </style> a do těla stránky se mohou psát odstavce: <p>Tento odstavec bude červený. </p> <p>Tento mimochodem také, protože červené budou všechny.</p>
11
Externím CSS souborem Vytvoří se soubor, který se pojmenuje třeba styly.css. V něm bude tento text: p {color: red} Do hlavičky html dokumentu, který chci stylovat, musím napsat odkaz na tento soubor: <link rel="stylesheet" type="text/css" href="styly.css">
12
Šablona XHTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
" <html lang="cs"> <head> <title>Ukázka různých CSS</title> <meta http-equiv="Content-Type" content="text/html; charset=iso "> <link rel="stylesheet" title="Basic" type="text/css" href="css-zaklad.css"> <link rel="alternate stylesheet" title="Color" type="text/css" href="css-s1.css"> <link rel="alternate stylesheet" title="ColorNeg" type="text/css" href="css-s2.css"> <link rel="alternate stylesheet" title="SMenu" type="text/css" href="css-sm.css"> <link rel="alternate stylesheet" title="Komplex1" type="text/css" href="css-k1.css"> <link rel="alternate stylesheet" title="Komplex2" type="text/css" href="css-k2.css"> <script src="switcher.js" type="text/javascript"></script> </head> <body> Vlož kód</body> </html>
Podobné prezentace
