html alapok

HTML ALAPOK

Abonyi-Tóth Andor, ELTE IK

Fontos szabványok

HTTP protokoll

Protokoll = szabályrendszer HTTP

HyperText Transfer Protocol (Hiperszöveg Átviteli Protokoll)

a webböngésző (kliens) adatokat kérhet le a kiszolgálóról (szerver), illetve adatokat küldhet a kiszolgálóra

A kérést a kliens kezdeményezi

HTTPS protokoll

A https séma szintaktikailag megegyezik a http sémával, de jelzi a böngészőnek, hogy használni kell az SSL/TSL titkosító réteget az adatforgalom védelme érdekében.

URL, URN, URI, stb..

Hálózati erőforrásokra (weboldalakra, e-mail címekre, letölthető fájlokra, stb.) az URL-ek (Uniform Resource Locator - Egységes erőforrás helymeghatározó) segítségével hivatkozunk.

Tartalmazza: eléréshez szükséges kommunikációs protokoll nevét

(pl. HTTP, HTTPS, FTP, MAILTO, NEWS, TELNET) számítógép, vagy tartomány nevét (vagy IP címét), egy

hálózati port számot, amelyen az adott szolgáltatás elérhető, és azt az elérési utat, amelyen az erőforrás megtalálható.

URL:protokoll://tartománynév:portszám/elérési_útvonal

URL példák

http://www.elte.hu/ https://etr.elte.hu/etrweb/login.asp ftp://ftp.externet.hu/.lib/disk5/pub/win/

ssh/putty.exe http://lib.nyme.hu:8080/corvina/opac/

wpac.cgi

Ne csak hálózati erőforrásoknak legyen azonosítója, hanem absztrakt erőforrásoknak is (könyv, folyóirat, stb.)

URN (Uniform Resource Name - Egységes erőforrás név)

Gondok az URL-el Állandóan változhatnak Az URL tartalma is változhat

Példa: urn:isbn:0-520-02356-0 A név nem változik A név világviszonylatban egyedi

Az URN kiadása ellenőrzött folyamat Az URL-re továbbra is szükség van

URI: Uniform Resource Identifier (Egységes erőforrás azonosító)

URL+URN=URI

Az URI1 az erőforrást kétféleképp azonosíthatja: hely szerint (URL) vagy név szerint (URN).

URL URN

1: http://hu.wikipedia.org/wiki/URI

A HTML nyelv

HyperText Markup Language - Hiperszöveg jelölőnyelv

SGML (Standard Generalized Markup Language - szabványos, kiterjesztett jelölő nyelv) –en alapul (1986-os szabvány)

Szöveges állomány .html vagy .htm kiterjesztéssel Tartalmaz

Tag (formázóutasítás) pl. <b>félkövér</b>

Objektumhivatkozásokatpl. "../kepek/logo.gif”

A weboldalon megjelenő szöveget formázatlanul

HTML történet

1995 november: HTML 2.0 HTML 3.0

képek szöveggel történő körbefolyatása, táblázatok, matematikai képletek használata.

nem lett belőle hivatalos szabvány (túl komplex) 1997 január: HTML 3.2 1997 december: HTML 4.0

kliens oldali scriptnyelvek (pl. javascript) Stíluslapok használata

1999 december: HTML 4.01 Javításokat tartalmaz Ez az utolsó (SGML-en alapuló) verzió

HTML 5: jelenleg fejlesztés alatt !!!

Igény: webes adatbázisok közti kommunikációt lehetővé tévő, bővíthető nyelv => XML (eXtensible Markup Language - Bővíthető jelölőnyelv)

XHTML A HTML 4.01 XML alapokon történő

megvalósítása 2000. január: XHTML 1.0 2001. május: XHTML 1.1 XHTML 2.0: leállt a fejlesztés, az erőforrásokat

a HTML 5 fejlesztésére fordítják !!!

Baj a HTML-el

A dokumentum tartalmának leírására lenne jó

Összemosódik a tartalom és a megjelenés

Megoldás: CSS - Cascading Style Sheets

(lépcsőzetes stíluslapok) Szétválasztható a tartalom és a megjelenés

A táblázatnak ugyanaz a kódja, a CSS dönti el a kinézetét

HTML Struktúra

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head> <title>Oldalcím</title> </head>

<body> tartalom

</body>

</html>

Dokumentumtípus(DTD)

Törzs

HTML példa

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>Első weblapom</title></head><body><p>Ez az első próbálkozásom. <b>Remélem sikerül!</b></p></body></html>

