Boda Szilárd weblapja

Alapok

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>)
Egy üres weboldal így nézne ki

<html>
 <head>
  <title>

  </title>
 </head>
 <body>

 </body>
</html>

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. (A CSS fileokkal az oldal kinézetét tudjuk megváltoztani, a java scriptekkel pedig egyéb funkcionalitást - pl látogatók követése - tudunk megoldani)
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">

egy szürkés háttérszínt adna az oldalunknak. A különböző színeket pl itt tudjuk kikeresni.
Az egyedüli tag, amit nem kell zárni az a <br> vagy </br> ami új sort hoz létre. (Különben hiába teszünk a szöveges html állományba új sort, az a böngészőben nem kerül majd új sorba)
ben hiába teszünk a szöveges html állományba új sort, az a böngészőben nem kerül majd új sorba).
Ha üres helyet (space) szeretnénk, akkor ezt az   vel tudjuk megoldani.

Egy minimális weboldal, ami csak annyit tartalmaz, hogy Sziasztok, így nézne ki:

 <html>
 <head>
 <title>
Első weboldalam
 </title>
 </head>
 <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> h1  </h1>
      <h2> h2  </h2>
      <h3> h3  </h3>
      <h4> h4  </h4>
      <h5> h5  </h5>
      <h6> h6  </h6>

Ha a címet középre szeretnénk helyezni, akkor


  <h1 style="text-align:center"> h1  </h1>

utasítással tehetjük meg.

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>

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 </td>
      <td>Oszlop  2 </td>
   </tr>
   <tr>
    <td>Sor2    </td>
      <td>Oszlop 2   </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="hiba a képmegjelenítés során" 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

Hivatkozások

A html definciójában benne van, hogy hivatkozásokat (hyperlinkeket) 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 Hivatkozásoknál (akárcsak képeknél) beszélhetünk relatív s abszolút elérési útvonalról.

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.