elem megjelenik, a <span> elem bezárul (automatikusan így értelmezi a böngésző).

<span>

Vízesés

Szöveg

paragrafus

align=[left, right, center]

,

, ...,

align=[left, right, Címsorok (heading): hat címsor létezik a HTMLben. Egy példát a megjelenítésükre a táblázat végén center] látunk.

<pre>

Preformatált szöveg. A böngésző ezt általában egy width=[méret] fix szélességű fonttal jeleníti meg, nem alkalmazza a HTML szövegre jellemző elválasztók kiemelését a szövegből, az újsor karakterek helyén sort tör.



Programok forrásszövegének megjelenítésekor használjuk. Helyette inkább a <pre> a javasolt.

---

Egy vízszintes vonalat rajzol a böngésző ablakra, mint elválasztó blokk elem.



A dokumentum szerzőinek kapcsolattartó információt lehet ezzel megjeleníteni.

width=[méret]

Idézetek megjelenítésére használjuk.

Például a címsorok implicit megjelenítése az alábbi (block.html részlete): 14

Sapientia Egyetem, Marosvásárhely, SzLZs

Sejtettem, adni.

Sejtettem, adni.

Sejtettem, adni.

Sejtettem, adni.

Sejtettem, adni.

Sejtettem, adni.

Webtechnológia előadás, 2009/10-II. félév

hogy a legmeglepőbb eredményt a szimpátiateszt fogja hogy a legmeglepőbb eredményt a szimpátiateszt fogja hogy a legmeglepőbb eredményt a szimpátiateszt fogja hogy a legmeglepőbb eredményt a szimpátiateszt fogja hogy a legmeglepőbb eredményt a szimpátiateszt fogja hogy a legmeglepőbb eredményt a szimpátiateszt fogja

1.4. Szövegek megjelenítése A szövegek és azon belül kiemelt szavak, betűk megjelenítéséhez sorközi (inline) elemeket használunk. Ezek egy része csak betűket formáz (pl. a kiemelések), egy másik részének a szövegen belüli szerepet is jelöli (pl. a ). Valamennyi elemnek van egy implicit megjelenítése amellyel egyszerű oldalak formázhatók. Bonyolultabb megjelenítés esetében mindegyiknél stíluslapot is használunk. Az alábbi elemek mind sorközi, inline elemek, és ilyenként tartalmazhatnak más inline elemet, de nem tartalmazhatnak blokk elemeket. HTML címke

Jelentése

Tulajdonságok



Félkövér kiemelés.



Dőlt betű.

<strike>

Áthúzott szöveg.

<small>,

Kisebb, nagyobb karakterre váltás.

15

Sapientia Egyetem, Marosvásárhely, SzLZs

Webtechnológia előadás, 2009/10-II. félév

<sub>, <sup>

Alsó illetve felső index kiírása.



A betűtípus illetve tulajdonságainak megadása. Ez egy elavult elem, ma már szinte egyáltalán nem használjuk. A betűk formázását egyértelműen stíluslapokkal oldjuk meg.

<em>

Emphasis: kiemelést valósít meg.



Idézetet, referenciát tartalmazó szövegrész.

<strong>

Erős kiemelés a szövegben.



Rövidítések, betűszavak megjelenítése.



A szöveg kiírásának irányát befolyásoló eleme.

face=[font neve] size=[méret] color=[szín]

dir=[ltr; rtl]

Megadunk egy rövid példát használatukra, egy hosszabb szöveget is tartalmazó példát a szovegformazo.html állomány megjelenítésével lehet megnézni.

<em>em cite <strong>strong b <strike>strike big <sup>sup <sub>sub IETF

Megjelenítése:

