HTML szerkesztés. HTML bevezetés

Átírás

1 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 szimbolikus címzési rendszer (DNS rendszer) domain neves cím Szolgáltatásai: World Wide Web (www)

2 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:

3 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 <HTML> utasítással kezdődik és a </HTML> 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 <HEAD> utasítás jelzi. A fejlécelemek között szokás a dokumentumcímet megadni, mely címet a <TITLE> és a </TITLE> 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 </HEAD> 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 <BODY> és </BODY> 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.

4 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 (<img>, <hr>, <br>). 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 <hr> 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 <b>vastagítás; <i>-dölt betű, <u>-aláhúzás, <font>-betűformázás parancsokkal. A <font> 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 <br> 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 <div align= left/right/center/justify > parancs szolgál.

5 Grafika elhelyezése Grafika, kép elhelyezésére az <img> 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 <img> 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 <A HREF="#jelző"> utasításnak a dokumentumban való elhelyezése jelzi. A hivatkozást a </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

6 (szövegrészt), ahová a hivatkozás mutat a <A NAME="jelző"> és a </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 <A HREF="protokoll://elérési_út/fájlnév.kit"> utasítás jelzi, a hivatkozást ekkor is a </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 <A HREF="protokoll://elérési_út/fájlnév.kit#jelző"> utasítás jelzi, és a hivatkozást szintén a </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 <A NAME="jelző"> és a </A> utasítások határolják. Ha a hivatkozást más ablakban szeretnénk megnyitni, mint amiből hivatkoztunk rá, úgy az <A> paraméterei között a TARGET= ablaknév -nek is szerepelnie kell. A minimális HTML fájl <HTML> <HEAD> <TITLE> cím </TITLE> </HEAD> <BODY> </BODY> </HTML> Ide kerül az összes tartalom Formátum parancsok: Karakterformázás: <FONT FACE= "arial" > <FONT SIZE= "4" > <FONT COLOR= "red" > <I> dőlt szöveg </I>

7 <B> félkövér </B> <U> aláhúzott </U> <SUP>2</SUP> felső index <SUB>2</SUB> alsó index <TT> minden karakter azonos szélességű </TT> Bekezdésre vonatkozó parancsok: Háttér megadása: Kép beillesztése <DIR> bekezdés (indent) </DIR> <P ALIGN=right> jobbra igazított bekezdés </P> <H1> első szintű (fő)cím </H1> <H2> második szintű cím </H2> <H3> </H3> <H4> </H4> <H5> </H5> <H6> </H6> (példa.: <H2 ALIGN=center> középre igazított cím </H2> "left", "right" és "justify" is lehet center helyett ) <BR> új sor, bekezdésen belüli sortörés <EM> kiemelés </EM> <STRONG> erős kiemelés </STRONG> <CITE> Idézet, gyakran dőlt </CITE> <HR> vízszintes vonal (példa: <HR SIZE=4 WIDTH=50% ALIGN=left>) <BODY BACKGROUND="zaszlo1.gif" > vagy <BODY BGCOLOR="#E0FFFF"> stb <IMG SRC="labda.gif"> <IMG SRC="Laci.gif" ALIGN="Top" WIDTH="50" HEIGHT="50" ALT="helyette">

8 Listák készítése: <OL> rendezett (ordered) lista <LI> lista elem </LI> <LI> lista elem </LI> </OL> <UL> rendezetlen (unordered) lista </UL> <UL type="circle"> <LI>lista elem <LI>lista elem </UL> <UL type="square"> <LI>lista elem <LI>lista elem </UL> Kapcsolódó feladatok: 1. Használjuk a Web Design Toy nevű programot az eredmény azonnali megjelenítésére! Lehetséges megoldás: 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!

9 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: 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! <H2 CLASS="s">Kép és szöveg viszonya</h2> <P align=center><img SRC="haz.jpg" align=center><br>kép a lap közepén</p> <P><IMG SRC="haz.jpg" align=top>szöveg a kép tetejéhez igazítva</p> <P><IMG SRC="haz.jpg" align=middle>középre igazított szöveg</p> <P><IMG SRC="haz.jpg" align=bottom>a kép lábához igazított szöveg</p> <P><IMG SRC="haz.jpg" align=left>jelen példában a balra igazított kép mellé hosszabb szöveget írtunk. <BR clear=left></p> <P><IMG SRC="haz.jpg" align=right>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. </P>

10 Készítsük el az alábbi képen látható weboldalt. Lehetséges megoldás: <html> <head> <title>tyúklap</title> </head> <body text="#000080" bgcolor="#00ffff"> </body> </html> <h1>anyám tyúkja</h1> <p>ej mi a kő tyúkanyó, kend <br> A szobába lakik itt bent?</p> <p> <img border="0" src="tyuk.gif" width="238" height="227"></p> <p><a href=" honlapja</a></p> Források: vajk.mile.hu/reka/gazdinfo/iii19.doc Fiala Tibor: HTML alapok c. összeállítás