Néhány gyakran használt HTML tag

Bekezdés létrehozás: <p> </p> Sortörés: <br> 1-es szintű címsor: <h1> </h1> Erősen kiemelt szöveg: <strong>

</strong> Hiperhivatkozás: <a href="…"> </a> Kép beszúrása: <img src="…">

HTML 4.01 dokumentumtípusok

HTML 4.01 Strict Ezt akkor ajánlatos használni, amikor tiszta

(prezentációs lehetőségektől mentes) kódot állítunk elő, és stíluslapokat használunk.

A szükséges kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"http://www.w3.org/TR/html4/strict.dtd>

HTML 4.01 Transitional (Loose) Ha ki akarjuk használni a HTML prezentációs

lehetőségeit, vagy amikor olyan böngészőre fejlesztünk, amely nem ismeri a stíluslapokat, ezt a dokumentumtípust használhatjuk.

A szükséges kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

http://www.w3.org/TR/html4/loose.dtd>

HTML 4.01 Frameset A nevéből is következik, hogy ezt akkor

használjuk, ha az ablakot több keretre (frame) akarjuk felosztani. Ezzel majd a keretekről szóló fejezetben foglalkozunk.

A szükséges kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">Tar-ta-lom

Validálás

Ellenőrizhető, hogy az oldalunk megfelel-e a szabványnak => validálás (érvényesség vizsgálat)

Ellenőrzés: http://validator.w3.org/

Validálás a Firefox böngészőprogramban

Telepítsük a HTML validator kiterjesztést a http://users.skynet.be/mgueury/mozilla/

