Jak si vytvořit stránku (X)HTML, CSS, PHP. Úvod Internetová stránka je soubor s příponou htm nebo html. Je to skoro obyčejný textový soubor obohacený.

Prezentace na téma: "Jak si vytvořit stránku (X)HTML, CSS, PHP. Úvod Internetová stránka je soubor s příponou htm nebo html. Je to skoro obyčejný textový soubor obohacený."— Transkript prezentace:

1 Jak si vytvořit stránku (X)HTML, CSS, PHP

2 Úvod Internetová stránka je soubor s příponou htm nebo html. Je to skoro obyčejný textový soubor obohacený o značky jazyka HTML (tagy). Soubor s příponou.html má na disku ikonku, která ukazuje, že jde o stránku. Stránka se dá otevřít dvěma způsoby: buďto se na ni podívat jako na stránku (v prohlížeči), pak se nedá upravovat. nebo otevřít jako text (třeba v Poznámkovém bloku), tomu se říká zdroj nebo kód nebo zdrojový kód, ten se dá upravovat. Tak se stránky vytvářejí, jako kód. Soubory HTML můžete vytvořit buď v nějakém HTML editoru (dobré pro začátečníky), nebo můžete napsat rovnou zdroj v HTML jazyce (to je pracnější, ale jistější, zábavnější a není to až tak těžké).

3 HTML editory - programy HTML editory jsou programy speciálně určené pro tvorbu stránek. Pro začátečníky jsou použitelné zejména wysiwyg editory, ve kterých píšete rovnou text a kódem html se nezabýváte.Ve wysiwyg editoru se normálně napíše text, vloží se obrázky a uloží se to na disk do souboru s příponou html. To je vše. Editor všechny html značky (tagy) doplní sám. Z wysiwyg editorů: Dreamweaver, FrontPage, NVU a pár dalších. Wysiwyg editory mají samozřejmě své nevýhody, hlavní je sporná kvalita vytvořeného kódu. Kromě wysiwyg editorů tedy existují i editory strukturní, ve kterých píšete přímo kód, ale ten program s tím hodně pomáhá (napovídá, doplňuje apod.). Strukturní editory: HomeSite, PSPad, EasyPad, UltraEdit, jEdit apod., v nouzi i Poznámkový blok. Prostě normální textové editory. Ale to už jsem u druhé možnosti dělání stránek, u ťukání zdroje. Na psaní stránky nelze používat Word.

4 Struktura dokumentu Každý HTML soubor by měl obsahovat několik základních tagů hlavičky a těla. Tím se zaručí, že všichni klienti (zejm. prohlížeče) pochopí, o co v dokumentu vlastně jde

5 Zákaz křížení tagů Toto se třeba nesmí: tučná kurzíva takto je to správně: tučná kurzíva Ironií zůstává, že když takovouto neplatnou křížovou konstrukci vyrobíte, prohlížeče to většinou vezmou a pochopí.

6 Tagy a atributy jsou malými písmeny Odkaz je správně ale Odkaz je špatně Pokud náhodou napíšete nějaký tag nebo atribut velkým písmenem, je to sice jako špatně, ale v prohlížeči by to problém dělat nemělo.

7 tagVýznamPárovýVýskyt htmlzačátek HTML dokumentu anona začátku souboru headhlavička stránkyanona začátku souboru bodytělo stránky + definice pozadí anoza poznámkaanokdekoliv !doctypespecifikace DTDneúplně na začátku souboru

8 Ťukání zdroje Napíšem si zdroj od začátku samy v textovém editoru. Musíme se naučit základy jazyka HTML, čemuž se stejně časem nelze vyhnout, protože složitější věci se ve wysiwyg editorech dělají špatně. Nyní ukázka zdrojového kódu HTML: Má první stránka Moje první html stránka. A nějaké další texty. Když si vezmete třeba Poznámkový blok (Notepad), vyťukáte tam předchozí textík (nebo zkopírujete) a uložíte jej někam na disk jako soubor třeba pod jménem priklad1.html, máte hotovou první internetovou stránku. Příklad si můžete zobrazit v prohlížeči.

