4. díl - Popis vybraných technologií 1

HTML a CSS Technologie pro vývoj webových aplikací Popis vybraných technologií 1

Tento článek je součástí webové reprezentace ročníkové práce Honzy Bittnera, psané ve školním roce 2014/2015.


Popis vybraných technologií

V následujících kapitolách popíšu základy vybraných jazyků a způsoby, jak se s nimi dají efektivně vyvíjet weby. Ukážu jak úplné základy, tak i pokročilejší způsoby, které se běžně na vývoj využívají.

HTML

Z počátku je dobré uvést, že HTML není jazyk programovací, nýbrž jazyk značkovací. Skládá se tedy ze značek, kterými popisuje obsah webu. HTML nijak neřeší vzhled webu – k tomu je určen jazyk CSS, který je popsán v další kapitole.

Každá stránka se píše zvlášť do samostatného souboru s příponou html.

Elementy a značky

HTML je složen z elementů, které jsou složeny ze značek, někdy označovaných jako tagy, a obsahu mezi nimi. Elementy mohou být párové a nepárové. Nepárovým elementem je například obrázek, párovým například odstavec. Obecně platí, že nepárové elementy nemohou mít, a ani nemají, žádný obsah.

Značky se zapisují názvem elementu ohraničeným špičatými závorkami. Ukončovací značka má ještě před názvem elementu lomítko. Značky se zapisují malými písmeny.

Základním blokovým elementem – to jsou ty elementy, které vyplní šířku stránky a jsou od zbytku stránky odděleny – je element div.

<div></div>

V HTML se mohou psát i komentáře, které se píší stylem, jak je ukázáno na ukázce níže. V HTML jsou jenom blokové komentáře a neexistují řádkové komentáře.

<!-- komentář -->

<!-- víceřádkový
     komentář -->

V HTML5 přibyly nové sémantické elementy, což jsou elementy, které mají nějaký smysl. Dobrým příkladem je např. element header, který se využívá pro hlavičku. Tyto elementy se v podstatě chovají jako klasický blokový element – např. div. Dalšími zástupci nových sémantických elementů jsou také elementy footer, article, sidebar, nav, main atd.

Atributy

Elementy také obsahují atributy, které mohou obsahovat např. informace o tom, kde se nachází obrázek – to je konkrétně atribut src. Ve verzi HTML5 se také dají využívat vlastní atributy, které musí být zapsány s prefixem data.

Speciálními atributy jsou atribut id a class. Atribut id označuje unikátní element a musí být na stránce jedinečný. Atribut class, v překladu třída, vyznačuje skupinu elementů.

<p class="poznamka">Sem se může napsat poznámka.</p>

<img src="ovoce/jablko.png" alt="Obrázek jablka." data-ovoce="jablko"/>

Názvy atributů i jejich hodnoty je dobré psát bez diakritiky, pokud není zapotřebí, jako např. v ukázce výše u popisku obrázku – atribut alt.

Definování hlavičky

HTML stránka se musí nastavit – kódování, titulek, autor atp. – v hlavičce webu. Celý web musí být umístěn v elementu html, který obsahuje element head (hlavička) a body (tělo). Element body obsahuje viditelný obsah webu.

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8" />
    <title>Moje úžasná stránka</title>
    <meta name="description" content="Popisek mého skvělého webu." />
    <meta name="author" content="Jan Bittner" />
</head>
<body>

    <p>Odstavec textu.</p>

</body>
</html>

Samotný html element obsahuje také atribut, který nastavuje jazyk webu. Před elementem html se nastavuje tzv. doctype, který deklaruje typ dokumentu.

Do HTML hlavičky se píší meta tagy, které nastavují web. Nejčastěji se nastavuje kódování stránky – aby prohlížeč věděl, v jakém je nutné web zobrazit –, popis webu, autor webu, klíčová slova atp. Nutné je zadat pouze kódování. Meta tagy mohou sloužit jako zdroj informací pro vyhledávače.

Kromě meta tagů se v hlavičce deklaruje také titulek stránky, který BFU, resp. návštěvník webu, uvidí jako popisek záložky prohlížeče. Na titulek stránky se využívá element title.

CSS

Pokud chceme web stylovat, tedy měnit vzhled, musíme použít jazyk CSS. Styly se píší do samostatného souboru. Z pravidla, kvůli optimalizaci, využíváme pouze jednoho výsledného CSS souborů. Soubor zapisujeme, nejčastěji s názvem styly (nebo anglicky style), s příponou css.

Soubor se styly musíme se souborem HTML propojit právě v HTML hlavičce, nikoliv však pomocí meta tagu, ale pomocí elementu link. Jak takové propojení vypadá, je ukázáno v kódu níže.

<link rel="stylesheet" href="css/style.css" type="text/css"/>

Stejně jako HTML, ani CSS není programovacím jazykem.

Selektory

Jazyk CSS staví na jednoduchém principu. Nejdříve určíte elementy, které požadujete – tomu se říká selektor – a následně pro selektor vytvoříte blok, kam zapisujete, stylem vlastnost: hodnota, jednotlivé styly.

Jako selektor se může využít název elementu, atribut elementu, třída, id atd. Může se také vytvářet tzv. multi selektor, který spojuje více selektorů pro jeden blok stylů.

Preprocesor Sass

