1 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 verz...
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.
Zpracovala Mgr. Jana Chržová : [email protected] 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:
Zpracovala Mgr. Jana Chržová : [email protected] 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 a , kde ten první tag učitý úkol začíná a druhý tento úkol končí. lomítko na začátku znamená, že jde o uzavírací tag. Příklady párových tagů: je začátek hlavičky a je její konec je začátek těla stránky a je konec těla stránky <TITLE> Moje osobní stránka název stránky, který se objeví v horbí liště prohlížeče je začátek tučného textu a 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ů: je tag pro obrázek. Příklad: 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á.
Zpracovala Mgr. Jana Chržová : [email protected] Strana 3 (celkem 30)
PŘEHLED DALŠÍCH DŮLEŽITÝCH TAGŮ: Vymezení nadpisů
Hlavní nadpis
Vymezení nadpisu první úrovně.
Podnadpis
Nadpis druhé úrovně (mezinadpis, nadpis kapitoly). Dá se použít až šest úrovní nadpisů (tedy až ). Vykreslují se různě velké podle důležitosti.
Vymezení odstavce.Po jeho konci prohlížeč automaticky zalomí řádek a udělá vertikální mezeru. tučný text Text mezi těmito tagy bude tučný. kurzíva Kurzíva Tagy lze ale také kombinovat tučná kurzíva TEXT Pro efekt strojově psaného textu podtženo Pro podtržený text <strike>přeškrtnuto Pro přeškrtnutý text Možná kombinace tagů – např.: <STRIKE>
Přeškrtnutý nadpis 1
<span> nebo také (častěji) dvojice tagů vymezující nějak odlišný text, případně font, velikost písma apod.. <span style="color: red"> červená červená 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.
Zpracovala Mgr. Jana Chržová : [email protected] Strana 4 (celkem 30)
Pozn.: <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á v editoru OpenOffice.org bez použití kaskádových stylů, tag se automaticky převrátí na variantu červená
! 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
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é neexistuje!
DALŠÍ TAGY / KÓDY : STYLY NA STRÁNCE PÍSMA, TYPY FONTŮ A JEJICH VELIKOST
BARVY POZADÍ STRÁNKY, BARVA
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í): 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í: Nicméně, pokud to takto napíšeme, editor si barvy opět přepíše do HEX kódu.
Zpracovala Mgr. Jana Chržová : [email protected] 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: Typ fontu, velikost a barva ¨ Přičemž : označuje velikost písma uvedenou bud ve škále 1- 7, nebo v bodech „pt“ udává typ fondu (Times New Roman, Verdana apod.) 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.
- umístění na střed - umístění (objektu) vlevo - umístění (objektu) vpravo Pozn.: Pro formátování a popis druhu bloků textu je k dispozici obecná značka
...
. Obecně používanou (byť standardy nedoporučovanou) zkratkou pro
čili vystředění bloku textu je
. DIV je opět značka vážící se zejm. k tzv. kaskádovým stylům.
Zpracovala Mgr. Jana Chržová : [email protected] Strana 6 (celkem 30)
Umístění textu v odstavci .... : Na střed
Na střed
Vlevo
Vlevo
Vpravo
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.
Zpracovala Mgr. Jana Chržová : [email protected] 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:
Zpracovala Mgr. Jana Chržová : [email protected] Strana 8 (celkem 30)
TAGY TABULKY – (POKUS O) VYSVĚTLENÍ
- Základní uvození tabluky
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) (table head) ohraničuje řádky, které tvoří záhlaví tabulky. ohraničuje řádky, které tvoří vlastní "tělo" tabulky. V tabulce může být více bloků s různým formátováním. Pokud je přítomno a/nebo (zápatí), musí tabulka obsahovat alespoň jedno .
Párový tag, který začíná a končí řádek tabulky. (TR znamená table row, čili řádek).
Párový tag buňky tabulky (table data / data tabulky)
Párový tag pro hlavičku tabulky (table header) – má-li obsahovat nadpis sloupce / řádky (resp.
...
('table data', data tabulky) pokud obsahuje obyčejná data/text).
Zpracovala Mgr. Jana Chržová : [email protected] Strana 9 (celkem 30)
•
Jednoduchá tabulka:
Obsah buňky
Další buňka
levá spodní
pravá spodní
Kód:
Obsah buňky
Další buňka
levá spodní
pravá spodní
•
Tabulka s širším barevným / červeným rámečkem, umístěná uprostřed stránky (60% šíře stránky)
Zpracovala Mgr. Jana Chržová : [email protected] Strana 10 (celkem 30)
Zpracovala Mgr. Jana Chržová : [email protected] Strana 11 (celkem 30)
HYPERTEXTOVÉ ZNAČKY A ODKAZY Odkaz na jinou HTML stránku se vytvoří pomocí POPIS ('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: Stránky Českého helsinského výboru 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:[email protected]"). 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: [email protected] Kód ale vypadá takto: ¨ [email protected] Může také vypadat takto: Napište mi zprávu Napište mi zprávu Čá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.
Zpracovala Mgr. Jana Chržová : [email protected] 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 Jestliže je cílový soubor v jiném blízkém adresáři, stačí také napsat . Pro nadřazený adresář se používají konvenční dvě tečky. Např: Kréta 2005
BARVY Základní tabulka barev black maroon green olive navy purple teal gray silver red lime yellow blue fuchsia aqua white
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 Zpracovala Mgr. Jana Chržová : [email protected] 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.
Zpracovala Mgr. Jana Chržová : [email protected] 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.
Zpracovala Mgr. Jana Chržová : [email protected] 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.
Zpracovala Mgr. Jana Chržová : [email protected] 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.
Zpracovala Mgr. Jana Chržová : [email protected] Strana 17 (celkem 30)
•
Zadejte Zobrazit – Zdrojový kód. Spustí se textový editor (Poznámkový blok), zatím prázdný.
1)
Zpracovala Mgr. Jana Chržová : [email protected] Strana 18 (celkem 30)
2)
Zpracovala Mgr. Jana Chržová : [email protected] 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:
Zpracovala Mgr. Jana Chržová : [email protected] 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.
Zpracovala Mgr. Jana Chržová : [email protected] 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í: b. příklad správného pojmenování: 3. Tyto znaky:
moje stránky.html moje_stranky.html
. (tečka) , (čárka) ; : / ? ! < > [ ] ( ) § # % *
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
…atd. 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ů.
Zpracovala Mgr. Jana Chržová : [email protected] 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
Zpracovala Mgr. Jana Chržová : [email protected] 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:
Zpracovala Mgr. Jana Chržová : [email protected] 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:
Zpracovala Mgr. Jana Chržová : [email protected] 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.
Zpracovala Mgr. Jana Chržová : [email protected] 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.
Zpracovala Mgr. Jana Chržová : [email protected] 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.
Zpracovala Mgr. Jana Chržová : [email protected] Strana 28 (celkem 30)
PRAKTICKÉ UKÁZKY • Orientace v prostředí OpenOffice.org o Navigace o Možnosti
• Web servery / hosting zdarma o o o o
Orientace v administrátorském prostředí Vytváření adresářů Kontrola linků – provazby mezi stránkama 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 Typologie stránek – statické vs. aktiviní o S čím se na internetu setkáme
• • • •
web stránky internetové portály blogy diskusní fóra
o Jazyky na programování web aplikací ... HTML je jen začátek o Co nabízí český internet (web hosting, software zdarma) o 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
Zpracovala Mgr. Jana Chržová : [email protected] 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/
Zpracovala Mgr. Jana Chržová : [email protected] Strana 30 (celkem 30)
Jestliže je cílový soubor v jiném blízkém adresáři, stačí také napsat . Pro nadřazený adresář se používají konvenční dvě tečky. Např: Kréta 2005