Je to název formátu a pravidel, ve kterých se kód stránky píše.
Různé prohlížeče ? HTML dokážou jednotně přečíst a zobrazit vzhled stránky.
Vznikl už v roce 1990 (starý 29 let) ve Švýcarsku a stále se modernizuje a rozšiřuje.
Existuje spousta editorů pro tvorbu HTML kódu. Na hodinách používáme PSpad, který je možné stáhnout ze stránky PSpad.
Existuje ve verzích jako instalátor, nebo portable (stačí nakopírovat .zip a rozbalit, bez nutnosti instalace).
Základní struktura stránky je jednotně daná a je potřeba ji vždy dodržet.
Základním prvkem kódu stránky je tzv. TAG, ten se uzavírá do špičatých závorek:
<html>
Tagy rozlišujeme na:
<html>
<head>
</head>
<body>
Tohle je můj první text.
</body>
</html>
Více tagů např. na https://www.jakpsatweb.cz/html/
Nastavují vlastnosti prvku (tagu) a uvádějí se vždy v prvním (oteváracím) tagu:
<p title="popis">text</p>
Například u obrázku (tag IMG) používáme atributy – src(zdroj obrázku), alt(alternativní text), title(popisek při najetí), rozměry(width, height).
Některé atributy jsou společné většině prvkům (align, width, title)
Atribut style – říká se mu inline style - slouží k nastavení vzhledu aktuálního prvku.
Existuje několik způsobů, jak styly používat, ukážeme si je později, základní stylování jednoho prvku je pomocí artributu style.
Zápis: název stylu: hodnota; (středník na konci slouží k oddělení více stylů v jednom atributu)
Např.: color: blue;
Zápis atributu inline stylu u prvku: style=“color:blue;“
Výhodou je možnost definovat jeden styl pro různé prvky stránky a zároveň jsou styly pohromadě.
Zpravidla v hlavičce (ale není nutnost) se definují jako:
<style>
</style>
Uvnitř se zapisují styly pro konkrétní prvky:
Prvek{
styl:hodnota;
}
Obsah souboru je stejný jako u stylů v tagu style:
Prvek{
styl:hodnota;
}
Připojení souboru se styly se provede tagem link v hlavičce:
<link rel="stylesheet" href="style.css">
Více na https://www.jakpsatweb.cz/css/css-vlastnosti-hodnoty-prehled.html
Můžeme adresovat element samostatně:
p{}
nebo podle struktury:
body h1 span{}
Podle ID prvku…ID musí být jedinečné a je to atribut elementu:
<h1 id=“mainHeading“></h1>
Styl se pak zapisuje přez znak #
h1#mainHeading{}
nebo
#mainHeading{}
Podle třídy prvku. Ta se může opakovat a jeden prvek může obsahovat libovolné množství tříd…oddělují se mezerou a zapisují se
<p class=“bold centered red“></p>
Styly se pak zapisují pomocí znaku tečky
p.bold{
font-weight:bold;
}
.red{
color: red;
}
Tabulky v HTML mají specifickou strukturu tagů:
Příklad jednoduché tabulky s jedním řádkem a jednou buňkou:
<table>
<tbody>
<tr>
<td>
<p>obsah</p>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>obsah</th>
<th>obsah</th>
<th class="italic">obsah</th>
</tr>
<tr>
<td>obsah</td>
<td>obsah</td>
<td class="italic">obsah</td>
</tr>
<tr>
<td>obsah</td>
<td>obsah</td>
<td class="italic">obsah</td>
</tr>
</tbody>
</table>
<style>
table th{
font-style:italic;
color: blue;
}
.italic{
font-style:italic;
}
</style>
Využívá se toho, že buňky tabulky, které nemají definovanou velikost, se automaticky dopočítávají.
Pomocí tabulek je možné umísťovat prvky na střed horizontálně i vertikálně. Když dáme tabulce výšku i šířku na 100%, zaplní nám celou stránku a sloupce se rovnoměrně dopočítají:
<table border="1" style="width:100%; height:100%;">
Buňkám uvnitř pak můžeme nastavit výšku a šířku:
<td style="width:50%;height:50%;">
Můžeme otestovat tak, že vložíme do prostřední buňky tabulky 3x3 nějaký obsah.
Jak zarovnat obsah buňky? Standardně se zarovnává vlevo na střed. Jiného zarovnání dosáhneme nastavením následujících stylů u buňky:
test-align: left|center|right|justify
vertical-align:top|middle|botton
<table border="0" style="width:100%; height:100%;">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td style="width:50%;height:50%;vertical-align:top;background:#ccc;">
<h1>Nadpis</h1>
<p>Text obsahu</p>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table border="0" style="width:100%; height:100%;">
<tbody>
<td></td>
<td style="width:980px;;vertical-align:top;background:#ccc;">
<h1>Nadpis</h1>
<p>Text obsahu</p>
</td>
<td></td>
</tr>
</tbody>
</table>
<table border="0" style="width:100%; height:100%;">
<tbody>
<td style="width:20%"></td>
<td style="width:40%;;vertical-align:top;background:#ccc;">
<h1>Nadpis</h1>
<p>Text obsahu</p>
</td>
<td style="width:40%"></td>
</tr>
</tbody>
</table>
Známe 2 typy seznamů
Jednotlivé položky seznamu se uzavírají ro parového tagul <li> (list item)
Nečíslovaný seznam o 3 položkách je tedy:
<ul>
<li>Položka 1</li>
<li>Položka 2</li>
<li>Položka 3</li>
</ul>
HTML
<ul class="menu">
<li><a href="#">Položka 1</a></li>
<li><a href="#">Položka 2</a></li>
<li><a href="#">Položka 3</a></li>
</ul>
CSS
ul.menu{
list-style: none;
padding: 0;
margin: 0;
}
ul.menu li{
font-weight: bold;
display: inline;
}
ul.menu li a{
padding: 10px 15px;
color: #fff;
font-size: 18px;
background: #0033FF;
text-decoration: none;
}
ul.menu li a:hover{
color: #000;
background: #00FF33;
}
ul.menu li a:active{
color: #000;
background: #00FFFF;
}
Tag DIV je blokový párový tag, který vytváří neviditelné místo na stránce, které můžeme stylovat. Využívá se především při rozvržení stránky.
Označuje se také jako wrapper (div se třídou 'wrapper') a vytváří obalení hlavní obsahové části, podobně jako v předchozích hodinách layout pomocí tabulky.
K tomu se využívají následující CSS styly:
.wrapper{
width:100%; //stránka bude velká max jako okno prohlížeče
max-width:980px; //maximální šířka obsahové oblasti
margin: 0 auto; // pomocí margin:auto se vycentruje
}
Margin (vnější odsazení) i padding (vnitřní odsazení) můžeme zapisovat různými způsoby:
Používají se na vložení části kódu, která nemá být na webu vidět.
HTML
Komentáře se vkládají mezi znaky <!-- a -->
CSS
Slouží ke vložení poznámek do css kódu, ale nemá vliv na kód samotný
Pokud chceme mít vedle sebe více bloků, které vytvoří více sloupců, existuje více možností, jak toho dosáhnout.
Nejstarší způsob.
Když nastavíme prvku float:left|right|none, bude jakoby plavat po stránce a více blokových prvků se bude řadit vedle sebe, dokud bude místo, a když už nebude, budou pokračovat na dalším řádku.
Floatovat jde různé bloky, ale většinou se float řeší na DIV bloku a tím se zarovnává i obsah DIVu.
HTML
<div class="col"></div>
<div class="col col-40"></div>
<div class="col"></div>
CSS
div.col{
width: 20%;
background: #ddd;
height: 300px;
margin:10px;
float: left;
}
div.col.col-40{
width: 40%;
}
Pokud chceme floatování zrušit, použije se float:none;
Pokud chceme, aby prvek nepokračoval na stejném řádku, ale začínal na novém, použije se vlastnost clear:left|right|both.
Vlastnost clear udává, na které straně nemá prvek pokračovat v roku float, ale má být tato strana zase u okraje.
Využívá se toho, že se blokový prvek bude chovat jako řádkový, ale nechá si vlastnosti blokového, takže je možné nastavovat například odsazení, ale prvky se budou řadit za sebe na řádku, dokud bude místo.
Nejnovější způsob a zároveň nejpokročilejší. Prvky je možné do šířky stránky rozprostřít, definovat kolik se jich má ve stránce zobrazit, jak se mají zarovnat vertikálně i horizontálně a počítá i se zobrazením pro menší zařízení – mobily, tablety
Krásně popsáno na: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Existuje řada frameworků, které usnadňují práci a řeší spoustu HTML kódu za kodéra.
Ty lze buďto stáhnout, nebo na ně z našeho dokumentu pouze odkazovat a pak využívat jejich funkce. Konkrétní implementace je vždy na stránce frameworku popsána, stejně jako způsob použití jednotlivých komponent.
Framework můžeme využít například pro:
Aby byly stránky veřejně dostupné, musíme je umístit na internet. To můžeme udělat 2 způsoby:
U některého z poskytovatelů je nutné objednat doménu a hosting.
Je vlastně adresa, pod kterou se stránky zobrazují.
Standardně se kupují domény 2. řádu, ale existují poskytovatelé domén 3. řádu zdarma.
Je server, na kterém jsou soubory stránek umístěné.
Existuje velká řada poskytovatelů hostingů, stačí do vyhledávače zadat klíčová slova „hosting“ nebo „doména“. Existují různé akce pro doménu zdarma k hostingu, nebo hosting zdarma k doméně.
I to existuje a to na například na webu www.webzdarma.cz, kde je možné po registraci provozovat stránky pod doménou 3. řádu s vloženými reklamami, ale mimo tato omezení jsou stránky úplně zadarmo.
Soubory je potřeba na server hostingu nahrát.
K tomu se používá tzv. protokol FTP – file transfer protokol. Ten zajišťuje možnost kopírování souborů mezi serverem hostingu a vaším PC.
K tomu, abychom se k FTP mohli připojit, potřebujeme:
Tyto informace dostaneme po založení hostingu.
Existuje řada FTP klientů (Filezillla, TotalCommander, atd), případně je přímo v PSpadu integrována možnost se k FTP připojit. Některé hostingy umožňují soubory nahrávat přímo v administraci přez webové rozhraní.
1) V PSPadu v levé části klikněte na ikonku FTP a poté na první ikonku zásuvky (připojení)
2) Založte nové připojení
3) Zadejte přístup k FTP (viz výše)
4) Kliknetě na tlačítko připojit
Po připojení se v levém panelu objeví soubory ze serveru. Dvojkliknutím na soubor na serveru jej uprvujete. Poté stačí jen soubor uložit a ukládá se přímo na server a změna je ihned viditelná na adrese http://hubicka.wz.cz.