Tvorba webových stránek
3 způsoby jak tvořit stránky využití tzv. wysiwyg editorů psát přímo kód stránky kombinace předchozích
HTML dokument je pouze textový soubor, který lze běžně přečíst v libovolném textovém programu. Aby prohlížeč poznal, že se jedná o stránku internetu, resp. o HTML dokument, bývá uložen s příponou HTM nebo HTML - podle serveru, na kterém je uložen. HTML stránku zobrazíme tak, že ji zapneme v prohlížeči. WWW stránky jsou vytvořeny ve speciálním jazyce HTML.
Wysiwyg editory MS Front Page, Publisher Ecport do HTML – MS Word, Ooffice Zdarma . NVU, SeaMonkey
HTML: Tagy – uzavíraji text a určují, jak budou vypadat v prohlížeči. <tag>, </tag>
Kostra stránky <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML
Typy tagů Odstavce - <P> Konec řádku - <BR> Nadpisy (7 úrovní) - <H1>, <H2> … Zvýraznění <EM>kurzíva,</EM> <KBD>neproporcionální písmo,</KBD> <SAMP>výstupy z různých programů - neproporcionální písmo,</SAMP> <STRONG>silné zvýraznění textu,</STRONG> <VAR>označení proměnných - obvykle kurzíva,</VAR> <B>v textu vyznačuje tučné písmo,</B> <I>kurzíva,</I> <U>podtržený text,</U>
e) zarovnávání textu Př: <H1 ALIGN=LEFT>H1 - nadpis první úrovně VLEVO</H1> f) zarovnávání více odstavců - tag <DIV> Př: <DIV ALIGN=RIGHT> <P>První odstavec... <P>Druhý odstavec... </DIV> g) barvy dokumentu Př: <BODY BGCOLOR=#800080 TEXT="#FFFFFF"> h) barvy pouze části dokumentu - tag <FONT> Př: <H1><FONT COLOR=#FFFF00">H1 - nadpis první úrovně a žlutý</FONT></H1>
Barvy
Písmo Lze měnit i velikost – SIZE <P><FONT COLOR=BLACK SIZE=2>Písmo velikosti 2 a černé</FONT>
Obrázky a odkazy Nedílnou součástí stránek Obrázky jako pozadí, loga, obrázky jako odkaz Odkaz na určitou část stránky: <A HREF="#Nákup">apple</A> Odkaz na jiný dokument HTML: <A HREF=" http://jardaz.cz/articles.php ">maturita</A>
Vkládání obrázků Atributy : ALIGN (LEFT, RIGHT), WIDTH, HEIGHT Může být i odkazem a mít rámeček
Kaskádové styly (CSS): Design Úprava objektů na stránce nastavení parametrů písma Deatailní nastavení jednotlivých objektů Problém – prohlížeče (ten samý styl si vyloží jinak)
3 styly zápisu Přímý – definice stylu vložená do tagu stránky <h1 style="color: blue">Hlavní modrý nadpis</h1> Definice stylu v hlavičce <head> ... <style> h1 {color: red} </style> </head> Externí soubor CSS
Parametry CSS: Formátování textů: Vlastnosti písma: color: rgb(28, 46, 59); - barva (red, blue atd. ) background-color: red: - barva pozadí font-size: 15px; - velikost font-style: normal; - styl písma (bold, italic) font-family: Arial,Helvetica,sans-serif; - font text-decoration; - podtržení (none, underline) Vlastnosti odstavce. text-align: left; - zarovnání (center, right, justify) vertical-align: top; margin-top: 6px; - odsazení nad odstavcem (v bodech px) margin-bottom: 0px; - odsazení pod odstavcem
Formátování odstavců: #ramecek { border: 10px solid rgb(191, 153, 115); -šířka, barva margin: 0pt auto 1em - vnější okraj; padding: 10px; - vnitřní okraj position: relative; - umístění - pozice - relativní vůči předchozí oblasti top: 0pt; left: 0pt; width: 90%; - velikost vůči stránce min-width: 530px; - minimální velikost max-width: 1024px; background-color: rgb(255, 230, 204); - barva elementu (ráměčku) Oblasti mohou být také plovoucí přes část okna prohlížeče: float: left: