Az internetes publikálás alapjai

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) strukturált dokumentumok leírónyelve, mely a

HTML elemek

Struktúra elemek

A legfontosabb HTML parancsok:

1. A HTLM dokumentum összeállításának alapvető parancsai

2. Tördelési utasítások

3. Hogyan kapcsoljunk a HTLM dokumentumhoz egy másik dokumentumot

4. Stílusok definiálása és alkalmazása

5. Mintafeladat

1. A HTML dokumentum összeállításának alapvető parancsai

<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.
A záró utasítása a dokumentum utolsó sora.

<HEAD> … </HEAD>

Bevezető. 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.

Példa:

<HTML>
<HEAD>Ez a dokumentum bevezetője</HEAD>
</HTML>

(A bevezetőben a következő utasítások helyezhetők el: főcím (TITLE), indexáló (ISINDEX), bázis (BASE), azonosító (NEXTID), állománykapcsoló (LINK), metacím (META). Itt csak a főcím és a állománykapcsoló utasítást ismertetjük.)

3. <TITLE> … </TITLE>

Cím.

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 Windows programok a címet az ablak felett is megjelentetik.

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>
Ez pedig a címet kiegészítő bevezető.</HEAD>
</HTML>

4. <BODY> … </BODY>

Szövegtörzs.

5. <H1> … </H1>

Alcím. (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 dokumentuma cime<TITLE>
Ez pedig a címet kiegészítő bevezető.</HEAD>
<BODY>
<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>

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

Példa:

<HTML>
<HEAD>
<TITLE>Ez a dokumentuma cime</TITLE>
Ez pedig a címet kiegészítő bevezető.</HEAD>
<BODY>
<H1>Első rész</H1>
<P>Ez itt egy bekezdés</P>
<P>Ez itt egy újabb bekezdés</P>
<H2>Első fejezet</H2>
<H2>Második fejezet</H2>
<H2>Harmadik fejezet</H2>
<H1>Második rész</H1>
</BODY>
</HTML>

2. Tördelési utasítások.

Karakter(sorozat) formázása

A HTML újabb verzióiban az alábbiak helyett stílusok alkalmazása javasolt!

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

Példa:

<B>Ezek a betük félkövéren, esetleg aláhúzva jelennek meg.</B>

<I> ... </I>

Dőlt (Italic)

A kezdő és befejező utasítás közötti szöveg dőlt betükkel jelenik meg.
Példa:

<I>Ezek a betük dőlten, esetleg aláhúzva jelennek meg.</I>

<U> ... </U>Aláhúzott (Underline)

<HR>Vízszintes vonal (Horizontal Ruler)

Üres utasítás. Vízszintes vonalat jelenít meg.

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:

<BR>

Soremelés (BReak)

Üres utasítás. Sort emel, az utasítást követő szöveg új sorban kezdődik.

Példa:

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

<PRE> … </PRE>

Írógép szöveg.
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 <WIDHT>, <ADDRESS, <Hn> bekezdés formázó utasítások nem ültethetők be.

Paramétere: <WIDHT> Szélesség. Meghatározza az egy sorban megjeleníthető betük számát, amely 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

Hogyan kapcsoljunk a HTLM dokumentumhoz egy másik dokumentumot.

<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 a következők:

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

ALIGN Bottom | Middle | Top 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 betöltésnél a kép helyett alternatív szöveg jelenik meg.

Példa

<IMG SRC="images\logo.png" WIDTH=200 HEIGHT=200>

<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 következők:

Az <A> utasítás a NAME paraméterrel a HTML dokumetumon belül határozható kapcsolódási pontját és nevét adhatjuk meg.

Az <A> utasítás a HREF paraméterrel a hivatkozás címét adhatjuk meg, ha a egy külső dokumentum kapcsolható, amelynek helyét URL címmel kell megadni.

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

1. példa, cím definiálása:

<P>E szöveghez kapcsolódik <A NAME="1." </A>

2. példa, címre ugrás dokumentumon belüli címre:

<P><A HREF="#1."> 1. fejezet</A>

1. fejezet

3. példa, címre ugrás más dokumentumra URL címzéssel:

<P><A HREF="www.star.bme.hu/oktatas/2001-2002-1/szamgep-1/gyak5_html/szg1-html.htm"> Web szerkesztés alapjai</A>

Web szerkesztés alapjai

4. példa, más dokumentumban lévő címre ugrás URL címzéssel és címmel:

<P><A HREF="http://www.star.bme.hu/oktatas/2001-2002-1/szamgep-1/gyak5_html/szg1-html.htm#1."> Web szerkesztés alapjai 1. fejezet</A>

Web szerkesztés alapjai 1. fejezet

5. példa, ugrás más dokumentumra URL címzéssel, a link a képre kattintással történik :

<P><A HREF="http:/www.star.bme.hu/~vezker/szg1" > <IMG SRC="images\logo.png"></A>

5. Mintafeladat

Minden hallgató home könyvtárában (S:\) létrehoztunk egy PUBLIC_HTML könyvtárat RF (a webszerveren ez a könyvtár van beállítva arra, hogy a http://www.star.bme.hu/~loginnév URL címen látható legyen).

1. A könyvtárban hozzunk létre egy index.htm fájlt. Ez a fájl jelenik meg, ha beírjuk a böngészőbe a http://www.star.bme.hu/~loginnév URL hivatkozást.
Ez lesz a bemutatkozó oldalunk.

Példa:

<HTML>
<HEAD>
<TITLE>KOVACS Monika Weblapja</TITLE>
</HEAD>
<BODY>
<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><BR>
<LI>Ábrázoló Geometria 1.</LI><BR>
<LI>Matematika</LI><BR>
<LI>Rajz</LI><BR>
</UL>
</BODY>
</HTML>

Ha nincs index.htm, akkor a webszerver beállításától függően 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, helyezzünk el egy index.htm fájlt a könyvtárban. Ez az alkönyvtárakra is igaz.
Legyen egy link a később létrehozandó SZG1 alkönyvtárra.
A képeket az ezen könyvtáron belül létrehozott IMAGES alkönyvtárba tegyük

2. Hozzunk létre a PUBLIC_HTML könyvtárunkban egy SZG1 alkönyvtárat

3. Készítsünk egy index.htm fájlt ebbe a könyvtárba, illesszük be a logo fájlunkat.

A képeket szintén tegyük az ezen könyvtáron belül létrehozott IMAGES alkönyvtárba.

Példa:

<HTML>
<HEAD>
<TITLE>Számítógépek alkalmazása 1.</TITLE>
</HEAD>
<BODY>
<H1>Számítógépek alkalmazása 1.</H1>
<H2>Feladataim:</H2>
<UL>
<LI><IMG SRC="images/lepke.png"></LI><BR>
<LI><A
HREF="allasajanlat.htm"><IMG SRC="images/logo.png"><BR>Állásajánlat</A></LI><BR>
<LI>Helyiséglista</LI><BR>
<LI>Csarnokvégfal</LI><BR>
</UL>
</BODY>
</HTML>

Nézzük meg tényleges kapcsolatokat Kovács Mónika weblapján