Stáhnout prezentaci
Prezentace se nahrává, počkejte prosím
1
Tvorba webových stránek
2
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
3
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.
4
Wysiwyg editory MS Front Page, Publisher
Ecport do HTML – MS Word, Ooffice Zdarma . NVU, SeaMonkey
5
HTML: Tagy – uzavíraji text a určují, jak budou vypadat v prohlížeči.
<tag>, </tag>
6
Kostra stránky <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML
7
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>
8
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=# TEXT="#FFFFFF"> h) barvy pouze části dokumentu - tag <FONT> Př: <H1><FONT COLOR=#FFFF00">H1 - nadpis první úrovně a žlutý</FONT></H1>
9
Barvy
10
Písmo Lze měnit i velikost – SIZE
<P><FONT COLOR=BLACK SIZE=2>Písmo velikosti 2 a černé</FONT>
11
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=" ">maturita</A>
12
Vkládání obrázků Atributy : ALIGN (LEFT, RIGHT), WIDTH, HEIGHT
Může být i odkazem a mít rámeček
13
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)
14
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
15
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
16
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:
Podobné prezentace
