Web HTML, CSS a základní informace pro tvorbu webových stránek

Internet, server, co to je?

Abychom mohli rozvíjet složité teorie a psát podivné weby (ála tento), je potřeba si povědět několik nezáživných obecných hloupostí.
Jen pro jistotu. Předně co je to internet? Není to žádný tvor nebo organismus zakopaný v oblasti 51, není to ničí věc, a nikde nesídlí (i když...) je to "jen" síť počítačů komunikujících mezi sebou takzvanými protokoly (TCP/IP, vůbec není podstatné). Z toho vyplívá, že internet nikde nesídlí, respektive sídlí všude. Počítače tedy vysílají obsah webu do světa. Co se ale stane, když počítač vypnu? Logicky nemohu vysílat. Z toho důvodu existují počítače vysílající neustále, nikdy se nevypínající, těm říkáme servery. Ty vysílají obsah (webové stránky) a provádějí veškeré požadované operace ve dne v noci. Neustále. Zajišťují, že máte k dispozici stránku fanoušků sakur i přestože pan Kimura šel již dávno spát. Co ale vlastně vysílají?

World-Wide-Web, Hypertext a způsob komunikace

"WWW" na začátku internetové adresy označují aplikace internetového protokolu (zmíněného prostředku komunikace) HTTP (Hypertext Transfer Protocol). Ten slouží k výměně hypertextových dokumentů v jazyce HTML (Hypertext markup language), což jsou naše stránky. www na začátku adresy tedy uvozuje hypertextový dokument, všimněte si, že před adresou je, nebo alespoň bývala vidět i předpona http:// uvozující tento protokol. Několikrát se nám tu vyskytlo slovo Hypertext. Hypertext je forma nelineárního textu, odkazy rozvětveného textu. K jeho zápisu a funkci se používá jazyk (vlastně se ani nedá říci jazyk, podle mě je to jen korpus, ale budeme se držet obecného náhledu) HTML. HTML, značkovací jazyk hypertextu, pomocí značek (tag), definuje jednotlivé funkce a formátování textu. Zpravidla jednoduše ohraničením textu určeného k zformátování dvojicí značek. Zahajovací a ukončovací. Pojďme si to ukázat na příkladu nadpisu:

ti řikám vole, že <h3> meloun je zelenina, </h3> kiwi ne!

tento zápis nám určuje, že nadpis (header ->h, 3.úrovně -> h3) začíná před slovem meloun a končí koncovou značkou před slovem "kiwi". Formátován jako nadpis bude tedy logicky "meloun je zelenina". Všimněte si vzhledu značek. Každá značka je uzavřena do dvou špičatých závorek, najdete je nad pravým altem, ten zároveň využijete při jejich psaní. Pravý ALT+ , = <, levý ALT+ . = >. Všimněte si zároveň rozdílu mezi značkami. Koncová se liší lomítkem před názvem. Název musí mít obě značky pochopitelně stejný. Vše od první značky přes obsah ke koncové značce se nazývá elemet. Zde tedy máme výsledek předchozího zápisu:

ti řikám vole, že meloun je zelenina, kiwi ne!

Na tomto principu fungují značkovací jazyky. A můžete tvořit. Na co je ovšem třeba dávat, alespoň zezačátku trochu pozor je syntax a pravidla zanoření. Prakticky jde o jen o to, nedělat chyby. Nezapomínat psát lomítka, závorky a nekřížit značky. Pokud noříte jednu značku do druhé, je potřeba mít na paměti, že misí být celá uvnitř nebo celá venku. Nic mezi tím není dobré.

<b>tučná <i>kurzíva</i> </b>

využijeme dvou značek pro formátování textu, <b> (bold), vymezující tučný text a <i> (italic) vymezující kurzívní text. Jak vydíte vnořili jsme kurzívní text do tučného, čili kurzíva bude zárovň ovlivněna svou mateřskou značkou, tedy tučná.

tučná kurzíva

