Web HTML, CSS and basic informations to deal with so called webdesign

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.

Brought to you by Tony tony slacik carnivora profile photo Tony Slacik Animation, Special Effects, CG SFX, Properties I have no description!

Cloud laboratory library | Want to see more? Follow the Shirt project
Search

Discover the secrets of Carnivorian library. Search in ancient archives of amazing articles and open-source research. Just type what you are looking for into that white field above, say "渇しても盗泉の水を飲まず" and click that magic button "Ok, sniff it!". You´ll never forget the following events.

News by Email
Social networks Rich Site Summary Do you like Carnivora articles?. Stay in touch with us! Subscribe to our RSS feed and you´ll be infromed whenever a new article will be posted. No tweets, no one-word news, no spam. Just "serious" articles. Stay in touch with open-source and free software news in human readable way. And in touch with research of computer graphics, animation and experimental movie techniques. Google+ Join us on our Google+ page and stay informed about upcoming projects and articles. Facebook Become our friend on Facebook and share your opinion on projects. Vimeo Got Vimeo?! Cool, we too, let´s meet there. Looking forward! YouTube Prefer YouTube? Right, visit us there and tell us what you think. Subscription will be nice indeed, but no pressure... Myspace Visit our profile on MySpace. Stumble Upon Recommend us on Stumble Upon! Klout Help us in Klout performance by visiting our profile, joining us or even giving us a point or two... please. Although we don´t really know how it works, but it looks serious and important... Twitter Let´s tweet together, join us on Twitter and stay in touch with Carnivora every second... well that sounds horrible... every day seems to sound better. Digg Recommend Carnivora on Digg, give us thumb, or like, something :) Both might be acceptable compromise Delicious Share your experiences from Carnivora on Delicious and spread a word. You´ll gretly help us this way. Same as any other time you actually mention us somewhere. Reddit Preffer Reddit? Well, visit us there! GMail Email us! Anything you have to say secretely? Do not hesitate to write us. Really, we might even read it some day! Discussion forumBest way to stay in touch with us is joining the forum, which is a heart of our production and where the projects are dicussed and realized. Register in the forum and help us to evolve by sharing your opinion and point of view.
Czech | English
Shirt project sketch. Want to learn more?
Your Ad Here
Your Ad Here
Your Ad Here