9 Začíná a končí celý dokument. Veškerý další obsah musí být uvnitř. Jedná se o značku nepovinnou, většina prohlížečů si ji domyslí. Pokud ale chcete mít soubory v souladu s normou, tag používejte.Tag html nemá žádné atributy. Hlavička dokumentu, která se nezobrazuje. Obsahuje nepovinně další tagy (title, meta, link, style, script aj.). Pokud v hlavičce použijete prostý text, v některých prohlížečích se zobrazí na začátku stránky! Tag head nemá žádné atributy.

10 Informace o dokumentu, metadata. Nepárový tag vyskytující se v hlavičce. Slouží třeba k informaci o klíčových slovech nebo použitém kódování. Pomocí značky meta zajistíte správné zobrazení českých znaků (ˇ,´ atd..) Běžná internetová stránka má v hlavičce kolem čtyř různých tagů. V praxi je čtou a používají pouze programy (vyhledávače, parsery a editory)

11 atributVýznamHodnota namedruh uživatelské informace keywords | description | author | generator | a spousta dalších http-equivekvivalent http hlavičky content-type | refresh | mnoho dalších (jakýkoli http údaj) Každý meta tag obsahuje buď atribut name, nebo http-equiv. Oba najednou být nemohou.

12 Tag, atribut name name=Významcontent= keywordsv minulosti klíčová slova pro vyhledávací stroje, dnes bezcené slovo, slovo, slovo descriptionpopis stránky, většinou pro vyhledávací stroje stručný popis obsahu stránky authorinformace o autorovi, většinou jméno cokoliv generatoridentifikace programu, který stránku vytvořil řetězec vkládaný programem robotszakázání robotů indexovat nebo sledovat odkazy [index | noindex ], [ follow | nofolow] a další milión hodnot, které si přidává nějaký software nebo se hodí pro cosi záhadného

13 Keywords a description Klíčová slova, keywords (vyhledávače je již ignorují): Popisek stránky, description (objevuje se občas jako popisek v Google):

14 !Doctype Píše se úplně na začátek souboru, ještě před značku. Není nutné to dělat, ale podle standardu značkovacích jazyků je vhodné strukturovanou formou říci, že tento dokument je HTML dokument; navíc se udává verze HTML, které to odpovídá. <!doctype html... Jedná se o takzvanou deklaraci typu dokumentu. Jde o evoluční relikt (něco jako slepé střevo) z doby SGML (předchůdce HTML). Tehdy bylo potřeba klientským programům sdělit, co za dokument se bude zpracovávat. Na doctype tolik nezáleží Jediné, na čem záleží, je to, aby se stránka vykreslila v IE stejně jako v jiných prohlížečích. Toho se dosáhne tím, že se do stránky přidá libovolná doctype deklarace, která Explorer přepne do standardního módu. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//CS" "http://www.w3.org/TR/html4/strict.dtd"> nebo v poslední době Zápis je dokonce oficiálně označen za správný doctype pro HTML 5 (to je pátá verze jazyka HTML).

15 , Titulek stránky. Párový tag. Mezi značkami a je text, který bude chápán jako titulek. Titulek má několik málo známých funkcí, například: zobrazuje se v záhlaví okna a na hlavním panelu jako nadpis aplikace zobrazuje se jako nadpis ve vyhledávačích Obsahem elementu může být pouze obyčejný text bez tagů.

16 , Označuje tělo stránky, do něj se zapisuje veškerý obsah HTML stránky. Všechny níže zmíněné atributy tagu body (vyjma obecných) jsou zastaralé a nahrazují se využitím CSS vlastností nastavených pro tag body (doporučené CSS vlastnosti uvádím v pravém sloupci tabulky).

17 Atributy tagu Atribut tagu VýznamHodnotyCSS náhrada pro tag body bgcolorbarva pozadíbarvabackground-color backgroundobrázek na pozadíURL obrázkubackground-image textbarva popředí (textu)barvacolor linkbarva nenavštívených odkazů barvaa:link {color:...} vlinkbarva navštívených odkazůbarvaa:visited {color:...} alinkbarva klikaných odkazů (a pod tabulátorem) barvaa:active {color:...} bgpropertiesposouvání obrázkového pozadí scroll | fixedbackground-attachment scrollrolování těla (raději neměňte) yes | nooverflow leftmarginlevý okrajpixelymargin-left topmarginhorní okrajpixelymargin-top rightmarginpravý okrajpixelymargin-right bottommarginspodní okrajpixelymargin-bottom marginwidthlevý a pravýpixelymargin marginheighthorní a spodnípixelymargin