pokud by byla koncová značka kurzívy zapsána až po koncové značce tučného písma <b>tučná <i>kurzíva </b></i>, dochází ke křížení. To rozhodně není dobré. V triviálních případech jako tento si HTML poradí, ale při složitějších multiúrovňových vnoření stejného tagu to zlobí.
HTML tedy slouží k zápisu textu a jeho rozdělení do skupin. Definujeme jím co bude nadpis a co odstavec. HTML se ale nezabývá jen formátováním textu. Jeho pomocí vkládáme do dokumentu například obrázky (+ multimiliony jiných věcí). To děláme pomocí tagu <img>, která je nepárovým tagem. Doposud jsme se zabývali párovými značkami, jež mají počáteční a ukončovací tag. To z toho důvodu, že mají za úkol vymezit určitou oblast (v textu). Obrázek takové ambice nemá. Jeho cílem je vložit obrázek, nic víc. Proto se v HTML setkáte i s nepárovými tagy, jako například ještě <br> , kterým zalomíte v daném místě řádku. K vložení obrázku je ovšem nutné naši současnou definic tagu rozvinout o takzvané atributy.

Samotným napsáním <img> se pochopitelně nic moc nestane. Přinejmenším musíte osvětlit, jaký obrázek chcete vložit, z čeho má čerpat, co je zdroj. K tomuto účelu rozvineme <img> o atribut source (zdroj), který vložíme do samotné značky jako src="". U párových tagů vkládáme do první značky (pouze). Prostor mezi uvozovkami je určen k definici místa obrázku, jeho adresy. Tzv. URL, nemá smysl se tím v úvodu nijak obšírně zabývat, je to prostě adresa. Odtud nám <img</img> tag obrázek načte. Výsledný zápis pro vložení obrázku tedy vypadat takto:

<img src=" http://dl.dropbox.com/u/15859970/articles/html%20basics%20overview/html%20basics.jpg" >

A toto je výsledek. Samotná adresa je vyznačena modře. pokračujte prosím pod obrázek, řekneme si trochu víc.

Mezi další atributy, které se často objevují patří kupříkladu style="", definující kaskádové styly, ke kterým se dostaneme později, alt="", určující náhradu, alternativu, pokud funkce selže (například se zobrazí, namísto nefunkčního obrázku, povětšinou jeho popis, lidský, někdy i s omluvou), nebo title="", určujícího onu poznámku zobrazjící se po přejetí myší. Pojďme zkusit nás obrázek o tyto atributy rozvinout.

<img src="http://dl.dropbox.com/u/15859970/articles/html%20basics%20overview/html%20basics.jpg"
style="height:50px;"
alt="Jej, obrázek se po cestě ztratil, nicméně byl na něm tygřík a perfektně ladil s obsahem článku. Škoda"
title="pohled na čerstvě upečený rebarborový koláč" >

a výsledek, atribut alt si při troše štěstí příliš nevychutnáte, ovšem style, definující výšku by patrný být měl. Pokud najedete myší na obrázek a chvilku vydržíte, můžete obdivovat i práci atributu title.

Jej, obrázek se po cestě ztratil, nicméně byl na něm tygřík a perfektně ladil s obsahem článku. Škoda

Hypertextové odkazy

pravděpodobně nejdůležitějším tématem jsou hypertextové odkazy, označují se značkou <a> (anchor - kotva), jedná se o párový tag, jehož atributem href="" (Hypertext REFerence). Opět použijeme URL adresu jako u obrázku, jen s tím rozdílem, že nyní ze stránky nebudeme čerpat, nýbrž ji navštívíme. Samozřejmě můžeme využít i ostatních atributů, nyní se ale držme při zemi

<a href="http://dl.dropbox.com/u/15859970/articles/html%20basics%20overview/victory%2C%20the%20link%20works!.jpg"> kedlubna, traktor, text odkazu </a>

výsledek: kedlubna, traktor, text odkazu

