Információs technológiák 1. Gy: HTML alapok 1/53 B ITv: MAN 2017.09.28
Hogyan kezdjünk hozzá? Készítsünk egy mappát, legyen a neve mondjuk: Web Ez lesz a munkakönyvtárunk, ide kerül majd minden létrehozott fájl, ide fogunk mindent letölteni (pl. képek) Hozzunk létre a Web mappába egy új szöveges fájlt, és nevezzük el index.html -nek! 2/53
Hogyan kezdjünk hozzá? A géptermekben a biztonsági beállítások miatt nem lehet egyből egy html kiterjesztésű fájlt létrehozni. Megoldás: 1. Hozzunk létre egy szöveges fájlt, és nevezzük el alap.txt-nek. 2. Nyissuk meg a fájlt Jegyzettömbbel, és mentsük le másként: A fájl típusa legyen: Minden fájl (*.*) A fájl neve legyen index.html 3/53
index.html Nyissuk meg Jegyzettömbbel az index.html fájlt, és írjuk bele azt a minimális kódot, ami egy weblaphoz szükséges, aztán mentsük a tartalmat! 4/53
index.html Ha kész a fájl, nyissuk meg böngészőben 2x 5/53
index.html kis csinosítás Legyen az oldal háttérszíne HalványAranySárga Legyen a szöveg nagyobb betűméretű, és legyen középre helyezve 6/53
w3schools.com HTML color names 7/53
index.html Alakul, de jobb lenne a szöveg: Arial betűtípussal, Sötétkék színnel 8/53
index.html Itt most K2B elgondolkodik a folytatások, és kitalálja, hogy szeretne 3 aloldalt: Bemutatkozás (önmagáról pár szó + egy kép) A Béla név eredete Néhány híres Béla Készítsünk egy menüt a kiinduló oldalra Készítsük el az aloldalokat 9/53
Új fejezet következik :) 10/53
bemutat.htm Először készítsük el a Bemutatkozó aloldalt. Tartalma: Pici szöveg Egy kép K2B-ről Link vissza a kiinduló oldalra Készítsünk a Web mappába egy bemutat.htm oldalt (vagy az alap.htm-et mentsük le a netről ilyen néven) Web 11/53
bemutat.htm 12/53
bemutat.htm kis csinosítás Legyen a háttér HalványCiánKék Betűtípus: arial, legyen picit nagyobb betűméret, legyenek SötétPalaSzürkék a betűk Legyen az első sor félkövér betűkkel, aztán legyen egy üres sor 13/53
bemutat.htm kis csinosítás 14/53
bemutat.htm kép beillesztése A kép ne legyen túl nagy méretű (részlet), de ha rákattintunk, jelenjen meg a nagy kép! 15/53 Ezért két kép kell: Egy kisméretű k2b_mini.jpg Egy nagyobb méretű k2b_big.jpg Töltsük fel a képeket a Web mappába Web
Képek elkészítése Használjunk képszerkesztő programot ACDSee, Photo!Editor, GIMP, Paint.NET Megfelelő a sima Paint is Sok online program is van, pl. www.befunky.com/ A képek pixelmérete és fájlmérete ne legyen se túl nagy, se túl kicsi Kicsik: 200x200 px 400x400 px, kb. 50 KB Nagyok: 1200x900 px 2400x1800 px, max. 1-2 MB A képfájlok nevében is jelezzük a méretüket (big, mini ) 16/53
bemutat.htm kép beillesztése 17/53
Kép beállítása Vigyük kicsit beljebb a képet, Ha rákattintunk, jelenjen meg a nagy kép 18/53
Kép beállítása 19/53
20/53
Vissza link a kezdőoldalra 21/53
Vissza link a kezdőoldalra Legyen a link olyan típusú, méretű, mint a többi szöveg 22/53
23/53
Vissza link a kezdőoldalra 24/53
Új fejezet következik :) 25/53
A kezdőoldal menüsítése 26/53
A kezdőoldal menüsítése Alakul, de ne térjen el a betűtípus, és a betűméret is lehetne picit nagyobb! 27/53
A kezdőoldal menüsítése 28/53
A kezdőoldal menüsítése 29/53
Új fejezet következik :) 30/53
eredet.htm pici felsorolás Készítsünk egy néhány soros felsorolást, melyben elemezgetjük a Béla név eredetét, jelentését 31/53
eredet.htm pici felsorolás Másoljuk át a Vissza link kódját a bemutat.htm fájlból, és kész vagyunk! 32/53
eredet.htm Vissza link 33/53
eredet.htm Vissza link 34/53
Új fejezet következik :) 35/53
hires.htm híres Bélák Hosszas munkával összegyűjtöttük a leghíresebb Bélákat, jó lenne táblázatban megjeleníteni az adatokat 36/53
hires.htm táblázat szegélyek Rajzoljunk szegélyeket, talán olvashatóbb lesz a táblázat 37/53
hires.htm cellamagasság A szövegek alatt és felett legyen 5 px üres távolság 38/53
hires.htm cellaszélesség Legyenek szélesebbek a cellák 39/53
hires.htm első sor formázása Legyen az első sor felirata félkövér, legyen a felirat középen Legyen az első sor háttere picit sötétebb színű 40/53
Picit sötétebb szín Nyomjunk a Paint-be -t, és tegyük be a képet Vegyük fel a színt a Színválasztóval Nyissuk meg a Színek szerkesztése panelt Vegyük sötétebbre a színt Próbáljuk ki PrintScr 41/53
Picit sötétebb szín Ha megfelelő a szín, a színkód egyes összetevőinek értékét határozzuk meg hexadecimálisan 252 10 FC 16 236 10 EC 16 207 10 CF 16 Olvassuk össze, kész a hexa színkód: #FCECCF 42/53
Vissza link Másoljuk át a Vissza link kódját a bemutat.htm fájlból, és kész vagyunk! 43/53
Kifelé mutató link Bővítsük ki a hires.htm oldalt egy olyan linkkel, ami a Wikipédiának a Béla oldalára mutat. A link új oldalon nyíljon meg. 44/53
Kifelé mutató link A hires.htm fájlba írjuk bele a link vázát: Jelenítsük meg böngészőben a Wikipédia Béla oldalát Másoljuk ki a címsorból a hivatkozást A kimásolt hivatkozást szúrjuk be a hires.htm fájlba 45/53
Kifelé mutató link A kimásolt hivatkozást szúrjuk be a hires.htm fájlba Nem pontosan az fog megjelenni, ami a címsorban volt! Egészítsük ki a kódot a target=_blank paraméterrel 46/53
Új fejezet következik :) 47/53
Webhely létrehozása Mindig, minden webhelyen a kiinduló oldal elnevezése index.html. A többi oldal elnevezése bármi lehet, de tilos ékezetes karaktereket, szóközt használni! Célszerű rövid neveket alkalmazni. Az aloldalak kiterjesztése lehet.htm is (de.html is). A webhelyünk tehát egy kiinduló oldalból (index.html), és néhány aloldalból fog állni. 48/53
A webhelyünk tartalma index.html eredet.htm bemutat.htm 49/53 hires.htm
Webhely létrehozása Érdemes nyitni egy mappát (pl. Web), és ebbe elhelyezni a kiinduló oldalt, és a többi weboldalt is. Nagyobb webhelyek esetén érdemes almappákba tagolni a tartalmat, pl. külön mappába tenni a képeket! A tagolást nem lehet utólag megtenni, hiszen ez érinti a hivatkozásokat is! <img src=kepek/k2b_mini.jpg> A lényeg: a weblap mappában, és az alatta lévő mappákban legyen minden elkészült fájl! Web index.html eredet.htm hires.htm kepek k2b_mini.jpg k2b_big.jpg 50/53
Webhely létrehozása A webhely internetes elhelyezésekor minden fájt fel kell másolni a tárhelyre, mégpedig ugyanabban a szerkezetben, ahogyan elkészítettük, vagyis az almappákkal együtt! Web index.html eredet.htm hires.htm kepek k2b_mini.jpg k2b_big.jpg tárhely index.html eredet.htm hires.htm kepek k2b_mini.jpg k2b_big.jpg A saját gépünkön lévő Web mappa felel meg a tárhely kiinduló pontjának! 51/53
52/53
VÉGE VÉGE 53/53