Úvod do HTML a CSS

meme

HTML Syntax

<tag atribut_1="value" ... atribut_n="value_n">
    obsah elementu
</tag>

<tag atribut_1="value" ... atribut_n="value_n">
<tag atribut_1="value" ... atribut_n="value_n" />

<!-- Komentář na jeden řádek -->

<a href="http://inf.upol.cz/">Katedra informatiky<a/>

<!--
    Komentář na 
    více řádků
-->

Nesmíme dbát na výchozí vzhled elementů. Vzhled nám neudává sémantiku, která je velice důležitá pro strojové zpracování.

Značka !DOCTYPE

Značka !DOCTYPE musí být obsažena na začátku každého html souboru.

Element html

Element html značí místo zdrojového kódu.

Atribut lang

Atribut lang je globální atribut a definuje jazyk obsahu v elementu.

Tedy lang můžeme použít pro každý element, např: html, p, či li.

Příklady použití

<!DOCTYPE html>
<html lang="cs">
    <head>
        <meta charset="utf-8">
        <title>Empty site</title>
    </head>

    <body>
    </body>
</html>
<ul role="menu">
    <li lang="ca" role="menuitem">
      <a href="/ca" title="Catalan">
        <bdi>Català</bdi>
      </a>
    </li>
    <li lang="de" role="menuitem">
      <a href="/de" title="German">
        <bdi>Deutsch</bdi>
      </a>
    </li>
    <li lang="es" role="menuitem">
      <a href="/es" title="Spanish">
        <bdi>Español</bdi>
      </a>
    </li>
    <li lang="fr" role="menuitem">
      <a href="/fr" title="French">
        <bdi>Français</bdi>
      </a>
    </li>
</ul>

Element head

Element head reprezentuje hlavičku webové stránky, kde se vyskytují informace o vkládaných souborech, metatagy, nadpis a další.

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Krátký popis webové stránky do 120 znaků (SEO)">
    <meta name="keywords" content="klíčová slova html css syntax">
    
    <!-- Jméno autora obsahu -->
    <meta name="author" content="Tomáš Petržela">

    <title>Hlavní stránka</title>
</head>

Element body

Element body vymezuje místo pro obsah stránky.

Syntax CSS

selektor { vlastnost: hodnota; }

selektor {
    vlastnot_1: hodnota_x;
    ...
    vlastnost_n: hodnota_y;
}

/* Takto zapisujeme komentář na jeden řádek */

/* Takto zapisujeme
komentář na více řádků */

CSS jednotky

CSS jednoty @RNDr. Martin Trnečka, Ph.D.

Podrobnější přehled CSS jednotek zde.

CSS Barvy

selektor {
    color: #RRGGBB;
    color: #rrggbb;
    color: #RRGGBBAA;
    color: #rrggbbaa;
    color: rgb(red, green, blue) /* hodnoty 0 - 255 */
    color: rgba(red, green, blue, alpha) /* alpha: 0 - 1.0 */
    color: hsl(hue, saturation, lightness) /* 0 - 360; 0 - 100; 0 - 100 */
    color: hsla(hue, saturation, lightness, alpha) /* alpha: 0 - 1.0 */
}
selektor {
    color: color(display-p3 0.11 0.06 0.06);
}

Funkce color() má k dnešnímu dni (21. 2. 2022) podporu pouze na prohlížeči safari.

sRGB vs Display-P3

Načtení externího CSS souboru

CSS je možné psát přímo do HTML do elementu style. Tento způsobem není vůbec vhodný a v pozdější fázi vývoje webové stránky je nepřehledný. CSS lze zapisovat i do atributu style, zde se jedná o Inline CSS, (Inline CSS je lepší vůbec nepoužívat).

Můžeme vytvořit externí soubor .css, který můžeme nalinkovat v hlavičce zdrojového kódu HTML a při načtení HTML stránky se nám načte i externí soubor.

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

Načtení CSS pomocí preload.

