Responsive image 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).
Ha üres helyet (space) szeretnénk, akkor ezt az &nbsp; 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>
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 </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
  1. Tea
  2. Tej
  3. Joghurt
  4. 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.