Számítógépek alkalmazása 1 

 2002/2003. év - I. félév 

Az internetes publikálás alapjai

* Kérdés, észrevétel   Ő Vissza   

A gyakorlat témája: Saját weblap létrehozása, grafika beillesztésével.

 • Bevezetés  

A World Wide Web multimédiás Internet-szolgáltatás, szövegek, grafikák, hangok, mozgóképek összekapcsolt megjelenítését, elérhetőségét teszi lehetővé.
Az objektumok között (melyek a világ bármely Web-kiszolgálóján lehetnek) dinamilus kapcsolatok hozhatók létre, melyeket interaktív módon befolyásolhatunk
A Web története a genfi székhelyű CERN (Centre Européenpour la Récherche Nucleare) (European Organization for Nuclear Research)  Európai Részecskekutató Laboratóriumban kezdődött.

1989-ben Tim Berners-Lee, a CERN tudósa megalkotta a World Wide Web alapjait. A "Web" eredetileg a világ különböző egyetemein és kutatóintézetein egymással együttműködő fizikusainak gyors és állandó összeköttetés és információáramlást lehetővé tevő projektjeként indult.
Ma milliók használják az akadémiai, kormányzati és kereskedelmi szférában egyaránt.

(forrás: http://public.web.cern.ch/Public/ACHIEVEMENTS/web.html)

A Web részét képezi a
HTML (Hyper Text Markup Language = Dokumentumleíró nyelv)
URL (Uniform Resource Locator = egységes forrásazonosító)
HTTP (Hyper Text Transfer Protocol =A Dokumentumleíró nyelv adatátviteli protokolja)

 • HTML  

A HTML (Hyper Text Markup Language) egy strukturált dokumentum-leíró nyelv. Jellegzetessége, hogy legtöbb utasításának (angolul tag) van "nyitó", és "záró" formája; az utasítás hatálya a kettő közötti részre terjed ki. Az egyes tag-ek természtesen egymásba is ágyazhatók.

 • Tartalom  

1. A HTML dokumentum összeállításának alapvető parancsai
2. Szöveg-formázási utasítások
3. Dokumentumok összekapcsolása
4. Stílusok definiálása és alkalmazása (külön fájlban)
5. Mintafeladat

 • Alapvető parancsok  

<HTML> … </HTML>

Az első utasítás, amellyel egy HTML dokumentum kezdődik, jelzi a különféle alkalmazások számára, hogy a dokumentum HTLM nyelven íródott.
Záró utasítása a dokumentum utolsó sora.

<HEAD> … </HEAD>

Bevezető (fejléc?). Szokás szerint ez a második utasítás, mert a tartalmát a megjelenítők a dokumentumok elejére helyezik. Mint kezdő tartalom alkalmas indexek, katalógusok elkészítésére.

Fontosabb talán, hogy bizonyos tag-ek csak a HTML dokumentum fejlécébe helyezhetők el: pl.: főcím (TITLE), indexáló (ISINDEX), bázis (BASE), azonosító (NEXTID), állománykapcsoló (LINK), metacím (META).

<TITLE> … </TITLE>

Főcím. A böngészők ezt az ablak címsorában jelentetik meg.

A dokumentum címe legyen a szövegtől függetlenül is érthető, hiszen az olvasó a hivatkozási listákban legtöbbször a címmel találkozik!

A TITLE  utasítás csak a HEAD utasításon belül helyezhető el, csak szöveget tartalmazhat, beágyazott utasítás nem lehet benne.

Példa:

<HTML>
<HEAD>
 <TITLE>Ez a dokumentum címe<TITLE>
</HEAD>
</HTML>
 		 

<BODY> … </BODY>

Szövegtörzs: tulajdonképpen a HEAD utasítás kiegészítője.

Paramétereként megadható pl. a dokumentum háttérszíne vagy háttérképe, a szöveg, és a hivatkozások színe.

A színek megadhatók névvel (pl. silver), vagy számokkal (pl. rgb(192,192,192), vagy #C0C0C0). A három szám az adott szín piros (red), zöld (green), és kék (blue) összetevőit jelöli a 0 és 255 közti tartományban, decimális, vagy hexadecimális (tizenhatos számrendszer-béli) formátumban.

További részletek és színminták a stílusokról szóló résznél!

<H1> … </H1>

Címsorok. (Heading1) Hat hierarhikusan megjelenítődő alcím használatára van mód, amelyeket számok jelölnek: H1, H2, H3 stb. Az első a leghangsúlyosabb alcím, a H6-os a legkevésbé. Nem tanácsos kihagyni lépcsőket, mert összezavarhatja az olvasót.

Példa:

<HTML>
<HEAD>
<TITLE>Ez a dokumentum címe<TITLE>
</HEAD>
<BODY bgcolor="#EEEECC" text="#000000">
 <H1>Első rész</H1>
<H2>Első fejezet</H2>
<H2>Második fejezet</H2>
<H2>Harmadik fejezet</H2>
<H1>Második rész</H1>
</BODY>
</HTML>

Első rész


Első fejezet


Második fejezet


Harmadik fejezet


Második rész

<P> … </P>

Bekezdés (Paragraph). A kezdő és befejező utasítás között található szöveget a megjelenítők bekezdésként értelmezik. Az utasítás paramétereként megadható pl. a bekezdés tördelési módja.

Példa:

<HTML>
<HEAD>
<TITLE>Ez a dokumentum címe<TITLE>
</HEAD>
<BODY bgcolor="#EEEECC">
<H1>Első rész</H1>
<H2>Első fejezet</H2>
 <P>Ez itt egy bekezdés.</P>
<P align="center">Ez egy újabb,
középre igazítva!</P>
<P align="right">Ez pedig jobboldalt.</P>
<H2>Második fejezet</H2>
<H2>Harmadik fejezet</H2>
<H1>Második rész</H1>
</BODY>
</HTML>

Első rész


Első fejezet


Ez itt egy bekezdés


Ez egy újabb, középre igazítva!


Ez pedig jobboldalt.


Második fejezet


Harmadik fejezet


Második rész

 • Szöveg-formázási utasítások  

Karakter(sorozat) formázására szolgáló utasítások. A HTML újabb verzióiban az alábbiak helyett stílusok is alkalmazhatók (l. stílusok definiálása és alkalmazása (külön fájlban))!

<B> … </B>

Félkövér (Bold). A kezdő és befejező utasítás közötti szöveg félkövér betükkel jelenik meg.

<I> … </I>

Dőlt (Italic). A kezdő és befejező utasítás közötti szöveg dőlt betükkel jelenik meg.

<U> … </U>

Aláhúzott (Underlined). A kezdő és befejező utasítás közötti szöveg aláhúzott betükkel jelenik meg.

Példa:

</P>Egyes karakterek <B>fékövéren</B>,
mások <I>dőlten</I>,
megint mások <U>aláhúzva</U>
jelennek meg.</P>

Egyes karakterek fékövéren, mások dőlten,
megint mások aláhúzva jelennek meg.

<HR>

Vízszintes vonal (Horizontal Ruler). Vízszintes vonalat megjelenítő üres utasítás (azaz nincs "záró" párja).

Paraméterként megadható a vonal igazítása (ALIGN=LEFT | RIGHT | CENTER), vastagsága (SIZE=xx) pixelben, hossza (WIDTH="xx% | xx") a szélesség százalékában, vagy pixelben.

Példa:

<HR align="left" size=3 NoShade width="100%">

<BR>

Soremelés (BReak). Üres utasítás. Az utasítást követő szöveg új sorban kezdődik.

Példa:

<P>A szöveg a soremelés<BR> utasítás után új sorban folytatódik.<P>
A szöveg a soremelés
utasítás után új sorban folytatódik.

<PRE> … </PRE>

Elő-formázott szöveg (PReformattad text). Az egyetlen olyan utasítás, amely megőrzi az eredeti szöveg sortördelését, és állandó szélességő betűkkel jelenik meg. Tabulált adatok készítésére alkalmas; a tabulálás azonban kerülendő, a betük pontos elhelyezéséhez a szóközöket ajánlott használni.

A PRE utasításba  WIDTH, ADDRESS, Hn bekezdés-formázó utasítások nem ültethetők be. Paramétere: WIDTH (Szélesség), mely meghatározza az egy sorban megjeleníthető betűk számát (rendszerint 80 karakter).

Példa:

<PRE>
Nappali      16.78 m2 
Konyha        2.67 m2
Fürdő         2.67 m2
Szülői háló   8.28 m2
 </PRE>
Nappali      16.78 m2 
Konyha        2.67 m2
Fürdő         2.67 m2
Szülői háló   8.28 m2
Nappali      16.78 m2 
Konyha        2.67 m2
Fürdő         2.67 m2
Szülői háló   8.28 m2

Nappali      16.78 m2  Konyha        2.67 m2 Fürdő         2.67 m2 Szülői háló   8.28 m2

 • Dokumentumok összekapcsolása  

<IMG>

Kép beillesztése (IMaGe). Üres utasítás, amely különböző (GIF, JPG, PNG, stb) formátumú raszterképet illeszt a dokumentumba. (PRE utasításba nem ágyazható.)

Paraméterei:

SRC="…" kötelező paraméter: URL cím.

ALIGN={Left | Center | Right} Igazodás – opcionális paraméter: a kép a szöveg tetejéhez, tengelyéhez aljához igazodik.

ALT="…" Alternatíva - opcionális paraméter: késleltetett (vagy sikertelen) betöltésnél, illetve ha az egér-kurzor a kép fölött időzik a kép helyett illetve fölött az alternatív szöveg jelenik meg.

WIDTH / HEIGHT="…" A kép-méret - opcionális paraméter: a megjelenített kép méretei adhatók meg. A torzított megjelenítés is megengedett, de ez általában a képminőség romlásával jár! A méretek megadása némileg gyorsítja a lap megjelenését.

Példa:

<IMG src="images\fileneve.png"
align="right" alt="Minta-kép fölirata"
width="100" height="50">
Minta-kép fölirata

 
 

<A> … </A>

Csatoló (Anchor). Kapcsolatot létesít a HTML dokumentumon belül, illetve egy másik dokumentum, vagy annak része között. A kezdő és befejező utasítás közé szöveg vagy kép is illeszthető, de a csatolásra utaló információ az utasítás paramétereivel jelennek meg.

Paraméterei:

A NAME paraméterrel a HTML dokumetumon belüli kapcsolódási pont nevét adhatjuk meg.

A HREF paraméterrel a hivatkozás címét adhatjuk meg. Ha ez külső dokumentum, helyét URL címmel kell megadni. Ha belső, elég a (relatív) elérési útvonal, és/vagy a fájlnév. Ha csak egy címet/útvonalat adunk meg, és a hivatkozott helyen található index.html nevű fájl, az automatikusan megjelenítésre kerül.

METHOD, URN, TITLE opcionális paraméterek.

Példa:

<P>Ebben a szövegben van egy <A name="ide">pont</A>, ahová bárhonnan odougorhatunk, ha elhelyezünk egy <A href="#ide">hivatkozást</A>.</P>

Ebben a szövegben van egy pont, ahová bárhonnan odougorhatunk, ha elhelyezünk egy hivatkozást.
<P>A fájlnév megadásával más dokumentumból is elérhető: <A href="fileneve.html#ide">így</A>.</P>

A fájlnév megadásával más dokumentumból is elérhető: így.

<P><A href="http://www.star.bme.hu/help/" target="_new">
<IMG src="logo.png" align="left" alt="eltűnt?" border="0"></A>
Végül a mellékelt képre kattintva,
az (URL-lel) adott könyvtárban (remélhetőleg) található index.html fájlt jelenítjük meg (egy új ablakban).</P>

eltűnt?Végül a mellékelt képre kattintva, az (URL-lel) adott könyvtárban (remélhetőleg) található index.html fájlt jelenítjük meg (egy új ablakban).

 • Mintafeladat  

Ha saját home könyvtárunkban (S:\) létrehozunk egy PUBLIC_HTML nevű könyvtárat, annak tartalma automatikusan "megjelenik" az interneten, a http://www.star.bme.hu/~loginnév URL címen.

Első lépésként e könyvtárban hozzunk létre egy index.html nevű fájlt – mint már szóltunk róla, a fönti címet beírva a böngészők automatikusan e fájlt jelenítik meg. Ez lesz tehát a nyitó-oldalunk.

Példa:

<HTML>
<HEAD>
<TITLE>KOVACS Monika Weblapja</TITLE>
</HEAD>

<BODY bgcolor="#EEEECC">

<IMG SRC="images/kovmon.jpg">
<H1>KOVÁCS Mónika Weblapja</H1>
<P>A Budapesti Műszaki és Gazdaságtudományi Egyetem Építészmérnöki Karának hallgatója vagyok</P>

<H2>Tanulmányaim:</H2>
<UL>
<LI><A HREF="SZG1">Számítógépek alkalmazása 1.</A></LI>
<LI>Ábrázoló Geometria 1.</LI>
<LI>Matematika</LI>
<LI>Rajz</LI>
</UL>

</BODY>
</HTML>

KOVÁCS Mónika Weblapja

A Budapesti Műszaki és Gazdaságtudományi Egyetem Építészmérnöki Karának hallgatója vagyok

Tanulmányaim:

Ha nincs index.html, akkor a webszerver beállításától függően vagy a könyvtár tartalma, vagy semmi sem jelenik meg. Tehát, ha nem akarjuk láthatóvá tenni a könyvtárunk szerkezetét és tartalmát, mindenképp helyezzünk el egy index.html fájlt a könyvtárban. Ez természetesen az alkönyvtárakra is igaz!

Mint látható, máris elhelyeztünk egy linket a később létrehozandó SZG1 alkönyvtárra.

A képeket egy külön IMAGES alkönyvtárba tegyük.

Következő lépésként hozzunk létre a PUBLIC_HTML könyvtárunkban az előbb hivatkozott SZG1 alkönyvtárat, és ide is készítsünk egy index.html fájlt, amibe beilleszthetjük logo-fájlunkat!

A képeket most is az IMAGES könyvtárba tegyük!

Példa:

<HTML>
<HEAD>
<TITLE>Számítógépek alkalmazása 1</TITLE>
</HEAD>

<BODY bgcolor="#EEEECC">

<H1>Számítógépek alkalmazása 1</H1>

<H2>Feladataim:</H2>
<UL>

<LI><IMG src="../images/lepke.gif"></LI>

<LI><A href="allasajanlat.html">
<IMG src="../images/logo.png"><BR>
Állásajánlat</A></LI>

<LI>Helyiséglista</LI>

<LI>Csarnokvégfal</LI>

</UL>

</BODY>
</HTML>

Számítógépek alkalmazása 1

Feladataim: