HTML a CSS – Tvorba Webu (Návod)

HTML5 – CSS3

Tento návod sú len povrchne základy.

Editor web stránky sa volá sublime text 3
_______________________________________________________________________________________________________________________________
HTML5

základný kód HTML5 stránky

<!DOCTYPE html>

<html>

<head lang=“sk„>

<title>Názov stránky</title>
<meta charset=“utf-8″/>
<link rel=“stylesheet“ href=“css/main.css“>

</head>

<body>

</body>

</html>

_______________________________________________________________________________________________________________________________

<html></html> – obal pre html jazyk

<head></head> – hlavička stránky, kde sa zapisuje jazyk ,meno záložky, prepojenie css s html

<body></body> – telo stránky kde sa zapisuje všetko čo vidíme na stránkach

<h1></h1> – Nadpis a pod nadpis tento tag sa dá použiť h1,h2,h3,h4,h5,h6

<p></p> – tento tag funguje na text, zapisujú sa do neho dlhé texty

<br> – riadok sa zlomí na pokračuje pod riadkom

<ul></ul> – bodkový zoznam píše sa do neho li tag

<ol></ol> – očíslovaný zoznam píše sa do neho li tag

<li></li> – slova v zoznamoch

<strong></strong> – tučne písmo

<em></em> – šikmé písmo

<u></u> – podčiarknutie slova alebo vety

<strike></strike> – prečiarknutie slova alebo vety

<sub></sub> – písmo je posunuté dole ako napr H2O dvojka je posunutá dole

<sup></sup> – písmo je posunuté dole ako napr m2 dvojka sa posunie hore

<q></q> – slovo alebo veta je v úvodzovkách

<a></a> – odkazový tag odkazuje na web stránky alebo na svoje vlasnté stránky
(<a href=“index.html“>Toto odkazuje na moju html stránku</a>)
(<a href=“www.google.com“>Toto odkazuje na google</a>)

<img/> – tag pre obrázok na web stránke
(<img src=“images/Wolf.png“ />)

odkaz pomocou obrázku
(<a href=“index.html“><img src=“images/Wolf.png“/></a>)

<dl></dl> píše sa do neho dt a dd tag

<dt></dt> – veta ktorá bude tučným písmom niečo ako otázka

<dd></dd> – veta ktorá bude pod tučne vyznačenou vetou ako odpoveď

<audio></audio> – tag pomocou ktorému mame na web stránke hudbu píše sa do neho source tag
(controls) – na stránke budeš mať audio dáš play a audio ti hra
(autoplay loop) – na stránke hra audio ale nedá sa stopnúť hra v pozadí
(controls autoplay loop) – na stránke sa automaticky zapne audio a môžeš ho stopnúť

<video></video> – tag pomocou ktorému mame na web stránke video píše sa do neho source tag
(controls) – na stránke budeš mať video dáš play a video ti hra
(controls autoplay loop) – pri zapnutí stránky sa automaticky zapne video

<source/> – do tohto tagu sa zapisuje úložisko hudby alebo videa
(<source src=“Video/minecraft.mp4″ type=“video/mp4″/>)
(<source src=“Audio/minecraft.mp3″ type=“video/mp3″/>)

<div></div> – je to niečo ako kategórie pre text

<span></span> – pri úprave jedného slova alebo vety použijeme span

class=“ľubovolná classa“ – určíš ľubovolnému tagu, classu a tým môžeš individuálne určovať slovám a vetám farby a štýly
(v CSS sa zapisuje class takto)

.meno classi {
color:red;
font-size:20px;
}

id=“ľubovolne id“ – určíš ľubovolnému tagu ID a tým môžeš individuálne určovať slovám a vetám farby a štýly
(v CSS sa zapisuje ID takto)

#meno ID {
color:red;
font-size:20px;
}
_______________________________________________________________________________________________________________________________
CSS3

úprava tagu <a></a>
– a – je ako vyzerá základný link na stránke
– a:hover – keď prejdete myškou na link tak ako bude vyzerať
– a:active – keď kliknite tak aké úpravy budu
– a:visited – keď je použitý link tak aký bude upravený

úprava tagu <ul></ul>
– list-style-type: toto zmení dizajn postupu listu napr: disc,circle,square,decimal
– list-style-image:url(Obrázok.png); miesto značiek tam bude obrázok
– line-height: zmeníte si odstup od slov v zozname napr: :600%;

text
– color – určuje farbu textu
– text-decoration – dekorácia pre text napr: none,underline,overline,line-through
– text-align – určuje na akej strane je text :center,left,right

padding
– padding-top – určuje šírku horného vnútorného okraja
– padding-bottom – určuje šírku dolného vnútorného okraja
– padding-left – určuje šírku ľavého vnútorného okraja
– padding-right – určuje šírku pravého vnútorného okraja

margin
– margin-top – určuje šírku horného vonkajšieho okraja
– margin-bottom – určuje šírku dolného vonkajšieho okraja
– margin-left – určuje šírku ľavého vonkajšieho okraja
– margin-right – určuje šírku pravého vonkajšieho okraja

