Információs technológiák 1. Gy: HTML alapok
B IT M A N
1/53
2017.09.28 B ITv: M AN
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
B IT M A N
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
B IT M A N
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
B IT M A N
index.html Ha kész a fájl, nyissuk meg böngészőben
5/53
2x
B IT M A N
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
B IT M A N
w3schools.com HTML color names
7/53
B IT M A N
index.html Alakul, de jobb lenne a
szöveg: – Arial betűtípussal, – Sötétkék színnel
8/53
B IT M A N
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
B IT M A N
Új fejezet következik
:)
10/53
B IT M A N
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
B IT M A N
bemutat.htm
12/53
B IT M A N
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
B IT M A N
bemutat.htm – kis csinosítás
14/53
B IT M A N
bemutat.htm – kép beillesztése
A kép ne legyen túl nagy méretű
(részlet), de ha rákattintunk, jelenjen Web meg a nagy kép! – 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
15/53
B IT M A N
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
B IT M A N
bemutat.htm – kép beillesztése
17/53
B IT M A N
Kép beállítása
Vigyük kicsit beljebb a képet, Ha rákattintunk, jelenjen meg a nagy kép 18/53
B IT M A N
Kép beállítása
19/53
B IT M A N
20/53
B IT M A N
Vissza link a kezdőoldalra
21/53
B IT M A N
Vissza link a kezdőoldalra
Legyen a link olyan típusú, méretű, mint a többi szöveg 22/53
B IT M A N
23/53
B IT M A N
Vissza link a kezdőoldalra
24/53
B IT M A N
Új fejezet következik
:)
25/53
B IT M A N
A kezdőoldal menüsítése
26/53
B IT M A N
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
B IT M A N
A kezdőoldal menüsítése
28/53
B IT M A N
A kezdőoldal menüsítése
29/53
B IT M A N
Új fejezet következik
:)
30/53
B IT M A N
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
B IT M A N
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
B IT M A N
eredet.htm – Vissza link
33/53
B IT M A N
eredet.htm – Vissza link
34/53
B IT M A N
Új fejezet következik
:)
35/53
B IT M A N
hires.htm – híres Bélák
Hosszas munkával össze-
gyűjtöttük a leghíresebb Bélákat, jó lenne táblázatban megjeleníteni az adatokat
36/53
B IT M A N
hires.htm – táblázat szegélyek Rajzoljunk szegélyeket,
talán olvashatóbb lesz a táblázat
37/53
B IT M A N
hires.htm – cellamagasság A szövegek alatt és felett
legyen 5 px üres távolság
38/53
B IT M A N
hires.htm – cellaszélesség Legyenek szélesebbek a
cellák
39/53
B IT M A N
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
B IT M A N
Picit sötétebb szín Nyomjunk PrintScr -t, és tegyük be a képet
a Paint-be 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
41/53
B IT M A N
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 – 25210 – FC16 – 23610 – EC16 – 20710 – CF16 Olvassuk össze, kész a hexa színkód: #FCECCF
42/53
B IT M A N
Vissza link Másoljuk át a Vissza link kódját a bemutat.htm fájlból, és
kész vagyunk!
43/53
B IT M A N
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
B IT M A N
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
B IT M A N
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
B IT M A N
Új fejezet következik
:)
47/53
B IT M A N
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
B IT M A N
A webhelyünk tartalma
index.html
eredet.htm
bemutat.htm hires.htm 49/53
B IT M A N
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! Web
A lényeg: a weblap mappában, és az alatta lévő mappákban legyen minden elkészült fájl!
index.html eredet.htm hires.htm kepek k2b_mini.jpg k2b_big.jpg
50/53
B IT M A N
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! tárhely
Web index.html
index.html
eredet.htm hires.htm
eredet.htm hires.htm kepek
kepek k2b_mini.jpg k2b_big.jpg
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
B IT M A N
52/53
B IT M A N
VÉGE 53/53
B IT M A N
