načítání...
nákupní košík
Košík

je prázdný
a
b

Kniha: Adobe DreamWeaver CS6: Oficiální výukový kurz - Adobe Creative Team

Adobe DreamWeaver CS6: Oficiální výukový kurz
-15%
sleva

Kniha: Adobe DreamWeaver CS6: Oficiální výukový kurz
Autor:

Nejrychlejší, nejsnadnější a nejpraktičtější způsob, jak se naučit pracovat v Adobe Dreamweaveru CS6 Vyzkoušejte si, jak je snadné v nejnovější verzi Dreamweaveru vytvářet ... (celý popis)
Titul doručujeme za 4 pracovní dny
Vaše cena s DPH:  499 Kč 424
+
-
rozbalKdy zboží dostanu
14,1
bo za nákup
rozbalVýhodné poštovné: 39Kč
rozbalOsobní odběr zdarma

hodnoceni - 0%hodnoceni - 0%hodnoceni - 0%hodnoceni - 0%hodnoceni - 0%   celkové hodnocení
0 hodnocení + 0 recenzí

Specifikace
Nakladatelství: » Computer press
Médium / forma: Tištěná kniha
Rok vydání: 2013-03-27
Počet stran: 456
Rozměr: 167 x 226 mm
Úprava: 455 stran : ilustrace
Vydání: 1. vyd.
Název originálu: Adobe Dreamweaver CS6
Spolupracovali: překlad Ondřej Pár
Vazba: brožovaná lepená
ISBN: 9788025137352
EAN: 9788025137352
Ukázka: » zobrazit ukázku
Popis / resumé

Průvodce programem, který naučí vytvářet webové stránky pomocí HTML 5 a CSS 3. Software je vhodný pro operační systém Windows a Mac.

Popis nakladatele

Nejrychlejší, nejsnadnější a nejpraktičtější způsob, jak se naučit pracovat v Adobe Dreamweaveru CS6 Vyzkoušejte si, jak je snadné v nejnovější verzi Dreamweaveru vytvářet kompletní webová řešení. Kniha obsahuje 14 výukových lekcí, v nichž se sami krok za krokem naučíte vše od práce s texty, obrázky a odkazy až po tvorbu layoutu, navigace a dynamického interaktivního obsahu. Na pracovních souborech si vyzkoušíte praktické využití nových funkcí programu i vlastností HTML5 a CSS3.Výukový kurz poskytuje také množství tipů a technik, díky nimž budete ve své práci s Dreamweaverem produktivnější. Autoři se v knize mimo jiné věnují těmto tématům: - Tvorba kostry stránky v HTML a její stylování v CSS - Jak na layout stránky a triky pro jeho stylování - Jak vytvořit a využít předlohy webu či položky knihovny - Formátování textů, tvorba nadpisů, seznamů a tabulek - Vkládání obrázků a inteligentních objektů Photoshopu - Tvorba všech typů odkazů a navigačních nabídek - Přidání interaktivních prvků a Flashe do stránky - Interaktivní formuláře reagující na vstup uživatele - Nastavení testovacího serveru a tvorba dynamických stránek - Ladění kódu a publikování hotových stránek na Internetu Oficiální výukové kurzy z dílny Adobe Systems jsou světově nejprodávanějšími učebnicemi pro výuku softwaru společnosti Adobe. Pomohou vám poznat prostředí programů a ovládnout je bez zbytečného tápání. Své dovednosti s nimi zdokonalíte krok po kroku v praktických cvičeních. Na stránkách knihy naleznete profesionálně zpracované materiály, na kterých budete trénovat nově nabyté dovednosti. Naučte se tvořit statické a dynamické webové stránky, vkládat do nich grafiku, text, animace a video. Vyvíjejte interaktivní aplikace, experimentujte s novými možnostmi HTML5 a CSS3, nahrávejte a spravujte kompletní weby a mnohem více. Jednotlivé lekce vás seznámí se základními i pokročilými nástroji a na připravených pracovních souborech si rovnou vyzkoušíte jejich praktické využití. (oficiální výukový kurz)

Předmětná hesla
Kniha je zařazena v kategoriích
Adobe Creative Team - další tituly autora:
Recenze a komentáře k titulu
Zatím žádné recenze.


Ukázka / obsah
Přepis ukázky

38

ZÁKLADY

JAZYKA HTML V této lekci V této lekci se seznámíte s HTML a naučíte se, jak:  Ručně napsat kód jazyka HTML  Chápat syntaxi jazyka HTML  Vkládat elementy kódu  Formátovat text  Vkládat kostru HTML  V Dreamweaveru vytvářet HTML Dokončení této lekce vám zabere okolo 45 minut. K  této lekci nejsou dostupné žádné zdrojové soubory.

2


39

HTML je páteří Webu, kostrou vašich webových stránek.

Je základem a podstatou Internetu, ačkoliv jej obvykle

nevidí nikdo jiný než webový designér. Bez HTML by Web

neexistoval. Dreamweaver obsahuje řadu funkcí, které vám

pomohou rychle a efektivně vytvářet a upravovat kód jazyka

HTML.


