HTMLja te ne bom ucil, imas na w3schools.com kar dobre tutoriale... Malo bi ti le povedal nekaj zadev v razmislek, za lazje razumevanje vsega skupaj...
HTML (HyperText Markup Language) je opisni jezik za opisovanje spletnih dokumentov. Opisujes strukturo dokumenta in (lahko) tudi izgled (vedno manj, temu je zadnje case namenjen CSS).
Osnovna struktura dokumenta:
<html>
<head>
... head definition ...
</head>
<body>
<h1>heading goes here</h1>
content goes here</p>
</body>
</html>
Gornja zelo enostavna struktura je v obliki drevesa... HTML je deblo, ki ima dve veji, oziroma dva otroka (child): HEAD in BODY. V HEAD se tukaj nisem spuscal, ker nima nobene veze s CSS, razen da vanj vstavis CSS definicijo, kar si, kot sem opazil, ze osvojil. BODY ima pa spet dve veji, oziroma dva otroka: H1 in P. Ce bi zelel cisto striktno drevesno definirat CSS za to strukturo, bi naredil to takole (ni potrebe tega poceti tocno na ta nacin, le v ilustracijo):
body {
/* css definicija BODY elementa in vseh njegovih otrok /
}
body h1 {
/ css definicija H1 elementa (in vseh njegovih otrok), ki je otrok elementa BODY /
}
body p {
/ css definicija P elementa (in vseh njegovih otrok), ki je otrok elementa BODY */
}
Ce bi zadeve se bolj gnezdil, recimo takole:
<body>
<div id="header">
<h1>heading 1 goes here</h1>
paragraph text goes here</p>
</div>
<div id="content">
<h2>heading 2 goes here</h2>
paragraph text goes here</p>
<h2>heading 2 goes here</h2>
paragraph text goes here</p>
</div>
</body>
bi css izgledal nekako takole:
body {
/* css definicija BODY elementa in vseh njegovih otrok /
}
body div#header h1 {
/ css definicija h1 elementa (in vseh otrok), ki je otrok div elementa z IDjem "header", ki je otrok BODY elementa /
}
body div#header p {
/ css definicija p elementa (in vseh otrok), ki je otrok div elementa z IDjem "header", ki je otrok BODY elementa /
}
body div#content h2 {
/ css definicija h2 elementa (in vseh otrok), ki je otrok div elementa z IDjem "content", ki je otrok BODY elementa /
}
body div#content p {
/ css definicija p elementa (in vseh otrok), ki je otrok div elementa z IDjem "content", ki je otrok BODY elementa */
}
Tisto "(in vseh otrok)" ne drzi povsem, saj se razlicne lastnosti ne dedujejo, primer je background in text-decoration, pa se kaj bi se naslo. Za tocen seznam, katere lastnosti se dedujejo, si lahko pogledas na w3schools.com
V praski lahko povsod izpustis tisti BODY na zacetku, lahko tudi div#content napises samo #content, zakompliciral sem toliko zato, da ponazorim, o cem sploh govorim :) Zgornji primer bi v praski izgledal takole:
body {
/* css definicija BODY elementa in vseh njegovih otrok /
}
#header h1 {
/ css definicija h1 elementa (in vseh otrok), ki je otrok div elementa z IDjem "header", ki je otrok BODY elementa /
}
#header p {
/ css definicija p elementa (in vseh otrok), ki je otrok div elementa z IDjem "header", ki je otrok BODY elementa /
}
#content h2 {
/ css definicija h2 elementa (in vseh otrok), ki je otrok div elementa z IDjem "content", ki je otrok BODY elementa /
}
#content p {
/ css definicija p elementa (in vseh otrok), ki je otrok div elementa z IDjem "content", ki je otrok BODY elementa */
}
In da, lahko me tikas :)