Podcast on HTML and CSS Fundamentals

Kapitoly

Co je to HTML?

Rychlá historie webu

Kdo určuje pravidla?

Anatomie HTML stránky

Základní stavební kameny

Obrázky a tabulky

Sémantika: Dejte obsahu smysl

Poslední dílky skládačky

The Language of Style

Who Wins the Style War?

Building the Layout

Summary and Goodbye

Přepis

Mia: Znáš to, otevřeš nějakou webovou stránku a… je prostě rozbitá. Obrázky jsou pryč, text je jeden velký zmatený blok bez formátování a odkazy jsou jen modrý podtržený text. Vypadá to jako internet z devadesátek.

Jack: Jo, to se stane, když se něco pokazí v úplném základu. A ten základ, ta kostra každé jednotlivé stránky na internetu, od Googlu po tvůj oblíbený e-shop, je přesně to, o čem si dnes budeme povídat.

Mia: Vítejte u Studyfi Podcast, kde rozebíráme složitá témata jednoduše. Dnes je na řadě HTML.

Jack: Přesně tak. HTML. Možná jste tu zkratku slyšeli, ale co to vlastně znamená? Znamená to HyperText Markup Language.

Mia: Dobře, to zní… technicky. Pojďme to rozebrat. Co je to „Markup Language“ – značkovací jazyk?

Jack: Super otázka. Představ si, že píšeš dokument ve Wordu. Máš nadpisy, tučný text, odstavce. Značkovací jazyk dělá to samé, ale pro webový prohlížeč. Používáš speciální značky, neboli „tagy“, kterými tomu textu dáváš strukturu a význam.

Mia: Takže místo tlačítka „Nadpis 1“ napíšu nějaký kód, který říká „tohle je hlavní nadpis“?

Jack: Přesně. A ten prohlížeč si to přečte a zobrazí to jako velký, výrazný nadpis. Říkáš mu, co je co. Tohle je odstavec, tohle je obrázek, tohle je seznam. HTML je vlastně takový architekt webové stránky.

Mia: A co ten „HyperText“ na začátku?

Jack: To je ta druhá klíčová část. Hypertext je jednoduše text, který obsahuje odkazy na jiné texty. To je ten základní princip celého webu – možnost prokliknout se z jedné stránky na druhou. Bez hypertextu by byl internet jen hromada izolovaných dokumentů.

Mia: Dobře, takže HTML nám dává strukturu a odkazy. Kde se to celé vzalo?

Jack: Musíme se vrátit do roku 1989. Týpek jménem Tim Berners-Lee pracoval v CERNu, což je evropská organizace pro jaderný výzkum. Měli problém – spoustu dokumentů a dat na různých počítačích, a potřebovali je nějak jednoduše sdílet.

Mia: Takže vynalezl internet, aby si mohli posílat výsledky experimentů?

Jack: Skoro! Vynalezl World Wide Web. A to je důležitý rozdíl. Spousta lidí si myslí, že internet a web je to samé, ale není.

Mia: Jaký je v tom rozdíl?

Jack: Internet je ta globální síť propojených počítačů – ta fyzická infrastruktura, ty kabely. Můžeš si to představit jako silniční síť. A World Wide Web je služba, která na té síti běží. Je to jako města, obchody a domy postavené podél těch silnic. Web používá internet, aby fungoval.

Mia: A Tim Berners-Lee tedy navrhl ten systém „domů a obchodů“ – webových stránek propojených odkazy?

Jack: Přesně tak. Vytvořil tři základní věci: první verzi HTML pro psaní těch stránek, protokol HTTP pro jejich přenos a URL adresy, abychom je našli. To byla revoluce.

Mia: Web se od té doby hodně změnil. Kdo teď rozhoduje o tom, jak má HTML vypadat? Kdo píše ta pravidla?

Jack: Původně to bylo trochu divoké, ale postupně se vytvořily dvě hlavní organizace. První je W3C, neboli World Wide Web Consortium. Založil ho sám Tim Berners-Lee.

Mia: To zní jako taková vláda webu.

Jack: Dalo by se to tak říct. Vydávali specifikace, jako třeba HTML 4. Ale pak se stala zajímavá věc. Lidé z velkých prohlížečů – Apple, Mozilla, Opera – měli pocit, že W3C je moc pomalé a teoretické. Chtěli něco, co řeší reálné problémy vývojářů.

Mia: A tak si založili vlastní klub?

Jack: V podstatě ano! Založili skupinu jménem WHATWG. A začali pracovat na tom, co se později stalo HTML5. Dnes je to tak, že právě WHATWG udržuje takzvaný „HTML Living Standard“.

Mia: Živý standard? To znamená, že se neustále mění?