címről! (rövidített url: http://bit.ly/qLVIX6) Ezek után a böngészőprogram jobb alsó

sarkában látjuk, hogy a megtekintett oldal valid-e.

Nem mindig ugyanazt az eredményt adja, minta W3C validátora!

Elavult tagek, paraméterek

A HTML 4.01 szabványban sok tag/paraméter elavultként van megjelölve

Ezek kiválthatók a stíluslapok alkalmazásával

Részlet a Web-fejlesztés I. tananyagból

Stílusok külső állományban

A stílusok kivihetők külső állományba Teljesen szétválasztható a HTML kód és

a megjelenés Később részletesen megnézzük

Honlapszerkesztés eszközei

szövegszerkesztő program (egyszerű szövegként (txt) képes menteni)

Kódszintű szerkesztőprogram

WYSIWYG (alakhű) programok

Ajánlott szerkesztőprogram

Notepad++ http://notepad-plus.sourceforge.net/hu/site.htm asztali és hordozható változata is van

Fejlesztőkörnyezet kialakítása (ha szerveroldali technológiákra is szükség van) XAMPP telepítőcsomag

http://www.apachefriends.org/en/xampp.html Multiplatform XAMPP 1.7.4 tartalmazza

Apache 2.2.17 MySQL 5.5.8 PHP 5.3.5 phpMyAdmin 3.3.9 FileZilla FTP Server 0.9.37 Tomcat 7.0.3

XAMPP portable

Nem kell telepíteni, pendriveról is működik

Lépések Mappa létrehozása XAMPP ZIP változatának letöltése,

kitömörítése a mappába setup_xampp.bat elindítása xampp-control.exe elindítása és a

vezérlőpulton elindítható a kívánt szolgáltatás

HTML és XHTML különbségei

XHTML31

XHTML (XML+HTML „házasság”) Mindkét szabvány erősségeit magában

foglalja, bővíthető, az XML miatti megkötések miatt jobban kell figyelnie a web-fejlesztőknek

A tartalmat bármilyen XML kompatibilis program képes megjeleníteni, feldolgozni

XHTML32

XHTML: eXtensible HTML Előnyök

Az XHTML dokumentumok XML alapúak, könnyen áttekinthetők, szerkeszthetők, érvényesíthetők (validálhatók) standard XML eszközökkel.

Az XHTML oldalak a HTML 4.0 szabványt támogató szerkesztőprogramokkal is szerkeszthetők.

Az XHTML dokumentumban használhatunk olyan alkalmazásokat (appletek, szkriptek), amelyek futtatásához szükséges a HTML Document Object Model (DOM) vagy az XML DOM.

Az XHTML "család" fejlődésével az XHTML 1.0 kritériumainak megfelelő dokumentumok egyre inkább együtt tudnak működni egymással a különböző XHTML környezetekben.

HTML, XHTML különbségek34

Az elemek egymásbaágyazásánál ügyelnünk kell a sorrendre

<b><u>Vastag, aláhúzott szöveg</b></u>

<b><u>Vastag, aláhúzott szöveg</u></b>

Jól formázott (well formed) dokumentumot kell létrehozni

minden elemet a <html> elemen belül kell elhelyezni.

Minden elemnek lehetnek további beágyazott elemei.

Ezek az elemek páronként kerülnek megadásra, és ügyelni kell arra, hogy a szülő elembe szabályosan kerüljön beágyazásra

A tag neveket kis betűkkel kell írnunk. az XML szabvány megkülönbözteti a kis-

és nagybetűket a <br> és <BR> tag két különböző dolgot jelölhet

Minden XHTML elemet kötelező lezárni. <p>Első bekezdés<p>Második bekezdés

<p>Első bekezdés</p><p>Második bekezdés</p>

Azon elemek végére, amelyeknek a HTML szabványban nincs záró párjuk (area, base, bgsound, br, col, frame, hr, img, input, isindex, keygen, link, meta, option, param), / karaktert kell tennünk. <br> <br /> <img src="kep.gif"> <img src="kep.gif" />

Ahhoz, hogy a dokumentum kompatibilis legyen a jelenlegi böngészőkkel, space karakter kell a / jel elé

A paramétereket kis betűvel kell írni.

A paraméterek értékeit "" jelek közé kell zárnunk

Az attribútumok minimalizálása, rövidítése tiltott

HTML és XHTML attribútumok HTML XHTML HTML XHTML compact compact="compact" ismap ismap="ismap"

checked checked="checked" nohref nohref="nohref"

declare declare="declare" noshade noshade="noshade"

readonly readonly="readonly" nowrap nowrap="nowrap"

disabled disabled="disabled" multiple multiple="multiple"

selected selected="selected" noresize noresize="noresize"

A name attribútumok helyett id attribútumot kell használni

A régebbi böngészők miatt érdemes egy ideig mindkét attribútumot szerepeltetni, ugyanazon értékkel.

Az xml:lang elem szerepeltetése<div lang="hu" >Hajrá Magyarok</div>

<div lang="hu" xml:lang="hu">Hajrá Magyarok</div>

Kötelező XHTML elemek Minden XHTML dokumentumnak

rendelkezni kell DOCTYPE deklarációval. A html, head és body elemeknek szerepelniük kell, a title elemnek pedig a head elemen belül kell elhelyezkednie.

<!DOCTYPE ide jön a dokumentumtípus><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Oldalcím</title></head><body>Ide jön a tartalom.</body></html>

DOCTYPE44

1. XHTML 1.0 Strict

2. XHTML 1.0 Transitional

3. XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML -> XHTML konverzió?45

HTML Tidy http://tidy.sourceforge.net/#binaries Parancsmódban használható program tidy -help

Paraméter Magyarázat

-out file a kimeneti állomány megadása

-modify az eredeti állományt módosítja

-asxhtml a HTML állományt jól formázott XHTML állománnyá konvertálja

- f file a feldolgozás során jelentkező hibák kiírása a megadott állományba

-latin1 ISO-8859-1 karakterkódolás használata

-utf8 UTF8 karakterkódolás használata

-utf16 UTF16 karakterkódolás használata

HTML -> XHTML konverzió?46

tidy -f hiba.txt -asxhtml -utf8 -o pelda2.html pelda.html

Eredeti kód Konvertált kód

<html>

<body>

<p>Csak az teszteljük,<br>hogy mi történik az átalakítás során....</p>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="generator" content="HTML Tidy for Windows (vers 1st December 2004), see www.w3.org" /><meta http-equiv="Content-Language" content="hu" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title></head><body><p>Csak az teszteljďż˝k,<br />hogy mi tďż˝rtďż˝nik az ďż˝talakďż˝tďż˝s sorďż˝n....</p></body></html>

html alapok

Documents

2 mikrobiologiai alapok

visual c++ alapok

produkcióökológiai alapok

tipográfiai alapok

elektrotechnika alapok

opencl alapok

html alapok - ininethtml alapok mi az a html dokumentum? egy...

1.logisztikai alapok modul -...

sminkeles alapok

iv. rész tartalom erlang alapok bevezetés erlang alapok

adózási alapok

cad alapok

edzéstani alapok

sportpedagógiai alapok

szkriptelés alapok

neurobiológiai alapok

2. számviteli alapok

c programozasi alapok

angol kommunikáció - alapok

kozgazdasagtani alapok