WEB Desing

HTML atribúty

V tejto kapitole jazyku HTML si povieme, ako používať atribúty v jednotlivých HTML elementoch. Prejdeme si základné skupiny atribútov, ich syntax v jazyku HTML a ,

Čo sú to HTML atribúty?

HTML atribúty sú v podstate nastavenia (parametre), ktorými vieme upraviť správanie HTML tagov. Napríklad HTML tag <a> ktorý slúži na vloženie odkazu, môže mať niekoľko parametrov pre: adresu odkazu, spôsob otvorenia odkazu (v novom okne alebo tom istom okne) textový titulok a podobne. Niektoré atribúty sú globálne (vieme ich použiť vo všetkých elementoch), niektoré sú špecifické len pre zvolenú množinu elementov či dokonca špecifické len pre jeden konkrétny element.

otvárací tag < >

uzatvárací tag </ >

Príklad dokumentu HTML

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>

<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

<!DOCTYPE html> – Deklarácia DOCTYPE je pokyn pre webový prehliadač o tom, v akej verzii HTML je stránka napísaná.

<meta charset=“utf-8″> je značka HTML, ktorá umožňuje používať emotikony a iné znaky, ktoré nie sú v tradičnej znakovej sade ASCII na vašej webovej stránke.

<link href=“CSS/style2.css“ rel=“stylesheet“ type=“text/css“> prepojenie na vašu zložku CSS

H1 H2 H3 H4 H5 H6 – nadpisy

p – paragraph. – odstavec – text

HTML - obrázky

Obrázky môžu zlepšiť dizajn a vzhľad webovej stránky.

<img src=“img/názov obr.jpg“>

img src – je kód

img src=“ img – názov súboru kde máte uložené obrázky, /za lomítkom treba uviesť meno obrázku a jeho formát“

Pokiaľ chcete, aby sa obrázok rozklikom musíte použiť kód na odkaz/link <a> vyzerá to takto:

<a href=“img/názov-obrázku.jpg“> toto je link/odkaz na obrázok
<img src=“img/názov obrázku.jpg“ > vloženie obrázku
</a> ukončenie linku/odkazu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Syntax:

Každý DIV – kontajner by mal mať svoj názov, tak aby ste mohli každému v CSS priradiť svoje charakteristiky.

<DIV ID=“názov-pre tento div-kontajner“>

HTML - značka - DIV a ako ju upraviť pomocou CSS

Element delenia nazývaný „div“, je špeciálny prvok, ktorý vám umožňuje na stránke zoskupiť prvky s podobným obsahom. Môžete ho použiť ako všeobecný kontajner na priradenie obsahu rovnakého typu.

Prvok <div> je jedným z najpoužívanejších.

V konečnom dôsledku ho takmer vždy použijete na úpravu obsahu alebo manipuláciu s jeho obsahom.

DIV – bude primárne zoskupovať podobný obsah, aby ste ho mohli jednoducho upravovať. Dobrým príkladom je použitie prvku div na spojenie rôznych častí stránky. Hlavičku, navigačný panel, sekcie a pätu môžete vložiť do jedného prvku div, aby ste pre ne mohli nastaviť rovnaký štýl.

Samotný prvok div nemá priamy vplyv na prezentáciu obsahu, pokiaľ nedefinujete štýl.

V CSS vyberiete div cez triedu a potom nastavíte výšku a šírku a iné charakteristiky pre obsah v DIV – kontajner.

ODKAZY V HTML

Tag <a>
Text, ktorý slúži ako odkaz, je obalený párovým tagom <a>:

<a>Text odkazu</a>

Aby to klikalo, musí tam byť navyše ešte href:

Href=
Tag <a> má dôležitý atribút „href“, totiž cieľ. Href obsahuje adresu, podľa ktorej prehliadač pozná, na akú stránku sa má prepnúť, keď sa na odkaz klikne.

<a href=„http://www.zoznam.sk“>Zoznam</a>

Toto je odkaz na Zoznam, hodnotou „href“ je adresa „http://www.zoznam.sk“. Zobrazí sa takto: Zoznam

Iný príklad:

<a href=“https://www.jakpsatweb.cz„>Ako písať web</a>

Odkaz môže fungovať aj ako preklik na inú časť stránky

PRÍKLAD:

<a href=“#sekcia1>

vtedy použijeme #

Odkaz sa nachádza v MENU - moderné umenie

HTML - odkaz na sekciu1

KONTAJNER (DIV) - na ktorý je spravený odkaz

ZOZNAM - MENU

CSS

CSS je jazyk šablóny so štýlmi, ktorý používate na to, aby bola štruktúra prezentovateľná a pekne rozložená.

V prvom rade musíte prepojiť HTML s CSS odkazom v HTML v počiatočnej hlave na začiatku

<link href=“CSS/style2.css“ rel=“stylesheet“ type=“text/css“>

Zátvorky sa používajú { } tieto. Pokiaľ kód v HTML nemá svoj ID tak začínate názvom

body { …. }

Pokiaľ má svoj ID tak začínate # – hashtag

#sekcia1 { ….. }

Jednotlivé hodnoty sú zapísané v anglickom jazyku a sú intuitívne, čo znamená, že width: 70% je 70% šírka zformátu obrazovky

Na tejto stránke si môžete nájsť jednotlivé základné kódy k CSS a aj k HTML stačí si vľavo kliknúť na to čo potrebujete:

https://www.w3schools.com/css/default.asp

CLASS - element

Class element

v CSS nastavíte skupinu vlastností, ktorá bude platiť zakaždým ked použijete meno v HTML pri kóde. v CSS – ID začína # a úro class . (bodkou)

príklad:

.importatnt { color: #e84646 }

tu sme zadali k skupine important farbu

Potom môžeme pridávať tento class important k čomu budeme porebovať

napr. k nadpisu: <h1 class=“important“>

Robí sa to aj kvôli tomu, že keď klient zmení názor na farebnosť stránky, jednou zmenou v CSS – sa zmenia všetky ostatné elementy pod touto – class important

BUTTON

HTML:

<button>Modern</button>
<button>contemporary</button>

Tieto dva kódy vám vytvoria dva buttony. Potom im treba dať dizajn v CSS

CSS:

btn { background: #ccc;
border: 1px solid #bfbfbf;
font-size: 16px;
padding: 6px 12px;
border-radius: 4px; cursor: pointer; }

padding: prvá je pre hore a dole a druhá pre ľavú a pravú stranu

border radius vám zaoblí strany

cursor: pointer vám spravý ručičku namiesto šípky ked prejdete po buttons

Pokiaľ chcete aby každý butten mal iný aspekt, treba si spraviť napríklad class na každý čo by vyzeralo takto

HTML

<button class=“btn btn-modern“>modern</button>

<button class=“btn btn-contemporary“>contemporary</button>

CSS – zmeníme napríklad každý buttn bude mať inú farbu

.btn-modern { color: #fff;

background: #5CBB5C;

border: 1px solid #4CAE4C; }

.btn-contemporary { color: #fff:

background: #D9534F;

border: 1px solid #D43F3A; }