- HTML nyelv fogalma:
HTML (HyperText Markup Language) -> HiperSzöveges JelölőNyelv. Ezt a jelölőnyelvet használják arra, hogy a weboldalak külső megjelenési formáját, tartalmát leírják. Nem programozási nyelv!
- Felépítése: a nyelv alapvetően címkékből (tag-ek) épül fel.
A címkéknek két típusa van:- páros címke: rendelkezik nyitó- és zárócímkével. Például: <html>... </html>
- páratlan címke: elmarad a zárócímke, pontosabban fogalmazva a nyitó- és a zárórész egyetlen formulába van sűrítve. Például: <br/>
- Szintaktikája: egy általános HTML címke felépítése:
ahol a tul1, tul2, tuln a címke tulajdonságainak felsorolásást jelenti .
- Weboldal általános szerekezeti felépítése:
Egy weboldal alapvetően két szerkezeti egységből áll, amelyet a <html> ... </html> címkék közé zárunk.
A két egység a következő:- fejrész, mely a <head> ... </head> tagek között áll. Ezek az elemek valójában nem látszanak a böngészőnk ablakában, viszont nagyon fontos információs szereppel bírnak a weboldal megjelenése, besorolása, rangsorolása szempontjából.
- törzsrész, mely a <body> ... </body> tagek között áll. Valójában ez a rész látható a böngésző ablakban.
forráskód böngészőbeli eredmény - Weboldal forráskódjának szerkesztése egyszerű szövegszerkesztő alkalmazásban:
Egy weboldal elkészítéséhez nincs szükségünk bonyolult webszerkesztő programra, elegendő egy nagyon egyszerű dokumentumszerkesztő alkalmazás, mint például a WordPad, vagy a Jegyzettömb.
Ne használd az MS Word-öt, mivel a fájl mentésekor olyan - számodra nem látható! - elemekkel is kiegészíti a html oldalt, amely nemkívánatos a megjelenéskor!
A weboldal mentésekor két alapvető szabályt kell alkalmaznod:- a fájlt .htm vagy .html kiterjesztéssel mentsd!
- a fájl típusa: egyszerű szöveg
- A legfontosabb HTML címkék összefoglaló táblázata:
- table: táblázat
- caption: felirat
- tr: táblázat sora (table row)
- td: adat cella (table data)
- th: fejléc cella (table heading)
Címke | Leírás |
<html> .. </html> | html oldal |
<head> .. </head> | fejrész |
<body> .. </body> | törzsrész |
<p>Bekezdés</p> | bekezdés (paragraph) |
<h1>Címsor 1</h1> | Egyes szintű címsor (heading) |
<h6>Címsor 6</h6> | Hatos szintű címsor (heading). A közbenső szintek értelemszerűen: <h2>..</h2> <h3>..</h3>, <h4>..</h4> <h5>..</h5> |
<br/> | újsor |
<i>szöveg</i> | dőlt (italic) kiemelés |
<b>szöveg</b> | félkövér (bold) kiemelés |
<strong>szöveg</strong> | fontos, (erősen kiemelt) szöveg. Nagy különbséget nem látni az előzőhöz képest. |
<img src="uri" alt="leírás" width="" height=""/> | a megadott forráson (source) elérhető kép (image) beszúrása leírással (alternate), //img megadott szélességben (width), magasságban (height) |
<figure>ide illesztjük be a képet, stb. <figcaption>Felirat</figcaption> </figure> |
illusztráció (figure), felirattal (figure caption) |
<ul> <li>listaelem</li> </ul> |
felsoroláslista (unordered list), listaelemmel (list item) |
<ol> <li>listaelem</li> </ol> |
sorszámozott lista (ordered list), listaelemmel (list item) |
<a href="uri">link szövege</a> | hiperhivatkozás (link) (a=anchor, href=annak az oldalnak az elérési címe, ahova a hiperhivatkozás mutat) |
<video controls width="" height=""> <source src="mp4_videó_url" type="video/mp4" /> </video> |
Videó (mp4) (video) beillesztése, vezérlő eszköztárral (controls), megadott szélességben (width), magasságban (height). A forrás elérhetőségét (source) és típusát (type) is meg kell adjuk. ) |
<audio controls> <source src="mp3_hang_url" type="video/mpeg" /> </audio> |
Hangállomány (mp3) (audio) beillesztése, vezérlő eszköztárral (controls). A forrás elérhetőségét(source) és típusát (type) is meg kell adjuk. ) |
<!-- megjegyzés --> | Megjegyzés (comment) elhelyezése a HTML kódban |
<table> <caption></caption> <tr> <th></th> <td></td> </tr> </table> |
Táblázat kialakítása
|
<style type="text/css">...</style> | stíluslap, melynek típusa css/szöveg (text) |
<link rel="stylesheet" type="text/css" href="url"> | külső stíluslapok meghívása a HTML oldal fej részében. |
<iframe name="keretnev" width="" height="">...</iframe> | belső keret meghatározása, ahol a "keretnev" kifejezés határozza meg azt a területet, ahova a meghívás történik. |