HTML dokumentumokban a különböző objektumokat úgynevezett tag ek közé teszünk.
Az őstag a <html>, ezzel kezdődik a weboldal, s a </html> zárja
Ezenbelül elkülönítjük a címrészt (amit a <head> tag jelöl),
s a szövegtörzset (amit a <body>)
A headen belül az oldal címét szoktuk megadni (azt, amit a böngésző megnyitott fülében fog mutatni, <title> tagek közé</title>)
illetve a használt stílusfileokat (CSS) és java scriptek egy részét.
Az oldal lényegi része a bodyba fog kerülni ( <body> tagek közé </body>)
Ennek a tulajdonságait megszabhatjuk a body tag után, pl <body bgcolor="#E6E6FA">
Az egyedüli tag, amit nem kell zárni az a <br> vagy </br> ami új sort hoz létre.
Egy minimális weboldal, ami csak annyit tartalmaz, hogy Sziasztok, így nézne ki:
<html>
<body>
Sziasztok
</body>
</html>
Cím
Ha címet szeretnénk az oldalunknak, ezt a <h1>-<h6> tagekkel tehetjük meg.
Minél kisebb a szám a h után, annál nagyobb betűméretű lesz a cím.
h1
h2
...
h6
Betűk
Ha a betűméretet, színt, stb. szeretnénk változtatni, azt a font taggel lehet, de a html5 már nem támogatja, CSS file használatát javasolja.
<font color="blue"> kék betűk </font> ellenben még működik
<font face="verdana" color="green"> Zöld Verdana karakter </font> is
Lábléc
Újabban divatos a lábléc, ahova pl az oldal készítőjének a nevét, logóját stb lehet tenni.
Ezt <footer> tagek </footer> segítségével lehet megoldani
Táblázat
Ahhoz, hogy táblázatot hozzunk létre, több taget kell használnunk.
Először a <table> taggel kell kezdenünk, s azon belül minden sort és oszlopot külön kell definiálnunk.
A sorokat a <tr> taggel, az oszlopokat a <td> taggel.
Példa
Sor1
|
Oszlop 2
|
Sor2
|
Oszlop 2
|
<table border="2">
<tr>
<td>Sor1<br>
</td>
<td>Oszlop
2<br>
</td>
</tr>
<tr>
<td
>Sor2<br>
</td>
<td>Oszlop
2<br>
</td>
</tr>
</table>
Ha a border tulajdonágot nem specifikáljuk, akkor a táblázat sorai és oszlopai nem lesznek fekete vonallal meghúzva.
Kép
Kép beillesztéséhez az img taget használjuk
<img src="pelda.jpg" alt="amit a kép alá
szeretnénk írni" style="width:640px;height:480px;">
pelda.jpg - a file neve, ez lehet relatív útvonal (abból a mappából indul, ahol a html oldal van, ./pelda.jpg vagy csak pelda.jpg) illetve abszolút (C:\dokumentumok\pelda.jpg vagy /var/www/html/img/pelda.jpg) vagy link is (http://kepek.hu/pelda.jpg - fiktiv link)
width a szélessége, height a magassága pixelben
Linkek
A html definciójában benne van, hogy linkeket tartalmaz, ezeket
<a
href="https://bodaszilard.hopto.org/info/IXH/S1_Labor1.html">s link helyén megjelenő szövet (ez a
link erre az oldalra fog mutatni) </a>
segítségével tudjuk megoldani
Sorszámozott lista
Bevásárlólistához vagy bakancslistához hasonlóan itt is lehetőségünk van egy un sorszámozott listára
pl az alábbi html kód
<ol>
<li>Tea</li>
<li>Tej</li>
<li>Joghurt</li>
<li>Müzli</li>
</ol>
ezt a listát fogja eredményezni
- Tea
- Tej
- Joghurt
- Müzli
ahol az <ol></ol> tagek az ordered list ből jönnek, s az
egyes listaelemek a <li></li> tagek közé kerülnek.
Számozatlan listához egyszerűen a <ul></ul> tageket
kell használjuk
Tutorial
Ezzel nagy vonalakban lefedtük a kompetencia vizsgára szükséges html tudást, egy alaposabb tutorialért
http://www.w3schools.com/html/
böngészhetjük ezt az oldalt.
