Založ si blog

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 viac »

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 viac »

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 viac »

Donald Trump

Trump: Kuba je zodpovedná za útoky na amerických diplomatov

17.10.2017 07:21

Trump to povedal na tlačovej konferencii v Bielom dome. USA koncom septembra kvôli incidentom stiahli z veľvyslanectva na Kube takmer všetok personál.

vražda, zločin, lúpež, krádež, nôž

Útok nožom v Londýne si vyžiadal jednu obeť

17.10.2017 07:06

Polícia incident, ktorý sa stal pred zastávkou metra Parsons Green, nevyšetruje ako teroristický útok.

súťaž mamina

Súťaž o najkrajší výrobok od mamky sa začína

17.10.2017 07:00

Mamičky, ktoré na materskej dovolenke dokážu vlastnoručne vyrobiť šperky, šaty, úžitkové veci, dobre pečú alebo fotografujú, môžu opäť zabojovať o atraktívne ceny.

Monika Jankovská

Hlasovanie o Jankovskej je stále otvorené

17.10.2017 07:00

Vládne strany sa stále nedohodli, čo s nomináciou štátnej tajomníčky ministerstva spravodlivosti Moniky Jankovskej (Smer) do Súdnej rady.

Python

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

Štatistiky blogu

Počet článkov: 12
Celková čítanosť: 7774x
Priemerná čítanosť článkov: 648x

Autor blogu

Kategórie