40 LEKCE 2 Základy jazyka HTML

Co je HTML?

„Jaké jiné programy umí otevřít soubor Dreamweaveru?“

Tuto otázku mi nedávno položil jeden z mých studentů; ačkoliv něco takového může být zřejmé

zkušenému vývojáři, dokládá to problémy při výuce a  učení se webovému designu. Většina lidí

si program plete s  technologií. Předpokládají, že přípona .htm nebo .html patří Dreamweaveru

nebo Adobe. Například grafičtí návrháři jsou zvyklí pracovat se soubory s  příponou .ai, .psd,

schopnosti a omezení. Cílem je ve většině případů vytvořit finální tiskové dílo. Program, v němž

byl soubor vytvořen, poskytuje schopnosti interpretovat kód, jež produkuje tištěná stránka.

Grafičtí návrháři se za celou tu dobu naučili, že otevření těchto formátů souborů v různýchpro

gramech může vést k neočekávaným výsledkům nebo dokonce nevratnému poškození souboru.

Na  druhou stranu cílem webového návrháře je vytvořit webovou stránku, jež se má zobrazit

v prohlížeči. Možnosti a funkcionalita původního programu má málo co dělat s výslednýmzob

razením stránky v prohlížeči, neboť zobrazení závisí na kódu HTML a na tom, jak jej prohlížeč

vyhodnocuje. Ačkoliv program může napsat dobrý nebo špatný kód, všechnu těžkou práci zde

odvádí právě prohlížeč.

Web je založen na hypertextovém značkovacím jazyku (HTML). Jazyk a formát souborů nepatří

žádnému konkrétnímu programu nebo společnosti. Vlastně jde o  neproprietární, čistě texto

vý jazyk, který je možné upravovat v  jakémkoli textovém editoru, operačním systému nebo

na  jakémkoli počítači. Dreamweaver je ve  svém základu editor HTML, ačkoliv jeho hranice

výrazně překračuje. Ale abyste mohli využít plný potenciál Dreamweaveru, musíte nejprverozu

mět tomu, co je HTML a co dokáže a co nikoliv. Záměrem této kapitoly je stručně vás seznámit

s  HTML a  jeho možnostmi a  naučit všem základům, které budete pro práci s  Dreamweaverem

potřebovat.

Kde se jazyk HTML vzal?

Jazyk HTML a první prohlížeč vynalezl na začátku 90. let 20. století TimBarnes-Lee, vědecpracu

jící v CERNu (Evropská společnost pro atomový výzkum), v laboratoři částicové fyziky v Ženevě

ve  Švýcarsku. Vymyslel technologii určenou ke  sdílení technických informací a  referátů přes

Internet, který tehdy existoval velmi krátce. Své vynálezy, HTML a prohlížeč poskytnul veřejnosti

jako pokus, co nejvíce jej rozšířit mezi vědeckou společnost a  dále, aby jej tak snadněji přijali

a aby povzbudil ostatní k jejich vlastnímu vývoji. Skutečnost, že na své dílo nevztáhnul autorská

práva nebo se jej nepokusil prodat, započala trend otevřeností a kamarádství, které na Internetu

působí dodnes.

Jazyk, jenž Tim Berners-Lee vytvořil před 20 lety, byl mnohem jednodušší než jeho nynějšípodo

ba, ale i tak je HTML překvapivě snadné se naučit a ovládnout. V době vzniku této knihy existuje

HTML ve verzi 4.01, která byla oficiálně přijata v roce 1999. V základu se HTML skládá ze zhruba


41ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ

90 značek, jako jsou html, head, body, h1, p a tak dále. Značky se píší do lomených závorek, jako

například <p>, <h1> a <table>. Tyto značky se používají k  uzavření, nebo také označení textu

a grafiky, aby umožnily prohlížeči jejich zobrazení určitým způsobem. Kód HTML je považován

za vyvážený, obsahuje-li jak otevírací (<...>), tak uzavírací () značku. Otevírací a uzavírací

značka se společně nazývají element.

Některé elementy se používají k vytvoření kostry stránky, jiné k formátování textu, a jiné nesou

interaktivitu a programovatelnost. I když Dreamweaver snižuje nutnost psát většinu kódu ručně,

schopnost číst a  vyhodnocovat kód jazyka HTML je stále nutnou výbavou každého webového

designéra. Navíc napsat kód ručně je někdy jediný způsob, jak najít chybu ve vaší webové stránce.

Zde vidíte základní strukturu webové stránky:

Správně strukturovaný, nebo vyvážený, zdrojový kód HTML se skládá z  otevírací a  uzavírací

značky. Značky jsou uzavřené mezi lomené závorky. Uzavírací značku vytvoříte zopakováním

značky otevírací a  za  první lomenou závorku zapíšete lomítko (/). Prázdné značky, například

vodorovná čára, je možné psát zkráceným zápisem, jak ukazuje obrázek.

Možná vás překvapí zjištění, že jediný text, který se v prohlížeči zobrazí po spuštění tohoto kódu,

je „Vítejte na mé první webové stránce“. Zbytek kódu vytváří strukturu webové stránky a zajišťuje