<link href="/style.css" rel="preload" as="style" onload="this.rel='stylesheet'">
<link rel="stylesheet" href="/style.css">

Úkoly

Vždy se snažte o co nejefektivnější řešení.

Úkol 1

Vytvořte primitivní webovou stránku obsahující tři odstavce lorem ipsum textu. Pomocí externího CSS změňte barvu textu tak, aby první a třetí odstavec byl zobrazen tmavě šedou barvou a prostřední odstavec modrou barvou.

Přijmout úkol.

Úkol 2

Vyřešte předchozí úkol bez použití atributů class a id.

Inline CCS nepoužívejte.

Přijmout úkol.

Úkol 3

Upravte předchozí úkol tak, aby první písmeno každého odstavce bylo tučné.

Přijmout úkol.

Úkol 4

Napište CSS kód, který vizualizuje HTML kód tak, že obsah elementu span bude zobrazen šedou barvou, odkazy modrou barvou a při najetí myši se změní na tmavě modrou. Pokud je odkaz použit uvnitř elementu span, převezme jeho barvu (v našem případě tedy bude vizualizován šedou barvou, změna barvy po najetí myši zůstává stejná jako u odkazů mimo element span).

<h1>Lorem ipsum</h1>

<article>
    <h2>Dolor sit ament</h2>
    <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Fusce suscipit</a> libero eget elit. Etiam
        ligula pede, sagittis quis, interdum ultricies, scelerisque eu. <a href="#">Lorem ipsum</a> dolor sit amet,
        consectetuer adipiscing elit. Suspendisse nisl. Morbi scelerisque luctus velit. <span>Phasellus enim erat,
        <a href="#">vestibulum vel</a>, aliquam a, posuere eu, velit</span>. Nullam lectus justo, vulputate eget
        mollis sed, tempor sed magna. <span>Nullam at <span>arcu a est</span> <a href="#">sollicitudin euismod.</a><span>
    <p>

    <section>
        <h2>Morbi scelerisque luctus velit</h2>
        <p>
            Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Etiam ligula pede, sagittis quis, interdum
            ultricies, scelerisque eu.
        </p>
    </section>

</article>

Pozor HTML kód obsahuje chyby, které je nejprve třeba odstranit. K jejich nalezení použijte validátor.

Přijmout úkol.

Úkol 5

Na stránce Fakultní nemocnice Olomouc změňte pomocí vývojářských nástrojů barvu textu elementu h1 na černou.

Úkol 6 - Dobrovolný

<!DOCTYPE html>
<html lang="cs">
<head>
	<meta charset="utf-8" />
	<title>Stopařův průvodce Galaxii</title>