18 Příklad: Zadávání barev pomocí atributů tagu body je zastaralé. Doporučuji barvit dokument pomocí CSS stylů, např.: nebo ještě lépe v hlavičce dokumentu pomocí tagu style: body {color: blue; background-color: yellow; background-image: URL('obrazek.gif')} a:link {color: green;} a:visited {color: olive;} a:active {color: #FF0000}

19 Všechno, co je v HTML souboru obaleno značkami, je považováno za poznámku a nezobrazuje se. její konec. Poznámkám se také říká "komentáře". záludnost: Nevnořujte poznámky: ale tohle už ne! -->

20 Text Značky pro text jsou dvojí - fyzické určují formátování a logické určují význam. Veškeré značky jsou řádkové, neodsazují se od ostatního textu, nemají okraje. Doporučuje se používat značky pro logické formátování, díky kterým prohlížeč bude rozumět typu obsahu. Fyzické formátování se doporučuje vždy nahrazovat pomocí CSS vlastností a HTML ponechat jen pro popis obsahu, jeho logiky, významu (sémantiky). Z logických značek si zapamatujte především span a strong, ty užijete nejčastěji. Ostatní značky uvádím spíše pro zajímavost, pro úplnost.

21 Textové elementy Základy typografie Za tečkou se píše mezera Za čárkou se píše mezera HTML řádky zalamuje na velikost obrazovky Pokud uzavřete text do značek a NEbude, text NEbude zalomen Pro zalomení řádku se používá značka ne klávesa [enter] Pro zapsání dvou a více mezer se používá entita NE [mezerník] Ve zkratkách typu s. r. o. se používají pevné mezery, aby zkratka nebyla náhodou rozdělena do dvou řádků Rovněž pokud zkratka obsahuje pomlčku Pokud budete dodržovat výše zmíněná pravidla, máte polovinu úspěchu v kapse Základní textové elementy Všechny elementy o kterých se zmíním musí být uzavřeny v elementu body. Elementy jsou buď řádkové nebo blokové. Řádkové (inline) elementy mohou obsahovat text a jiné řádkové elementy. Řádkový element nemůže obsahovat blokový. Blokové (block) elementy mohou obsahovat řádkové elementy. Některé z nich mohou obsahovat i další blokové elementy. Mezi tyto elementy patří například odstavce nebo nadpisy.

22 Fyzické formátování tagVýznamPárovýPoužívat? btučné písmoano ikurzívaano upodtržení textuanone subdolní indexano suphorní indexano smallzmenšení textuano ne bigzvětšení písmaano ne spřeškrtnutý textano ne strikepřeškrtnutý textano ne fontpísmoanone basefontzákladní fontne blinkblikání písmaanone nobrnezalamovat obsahano ne wbrvolitelné rozděleníne

23 Logické formátování tagVýznamPárovýObvyklý vzhled spanúsek textuanonormální strongzvýraznění (tučně)anotučné emzvýraznění (kurzíva)anokurzíva citecitaceanokurzíva codevýpis kóduanostrojopis dfnnově použitý termínanokurzíva kbdvstup z klávesniceanostrojopis sampukázkaanostrojopis ttteletypeanostrojopis varformátování proměnnéanokurzíva abbrustálený výrazanonormální acronymzkratkaanonormální delsmazaný obsahanopřeškrtnuto inspřidaný textanopodtrženo qcitaceanonormální

24 b Tučný text (z angl. "bold"). Používá se velmi často ke zvýraznění. Bývá zaměňován se, což je logické zvýraznění realizované tučným písmem. i Kurzíva (z angl. "italic"). Bývá zaměňován za, což je logické zvýraznění realizované kurzívou. u Podtržení (a angl. "underline"). Doporučuji nepoužívat. Z následujících důvodů: Podtržený text se plete s odkazy Typograficky není podtržení nic hezkého.Odkazy se v normálním případě podtrhávají samy, není nutno to nastavovat. sub Dolní index (z angl. "subscript"). Pro další snížení a zmenšení je možno použít vícekrát za sebou. Stejného efektu jako tagem se dá dosáhnout pomocí CSS stylu vertical- align: sub. Ale je dobrý tag na vyznačení sémantiky (smyslu) textu. Vždy, když děláte dolní index, např. H2SO4, používejte tag. Pokud chcete udělat jenom grafický efekt (a zvýrazňovaný prvek není dolním indexem), použijte styl vertical-align: sub. sup Horní index (angl. "superscript"). Platí pro něj totéž, co pro, akorát že ekvivalentní styl je vertical-align: super, nikoli vertical-align: sup.

25 small Zmenšení písma o jeden stupeň. Možno použít vícekrát za sebou: maličký text big Zvětšení písma o jeden stupeň. Možno použít vícekrát za sebou. s Přeškrtnuté písmo (z angl. striked). Vizte též a. strike Přeškrtnuté písmo. Osobně doporučuji používat spíše než, Úplně nejlepší je ale texty vůbec neškrtat nebo použít tag. Přeškrtnutí textu se dá udělat i pouze graficky pomocí CSS stylu text-decoration: line-through.

26 blink Blikající písmo (z angl. blink = mrkat). Podporováno pouze Netscapem, Operou a Mozillou. Nahraditelné stylem text- decoration: blink (se stejnou podporou).

27 font Nastavení barvy, velikosti a fontu písma. Atribut tagu VýznamHodnotyNahradit stylem colorbarva písmabarvacolor sizevelikost, stupeň písma 1 až 7 | +1 | -1 (+-1 až 6)) font-size facefont, druh písmajména fontů oddělená čárkami font-family

