Előadást letölteni
Az előadás letöltése folymat van. Kérjük, várjon
1
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
2
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
3
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
4
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
5
HTML lap szerkezete <html> <head> Fej </head>
<body> Törzs </body> </html> Készítette: Ambrusné Somogyi Kornélia
6
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
7
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 ig, 1 a legmagasabb szint. Új sor kezdése: <BR> Készítette: Ambrusné Somogyi Kornélia
8
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
9
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
10
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
11
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
12
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
13
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
14
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
15
Levelezési cím megadása
A hivatkozás kulcsszava mailto <A HREF=”mailto: Ambrusné Somogyi Kornélia címe</A> Készítette: Ambrusné Somogyi Kornélia
16
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
17
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
18
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
19
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
20
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
21
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
22
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
23
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
24
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: Készítette: Ambrusné Somogyi Kornélia
25
Ajánlott webhelyek Ultraweb
A weblap, ahova bejelentkezünk: vagy Lépések: Regisztráció – cím megadásával Weblap elkészítése Feltöltés Elérés: Készítette: Ambrusné Somogyi Kornélia
26
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 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
27
Freeweb A weblap, ahova bejelentkezünk: vagy Lépések: Regisztráció – cím megadásával Weblap elkészítése Feltöltés Elérés: Készítette: Ambrusné Somogyi Kornélia
28
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 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
29
WEB-lap szerkesztők Készítette: Ambrusné Somogyi Kornélia
30
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
31
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
32
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
33
A megjelenő képernyő Készítette: Ambrusné Somogyi Kornélia
34
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
35
Putra Writer Ingyenes, magyar nyelvű HTML dokumentum és JavaScript szerkesztő program. Internetről letölthető. Készítette: Ambrusné Somogyi Kornélia
36
Indító képernyő Készítette: Ambrusné Somogyi Kornélia
Hasonló előadás
