HTML a CSS ve zkratce

Vývoj jazyků HTML i CSS probíhá odlišně. Nejprve se nové značky a CSS vlastnosti nějakou dobu testují (roky). Když se osvědčí, prohlásí se za standard. Tento proces se sále opakuje.

Standardizaci a další rozvoj webu má na starosti mezinárodní sdružení W3C. Jeho současným ředitelem je “vynálezce” webu a jazyka HTML sir Tim Berners-Lee. W3C (World Wide Web Consortium) existuje od roku 1994 a jeho hlavním úkolem je dohlížet na vývoj internetových standardů. Před založením W3C totiž existovalo velké množství různých nestandardních procedur a postupů, které některé prohlížeče podporovaly a jiné nikoliv, což tvorbu webu velice stěžovalo. Smyslem W3C je tedy zajistit schopnost různých systémů a klientů vzájemně spolupracovat.

Jinými slovy: Stejný kód by se měl v jakémkoliv webovém prohlížeči zobrazit naprosto stejně. Dnes se to již postupně daří, ale před takovými 10 lety to bylo téměř nemožné. Noční můra webmastera.

W3C se skládá z několika stovek komerčních společností a akademických organizací, které platí za členství. Za tyto peníze W3C například vytvořilo standardy jazyků HTML, XML či CSS nebo třeba provozuje validátor, nástroj sloužící k rychlé kontrole, zda stránka odpovídá specifikacím. W3C se také zabývá přístupností webu.

🌍 (1) HTML

Hypertext Markup Language

📌 Bez jazyka HTML by neexistoval web!

1.1 Co musím umět

Minimální požadavky:

1.2 Studijní zdroje

1.3 (Ne)úplná historie HTML v datech

Rok Událost
1989 Tim Berners-Lee “vynalezl” WWW
1991 Tim Berners-Lee ‎"vynalezl" ‎HTML
1993 Dave Raggett ‎vypracoval ‎HTML+
1995 HTML 2.0
1997 HTML 3.2
1999 HTML 4.01
2000 XHTML 1.0 (eXtensible, dnes již v klinické smrti)
2008 První veřejný návrh HTML 5‎
2014 HTML 5 https://www.w3schools.com/html/html5_intro.asp
2016 HTML 5.1
2017 HTML 5.2

Všimněte si vývojovou “díru” mezi lety 1999 a 2014. Mezi verzemi 4 a 5 uplynulo neuvěřitelných 15 let!

1.5 HTML 5

HTML 5 je (zatím) poslední verze značkovacího jazyka pro tvorbu webových stránek. Asimiluje v sobě předchozí verzi HTML 4.01.

HTML bez ohledu verzí obsahuje celkem 124 značek. Z nich je 21 nových (HTML 5) a 12 zastaralých (prohlížeče je stále podporují, ale neměly by se již používat). My se potkáme přibližně s 52 značkami:

<!-->, <!DOCTYPE>, <a>, <article>, <audio>, <b>, <body>, <br>, <caption>, <code>, <div>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <head>, <hr>, <html>, <i>, <img>, <input>, <li>, <link>, <mark>, <meta>, <nav>, <ol>, <p>, <picture>, <pre>, <q>, <s>, <select>, <span>, <style>, <sub>, <sup>, <table>, <tbody>, <td>, <th>, <title>, <tr>, <ul> a <video>.

Zastaralé značky: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike> a <tt>. Sice stále fungují, ale nedoporučuje se je používat.

1.6 HTML značky, atributy, hodnoty

Jak se v těchto pojmech vyznat?

<h2 align="center">Nadpis</h2>
<p align="right">Odstavec</p>
<img src="./plaz.jpg" alt="Foto z dovolené" />

Některé atributy jsou “nenahraditelné” (src, alt), používání jiných (align) je považováno za zastaralý způsob - jejich funkci převzaly kaskádové styly (text-align: right;).

Příklad:

Chci vytvořit nadpis druhé úrovně.

<h2>Zde je text nadpisu</h2>

Nyní chci, aby tento nadpis byl červeným bezpatkovým písmem. Element h2 ale nemá potřebné atributy na obarvení textu (fakt nemá). Ten má ale element font.

<h2>
  <font face="arial" color="#ff0000">
  Zde je text nadpisu
  </font>