formátování textu. Stejně jako u  ledovce, většina skutečného obsahu webové stránky se skrývá

pod hladinou.

Jak psát svůj vlastní kód HTML

Psaní kódu nejspíš zní poněkud složitě, nebo přinejmenším pracně, ale tvorba webových stránek

je mnohem jednodušší, než byste si mohli myslet. V několika následujících cvičeních se dozvíte,

<html>

<head>

<title>Základy HTML pro zábavu i užitek

</head>

<body>

<h1>Vítejte na mé první webové stránce

<hr />

</body>

</html>

Kořen

Otevírací značka Uzavírací značka

Vodorovná čára (prázdná značka)

Hlavička

Tělo

Základní kostra HTML


42 LEKCE 2 Základy jazyka HTML

jak HTML funguje vytvořením základní webové stránky a přidáním a naformátováním nějakého

jednoduchého textového obsahu:

1 Spusťte Notepad (Windows) nebo TextEdit (Mac).

2 Do prázdného dokumentu napište následující kód:

<html>

<body>

Vítejte na mé první webové stránce

</body>

</html> 3 Soubor uložte na plochu s názvem mojeprvnistranka.html. 4 Spusťte Chrome, Firefox, Internet Explorer, Safari nebo jakýkoli jiný nainstalovaný prohlížeč. 5 Zvolte Soubor (File)  Otevřít (Open). Na  ploše vyberte soubor mojeprvnistranka.html

a stiskněte tlačítko OK či Open.

Gratulujeme, právě jste vytvořili vaši první webovou stránku. Jak sami vidíte, není potřeba tolik

kódu, abyste vytvořili funkční webovou stránku.

 Poznámka: Pro tato cvičení můžete používat libovolný textový editor, ale vždy se ujistěte, že

ukládáte vytvořené soubory jako prostý (plain) text.

Tip: Ve vašem textovém editoru zvolte Formát (Format)  Uložit (Save) jako prostý text předtím, než

uložíte soubor ve formátu .html

 Poznámka: Některé textové editory mohou změnit příponu .html nebo vás vyzvou k potvrzení této

volby.

Textový editor Prohlížeč


43ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ

Porozumění syntaxi jazyka HTML

Jako další krok přidáte obsah do  vaší nové webové stránky a  naučíte se některým důležitým

aspektům syntaxe kódu jazyka HTML:

1 Přepněte se do textového editoru, aniž byste zavírali okno prohlížeče.

2 Kurzor vložte za text „Vítejte na mé první webové stránce“ a stiskněte klávesu Enter/Return,

čímž zalomíte odstavec. 3 Napište Tvořit webové stránky je zábavné a  stiskněte pětkrát mezerník, čímž vložíte pět

prázdných mezer. A text dokončete napsáním a jednoduché! na stejném řádku. 4 Soubor uložte. 5 Přepněte se do prohlížeče a stránku nechte znovu načíst (například stisknutím klávesy F5). Jak můžete vidět, prohlížeč zobrazil nový text, ale zcela ignoruje zalomení řádků na dva odstavce, stejně jako další prázdné mezery. Ve skutečnosti byste totiž mohli odstavec zalomit třeba stokrát a nebyl by v tom žádný rozdíl. To protože prohlížeč je programovaný tak, aby mezery ignoroval a vyhodnocoval pouze elementy kódu jazyka HTML. Vložením značek můžete jednoduše docílit požadovaného zobrazení textu. Vkládání kódu jazyka HTML V tomto cvičení vložíte do kódu značky jazyka HTML, čímž zajistíte správné zobrazení textu: 1 Přepněte se zpět do textového editoru. 2 K textu přidejte následující značky:

<p>Tvořit webové stránky je zábavné a jednoduché!</p>

Pokud budete chtít vložit mezeru nebo jiný speciální znak do  řádku textu, HTML k  tomu

poskytuje elementy kódu nazvané entity. Entity se vkládají do  kódu jinak než značky.

Například, pokud chcete vložit nedělitelnou mezeru o  velikosti jednoho znaku, jednoduše

zapíšete tuto entitu: &nbsp;.


44 LEKCE 2 Základy jazyka HTML

3 Nahraďte tedy pět mezer v  textu těmito nedělitelnými mezerami, takže kód bude vypadat

následovně:

<p>Tvořit webové stránky je zábavné&nbsp;      

&nbsp;ajednoduché!</p> 4 Soubor uložte. Přepněte se do prohlížeče a nechejte stránku znovu načíst. Prohlížeč nyní zobrazuje text zalomený do odstavců a s požadovanými mezerami.  Poznámka: Zlaté pravidlo použití entit říká, že pokud se pokusíte napsat znak s použitím standardní 101-klávesové klávesnice a tento znak se neobjeví, je na místě použít entitu. Pokud jsou značky a entity správně použity, prohlížeč zobrazí stránku v požadované struktuře. Formátování textu pomocí jazyka HTML Značky obvykle slouží více účelům. Mimo to, že vytvoří odstavcovou strukturu a mezery, jak jsme si ukázali před chvílí, mohou mít také vliv na  základní formátování textu, a  stejně tak mohou identifikovat relativní důležitost obsahu stránky. HTML například poskytuje šest značek pro nadpisy (od <h1> po <h6>), které můžete použít pro oddělení odstavců nadpisy. Značky neslouží pouze k  formátování textu, ale nesou i  další význam. Nadpisy jsou automaticky formátovány tučně a  často ve  větší velikosti písma než běžný text. Číslo u  značek pro nadpisy má taky svůj význam: Značka <h1> označuje nadpis nejvyšší důležitosti, s  největší velikostí písma. V  tomto cvičení změníte text odstavce na prvním řádku na nadpis první úrovně: 1 Přepněte se zpět do textového editoru. 2 Do kódu přidejte následující značky:

