Web
studio i1
Internetové stránky, eshopy a SEO
Web
studio i1
Internetové stránky, eshopy a SEO
Značkovací jazyk HTML5/CSS3 je základní jazyk pro tvorbu webových stránek. Pomocí tohoto jazyka je možné vytvářet statické HTML stránky vč. grafického zpracování pomocí kaskádových stylů CSS3. HTML statické stránky mohou být responzivní, ale pro responzivní webové stránky je v dnešní době vhodnější používat framework Bootstrap 4, který nabízí již plnou responzivitu pro www stránky.
Technologie Bootstrap 4 nabízí plně responzivní stránky, které se budou zobrazovat na všech mobilních zařízeních.
HTML (Hyper Text Markup Language) je značkovací jazyk pomocí kterého je možné vytvářet statické webové stránky. Součástí tohoto jazyka jsou kaskádové styly CSS3, pomocí kterých je možné vytvářet webdesign webových stránek.
HTML dále popisuje strukturu webové stránky, skláda se z řady elementů, které prohlížeči sdělují, jak se má zobrazit obsah uživateli, který si prohlíží internetové stránky. Jednotlivé HTML elementy popisují části obsahu webových stránek, jako je nadpis nebo odstavec textu.
Technologie Bootstrap 4 nabízí plně responzivní stránky, které se budou zobrazovat na všech mobilních zařízeních.
CSS3 jsou kaskádové styly a jsou součástí jazyka HTML. Pomocí kaskádových stylů lze vytvořit webdesign webových stránek. To znamená, že pro web stránky je možné vytvořit grafiku ve formě typu fontu, barevných rámečků elementů na stránce a především uspořádání jednotlivých elementů na webové stránce. Samotné CSS styly obsahují poměrně velké množství vlastností, které je možné nastavit pro každý element na stránce.
Technologie Bootstrap 4 nabízí plně responzivní stránky, které se budou zobrazovat na všech mobilních zařízeních.
Každý dokument HMTL musí začínat deklarací <!DOCTYPE html>, která prohlížeči internetových stránek sděluje, o jaký typ dokumentu se jedná. HTML dokument se poté skládá z několika hlavních značek, které by měl každý HTML dokument obsahovat, aby se jednalo o správnou sémantiku HTML kódu, která pak může podpořit lepší vyhledatelnost ve vyhledávačích. To znamená, že správná struktura HTML stránky může zajistit lepší SEO optimalizaci webových stránek.
Hlavní elementy HTML stránky.
Element <html> je hlavním elementem HTML web stránky.
Element <head> obsahuje meta informace o stránce.
Element <title> specifikuje název internetové stránky.
Element <body> obsahuje viditelnou část stránky v prohlížeči.
Element <h1> definuje hlavní nadpis.
Element <p> definuje odstavec na stránce.
HTML elementy jsou definovány od otevírací značky k uzavírací značce, vč. obsahu mezi značkami. HTML elementy, které nemají žádný obsah jsou nazývány prázdné elementy. Prázdné elementy nemají uzavírací značku. Např. element <br>, který specifikuje zalomení řádku.
Technologie Bootstrap 4 nabízí plně responzivní stránky, které se budou zobrazovat na všech mobilních zařízeních.
Všechny HTML dokumenty musí začínat deklarací <!DOCTYPE html>.
Samotný dokument musí začínat značkou <html> a je zakončen uzavírací značkou </html>.
Viditelná část HTML dokumentu je mezi značkami <body> </body>.
HTML nadpisy jsou definovány značkami <h1> až <h6>. Značka <h1> označuje hlavní nadpis a další nejdůležitější nadpisy jsou h2 a h3.
<h1>Toto je nadpis h1</h1>
HTML odstavce jsou definovány značkou <p>
<p>Toto je odstavec</p>
HTML odkazy jsou definovány značkou <a> a obsahuje atribut „href“, který specifikuje umístění odkazu.
<a href=“http://www.nazevstranky.cz“>Toto je odkaz</a>
HTML obrázky jsou definovány značkou <img> a obsahují atribut „src“, který specifikuje zdroj. Dále atribut „alt“, který specifikuje alternativní text obrázku a dále atributy „width“ a „height“, které specifikují šířku a výšku.
<img src=“obrazek.jpg“ alt=“obrazek“ width=“200“ height=“300“>
HTML tlačítka jsou definována značkou <button>
<button>klikni</button>
HTML seznamy jsou definovány značkou <ul>, která specifikuje neuspořádaný seznam nebo značkou <ol>, která specifikuje uspořádaný seznam. Mezi tyto značky se vkládá ještě značka <li>.
<ul>
<li>Text<li>
</ul>
Technologie Bootstrap 4 nabízí plně responzivní stránky, které se budou zobrazovat na všech mobilních zařízeních.
<html>
<head>
<title>Název stránky</title>
</head>
<body>
<h1>Toto je hlavní nadpis h1</h1>
<p>Toto je odstavec</p>
<p>Toto je jiný odstavec</p>
</body>
</html>
Technologie Bootstrap 4 nabízí plně responzivní stránky, které se budou zobrazovat na všech mobilních zařízeních.
Sada pravidel CSS obsahuje selektor a deklarační blok.
Selektor poukazuje na HTML element, který by se měl stylovat.
Deklarační blok je uvnitř složených závorek a obsahuje jednu nebo více deklarací, které jsou odděleny středníky.
Každá deklarace obsahuje název CSS vlastnosti a hodnotu, která je oddělena dvojtečkou.
h1 {color:blue; font-size:10px;}
CSS deklarace je vždy zakončena středníkem a deklarační blok je vždy obalen složenými závorkami.
V následujícím příkladu je text v <p> odstavcích stylován modrou barvou a text je zarovnán na střed.
<!DOCTYPE html>
<html> <head>
<style>
p {color: red;
text-align: center;}
</style>
</head>
<body>
<p>Hello World!</p>
<p>Tento odstavec je stylován CSS styly. </p>
</body> </html>
Potřebujete vytvořit webové stránky pro vaše služby, ale nevíte jak to všechno probíhá? Pak si můžete níže přečíst více informací.