Hlavně ve větších webových projektech se časem začala projevovat nepořádnost CSS, a proto se začaly vyvíjet CSS preprocesory, které kromě možnosti rozdělit kód nabízí také prvky z programovacích jazyků. Získáme možnost proměnných, funkcí, mixinů (obdoba void funkcí – funkce, které nemají návratovou hodnotu), cyklů, zanořování, podmínek atd.

Jednotlivé třídy, které se nejčastěji používají pro stylování elementů, můžeme např. generovat například podle mapy (něco jako pole) a tím udělat kód méně redundantní (tzn. méně zbytečného a nadbytečného kódu).

@for $i from 1 through 3 {
  .#{sloupec}-$i {
    width: 100px * $i;
  }
}

Ukázka kódu výše vygeneruje třídu sloupec-1, sloupec-2 a sloupec-3, každou s jinou šířkou elementu.

Kompilace z preprocesoru

CSS preprocesor se musí kompilovat na CSS kód. To z toho důvodu, jelikož webové prohlížeče neumí preprocesorové styly zobrazit, se musí vytvořit s každou změnou nový výstupní CSS soubor. Sass má dva hlavní kompilátory – Ruby a LibSass. Hlavní kompilátor je ten v jazyce Ruby, ale jazyk Ruby je poměrně pomalý, a proto je dostupná také druhá možnost, a to využití LibSass. LibSass je psán v jazycích C a C++ a je tedy mnohem rychlejší.

Samotnou kompilaci můžete také obstarávat např. pomocí Node.js doplňků, které se za vás budou obstarávat kompilaci, a vy se o nic nemusíte starat.

Princip objektově orientovaných stylů

OOCSS je postaveno na myšlence, že máme web složen z několika komponent, které mohou mít drobné rozdíly. S touto metodou tedy píšeme styly tak, že vytváříme komponenty. Komponenta by měla být nezávislá na zvoleném elementu a svém umístěním v kódu, což zaručí nízkou specifičnost selektorů, což je jen dobře. Každá komponenta by měla fungovat stejně dobře ať je použita jak v hlavičce, tak třeba v patičce.

Komponentě můžeme také říkat objekt. Každý objekt může mít i své potomky a objekt i potomek mohou mít modifikátory. Modifikátory se užívají v případech, kdy je nutná jen minimální změna stylů a tudíž nemá smysl vytvářet novou komponentu.

Potýkáme se také se systémem, jakým způsobem pojmenovávat třídy tak, abychom mohli jasně, a přehledně, zapsat objekt, potomka, i modifikátory. Jedním z řešení je použití metody BEM.

Objekt zapíšeme klasicky, jako normální třídu. Potomka zapíšeme jako složeninu názvu objektu a názvu potomka oddělených dvěma podtržítky. Modifikátory poté jednoduše zapíšeme oddělením dvěma pomlčkami.

.clovek {}

.clovek__ruka {}

.clovek__ruka--prava {}

Na ukázce výše můžeme vidět styl zápisu BEM aplikovaného na příklad pravé ruky člověka. Pokud bychom chtěli využít jedné z výhod Sass – zanořování –, kód by vypadal takto. Znak & zastupuje nadřazený selektor.

.clovek {

  &__ruka {

    &--prava {}
  }
}

 

  Aktivity (1)

Článek pro vás napsal Honza Bittner
Avatar
Autor je vášnivý web developer. Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)

Jak se ti líbí článek?
Celkem (3 hlasů) :
55555


 


Miniatura
Předchozí článek
Výběr technologií 2
Miniatura
Všechny články v sekci
Technologie pro vývoj webových aplikací
Miniatura
Následující článek
Popis vybraných technologií 2

 

 

Komentáře

Avatar
mkub
Redaktor
Avatar
mkub:

trosku ta opravim... jazyk HTML obsahuje zopar znaciek, ktorym sa da mierne upravi vzhlad celeho webu (napr. <font>, <center>,...), ale podla W3C sa to nedoporucuje pouzivat a je lepsie pouzivat CSS

pre HTML subor s 2 pripony: .html a skratena verzia .htm

co sa tyka zapisu znaciek, tie sa mozu zapisovat aj velkymi pismenami, ale je dobrym zvykom pre prehladnost ich zapisovat malymi pismenami

Editováno 29.5.2015 5:33
 
Odpovědět  +1 29.5.2015 5:32
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na mkub
Honza Bittner:

Tyto elementy jako font, center atp. nejsou v HTML5 popisovány a já jsem se zaobíral jen HTML5. :)

Ty přípony jsou sice možné ve dvou tvarech, ale příponu .htm, která se používá opravdu minoritně, jsem za dva roky viděl použitou jen 2x.

Samozřejmě se mohou psát jakkoli, ale konvencí HTML5 je malé písmo.

Odpovědět  +1 29.5.2015 9:24
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
mkub
Redaktor
Avatar
Odpovídá na Honza Bittner
mkub:

tie tagy ako font, center stale su zachovane kvoli spatnej kompatibilite, ale su oznacene ako zastarane a totiz sa nedoporucuje ich pouzivat
co sa tyka tej skratenej pripony, tu zaviedla spolocnost Microsoft kvoli kompatibilite s DOS nazvami, kde nazov je 8+3, ale kedze pre systemy od Win95 a vyssie tato konvencia uz neplati, nie je dovod k pouzivaniu kratkej pripony, preto sa s nou uz tak casto nestretnes

 
Odpovědět  +1 29.5.2015 22:52
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.