Html nyelv (HyperText Markup Language) HTML - Hipertext jelölő nyelv. Vele a lap megjelenését tudjuk "programozni". A http - a Hypertext Transfer Protocol által közvetített adatok leírására szolgáló nyelv. A böngészők a nyelvet "lefordítva " a megformázott, multimédiás elemekkel megtűzdelve tárják elénk. A View/Source menüpontban minden weblapot megnézhetünk html formátumban. Készítette: Ambrusné Somogyi Kornélia
HTML-elemeket ún. tag -eket, amelyek a megjelenítési formát kódolják. A HTML-ben írt dokumentum csak ASCII-karakterekből áll és két dolgot tartalmaz: a dokumentum szövegét, HTML-elemeket ún. tag -eket, amelyek a megjelenítési formát kódolják. <ElemNév>szöveg, amelyre vonatkozik … </ElemNév> Készítette: Ambrusné Somogyi Kornélia
HTML dokumentum készítésének lehetőségei Bármely karakteres szövegszerkesztővel - Jegyzettömb WORD -ben készített szöveg HTML formátumban történő kimentésével – nem célszerű WEB-lap szerkesztők segítségével: Netscape Composer Frontpage Editor, Frontpage Express Putra Writer Készítette: Ambrusné Somogyi Kornélia
HTML dokumentum felépítése Maga a dokumentum: <HTML> </HTML> jelek között helyezkedik el. Dokumentum fejléce: <HEAD> </HEAD> között Cím megadása: <TITLE> </TITLE> a cím jelenik meg a böngésző fejlécében. Dokumentum törzse: <BODY> </BODY> Készítette: Ambrusné Somogyi Kornélia
HTML lap szerkezete <html> <head> Fej </head> <body> Törzs </body> </html> Készítette: Ambrusné Somogyi Kornélia
Mi kerül a fejbe? Mi kerüljön a törzsbe? Kinek a lapja. Keresőszavak, amelyek alapján megtalálhatják a lapunkat. (Ékezet használata nem ajánlott.) Mi kerüljön a törzsbe? A lap amit készítünk. Szövegek. Képek. Hivatkozások.(Link-ek) Készítette: Ambrusné Somogyi Kornélia
Formázási lehetőségek Bekezdések megadása: <P> </P> a záró megadása nem kötelező Címsorok megadása: <H1> </H1> címek szintszáma 1 - 6-ig, 1 a legmagasabb szint. Új sor kezdése: <BR> Készítette: Ambrusné Somogyi Kornélia
Szöveg formázása Az alapértelmezett fontok színét, méretét, stílusát a következőképpen állíthatjuk: <FONT COLOR=BLACK> vagy az RGB színskála alapján 6 jegyű hexadecimális számmal: <FONT COLOR=#FFFFFF> <FONT FACE=”ARIAL”> ha nem az alapértelmezett betűtípust akarom használni - ez ún. változó szélességű betűtípus <FONT SIZE=+1> az alapértelmezettnél 1-gyel nagyobb font. </FONT> érvényességi kör lezárása Készítette: Ambrusné Somogyi Kornélia
Formázások Fontok beállítása <B> </B> félkövér <I> </I> dőlt <U> </U> aláhúzott <TT> </TT> gépírás jellegű, egyenlő szélességű betűk <BLINK> </BLINK> villogó <PRE> </PRE> előzőleg megírt, előre tördelt szöveg beillesztése gépírás stílusban Készítette: Ambrusné Somogyi Kornélia
Szöveg elhelyezése Igazítás <ALIGN=LEFT> balra <ALIGN=CENTER> középre <ALIGN=RIGHT> jobbra </ALIGN> igazítás hatáskörének bezárása Készítette: Ambrusné Somogyi Kornélia
Definíciós lista készítése Definiálás <DL> </DL> <DT> definíció fejléce <DD> definíció törzsrésze Készítette: Ambrusné Somogyi Kornélia
Számozott lista Lista határolók: <OL> </OL> Lista típusa: <OL TYPE=I | i | A | a | 1> Kezdőérték megadása: <OL START=5> Egyes sorok, listaelemek jelölése: <LI> <LI VALUE=17> Készítette: Ambrusné Somogyi Kornélia
Felsorolás, számozatlan lista Lista határolók: <UL> </UL> Lista típusa: <UL TYPE=DISC | CIRCLE | SQUARE> Listaelemek jelölése: <LI> Készítette: Ambrusné Somogyi Kornélia
Linkek, hivatkozások Kapcsolat jelzése: <A> </A> Fájl, vagy címke csatolása: <A HREF="fájlnév"> <A HREF="URL link"> <A HREF="#címke"> Címke elhelyezése az adott szövegen belül: <A NAME="címke"> pl. <A NAME="A"> Készítette: Ambrusné Somogyi Kornélia
Levelezési cím megadása A hivatkozás kulcsszava mailto <A HREF=”mailto: a_somogyi.kornelia@rkk.bmf.hu”> Ambrusné Somogyi Kornélia e-mail címe</A> Készítette: Ambrusné Somogyi Kornélia
Képek beillesztése Leggyakoribb képformátumok: Méret és elhelyezés: GIF 256 színt tud kezelni, elsősorban ábrákhoz használt. JP(E)G Fényképekhez használatos, 24 biten tárolja a színeket. Méret és elhelyezés: ne legyen túl sok és túl nagy, a törzsben kell elhelyezni, nem része a dokumentumnak, itt csak hivatkozunk rá, a böngésző feladata a beillesztés. Készítette: Ambrusné Somogyi Kornélia
Kép beillesztése Beépített kép jelzése: <IMG> Kép forrásának megadása: SRC=FÁJL | URL_link Méretezés, igazítás: ALIGN=LEFT | RIGHT | TOP | TEXTTOP | MIDDLE | ABS MIDDLE | BOTTOM … WIDTH=PIXEL | % képszélesség HEIGHT=PIXEL | % képmagasság BORDER=PIXEL keretszélesség Készítette: Ambrusné Somogyi Kornélia
Táblázat létrehozása Táblázat jelölése: <TABLE> </TABLE> BORDER=PIXEL keretszélesség WIDTH=PIXEL | % táblázat szélessége <TR> </TR> sorváltás a táblázatban <TD> </TD> oszlopváltás a táblázatban <TH> </TH> oszlopváltás a táblázatban kiemelt szöveggel Készítette: Ambrusné Somogyi Kornélia
Igazítás táblázaton belül ALIGN=LEFT | RIGHT | CENTER cellán belüli igazítás vízszintes irányban mindegyik esetben VALIGN=TOP | MIDDLE | BOTTOM | BASEFILE cellán belüli igazítás függőleges irányban WIDTH= PIXEL | % cellaszélesség megadása TD és TH tag - eknél Készítette: Ambrusné Somogyi Kornélia
Háttér és szöveg színbeállításai A <BODY> tag - en belül: BACKGROUND=FÁJL | URL_link háttérkép beállítása BGCOLOR=XXXXXX háttérszín beállítása TEXT=XXXXXX szöveg színének beállítása LINK=XXXXXX meg nem nézett link színe VLINK=XXXXXX megnézett link színe ALINK=XXXXXX épp most kiválasztott link színe Készítette: Ambrusné Somogyi Kornélia
Kereteket tartalmazó honlap készítése Egyetlen böngészőablakban több HTML dokumentum is megjeleníthető a <FRAMESET></FRAMESET> utasításpár, valamint a hozzá szorosan kapcsolódó <FRAME> utasítás együttes használatával. Ezeknek az utasításoknak a fejlécben kell szerepelni, meg kell előzniük a <BODY> utasítást. Készítette: Ambrusné Somogyi Kornélia
Keretek <FRAMESET ROWS=”sorhatárok” kezdőutasítással vízszintesen (alsó-felső részre) oszthatjuk fel a képernyőt. <FRAMESET COLS=”oszlophatárok” utasítással függőlegesen (baloldali-jobboldali részre) oszthatjuk fel a képernyőt. Az oszlop- és sorhatárok megadhatók képpontokban, ill. százalékosan, a maradék területre pedig a * helyettesítő karakterrel hivatkozhatunk. Készítette: Ambrusné Somogyi Kornélia
Egy utasítással csak egyirányú felosztást készíthetünk, mindkét irányban osztott böngészőablak létrehozásához a <FRAMESET> elemeket egymásba kell ágyazni. A fenti módon definiált területekre a <FRAME SRC=”objektum”> utasítás tölti be a megadott objektumot, amely lehet egy teljes HTML fájl, annak egy része, ill.egy kép. Készítette: Ambrusné Somogyi Kornélia
Saját honlap készítése – kmf levelező szerverén Könyvtár létrehozása a saját könyvtáron belül public_html néven – jogosultsága 755. index.html vagy index.htm fájl tartalmazza a saját honlapot – jogosultsága 644. A honlap meghívása a böngészőből: http://kmfserv.kmf.hu/~loginname Készítette: Ambrusné Somogyi Kornélia
Ajánlott webhelyek Ultraweb A weblap, ahova bejelentkezünk: http://www.ultraweb.hu vagy http://ultraweb.hu, http://www.uw.hu, http://uw.hu Lépések: Regisztráció – e-mail cím megadásával Weblap elkészítése Feltöltés Elérés: http://felhasználónév.ultraweb.hu http://felhasználónév.uw.hu Készítette: Ambrusné Somogyi Kornélia
Feltöltés – ftp segítségével FTP host: ftp. uw Feltöltés – ftp segítségével FTP host: ftp.uw.hu Felhasználó név: ambrusne Jelszó: megegyezik az adminisztrációs felület jelszavával Port: 21 Ajánlott FTP kliens: Total Commander A regisztrációhoz automatikusan tartozik egy felhasználónév@uw.hu postafiók, amely POP3 protokollról vagy WEB-es felületről a WEB MAIL menüpont alól érhető el. Készítette: Ambrusné Somogyi Kornélia
Freeweb A weblap, ahova bejelentkezünk: http://freeweb.hu vagy http://fw.hu, http://www.freeweb.hu, http://www.fw.hu Lépések: Regisztráció – e-mail cím megadásával Weblap elkészítése Feltöltés Elérés: http://felhasználónév.freeweb.hu http://felhasználónév.fw.hu http://www.freeweb.hu/felhasználónév http://www.fw.hu/felhasználónév Készítette: Ambrusné Somogyi Kornélia
Feltöltés – ftp segítségével FTP host: ftp. freeweb Feltöltés – ftp segítségével FTP host: ftp.freeweb.hu Felhasználó név: ambrusne Jelszó: megegyezik a regisztrációnál megadott jelszóval Port: 21 Ajánlott FTP kliens:Total Commander A regisztrációhoz automatikusan tartozik egy felhasználónév@freeweb.hu postafiók, amely POP3 protokollról vagy WEB-es felületről bejelentkezés után a WebMail menüpont alól érhető el. Készítette: Ambrusné Somogyi Kornélia
WEB-lap szerkesztők Készítette: Ambrusné Somogyi Kornélia
Netscape Composer A Netscape Communicator része Tömör állományokat hoz létre – nem ír hozzá felesleges tag-eket. Készítette: Ambrusné Somogyi Kornélia
Frontpage Express Ingyenes, a Microsoft Internet Explorer programcsomag tartalmazza. Két nézete van: WYSIWIG HTML A Microsoft Frontpage Editor több szolgáltatását tartalmazza egy kisebb programcsomagban. Készítette: Ambrusné Somogyi Kornélia
Microsoft FrontPage Az Internet Explorerrel, illetve a Microsoft Office programcsomaggal együtt telepíthető. Az Office XP része. Segítségével a HTML nyelv ismerete nélkül hozhatunk létre weblapokat, illetve webhelyeket. Készítette: Ambrusné Somogyi Kornélia
A megjelenő képernyő Készítette: Ambrusné Somogyi Kornélia
Nézetek webhelykészítéskor Weblap nézetei Normál HTML Minta Kereteket tartalmazó lap esetén Keretek nélkül Kereteket tartalmazó lap HTML-nézete Készítette: Ambrusné Somogyi Kornélia
Putra Writer Ingyenes, magyar nyelvű HTML dokumentum és JavaScript szerkesztő program. Internetről letölthető. http://putraware.uw.hu/ Készítette: Ambrusné Somogyi Kornélia
Indító képernyő Készítette: Ambrusné Somogyi Kornélia