Osnove HTML-a [4]

Danas počinjemo malo ozbiljnije sa HTML-om kao uvod u HTML 5
Da napomenemo da je veoma važno da pogledate prethodne HTML tutorijale jer se više nećemo vraćati na osnove.
Počinjemo sa listama

LISTE U HTML-u

---

Danas koristimo 3 vrste listi , a to su :

1 . Bullets lista koja izgleda ovako

• HTML
• CSS

Dok kod izgleda ovako

<ul>
<li>HTML</li>
<li>CSS</li>
</ul>


Znači otvaramo i zatvramo je sa <ul></ul> , a sadržaj obilježavamo sa <li></li>

2. Brojna lista koja izgleda ovako

1. HTML
2. CSS

Dok kod izgleda ovako


<ol>
<li>HTML</li>
<li>CSS</li>
</ol>

Znači otvaramo je sa <ol></ol> , a sadržaj sa <li></li>

3. Definisana lista tj. lista koja je komentarisana i izgleda ovako

HTML

Ovo je prvi komentar

CSS

Ovo je drugi komentar

Dok kod izgleda ovako


<dl>
<dt>HTML</dt>
<dd>Ovo je prvi komentar</dd>
<dt>CSS</dt>
<dd>Ovo je drugi komentar</dd>
</dl>

Znači otvaramo i zatvaramo je sa <dl></dl> sadržaj otvaramo sa <dt></dt> , a komentar sa <dd></dd>

---

FORME U HMTL-u

Forme se u HTML-u koriste sa prosleđivanje podataka serverima.

Za kreiranje forme koristimo <form> element

Primjer :

<form>

Element

</form>

Primjer forme :

Ime :

Prezime:

Kod za ovu formu izgleda ovako

<form>
Ime: <input type="text" name="firstname" /><br />
Prezime: <input type="text" name="lastname" />
</form>


Sa formama ćemo se detaljnije upoznati u kasnijim tutorijalima ovdje važno samo da naglasimo da se za forme koristi element <form>

---

Kasnije ćemo se vraćati na ovo no sada krećemo sa HTML5 koji predstavlja budućnosti. more.

Osnove CSS-a [1]

Danas počinjemo sa CSS-om

CSS čini vaš rad sa HTML-om mnogo lakšim , a vašu stranicu mnogo ljepšom.

Primjer je animacija u CSS-u

Kod izgleda ovako (komentarisan)

---

<html>

<head> --> CSS kod ide u <head> dio koda

<style type="text/css"> --> Ovime otvaramo CSS dio kod

div -- > Ovim obilježavamo ovaj dio koda i koristiti cemo ga kasnije da ga pozovemo u HTML-u

{ --> Ovim pocinjemo ovaj dio CSS koda

width:100px; --> Širina

height:100px; --> Visina

background:red; --> Pozadina ce biti crvena

position:relative; --> Pozicija

animation:mymove 5s infinite; 

-moz-animation:mymove 5s infinite; /*Firefox*/

-webkit-animation:mymove 5s infinite; /*Safari i Chrome*/

}

@keyframes mymove --> kretanje animacije

{

from {left:0px;} --> Od čega počinje animacija

to {left:200px;} --> Gdje završava animacija

}

@-moz-keyframes mymove /*Firefox*/

{

from {left:0px;}

to {left:200px;}

}

@-webkit-keyframes mymove /*Safari i Chrome*/

{

from {left:0px;}

to {left:200px;}

}

</style> --> Završava CSS kod

</head>

<body>

<p><b>napomena:</b> Ovaj primjer ne radi sa Internet Explorerom i Operom.</p>

<div></div> --> ovo je onaj dio koda kojim pozivamo CSS kod u ovom dijelu HTML-a

</body>

</html>

---

Kako to izgleda možete pogledati

OVDJE

---

Sada slijedeći kod

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style type="text/css"> 

div

{

appearance:button; --> U kodu pozivamo komandu na button

-moz-appearance:button; /* Firefox */

-webkit-appearance:button; /* Safari i Chrome */

}

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer  i Opera ne podržavaju ovaj kod</p>

<div>Vaš tekst</div> --> pozivamo se na kod iz CSS-a

</body>

</html>

---

Kako to izgleda možete pogledati OVDJE

Kako apperance : možemo koristiti

appearance: normal|icon|window|button|menu|field;

---

Eh sada kako sebi da olakšamo HTML kod
Preko CSS-a ćemo podesiti boju ili sliku pozadine :)

div
{
background:url(pozadina.gif) top left no-repeat,
url(slikapozadine.gif) bottom left no-repeat,
url(slikapozadine.gif) bottom right no-repeat;
}

U ovom tutorijalu smo koristili samo pokazne kodove , a kasnije nastavljamo sa pravim CSS tutorijalima. more.