<h1>Vítejte na mé první webové stránce 3 Soubor uložte. Přepněte se do prohlížeče a nechejte stránku znovu načíst. Všimněte si změny textu. Nyní je větší a formátovaný tučně.


45ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ

Weboví designéři používají značky nadpisů k označení důležitosti určitého obsahu, aby vylepšili pozici svých

stránek ve vyhledávačích, jako je Google, Seznam a dalších.

Použití formátování na úrovni řádku

Všechny značky, které jste zatím použili, fungují jako odstavce, nebo jako značky prázdné. Těmto

prvkům se říká blokové elementy. Jazyk HTML však také poskytuje schopnost formátovata strukturovat takový obsah, jenž je obsažen uvnitř jednotlivých značek, neboli na  řádku. Typickým

použitím řádkového kódu je přidělení kurzívy nebo tučnosti slovu nebo části textu odstavce.

V tomto cvičení použijete řádkové formátování:

1 Přepněte se zpět do textového editoru.

2 Do kódu přidejte následující značky:

<p>Tvořit webové stránky je zábavné&nbsp;      

&nbsp;<strong>a jednoduché!

3 Soubor uložte. Přepněte se do prohlížeče a nechejte stránku znovu načíst. Většinu formátování, jak řádkového nebo jiného, je ale správnější udělat pomocí kaskádových stylů (CSS). Značky <strong> a <em> patří mezi těch pár, jež je stále ještě možné pro řádkové formátování pomocí elementů jazyka HTML použít. Tyto elementy jsou ve  skutečnosti určeny více k přidání sémantického významu do textového obsahu, ale výsledek je stejný: Text se zobrazí tučně nebo kurzívou.  Poznámka: Věnujte zvláštní pozornost vnoření elementů a  ujistěte se, že jsou správně uzavřeny. Všimněte si, že nejprve je uzavřen element <m>, a až poté element <strong>. Obecně se dnes přijímá myšlenka, že by se měl oddělovat obsah od jeho prezentace neboliformátování. Plné vysvětlení použití a  strategií tohoto modelu založeného na  standardech jazyka CSS najdete v lekci 3.


46 LEKCE 2 Základy jazyka HTML

Značky <strong> a <em> se používají místo značek <b> (tučně) a <i> (kurzíva), protože poskytují

sémantický význam pro návštěvníky stránek se zrakovou vadou, ale výsledek jejich použití pro běžného

uživatele je stejný.

Přidání kostry dokumentu

Většina webových stránek se skládá z alespoň tří základních elementů: kořene (obvykle <html>),

hlavičky (<head>) a  těla (<body>). Tyto elementy vytvářejí základní kostru webové stránky.

Kořenový element obsahuje veškerý kód a obsah a slouží k tomu, aby prohlížeči či jakékoli jiné

aplikaci deklaroval, jaký typ kódu má v dokumentu očekávat. Element <body> obsahuje veškerý

viditelný obsah, jako je text, tabulky, obrázky, videa a  tak dále. Element <head> obsahuje kód,

jenž se postará o vykonání základních úkolů na pozadí, jako je stylování, odkazování a poskytuje

další informace.

Jednoduchá stránka, jíž jste vytvořili, neobsahuje element head. Webová stránka může fungovat

i bez této části, ale jakmile byste stránce přidali další obsah a funkce, už byste se bez ní neobešli.

V tomto cvičení přidáte na stránku elementy <head> a <title>:

1 Přepněte se zpět do textového editoru.

2 Na začátek dokumentu vložte následující značky a jejich obsah:

<html>

<head>

<title>Základy HTML pro zábavu i užitek

</head>

<body> 3 Soubor uložte. Přepněte se do prohlížeče a nechejte stránku znovu načíst. Všimli jste si, co se změnilo? Možná to na  první pohled nebude patrné. Podívejte se proto do titulkové lišty okna prohlížeče. Text „Základy HTML pro zábavu i užitek“ se nyní zobrazuje nad celou webovou stránkou. To jste provedli právě přidáním elementu <title>. Ale nejde jen o skvělý trik; je to dobré také pro byznys. Google, Seznam a další prohlížeče obsah elementu <title> zaznamenávají a používají jej mimo jiných kritérií k  ohodnocení významnosti stránky. Obsah titulku je jednou z  položek, jež se


47ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ

zobrazuje ve  výsledku vyhledávání. Dobře otitulkovaná stránka může být hodnocena lépe než

