1 / 20

w3schools/ html /html5_ intro.asp

WEBOLDALFEJLESZTÉS. http://www.w3schools.com/. http://www.w3schools.com/ html /html5_ intro.asp. http://www.w3schools.com/css3/ default.asp. Mi a webtárhely ?.

zoey
Download Presentation

w3schools/ html /html5_ intro.asp

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WEBOLDALFEJLESZTÉS http://www.w3schools.com/ http://www.w3schools.com/html/html5_intro.asp http://www.w3schools.com/css3/default.asp

  2. Mi a webtárhely? Ha közzé szeretnénk tenni weboldalunkat az interneten, szükséges az, hogy egy webszervernekegy bizonyos területére töltsük fel a teljes munkakönyvtárunkat, azaz a site mappájánknaka 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.

  3. Miként fest egy site mappa/munkakönyvtár?

  4. A weblapfejlesztés eszközei(Tools of the Web Development)

  5. A weblapfejlesztés eszközei A 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: MozzillaFirefox, Safari, Opera, GoogleChromeés az Internet Explorer. • Editor vagy weblapszerkesztő programok: a. karakterese, b. grafikus (WYSIWYG). http://www.textpad.com/Adobe Dreamweaver http://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: MozzillaFilezilla Total Commander

  6. A weblapfejlesztés alapelvei(The Principles of the Web Development)

  7. A weblapfejlesztés alapelvei Fájlszerkezettel kapcsolatos alapelvek 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. A site-on lévő fájlok és könyvtárak nevében csak az alábbiakathaszná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 a fájlok közti linkelések esetében használjuk relatív elérési utat

  8. A weblapfejlesztés alapelvei 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ésesetén max.950 px széles layoutottervezzü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 pxlegyen (kivéve a háttérképeket).

  9. A HTML leírónyelv(The HTML DescriptionLanguage)

  10. Mi a HTML? HTML (HiperTextMarkupLanguage) 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, elemeknekvagy jelölőknek nevezzük. A HTML olyan jelölőnyelv, mellyel definiálható a weboldal: tartalma (szövegek, képek táblázatok stb.) és struktúrája (főcím, alcím, bekezdés, lista, kiemelések stb.).

  11. 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/>

  12. 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>

  13. Egy páratlan jelölőre/üres tag-re példa <imgsrc="vmilyen_kep.jpg" alt=" Virág" … > jelölő attribútum érték

  14. 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.

  15. A HTMLmié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

  16. Egy HTML/XHTML/HTML5-ös dokumentum szerkezete • 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.

  17. 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>

  18. 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> <htmllang=”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>

  19. 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

  20. 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 • CascadingStyleSheets

More Related