background
– background-attachment – pri posúvaný sa dole na stránke sa background nehýbe atd
– background-color – farba pozadia textu
(background-image:linear-gradient(to top, #04507b, #00a2ff); dve farby tvoria odťieň)

– background-image – pozadie je obrázok
– background-position – zmena pozície alebo obrázku
– background-repeat – opakovanie obrázku na stránke

font
– font-family – druh písma napr: Arial,Comic Sans MS
– font-weight – druh písma napr: bold
– font-style – štyl písma napr: italic
– font-size – veľkosť písma napr: 60px

border
– border-style – štyl rámčeku napr: dashed,solid,dotted
– border-width – veľkosť rámčeka napr: 60px
– border-color – farba rámčeka napr: blue
– border-radius – určuje ako ma byť rámček zarovnaný

kombinovanie
– border-top-left-radius – toto zaobli hrany vľavo a hore rámčeka

– border-bottom-style – dolný štyl rámčeku napr: dashed,solid,dotted
– border-bottom-width – dolná veľkosť rámčeka napr: 60px
– border-bottom-color – dolná farba rámčeka napr: blue

– border-top-style – horný štyl rámčeku napr: dashed,solid,dotted
– border-top-width – horna veľkosť rámčeka napr: 60px
– border-top-color – horna farba rámčeka napr: blue

– border-left-style – ľavý štyl rámčeku napr: dashed,solid,dotted
– border-left-width – ľavá veľkosť rámčeka napr: 60px
– border-left-color – ľavá farba rámčeka napr: blue

– border-right-style – pravý štyl rámčeku napr: dashed,solid,dotted
– border-right-width – pravá veľkosť rámčeka napr: 60px
– border-right-color – pravá farba rámčeka napr: blue

Bez minulosti

04.06.2017

Bez minulosti otvoril oči a rozpráva. žijem, každé ráno sa zobúdzam s pocitom že som niečo zabudol, dúfam že to nie je nič dôležite, moje pocity sú zamlžene. Pred pár rokmi som … ja vlastne neviem … bože teraz som si to uvedomil ta vec na ktorú zabúdam je moja minulosť. Bol dezorientovaný. Kde som býval ? Čo som počas svojho života robil ? Prečo som zabudol ? Čo sa [...]

Zima Kapitola I (Príbeh)

27.03.2017

Zima Kapitola I Bol piatok večer a Peter pracoval na skrinke ktorú kúpil svojej žene ako darček. Peter bol tak strašne unavený že nechtiac zaspal. Na druhy deň ráno keď sa Peter zobudil šiel si dať kávu a v tom si všimol že ma zavalené okno snehom. začudoval sa a šiel zistiť čo to znamená, prišiel do chodby a hneď na to otvoril dvere a v tom sa na neho [...]

Les Kapitola II (Príbeh)

27.03.2017

Les Kapitola II Rozprávač Tomáš sedí v kuchyni a rozmýšľa čo bude robiť s tou skupinou čo mu zabila psa. Tomáš sa nadýchol, obliekol, a šiel pomalým krokom do obchodu. Pozoroval každého jedného človeka ktorého videl, keď konečne prišiel do obchodu zobral si pečivo a šiel k pokladni. Predavačka Dobrý deň, vy ste tu nový že ? Tomáš Áno, [...]

Aral Sea

Vzácny ekologický úspech: Objem vody v časti Aralského jazera sa takmer zdvojnásobil

14.01.2025 07:00

Jazero bývalo štvrtým najväčším jazerom na svete, kým ho sovietske zavlažovacie projekty pripravili o vodu a spôsobili, že takmer vyschlo.

malibu, požiar, los angeles

Kalifornia sa opäť pripravuje na silný vietor, obáva sa rozšírenia požiarov. Pre rabovanie obvinili deväť ľudí, ukradli aj sochu Emmy

14.01.2025 06:37

Lesné požiare v oblasti Los Angeles si doteraz vyžiadali najmenej 24 obetí na životoch.

Riga, Pellegrini Kalinak

Kaliňák ide obnoviť žandárstvo na Slovensku, chce aby vojaci vo voľnom čase hliadkovali na vidieku. Ponúka tisícové odmeny

14.01.2025 06:00

Na Slovensko sa po 80 rokoch môžu vrátiť žandári aj s príspevkom 3 000 eur. Podľa bezpečnostného experta to prehĺbi už teraz obrovské problémy

Poľsko

Poľský analytik: Rusko musíme zastaviť skôr, ako bude u nás

14.01.2025 06:00

„Ak je Rusko schopné pokračovať v boji, otázkou je, kam to povedie, či sme pripravení zastaviť ho, za akú cenu a kedy,“ povedal expert na obranu Marek Świerczyński.

Python

Robím to čo ma baví, potichu a pomaly, ale raz to odhalím.

Štatistiky blogu

Počet článkov: 12
Celková čítanosť: 28949x
Priemerná čítanosť článkov: 2412x

Autor blogu

Kategórie