stránka se špatným titulkem nebo než stránka s žádným titulkem. Dávejte svým stránkám krátké

a  smysluplné názvy. Například titulek „ABC domovská stránka“ ve  skutečnosti nenese žádnou

smysluplnou informaci. Lepší by bylo například „Vítejte na domovské stránce společnosti ABC“.

Podívejte se na ostatní webové stránky, zejména podobně zaměřené jako je ta vaše, nebo stránky

vaší konkurence, jaké titulky používají.

Obsah elementu <title> se objeví v titulkové liště prohlížeče, když se načte stránka.

Jak psát kód jazyka HTML v Dreamweaveru

Takže samozřejmou otázkou nyní je: „Když můžu kód jazyka HTML psát v jakémkoli textovém

editoru, k  čemu potřebuji Dreamweaver?“ Ačkoliv na  vás kompletní odpověď čeká v následujících 13 lekcích, otázka vyžaduje rychlou ukázku. V tomto cvičení vytvoříte znovu stejnoustránku, ale tentokrát pomocí Dreamweaveru:

1 Spusťte Dreamweaver CS6.

2 Zvolte Soubor (File)  Nový (New).

3 V okně Nový dokument (New Document) zvolte v prvním sloupci položku Prázdná stránka

(Blank Page). 4 Ve  sloupci Typ stránky (Page Type) vyberte HTML a  ve  sloupci Rozvržení zvolte

<žádné>(). Pak stiskněte tlačítko Vytvořit (Create).

V  Dreamweaveru se otevře okno s  novým dokumentem. Okno se zobrazí v  jednom ze tří

zobrazení: Kód (Code), Kód a návrh (Split) nebo Návrh (Design). 5 Pokud už není aktivní zobrazení Kód, stiskněte tlačítko Kód (Code) v  levém horním rohu

okna dokumentu.

První věcí, které si můžete všimnout v zobrazení Kód je to, že Dreamweaver oproti textovému

editoru poskytuje obsáhlou hlavičku dokumentu. Základní kostra stránky je již vytvořená,

včetně kořenového elementu, hlavičky a těla, a také včetně titulku a dalšího kódu. Jediné, co

za vás Dreamweaver neudělá, je vložení vašeho vlastního obsahu.


48 LEKCE 2 Základy jazyka HTML

1 Kurzor vložte za otevírací značku <body>a napište text Vítejte na mé druhé stránce.

Dreamweaver ulehčuje také formátování prvního řádku textu jako nadpis první úrovně.

2 Kurzor umístěte na začátek textu „Vítejte na mé druhé stránce“. Napište < jako začátekele

mentu <h1>.

Všimněte si, že Dreamweaver automaticky otevře rozevírací seznam možných elementů kódu.

Jde o  pomocníka při psaní kódu. Jakmile se aktivuje, poskytuje vždy seznam dostupných

prvků jazyků HTML, CSS a JavaScript a dalších podporovaných elementů.

3 Napište h a podívejte se do okna nápovědy.

Zobrazení Kód

Zobrazení Kód a návrh

Zobrazení Návrh


49ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ

Výhody použití Dreamweaveru k vytváření HTML kódu jsou zřejmé od samého začátku: Velká část struktury

stránky je již vytvořena.

Dreamweaver v okně nápovědy nyní nabízí pouze elementy začínající písmenem h. 4 Ze seznamu nabízených elementů vyberte h1 a  dvojklikem jej vložte do  kódu. Napište >,

abyste uzavřeli element. 5 Přesuňte kurzor na konec textu. Napište </ na konec věty.

Všimněte si, že Dreamweaver značku <h1> automaticky uzavřel. Ale většina kodérů přidává

značky v průběhu psaní, a to následujícím způsobem: 6 Stiskněte Enter/Return k zalomení řádku. Napište <. 7 Napište p a stiskněte Enter/Return, čímž se vloží element. Zapište >, čímž značku uzavřete. 8 Nyní napište text Tvořit webové stránky v Dreamweaver je ještě zábavnější! A poté napište

</, čímž vložíte uzavírací značku </p>.

Už jste se psaním kódu unavili? Dreamweaver nabízí řadu různých způsobů formátování

vašeho obsahu. 9 Vyberte slovo „ještě“ a  v  inspektoru Vlastnosti (Properties) klepněte na  ikonu B a  poté

na ikonu I. Tím se na slovo použijí značky <strong> a <em>.

Tyto značky způsobí, že se text do nich uzavřený naformátuje tučně a kurzívou.


50 LEKCE 2 Základy jazyka HTML

Nepostrádáte něco?

Když jste dorazili v kroku 14 ke klepnutí na ikony B a I, zjistili jste, že vám chybí? Když provádíte

změny v zobrazení Kód, inspektor Vlastnosti je třeba občas aktualizovat, aby zpřístupnil příkazy

pro formátování. Jednoduše proto klepněte na  tlačítko Aktualizovat (Refresh) a  formátovací

příkazy se zase objeví.

K dokončení webové stránky zbývají poslední dva úkoly. Všimněte si, že Dreamweaver vytvořil

element <title> a mezi jeho značky vložil text „Dokument bez názvu“ („UntitledDocument“).

