183.fm

Vándor, ki itt megpihensz!

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

W3-JavaScript ötletek

Források: w3schools | w3resource

JavaScript demók:

Hogyan működik a webaquarium?

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 

W3-HTML tanmese

Források: w3schools | w3resource

Hogyan épül fel egy HTML dokumentum?

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).

Hogyan tagolható a HTML5 dokumentum törzse?

A weblap tartalma szemantikai elemek alkalmazásával szervezhető könnyen áttekinthető egységekbe:

<header>
<nav>
<section> <aside>
<article>
<footer>
1. táblázat: HTML5 szemantikai elemek

Színpaletta

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
1.ábra: Színpaletta fehér háttérhez

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

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
2.ábra: Színpaletta fekete háttérhez

Lorem ipsum

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.

Validálás

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.

Webdesign ötletek, leírások