HTML szerkesztés HTML bevezetés
•
Az internet fogalma: egy világméretű számítógép-hálózat, amely kisebb hálózatok összekapcsolódásából áll össze, a hálózatok hálózata, mely adatok továbbítását teszi lehetővé az egész világon. Rövid története: Amerikai Egyesült Államokból indult. A hatvanas évek végén az amerikai védelmi minisztérium felkérésére fejlesztették ki. Cél: legyenek elérhetőek az egyes gépeken lévő információk még akkor is, ha a hálózat egyes gépeit nukleáris támadás érné. (ARPANET ) Működési elve:
•
A számítógépek azonosítása:
•
•
minden gépet egy cím azonosít, IP cím
↔
195.70.35.182
↔
•
Szolgáltatásai: World Wide Web (www)
szimbolikus címzési rendszer (DNS rendszer) domain neves cím www.startlap.hu
•
E-mail FTP Telnet News…stb Weboldalak: Multimédiás információkat tartalmazó oldalak o Hypertext felépítésű o Leggyakoribb elemei Szöveg Kép Hivatkozás Táblázat Űrlap Keretek Animációk
Típusai: o Statikus: A weblapon a tartalom állandó. Általában szöveget, képeket, animációt tartalmaz, melyek megjelenését a látogatók nem befolyásolhatják. pl: htm, html o Dinamikus: Tartalma folyamatosan változik. Ez a változás többféle lehet: A látogatók változtathatják a tartalmat (fórum, vendégkönyv, számláló, szavazás ...), vagy a lap tulajdonosa aktualizálhatja a honlap tartalmát. Egy titkosított kapcsolaton keresztül bejelentkezve, a világ bármely tájáról lehet az oldalakat szerkeszteni. Pl: asp, aspx, php Webes szabványok: • HTML - „hiperszöveg jelölő nyelv” régebben arra használták, hogy dokumentumokat tegyenek közzé, megadják ezek tartalmát és a felépítését, és definiálják a dokumentum különböző részeit (ezekben tárolják az összes weblap szövegét és más elemeit). A weblapok különböző részeinek azonosításához elemeket használ. •
CSS - (Cascading Style Sheets) szétválasztja a tartalmat a formázástól lehetőséget ad a weboldal formázására és azok elrendezésének kialakítására. Beállíthatóak vagy lecserélhetőek a színek, a hátterek, a betűk mérete és típusa, és megadható a különböző elemek helye a weblapon.
•
JavaScript - egy szkriptnyelv különböző funkcionalitást ad a weblaphoz - például leellenőrizhető vele egy beírt szöveg (hogy jól adták-e meg vagy nem), a weblaphoz drag/drop funkcionalitás adható, gombnyomásra lecserélhető vele a lap stílusa, animálhatóak a lap elemei
Webszerkesztő programok:
Forráskódszerkesztők: Notepad (jegyzettömb), BackEdit 11, EditPlus …stb Grafikus szerkesztők (html kódot a webszerkesztő program állítja elő, WYSIWYG): FrontPage, Dreamweaver, NVU …stb
HTML fogalma, szerkezeti felépítése HTML fogalma: • Hyper Text Markup Language: egyszerű programozási nyelv, amivel weboldalak készíthetők •
Karaktereket használ: html vagy htm kiterjesztéssel kell menteni
•
Parancsszavak: számítógépnek szól, < >kacsacsőrök közé írjuk őket. A képernyőn nem fog megjelenni, de a tartalmat formázni fogja, az oldal kinézetét módosítja.
•
Tartalma: amit nem írunk kacsacsőrök közé az a képernyőn meg fog jelenni, ki fog íródni a weblap megnyitásakor a képernyőre
HTML felépítése: Minden HTML formátumú szövegfájl a utasítással kezdődik és a záró utasítással
végződik.
Ezen
elemek
közé
kell
írni
a
teljes
dokumentumot
a
formázóutasításokkal és egyéb parancsokkal együtt. A HTML dokumentumot három részre lehet bontani a fejlécre és dokumentumtörzsre valamint a láblécre. Ez utóbbi el is hagyható. A dokumentumot a fejlécelemek vezetik be, melyek kezdetét a utasítás jelzi. A fejlécelemek között szokás a dokumentumcímet megadni, mely címet a <TITLE> és a utasítások közé kell zárni (a két tag közé írt szöveg a böngésző címsorában jelenik majd meg). A fejlécet a utasítás zárja. A dokumentumtörzs - amit voltaképpen a WEB-böngésző meg fog jeleníteni a munkaablakában - a fájl és utasítások közötti része. Ezen elemek között kell elhelyezni mindent: a szöveget, hivatkozásokat, képeket, stb. (A keretek és a JavaScript kódok kivételével, melyeket külön fájl vagy a fejléc tartalmazza.) HTML állományok elemei, funkciójuk 1. szövegek: amit megjelenítünk, kiíratunk a képernyőre. Csak egyszerűen be kell gépelni az ilyen szöveget, majd a formázni kívánt részeit vegyük körül a megfelelő formázó parancsokkal. Tekintve, hogy nem mindenütt olvashatóak a speciális magyar karakterek, azokat célszerű kicserélni a megfelelő entitásaikra.
2. parancsszavak: ami a megjelenített szöveget formázzák, képet, linket állítanak elő a dokumentum megfelelő területein. A parancsszavak párban fordulnak elő (nyitó és zárótaggal rendelkeznek a két tag között levő szöveget formázzák meg), néhány kivételtől eltekintve (
![]()
,
,
). A záró parancs a nyitó parancstól egy perjelben különbözik csak, illetve a zárótag már nem tartalmaz paramétereket. 3. paraméterek: (opciók, attribútumok): amik a parancsok működését módosítják. A paramétereket mindig a nyitótaggal közös kacsacsőrök közé írjuk, a nyítótag parancsszavától, vagy többi paramétertől egy szóközzel választva el. Egy nyitótag tetszőleges számú paramétert tartalmazhat, ha valamely paramétert nem állítjuk be, akkor annak értéke a böngésző alapértelmezett értéke lesz. A paraméterek név= „érték” párból állnak. A paraméter neve a parancstól függ és azon belül is hogy mely tulajdonságát akarjuk állítani a parancsnak. Neve ezért rögzített. Az értéket mindig idézőjelek közé kell írni, érékét egy adott intervallumból szabadon választhatjuk meg. (Egyetlen kivétel a
parancs noshade paramétere, melynek nincs értéke, ezért csak a paraméter nevének begépelése szükséges) 4. entitás: helyettesítő karaktersorozat. Egy speciális karakter (pl. ő, é, <, >,&, …) mely valamilyen egyéb okból kifolyólag nem tudnánk használni (pl. parancsnak értené a gép a kacsacsőrt, és nem a képernyőre írná ki) helyettesítő karaktersorral látjuk el. E karaktersor helyett a böngésző megjelenítéskor a speciális karaktert írja majd a képernyőre. (pl. entitásokra: õ é < > & …- mindig & jellel kezdődik és pontosvessző zárja) Szöveg, grafika elhelyezése HTML oldalon Szöveg elhelyezése Igen egyszerű, gépeljük be a szöveget. Ha formázni szeretnénk akkor megtehetjük
vastagítás; -dölt betű, -aláhúzás, -betűformázás parancsokkal. A parancs paraméterei color-betűszínt állít (értéke egy hexaszínkód pl. #ABC15F), type-betűtípust módosít (értéke egy szó pl Verdana, Arial, courier), size-betűméretet állít (érétke 1 és 7 közötti egész szám, 1 a legkisebb, 7 a legnagyobb méret. Normál méretnek a 3 felel meg) Sortörésre a
parancs szolgál, az enter-t a böngésző egy szóköznek veszi, akárcsak a több szóközt. Más igazításra a parancs szolgál.
Grafika elhelyezése Grafika, kép elhelyezésére az
![]()
parancs szolgál. Ahhoz, hogy a grafika a képernyőn látszódjon (és ne csak a helye, törött kép ikonnal) az kell, hogy a képi fájl (pl. alma.gif) ugyanabban a könyvtárban helyezkedjen el, mint a rá hivatkozó, őt megjelenítő html fájl. Az
![]()
parancs paraméterei: •
src: az src paraméter a képfájl elérési útvonalát adja meg fájlnévvel és kiterjesztéssel együtt. Megadása kötelező!
•
alt: az alt paraméterrel a kép címét adhatjuk meg, értéke egy szöveg, ez a szöveg fog kiíródni abban az esetben ha a kép fölé állunk az egérrel, vagy ha a kép valamilyen oknál fogva még nem jelent meg)
•
width/height: a kép szélességét/magasságát adhatjuk meg ezen paraméterek segítségével, képpontokként. Célszerű egyszerre csak az egyik paramétert állítani ezek közül, mert úgy a kép méretarányosan lesz átméretezve, míg egyébként torzulhat!
•
align: a kép igazítására szolgál. 5 féle értéket vehet fel: top/bottom/center - a képpel egy sorban(1 sornyi szöveg), de felső/alsó/középső részéhez igazítva van a szöveg, left/right amikor a kép mellett több sor szöveg található de a kép bal/jobb oldalán van a szövegnek.
•
border: a kép keretének vastagságát adja meg. Értéke egy szám.
•
hspace/vspace: a kép melletti vízszintes/függőleges térközt (ha úgy tetszik: margókat) határozza meg.
HTML lapok közötti kapcsolatok felépítése A HTML oldalak lényegét az egymásra és egymás tartalmára való hivatkozások jelentik (vagyis a hypertext lehetőség). A dokumentum bármely részéhez hivatkozást (linket) helyezhetünk el, amelyet aktivizálva (rá kattintva), a hivatkozottal összefüggésben lévő szöveghez jutunk el. A hivatkozó utasítások megjelenési formája sokféle lehet, a célobjektumtól függően: •
A legegyszerűbb esetben a hivatkozás az adott fájl egy távolabbi részére mozdítja a böngészőablakot. A hivatkozás kezdetét a
utasításnak a dokumentumban való elhelyezése jelzi. A hivatkozást a utasítás zárja le. Ez az elem pár közrezárhat szövegrészt, képet, stb. A közrezárt részt a böngészőprogram a dokumentum többi részétől eltérően jeleníti meg (pl. aláhúzással, kerettel, ...), az egérkurzorral fölé érve a mutató alakja megváltozik. Rákattintva a dokumentumnak arra a pontjára ugrik ahova könyvjelzőt illesztettünk be. Azt a „könyvjelzőt”
(szövegrészt), ahová a hivatkozás mutat a
és a utasítások kell, hogy határolják. •
A legtöbb esetben ha egy hivatkozás egy másik fájlra/dokumentumra mutat, a hivatkozás kezdetét az
utasítás jelzi, a hivatkozást ekkor is a utasításelem zárja le. Mind a protokoll, mind az elérési út elhagyható, amennyiben azonos URL-en van a kiindulási dokumentum és a hivatkozott. A hivatkozott fájlnak e példában nincs külön névvel (könyvjelzővel) jelölt része. Működés szempontjából a fentebb leírtak vonatkoznak erre a hivatkozási formára is.
•
A legbonyolultabb esetben a hivatkozás egy másik fájl valamely pontosan meghatározott
részére
mutat.
A
hivatkozás
kezdetét
a
utasítás jelzi, és a hivatkozást szintén a elem zárja le. Ebben az esetben a hivatkozott fájl kell, hogy tartalmazzon egy olyan részt (könyvjelzőt), ahová a hivatkozás mutat. Ezt a részt a
és a utasítások határolják. •
Ha a hivatkozást más ablakban szeretnénk megnyitni, mint amiből hivatkoztunk rá, úgy az
paraméterei között a TARGET=”ablaknév”-nek is szerepelnie kell.
A minimális HTML fájl <TITLE> cím Ide kerül az összes tartalom Formátum parancsok: • Karakterformázás: dőlt szöveg
félkövér aláhúzott <SUP>2 felső index <SUB>2 alsó index minden karakter azonos szélességű •
Bekezdésre vonatkozó parancsok: bekezdés (indent) jobbra igazított bekezdés
első szintű (fő)cím
második szintű cím
(példa.: középre igazított cím
"left", "right" és "justify" is lehet center helyett )
új sor, bekezdésen belüli sortörés <EM> kiemelés <STRONG> erős kiemelés Idézet, gyakran dőlt
vízszintes vonal (példa:
)
•
Háttér megadása: vagy stb
•
Kép beillesztése 
•
Listák készítése: rendezett (ordered) lista - lista elem
- lista elem
rendezetlen (unordered) lista
Kapcsolódó feladatok: 1. Használjuk a Web Design Toy nevű programot az eredmény azonnali megjelenítésére! •
Egyszerű szövegformázás: a HTML parancsok segítségével formázzuk meg a szoveg.txt állományban található szöveget, az abban leírtaknak megfelelően!
Lehetséges megoldás:
•
Listakezelés HTML parancsok segítségével: formázzuk meg a lista.txt állományban található szöveget, az előző feladathoz hasonlóan!
Lehetséges megoldás:
•
Kép és szöveg igazítása: Helyezzük el a HTML/KEPEK/kepek.txt állományban található szöveghez a leírásnak megfelelően a haz.jpg képet!
Lehetséges megoldás: Kép és szöveg viszonya
Kép a lap közepén
Szöveg a kép tetejéhez igazítva
Középre igazított szöveg
A kép lábához igazított szöveg
Jelen példában a balra igazított kép mellé hosszabb szöveget írtunk.
Ez a példa jobbra igazított képet mutat. Hosszabb szöveg esetén a szöveg a kép alatt az eredeti margóig íródik.
•
Készítsük el az alábbi képen látható weboldalt.
Lehetséges megoldás: Tyúklap Anyám tyúkja
Ej mi a kő tyúkanyó, kend
A szobába lakik itt bent?
OM honlapja
Források: 1. http://www.vizsgazz.hu/index.php?option=com_content&task=view&id=62&Itemid=223 2. http://www.mimi.hu/informatika/html.html 3. vajk.mile.hu/reka/gazdinfo/III19.doc 4. http://www.osztrak.sulinet.hu/webiskola/htmlalapok/kepek/kepek.html 5. Fiala Tibor: HTML alapok c. összeállítás