28 Příklad: červené písmo Arialem U face lze sice zadávat více fontů (pokud není prohlížečem rozpoznán první název, jde k dalšímu), ale v praxi je nutno zůstat u Arialu (varianty Helvetica, Verdana, sans- serif), Timesu (serif) a Courieru (monotype), protože jen u nich je jistota, že budou na klientském počítači zobrazeny správně a s češtinou. Doporučuje se i přidávání "CE" za název písma. Je doporučováno tag nepoužívat (je zastaralý). Lze jej nahradit tagem s atributem style s definicí CSS stylu nebo s předem definovanou třídou. Příklad: červené písmo Arialem size Velikost písma se v HTML nenastavuje v bodech jako všechny ostatní rozměry, ale ve stupních. Stupně jsou jakési imaginární jednotky vymyšlené pouze pro účel HTML. Stupňů písma je sedm. Od vysloveně mrňavého stupně jedna, které se skoro nedá číst, až po kravskou velikost 7. Běžné písmo je stupeň číslo 3. Přesné velikosti písem nejsou nijak konkrétně stanoveny. Uživatel si může písmo zvětšovat a zmenšovat v prohlížeči. Dělá se to příkazem Zobrazit - Velikost písma (nebo tak něco -- v každém prohlížeči to může být jinak). Přesné velikosti písma lze dosáhnout pouze pomocí CSS. Kromě přímého nastavení stupně písma se může použít relativní zápis +-, např. size="+1" znamená zvětšení písma o jeden stupeň. V praxi doporučuji vůbec nepoužívat a velikost písma definovat pomocí CSS stylu font-size. Na tag si dejte pozor. Nechová se zcela neutrálně (jako se chová ), takže když použijete i třeba bez parametrů, je možné, že písmo přece ovlivní (zejména se to stává v Exploreru), většinou nějak záhadně.

29 Nadpisy Nadpisy mohou obsahovat řádkové elementy (inline prvky). Vyhledávače kladou větší význam slovům, která se nacházejí v nadpisu. Nadpis by měl shrnovat obsah části stránky, která bezprostředně následuje. Pomocí nadpisů můžete dokument logicky rozdělit do několika částí. K tvorbě nadpisů je určen element h (heading), který je doplněn číslicí 1-6. Konečný zápis nadpisu může být h1, h2, h3, h4, h5 a h6. 1-6 určují úroveň nadpisu, h1 je nadpis nejvyšší úrovně, je nejdůležitější, měl by shrnovat obsah celého dokumentu a ve vizuálních prohlížečích je zobrazen velkým tučným písmem. Naopak h6 je nejméně důležitý nadpis a v prohlížeči je zobrazen malým písmem. Odstavce Pro zápis odstavců používáme element, který může obsahovat inline elementy a text. Odstavce jsou vykresleny jako bloky textu, oddělené od ostatního obsahu, čímž přispívají k logickému dělení obsahu stránky.