Můžete text označit a  napsat vlastní název, nebo můžete pro přejmenování využít speciální

funkci. 10 Najděte pole Titul (Title) v panelu nástrojů nad oknem dokumentu a vyberte text „Dokument

bez názvu“ („UntitledDocument“). 11 Do pole napište text Základy jazyka HTML, stránka 2. 12 Stiskněte Enter/Return, čímž tvorbu titulku dokončíte.

Všimněte si, že se nový titulek zároveň změnil také v  kódu. Nyní nastal čas soubor uložit

a prohlédnout si jej v prohlížeči. 13 Zvolte Soubor (File)  Uložit (Save). Soubor nechte uložit na  plochu a  pojmenujte jej

druhastranka. Pak stiskněte tlačítko Uložit (Save).

Dreamweaver souboru automaticky přidá správnou příponu (.html). 14 Zvolte Soubor (File)  Náhled v prohlížeči (Preview in Browser).

Hotová stránka se zobrazí v prohlížeči.


51ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ

Právě jste vytvořili dvě webové stránky – jednu jste vytvořili ručně a další s pomocí Dreamweaveru.

V obou případech můžete vidět, že hlavní úlohu hrál jazyk HTML. Abyste se tento jazyk naučili,

podívejte se na www.w3schools.com nebo si přečtěte některou z doporučených knih.

Doporučené knihy

HTML5 a CSS3

Elizabeth Castro, Bruce Hyslop, ComputerPress, 2012

HTML5 – Programujeme moderní webové aplikace

Peter Lubbers, Brian Albers, Frank Salim, Computer Press, 2011

HTML5 a CSS3 – Výukový kurz webového vývojáře

Brian P. Hogan, Computer Press, 2011

Často používaný kód jazyka HTML 4

Elementy kódu jazyka HTML slouží určitému účelu. Značky dokážou vytvořit strukturu, použít

formátování, logicky označit obsah nebo generovat interaktivitu. Značky vytvářející samostatné

struktury se nazývají blokové elementy; a  ty, které působí uvnitř jiného elementu, se nazývají

elementy řádkovými.

Značky jazyka HTML

Následující tabulka uvádí některé nejpoužívanější značky jazyka HTML. Pomohou vám pochopit

povahu těchto elementů a jak je použít, takže z Dreamweaveru a tvorby vašich stránek vyždímáte

víc. Pamatujte si, že některé značky mohou sloužit více účelům.

Tabulka 2.1 Často používané značky jazyka HTML

Značka Popis Strukturální Blokový Řádkový

<!-- --> HTML komentář. Umožňuje vkládání

poznámek do kódu tak, že nejsouzobra

zeny prohlížečem.



<a> Vytváří hypertextový odkaz. 

<blockquote> Bloková citace. Vytvoří samostatnýodsta

vec s citací.



<body> Označuje tělo dokumentu. Obsahujeveš

kerý viditelný obsah webové stránky.



<br /> Vkládá zalomení řádku bez vytvoření

nového odstavce.



<div> Rozdělení stránky do částí. Vytváří bloky

uzavírající obsah stránky a používá se

hojně k simulování sloupcového layoutu.



<em> Zdůraznění. Přidává sémantickézdůraz

nění. Ve výchozím stavu zobrazí obsah

kurzívou.



<form> Označuje formulář HTML. 


52 LEKCE 2 Základy jazyka HTML

Značka Popis Strukturální Blokový Řádkový

<h1> až

Nadpisy. Vytváří tučné nadpisy. Přidává

hierarchickou sémantickou hodnotu.



<head> Označuje hlavičku dokumentu. Obsahuje

kód vykonávající funkce na pozadí, jako

jsou meta značky, skripty, stylování,odkazování a další informace, které senezobrazují na stránce.



<hr /> Vodorovná linka. Prázdný elementvytvářející vodorovnou linku.



<html> Kořenový element většiny webovýchstránek. Obsahuje celou webovou stránku

mimo případů, kdy je třeba kód na straně

serveru nahrát před načtením obsahu

jazyka HTML.



<iframe> Řádkový rámec. Strukturální element

obsahující jiné dokumenty.



<img /> Obrázek. 

<input /> Vstupní element pro formulář, například

textové pole.



<li> Položka seznamu. 

<link /> Označuje vztah mezi dokumentem

a externím zdrojem.



<meta /> Metadata. 

<ol> Uspořádaný seznam. Definuje číslované

seznamy.



<p> Odstavec. Vytváří samostatný odstavec. 

<script> Skript. Obsahuje kód skriptu nebo odkaz

na externí skript.



<span> Označuje část elementu. Slouží k použití

formátování nebo zvýraznění na části

elementu.



<strong> Přidává sémantické zdůraznění. Obsah se

zobrazí tučně.



<style> Volá pravidla stylů CSS. 

<table> Označuje tabulku v HTML. 

<td> Označuje buňku tabulky. 

<textarea> Víceřádkové vstupní pole formuláře. 

<th> Záhlaví tabulky. 

<title> Titulek stránky. 

<tr> Řádek tabulky. 