</h2>

Toto je zastaralý způsob. Dnes se toto řeší výhradně kaskádovými styly.

<style type="text/css">
h2 {
  font-family: "Arial";
  color: red;
}
</style>
 
<h2>Zde je text nadpisu</h2>

Oba dva způsoby vytvoří stejný výsledek. Přesto je mezi nimi podstatný rozdíl. Jaký?

Mějte na paměti:

1.6.1 Blokové elementy

Tato sada elementů před i za sebou odřádkuje. Proto se jim říká “blokové”.

Nadpisy

Elementy h1 až h6. Oproti např. Wordu, který má styl Název pro definování názvu dokumentu (zde stránky), nemá HTML alternativu. Nejčastěji se ve stejném významu používá element h1. Ostatní nadpisy h2, h3 a h4 se používají pro 3 hierarchické úrovně nadpisů. Nižší úrovně h5 a h6 se využívají zřídka.

Značka Ve Wordu by to byl styl
<h1></h1> Název
<h2></h2> Nadpis 1
<h3></h3> Nadpis 2
<h4></h4> Nadpis 3

Odstavec a blok

<pre>
&lt;?php
    $vek = $_GET['vek'];
        if($vek<18;) {
          echo 'Ještě nejsi plnoletý';
        } else {
          echo 'Vstup povolen';
        }
?&gt;
</pre>

Zobrazí:

<?php
    $vek = $_GET['vek'];
        if($vek<18;) {
          echo 'Ještě nejsi plnoletý';
        } else {
          echo 'Vstup povolen';
        }
?>

1.6.2 Řádkové elementy

Následující elementy na formátování textu jsou in-line, to znamená řádkové. Nezalamují za sebou řádek (na rozdíl od blokových elementů výše).

1.7 HTML entity

Slouží k zápisu speciálních znaků pomocí entit slovně nebo číslem znaku v ASCII tabulce:

<p>&copy; 2019</p>
<p>&#169; 2019</p>

V obou případech se vypíše: © 2019

Entit je mnoho. Z těch důležitých například:

kódem číselně význam
&nbsp; &#160; tvrdá “nezlomitelná” mezera u&nbsp;lesa nebo 12&nbsp;cm
&times; &#215; křížek × jako symbol pro násobení
&ndash; &#150; pomlčka – (spojovník je kratší -). Existuje i &mdash; —
&lt; &#60; znak <
&gt; &#62; znak >
&deg; &#176; symbol stupně °
&middot; &#83; Symbol tečky jako symbolu násobení ·

Není nutné si je všechny pamatovat. V Notepadu++ i PSPadu je k dispozici tabulka:

🌍 (2) CSS

Cascading Style Sheets

📌 Bez jazyka HTML by neexistoval web!

📌 Bez CSS by byl web “uniformní” (všechny stránky by vypadaly stejně).

Původně byl jazyk HTML navržen tak, aby pomocí něj šlo snadno vyznačit jednotlivé logické části dokumentu. Nikdy přitom nebyl kladen důraz na přesnou definici výsledného vzhledu dokumentu. tato vlastnost vycházela z jeho smyslu použití.

Asi by se nic nezměnilo, kdyby se web v polovině 90. let minulého století nerozšířil i do komerční sféry. Tím vznikly požadavky na lepší kontrolu nad grafickým vzhledem dokumentu. Tyto požadavky byly uspokojeny přidáním atributů jako je align a elementů jako font a center pro lepší ovládání vzhledu a formátování dokumentu (dnes tyto elementy a atributy patří na smetiště dějin).

Použití těchto technik mělo dva neblahé účinky. Za prvé se v HTML dokumentech místo jejich struktury začal vyznačovat spíše grafický vzhled. Druhá nevýhoda spočívala ve velké pracnosti a neflexibilitě tohoto řešení – způsob formátování se musel nastavit pracně pro jednotlivé elementy dokumentu. Rozsáhlejší změny v designu stránek pak byly velmi pracné, ne-li nemožné.

Obě tyto nevýhody odstraňují kaskádové styly. Pomocí stylu lze jednoduše definovat druh písma, způsob zarovnání, barvu a další vlastnosti elementu. Tato definice se pak použije jednotně v celém dokumentu. V dokumentu se již zaměříme pouze na strukturu informace (HTML) – grafický vzhled je definován stylem (CSS).

