Základní pojmy (1) Nejpoužívanější internetové prohlížeče: Google Chrome (32.0.x), Mozilla Firefox (27.0), Internet Explorer (11.0.2), Opera (19.0.x), Safari (7.0.1) HTML (HyperText Markup Language): poslední vývojová verze 4.01, nyní se testuje HTML 5 XHTML (eXtensible HyperText Markup Language): současná verze 1.1, pracuje se na XHTML 5 CSS (Cascading Style Sheets = Kaskádové styly): současná verze 2.1
Základní pojmy (2) Validátor (X)HTML: http://validator.w3.org/ Validátor CSS: http://jigsaw.w3.org/css-validator/ Volně dostupné editory pro tvorbu webových stránek: PSPad, Notepad, ... „Parodie na editory“: MS FrontPage, MS Word, … FTP (File Transfer Protocol): hromadný přenos dat na web (přímo přes editor PSPad nebo např. pomocí programu Total Commander)
Nastavení editoru PSPad (1) Nastavení -> Nastavení programu
Nastavení editoru PSPad (2) Nastavení -> Nastavení programu
Nastavení editoru PSPad (3) Nastavení -> Nastavení programu
Nastavení editoru PSPad (4)
PSPad – vytvoření nového souboru 1) CTRL + N 2) Soubor Nový 3) Ikonka, na kterou míří modrá šipka (viz obrázek dále) 4) Dvojklik na lištu, na kterou míří zelená šipka (viz obrázek dále) Ať už si vyberete jakýkoli způsob, otevře se okno nebo nabídka, kde zvolíte buď XHTML nebo Cascading Style Sheet, podle toho, s čím potřebujete pracovat. Automaticky vložený text promažete.
PSPad – vytvoření nového souboru
Pravidla a doporučení pro názvy souborů soubory pojmenovávejte pokud možno pouze malými písmeny v názvech souborů pokud možno nepoužívejte mezery (při názvu z více slov použijte např. podtržítko) v názvech souborů rozhodně nepoužívejte diakritiku přípona pro XHTML soubory: *.html přípona pro CSS soubory: *.css
PSPad – uložení souboru 1) CTRL + S (popř. F12 – Uložit jako) 2) Soubor Uložit / Uložit jako 3) Ikonka, na kterou míří červená šipka (viz obrázek) Doporučení: propojené soubory XHTML a CSS ukládejte do stejné složky.
PSPad - pomůcka v případě nouze CTRL + mezerník vyvolá seznam XHTML tagů (CSS vlastností, …) používejte jen pokud je to nezbytně nutné (je zde příliš mnoho nepotřebných nastavení, které jen matou, pokud nevíte, co znamenají)
XHTML – základní pravidla značkovací jazyk používající tzv. tagy, které se píší malými písmeny a uzavírají se do znaků <> tagy se dělí na párové a nepárové příklad párového tagu: <p>odstavec</p> příklad nepárového tagu: <img src="obr.jpg" alt="obr" /> klávesová zkratka pro <>: ALT (pravý) + <> (klávesy přímo nad pravým ALT) ALT (levý) + 60 / 62 (numerická klávesnice)
XHTML – kostra dokumentu <!-- DOCTYPE naznačuje podle jaké verze (X)HTML by měl být dokument validní (ideálně 1.1 nebo 1.0 Strict). Má specifické postavení před samotným dokumentem, je nepárový, ale přesto se neukončuje lomítkem, objevují se v něm velká písmena --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xml:lang="cs" xmlns="http://www.w3.org/1999/xhtml"> <!-- začátek dokumentu --> <head> <!– hlavička stránky --> <title>titulek stránky</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- kódování dokumentu --> <link rel="stylesheet" media ="all" href="styl.css" type="text/css" /> <!– propojení s CSS souborem --> </head> <!– konec hlavičky --> <body> <!-- začátek těla stránky --> </body> <!– konec těla stránky --> </html> <!-- konec dokumentu -->
XHTML – tělo stránky (tagy div, p, span, a, h1…h6) blokové prvky (div, p, h1, h2, h3, h4, h5, h6) řádkové prvky (a, span) div = blok p = odstavec h1, h2, h3, h4, h5, h6 = nadpisy od největšího k nejmenšímu a = hypertextový odkaz span = kontejner
XHTML – blokové a řádkové prvky v praxi <div> <h1>nadpis</h1> <p>odstavec</p> <p>odstavec <span>číslo</span> 2</p> <p><a href="http://www.seznam.cz">Seznam</a></p> </div> Hypertextové odkazy: absolutní x relativní x e-mail absolutní: <a href="http://www.seznam.cz">Seznam</a> <!-- nezapomínejte na protokol http:// --> relativní: <a href="zajmy.html">zájmy</a> e-mail: <a href="mailto:jan.novak@uhk.cz">webmaster</a>
CSS - syntax selektor { vlastnost: hodnota; } Selektory mohou být mj. tagy / prvky (body, div, p, h1, h2, h3, h4, h5, h6, span, a, ...). Pokud chceme např. nadefinovat pro celý dokument zarovnání textu doprostřed a barvu pozadí žlutou, zadáme: body { text-align: center; /* nezapomínejte na středník po zapsání každé vlastnosti */ background: yellow; Pozn.: Klávesové zkratky pro {} jsou ALT (pravý) + B / N nebo ALT (levý) + 123 / 125 (numerická klávesnice)
Úkol: vytvořte jednoduchý xhtml dokument Zadání v souboru instrukce02.doc