<ul> Neuspořádaný seznam. Definujeodrážkový seznam.




53ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ

Znakové entity jazyka HTML

Entity existují pro každé písmeno a  znak. Pokud není možné symbol přímo vložit pomocí klávesnice, je možné jej vložit zapsáním jeho názvu nebo číselné hodnoty – obě varianty uvádí

následující tabulka.

Tabulka 2.2 Zápis entit jazyka HTML***

Znak Popis Název Číslo

© Autorská práva &copy; ©

® Registrovaná obchodní značka &reg; ®

™ Obchodní značka &#153;

• Tečka &#149;

– Spojovník &#150;

— Pomlčka &#151;

Nedělitelná mezera &nbsp;  

Úvod do HTML 5

Aktuální platná verze jazyka HTML je tady již více než 10 let a  již nedrží tempo s  překotným

rozvojem technologií, jako jsou mobilní telefony a  další mobilní zařízení. World Wide Web

Consortium (W3C), organizace odpovědná za udržování a aktualizaci standardů jazyka HTML

a  jiných webových standardů, intenzivně pracovala na  aktualizaci jazyka a  vydání pracovního

návrhu HTML 5 v lednu 2008. Poslední verze byla publikována v květnu 2012, nicméně na finální

verzi si počkáme možná ještě několik let. Co to ale znamená pro současného webového návrháře?

Zatím celkem nic.

Weby a jejich vývojáři se rychle mění a přizpůsobují v závislosti na aktuální technologii a stavu

trhu, ale vývoj podstatných technologií se děje pomaleji. Výrobci prohlížečů již nyní podporují

řadu funkcí HTML 5. Ti, kteří je budou přijímat dříve, jistě nadchnou vývojáře a uživatele, jež se

zajímají o poslední novinky, což znamená, že prohlížeče nepodporující HTML 5 upadnouv zapomnění, protože budou nekompatibilní s  většinou populárních webových stránek. Někteří lidé

říkají, že plný přechod nastane někdy kolem roku 2020 nebo později; jiní si myslí, že k tomu dojde

mnohem dříve. V každém případě zpětná kompatibilita k HTML 4.01 bude jistá i v budoucnu,

takže staré webové stránky a weby zcela jistě najednou nevybuchnou nebo nezmizí.

Co je nového v HTML 5

Každá nová verze HTML přinesla nové elementy a  zároveň změnila význam dříve zavedených

elementů. HTML veze 4.01 obsahuje přibližně 90 elementů. Některé z  nich byly označeny

za zastaralé nebo rovnou zrušeny; zároveň byly přijaty či navrženy elementy nové.

Řada novinek souvisí s  podporou nových technologií a  nových typů obsahu. V  některých příadech byly změny přijaty v reakci na zvyklosti a techniky, které si vývojáři oblíbili po zavedení

předchozí verze HTML. Další změny zjednodušují psaní kódu a zrychlují jeho vytváření a úpravy.


54 LEKCE 2 Základy jazyka HTML

Elementy HTML 5

Následující tabulka uvádí některé nové elementy HTML5. Jazyk jich nyní obsahuje přes 100,při

čemž téměř 30 původních elementů bylo označeno za zastaralé – ve výsledku tedy HTML5při

náší téměř 50 nových značek. Příklady v této knize řadu těchto nových elementů obsahují a uvádí

jejich správné užití. Na  příkladech tedy uvidíme zamýšlenou funkci nových vlastností jazyka –

seznamte se teď v krátkosti s přehledem a základním popisem nově zaváděných elementů.

Tabulka 2.3 Důležité nové značky jazyka HTML 5

Značka Popis Strukturální Blokový Řádkový

<article> Označuje nezávislý, samostatný obsah, který

může být šířen nezávisle na zbytku stránky.



<aside> Označuje obsah postranního pruhusouvise

jící s okolním obsahem.



<audio> Označuje multimediální obsah, zvuky,

hudbu nebo jiné audio.



<canvas> Označuje grafický obsah vytvořenýza pou

žití skriptu.



<figure> Označuje oblast samostatně stojícíhoobsa

hu zahrnujícího obrázek nebo video.



<figcapti-

on>

Označuje titulek elementu <figure>.



<footer> Označuje zápatí dokumentu nebo sekce. 

<header> Označuje úvod dokumentu nebo sekce. 

<hgroup> Označuje sadu elementů <h1> až

v případě, že má hlavička více úrovní.



<nav> Označuje sekci navigace. 

<section> Označuje oblast dokumentu, jako například

kapitolu, záhlaví, zápatí, nebo jakoukoli

jinou oblast.



<source> Označuje zdroj pro mediální elementy.

Potomek elementů <video> a 

V prohlížeči, který nepodporuje defaultní

zdroj, může být takto definováno několik

jiných zdrojů



<track> Označuje název stopy používanýv přehrá

vačích médií.



<video> Označuje video, jako jsou filmy nebo klipy. 

Sémantický web

Mnoho změn v  HTML vzniklo na  podporu konceptu sémantického webu. Jedná se o  webové

stránky vytvořené za použití elementů a struktur, které nesou nějaký vnitřní význam. Například

