Számítástechnika alapismeretek HTML-weblapszerkesztés.

Az előadások a következő témára: "Számítástechnika alapismeretek HTML-weblapszerkesztés."— Előadás másolata:

1 Számítástechnika alapismeretek HTML-weblapszerkesztés

2 Honlapszerkesztés - HTML A HTML - Hypertext Markup Language (hiperszöveges leírónyelv) egy programozási előírás, amely azt szabályozza, hogy miként kell megírni a weblapokat ahhoz, hogy a számítógépek megértsék és megfelelő módon jelenítsék meg azokat. Az XHTML- Extensible-HTML (bővíthető hiperszöveges leírónyelv), amelyet a HTML-ből fejlesztettek ki. A hiperszöveg (hypertext) egyszerűen csak olyan szöveg, amely a hipertérben – az Interneten – található.

3 A fájl legelején áll a dokumentumtípus definíció (DTD - Document Type Definition), ami megadja a típust: a strict, amelyben az elavult elemek tiltottak a transitional, amelyben az elavult elemeket is lehet használni a frameset, amelyben a keret létrehozásához szükésges elemek kaptak szerepet A címkék az angol ábécé betűkészletéből kerülnek ki Ezután következik az egész dokumentum... tag-ek közé van zárva. A HTML kódot szöveges szerkesztőben (pl. notepad, notepad++) kell megírni, *.html formátumban elmenteni, majd a böngészővel lehet beolvasni, megjeleníteni.

4 A HTML struktúra Minden HTML formátumú szövegfájl a utasítással kezdődik és a záró utasítással  végződik. fejlécelemek Ide jön az oldal címe, ezt a szöveget fogod látni a böngésző címsorában Meta tagok, CSS   Ide jön a dokumentumtörzs. Itt kell elhelyezni mindent : a szöveget, hivatkozásokat, képeket, stb. 

5  Hogy weblapunk a böngészőkben karakterhelyesen jelenjenek meg kell adnunk a karakterkódolást.  A Windows alapértelmezetten a magyar nyelvű, ISO-8859-2 karakterkódolást használja.  Mentéskor ez az ANSI kódolás. ANSI esetén minden nyelvterületen külön kódolást kell beállítani.  Beállítható az Unicode kódolás is, UTF-8. az Unicode karakter készlet is a világ összes nyelvének jelkészletét egyetlen kódolással képes megjeleníteni. A Karakterkódolás <meta http-equiv=”Content-type” Content=”text/html; charset=iso-8859-2”>  A text/html: az adott képernyőn egy szemmel is jól olvasható html dokumentumot jelenít meg

6 Betűstílusok A különböző hatások vegyesen is alkalmazhatók, egymásba ágyazhatók. alma egyszerre félkövér és dőlt hatás

7 Betűméret 1. Az abszolút méretmegadásban 1 és 7 között állíthatjuk be a méretet, ahol a 7-es a legnagyobb az 1-es a legkisebb 4-es betűméret 7-es betűméret 2.A relatív méretbeállításnál azt adhatjuk meg, hogy az alapként beállított betűmérethez képest mennyivel nagyobb, illetve kisebb betűméretet akarunk látni. - az így megadott betűmérethez viszonyít Kettővel nagyobb betűméret Eggyel kisebb betűméret

8 Betűtípus Arial betűtípus. Courier betűtípus. A különleges, egyedi betűtípusok csak akkor jeleníthetőek meg ha a látogató gépére fel vannak telepítve. Több tulajdonság is megadható. Szöveg sans – talpatlan serif – talpas mono – írógép

9 Fejléc (Címsor) 1-es fejléc 2-es fejléc 3-as fejléc 4-es fejléc 5-ös fejléc 6-os fejléc 1-es fejléc 2-es fejléc 3-as fejléc 4-es fejléc 5-ös fejléc 6-os fejléc... A fejlécek - ahogy a szövegszerkesztésnél is - a html oldalak logikai felosztását teszik lehetővé. Ez egy középre igazított 1-es fejléc

10 Piros A HTML-ben a színeket az úgynevezett RGB kódolással adjuk meg. Az RGB az angol Red, Green és Blue szavak kezdőbetűi, jelentésük piros, zöld és kék, e három szín keveréséből állítjuk össze a megjelenítendő színt. Kevert Hexadecimális számokkal #8981FA a szín RGB kódja. A piros, zöld vagy kék szín mennyiségét egy hexadecimális számmal adjuk meg. A leggyengébb a 00, a legerősebb az FF. Az első két karakter a vörös (R=red) szín erősségét mutatja. 16-os számrendszerben (hexadecimálisan). A 3.és 4. karakter a zöld szín erőssége (G=green), az 5. és 6. a kéké (B=blue) Betűszín