Valamennyi formázást, amelyet ezek az elemek elvégeznek meg lehet oldani stíluslapokkal, és ekkor kezelésük rugalmasabb. Mégis jó tudni, hogy stíluslapok nélkül is lehet megfelelően formázni egy szöveget. Használatuk nem kötelező, magát a szöveget pl. a paragrafus is megfelelően formázza. A szövegen belüli sortörést ha szükséges a
elemmel lehet megoldani (ez hasonló a szövegszerkesztők szoft új sorához). A
elem csak nyitó címkével rendelkezik. Egy tulajdonsága van, a clear=[left; all; right] amely lefelé mozgatja a szövegben lebegő objektumokat, pl. képeket. A
használata nem javasolt, ha lehet a töréseket paragrafusokkal kell megoldani.

16

Sapientia Egyetem, Marosvásárhely, SzLZs

Webtechnológia előadás, 2009/10-II. félév

1.5. A horgony elem A horgony (anchor) elemmel hipertext hivatkozásokat (link-eket) adhatunk meg. Fontosabb tulajdonságai: href

A hivatkozás webcímét adjuk meg (a wbcímmel kapcsolatosan lásd az URI és URL fogalmát a HTTP protokoll tárgyalásánál).

rel

Milyen a viszony a hivatkozó és hivatkozott dokumentum között (értékei: alternate, stylesheet, start, next, prev, contents, index, glossary, copyright, chapter, section, subsection, appendix, help, és bookmark ) .

rev

Milyen a fordított viszony (értékei: ugyanazok).

type

milyen a cél dokumentum MIME típusa. MIME: Multipurpose Internet Mail Extensions - mivel a HTTP protokollnak különböző adattípusokat kell átvinni a hálózaton, pl. egy állomány átküldésekor a fogadó félnek tudnia kell, hogy az állomány mit tartalmaz. Az állomány típusokat standardizálták egy kétszintű kategória rendszerben. Így pl. az image/jpg MIME típus azt jelenti, hogy a hivatkozott dokumentum kép, és azon belül JPG típusú.

target

milyen keretben akarjuk megnyitni a hivatkozást. Az értékben egy keretnevet kell megadni. Egyszerű, keret nélküli weblapoknál az alábbiakat használhatjuk: _top (a teljes eredeti ablakában a weblapnak - keretek esetén ez általában fel van osztva) , _blank (új ablak) , _self (ugyanabban a keretben ahol a referencia van).

Példák: Google Informatika órarend Google

Látható, hogy a referencia lehet relatív illetve abszolút. Az URI protokoll séma részében nyilván más is megadható mint http. Például egy email címre így hivatkozunk: Hamis cím

Hivatkozások más elemeken keresztül

A hivatkozások megadásához más elemeket is használhatunk egyszerű szövegen kívül, pl. képeket:

border="0"

alt="Vízesés az alpokban">

Hivatkozások ugyanabban a dokumentumban

Amennyiben ugyanazon dokumentum egy pontjára akarunk hivatkozni a HTML dokumentumban, akkor az URL dokumentumon belüli mutatóját kell használnunk (az URL fragment nevű része). Ehhez, egy horgonnyal meg kell jelölnünk azt a helyet a dokumentumban ahova a hivatkozásunk 17

Sapientia Egyetem, Marosvásárhely, SzLZs

Webtechnológia előadás, 2009/10-II. félév

mutat majd, és azt a nevet kell majd felhasználni a hivatkozásban: Itt valamilyen HTML elem vagy szöveg áll Ugrás a dokumentum első részéhez

A #nev része lehet egy teljes URI-nek is, például egy másik HTML dokumentumban a: Első vízesés

referencia azonnal vizeses.html dokumentum elso -nek bejelölt eleméhez ugrik.

1.6. Képek és multimédia objektumok 1.6.1. Képek Képeket az elemmel adhatunk meg. A leggyakrabban használt kép formátumok a JPEG (Joint Photographic Experts Group, főleg fotók esetében használjuk), a GIF (Graphic Interchange Format) és a PNG (Portable Network Graphics). Az elem csak nyitó címkével rendelkezik a HTML4-ben és inline elem. Az alábbi példa az fontosabb tulajdonságait is tartalmazza:

