Információs technológiák 1. Gy: HTML alapok

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "Információs technológiák 1. Gy: HTML alapok"

Ágnes Bogdánné
6 évvel ezelőtt
Látták:

1 Információs technológiák 1. Gy: HTML alapok 1/53 B ITv: MAN

2 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

3 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

4 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

5 index.html Ha kész a fájl, nyissuk meg böngészőben 2x 5/53

6 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

7 w3schools.com HTML color names 7/53

8 index.html Alakul, de jobb lenne a szöveg: Arial betűtípussal, Sötétkék színnel 8/53

9 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

10 Új fejezet következik :) 10/53

11 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

12 bemutat.htm 12/53

13 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

14 bemutat.htm kis csinosítás 14/53

15 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

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

17 bemutat.htm kép beillesztése 17/53

18 Kép beállítása Vigyük kicsit beljebb a képet, Ha rákattintunk, jelenjen meg a nagy kép 18/53

19 Kép beállítása 19/53

20 20/53

21 Vissza link a kezdőoldalra 21/53

22 Vissza link a kezdőoldalra Legyen a link olyan típusú, méretű, mint a többi szöveg 22/53

23 23/53

24 Vissza link a kezdőoldalra 24/53

25 Új fejezet következik :) 25/53

26 A kezdőoldal menüsítése 26/53

27 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

28 A kezdőoldal menüsítése 28/53

29 A kezdőoldal menüsítése 29/53

30 Új fejezet következik :) 30/53

31 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

32 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

33 eredet.htm Vissza link 33/53

34 eredet.htm Vissza link 34/53

35 Új fejezet következik :) 35/53

36 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

37 hires.htm táblázat szegélyek Rajzoljunk szegélyeket, talán olvashatóbb lesz a táblázat 37/53

38 hires.htm cellamagasság A szövegek alatt és felett legyen 5 px üres távolság 38/53

39 hires.htm cellaszélesség Legyenek szélesebbek a cellák 39/53

40 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

41 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

42 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 FC EC CF 16 Olvassuk össze, kész a hexa színkód: #FCECCF 42/53

43 Vissza link Másoljuk át a Vissza link kódját a bemutat.htm fájlból, és kész vagyunk! 43/53

44 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

45 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

46 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

47 Új fejezet következik :) 47/53

48 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

49 A webhelyünk tartalma index.html eredet.htm bemutat.htm 49/53 hires.htm

50 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

51 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 52/53

53 VÉGE VÉGE 53/53

Hasonló dokumentumok

Információs technológiák 2. Gy: CSS, JS alapok

Információs technológiák 2. Gy: CSS, JS alapok 1/69 B ITv: MAN 2017.10.01 Ismétlés Van egy Web nevű mappánk, ebben vannak az eddig elkészített weboldalak (htm, html) képek (jpg, png). Logikai felépítés