Jegyzet az órán tanultakhoz;
http://people.inf.elte.hu/zirtaai/html_ebooks/html_css_24ora_alatt.pdf
http://www.standardsmode.hu/html-css/html-alapok/
Fogalmak;
A HTML (angolul: HyperText Markup Language=hiperszöveges jelölőnyelv) egy leíró nyelv, melyet weboldalak készítéséhez fejlesztettek ki.
Cím szabvány a böngészőben.;
A HTTP (HyperText Transfer Protocol) egy információátviteli protokoll a weboldalak eléréséhez.
Az URL vagy más néven webcím (mely a Uniform Resource Locator [egységes erőforrás-hely] rövidítése), az interneten megtalálható bizonyos erőforrások (például szövegek, képek) szabványosított címe.
CSS; A stíluslapokat leíró nyelv a CSS, amelynek az elemeivel betűtípusokat, színeket, illetve elhelyezést határozhatunk meg, így végeredményben megadhatjuk, hogy miként jelenjen meg egy oldal tartalma a böngészőablakban. A CSS-stílusokat tárolhatjuk közvetlenül az adott HTML-fájlban, de külön stíluslapfájlban is elhelyezhetjük azokat. Bárhogy is járjunk el, a stíluslapok stílusszabályokat tartalmaznak, amelyek adott típusú elemek megjelenését befolyásolják. Ha külön fájlban tároljuk őket, akkor. CSS kiterjesztéssel jelöljük, hogy stíluslapfájlról van szó.
Utalás az index.html <head> részében a css-re;
<link rel="stylesheet" type="text/css" href="styles.css" />
Webszerver; PHP_SQL
A PHP általános szerver oldali szkript nyelv, melyet dinamikus weblapok megalkotására hoztak létre. A PHP a Personal Home Page (személyes honlap) kifejezésből ered, de hivatalos jelentése a következő: Hypertext Preprocessor. A MySQL egy olyan adatbázis rendszer, mely sok adat tárolására alkalmas, továbbá keresni is tudunk közöttük. Ezek az adatbázisok pedig könnyen kezelhetőek PHP programok segítségével. Később részletesen.
A File Transfer Protocol, vagy rövid nevén FTP TCP/IP hálózatokon – mint amilyen az internet is – történő állományátvitelre szolgáló szabvány. Gyakran van szükség arra, hogy valamilyen állományt hálózaton keresztül töltsünk le saját gépünkre, vagy egy állományt mások számára hozzáférhetővé tegyünk. Erre alkalmas az FTP, ami lehetővé teszi a különböző operációs rendszerű gépek között is az információcserét. A világon nagy mennyiségű információforrás áll rendelkezésre, melyek letöltése ilyen módon megvalósítható.
A XAMPP egy szabad és nyílt forrású platformfüggetlen webszerver-szoftvercsomag, ami biztosítja gépünkön a megfelelő webszerver környezetet. Ez a szoftvercsomag egy integrált rendszert alkot, amely webes alkalmazások készítését, tesztelését és futtatását célozza, és ehhez egy csomagban minden szükséges összetevőt tartalmaz. A rendszer egyik nagy előnye az összehangolt elemek könnyű telepíthetősége.
Szerkesztés; jegyzettömb notepad, vagy grafikus prg; később.
Kezdő oldal neve index.html
Minden HTML formátumú szövegfájl a <HTML> utasítással kezdődik és a </HTML> záró utasítással végződik. A dokumentumot a fejlécelemek vezetik be, melyek kezdetét a <HEAD> utasítás jelzi. A fejlécelemek között szokás a dokumentumcímet megadni, mely címet a <TITLE> és a </TITLE> utasítások közé kell zárni. A fejlécet a </HEAD> utasítás zárja. A dokumentumtörzs a fájl <BODY> és </BODY> utasítások közötti része. Ezen elemek között kell elhelyezni mindent: a szöveget, hivatkozásokat, képeket, stb. (A keretek és a JavaScript kódok kivételével!) Tehát a következőkben a következő szerkezetet fogjuk használni:
Mit miért:
<?xml version="l.О" encodings"UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//HU"
"http: //www.w3 .org/TR/xhtmlll/DTD/xhtmlll .dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>The First Web Page</title></head>
Kezdjük; az oldal szerkezete
<HTML>
<HEAD>
<TITLE> Ide jön az oldal címe, ezt a szöveget fogod latni a böngésző címsorában</TITLE>
</HEAD>
<BODY>
Ide jön a dokumentumtörzs. A tartalom ami látható a weboldalon
</BODY>
</HTML>
A következőkben egyszerű formázó tag-ekre mutatok példát, amelyet a <body> és </body> tagek közé kell elhelyezni.
<html> ... < /html> Magában foglalja a teljes HTML-dokumentumot.
<head> ... </head> Ez az elem tartalmazza a HTML-dokumentum fejlécét.
<title> ... </title> Ez az elem tartalmazza a dokumentum címét.
<body> ... < /body>Ez az elem tartalmazza a HTML-dokumentum törzsét.
<p> ... < /P> Szövegtömb Bekezdés.
<br /> Az egyes bekezdések között kihagy egy sort. Sortörés.
<hr /> Vízszintes vonal.
<hl> ... </hl> Első szintű címsor.
<h2> ... </h2> Második szintű címsor.
<h3> ... </h3> Harmadik szintű címsor.
<h4> ... </h4> Negyedik szintű címsor (ritkán használt).
<h5> ... </h5> Ötödik szintű címsor (ritkán használt).
<h6> ... </h6> Hatodik szintű címsor (ritkán használt).
A táblázatban láthatjátok a kódot, és mellette a kód eredményét. Amint látni fogjátok, minden tag-et (formázó utasítást) a < jel vezet be, és a > jel zár le. Az adott tag hatását a megfelelő lezáró tag szünteti meg, amely </tag> formátumú.
() Ha nem ezt szeretnéd használni, akkor természetesen bármilyen szöveges szerkesztőben (pl. notepad, joe, pico) megírhatod a kódot, amit el kell mentened, majd a böngésződbe be kell olvasnod.
Betűtípusok, stílusok <b> <i> <u> <tt>
Ha ezt a kódot beírod a dokumentumtörzsbe
<b>Kövér betűk (bold) </b>
Kövér betűk (bold)
<i>Dőlt betűk (italic)</i>
Dőlt betűk (italic)
<u>Aláhúzott betűk (underlined) </u>
Aláhúzott betűk (underlined)
<tt>Írógép betűk (teletype) </tt>
Írógép betűk (teletype)
Fejléc <h1> ... <h6>
(A fejlécek - mint ahogy a szövegszerkesztésnél is megszokhattuk - a html oldalak logikai felosztását teszik lehetővé. pl. h1 az oldal címe, h2 egy alcím, h3 annak az alcíme és így tovább. A HTML oldalak esetén 6 fejlécet használhatunk)
<h1>1-es fejléc </h1>
1-es fejléc
<h2>2-es fejléc </h2>
2-es fejléc
<h3>3-as fejléc </h3>
3-as fejléc
<h4>4-es fejléc </h4>
4-es fejléc
<h5>5-ös fejléc </h5>
5-ös fejléc
<h6>6-os fejléc </h6>
6-os fejléc
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) pl.
<h1 align="center"> Ez egy középre igazított 1-es fejléc </h1>
Ez egy középre igazított 1-es fejléc
<h3 align="right"> Ez egy jobbra igazított 3-as fejléc </h3>
Ez egy jobbra igazított 3-as fejléc
betűméret <font size=" ">
A betűméretet kétféleképpen állíthatjuk be: abszolút és relatív módon.
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...
<font size ="4"> 4-es betűméret </font>
4-es betűméret
<font size ="7"> 7-es betűméret </font>
7-es betűméret
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. Ha pl. 2-el nagyobbat, akkor a +2, ha 1-el kisebbet, akkor a -1 méretmegadást kell alkalmaznunk.
Azt, hogy mihez képest legyen nagyobb vagy kisebb az adott betűméret a <basefont size="méret"> tag segítségével állíthatjuk be.
<font size ="+2"> Kettővel nagyobb betűméret </font>
Kettővel nagyobb betűméret
<font size ="-1"> Eggyel kisebb betűméret </font>
Eggyel kisebb betűméret
Az alábbi ablakban módosíthatod a kódot, és kipróbálhatod a méretmegadások közti különbségeket. pl. megváltoztathatod a basefont beállításokat is...
<HTML>
<HEAD>
<TITLE>Meret megadasok</TITLE>
</HEAD>
<BODY>
<basefont size="3">
<font size="2"> 2-es méret </font>
<font size="4"> 4-es méret </font>
<font size="7"> 7-es méret </font>
<font size="+2"> 2-el növel méret </font>
<font size="-1"> 1-el csökkentett méret </font>
<font size="-2"> 2-vel csökkentett méret </font>
</BODY>
</HTML>
Betűtípus <font face=" ">
A Face paraméter segítségével állítható be a kívánt betűtípus.
Ne használj különleges, egyedi betűtípusokat, mert nagy valószínűséggel a látogatók semmit sem vesznek észre belőle. (ugyanis azon betűtípusok esetében, amelyek nincsenek az adott gépre felinstallálva, a böngésző a hagyományos betűtípusokat jeleníti meg.)
<font face ="Arial">Arial betűtípus. </font>
Arial betűtipus.
<font face ="Courier">Courier betűtípus. </font>
Courier betűtipus.
Betűszín <font color=" ">
A betűk színét is többféleképpen lehet beállítani. Az első esetben a szín nevét használjuk, természetesen angolul. pl. red, yellow, black, white, stb... A második esetben egy kóddal adjuk meg a színt. A 6 jegyű kódot a # jel vezeti be.
<font color=red> Piros </font>
Piros
<font color=#898134> Kevert </font>
Kevert
#898134 a szín úgynevezett RGB kódja. 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 leggyengébb a 00, a legerősebb az FF. A 3.és 4. karakter a zöld szín erőssége (G=green), az 5. és 6. a kéké (B=blue)
A színek kódját a grafikai programok többsége megmutatja az adott színt kiválasztva. De az RGB picker segítségével online módon is megtudhatod a színek kódját.
Vízszintes vonal <hr>
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 <hr> tag használatával.
Ez egy vízszintes vonal (horizontal rule) <hr>
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.
pl. <hr size="3" align="center" width="150">
A vonal szélességét megadhatjuk képpontokban (ahogy a fenti példa mutatja), vagy pedig a rendelkezésre álló hely százalékában.
pl. <hr size="3" align="center" width="80%">
Bekezdések <p>
A <p> elem segítségével a szöveget bekezdésekre tördelhetjük. Az adott bekezdést a <p> és </p> 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.
Igazítás (align): left(balra), center(közép), right(jobbra)
<P align="left"> Ez egy balra igazított bekezdés </P>
Ez egy balra igazított bekezdés
<P align="center"> Ez egy középre igazított bekezdés </P>
Ez egy középre igazított bekezdés
<P align="right"> Ez egy jobbra igazított bekezdés </P>
Ez egy jobbra igazított bekezdés
Sortörés <br>
Ha a szövegben egy sort feltétlenül új sorban akarunk kezdeni a <br> taget kell használnunk.
Ez az első sor<br>Ez pedig a második
Ez az első sor
Ez pedig a második
Hiperlinkek <a href="URL"> szöveg </a>
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, persze ezek a beállítások megváltoztathatóak.
Az URL (Uniform Resource Locator, egységes dokumentum meghatározó rendszer) a következő lehet:
Ha a saját gépünkön lévő dokumentumra szeretnénk hivatkozni, akkor az URL megadásánál a file:// "előtagot" kell használnunk. Ha pl. a c:\web\iskola\palyazat.html oldalra szeretnénk linket, akkor a file://C|WEB/ISKOLA/PALYAZAT.HTML URL-t kell használni. A c:\ megadás helyett használjuk a c| formát.
file://
dokumentum a kliens számítógépen
file://C|WEB/ISKOLA/PALYAZAT.HTML
Jól gondoljuk meg, hogy valóban erre a megadási módra van-e szükségünk. (ha ugyanezt az oldalt másik gépről néznénk, akkor a link az azon a gépen lévő web alkönyvtárban keresné az iskola alkönyvtárat és abban a palyazat.htm oldalt...)
Ha egy FTP szerveren elhelyezkedő állományt akarunk belinkelni, akkor az ftp:// protokolt kell használni.
ftp://
file átviteli protocol
ftp://ftp.c3.hu/Utilities/winzip70.exe
Ha egy másik weboldalra akarunk linket, használjuk a következőt:
http://
hypertext transfer protocol
http://www.elte.hu/
Ha a link segítségével be szeretnék jelentkezni (telnet segítségével) egy gépre, használjuk a következőt:
telnet://
bejelentkezés egy távoli gépre
telnet://wmk.hu/
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.
mailto:
email cím megadása
mailto:abonyita@freemail.hu
(A levél tárgya is megadható a ?subject=szöveg elemmel, sőt az is hogy ki kapjon másolatot (?cc=cimzett) Ha több opciót akarunk megadni, akkor az &jelet kell alkalmazni. pl. mailto:abonyita@freemail.hu?CC=gipszjakab@freemail.hu&Subject=Proba)
Példák:
<a href="http://wmk.hu/">Ez az iskolánk honlapja</a>
Ez az ELTE honlapja
<a href="ftp://ftp.c3.hu/Utilities/Winzip70.exe ">A winzip letölthető erről a címről</a>
A winzip letölthető erről a címről
<a href="mailto:szli@freemail.hu?subject=Üdvözlet">Itt írhat nekem levelet</a>
Itt írhat nekem levelet
A következőkben (pl. a frameknél) még foglalkozunk a hiperlinkek megadási módjaival.
Felsorolások
A HTML nyelv lehetőséget ad arra, hogy különböző listákat (felsorolás, sorszámozott, meghatározás) hozzunk létre.
Egyszerű felsorolás
Egyszerű felsorolás esetén az <ul> és </ul> tagek közé kell elhelyeznünk a listaelemeket, amelyeket a <li> tagek vezetnek be. pl.
<ul>
<li>első elem
<li>második elem
<li>harmadik elem
</ul>
első elem
második elem
harmadik elem
Sorszámozott lista
Sorszámozott lista esetén az <ol> és </ol> tagek közé kell elhelyeznünk a listaelemeket, amelyeket a <li> tagek vezetnek be. pl
<ol>
<li>első elem
<li>második elem
<li>harmadik elem
</ol>
első elem
második elem
harmadik elem
Meghatározás lista
Meghatározás lista esetén az <dl> és </dl> tagek közé kell elhelyeznünk a listaelemeket, amelyek a fogalom megadásából (<dt> tag vezeti be) és a magyarázatából (<dd> tag vezeti be) állnak.
<dl>
<dt>1. fogalom <dd>az első fogalom magyarázata
<dt>2. fogalom <dd>a második fogalom magyarázata</dd>
</dl>
1. fogalom
az első fogalom magyarázata
2. fogalom
a második fogalom magyarázata
Nincsenek megjegyzések:
Megjegyzés küldése