ZÁKLADY HTML TVORBY JEDNODUCHÝCH WEB STRÁNEK Základní struktura kurzu: Orientace v prostředí HTML a editoru kancelářského balíku OpenOffice.org verze 2.0 a vyšší Tvroba struktury HTML dokumentu Základní tagy Zásady syntaxe HTML Některá pravidla pro tvorbu webu FTP Web-hosting na českém internetu zdarma Základní výstup kurzu: Základní orientace v HTML kódu Vytvoření jednoduché stránky a podstránky Umístění vytvořené stránky na webu (http://web-trial.ic.cz) ÚVOD K tvorbě jednoduchého webu potřebujeme: alespoň základní znalost HTML HTML editor strukturní (nutná znalost HTML) nebo wysiwyg webový prohlížeč (Internet Explorer, Mozilla ap.) alespoň jednoduchý nástroj na práci s obrázky, zejména jejich kompresí prostor na internetu pro začátek stačí tzv. web-hosting zdarma znalost práce s nástroji FTP pro přenos souborů z počítače na internet (bývá součástí některých web-hostingových plánů) Nejjednodušší způsob, jak se naučit HTML a dělat časem dobré stránky: tvořit soubory ve wysiwyg editoru (např. OpenOffice) prohlížet si zdrojové kódy, které tento program generuje (časem si je zapamatujete) v rámci cvičení si je trochu pozměnit a sledovat, co se stane. Strana 1 (celkem 30)
TAGY = ZNAČKY HTML soubor je text uzavřený do značek v hranatých závorkách < >, tyto značky se nazývají tagy. Tagy určují, jak bude text vypadat v prohlížeči, jakou bude mít strukturu a jak se budou zobrazovat např. obrázky. Text vně těchto uzavřených závorek je to, co se má zobrazovat v prohlížeči. Cvičení Založte si v počítači novou složku s názvem HTML TEST Otevřte si v prohlížeči stránku: http://web-trial.ic.cz V prohlížeči přejděte na nabídku ZOBRAZIT Zdrojový kód. Otevře se vám Poznámkový blok a v něm kompletní zdrojový kód dané které stránky. Dejte celý text do bloku. Otevřte OpenOffice dokument, přejděte na nabídku SOUBOR Nový HTML dokument. HTML dokument se otevře jako samostatný dokument. Prázdný HTML dokument uložte do složky HTML TEST pod názvem stranka.html. Jděte na nabídku ZOBRAZIT HTML zdroj. Po kliknutí na HTML zdroj se objeví vlastní strukturní HTML editor se základní osnovou každého HTML dokumentu: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=windows-1250"> <TITLE></TITLE> <META NAME="GENERATOR" CONTENT="OpenOffice.org 2.0 (Win32)"> <META NAME="CREATED" CONTENT="20061203;17403454"> <META NAME="CHANGED" CONTENT="16010101;0"> </HEAD> <BODY LANG="cs-CZ" DIR="LTR"> <BR> </BODY> </HTML> Strana 2 (celkem 30)
Pokud tento předdefinovaný kód přepíšete zdrojovým kódem ze stránky http://web-trial.ic.cz a opět stisknete příkaz Zobrazit HTML zdroj, objeví se ve wysiwig editor a v zásadě to, co je obsahem stránky http://web-trial.ic.cz i když patrně dojde k určitém zkreslení. V tomto momentě můžete stránku pomocí editoru upravovat, měnit fonty, velikost písma, vkládat nové obrázky a pod. Samozřejmě, vše má svoje pravidla. ZÁKLADNÍ TAGY Tagy existují párové a nepárové. Párové tagy Jak je zřejmé z příkladu, vyskytují se tagy ve dvojicích <tag> a </tag>, kde ten první tag učitý úkol začíná a druhý tento úkol končí. </tag> lomítko na začátku znamená, že jde o uzavírací tag. Příklady párových tagů: <HEAD> je začátek hlavičky a </HEAD> je její konec <BODY> je začátek těla stránky a </BODY> je konec těla stránky <TITLE> Moje osobní stránka </TITLE> název stránky, který se objeví v horbí liště prohlížeče <b> je začátek tučného textu a </b> je konec tučného textu. Kromě párových tagů existují ještě tagy nepárové, které nemají uzavírací tag. Příklady nepárových tagů: <img> je tag pro obrázek. Příklad: <IMG SRC= http://web-trial.ic.cz/obrazky/banner.jpg > <br> je tag pro řádkový zlom Mimochodem tagy lze psát malým a i velkým písmem a většinou nedojde při zobrazování v prohlížeči k problémům. Zrovna tak sice poslední standard určuje psaní uvozovek po =, nicméně je možné uvozovky vynechat a stránka se stejně bude dobře zobrazovat. To je jeden ze zásadních rozdílů oproti programovacím jazykům, kde jsou pravidla striktně daná. Strana 3 (celkem 30)
PŘEHLED DALŠÍCH DŮLEŽITÝCH TAGŮ: Vymezení nadpisů <h1> Hlavní nadpis </h1> Vymezení nadpisu první úrovně. <h2> Podnadpis </h2> Nadpis druhé úrovně (mezinadpis, nadpis kapitoly). Dá se použít až šest úrovní nadpisů (tedy až <h6></h6> ). Vykreslují se různě velké podle důležitosti. <p> </p> Vymezení odstavce.po jeho konci prohlížeč automaticky zalomí řádek a udělá vertikální mezeru. <b> tučný text</b> Text mezi těmito tagy bude tučný. <i> kurzíva </i> Kurzíva Tagy lze ale také kombinovat <b><i>tučná kurzíva </i></b> <TT>TEXT</TT> Pro efekt strojově psaného textu <u>podtženo</u> Pro podtržený text <strike>přeškrtnuto</strike> Pro přeškrtnutý text Možná kombinace tagů např.: <STRIKE><H1>Přeškrtnutý nadpis 1</H1></STRIKE> <span> </span> nebo také (častěji) <font></font> dvojice tagů vymezující nějak odlišný text, případně font, velikost písma apod.. <span style="color: red"> červená </span> <FONT COLOR="#ff0000">červená</FONT> V tomto případě má uzavřený kus textu červenou barvu písma. Jde o první příklad tagu, který má tzv. atribut. Atributem je "style" a má hodnotu "color: red" (angl. barva: červená) nebo FONT COLOR="#ff0000" kde červená barva je vyznačena kódem (tzv. HEX kód) Pomocí tohoto atributu se dá detailně nadefinovat vzhled textu, obaleného libovolným tagem. Strana 4 (celkem 30)
Pozn.: <span></span> má význam pro strukturování dokumentu např. ve spolupráci s tzv. kaskádovými styly. Pokud zadáme např. <span style="color: red"> červená </span> v editoru OpenOffice.org bez použití kaskádových stylů, tag se automaticky převrátí na variantu <FONT COLOR="#ff0000">červená</FONT>! Barvy je nutno zadávat výhradně v HEX kódu nebo v angličtině (základní paleta barev)! Anglické názvy barev a HEX kódy nalezneme např. zde: http://barvy.gene.cz/ba-hex.html <br> Zalomení řádky: text po tomto tagu bude vždy začínat na novém řádku, ale není to nový odstavec. Pozor, tento tag je nepárový, to znamená, že žádné </br> neexistuje! DALŠÍ TAGY / KÓDY : STYLY NA STRÁNCE - BARVY POZADÍ STRÁNKY, BARVA PÍSMA, TYPY FONTŮ A JEJICH VELIKOST <body style="background-color: green; color: yellow;"> Zejména ve spojení s kaskádovými styly. Editor OpenOffice.org používá toto kódování (pozn. pokud použijeme výše uvedené, automaticky je překlopí): <BODY LANG="cs-CZ" TEXT="#ffff00" BGCOLOR="#008000" DIR="LTR"> BGCOLOR="#008000" označuje barvu pozadí stránky TEXT="#ffff00" označuje barvu písma Editor OpenOffice.org bude také rozumět tomuto vyznačení: <BODY LANG="cs-CZ" TEXT="yellow" BGCOLOR="green" DIR="LTR"> Nicméně, pokud to takto napíšeme, editor si barvy opět přepíše do HEX kódu. Strana 5 (celkem 30)
V každém případě, nastavení barev textu snadno uděláme přímo v editoru podobně jako když nastavujeme barvy písma v MS Word (V OpenOffice.org jdeme přes nabídku Formát Znak. Níže uvedený řádek: Typ fontu, velikost a barva V HTML kódu vypadá takto: <FONT SIZE=5 STYLE="font-size: 20pt"><FONT FACE="Verdana"><FONT COLOR="#ff0000">Typ fontu, velikost a barva</font></font></font> Přičemž : <FONT SIZE=..> označuje velikost písma uvedenou bud ve škále 1-7, nebo v bodech pt <FONT FACE=""> udává typ fondu (Times New Roman, Verdana apod.) <FONT COLOR=""> udává barvu písma UMÍSŤOVÁNÍ NA STRÁNCE Párové tagy umísťující text, objekt na střed, vpravo a vlevo. Pozor nelze zarovnávat text do bloku. <CENTER></CENTER> - umístění na střed <DIV ALIGN=LEFT></DIV> - umístění (objektu) vlevo <DIV ALIGN=RIGHT></DIV> - umístění (objektu) vpravo Pozn.: Pro formátování a popis druhu bloků textu je k dispozici obecná značka <div align="">...</div>. Obecně používanou (byť standardy nedoporučovanou) zkratkou pro <div align="center"> čili vystředění bloku textu je <center> </center>. DIV je opět značka vážící se zejm. k tzv. kaskádovým stylům. Strana 6 (celkem 30)
Umístění textu v odstavci... : Na střed <P ALIGN=CENTER><FONT FACE="Times New Roman, serif"><font SIZE=3><FONT COLOR="#ff0000">Na střed</font></font></font> Vlevo <P ALIGN=LEFT><FONT COLOR="#ff0000"><FONT FACE="Times New Roman, serif"><font SIZE=3>Vlevo</FONT></FONT></FONT> <P ALIGN=RIGHT><FONT COLOR="#ff0000"><FONT FACE="Times New Roman, serif"><font SIZE=3>Vpravo</FONT></FONT></FONT> Vpravo TABULKY Podle své složitosti mohou mít tabulky poměrně nepřehledný kód je ale poměrně snadné je tvořit přímo v HTML wysiwig editoru a dále upravovat. I tak je vhodné se alespoň v kódu orientovat, protože to může usnadnit provedení drobných změn. Pozn.: tabulky jsou často vhodné jako pomocník při formátování stránky např. slouží jako ůdržák vložených obrázků, kdy zaručí, že obrázek drží na stráncepřesně v tom místě, kam jsme jej vložili. Strana 7 (celkem 30)
Zde několik typů tabulek a jejich kódů: Jednoduchá tabulka s jednoduchým orámováním v automatické barvě rámečku: <TABLE WIDTH=100% BORDER=1 CELLPADDING=4 CELLSPACING=0> <COL WIDTH=85*> <COL WIDTH=85*> <COL WIDTH=85*> <THEAD> <TR VALIGN=TOP> <TD WIDTH=33%> </TD> <TD WIDTH=33%> </TD> <TD WIDTH=33%> </TD> </TR> </THEAD> <TBODY> <TR VALIGN=TOP> <TD WIDTH=33%> </TD> <TD WIDTH=33%> </TD> <TD WIDTH=33%> </TD> </TR> <TR VALIGN=TOP> <TD WIDTH=33%> Strana 8 (celkem 30)
</TD> <TD WIDTH=33%> </TD> <TD WIDTH=33%> </TD> </TR> </TBODY> </TABLE> TAGY TABULKY (POKUS O) VYSVĚTLENÍ <TABLE></TABLE> - Základní uvození tabluky <TABLE WIDTH=100% BORDER=1 CELLPADDING=4 CELLSPACING=0></TABLE> TABLE WIDTH=100% Uvození udává šíři tabulky na 100% šíře stránky, BORDER=1 - jednoduchý rámeček CELLPADDING=4 - vnitřní okraj buněk (v pixelech), čili vzdálenost textu od rámečku. CELLSPACING=0 - vnější okraj buněk (vně rámečku) <THEAD></THEAD> (table head) ohraničuje řádky, které tvoří záhlaví tabulky. <TBODY></TBODY> ohraničuje řádky, které tvoří vlastní "tělo" tabulky. V tabulce může být více <TBODY> bloků s různým formátováním. Pokud je přítomno <THEAD> a/nebo <TFOOT> (zápatí), musí tabulka obsahovat alespoň jedno <TBODY>. <TR> </TR> Párový tag, který začíná a končí řádek tabulky. (TR znamená table row, čili řádek). <TD> </TD> Párový tag buňky tabulky (table data / data tabulky) <TH> </TH> Párový tag pro hlavičku tabulky (table header) má-li obsahovat nadpis sloupce / řádky (resp. <td>... </td> ('table data', data tabulky) pokud obsahuje obyčejná data/text). Strana 9 (celkem 30)
Jednoduchá tabulka: Obsah buňky levá spodní Další buňka pravá spodní Kód: <table > <tr> <td>obsah buňky</td> <td>další buňka</td> </tr> <tr> <td>levá spodní</td> <td>pravá spodní</td> </tr> </table> Tabulka s širším barevným / červeným rámečkem, umístěná uprostřed stránky (60% šíře stránky) <CENTER> <TABLE WIDTH=60% BORDER=5 BORDERCOLOR="#ff0000" CELLPADDING=4 CELLSPACING=0> <COL WIDTH=85*> <COL WIDTH=85*> <COL WIDTH=85*> <THEAD> <TR VALIGN=TOP> <TH WIDTH=33%> </TH> <TH WIDTH=33%> </TH> <TH WIDTH=33%> </TH> </TR> <TR></TR> <TR></TR> <TR></TR> Strana 10 (celkem 30)
</THEAD> <TBODY> <TR VALIGN=TOP> <TD WIDTH=33%> </TD> <TD WIDTH=33%> </TD> <TD WIDTH=33%> </TD> </TR> <TR></TR> <TR></TR> <TR></TR> <TR VALIGN=TOP> <TD WIDTH=33%> </TD> <TD WIDTH=33%> </TD> <TD WIDTH=33%> </TD> </TR> </TBODY> </TABLE> </CENTER> Strana 11 (celkem 30)
HYPERTEXTOVÉ ZNAČKY A ODKAZY Odkaz na jinou HTML stránku se vytvoří pomocí <a href="url">popis</a> ('anchor' čili kotva). POPIS obsahuje text odkazu (v prohlížeči většinou podtržený a aktivovatelný). Např.: Stránky Českého helsinského výboru Kód: <A HREF="http://www.helcom.cz/" TARGET="_blank">Stránky Českého helsinského výboru</a> TARGET="_blank" způsobuje, že se stránka otevře ve zvláštním okně TARGET="_self" - způsobuje, že se stránka otevře v jednom okně / tedy v okně stránky, ze který je link směřován. URL (Uniform Resource Locator, jednotná identifikace zdroje) je adresa příslušné HTML stránky. Formát je typ://stroj.doména:port/adresář/soubor (například http://www.kiv.zcu.cz:80/index_c.html; implicitní hodnota pro port je právě 80). Často používané typy zdrojů jsou: http pro Web stránky (HyperText Transfer Protocol); gopher pro přístup na gopher servery; telnet pro interaktivní práci (zkuste např. netfind s uživ. jménem netfind) (nemusí fungovat pokud nemáte telnet přístupný z prohlížečky) ftp pro přístup do ftp archivu; file pro přístup na lokální soubory (např. na pevném disku vašeho počítače); news pro čtení USENET news (není následováno '//', např. "news:comp.infosystems.www"); mailto pro odesílání pošty (platí totéž, např. "mailto:brada@kiv.zcu.cz"). Využití mailto : pokud si na stránku dáme např. svůj e-mail pro přímý kontakt, v prohlížeči to vypadá takto: janachrz@seznam.cz Kód ale vypadá takto: <A HREF="mailto:janachrz@seznam.cz" TARGET="_blank">janachrz@seznam.cz</A> Může také vypadat takto: Napište mi zprávu <A HREF="mailto:janachrz@seznam.cz?subject=Zpráva z mé osobní stránky" TARGET="_blank">Napište mi zprávu</a> Část?subject způsobí, že se předmět Zpráva z mé osobní stránky automaticky zobrazí v předmětu e-mailu, tedy za předpokladu, že uživatel používá e-mail klienta typu Outlook. Strana 12 (celkem 30)
Pozn.: Pokud je začátek URL (typ://stroj.doména:port/) vynechán, cílová stránka je adresována relativně vůči aktuální (např: href="../texty/pokec.txt") podle pravidel přechodů mezi adresáři na serveru, kde jsou stránky uloženy. Absolutní adresa : používá se ve formě plné adresy / cesty k cílovému webu http://www.helcom.cz nebo např. k obrázku http://web-trial.ic.cz/obrazky/banner.jpg. Relativní cesta : Pokud chci odkázat na jiný vlastní soubor, je zbytečné vypisovat tam celou adresu / cestu např. uvnitř vlastního webu <img src="http://web-trial.ic.cz/obrazky/banner.jpg>. V takovém případě, kdy odkazujiz vlastní stránky na objekt / místo ve vlastní stránce, stačí zadat relativní cestu: <img src="obrazky/banner.jpg"> Jestliže je cílový soubor v jiném blízkém adresáři, stačí také napsat <A href="adresář/soubor.htm">. Pro nadřazený adresář se používají konvenční dvě tečky. Např: <a href="../dovolena/kreta.html">kréta 2005</a> BARVY Základní tabulka barev black #000000 černá maroon #800000 tmavě červená green #008000 tmavě zelená olive #808000 tmavě žlutá navy #000080 tmavě modrá purple #800080 tmavě fialová teal #008080 tmavě tyrkysová gray #808080 tmavě šedá silver #C0C0C0 světle šedá red #FF0000 červená lime #00FF00 zelená yellow #FFFF00 žlutá blue #0000FF modrá fuchsia #FF00FF fialová aqua #00FFFF tyrkysová white #FFFFFF bílá Anglické názvy barev a HEX kódy nalezneme např. zde: http://barvy.gene.cz/ba-hex.html TYPY FONTŮ VHODNÝCH PRO WEBOVÉ STRÁNKY Strana 13 (celkem 30)
Standardní písma Microsoftu ARIAL ARIAL BLACK Comic Sans Ms Courier New Georgia Impact Monotype Times New Roman Trebuchet MS Verdana Webdings Ostatní typy se mohou zobrazit, ale nelze to garantovat a navíc bude s velkou pravděpodobností problém se zobrazováním češtiny / diakritiky. OBRÁZKY Hlavní zásady: Přiměřeně malé co do místa zabírajícího na obrazovce Přiměřeně malé co do velikosti souboru Lze pracovat i s náhledy (na stránce zobrazeny pouze náhledy a po kliknutí se přes URL natáhne obrázek o větším rozměru Obrázky lze zarovnávat (align center, left, right) Do obrázků lze vkládat hypertextové obrázky tedyobrázky mohou sloužit např. jako tlačítka. Základní informace o grafických editorech. Strana 14 (celkem 30)
POSTUP PRO VYTVOŘENÍ HTML SOUBORU V EDITORU Vytvořte si na disku novou složku, např. C:\Dokumenty\HTML stranka a přejděte do ní Vytvořte nový textový soubor v Poznámkovém bloku nebo nový HTML soubor v OpenOffice.org : pro tento účel můžete otevřít jakýkoliv z modulů OpenOffice.org (např. textový editor Writer) přejděte na Soubor Nový HTML dokument a klikněte; otevře se vám prázdný HTML dokument v editoru HTML, ten pojmenujete standardním způsobem přes příkaz Uložit jako. Strana 15 (celkem 30)
Pojmenujte jej na jméno stranka.html v případě použití Poznámkového bloku se změní ikona u souboru. Strana 16 (celkem 30)
Otevřete soubor stranka.html v Průzkumníku dvojklikem. Naskočí váš defaultní prohlížeč (např. Internet Explorer). V prohlížeči se zobrazí prázdná stránka. Strana 17 (celkem 30)
1) Zadejte Zobrazit Zdrojový kód. Spustí se textový editor (Poznámkový blok), zatím prázdný. Strana 18 (celkem 30)
2) Strana 19 (celkem 30)
Do otevřeného editoru (Pozn. bloku) napište nějaký text, podle libosti jej doplňte HTML značkami pro řádkový zlom a tabulku (viz příklady výše). Např. takto: Strana 20 (celkem 30)
Soubor uložit. Přepněte zpátky do prohlížeče a zadejte obnovit (F5). Prohlédněte si provedené změny. U uvedeného příkladu se projeví takto: Případně se vraťte do Poznámkového bloku a znovu upravte zdroj. Po uložení a obnovení se změny projeví. Opakujte. Zatím je takovázo stránka na vašem C: disku. Kopírovat na server ji budete až později. Strana 21 (celkem 30)
Pozn.: V názvech souborů určených pro web nikdy nepoužívejte diakritiku, zakázané programátorské značky ani mezery! Do názvu souboru, který je určen pro natažení na webový server proto NEPATŘÍ: 1. Dikaritika: ě š č ř ž ý á í é ů ú 2. Mezery / pauzy (nahrazujeme je podtržítkem nebo pomlčkou) a. příklad nesprávného pojmenování: moje stránky.html b. příklad správného pojmenování: moje_stranky.html 3. Tyto znaky:. (tečka), (čárka) ; : /?! < > [ ] ( ) # % * atd. a. příklad nesprávného pojmenování : náš výlet- 25.3.2007.html b. příklad správného pojmenování: nas_vylet_25032007.html nebo: nas_vylet_25_03_2007.html Nutno zopakovat, že bez ohledu na benevolenci systému Windows při pojmenovávání souborů jsou tyto zásady doporučeníhodné i u běžných textových / tabulkových atp. souborů. Strana 22 (celkem 30)
Práce v OpenOffice.org Na začátku jsme zmínili způsob otevření html dokumentu / editoru v OpenOffice.org. Výhodou tohoto editoru je, že generuje velmi čistý HTML kód v naprosto standardní podobě. Na rozdíl od poznámkového bloku nepíšeme stránku v kódu my, ale v editoru HTML pracujeme jako v běžném textovém editoru a HTML kód se automaticky generuje na pozadí. Postup: 1) Otevřeme HTML dokument Strana 23 (celkem 30)
2) Jako příklad použijeme jednoduchou tabulku, kterou jsme si vytvořili v Poznámkovém bloku s použitím HTML kódu zde ji ale vytvoříme běžnýmj způsobem přes příkaz Tabulka Vložit Tabulka: Strana 24 (celkem 30)
3) Vložíme jednoduchou tabulku s červenými okraji, vepíšeme shodný text; soubor uložíme jako stranka2.html. Tabulku si upravíme do potřebné velikosti v nabídce Tabulka Vlastnosti tabulky (umístění, velikost, rámečky, barva rámečku). Výsledek vypadá takto: Strana 25 (celkem 30)
4) Samozřejmě, i zde máme možnost zasáhnout přímo do HTML kódu, který se sám na pozadí generuje. Do HTML zdroje přepneme přes ikonku HTML zdroj : Nebo přes cestu Zobrazit HTML zdroj. Strana 26 (celkem 30)
5) Stránka s tabulkou se nám okamžitě objeví v HTML kódu v tomto režimu můžeme také kód vlastnoručeně upravovat. Strana 27 (celkem 30)
6) Zpět do editačního režimu přepneme opět kliknutím na ikonku Zdroj HTML v tomto editoru můžeme stránku dále upravovat jako v běžném textovém editoru, včetně vkládání objektů / obrázků. Pozor při vkládání obrázků obrázek musí být natažen na webovém serveru a adresa obrázku / URL musí obsahovat adresu nikoliv z pevného disku vašeho počítače, ale z daného web serveru. Na vložený obrázek stačí poklepat myší, vyskočí dialogové okno, do pole Odkaz / Jméno souboru pak potvrdíte / vepíšete internetovou afresu / URL vloženého obrázku: Pozn.: Obrázek se zobrazí samozřejmě pouze pokud je počítač připojen k síti Internet / v online režimu. Strana 28 (celkem 30)
PRAKTICKÉ UKÁZKY Orientace v prostředí OpenOffice.org o Navigace o Možnosti Web servery / hosting zdarma o Orientace v administrátorském prostředí o Vytváření adresářů o Kontrola linků provazby mezi stránkama o FTP a jiné formy nahrávání stránek na internet o Na co si dát pozor zobrazování stránek na internetu : vliv velikosti monitoru a typu prohlížeče Typy web stránek a portálů základní informace o o Typologie stránek statické vs. aktiviní S čím se na internetu setkáme web stránky internetové portály blogy diskusní fóra o o o Jazyky na programování web aplikací... HTML je jen začátek Co nabízí český internet (web hosting, software zdarma) Nástroje na tvorbu různých typů stránek editory redakční systémy nástroje na tvorbu diskusních fór přímo na internetu fotografická web-alba / fotogalerie přímo na internetu Strana 29 (celkem 30)
DOPORUČENÁ LITERATURA: Nick Vandome: Tvorba webových stránek, edice Začínáme s..., vyd. SoftPress 2003 Jana Hanzlíková: Webdesign pro úplné začátečníky, vyd. Computer Press 2004 Lukáš Honek: HTML Kapesní přehled, Computer Press 2004 UŽITEČNÍ POMOCNÍCI NA INTERNETU: PRO ZAČÁTEČNÍKY: http://tvorba-www.webz.cz/ http://www.webtvorba.cz/ http://polopate.jakpsatweb.cz/ http://www.jakpsatweb.cz/html/ http://www.kiv.zcu.cz/~brada/kondenzovanehtml/ http://tvorba-webu.zdarek.com/zaklady/ (obsahuje i šablony) BAREVNÉ KÓDY (HEX) a názvy barev v angličtině: http://barvy.gene.cz/ba-hex.html http://tvorba-webu.zdarek.com/html/barvy-na-pozadi.php http://www.jakpsatweb.cz/archiv/barvy-pojmenovane.html PRO POKROČILÉ / POKROČILEJŠÍ: http://www.jaknaweb.com Vše o www: http://www.kosek.cz/ http://tvorba-webu.zdarek.com/ Strana 30 (celkem 30)