Tervezett tematika!
- Html szintaktikája
- Html szerkezete
- Oldalleíró nyelvek fajtái
- Index html tartalmi elemei
- Html oldal meghatározó tag-jei
- Weboldal tipográfia
- Dinamikus és statikus weblapok közötti alapvető különbségek
- Képek szerkesztése és beillesztése
- Szöveg beillesztése és formázása
- Hyperlink alkalmazási lehetőségei és típusai
- Táblázat beillesztése és formázása
- Meta-adatok alkalmazása
- Attribútumok típusai
- Attribútumok alkalmazása
- CSS létrehozása és alkalmazási lehetőségei
- CSS tartalmi elemei
- CSS megadása a headben
- CSS szintaktikája és szemantikája
- Html szintaktikai és szemantikai szabályok
- Stíluslapok alkalmazási lehetőségei
- Stíluselemek azonosítása, csoportositása
- Táblázatok beillesztése és formázása
- Átlátszó, futószöveg, mozgóképek alkalmazása
- Űrlapok készítése és formázása
- Háttér beállítási lehetőségei
- Térkép funkció szerkezete képben
- Keretek létrehozása, formázása és alkalmazása
- Adatbeviteli mezők és listák létrehozása és formázása
- Keresőoptimalizálás jelentősége (SOE)
- Webkiszolgáló a sajátgépen (XAMPP)
- Adatbázisok, táblák létrehozása, adatok bevitele MySQL kezelővel
- Adatbáziskezelés SQL parancsok segítségével (CREATE DATABASE
Gyakorlati foglalkozás!
http://people.inf.elte.hu/csa/html/alapok.htm
KARAKTERKÓDOLÁS BEÁLLÍTÁSA
A stíluslapfájl legelső sorába ajánlott a karakterkódolásra vonatkozó információt írni. Itt is az UTF-8 kódolást ajánlom, mint a HTML esetében. Ekkor így kell kezdődnie a stíluslapnak:
@charset "utf-8";
KIJELÖLŐK, TULAJDONSÁGOK, ÉRTÉKEK
Ezután az egész stíluslap nem más, mint kijelölők (selector) és meghatározásblokkok (declaration) felsorolása. A meghatározás két részből áll: tulajdonságból (property) és értékből (value).
@charset "utf-8";
h1 {
color: red;
}
Ebben az egyszerű stíluslapban a h1 címke a kijelölő (selector), a color: red; sor pedig a meghatározás, ezen belül a color a tulajdonság (property), a red pedig ennek a tulajdonságnak az értéke (value). Általánosan:
@charset "utf-8";
kijelölő {
tulajdonság1: érték1;
tulajdonság2: érték2;
tulajdonság3: érték3;
...
}
A tulajdonság megnevezése után kettőspontot ( : ) kell írnunk, majd következik az érték, ami után pontosvesszőt ( ; ) kell tennünk.
A kijelölő egy címkét jelöl ki a HTML dokumentumban, és erre a kijelölt címkére vonatkozik a formázása.
CSS KOMMENTEK
HTML megjegyzést vagy kommentet a <!-- és a --> jelek közé írhatunk. CSS-ben pedig a /* és a */ jelek közé. Egy megjegyzés több sort is átfoghat. A megjegyzéseket nem veszi figyelembe a böngésző, semmilyen hatással nincsenek a kinézetre, két dolgot szolgálnak:
Hosszabb stíluslapokhoz érdemes megjegyzéseket írni a megfelelő helyre, hogy ha később elővesszük, akkor tudjuk, mit miért írtunk. Ez főleg akkor fontos, ha nem csak magunknak készítjük a stíluslapot, hanem másnak is meg kell értenie.
Teszteléskor hasznosnak fogjuk találni a megjegyzést. Ideiglenesen megjegyzések közé tehetünk kódrészleteket, amikre éppen nincs szükség.
@charset "utf-8";
/*Ez egy megjegyzés.*/
h1, h2, h3 {
color: red; /*Ez egy megjegyzés.*/
}/*Ez
egy
többsoros megjegyzés.*/
STÍLUSLAP BEÁGYAZÁSA
Az elkészült stíluslap bármennyi HTML oldalhoz használható egyidejűleg. Viszont ahhoz, hogy a stíluslap hatással legyen rá, össze kell kötni a HTML fájlt és a stíluslapot. Ezt háromféleképpen tehetjük meg:
1. Külső stíluslapok
Ha egy HTML fájlra alkalmazni kívánunk egy stíluslapot, akkor a fejrészbe (<head>...</head>) kell írni a következőt, ha a két fájl azonos mappában van:
<head>
<link href="stiluslapneve.css" rel="stylesheet" type="text/css">
</head>
A rel és a type attribútumnak mindig ez kell hogy legyen az értéke, ha stíluslapot ágyazunk be, a href-nek pedig a stíluslap elérési útvonalát kell tartalmaznia a HTML fájlhoz képest. Ez a leggyakrabban alkalmazott megoldás a stíluslapok beágyazására, ezt a sort minden weboldalunk kódjába bemásolhatjuk a href-nek a megfelelő értéket adva.
2. Belső stíluslapok
Olyan stílusok megadásakor érdemes használni ezt a módszert, aminél tudjuk, hogy csak egyetlen weboldalhoz fogjuk felhasználni. Ugyanis ha egy stíluslapot már kettő, vagy több weboldalhoz is felhasználunk, akkor ajánlott külön stíluslapban tárolni őket, és a fenti 1. módszerrel társítani a weboldalhoz. A <head>...</head> részbe kell beírni a stíluslapot a <style>...</style> címkék közé.
<head>
<style type="text/css">
h1 {
color: red;
text-align: center;
}
h2 {
color: blue;
text-decoration: underline;
margin-bottom: 1em;
}
</style>
</head>
3. Szövegközi stílusok
A style attribútumot bármelyik címkén belül használhatjuk. Ezt akkor érdemes használni, ha egy stílus csak egyszer, vagy nagyon kevésszer fordul elő a weboldalon, és ezért nem akarjuk külön kiírni a külső stíluslapban.
Ha mondjuk alkalmaztuk a fenti egyszerű stíluslapot az oldalunkra, és minden címsor piros lett és középre igazított, de mi egyetlen címsornál azt szeretnénk, ha mégis kék és jobbra igazított lenne, akkor ezt így adhatjuk meg a kívánt címsornál (a szövegközi stílus felülbírálja az összes többi stílust, erről később szó lesz):
<h1 style="color: blue; text-align: right;">
<html>
<head>
A HTML 4.01-ben definiált fejrész-elemek bármelyike, tetszőleges sorrendben és tetszőleges számú előfordulással, kivéve a base és a title elemeket, melyek csak egyszer fordulhatnak elő. A title az egyetlen olyan gyermekelem a head-elemben, amely szükségszerűen megjelenik.
</head>
<body>
Legalább egy blokk-elemnek vagy egy script elemnek kell itt szerepelni, (de akármennyi lehet), olyan sorrendben, amely értelemszerűen a dokumentum felépítését és elrendezését követi. Az ins és a del elemek használata is megengedett a body elemben, abban az esetben, ha blokkszintű elemként használjuk őket. Megengedett blokkelemek még:
bekezdés/paragraph (p),
fejezetcím/heading (h1…h6),
idézetblokk/block quotation (blockquote),
számozott lista/ordered list (ol),
számozatlan lista/unordered list (ul),
definíciólista/definition list (dl),
szakasz/division (div),
script-tiltás/no script support (noscript),
űrlap/form (form),
táblázat/table (table),
mezőhalmaz/fieldset (fieldset) és a
cím/address (address).
A többi HTML-elem használata a body elemen belül nem megengedett / helytelen / érvénytelen.
</body>
</html>
Webkiszolgáló a sajátgépen
A felhasználó, ahhoz hogy a munkaállomásán képes legyen tesztelni az általa elkészített dinamikus weboldalt, célszerű egy alkalmazást futtatni, amit XAMPP-nak neveznek. A XAMPP egy szabad és nyílt forrású platformfüggetlen webszerver-szoftvercsomag, amelynek legfőbb alkotóelemei az Apache webszerver, a MySQL adatbázis-kezelő, valamint a PHP és a Perl programozási nyelvek értelmezői (végrehajtó rendszerei). 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.
A név magyarázata
A XAMPP egy betűszó ill. rövidítés, betűi a következő kifejezésekből származnak:
X – eredeti olvasatban az angol cross-platform szót helyettesíti, amely a platformfüggetlenséget jelenti
Apache webszerver
MariaDB adatbázis-kezelő (korábban MySQL)
PHP szerveroldali szkriptnyelv
Perl általános célú szkriptnyelv
Követelmények és jellemzők
A XAMPP egyetlen tömörített (zip, tar, 7z vagy exe formátumú) állományba van csomagolva, telepítéséhez mindössze ezt a fájlt kell letölteni és futtatni. A telepítés elvégzi az alapbeállításokat, azokon csak nagyon keveset vagy éppen semmit nem kell változtatni, ezután a rendszer készen áll a webszerver és a mintaalkalmazások futtatására. A XAMPP-csomagot rendszeresen frissítik, így az mindig az Apache, MariaDB, PHP és Perl legújabb változatát tartalmazza, valamint más kiegészítőket is, mint pl. az OpenSSL és a phpMyAdmin. Verziószáma a csomagban található PHP-értelmező verziójával egyezik meg (jelenleg az 5.5.x, 5.6.x és 7.0.x PHP-verziókhoz egyaránt elérhető különálló csomag).
A XAMPP-csomag több példányban is telepíthető a gazdagépre, a különálló telepítések képesek önmagukban, a többi csomag megzavarása nélkül működni, ráadásul az installált példányok egyszerűen átmásolhatók egy másik gépre.
A szoftver három változatban is elérhető: teljes, általános és kisméretű csomagok léteznek.
Használata
Hivatalosan a XAMPP tervezői az eszközt egy fejlesztőrendszernek szánták, amellyel a web-tervezők és programozók internetes kapcsolat nélkül fejleszthetik és tesztelhetik alkalmazásaikat. Ennek érdekében több fontos biztonsági funkció alapértelmezésben ki van kapcsolva a csomagban,[3] ennek ellenére a XAMPP szoftvert valódi webes szolgáltatóként is használják. A csomag egy külön eszközt tartalmaz a legfontosabb részek jelszavas védelmének beállítására.[4]
A XAMPP többféle adatbázis-kezelő használatát is támogatja, ilyenek pl. a MySQL és az SQLite és mások.
A XAMPP telepítése után a helyi gép (a localhost) hálózati gépként is hozzáférhetővé válik, pl. FTP kliensprogrammal elérhető. Alkalmazható pl. FileZilla fájlkezelő, telepíthetők tartalomkezelő rendszerek, mint a WordPress vagy a Joomla!. A localhost közvetlenül is kezelhető egyes HTML vagy általános szövegszerkesztőkből, az FTP protokoll használatával.
Az alapbeállítás szerinti FTP felhasználónév a „newuser”, jelszava „wampp”. Az alapbeállítás szerinti MySQL felhasználónév a „root”, jelszó nélkül.
Összetevők
XAMPP for Windows 5.6.19:[5]
Apache 2.4.17
MariaDB 10.1.10
PHP 5.6.19
phpMyAdmin 4.5.1
OpenSSL 1.0.2
XAMPP Control Panel 3.2.2
Webalizer 2.23-04
Mercury Mail Transport System 4.63
FileZilla FTP Server 0.9.41
Tomcat 7.0.56 (mod_proxy_ajp konnektorral)
Strawberry Perl 7.0.56 Portable
XAMPP 5.6.19 for Linux:[5]
Nincsenek megjegyzések:
Megjegyzés küldése