CSS, kaskádové styly a vzhled vesmíru

V atributu style jsme načali téma uzpůsobení vzhledu prvků. Pro urření bližších vlastností objektu, jako výšky, šířky, barvy, průhlednosti, a mnoha dalších, používáme další "jazyk", CSS (Cascade Style Sheet) takzvaný kaskádový styl. Tím si definujeme, například, že náš nadpis <h3> bude zelený o velikosti 12pixelů, psaný kapitálkami a zarovnaný na střed. A to následovně, pomocí již použitého atributu style=""

<h3 style="color: green; font-size: 12px; text-transform: uppercase; text-align: center;"> olezlý vagón </h3>

olezlý vagón

Druhů zápisu a možností CSS je nesmírně mnoho, nemá smysl snažit se je vměstnat do úplného začátku, do seznamování s tvorbou webu. Ani samostatnou kapitolou není možné téma ani zdaleka vyčerpat. Je však dobé vědět, že tyto styly určují vzhled a vlastnosti elementů HTML. Je to nedílná součást všech webových stránek a my se k ní dostaneme velmi brzy. Tím jsme si řekli něco málo o dvou základních jaycích a jejich funkci. Jak jste mohli vidět web je kombinací několika jazyků, především čtyř, HTML, CSS, Java a PHP, přičemž poslední dva jsou skutečně programovací jazyky jak se sluší a patří. Jednotlivé jazyky se navzájem obohacují a rozvíjejí. Jsou všechny "zdarma", nebo jinak řečeno volně dostupné. Samozřejmě existují "user-friendly" programy pro tvorbu webu, z nichž nejsvůdněji vypadají ty grafické, takzvané WYSIWYG editory, pyšnící se motem "What You See Is What You Get, což není vždy tak úplně pravda. Navíc všechny tyto editory mají hranice a jejich výstupem je pro člověka jen těžko čitelný kód, někdy nesmyslně dlouhý a oplácaný hloupostmi. Proto jim zlý jazykové přezdívají WYSIWYNG "What You See Is What You Never Get". Dle přísloví "když chceš něco mít, udělej si to sám" bych opravdu doporučil na ně rovnou zapomenout a pokusit se o Web svépomocí a složitější cestou. Začít od píky, je to sice delší, za to ale horší cesta. Nicméně nebudete vázáni nikdy na nic a na nikoho (program), neustále můžete své znalosti rozvíjet ale především být kreativní. Jediné co potřebujete pro tvorbu webu je prakticky jen jednoduchý textový editor, webový prohlížeč (*posléze nejlépe všechny) a trochu odhodlání. *ne všechno se v různých prohlížečích zobrazjue stejně, kompatibilita mezi prohlížeči je jedna z největších otázek tvorby webu, proto se při psaní kontroluje zobrazení nejlépe ve všech pouívaných prohlížečích (jako Mozzilla Firefox [FUCK YEAH!], Google Chrome [taky FUCK YEAH!], Safari, Opera a bohužel stále i Internet Exploder)

Jak na to?

Připravte si jednoduchý textový editor, poznámkový blok, Gedit, Kate, notepad, cokoli vám vyhovuje a váš oblíbený prohlížeč (čili Firefox, nebo Chrome). Zaměříme se prozatím na nejjednodušší stránku čistě v HTML. HTML dokument vytvoříte velice jednoduše, stačí jen přepsat příponu z ".txt" na ".html" nebo ".htm" (moje první stránka.txt -> moje první stránka.html). Zobrazíte ho otevřením souboru v prohlížeči. Tak můžete psát, ukládat a kontrolovat co a jak se zobrazuje. Nyní si ukážeme základní strukturu HTML dokumentů.

