Jak začít s webovým designem – kompletní průvodce
Zjisti, jaké základní principy potřebuješ znát, než začneš s tvorbou svého první webové stránky…
Čti víceHTML a CSS – základy kódu pro web
Pochop, jak funguje HTML a CSS. Jednoduchý úvod do programování webu pro ty, kdo nemají zkušenosti. Bez zbytečné složitosti.
Co je to vlastně HTML a CSS?
Když se podíváš na web, vidíš barevný obsah, která se pohybuje, které se dá klikat. Ale co stojí za tím všechm? Odpověď je jednoduchá — HTML a CSS. Nejsou to věci, kterými se střihneš. Nejsou to ani nějaké složité vědoucí. To jsou prostě dva programovací jazyky, které dohromady vytváří skoro každý web, který vidíš.
HTML vám řekne, co má být na stránce. Nadpis tady, odstavec tam, obrázek támhle. CSS pak říká, jak to všechno vypadá — barvy, velikost písma, rozestupy. Jsou to dva nejjednoduší jazyky, se kterými můžeš pracovat. A když je pochopíš, máš otevřenou dveř k tomu, aby sis vytvořil vlastní web.
HTML — struktura webu
HTML znamená HyperText Markup Language. Zní to snad složitě, ale
ve skutečnosti je to jen sada značek — tagů — kterými řekneš
prohlížeči, co má zobrazit. Každý tag má konkrétní účel. Tag
<h1>
je nadpis. Tag
<p>
je odstavec. Tag
<img>
vkládá obrázek. Prostě, tag ti řekne, co to je.
Když napíšeš HTML, vytváříš strukturu. Struktura je důležitá,
protože říká prohlížeči i vyhledávačům, co je důležité. Nadpis
musí být v tagu
<h1>
nebo
<h2>
, ne jen velký text. Seznamy musí být v tagu
<ul>
nebo
<ol>
. Formuláře musí být v tagu
<form>
. Tato struktura isn’t jen něco hezký — je to věc, která dělá
web funkční.
CSS — vzhled a design
CSS znamená Cascading Style Sheets. To je jazyk, kterým říkáš, jak by měly věci vypadat. HTML ti řekne, že tu je nadpis. CSS ti řekne, že ten nadpis bude modrý, velkého písma, se speciálním fontem. CSS ti řekne, jak daleko od okraje by měly být prvky. CSS ti řekne, co se stane, když na něco najedeš myší.
Bez CSS by každá stránka vypadala stejně — prostě černý text na bílém pozadí. S CSS? To je magie. Můžeš si vzít všechny ty HTML prvky a učinit je pěknými, uspoádanými, zajímavými. Barvy, fonty, animace, rozestupy — všechno je to CSS. A není to těžké. Pokud umíš psát čísla a barvy, zvládneš CSS.
Jak se to dá naučit?
Nejlepší způsob, jak se naučit HTML a CSS, je začít s něčím velmi jednoduchým. Vytvoř si prostě jednu stránku. Jen jednu. Naps do ní nadpis, pár odstavců a obrázek. Pak si vezmi CSS a urči barvy, velikost písma, okraje.
01
Nauč se HTML tagy
Nejdůležitější tagy jsou
<h1>
až
<h6>
pro nadpisy,
<p>
pro odstavce,
<a>
pro odkazy,
<img>
pro obrázky. To je asi 80 procent toho, co budeš potřebovat.
Zbytek se naučíš později.
02
Pracuj s CSS vlastnostmi
Zaměř se na základní vlastnosti:
color
pro barvu textu,
background-color
pro barvu pozadí,
font-size
pro velikost písma,
padding
a
margin
pro okraje. Tři čtyři vlastnosti ti dají 90 procent toho, co
potřebuješ.
03
Zkušenost je nejlepší učitel
Nejlepší způsob, jak se naučit, je zkoušet věci. Vezmi si jednoduchý HTML soubor, přidej nějaký CSS, podívej se, co se stane. Když se ti něco nelíbí, změň to. To je to, co dělají všichni vývojáři.
Proč je to důležité vědět?
Může se ti to zdát zvláštní, ale HTML a CSS jsou všude. Když ses na web, vidíš výsledek — krásný, funkční web. Ale pod tím všechnem je HTML a CSS. Všechny sociální sítě jsou postaveny na HTML a CSS (a spoustě dalších technologií). Všechny e-shopy. Všechny noviny. Všechny blogy. Všechno.
Pokud se chceš naučit tvořit web, musíš znát HTML a CSS. Není to volba. Je to základ. Je to jako znát psaní, když chceš psát knihy. Bez toho se to nedá. Ale když to jednou pochopíš, můžeš si vytvořit cokoliv chceš. Osobní web, blog, portfolio, malý e-shop. Všechno je to jen kombinace HTML a CSS.
Začni dnes
HTML a CSS nejsou těžké. Nejsou. Jsou to jen dva jednoduché jazyky, kterými se řekne prohlížeči, co má zobrazit a jak má vypadat. Když je pochopíš — a to se stane už brzy, pokud budeš cvičit — budeš moct tvořit web sám. Nebudeš muset čekat na někoho dalšího. Budeš to ty.
Tak na co čekáš? Vezmi si editor (stačí Poznámkový blok!), napiš si své první HTML. Podívej se, jak to vypadá. Pak si vezmi CSS a udělej z toho něco pěkného. To je všechno. Zbytek se naučíš cestou. A věř mi, je to zábava.
Zpět na základy webového designuDůležité upozornění
Tento článek je určen pouze pro vzdělávací účely. Jedná se o obecný úvod do HTML a CSS. Konkrétní implementace a best practices se mohou lišit v závislosti na vašem projektu a cílové skupině. Doporučujeme si ověřit nejnovější standardy a guidelines W3C pro nejpřesnější a aktuální informace o webovém vývoji.
Podobné články