Jack: Přesně tak. Už se nevydávají velké verze jednou za pár let. Standard se neustále drobně vylepšuje a aktualizuje. Je to mnohem pružnější. Ale tady je ta nejdůležitější věc pro každého, kdo se učí kódovat: nejdůležitější není to, co je napsané ve specifikaci, ale to, co reálně funguje ve všech hlavních prohlížečích.

Mia: Takže i kdyby standard něco umožňoval, pokud to Chrome nebo Firefox nepodporuje, je mi to k ničemu?

Jack: Přesně. Cílem je, aby tvoje stránka vypadala dobře pro všechny. Proto je podpora v prohlížečích naprosto klíčová.

Mia: Dobře, pojďme se podívat, jak taková HTML stránka vypadá zevnitř. Co je ten úplný základ?

Jack: Každý HTML dokument má stejnou základní kostru. Úplně na začátku je <!DOCTYPE html>. To je taková instrukce pro prohlížeč, která mu říká: „Hele, tohle je moderní HTML5 dokument, tak se podle toho zařiď.“

Mia: Rozumím, takový úvodní pozdrav.

Jack: Přesně. Hned potom přijde hlavní značka <html>, která obaluje úplně všechno ostatní. A uvnitř ní jsou dvě hlavní sekce: <head> a <body>.

Mia: Hlava a tělo. To zní logicky. Co je v hlavě?

Jack: V <head> jsou všechny meta-informace. Věci, které uživatel přímo nevidí na stránce, ale jsou důležité pro prohlížeč nebo vyhledávače. Například <title>, což je text, který vidíš v záložce prohlížeče.

Mia: Aha! Takže tam se nastavuje ten malý text nahoře v okně.

Jack: Správně. Taky tam jsou odkazy na externí soubory, jako třeba CSS soubory pro stylování, pomocí značky <link>. Nebo JavaScriptové skripty pomocí <script>. A taky různé <meta> značky, které obsahují třeba klíčová slova pro SEO nebo popis stránky.

Mia: Takže <head> je takové zákulisí, mozek operace.

Jack: Perfektní přirovnání. A <body>? To je jeviště. Všechno, co je uvnitř značky <body>, uživatel uvidí. Všechny nadpisy, texty, obrázky, tabulky, odkazy… prostě celý viditelný obsah stránky.

Mia: Pojďme se podívat na ty nejdůležitější značky, které bychom našli v <body>. Které bychom měli znát jako první?

Jack: Určitě nadpisy. Ty se značí jako <h1>, <h2> a tak dále až po <h6>. <h1> je ten nejdůležitější, hlavní nadpis stránky, a mělo by tam být jen jedno.

Mia: A pak klasický text?

Jack: Ten se dává do odstavců pomocí značky <p>. Další super důležitou věcí jsou seznamy. Máme nečíslované seznamy, <ul> jako unordered list, kde má každá položka jen odrážku. A pak číslované seznamy, <ol> jako ordered list, kde jsou položky očíslované.

Mia: A každá položka v seznamu, ať už je číslovaný nebo ne, se píše jak?

Jack: Každá položka se obalí do značky <li>, což znamená list item. Takže máš <ul> a v něm několik <li>. Jednoduché a velmi užitečné.

Jack: A samozřejmě, základ webu – odkaz. Ten se tvoří značkou <a>. Klíčový je atribut href, kam napíšeš adresu, kam má odkaz vést. Například <a href="https://www.google.com">Hledej na Googlu</a>.

Mia: Web by byl nuda bez obrázků. Jak se vkládají ty?

Jack: Na to máme značku <img>. Je trochu speciální, protože nemá uzavírací značku. Má dva velmi důležité atributy. První je src, což je zdroj – cesta k obrázku. A druhý, naprosto zásadní, je alt.

Mia: alt jako alternativní text?

Jack: Ano. To je text, který se zobrazí, pokud se obrázek z nějakého důvodu nenačte. Ale hlavně, je to text, který čtou čtečky obrazovky pro nevidomé uživatele. Takže alt text je klíčový pro přístupnost webu. Nikdy ho nevynechávejte!

Mia: To je skvělý tip. A co když potřebuju zobrazit nějaká data, třeba v tabulce?

Jack: Na to máme celou sadu značek. Základ je <table>. Uvnitř ní jsou řádky <tr>, table row. A v každém řádku jsou buňky <td>, table data. Pokud chceš mít záhlaví tabulky, použiješ <th> místo <td>, aby byl text tučný a vycentrovaný.

Mia: Mluvil jsi o tom, že HTML dává obsahu strukturu. Ale slyšela jsem i slovo „sémantika“. Co to znamená?