Html dokument se dělí v zásadě na dvě části, HEAD (hlavičku) a BODY (tělo). Obě dvě tyto části jsou zapsány pomocí značek <head> obsah hlavičky </head> a <body> obsah těla </body>. Hlavička je oblast, která uvozuje dokument ve smyslu definice jazyka, jména, popisu a klíčových slov pro stránku, píší se do něj připojené kaskádové stylopisy (CSS soubor psaný mimo vlastní dokument), případné skripty a metadata dokumentu. Což jsou věci, kterými se nyní nemusíte trápit. Daleko důležitější je pro nás element BODY. Jak název napovídá, jedná se o tělo stránky o její skutečný obsah. Vše co vidíte, nebo lépe co stránka obsahuje. Do tohoto elementu budeme "vnářet". Nemyslím si že je nutné rozepisovat nějaké "ahoj světe" v různých barvách a velikostech. Pojďme zkusit rovnou plavat. Najděte si jakoukoli stránku chcete a zobrazte si její kód (vřele doporučuji pro začátek tuto, možná objevíte i nějaká tajemnství), buď najdete v menu, nebo stiskněte CTRL+U. Zdrojový kód vám ukáže s čím prohlížeč pracuje, porovnáním zápisu a výsledku se naučíte nejvíc. Dělají to tak všichni, vývojáři webu se učí jeden od druhého, právě zkoumáním zdrojových kódů. Co si ve zdrojovém kódu přečtete není celé dílo, některé jazyky, jako například PHP, se zpracovávají na straně serveru a prohlížeči předají jen výsledné HTML, což si vysvětlíme jindy. Nicméně orientace v kódu je nedílnou součástí pochopení fungování webu. Na stránkách se setkáte s kombinací všech čtyř hlavních jazyků (+ dalších), nemusíte se jim snažit porozumnět, soustřeďte se na to co znáte a jste schopny(i) identifikovat. Zároveň bych doporučil vyhnout se stránkám z WYSIWYG editorů, většinou je to změť nesmyslů, bez komentářů a poznámek autora. Jednoduše je-li kód moc složitý nebo nepřehledný, běžte na jednodušší. Cílem je v této fázi pochopit co je co, oddělit to co znám od toho co neznám. Pro lepší orientaci přikládám tabulku s nejběžnějšími značkami, se kterými se při svém průzkumu můžete setkat.

HTML tagy
<a> párový tag, značící odkaz. Běžné atributy href, class, id, title, alt, style+
<img> nepárový tag, vloží obrázek. Běžné atributy src, class, id,title, alt, style+
<b> párový tag pro tučný text (bold). Atributy se běžně se nepoužívají
<i> párový tag pro kuzívní text (italic). Atributy se běžně se nepoužívají
<div> párový tag, definuje oddíl (DIVision). Asi nejpoužívanější tag vůbec, přestože žádnou funkci sám neplní. Používá se k vymezení určité oblasti, oddílu. Běžné atributy class, id, title, alt, style+
<span> párový tag, obdoba DIV, jen omezená na in-line text. Běžné atributy class, id, title, alt, style+
</br> nepárový tag, zlomí v daném místě řádku. Atributy se běžně se nepoužívají
<nobr> párový tag, zajišťuje nezlomitelnost obsahu. Atributy se běžně se nepoužívají
<sub> párový tag, spodní index (subscript). Atributy se běžně se nepoužívají
<sup> párový tag, horní index (superscript), zajišťuje nezlomitelnost obsahu. Atributy se běžně se nepoužívají
<strike> párový tag, přeškrtnutý text. Atributy se běžně se nepoužívají
<p> párový tag, odstavec (paragraph), není moc co dodat. Běžné atributy class, id, style+
<h1> - <h6> párové tagy, nadpisy (header), h1 je největší, číslo naznačuje hierarchii. Vzhled je potřeba vyzkoušet. Běžné atributy class, id, style+
<center> párový tag, vystředí obsah. Atributy se běžně se nepoužívají
<table> párový tag, tabulka. Řádky jsou definovány pomocí zanořeného elementu <tr&tg; (párový), v němž jsou vloženy sloupce &tl;td&tg; (párové). Běžné atributy class, id, title, alt, style+
<ul> párový tag, neřazený seznam (unordered list). položky jsou definovány pomocí zanořeného elementu <li&tg; (list item, párový). Běžné atributy class, id, title, alt, style+