Az alt tulajdonság egy alternatív címet tartalmaz, amely csak bizonyos esetekben jelenik meg (pl. ha a böngésző nem grafikus vagy ha az egeret a kép fölé visszük), a src a kép forrását tartalmazza (ez egy URI), a height és width a kép megjelenítésére szánt helyet (ha ezek nincsenek, akkor a kép teljes méretben jelenik meg) végül a border a kép köré húzott szegély vastagságát jelenti. A longdesc tulajdonság egy URI-t tartalmazhat, ahol részletes leírást kapunk a képről, ha van ilyen. Pl.:

Ezenkívül létezik még két usemap és ismap tulajdonsága, amellyel a kép bizonyos területein hiperlink hivatkozásokat alakíthatunk ki. Az alábbi HTML (kepek.html):
border="0" border="0"

alt="Vízesés az alpokban"> alt="Vízesés az alpokban" height="100" width="100" border="1" >

S ha ez így áll – és így áll az esetek elsöprő többségében –, azt gondolhatnánk, hogy mi sem egyszerűbb, mint ezen változtatni: demokráciában élünk, az iskola is demokratikus

18

Sapientia Egyetem, Marosvásárhely, SzLZs

Webtechnológia előadás, 2009/10-II. félév

intézmény, a tanárnak is, a diáknak is megvannak az ésszerű jogai, ha meg nincsenek meg, akkor harcolja ki, és nyerni fog, mert ma már ez alkotmányban rögzített jogunk, szóval elég, ha a tanár felkészült és nyitott, elég, ha nem adja meg, hogy egy kérdésre mi az egyetlen jó válasz, a diák gondolkodik, utánanéz, és kész, mindenki jól járt.

S ha ez így áll – és így áll az esetek elsöprő többségében –, azt gondolhatnánk, hogy mi sem egyszerűbb, mint ezen változtatni: demokráciában élünk, az iskola is demokratikus intézmény, a tanárnak is, a diáknak is megvannak az ésszerű jogai, ha meg nincsenek meg, akkor harcolja ki, és nyerni fog, mert ma már ez alkotmányban rögzített jogunk, szóval elég, ha a tanár felkészült és nyitott, elég, ha nem adja meg, hogy egy kérdésre mi az egyetlen jó válasz, a diák gondolkodik, utánanéz, és kész, mindenki jól járt.

így jelenik meg:

Figyeljük meg a kép elem inline jellegét, valamint az, hogy amennyiben egy paragrafus szélén áll, akkor megjelenítéskor a paragrafus szövege körülveszi a képet amennyiben a kép align tulajdonságát használjuk. Azt mondjuk, a kép a szöveg mellett lebeg (a paragrafus blokk elemének helyét ismét a Webdeveloper programmal jelöltük ki). A második paragrafusnál a szöveg nem ér hozzá a képhez: itt ezt a hspace és vspace tulajdonságokkal értük el. Megjegyzés: a hspace, vspace, align tulajdonságok elavultak: ezeket stíluslapokkal oldjuk meg. Az alt helyett a title tulajdonságot ajánlott használni. A longdesc szintén elavult tulajdonság.

19

Sapientia Egyetem, Marosvásárhely, SzLZs

Webtechnológia előadás, 2009/10-II. félév

1.6.2. Külső objektumok A HTML oldalakba beilleszthetünk külső, nem HTML objektumokat. Ezeknek a böngésző egy megjelenítési területet biztosít (ez általában egy téglalap). Ahhoz, hogy egy ilyen külső alkalmazás fusson a böngészőben, a futtató "motor"-nak jelen kell lennie. Ezt a böngésző kiterjesztéseivel érik el (plugin). A mechanizmus bármilyen programnyelven futtatott alkalmazásra érvényes, ha megfelelő kiterjesztés csatolható a böngészőhöz: Flash, Java, Python, stb. A külső kód illesztéséhez használható ismertebb elemek: az (Java applet) és