Szeretnéd tudni, hogyan készülnek a weblapok?
Egyszerű, csak szánj rá 11 napon egy-egy órát, és az alapokat már tudni is fogod!HTML - a hiperszöveg-leíró nyelv vagyis HyperText Markup Languange rövidítése, ami egy W3C Konzorcium által fejlesztett szabvány a weboldalak tartalmának leírására.
Mire lesz szükséged?
- Először is keress egy jó, de egyszerű kódszerkesztőt, ajánlom a Notepad++ programot, amit erről a linkről letölthetsz. Az oldalon kattints a Notepad++ Installer hivatkozásra.
- Egy bármilyen böngésző, akár az, amiben most nézed ezt az oldalt. Ajánlom a Google Chrome-ot, mert nagyszerű fejlesztői eszközöket tartalmaz.
Ennyi! Nincs is többre szükség. Most indítsd el a kódszerkesztőt, és illeszd be a legegyszerűbb weblap kódját:
<!DOCTYPE html> <html> <head> <title>Oldalam</title> <meta http-equiv="Content-type" value="text/html; charset=utf-8" > </head> <body> <h2>Szervusz, világ!</h2> </body> </html>
Ha a Notepad++-ot használod, az Encoding (Kódolás) menüben válaszd ki a Konvertálás UTF-8-ra lehetőséget, ha még nem UTF-8 kódolás lenne kiválasztva. Erre azért van szükség, hogy az ékezetes magyar karakterek is helyesen tárolhatók legyenek.
Ezután csak mentsd a fájlt .html kiterjesztéssel, pl. html101.html:
A lementett fájlt nyisd meg a böngészőben vagy duplakattintással. A következő oldalt fogod látni:
Lássuk, mi is ez az egész!
- !DOCTYPE
- dokumentumtípus-deklaráció. mindig ugyanez, az első sorban kell lennie, jelzi a böngészőnek, hogy html5 szabványnak megfelelő oldalra számíthat
- html
- a nyitó (<html>) és záró (</html>) tag (ejtsd: teg), azaz címke között van a dokumentum tartalma. A dokumentum a fejrészből (<head>) és a testből (<body>) áll
- head
- az oldal fejrésze. többnyire közvetlenül nem megjelenő elemeket tartalmaz.
- title
- az oldal címe, ez jelenik meg a böngészőben a fülön és a tálcán is
- meta
- a meta tag ezekkel az attribútumokkal az oldal karakterkódolását jelzi, ezt azért szükséges megadni, hogy a magyar ékezetes karakterek a világ összes böngészőjén helyesen jelenjenek meg
- body
- az oldal tényleges tartalma van ezen a tagen belül
- h2
- 2-es méretű cím. Van ennél nagyobb is: h1, és kisebb is, egészen h6-ig. Próbáld ki a
Szervusz, világ!
mellettiEdit in JSFiddle
linkre kattintva, ahol már csak a body elemen belüli részt látod!
Tag-ek, elemek. Mik ezek?
- tag
- <html>, </html>, <br/> - ezek mind tag-ek
- elem (element)
- Pl. a <html> és a </html> a köztük lévő tartalommal (content) együtt egy elem
