first commit
This commit is contained in:
Lukáš Kaňka
parent
4dbda382e0
commit
8897ff4c78
147
README.md
147
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 ``` <!-- text --> ```
|
||||
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í ```<něco>(podle toho co chcete zapsat) mezi tagy je text </neco> (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
|
||||
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html lang="cs-cz"> tímto nastavíme lokalizaci, na slovensku budou mít např: sk
|
||||
<head>
|
||||
<meta charset="utf-8"> 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
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kankys Project</title> 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
|
||||
</head>
|
||||
```
|
||||
|
||||
Zde je samotné tělo stránky, to co vídíme na webu je ohraničeno v body.
|
||||
```
|
||||
<body>
|
||||
<h1>Zde začíná tvůj Projekt!</h1>
|
||||
```
|
||||
<h3>Tagy</h3>
|
||||
|
||||
|
||||
Odstavce vytvoříme pomocí p.
|
||||
Pro lepší přehlednost kódu, po každém tagu začínáme novím řádkem.
|
||||
```
|
||||
<p> Zde je první odstavec </p>
|
||||
```
|
||||
br slouží odřádkování, za br uděláme mezeru.
|
||||
```
|
||||
<p> Druhý odstavec. Zde navíc máme odřádkování pomocí br. <br />
|
||||
```
|
||||
```
|
||||
<p> A třetí odstavec. A věta v něm. </p>
|
||||
```
|
||||
|
||||
|
||||
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.
|
||||
```
|
||||
<p> Pomocí tagu <strong>STRONG</strong> mohu psát tučně </p>
|
||||
```
|
||||
Výrazem em zapíšeme kurzívu.
|
||||
```
|
||||
<p> Pomocí tagu "em" <em>budeme psát kurzívou</em></p>
|
||||
```
|
||||
Text si podtrhneme pomocí u.
|
||||
```
|
||||
<p> Svůj text si můžete <u>podtrhnout</u> pomocí tagu u </p>
|
||||
```
|
||||
Text si můžete i přeškrtnout díky tagu s.
|
||||
```
|
||||
<p> Mám rád <s>tučné</s> zdravé jídlo. </p>
|
||||
```
|
||||
K zvýraznění slouží tag mark, automaticky zvýrazňuje žlutě.
|
||||
```
|
||||
<p> Pokud sděluji něco důležitého tak to <mark>žlutě zvýrazním.</mark></p>
|
||||
<p><strong><u><em> Kombinace tagu </em></u></strong></p>
|
||||
```
|
||||
|
||||
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.
|
||||
```
|
||||
<h1>Nadpisy v HTLM h1</h1>
|
||||
<h2>Nadpisy v HTLM h2</h2>
|
||||
<h3>Nadpisy v HTLM h3</h3>
|
||||
<h4>Nadpisy v HTLM h4</h4>
|
||||
<h5>Nadpisy v HTLM h5</h5>
|
||||
<h6>Nadpisy v HTLM h6</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.
|
||||
|
||||
<h3>Obrázky</h3>
|
||||
|
||||
|
||||
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.
|
||||
```
|
||||
<p>
|
||||
<img src="obrazky/arch-logo.webp" alt="Arch Linux logo">
|
||||
</p>
|
||||
```
|
||||
|
||||
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.
|
||||
```
|
||||
<h4>Obrázek Arch Linux zmenšený</h4>
|
||||
|
||||
|
||||
<p>
|
||||
<img src="obrazky/arch-logo.webp" width="80" alt="Arch Linux logo zmenšené">
|
||||
</p>
|
||||
```
|
||||
|
||||
<h3>Odkazy</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Běží na Gitea Verze: 1.17.3 Strana: 52ms Šablona : 7ms Licence API Webové stránky
|
||||
Loading…
Reference in New Issue
Block a user