CAAD és építészinformatika (BMEEPAG0202)

Kiss Zsolt
egyetemi adjunktus

GDL objektumok internetes publikálása

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, melyek lehetnek

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

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>

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.

Példa:


<HTML>
<HEAD>Ez a dokumentum fejléce</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 4.67 m2 Fürdő 2.67 m2 Szülői háló 8.28 m2 </PRE> Nappali 16.78 m2 Konyha 4.67 m2 Fürdő 2.67 m2 Szülői háló 8.28 m2
Nappali 16.78 m2 Konyha 4.67 m2 Fürdő 2.67 m2 Szülői háló 8.28 m2 Nappali 16.78 m2 Konyha 4.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ói rendelkezik saját weblap lehetőséggel, melyre a http://www.star.bme.hu/~loginnév URL címmel hivatkozhatunk. A weblap könyvtár home könyvtárban (S:\) létrehozott 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:

index.htm - Notepad

<HTML> <HEAD> <TITLE>KOVACS Monika Weblapja</TITLE> </HEAD> <BODY> <IMG SRC="images/kovmon.jpg"> <H3>KOVÁCS Mónika Weblapja</H3> <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="/hallg/2002_tavasz/caadinf/01_tk/kovmon"> CAAD és Építészinformatika</A></LI><BR> <LI>Szabadkézi rajz</LI><BR> <LI>Középülettervezés</LI><BR> <LI>Épületszerkezettan</LI><BR> </UL> </BODY> </HTML>

KOVACS Monika Weblapja - Netscape 6

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:

CAAD és Építészinformatika

Szabadkézi rajz

Középülettervezés

Épületszerkezettan

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 GDL feladatunk könyvtárára. Ennek helye a HAUSZMANN szerveren a t:\oktatas\2002_tavasz\caadinf\ könyvtáron belül található tankör\loginnév könyvtár. Itt találunk egy index.html file-t.

index.htm - Notepad

<HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250"> <TITLE>Parametrikus modellezés (GDL)</TITLE> <META HTTP-EQUIV="Content-Language" CONTENT="hu"> <LINK rel="stylesheet" href="base.css" type="text/css"> </HEAD> <BODY bgcolor="#ddddaa" text=#000000 aLink=#333366 link=#333366 vLink=#333366> <CENTER> <h3>CAAD és építészinformatika  </h3> <HR width=700> <BR> <h3>Szerkesztés alatt! </CENTER> </BODY> </HTML>

Parametrikus modellezés (GDL) - Netscape 6

CAAD és építészinformatika

Szerkesztés alatt!

Vagy ezt a file-t módosítjuk, vagy felülírjuk egy másikkal.
A képeket az ezen könyvtáron belül létrehozott IMAGES alkönyvtárba tegyük.

Nézzük meg az előző évek "termését":

2001-2002 tavaszi félév

2001-2002 őszi félév

2000-2001 tavaszi félév

A forrást a Netscape-nél a jobb egérklikk View Page Source, illetve a View Frame Source popupmenüparanccsal tudjuk megnézni.