|
Administrator
|
|
Ponedjeljak, 18 Veljača 2008 |
- O DWu i HTMLu
- primjeri
- Tips&Tricks
| OSNOVE HTML KODA | Radite web stranice Dreamweaveru (DW) a baš ne razumijete što to DW upisuje u code dijelu (view-code)?
Ako ste među tim korisnicima, onda je ovo članak za vas!
Krenimo redom: | | O DWu i HTMLu | | Da bi savladali osnove HTMLa, trebali biste otvoriti neki tekst procesor (NotePad) ili code dio DWa (inace DW spada u WYSIWYG (What You See Is What You Get) editore, u prijevodu DW sam generira code) NAPOMENA:
Da bi vam primjeri proradili najprije kliknite na link i onda desnim klikom miąa pogledajte kod... (view source). primjer je ukedno i link... HTML (Hyper Text Markup Language) ili skriptni jezik za izradu web stranica sastoji se od TAGova (naredbe u <uglatim> zagradama) i ATRIBUTa (opcija potrebnih za izvršavanje naredbi koji se nalaze unutar "navodnika").
Za najjednostavniju web stranicu potrebno je samo 4 TAGa: | | <!--PRIMJER 1 (P1)--> | <html>
<head>
<title>najjednostavnija web stranica</title>
</head>
<body>ovo je najjednostavnija web stranica</body>
</html> | Kao što ste i primjetili postoje dvije vrste TAGova, početni i završni. U početni se upisuju ATRIBUTi a završni se zatvara sa /.
Ovoj web stranici nije definirano ništa (sve je "Browser default"). Ukoliko želimo bilo što promijeniti samo dodajemo TAGove i ATRIBUTe u onaj dio koji mijenjamo. Kod dodavanja moramo paziti da TAGove zatvaramo onako kako smo ih i otvarali, dakle MORAMO IH "UGNIJEZDITI", a to znači da ako zamijenimo završne TAGove u P1 browser neće prepoznati dokument. Kako ovo funkcionira možete provjeriti ako P1 copy/paste u NOTEPAD i dokument snimite kao neki_naziv.html
Još nešto za kraj: <!--PRIMJER 1 (P1)--> neće se pokazati u vašem brovseru jer
<!-- nesto --> služi za upise komentara na vašim stranicama.
Taj TAG se NE ZATVARA!
Primjer kako sam nazvao stranicu "neki_naziv.html" koristite kao pravilo a izbjegavajte nazive tipa "neki naziv.html" (uvijek koristite podcrtu _) i HR znakove sa kvačicama. Uvijek koristite mala slova (zbog lakšeg snalaženja jer pretraživaći RAZLIKUJU velika i mala slova) i prvu stranicu nazovite index.html
Da ponovimo: | | <html></html> | označava početak i kraj HTML koda web stranice a sadrži samo HEAD i ovisno o tipu stranica BODY ili FRAMESET | | <head></head> | sadržava zaglavlje stranice koje se ne pokazuje u browseru nego opisuje tu stranicu i daje joj naziv TITLE te upisuje META TAGove | | <title></title> | između ovih tagova upisujemo ono što će brovser prikazati na vrhu prozora (u ovom slučaju (Webmajstori.Net -=- članci) | | <body></body> | tijelo stranice, u sam TAG upisujemo vrijednosti za cijelu stranicu (pogledaj P2), a između TAGova sve ono što će se prikazati u browseru |
| | <!--PRIMJER 2 (P2)--> | <html>
<head>
<title>prva web stranica</title>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1250">
</head>
<body
bgcolor="silver"
text="black"
link="lime"
vlink="maroon"
alink="red">
<!--redom su označene boje:
pozadine, teksta, linkova,
posjećenih i aktivnih linkova-->
<font face="Verdana" size="2"> <!--vrsta i veličina slova-->
<a href="#" target="_blank">ovo je moja prva web stranica</a>
</font>
<!--font TAG se obvezatno zatvara i mijenja tekst između TAGova-->
</body>
</html> | Pod HEAD imamo jedan osnovni META TAG a to je kodna stranica (windows-1250 kodna stranica podržava HR znakove) koja govori koji će se set slova upotrebljavati.
U P2, u odnosu na P1, promijenili smo ATRIBUTE i sada naša web stranica nije više "Browser default" nego pokazuje elemente točno onako kako kako mi želimo.
isto tako ako u BODY TAG dodamo background="neka_slika.jpg" pozadina cijele stranice ce biti ta slika
Isto tako možemo dodati i link koji se nalazi unutar taga <a> gdje nam ATRIBUT "href" označava lokaciju. U primjeru je naveden BLANK LINK (#) koji ne vodi nikamo a koristimo ga između ostalog i za povratak na vrh (OnTop), dok "target" označava kako želimo otvoriri taj link (blank-novi prozor, ostali u istom prozoru, razlike su samo za FRAMEove). Naravno za link možemo koristiti i sliku ali onda kod izgleda ovako: <a href="#"><img src="neka_slika.gif"></a> | | <!--PRIMJER 3 (P3)--> | <table width="100" border="2" cellspacing="2" cellpadding="2"
bgcolor="black" height="100" bordercolor="lime">
<tr align="center" valign="middle" bordercolor="white">
<td bgcolor="red">
<font face="Verdana" size="1">crvena</font></td>
<td bgcolor="blue">
<font face="Verdana" size="1">plava</font></td>
</tr>
<tr align="center" valign="middle" bordercolor="white">
<td bgcolor="yellow">
<font face="Verdana" size="1">žuta</font></td>
<td bgcolor="green">
<font face="Verdana" size="1">zelena</font></td>
</tr>
</table> | | TABLICE, ugnježdjujemo ih između BODY TAGa i sa njima radimo cjelokupni dizajn i one su u većini slučajeva jedino rješenje. Kod DWa se zna desiti da "zabrlja" sa tablicama a ove osnove će vam, valjda pomoći da shvatite o čemu je riječ. | | <table></table> | osnovni tagovi tablica, unutar njih definiramo redove <tr> ali i određujemo parametre tablica (width-širina, height-visina, cellspacing-br. pixela između ćelija, cellpadding-razmak od ruba do sadržaja ćelije, algin-poravnanje (top, middle, center), border-širina ruba, bgcolor-boja pozadine, background-slika pozadine, bordercolor-boja linija između ćelija) | | <tr></tr> | redovi koji se umeću u tablice, unutar njih definiramo ćelije <td>, ali i određujemo parametre ( algin-poravnavanje ćelija u redu (left, center, right), valgin-poravnavanje ćelija u redu (top, middle, bottom), bgcolor-pozadindka boja ćelija) | | <td></td> | ćelije unutar kojih se smještaju objekti, a određujemo im parametre (width, height, algin, valgin, bgcolor, background, rowspan/colspan-spajanje redova ili stupaca, nowarp-tekst se ne lomi ako je predugačak nego kontinuirano teče |
| Za primjer kako to izgleda kod sa linkom i tablicom (P1-P2-P3) klikni na P1+P2+P3 i view-source za kod
Sada možete raditi tablicu u tablici i sva ona čuda... | | I za kraj jedan Tips&Tricks by DW: | | Ukoliko želite visinu tablice ili ćelije do 5 pixela, a da to sve funkcionira na relaciji DW-Browser, kad selektirate tu ćeliju u code dijelu DWa morate obrisati " " između <td> </td> koda. | Nadam se da sam vam makar malo pomogao!
Do slijedeće lekcije, srdačan pozdrav i tipkajte!!! |
|
|
Zadnja Promjena ( Utorak, 26 Veljača 2008 )
|
dreamweaver 
