w3schools/ html /html5_ intro.asp
description
Transcript of w3schools/ html /html5_ intro.asp
![Page 1: w3schools/ html /html5_ intro.asp](https://reader033.fdocument.pub/reader033/viewer/2022061520/56813bf4550346895da536eb/html5/thumbnails/1.jpg)
http://www.w3schools.com/html/html5_intro.asp
http://www.w3schools.com/css3/default.asp
http://www.w3schools.com/
WEBOLDALFEJLESZTÉS
![Page 2: w3schools/ html /html5_ intro.asp](https://reader033.fdocument.pub/reader033/viewer/2022061520/56813bf4550346895da536eb/html5/thumbnails/2.jpg)
Mi a webtárhely?Ha közzé szeretnénk tenni weboldalunkat az interneten, szükséges az, hogy egy webszervernek egy bizonyos területére töltsük fel a teljes munkakönyvtárunkat, azaz a site mappájánknak a tartalmát.
A webszerverek ezen területeit nevezzük webtárhelynek , ezek használata egyes szolgáltatók esetében reklámozási felületért cserében ingyenes, mások esetében fenntartásukért borsos árat kell fizetni.
Egy webszerveren általában több weboldal is található, a minőségi szolgáltatásokért, azaz nagyobb méretű tárhelyért, az adataink védelméért és a stabil, biztonságos működésért érdemes fizetni.
Az igényelt webtárhelyekhez való hozzá regisztrálás után egy accounttal (hozzáféréssel) fogunk rendelkezni, amivel kapunk egy megadott méretű webtárhelyet, kapunk egy FTP elérést és egy webcímet.
![Page 3: w3schools/ html /html5_ intro.asp](https://reader033.fdocument.pub/reader033/viewer/2022061520/56813bf4550346895da536eb/html5/thumbnails/3.jpg)
Miként fest egy site mappa/munkakönyvtár?
![Page 4: w3schools/ html /html5_ intro.asp](https://reader033.fdocument.pub/reader033/viewer/2022061520/56813bf4550346895da536eb/html5/thumbnails/4.jpg)
A weblapfejlesztés eszközei
(Tools of the Web Development)
![Page 5: w3schools/ html /html5_ intro.asp](https://reader033.fdocument.pub/reader033/viewer/2022061520/56813bf4550346895da536eb/html5/thumbnails/5.jpg)
A weblapfejlesztés eszközeiA weblapfejlesztés egy összetett folyamat, mely számos, jól elkülöníthető részfolyamatra osztható, az egyes részfolyamatok végrehajtásához más-más eszközökre, más-más jellegű szoftverekre van szükség.
• Böngészők:Mozzilla Firefox, Safari, Opera, Google Chrome és az Internet Explorer.
• Editor vagy weblapszerkesztő programok: a. karakterese, b. grafikus (WYSIWYG).http://www.textpad.com/ Adobe Dreamweaverhttp://www.editplus.com/http://www.oxygenxml.com/http://www.crimsoneditor.com/
• Médiaelemek előállítására szolgáló programok: a. képszerkesztés, b. hangok szerkesztése, c. videók szerkesztése.
• Fájlkezelők:Mozzilla FilezillaTotal Commander
![Page 6: w3schools/ html /html5_ intro.asp](https://reader033.fdocument.pub/reader033/viewer/2022061520/56813bf4550346895da536eb/html5/thumbnails/6.jpg)
A weblapfejlesztés alapelvei
(The Principles of the Web Development)
![Page 7: w3schools/ html /html5_ intro.asp](https://reader033.fdocument.pub/reader033/viewer/2022061520/56813bf4550346895da536eb/html5/thumbnails/7.jpg)
A weblapfejlesztés alapelvei1. Fájlszerkezettel kapcsolatos alapelvek
a. A site-hoz hozzunk létre egy munkakönyvtárat, ezen belül helyezzük el az összes site-hoz kapcsolódó fájlt és könyvtárat.
b. A site-on lévő fájlok és könyvtárak nevében csak az alábbiakat használjuk: - angol ábécé kisbetűit,
- poz. egész számokat és - alulvonást ( _ ).
Ne használjunk: nagybetűket, hosszú ékezetes betűket, speciális karaktereket (pl.: / ? . : ~ *), <SPACE> -t
c. a fájlok közti linkelések esetében használjuk relatív elérési utat
![Page 8: w3schools/ html /html5_ intro.asp](https://reader033.fdocument.pub/reader033/viewer/2022061520/56813bf4550346895da536eb/html5/thumbnails/8.jpg)
2. Felbontással kapcsolatos alapelvek
Cél: a vízszintes gördítősávok megjelenésének elkerülése.
a. Fix szélességű design-tervezés esetén max. 950 px széles layoutot tervezzünk. (Ebben az esetben 1024x768-as felbontásra optimalizáljuk oldalunkat. 1024-30=994, szokás 990-re is optimalizálni.)
b. A weboldalakra helyezett táblázatok és képek szélessége szintén max. 950 px legyen (kivéve a háttérképeket).
A weblapfejlesztés alapelvei
![Page 9: w3schools/ html /html5_ intro.asp](https://reader033.fdocument.pub/reader033/viewer/2022061520/56813bf4550346895da536eb/html5/thumbnails/9.jpg)
A HTML leírónyelv
(The HTML Description Language)
![Page 10: w3schools/ html /html5_ intro.asp](https://reader033.fdocument.pub/reader033/viewer/2022061520/56813bf4550346895da536eb/html5/thumbnails/10.jpg)
Mi a HTML?HTML (HiperText Markup Language) egy leírónyelv, jelölőnyelv.
Nem programozási nyelv, azaz nincsenek benne ciklusok és szelekciók, csak szekvencia. (HTML jelölőnyelvben nem programozunk, csak kódolunk!!!)
A HTML leírónyelv utasításai <> jelek között írandók. Ezeket tag-eknek, elemeknek vagy jelölőknek nevezzük.
A HTML olyan jelölőnyelv, mellyel definiálható a weboldal:1. tartalma (szövegek, képek táblázatok stb.) és2. struktúrája (főcím, alcím, bekezdés, lista, kiemelések stb.).
![Page 11: w3schools/ html /html5_ intro.asp](https://reader033.fdocument.pub/reader033/viewer/2022061520/56813bf4550346895da536eb/html5/thumbnails/11.jpg)
A HTML tag-ek/jelölők/elemek példa
• Páros jelölők (tag-ek/elemek) pl.:– <body>…</body>– <h1>…</h1>– <p>…</p>
• Páratlan, önálló jelölők, üres (tag-ek/elemek) pl.:– <img … />– <hr />– <br />
![Page 12: w3schools/ html /html5_ intro.asp](https://reader033.fdocument.pub/reader033/viewer/2022061520/56813bf4550346895da536eb/html5/thumbnails/12.jpg)
A jelölők felépítése• Páros jelölők (tag-ek/elemek)
<jelölő ˽attribútumnév1=”érték1”˽attribútumnév2=”érték2” … > …</jelölő>
• Páratlan, önálló jelölők, üres (tag-ek/elemek)
<jelölő˽attribútumnév1=”érték1”˽attribútumnév2=”érték2” … />
˽ = <SPACE>
![Page 13: w3schools/ html /html5_ intro.asp](https://reader033.fdocument.pub/reader033/viewer/2022061520/56813bf4550346895da536eb/html5/thumbnails/13.jpg)
Egy páratlan jelölőre/üres tag-re példa
<img src="vmilyen_kep.jpg" alt=" Virág" … >
jelölőattribútum
érték
![Page 14: w3schools/ html /html5_ intro.asp](https://reader033.fdocument.pub/reader033/viewer/2022061520/56813bf4550346895da536eb/html5/thumbnails/14.jpg)
Böngészőprogramok
A böngészők értelmezik a HTML kódokat és abból előállítják a formázott, kész weboldalt.
![Page 15: w3schools/ html /html5_ intro.asp](https://reader033.fdocument.pub/reader033/viewer/2022061520/56813bf4550346895da536eb/html5/thumbnails/15.jpg)
A HTML miért jelölőnyelv?(akadálymentesítés a kód szintjén)
A jelölők (tagek) segítségével jelöljük meg a dokumentum egyes részeit: hierarchia + formátum
![Page 16: w3schools/ html /html5_ intro.asp](https://reader033.fdocument.pub/reader033/viewer/2022061520/56813bf4550346895da536eb/html5/thumbnails/16.jpg)
• 1. A Dokumentum Típus Definíció az állomány legelején, ami a használni kívánt DTD-t adja meg.
• 2. A HTML fejléc <head> </head>, ami technikai és dokumentációs adatokat tartalmaz, ezeket az internet böngésző nem jeleníti meg.
(magyar nyelvű, karakterkódolás, CSS link)
• 3. A HTML törzs <body> </body> tag párok, amely a megjelenítendő információkat tartalmazza.
Egy HTML/XHTML/HTML5-ös dokumentum szerkezete
![Page 17: w3schools/ html /html5_ intro.asp](https://reader033.fdocument.pub/reader033/viewer/2022061520/56813bf4550346895da536eb/html5/thumbnails/17.jpg)
A HTML5-ös dokumentum minimum szerkezete
<!DOCTYPE html><html> <head> <meta charset=utf-8> <title>Title of the document</title> <!- - ez jelenik meg a TAB-on - - >
</head>
<body> The content of the document...... </body></html>
![Page 18: w3schools/ html /html5_ intro.asp](https://reader033.fdocument.pub/reader033/viewer/2022061520/56813bf4550346895da536eb/html5/thumbnails/18.jpg)
A HTML5-ös dokumentumban a fejlécinformáció, a tartalominformáció, a karakterkódolás
és a stílusfájl nevének megadása
<!DOCTYPE html><html lang=”hu”>
<html> <head> <title>Title of the document</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" media="all" href=”style.css" />
</head> <body> The content of the document...... </body></html>
![Page 19: w3schools/ html /html5_ intro.asp](https://reader033.fdocument.pub/reader033/viewer/2022061520/56813bf4550346895da536eb/html5/thumbnails/19.jpg)
Az a jó ha a tartalmat és a megjelenítést különválasztják!
Formázás HTML-attribútumokkal (nem jó megoldás):
Többször kell leírni ugyanazt a formátumot → több munka, nagyobb esély a tévesztéshez
![Page 20: w3schools/ html /html5_ intro.asp](https://reader033.fdocument.pub/reader033/viewer/2022061520/56813bf4550346895da536eb/html5/thumbnails/20.jpg)
A tartalom és a megjelenítés szétválasztása
• Válasszuk külön a tartalmat és a formátumot!• HTML = tartalom, struktúra• CSS = formátum• Cascading Style Sheets