V jednom dokumentu může být použito několik stylů, které se navzájem doplňují. A naopak. Jeden styl může být použit společně s neomezeným počtem stránek, které tak získají jednotný vzhled. To je snad největší výhoda kaskádových stylů – společnou definici vzhledu mohou sdílet všechny stránky celého velkého webu.

Slovo kaskádové, jež mají CSS v názvu, značí jejich nejcharakterističtější vlastnost – jednotlivá pravidla kaskádových stylů se mohou vzájemně překrývat, což zvyšuje jejich efektivnost.

Vznik kaskádových stylů se datuje k roku 1997, jejich vytvoření iniciovala organizace W3C.

2.1 Co musím umět

2.2 Studijní zdroje

2.3 CSS 3

CSS 3 je zatím poslední verze kaskádových stylů, pomocí nichž určujeme vzhled webových stránek. Definujeme styly pro nadpisy, odstavce, odkazy či obrázky, ale i pro jednotlivé bloky webové stránky (layout). Podobně jako HTML, i CSS 3 asimiluje předchozí verze CSS 2 i CSS 1. Celkem existuje 208 CSS vlastností. Ukázka + živá ukázka: https://repl.it/@machac/css-ukazka:

h2 {
    font-family: Arial, sans-serif; /*Nadpisům h2 nastav písmo Arial popř. bezpatkové*/
    font-variant: small-caps; /*Také bude stylem Kapitálky*/
}

p {
    text-align: justify; /* Odstavce <p> budou zarovnány do bloku */
}

a:hover {
    color: red; /*Po najetí myší na odkaz se písmo obarví červeně...*/
    text-decoration: none; /*...a odkaz také nebude podrtžený*/
}

🌍 (3) HTML + CSS

Existují tři způsoby vložení CSS stylu do HTML dokumentu. Všechny tři způsoby lze navzájem kombinovat.

3.1 Inline styl

Vkládá přímo ke konkrétní značce. Nejčastěji se k tomu využívá neutrální značka <span></span>:

<span style="color: blue;">Tento text bude modrý.</span>
<b style="color: red;">Tento tučný text bude červený.</b>
<p style="color: lime;">Tento celý odstavec bude mít zelené písmo.</p>
<p>černá černá <span style="color: gold;"> zlatá zlatá </span> černá černá</p>

Výsledek v prohlížeči:

Tento text bude modrý.
Tento tučný text bude červený.

Tento celý odstavec bude mít zelené písmo.

černá černá zlatá zlatá černá černá

3.2 Interní styl

Vkládá se do hlavičky stránky do sekce <style></style>. Styl se tak vztahuje na jeden html dokument.

...
<style>
   /* do sekce style přijdou definice CSS stylů */
   /* toto je v CSS komentář */
</style>
</head>
...

3.3 Externí styl

Vkládá se do samostatného souboru s příponou .css. V každém html dokumentu se na něj odkazujeme pomocí odkazu v hlavičce:

<link rel="stylesheet" href="styl.css">

Styl se tak vztahuje na všechny stránky, kde je odkaz uveden. Využívá principu, že web je složen z řady HTML stránek, které mají stejný vzhled. Díky tomu mají stránky jednotný vzhled a každá změna stylu v css souboru se projeví ve všech html stránkách, které jsou s tímto css souborem propojeny.

🌍 (4) Bootstrap

Bootstrap je jednoduchá a volně stažitelná sada nástrojů pro tvorbu webu a webových aplikací. Obsahuje návrhářské šablony založené na HTML a CSS, sloužící pro úpravu typografie, formulářů, tlačítek, navigace a dalších komponent rozhraní, stejně jako další volitelná rozšíření JavaScriptu.

Pro použití Bootstrapu jsou nutné základní znalosti HTML a CSS, interaktivní prvky jako jsou tlačítka, boxy, menu a další kompletně nastavené a graficky zpracované elementy je totiž možné vložit pouze pomocí HTML a CSS.

4.1 Výhody

4.2 Příklad základního použití

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<body>
	<div class="container">
	...
	</div>
</body>

4.3 Studijní zdroje