</head>
<body>

	<header>
		<h1>Stopařův průvodce Galaxií</h1>

	 <main>
		<nav>
			<ul>
				<li>Obsah
					<ul>
						<li><a href="#stoparuv-pruvodce-galaxii" title="Stopařův průvodce Galaxií">Stopařův průvodce Galaxií</a></li>
						<li><a href="#restaurace-na-konci-vesmiru" title="Restaurace na konci vesmíru">Restaurace na konci vesmíru</a></li>
						<li><a href="#zivot-vesmir-a-vubec" title="Život, vesmír a vůbec">Život, vesmír a vůbec</a></li>
						<li><a href="#sbohem-a-diky-za-ryby" title="Sbohem a díky za ryby">Sbohem a díky za ryby</li></a>
						<li><a href="#prevazne-neskodna">Převážně neškodná</a></li>
					</ul>
				</li>
				<li><a href="#autor" title="Douglas Adams">Autor</a></li>
				<li><a href="https://cs.wikipedia.org/wiki/Hlavn%C3%AD_strana" title="Encyklopedie veškerého vědění :-)" rel="external">Wikipedie</a></li>
			</ul>
		</nav>
	 </main>
	</header>

	<main>
		<section>
	   <h2>Obsah</h2>

			<article id="stoparuv-pruvodce-galaxii">
				<header>
					<h3>Stopařův průvodce Galaxií</h3>
				</header>
				<p>Kniha <em>Stopařův průvodce po galaxii</em> je pojmenovaná podle stejnojmenné encyklopedie všeho vesmíru a vědění. V mnoha ležérnějších civilizacích na Východním okraji naší Galaxie dokonce Stopařův průvodce nahradil <em>velkou Galaktickou encyklopedii<em> jakožto zdroj veškerého vědění a moudrosti, neboť – ač má mnoho mezer a spousta informací je pochybných nebo přinejmenším hodně nepřesných – má proti starší a prozaičtější příručce dvě nesporné výhody. Jednak je o něco levnější, <a především  na obálce velký vlídný nápis: NEPROPADEJTE PANICE.</p>
				<footer>
					Publikováno v roce 1979.
				</footer>
			</article>

			<article id="restaurace-na-konci-vesmiru">
				<header>
					<h4>Restaurant na konci vesmíru</h4>
				</header>

				<p>V tomto pokračování Zafod po své zkušenosti s Vírem totální perspektivy poručí počítači Srdce ze zlata, aby ho společně s Arturem, Fordem a Trillian dopravil někam, kde by se mohli najíst. Ocitnou se tak v Milliwayově Restaurantu na konci vesmíru. Později kvůli nedokončenému teleportovacímu zařízení je čtveřice rozdělena. Trillian a Zafod se vydávají hledat muže, který vládne vesmíru, zatímco Artur a Ford se stanou svědky založení lidské rasy na Zemi.</p>

				<footer>
					Publikováno v roce 1980.
				</footer>
			</article>

			<article id="zivot-vesmir-a-vubec">
				<header>
					<h3>Život, vesmír a vůbec</h3>
				</header>
				<p>Děj knihy navazuje na <em>Restaurant na konci vesmíru</em>, a točí se kolem vražedných robotů z planety Krikkitu. Kromě šestice postav známých z předchozích dílů se zde poprvé objevuje Agrajag a Wowbagger Táhnoucísedonekonečna.</p>
				<footer>
					Publikováno v roce 1982.
				</footer>
			</article>

			<article id="sbohem-a-diky-za-ryby">
				<header>
					<h3>Sbohem a díky za ryby</h3>
				</header>

				<p>Čtvrtá část bravurní parodie na sci-fi, která je dnes již klasickým dílem. Ve vesmíru se může stát cokoliv a tak i odstrkovaný tvor, jako je Pozemšťan Arthur Dent, může slavit svou hvěznou hodinu.</p>

				<aside>
					Název tohoto dílu je částí popěvku, který zpívali delfíni, než odlétli z planety Země před jejím zničením kvůli stavbě intergalaktické dálnice.
				</aside>

				<footer>
					<header>Dodatečné informace</header>
					Publikováno v roce 1984.
				</footer>
			</article>

			<article id="prevazne-neskodna">
				<header>
					<h3>Převážně neškodná</h4>
				</header>
				<p>Pátá a závěrečná část slavné trilogie, v níž Arthur Dent hledá tichou, nenápadnou planetu, kde by mohl v klidu strávit zbytek života.</p>
				<footer>
					Publikováno v roce 1992.
				</footer>
			</article>
		</section>

		<article id="autor">
			<h1>Douglas Adams</h1>
			<p>byl anglický spisovatel, dramatik humoristických rozhlasových pořadů a hudebník, který proslul knižní sérií Stopařův průvodce Galaxií.</p>
		</article>
	</main>

 </body>
 <footer>
		<p>Tato stránka vznikla na rychlo a za nepříznivých povětrnostních podmínek. Obsah je převzat z <a href="https://cs.wikipedia.org/wiki/Hlavn%C3%AD_strana" rel="external" title="Encyklopedie veškerého vědění :-)">Wikipedie</a> a dalších zdrojů.</p>
 </footer>
</html>

V HTML kódu je zaneseno 10 chyb. Pomocí validátoru všechny odhalte a opravte.