to vedlo ke  vzniku řady nových elementů, jako jsou <article>, <section>, <header> či <foo-

ter>. Tento posun má zásadní význam pro budoucnost a použitelnost HTML a pro vzájemnou

spolupráci webových stránek v rámci sítě Internet. V tuto chvíli funguje každá stránka na webu

samostatně. Obsah stránky může odkazovat na jiné stránky, nicméně neexistuje žádný způsob,

jak souvisle kombinovat či sbírat informace dostupné na různých stránkách. Vyhledávače dělají,


55ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ

co mohou, aby zobrazily obsah všech stránek, ale mnoho informací je zkrátka ztraceno díkypřirozené povaze a struktuře kódu starého HTML.

Jazyk HTML byl původně navržen jako nástroj pro prezentaci. Jinými slovy byl určen k zobrazení

technických dokumentů v prohlížeči  čitelným způsobem. Pokud se pozorně podívátena původní specifikaci jazyka HTML, vypadá jako seznam položek, které by se měly objevit ve  vědecké

publikaci: hlavičky, odstavce, citované zdroje, tabulky, číslované a  odrážkované seznamy a  tak

dále.

Internet v době před HTML vypadal spíš jako MS DOS nebo terminálové aplikace OS X. Nebylo

zde žádné formátování, grafika ani barvy. Elementy zavedené v  první verzi HTML jednoduše

popisovaly, jak bude obsah zobrazen. Značky v  sobě nenesly žádný vnitřní význam. Například

značka pro nadpis znamenala, že se označený řádek textu zobrazí tučně, ale neříkala nic o tom,

jaký má nadpis vztah k  následujícímu textu. Jedná se o  název celého textu, nebo o  pouhý podnadpis?

HTML 5 přináší významný počet nových značek, aby nám pomohlo přidat význam do  našeho

kódu. Značky jako <header>, <footer>, <article> či <section> poprvé umožňují označitspecifický obsah bez nutnosti použití dalších atributů, jako je <div class=“header“>... </div>.

Výsledkem je jednodušší a méně obsáhlý kód. Ale nejlepší na tom všem je, že přidánísémantického významu do vašeho kódu vám a dalším vývojářům umožní propojit obsah jedné stránkys dalšími stránkami, a to novými a vzrušujícími způsoby – z nichž mnoho ještě ani nebylo vynalezeno.

Nové techniky a technologie

HTML 5 také pozměnilo přirozenou povahu tohoto jazyka tím, že převzalo některé funkce, které

byly v průběhu let v rostoucí míře zajišťovány doplňky třetích stran a externím programováním.

Pokud jste nováčky v  oblasti návrhu webů, tento přechod pro vás bude bezbolestný, protože se

nemáte co přeučovat a nemáte žádné špatné návyky, kterých byste se potřebovali zbavit. Pokud

již máte zkušenosti s vytvářením webových stránek, tato kniha vás bezpečně provede přes některá

úskalí a  představí vám nové postupy a  technologie logickým a  srozumitelným způsobem. Ale

nejlepší na  tom všem je, že sémantický návrh webu neznamená, že musíte zahodit své stránky

a udělat všechno znova. Validní kód v HTML 4 zůstane v dohledné budoucnosti validní. Účelem

HTML 5 je usnadnit vám vaše úkoly a dokázat více, s menším úsilím. Tak pojďme do toho!

Referenční příručky HTML 5

Více informací o HTML 5 najdete na stránkách www.w3.org/TR/2011/WD-html5-20110525/

Kompletní seznam elementů v  HTML 5 naleznete zde: www.w3schools.com/html5/html5_

reference.asp.

Více informací o W3C najdete na stránkách www.w3.org.


56 LEKCE 2 Základy jazyka HTML

Opakování

Otázky

1 Které programy dokážou otevřít soubory HTML?

2 Co dělá značkovací jazyk?

3 Ano nebo ne? HTML 5 se příliš neliší od HTML 4.

4 Jaké jsou tři hlavní části většiny webových stránek?

5 Jaký je rozdíl mezi blokovými a řádkovými elementy?

Odpovědi

1 HTML je čistě textový jazyk, jehož soubory je možné otevírat a upravovat v jakémkoli

textovém editoru a prohlížet v jakémkoli prohlížeči. 2 Značkovací jazyk umísťuje značky skládající se z lomených závorek <> a textovéinformace, čímž předávají informaci o struktuře a formátování zobrazovací aplikaci. 3 Ne. Více než 30 nových značek z HTML 4 zmizelo a téměř 50 nových přibylo v HTML

5. To znamená, že se změnila téměř polovina jazyka od jeho představení v roce 1998. 4 Většina webových stránek se skládá ze tří částí: kořene, hlavičky a těla. 5 Blokové elementy vytvářející samostatné elementy. Řádkové elementy mohouexistovat uvnitř jiných elementů.




       
Knihkupectví Knihy.ABZ.cz - online prodej | ABZ Knihy, a.s.
ABZ knihy, a.s.
 
 
 

Knihy.ABZ.cz - knihkupectví online -  © 2004-2019 - ABZ ABZ knihy, a.s. TOPlist