Jack: To je skvělé téma! Sémantika je o významu. Nejde jen o to, jak něco vypadá, ale o to, co to *je*. HTML5 přineslo spoustu nových značek, které přesně tohle dělají.

Mia: Můžeš dát příklad?

Jack: Jasně. Dřív lidi na všechno používali obecnou značku <div>. Byla to jen krabice bez významu. Dnes ale máme sémantické značky. Máš třeba <header> pro hlavičku stránky, <footer> pro patičku, <nav> pro hlavní navigaci, <main> pro hlavní obsah a <article> pro samostatný článek.

Mia: Proč je to důležité? Prohlížeč to přece může zobrazit stejně, ať už použiju <header> nebo <div>.

Jack: Vizuálně možná ano, ale pro stroje je v tom obrovský rozdíl. Vyhledávače jako Google lépe rozumí struktuře tvé stránky a můžou ji lépe zařadit. A opět, čtečky obrazovky pro nevidomé můžou uživateli říct: „Teď jsi v hlavní navigaci,“ nebo „Teď začíná hlavní obsah,“ což jim nesmírně usnadňuje orientaci.

Mia: Takže sémantika pomáhá jak robotům, tak lidem s postižením. To je skvělé.

Jack: Přesně tak. Používat správné značky pro správný účel je známkou profesionálního a moderního přístupu k tvorbě webu.

Mia: Zmínili jsme text, odkazy, obrázky. Co formuláře, kterými posíláme data?

Jack: Formuláře jsou klíčové pro interakci. Základ je značka <form>, která vše obaluje. Uvnitř ní pak používáš různé typy <input> prvků. Můžeš mít <input type="text"> pro jméno, <input type="email"> pro email nebo <input type="password"> pro heslo.

Mia: A tlačítko na odeslání?

Jack: To může být buď <input type="submit">, nebo elegantnější značka <button>. Možností je spousta, od zaškrtávacích políček po výběr data z kalendáře.

Mia: A co multimédia? Videa, zvuk?

Jack: Díky HTML5 je to dnes super jednoduché. Máme značky <audio> a <video>. Stačí jim dát zdroj souboru a prohlížeč se postará o zbytek. Už žádné složité pluginy jako dřív. Je to zabudované přímo v jazyce.

Mia: Takže když to shrneme, HTML je kostra, která dává webu strukturu a význam. Od jednoduchého odstavce textu až po složité formuláře a vložená videa.

Jack: Přesně. A i když se to může zdát jako spousta značek k zapamatování, ten základní princip je pořád stejný: obalit obsah značkou, která nejlépe popisuje, co ten obsah je. To je celé kouzlo HTML.

Mia: Díky moc, Jacku. Myslím, že teď je ten „rozbitý web“ z úvodu mnohem méně záhadný. Příště se podíváme na to, jak tuto kostru obléknout do hezkého kabátu.

Mia: Okay, so that covers the structure with HTML. But a website with just HTML is… well, it's pretty ugly.

Jack: It's the bare bones, for sure. And that's where our final topic, CSS, comes in. It's the artist that styles the skeleton.

Mia: CSS. Cascading Style Sheets. It sounds a bit intimidating.

Jack: It's simpler than you think. The basic syntax is: you pick a selector, then you give it a property and a value. That's it.

Mia: So a selector is like… pointing at an HTML element?

Jack: Exactly. You could select all paragraphs with 'p', or elements with a specific class using '.classname', or a unique element with an '#id'.

Mia: What if you have conflicting styles? Like, I say a paragraph should be blue, but then I also say it should be red?

Jack: Great question. That's where specificity comes in. Think of it like a hierarchy. An ID selector is the most powerful, followed by a class, and then a general element tag. So the most specific rule always wins.

Mia: So my unique ID tag will always get its way. Sounds a bit bossy.

Jack: It is! It's the boss of the style sheet.

Mia: And what about arranging things? How do you stop everything from just stacking on top of each other?

Jack: That's where the CSS Box Model and modern layout systems are key. Every element is a box with content, padding, a border, and a margin.

Mia: Like a picture in a frame with space around it.

Jack: Precisely. Then you use powerful tools like Flexbox or Grid to align those boxes. Flexbox is great for one dimension, like a row, and Grid is for two dimensions, like a gallery of photos.

Mia: This has been incredibly insightful, Jack. From the structure of HTML to the styling power of CSS.

Jack: The key takeaway is that they work together. HTML provides the content and structure, and CSS makes it look good and responsive on any device.

Mia: And on that note, that’s all the time we have for today on the Studyfi Podcast. Thanks for breaking it all down, Jack.

Jack: My pleasure, Mia. Happy coding everyone!