HTML a CSS
Vytváranie www stránok
Programovanie v jazyku HTML a CSS
www stránka ako SÚBOR
index.html
• Edit (vytváranie)
• texty + kódy
• Poznámkový blok
• View (pozeranie)
• Stránka s obrázkami a
textami
• Internetový
prehliadač
Vytvorenie súboru index.html
• Vytvorme nový priečinok
• V tomto priečinku vytvorme nový textový
dokument
– Pravý klik - nový textový dokument
• Premenujme tento súbor na index.html
Poznámka:
• Ak sa nezmení ikonka na ikonku nejakého prehliadača,
potom postupujte podobne:
– V počítači hľadajte možnosti nastavenia priečinkov, kde treba
nastaviť, aby sa zobrazili prípony súborov (napr: .jpg, .docx )
– Teraz si zmente túto príponu na html
HTML
• HyperText Markup Language
CSS
• Cascading Style Sheets
• Jazyk na vytváranie
• Jazyk na formátovanie
www stránok
www stránky
• Zodpovedný pre obsah • Je zodpovedný pre
a štruktúru stránky
farby, tvary, okraje,
umiestnenie na
stránke
Základná štruktúra www stránky
<html>
<head>
<title> Názov stránky </title>
</head>
<body>
obsah stránky (texty, obrázky,
nadpisy, linky...)
</body>
</html>
Tagy pre vytvorenie obsahu
a jednoduchý vzhľad
<h1> </h1>
<h2> </h2>
<h3> </h3>
Nadpis úrovne 1
Nadpis úrovne 2
Nadpis úrovne 3
<h1> Hello world</h1>
<h2> Hello world2</h2>
<h3> Hello world3</h3>
<b></b>
<i></i>
<u></u>
Tučné písmo
<b>Text</b>
Šikmé písmo
<i>Text</i>
Podčiarknuté písmo <u>Text</u>
<br />
Nový riadok
text <br /> text v ďalšom riadku
<p> </p>
Nový odsek
<p>Nové texty, nové myšlienky...</p>
Zmena štýlu
<h1 style=”background-color:orange;
color:blue; ”>
TEXT TEXT TEXT TEXT TEXT
</h1>
<p style=”font-family:verdana;
color:blue; ”>
TEXT TEXT TEXT TEXT TEXT
</p>
Farby
<h1 style=”background-color:rgb(0,128,255);
color:yellow; ”>
TEXT TEXT TEXT TEXT TEXT
</h1>
• RGB kombináciu nájdete v skicári (paint)
– Dvojklik na nejakú farbu vybrať si farbu napísať
do zátvoriek /v html kóde/ číslo červenej, zelenej a modrej
zložky, napr: rgb(0,128,255)
Obrázky
<img src="adresa obrázka" alt="meno
obrázka " height=" " width="">
• Adresa obrázka:
1. Z internetu: kopírovať URL adresu
2. Z vlastného PC: kopírovať meno obrázka spolu s
príponou
•
Obrázok má byť uložený v rovnakom priečinku, ako
index.html !!!!
Link - odkaz
<a href="adresa odkazu"> Text na kliknutie </a>
1. Odkaz na inú stránku: http://9gag.com/
– <a href="http://9gag.com/ "> Funny pix </a>
2. Odkaz nejaký súbor: helpfile.pdf
– <a href="helpfile.pdf"> Pomocný súbor </a>
3. Odkaz na podskránku: kontakt.html
–
<a href="kontakt.html"> KONTAKT </a>
Tag pre rozčlenenie stránky
<div> </div>
• Každé “okienko” alebo
“box” na stránke sa vytvára
pomocou div –u
TEXT 1
• Na obrázku je schéma
nejakej www stránky
– Všetky farebné okienka/boxy
sú div-y
TEXT 2
Používanie <div>-u
<div style="background-color:orange;
width:200px;
height:100px">
TEXT 1
</div>
TEXT1
Rôzne nastavenia <div>-u
Vlastnosť (Čo sa nastavuje)
•
•
•
•
•
•
•
•
•
•
•
color (farba písma)
background-color (farba pozadia)
width (šírka)
height (výška)
border-style (štýl ohraničenia)
border-width (hrúbka ohraničenia)
border-color (farba ohraničenia)
font-family (typ písma)
font-size (veľkosť písma)
margin („vonkajší“ okraj)
padding („vnútorný“ okraj)
Hodnota (Na čo sa nastavuje)











red/black/rgb(23,54,104)
blue/green/rgb(23,54,104)
200px/150px...
150px/300px...
dotted/solid/double dashed
2px/5px...
white/green/rgb(23,54,104)
Calibri, Verdana, Georgia...
15px/24px....
10px
15px
Okraje - borders
• Musíme nastaviť všetky 3 vlastnosti:
– border-style (štýl ohraničenia)
dotted/solid/double dashed
– border-width (hrúbka ohraničenia) číslo + px
– border-color (farba ohraničenia)
určiť farbu
• Ak cheme určiť iba jednotlivým stranám okraje
– Strany: left, right, top, bottom
• border-left-style: solid;
• border-left-width: 3px;
• border-left-color: black;
• border-bottom-style: solid;
• border-bottom-width: 3px;
• border-bottom-color: black;
TEXT1
Okienko v okienku
<div style="background-color:orange;">
TEXT 1
<div style="background-color:pink;">
TEXT 2
TEXT 1
</div>
TEXT 2
</div>
Vnútorný a vonkajší okraj
padding & margin
• Padding (vnútorný okraj)
– Posúva obsah okienka od okraja dovnútra
– padding: 20px
TEXT1
TEXT1
• Margin (vonkajší okraj)
– Posúva okienko vzhľadom na jeho okolie
– margin: 10px
Umiestňovanie okienka
• Nastavujú sa všetky 3 súčasne!!!
– position: absolute;
– top: 50px;
– left: 100px;
TEXT 1
TEXT 2
TEXT 3
<div style="position:absolute;top:50px;left:50px;">
TEXT 1
<div style="position:absolute;top:30px;left:10px;">
TEXT 2
</div>
<div style="position:absolute;top:50px;left:120px;">
TEXT 3
</div>
</div>
Ďalšie užitočné nastavenia
• text-align: left / right / center / justify
– Vodorovné zarovnanie textu alebo aj obrázka, ak je v div-e
• margin-left:auto; margin-right:auto;
– Vycentrovanie div-u na stránke alebo v rámci okienka
... asi všetko.
Download

HTML a CSS