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
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í. 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@gmail.com">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)