Tekintsd át a tematikus linkgyűjteményeket, hallgass zenét az FM 181-en, vagy csatlakozz a Bitfaragók-hoz!
Linkajánló: Hello world | Ugródeszka | infokucko.wordpress.com | myhaikuclass.com | csLearning | Slimbox
Források: w3schools | w3resource
Európa ország-főváros memóriajáték Google térképpel
JavaScript példatár: Reszponzív lepkealbum New
Morse TX trainer JavaScript oszcillátorral
Morsetrainer V2.0 Test
Források: w3schools | w3resource
A böngészők HTML kódokat dolgoznak fel. A HTML nyelvet azonban még nem tekintjük programnyelvnek, mert csupán a tartalmi elemek megjelenítéséhez szükséges információkat írja le. Vizsgáljuk meg HTML dokumentum szerkezetét. Mindig <html> és a </html> tagek (HTML utasítások) között találhatók a tartalmi elemek. A <head> és a </head> között a dokumentum meta (leíró) információi szerepelnek. Az itt található adatok nem jelennek meg a böngészőben, mivel a dokumentum tulajdonságairól adnak információt a böngészőnek és a robotoknak. A dokumentum tartalmi része a <body> és a </body> tagek között található. Egy HTML dokumentumban szöveg, kép, hang és mozgókép jeleníthető meg. Készítéséhez használhatunk egyszerűbb texteditort (pl. notepad, notepad++), vagy HTML fejlesztő programot (pl. Adobe Dreamweaver, CoffeeCup).
A weblap tartalma szemantikai elemek alkalmazásával szervezhető könnyen áttekinthető egységekbe:
<header> | |
<nav> | |
<section> | <aside> |
<article> | |
<footer> |
Színkerék: colorschemedesigner | kuler.adobe | colourlovers | colorhunter | design-seeds
A HTML dokumentumban a címsorok, a szöveg, a háttér, illetve a hivatkozások kiemeléséhez különböző színeket használhatunk. A megfelelő színharmónia kialakításához először érdemes kiválasztani a megfelelő színeket. A színpaletta tartalmazza az adott honlapon használt színeket. Nézzzük meg a saját honlapon használt színpalettát:
#404040 Cím |
#606060 Szöveg |
#FFFFFF Háttér |
#1E90FF Kiemelés 1 |
#FF1493 Kiemelés 2 |
A színpaletta hatását kipróbálhatjuk egy rövid HTML dokumentumban, ehhez használhatjuk a standard "Lorem ipsum" szöveget:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in blandit leo. Mauris laoreet, magna in euismod malesuada, sem turpis lobortis nibh, et tempus nulla lectus et enim. Aliquam sit amet urna leo. Sed dolor lectus, aliquet eu rutrum ut, tristique eget arcu. Nulla ornare, elit at dapibus euismod, leo risus vehicula sapien, eu rutrum sem nulla non est. Sed sit amet eros varius, tincidunt sapien vestibulum, ultricies libero. Maecenas in lectus quam.
#E0E0E0 Cím |
#D0D0D0 Szöveg |
#282828 Háttér |
#1E90FF Kiemelés 1 |
#FF1493 Kiemelés 2 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in blandit leo. Mauris laoreet, magna in euismod malesuada, sem turpis lobortis nibh, et tempus nulla lectus et enim. Aliquam sit amet urna leo. Sed dolor lectus, aliquet eu rutrum ut, tristique eget arcu. Nulla ornare, elit at dapibus euismod, leo risus vehicula sapien, eu rutrum sem nulla non est. Sed sit amet eros varius, tincidunt sapien vestibulum, ultricies libero. Maecenas in lectus quam.
Az elkészült HTML dokumentum helyességét a webtárhelyre feltöltés után a Markup Validation Service segítségével (online) tudjuk leellenőrizni, és az esetleges hibákat kijavítani.