Slovo závěrem

Pověděli jsme si naprosto povrchně a obecně, co jsou to webové stránky a jakým způsobem se zapisují. Pokud pochopíme základ, další studium oblasti HTML a CSS už je víceméně otázkou nabalování vědomostí na již pochopenou gramatiku. Sbírání nového lexika. Není vůbec nutné učit se všechny HTML značky, nikdy nebudete používat všechny, skoro bych řekl, že se dá vystačit s a, img a div, ale znát některé základní určitě nebolí. Důležitější oblastí jsou kaskádové styly a jejich implementace. Tu probereme v následujícím článku o pokročileší tvorbě webu. Po ní se již podíváme na stránky Carnivory a vysvětlíme jejich funkce. Javascript a PHP jsou zatím na míle vzdálené a proto si vysvětlováním jejich fungování nebudeme (příliš) zanášet závity. Doufám, že vám tento článek alespoň trochu posloužil a máte-li nějaké dotazy, nebo připomínky, pokračujte na fórum odkazem níže. Tam se s tím nějak poperem. Zatím hodně štěstí v průzkumu zdrojových kódů a budu se těšit posléze u pokročilejších HTML/CSS technik.

Tento článek vám přinesl Toník tony slacik carnivora profile photo Toník Sláčík Animation, Special Effects, CG SFX, Properties I have no description!

Have you seen JUMP the PAIN already? | Karel, Nemo and Bone... Blender characters are available for you to download and use!
Hledání

Objevte tajemství Carnivorských archivů, prolistujte dávno zapomenuté plány a anály. Stačí jen vepsat co hledáte, podívat se do slunce a nahlas vyslovit "渇しても盗泉の水を飲まず" pak už jen stisknout tlačítko "Dělej". Na to co spatříte vzápětí do smrti nezapomenete.

Novinky Emailem
Sociální netwoři Rich Site Summary Máte v oblibě Carnivorské články? Zůstaňte v kontaktu s Carnivorou a buďte informováni ihned co nový článek porodíme! Upište se našemu RSS krmítku a budete prostě IN! Žádné tweety, jednoslovné zprávy, systémová hlášení. Jen opravdové články.Zůstaňte v obraze co do novinek ze světa open-source a free softwaru, především však jejich použití. V kontaktu se světem experimentálního filmu, speciálních efektů, animací a CG dostupné pro každého (kromě Pepika). Google+ Spojte se s námi na Google+ a buďte informováni o všem co se v Carnivoře šoustne. Facebook Zpřátelte se s námi na Facebooku a ... a tak Vimeo Fandíte Vimeu? Výborně, my taky, pojdmě se potkat tam! Budem se těšit. YouTube Preferujete YouTube, pojďme se náhodou potkat tam! Pokud byste si nás přidali, vůbec by to nevadilo, ale žádný tlak. Myspace Navštivte náš profil na MySpaceu Stumble Upon Doporučte stránku na Stumble Upon! Klout Přidejte se k nám na Kloutu. Twitter Pojďme štěbetat spolu! Přidejte si Carnivorský pablšing na Twitteru. Digg Sdílejte svůj úžasný zážitek z Carnivory na Twitteru Delicious Sdílejte Carnivoru na Delicious. Velmi nám tím pomůžete. Reddit Sdílejte své dojmy na Reddit GMail Napište nám! Někdy to i čteme a sem tam i odpovídáme. Diskuzní fórumNejlepší způsob, jak zůstat v kontaktu s Carnivorou, je navštěvovat fórum. Zde se to vše odehrává. Přidejte se k nám pomozte nám evovlovat pomocí vašeho pohledu a názoru na věc. Ne
Česky | Anglicky
Blender Character Repository
Your Ad Here
Your Ad Here
Your Ad Here