diff --git a/README.md b/README.md index e69de29..ef02fc8 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,147 @@ + +Když si nebudeš jistý jaký použít Tag podívej se na náš hint https://git.archoslinux.cz/kankys/html_hint +Základy html, toto je začátečnický tutorial na první statický web. +* Později až si vytvoříme vlastní web tak si ho nahrajeme na internet a naučíme se dělat k vaší stránce pod stránky. Zatím budeme pracovat u sebe v počítači. +* Pokud si dovašeho projektu chcete udělat poznámku zapíšete ji do ``` ``` + Vaši první stránku si uložíte jako index.htlm. +* Já používám na tvorbu webu IDE Brackets https://brackets.io/ +* Doporučuji si nainstalovat plugin HTLM SKELETON co vám sám vypíše strukturu vaši stránky. +* Svůj projekt si pravidelně ukládejte pomocí CTRL-S. +* Váš první projekt vždy začínejte tím že si vytvoříte soubor index.htlm . Nebo v programu v kterém budete tvořit web, + dáte založit, vytvořit nový projekt (všude se to může jmenovat trochu jinak). Než začnete psát svůj web, tak tento projet než budete + mít jedinou řádku kódu uložíte jako index.htm. Pak už můžete začít psát. Tímto postupem řeknete vašemu IDE (programu napsaní webu) + že se jedná o webovou stránku. A on se přizpůsobí tomuto projektu. +* htlm je tzv. značkovací jazyk a skládá se ze značek, tzv. tagů. +* Tagy začínají ```(podle toho co chcete zapsat) mezi tagy je text (a zde je konec tagu)"```. Vše zapisujeme do tagu. +* Tag zapíšeme pravý alt+? a al+:. * je pravý alt+--- klávesa hned vedle otazníku. +* Atributy jsou obsah v tagách, například: ```lang="cs-cz"```, hodnotu atributu můžeme zapsat do "". +* K náhledu vaší práce můžete v Brackets použít vpravo nahoře ikonu blesku. + +* Náš nový projekt začne hlavičkou + +``` + + tímto nastavíme lokalizaci, na slovensku budou mít např: sk + + utf-8 je kódování a informace pro prohlížeče, utf-8 musí podporovat vaše + IDE v čem děláte web + + Kankys Project zde napíšeme název vašeho projektu, pak ho uvidíte nahoře v záložce jak otevřete projekt v prohlížeči + +``` + + Zde je samotné tělo stránky, to co vídíme na webu je ohraničeno v body. +``` + +

Zde začíná tvůj Projekt!

+``` +

Tagy

+ + + Odstavce vytvoříme pomocí p. + Pro lepší přehlednost kódu, po každém tagu začínáme novím řádkem. + ``` +

Zde je první odstavec

+``` + br slouží odřádkování, za br uděláme mezeru. + ``` +

Druhý odstavec. Zde navíc máme odřádkování pomocí br.
+``` +``` +

A třetí odstavec. A věta v něm.

+``` + + + Tagy, zde si vypíšeme základní tagy pro úpravu textu. +U tagu musíme dodržovat jejich pořadí při ukončení, když jich chcete použít více. +Pozor některé tagy mohou způsobit chybu při jejich kombinaci, méně je někdy více. +Pokud si chcete zvýšit SEO tak používejte STRONG, když je potřeba zdůraznit název, jméno, +důležitou informaci. Prohlížeče upřednostňují strong, ale používejte ho z rozmyslem. + Pokud potřebujeme něco označit tučně, použijeme v tag strong. + ``` +

Pomocí tagu STRONG mohu psát tučně

+``` + Výrazem em zapíšeme kurzívu. + ``` +

Pomocí tagu "em" budeme psát kurzívou

+``` +Text si podtrhneme pomocí u. +``` +

Svůj text si můžete podtrhnout pomocí tagu u

+``` +Text si můžete i přeškrtnout díky tagu s. +``` +

Mám rád tučné zdravé jídlo.

+``` +K zvýraznění slouží tag mark, automaticky zvýrazňuje žlutě. +``` +

Pokud sděluji něco důležitého tak to žlutě zvýrazním.

+

Kombinace tagu

+``` + + Další důležitou věcí co je potřeba umět v základech jsou nadpisy. +Nadpisy máme šesti typů dle velikosti. +Zapisují se do tagu a to jako h1 až h6. +Vždy musí být v tagu, začínat i končit stejným h, nejde kombinovat h2 a h3. +``` +

Nadpisy v HTLM h1

+

Nadpisy v HTLM h2

+

Nadpisy v HTLM h3

+

Nadpisy v HTLM h4

+
Nadpisy v HTLM h5
+
Nadpisy v HTLM h6
+``` + + Tak základní jednoduchou stránku umíme, ale co by byl web bez obrázku. +Důležitá věc, obrázky nebo složku z obrázky, které budete chtít dát na web, vložte do stejné složky kde máte index.html. +v budoucnu až by jsme nahrávali vaši stránku na web tak by se obrázky nezobrazili. Nebo i pokud by jste pracovali na více počítačích +a přenášely pouze složku z index.html také by vám to nešlo. + +

Obrázky

+ + + Obrázky vkládáme pouze do jednoho tagu takzvaně nepárovaného. +Obrázek vložíme do tagu img a použijeme atributy: +src: cesta k obrázku +alt: popis obrázku, ten je velmi důležitý hlavně pro lidi, kteří jsou znevýhodněni zrakovou vadou (k tomuto tématu se dostaneme později, jak +co nejlépe nastavit web pro tyto lidi a bude tomu věnovaný samostatný tutoriál) a nebo jen lidi kteří používají třeba čtečku textu v mhd. + + Do složky, kde máme web vytvoříme složku obrázky a do ní vložíme obrázek co chceme vložit do své stránky. +Pak už jen nastavíme cestu k obrázku a popis obrázku. +Obrázky vkládejte JPEG, PNG nebo WepP u jiných formátu nedokážu zaručit korektní zobrazení. +Cestu k obrázku nezadávejte celou kde ji máte na disku, pouze zadejte cestu obrázky/a obrázek. +Vaše stránka kouká pouze do složky kde máte index.html +Také nedoporučuji vkládat obrázky jako odkaz někam na internet. Může se stát že by je někdo smazal. +``` +

+ Arch Linux logo +

+``` + + U obrázku můžeme měnit rozměry pomocí atributů width a height. +Hodnoty se zadají buď jako pixeli "10" nebo procenta "10%" +Pokud zadáte jen jeden atribut druhý se automaticky dopočítá. +Pozor obrázek se nezmenšuje, ale pouze zobrazuje menší či jinak rozměrově upravený!!! +Pokud obrázek chcete zmenšit protože je veliký, musíte použít na to specializovaný program. +``` +

Obrázek Arch Linux zmenšený

+ + +

+ Arch Linux logo zmenšené +

+``` + +

Odkazy

+ + + + + + + + + + + +Běží na Gitea Verze: 1.17.3 Strana: 52ms Šablona : 7ms Licence API Webové stránky \ No newline at end of file