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
Celá debata | RSS tejto debaty