11 Egy weboldal háttérszínét a body címke bgcolor, szövegének a színét a text tulajdonsággal állíthatjuk be. Háttérszín Az oldal színei Szövegszín Egyszerre több tulajdonság is megadható: HTML 4/VGA (16 szín) szabvány

12 Igazítás Ha nem az alapértelmezett (balra) igazítást szeretnénk használni, megadhatjuk az igazítás típusát az align paraméter segítségével. left=balra, center=középre, right=jobbra, justify=sorkizárt Ez egy középre igazított 1-es fejléc Ez egy jobbra igazított 3-as fejléc Align=" "

13 Bekezdések A elem segítségével a szöveget bekezdésekre tördelhetjük. Az adott bekezdést a és elemek közé kell tenni. A bekezdést az align paraméterrel balra, középre, jobbra igazíthatjuk. A böngészők az egyes bekezdések előtt és után - a tagolás érdekében - nagyobb helyet hagynak. A szöveg tagolása Ha a szövegben egy sort feltétlenül új sorban akarunk kezdeni a taget kell használnunk. Sortörés

14 Vízszintes vonal Ha a dokumentumon belül valamilyen szakaszt el szeretnénk különíteni a többitől, használhatunk vízszintes elválasztó vonalat a tag használatával. Az elválasztó vonal szélességét (width) és vastagságát (size) is megadhatjuk. Az igazítás (align) balra (left), jobbra (right), középre (center) történhet. A vonal szélességét megadhatjuk képpontokban, vagy pedig a rendelkezésre álló hely százalékában.

15 Kép beillesztése A width tulajdonsággal a kép szélességét a height-el a magasságát adhatjuk meg. Img = image Kép beillesztése szövegbe SRC = source után kell megadni a kép nevét és elérhetőségi útját Az „alt”=„alternate” a kép tartalmának szöveges leírását adja meg, ez a szöveg a kép helyett jelenik meg. A kép több oknál foga nem jelenhet meg: nincs meg a kép, ki van kapcsolva a böngészőben vagy a böngésző karakteres. <img src=” kepek/18.jpg” alt=” Buborékszöveg” align=”left” width=”50” height=”50” >

16 JPEG fájlokat használunk ha fényképeket szeretnénk megjeleníteni. Sok színt tárol minél kisebbre tömörített méretben. A GIF típus kevesebb színt képes megjeleníteni, grafikák megjelenítésére ajánlott. A GIF formátumban létrehozhatunk mozgóképeket is, amit böngészők helyesen jelenítenek meg. A PNG formátumot a legkisebb méretű. Nem ajánlott a BMP képek használat html odalak esetén nagy méretük miatt. A nagyon nagy képek lassan letöltődnek le. Képek elhelyezésénél vigyáznunk kell a kis és nagybetűkre. Ha weboldalunkon az „img” címke „src” tulajdonságánál kisbetűvel adtuk meg a kép fájl neve pedig valójában nagy, a weblap webkiszolgáló helyre való feltöltése után ezek nem működnek.

17 Háttérkép A „background” értéke egy kép útvonallal együtt. A háttérkép az oldal tartalma körül mindenhol megjelenik. Ha nem tölti ki az egész böngészőt, akkor csempeszerűen ismétlődik. A kép útvonala nem kötelező ha az a HTML állománnyal egyező könyvtárban van. A beillesztett képeket mindig mellékelnünk kell a HTML állomány mellé, mivel azok azt sosem épülnek be magába a html állományba, csak hivatkozunk rá.

18 Link, hiperlink  A hiperlinkekkel hozhatunk létre kapcsolatot szövegrészek, illetve dokumentumok között.  A böngészők a linkeket aláhúzással illetve eltérő színnel jelölik, de ezek a beállítások megváltoztathatóak. szöveg URL - (Uniform Resource Locator - egységes dokumentum meghatározó rendszer) Amire hivatkozunk a másik lapon horgonynak hívjuk. A linket a másik lapon elhelyezett horgonyhoz irányítjuk. Alapesetben a hivatkozás a lap tetejére visz, de adott szövegrészbe is illeszthető horgony. Linket „a” címkével hozunk létre ……. Az „a” címke „href” tulajdonsága mutatja meg hova hivatkozunk

