XHTML és CSS azaz STÍLUSLAP
T É M A K Ö R Ö K
1. XHTML - lap
2. Xhtml - lap vizuális ismertetése.
3. CSS - lap
4. CSS - lap vizuális ísmertetése
5. Hogyan készítsek weblapot.
1. XHTML - lap
Az XHTML nem más, mint a HTML tovább fejlesztett változata
XHTML a W3C kezdeményezésére készített, szabvány ajánlat
W3C : World Wide Web Consortium. ( Internet címe: WWW.W3.org )
HTML: Hypertext Markup Language.
XHTML: Extensible Hypertext Markup Language. (Bővíthető Hiperszöveges Leírónyelv)
Hypertext, azaz hiperszöveg:
- Weblap tartalmát hordozza
- Programozási informáciolat tartalmaz
- Egyszerű formázatlan szöveget jelenít meg
Markup Language, azaz leírónyelv:
- A hiperszöveget, ennek segítségével lehet formázni.
- Minden böngészőprogram, képes értelmezni.
- Meghatározza az elemek megjelenítését, címsorok és alcímek betűtípusait
2. Xhtml - lap vizuális ismertetése.
XHTML - lap segédlet
Ebben a részben, úgy készítem el a leírásokat, hogy azokat a szerkeszt, másol, beilleszt utasításokkal, átmásolhatjuk a kezdő index.html - lapunkra.
Ekkor úgy kel megjelenni a saját xhtml fájlunkban a szövegsoroknak, mint fentebb a vizuális bemutatóban látható.
Böngészőben megtekintett weblapon, csak a h1-es címkék és a p címkék közé írt szöveg fog megjelenni.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Ide írjuk, weblapunk elnevezését </title>
<link href="stíluslapunk fájl neve.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<h1> Ide írjuk a dokumentumunk címét </h1>
<p> Az XHTML - hez három lehetséges DOCTYPE meghatározás tartozhat. <br />
- strict (szigorú) <br />
- transitional (átmeneti) <br />
- frameset (keretkészletes) <br />
A fenti példában, azaz fejlécben is a transitional meghatározás van beírva, és a továbbiakban is ezt használjuk. <br />
Ha ez helyett, bármelyik másikat írjuk be, már meg is változtattuk a dokumentumtípus - meghatározását.
</p>
</div>
</body>
</html>
Megjegyzés:
A kezdő <p> címke és a záró </p> címke között látható szöveget a gyakorlásokhoz töröljük ki.
Helyette az általunk megfelelő szöveget, vagy a gyakorlati példákban szereplő szöveget gépeljük be.
A fenti példában láthatunk sorlezáró utasításokat is <br /> ezen címkéknek az a szerepe, hogy szövegsorainkat a nekünk megfelelő helyen zárjuk le, így, a következő szövegsor új sorban kezdődik.
3.. CSS - lap
CSS, azaz stíluslap. (Angolul: Cascading Style Sheets. --- Magyarul: Rangsorolt stíluslapok)
Lényege:
A weblap tervezője – készítője meghatározhassa, hogyan nézzen ki az általa készített weblap.
Például:
- Milyen legyen a háttér színe
- Hól helyezkedjen el a beillesztett fotó vagy rajz
- Milyen színű és mekkora betűméretű legyen a címszó, vagy bekezdés szövege
- Összefoglalva, ne a böngésző programok határozzák meg, hogy az általam készített dokumentum, bemutató, hogy nézzen ki.
Megjegyzés:
- CSS, azaz stíluslapról és annak használatáról: bemutató - alapismeretek - stíluslapok rangsorolásánál olvashatsz.
- Stíluslapon megadható, általad megírt szöveg formázásáról: tartalom – szövegformázás témakörben olvashatsz.
4. CSS - lap vizuális ísmertetése
Css, azaz stíluslap segédlet
Ebben a részben, úgy készítem el a leírásokat, hogy azokat a szerkeszt, másol, beilleszt utasításokkal, átmásolhatjuk a kezdő css, azaz stíluslapunkra.
body {font-family: Arial, Helvetica, sans-serif; font-size: 100%; margin: 0; background-color: #ccc;}
#container { width: 800px; margin-top: 5px; margin-left: 5px;}
h1 {text-align: center;}
p {font: 1.2em Ariel; color: #000;}
5. Hogyan készítsek weblapot.
Három teendőnk van.
Első rész.
- Hozz létre a számítógéped könyvtárában egy mappát legyen a neve: első_weblapom.- Természetesen adhatsz neki más nevet is.
- A 2-es témakörben látható vizuálisan is bemutatott anyagot írd be a jegyzettömbbe (ne a word szövegszerkesztőbe) és mentsd el, az általad létrehozott könyvtárban (mappában) --- index.html. néven
Az xhtml lapok kiterjesztése mindig html
Ha több weblapot,aza xhtml - lapot is készítesz a mappádon belül,
- Az első xhtml lap neve mindig index.html.
- A többi xhtml – lapnak tetszés szerint válszthatsz nevet. De a kiterjesztésnek html - nek kell lenni
- Egyre figyelj, a fájlok neveiben ne szerepeljen ékezetes és nagybetű. Példa: kép = kep , könyv = konyv, stb.
- Lehetőleg egy szóból álljon és lényegre törő, hogy könnyen eligazodj a weblapjaid között.
Példa: Egy szó, ékezet nélkül.
Lényegre törő = lenyegretoro.html
a pite almás = apitealmas.html
De ha jól megy az angol szavak használata, akkor használj angol szavakat és levan a gond az ékezetekről.
Második rész.
- A 4-es témakörben látható css, azaz stíluslap tartalmát írd át a jegyzettömbbe, és mentsd el például ezen a néven : kezdet.css
A css, azaz stíluslapok kiterjesztése mindig css
- Ha ezekkel megvagy, térj vissza az xhtml – lapodra és fent a link sorban található, stíluslapunk szavat töröld ki, helyébe írd az általad megadott css fájl nevét ( jelen esetben a kezdet szót)Harmadik rész
Ha az XHTML és a CSS lappal is késszen vagy:
- Nyisd meg, a számítógépedre telepített, internet böngésző programot. Például: Internet Explorer
- A fájl menüben kattints a kapcsolat nélkül témakörre.
- Szintén a fájl menüben kattints a fájl megnyitás menüre.
- Az ekkor megnyíló ablakban kattints, a tallóz menüre és keresd meg a mappádat, majd jelöld ki az index.html fájlt.
- A tallózó ablakban megjelenik az index.html fájl neve, ekkor kattints az ok gombra, és már láthatod is a munkádat.
Megjegyzés:
Bátran belevághatsz a weblap készítésének alapismereteibe, és gyakorlásába.
Nem kell félned, hogy a világhálón mások is látják, hogyan is gyakorolsz.
A weblapod csak akkor jelenik meg a világhálón, ha valamelyik internet szolgáltatóval felveszed a kapcsolatot, és elfogadod a feltételeket.
Erről bővebben: A tartalom - webhely megszervezése - témakörben olvashatsz.
Ennek tudatában bátran vágj bele, és készíts annyi weblapot, amennyit csak tudsz. Majd válaszd ki a legjobbat, és tedd fel a világhálóra.