19 Alma Az „Alma” szó hiperszöveggé alakítása ……. A linkre kattintva az alma.html oldalra visz Ha a másik weblapnak nem a tetejére szeretnénk hivatkozni, hanem valahol lejjebb a szövegben, adott szövegrészben horgonyt kell elhelyeznünk. Az „a” címke „name” tulajdonságával adhatunk meg egy horgonyt, a hivatkozott résznek mintegy nevet adva ezzel: Horgony elhelyezése a szövegben A horgony a weblapon nem jelenik meg

20 A másik weblapon amiben szeretnénk erre a horgonyra mutatni a linket a következő módon adjuk meg: Az almafák természetes helye Képet is tehetünk linknek. Az alma.jpg legye a link: Ha a saját gépen lévő dokumentumra szeretnénk hivatkozni: file://C|web/iskola/palyazat.html Ha egy FTP szerveren elhelyezkedő állományt akarunk belinkelni, akkor az ftp:// protokollt kell használni. (file átviteli ) ftp://ftp.c3.hu/Utilities/winzip70.exe A winzip letölthető erről a címről

21 Ha egy másik weboldalra akarunk linket, használjuk a következőt: http:// hypertext transfer protocol Ez az ELTE honlapja Ha a mailto:email cím formát használjuk, az adott linkre kattintva betöltődik az alapértelmezett levelezőprogram, amellyel emailt küldhetünk a megadott email címre. Itt írhat nekem levelet bejelentkezés egy távoli gépre telnet://ludens.elte.hu/ A levél tárgya ?subject=szöveg Email cím másolatot kap ?cc=cimzett több opciót esetén a & jelet kell alkalmazni.

22 Felsorolások Egyszerű felsorolás Egyszerű felsorolás esetén az és tagek közé kell elhelyeznünk a listaelemeket, amelyeket a tagek vezetnek be. első elem második elem harmadik elem első elem második elem harmadik elem Sorszámozott lista Sorszámozott lista esetén az és tagek közé kell elhelyeznünk a listaelemeket, amelyeket a tagek vezetnek be. első elem második elem harmadik elem 1. első elem 2. második elem 3. harmadik elem

23 Felsorolások Meghatározás lista (definíciós lista) és tagek közé kell elhelyeznünk a listaelemeket tag a fogalom megadásából tag a magyarázat 1. fogalom az első fogalom magyarázata 2. fogalom a második fogalom magyarázata 1. fogalom az első fogalom magyarázata 2. fogalom a második fogalom magyarázata

24 Táblázatok Első cella Második cella Első cella Második cella Táblázat létrehozása (Table) táblázat sor (table row) táblázat cella (table data) A táblázat tartalmának igazítása megadható a „tr”, a „th” és a „td” címkék „align” tulajdonságával.

25 Keret A „border” értéke egy szám ami meghatározza a keret vastagságát. Táblázatok tulajdonságai Gyártó Ár Samsung 12250 A táblázat oszlopok címsorainak meghatározhatározása. Táblázat színe Az egyes sorok vagy adatcellákra szintén alkalmazható a külön szín.

26 A „caption” címkét a „table” címkét követően az első „tr” címke elé tesszük. Merevlemez táblázat címe a „td” címke „colspan” és „rowspan” tulajdonsága, értéke egy szám, amely megmondja, hogy hány oszlopot akarunk összevonni. Oszlopok összevonása szöveg Seagate 13250 Sorok összevonása

27 Táblázat méretezése és ablakhoz igazítása A „table” címke „width” tulajdonságával beállíthatjuk egy táblázat szélességét pixelben megadva. Ha a megadott szélességben a tartalom nem fér el a böngésző nagyobb szélességet enged a táblázatnak. Éppen akkorát amelyben elfér a tartalom. A táblázat szélességét megadhatjuk százalékos formában is. Ilyenkor a táblázat mérete mindig az böngésző ablak méretéhez képest lesz kiszámítva. Ha a táblázatot középre igazítjuk, a szélességét pedig 80%-ra akkor a táblázat mindkét oldalán 10%, 10% marad. Ezzel a módszerrel 10%-os margót hozhatunk létre jobb és bal oldalon. Ezt a 10%-os margót a következő módon állíthatjuk be:

28 Speciális karakterek, ékezetes betűk