HTML (HiperText Mark-Up Language)

Slides:



Advertisements
Hasonló előadás
HÁLÓZATOK.
Advertisements

Bemutató-készítés PowerPoint.
Weblapkészítési tudnivalók 2: Útmutató az elnevezésekhez Pék Ágnes © 2009.
HTML nyelv Hiper-Text Markup Language 1. óra.
Szövegszerkesztési alapismeretek
Operációs rendszer Az operációs rendszer feladatai, részei, fajtái
Az Internet adta lehetőségek
1 Internet. 2 WWW  World Wide Web  Hivatkozásokkal összekötött hipermédia dokumentumok rendszere  Dokumentumok -> Weboldalak  A weboldalak hipertext.
INFORMATIKA I. 9. fejezet 2005 Széchenyi István Egyetem Internet.
Hogyan tedd hatékonnyá weboldalad?
FRAME-k (keretek). FRAME-k A frame-ek (keretek) segítségével a képernyőt felosztva egyszerre jeleníthetünk meg több webes dokumentumot a képernyőn. Fejlec.html.
2010/2011.Huszár István1. dia Weboldalak tervezése II. (X)HTML.
HÁLÓZATOK.
Böngészők Internet Explorer Mozilla Firefox
Honlapelemzés. miért?  tanulmányok  tapasztalatszerzés  előkészítő munkálatok: honlaptervezés  fejlődés.
Multimédiás technikák 1. kérdés Melyik diszkrét médium? a)hang b)videó c)animáció d)kép.
HTML nyelv.
Internetes böngészőprogram használata, beállításai
Leírónyelvek: HTML és XHTML
Eszterházy Károly Főiskola ─ Médiainformatika Intézet HTML (HiperText Mark-Up Language) HTML leírónyelvvel írjuk le, hogy a weboldal elemei (képek, szöveg,
Informatikus könyvtáros
1. Multimédiafejlesztés feladat (1)
WEBOLDALFEJLESZTÉS
HTML elemek Linkek, táblázatok és képek Forrás, amelyből össze lett állítva a prezentáció szövege és képei:
WebStarter ECDL W e b k e z d ő ECDL Webkezdő mintafeladat.
A HTML alapjai Havlik Barnabás Készítette:
Böngésző programok (Böngészés).
HTML (Hypertext Mark-Up Language). Jellemzői Szöveges alapú internetes oldalak nyelve A formázási műveleteket is szövegesen írja le Szöveget, képeket,
Vizuális és web programozás II.
HTML oldal felépítése Készítette: Pataki Arnold
Buris Katalin V. földrajz - informatika
Információ és kommunikáció Szilágyi András. Követelmények A cd-n az anyag a következő részeket fedte le: Kliensprogramok, letöltés-vezérlők Kliensprogramok,
SZOFTVER.
Nem irodai programok fájltípusai
XHTML 1. óra. Miért térjünk át HTML-ről XHTML- re? HTML-szabványban tartalom és forma összemosódott HTML 4.0 szabványban stíluslapok használatát javasolták.
Korpásné Szűcs Melinda web-referens DEENK Korpásné Szűcs Melinda web-referens DEENK.
Internet, Böngészők, Elektronikus levelezés
Weboldalak tervezése (X)HTML.
Weboldal tervezés programozó szemmel. Alapok Minden webcím www. –tal kezdődikMinden webcím www. –tal kezdődik Webböngésző = Internet ExplorerWebböngésző.
Prezentáció készítése Balogh Zoltán PTE-TTK IÁTT Bevezetés az Openoffice Impress használatába.
Alkalmazói programok Integrált felhasználói rendszerek Számítómunkahelyen szükséges felhasználói programokat egy csomagban, modulokban tartalmazza; az.
Web-grafika II (SVG) 5. gyakorlat Kereszty Gábor.
Web-programozás Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék 1. Előadás Tananyag: A WWW A HTML nyelv alapjai.
Internet, Elektronikus levelezés
XML Mi az XML?  Extensible Markup Language  Kiterjeszthető jelölő nyelv  Adatok, adatstruktúrák leírására szolgál  A HTML és az SGML tapasztalataira.
Készítette: Turócziné Kiscsatári Nóra
Az NVU webszerkesztő program
A prezentáció-készítés szabályai
Web-programozás Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék 2. Előadás Tananyag: A HTML nyelv meta elemei.
Html nyelv (HyperText Markup Language)
HTML ÉS PHP (Nagyon) rövid áttekintés. ADATBÁZISRENDSZEREK MŰKÖDÉSI SÉMÁJA Felh. interakció DB Connector MySQL ? A gyakorlaton:
Bevezetés a weblapfejlesztésbe
Első lépések a szövegszerkesztő használatában
Egy operációs rendszer könyvtárszerkezete (tárolórendszere)
Weblap-szerkesztés. Információs hálózati szolgáltatások Internet fontosabb szolgáltatásai (szóbeli) Elektronikus levelezési rendszer használata (szóbeli)
14. Szóbeli középszintű informatika tétel:
A weblapkészítés alapjai
A böngészőprogram használata. A böngészők értelmezik a html nyelvet, a javascript kódokat és a php kódokat is. Majd ezeket lefuttatja, és azok alapján.
e-Portfólió bemutatása hallgatók számára
Budapest szeptember 28.. A webes alkalmazás a CD főkönyvtárában lévő index.html nevű fájllal indítható el.
A Mozilla magyar nyelvű szerkesztőjének használata
Műveletek mappákkal és a fájltípusok
Webszerkesztés. IP cím pl: Domain cím - DNS pl: ország nevehttp:// számítógép címe World Wide Web Webszerverre.
Információ és kommunikáció Gellér Zoltán 2015 Számítógépes ismeretek.
Információ és kommunikáció
A HTML alapjai Az internet és a web.
Szövegszerkesztési alapfogalmak
Letöltés az internetről
Internet, Elektronikus levelezés
AVON CAREER SITE FELÉPÍTÉSE
Előadás másolata:

HTML (HiperText Mark-Up Language) HTML leírónyelvvel írjuk le, hogy a weboldal elemei (képek, szöveg, mozgókép, stb.) milyen formában jelenjenek meg a böngészőkben. Nem programozási nyelv. A HTML leírónyelv utasításai <> jelek között írandók. (TAG-ek, párok) Alapvető szerkezet: <html>…</html> - dokumentumok kezdete és vége <head>…</head> - dokumentumok fejlécének kezdete és vége <body>…</body> - dokumentumok törzsének határai (ezek közé írandó az érdemi rész) példa >> Eszterházy Károly Főiskola ─ Médiainformatika Intézet

HTML dokumentum szerkezete <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> </head> <body> </body> </html> Eszterházy Károly Főiskola ─ Médiainformatika Intézet

WEBLAPFEJLESZTÉS

Tartalom Alapelemek Célok Eszközök Szerkezet Alapelvek Folyamat Prezentáció

Célok Weboldalakkal szemben állított követelmények: Felhasználói szemszögből: - értékes információtartalom, - vonzó, egyszerű, igényes, harmonikus színvilág, felület, jól olvashatóság, felhasználóbarát felület, egyértelmű kezelhetőség, egyértelmű menüpont elnevezések logikus struktúra Szakmai szemszögből: más-más felbontásban és böngészőben uu. jelenjenek meg az oldalak, átlátható könyvtárszerkezet és struktúra könnyen bővíthető, módosítható Eszterházy Károly Főiskola ─ Médiainformatika Intézet

Eszközök Böngésző programok weboldalakat megjelenítő szoftverek >> Editorok, webfejlesztők weboldal szerkesztésére szolgáló szoftverek >> Design, kép, hang, mozgókép, videó, animáció -készítő, és -vágó szoftverek weboldal alapelemeit előállító szoftverek >> Filekezelő szoftverek a website szerkezetének létrehozására >> Eszterházy Károly Főiskola ─ Médiainformatika Intézet

Eszközök Böngésző programok weboldalakat megjelenítő szoftverek Internet Explorer Netscape Navigator Opera (i) FireFox Mozzila (i) << Eszterházy Károly Főiskola ─ Médiainformatika Intézet

Eszközök Editorok, webfejlesztők weboldal szerkesztésére szolgáló szoftverek Karakteres HTML szerkesztő programok: Jegyzettömb, TextPad, Edit Plus, Macromedia HomeSite Karakteres és grafikus weblapfejlesztő programok: MS Front Page, Macromedia Dreamweaver, Adobe Golive Flash (animáció-készítő program, ActionScript) Program Scriptek (Java Script, VB Script) Dinamikus HTML-t megvalósító programnyelvek PHP(i), ASP, Perl (i), Java << Eszterházy Károly Főiskola ─ Médiainformatika Intézet

Eszközök Design, kép, hang, mozgókép, videó, animáció -készítő, és -vágó szoftverek weboldal alapelemeit előállító szoftverek A.Photoshop, A. Image Ready, Gimp(i) pixelgraf. design, állóképek, anim .gif-ek Adobe Illustrator, Corell Draw, Flash vektorgraf. design, állóképek Sound Forge, Cool Edit hangok, háttérzene Adobe Premiere mozgókép, videó Flash intró, animáció << Eszterházy Károly Főiskola ─ Médiainformatika Intézet

Eszközök Filekezelő szoftverek (a website szerkezetének létrehozására) Windows Intéző Total Commander (i) << Eszterházy Károly Főiskola ─ Médiainformatika Intézet

Szerkezet Site könyvtárszerkezete >> Weboldal szerkezete (felépítése) >> Eszterházy Károly Főiskola ─ Médiainformatika Intézet

Szerkezet << kép .gif .jpg .jpe .png hang .mp3 .vaw mozgókép flash könyvtár Weboldalhoz szüks. fileok: index.html fejlec.gif arckep.jpg buttom1.swf buttom2.swf buttom3.swf buttom4.swf kezdo.htm fent.htm bal.htm jobb.htm bemut.htm tevekeny.htm galeria.htm video.htm adat jellege formátumok kép .gif .jpg .jpe .png hang .mp3 .vaw mozgókép .avi .mpg << Eszterházy Károly Főiskola ─ Médiainformatika Intézet

Szerkezet Weboldalak szerkezete: Alap probléma: - a menüpontok minden oldalon uu. jelenjenek meg - módosítás esetén egyidejűleg minden oldalon uu. módosuljanak az információk Megoldási lehetőségek: - a képernyő frame-kre osztása - Template-ek alkalmazása (DW-ben) - Menü egy Flashben (.swf) való elkészítése, és ennek beszúrása a html-be - Program generálja az állandó részeket az egyes oldalakra (PHP, Perl, ASP) << Eszterházy Károly Főiskola ─ Médiainformatika Intézet

Alapelvek Fájlszerkezettel kapcsolatos >> Felbontással kapcsolatos >> Eszterházy Károly Főiskola ─ Médiainformatika Intézet

Alapelvek Fájlszerkezettel kapcsolatos: a. a sitehoz hozzunk létre egy munkakönyvtárat, ezen belül helyezzük el az összes site-hoz kapcsolódó fájlt, könyvtárat b. a site-on lévő fájlok nevében ne használjunk nagybetűt hosszú ékezetes betűket speciális karaktereket (pl.: / ? . : ~ * <SPACE> , ) c. a fájlok közti linkelések esetében használjuk relatív elérési utat << Eszterházy Károly Főiskola ─ Médiainformatika Intézet

Alapelvek 2. Felbontással kapcsolatos: a. Design-tervezés esetén max. 770 px széles layoutot tervezzünk. (Flash esetén a böngészőablak méretével arányosan torzul a weboldal képe) b. A weboldalakra helyezett táblázatok szélessége szintén max. 770 px legyen << Eszterházy Károly Főiskola ─ Médiainformatika Intézet

Folyamat 1. Tervezés (tartalmi és formai) 2. Látványterv elkészítése számítógépen (layout tervezés) 3. Weboldal keretének előállítása (M. Dreamweaver MX), grafika beépítése a weboldal keretébe a. Template b. Framek c. Programozva 4. Aloldalak létrehozása és bekötése a weboldal keretébe (összeépítés) 5. Stílusozás, .css állomány(ok) elkészítése és bekötése 6. Hangulati elemek (hangok, animációk, flash-intro) beépítése ( 7. Dinamikus részek elk., statikus és dinamikus elemek összeépítése, ha van ) 8. Tesztelés (minden ágon végighaladva, több böngésző, több felbontás) 9. Finomítás, hibák javítása 10. Kész weblap szerverre helyezése Eszterházy Károly Főiskola ─ Médiainformatika Intézet

Eszterházy Károly Főiskola ─ Médiainformatika Intézet

Lehetőségek weboldal készítésére: Weblap készülhet csak egyfajta módszerrel is: Teljes weboldal létrehozható HTML-ben Teljes weboldal létrehozható Flashben Teljes weboldal létrehozható dinamikusan generáltan Az előző módszerek keverten is alkalmazhatók: HTML-be egy-egy programot, egy-egy flasht, egy-egy javascriptet beépíteni Oldalak HTML-ben, menüszerkezetet (és keretet) flash-ben Oldalak HTML-ben, menüszerkezetet (és keretet) javascriptben menüszerkezet HTML-ben, feltöltés dinamikusan menüszerkezet dinamikusan, feltöltés HTML-lel Eszterházy Károly Főiskola ─ Médiainformatika Intézet

Hozzunk létre egy munkakönyvtárat (D:\nev) Feladat: Hozzunk létre egy munkakönyvtárat (D:\nev) Másoljuk bele az összes képet, amivel dolgozni szeretnénk Nevezzük át a képeket kisbetűsre és írjuk át a magyar hosszú ékezetes betűket Nyissuk meg a Dreamweavert és szerkesszünk egy táblázatba szöveget, képeket. Mentsük el a létrehozott .htm fájlt a munkakönyvtárunkba Eszterházy Károly Főiskola ─ Médiainformatika Intézet

Az első három menüpontra linkeljük be az aloldalakat Feladat 2 (köv 6 óra): Másoljuk bele az összes kép-, hang-, és video fájt a munkakönyvtárunkba Hozzuk létre az aloldalakat (bemut.htm, kedvenc.htm, fotok.htm) >> Hozzuk létre a keretrendszert (két frames rsz-nél, három db .htm lesz) (balmonogram, jobbmonogram, framesetmonogram) A balmonogram.htm-ben hozzunk létre négy menüpontot (Bemutatkozás, Kedvencek, Fotók, E-mail) és illeszünk a bal felső sarokba egy képet (logót) Az első három menüpontra linkeljük be az aloldalakat Az E-mail feliratra linkeljük be az e-mail címünket A logóra linkeljük be a kezdőoldalt Ínyencségek >> Eszterházy Károly Főiskola ─ Médiainformatika Intézet

táblázatba készítsük el az önéletrajzunkat, kép is szerepeljen rólunk Aloldalak: bemut.htm táblázatba készítsük el az önéletrajzunkat, kép is szerepeljen rólunk kedvenc.htm a. nevezzük meg kedvenc weboldalunkat, kedvenc zenénket, és kedvenc videónkat b. linkeljük be ezeket fotok.htm a. mentsünk le az Internetről képeket b. helyezzük őket egymás alá, feliratozzuk őket << Eszterházy Károly Főiskola ─ Médiainformatika Intézet

Ínyencségek: A szöveges menüpontok helyett készítsünk rollovereket (balmonogram.htm) A bemutatkozás (bemut.htm) oldalára helyezzük el egy nyomtató képét, és erre linkeljük rá az önéletrajzunkat .rtf formátumban, A fotók oldalon (fotok.htm) hozzunk létre egy bélyegkép gyűjteményt. Linkeljünk úgy, hogy a böngészőben való megjelenéskor a bélyegképre klikkelve ugyanaz a kép jelenjen meg nagyobb méretben. Két megoldás lehetséges >> << Eszterházy Károly Főiskola ─ Médiainformatika Intézet

Bélyegképek létrehozása a már meglévő képek lekicsinyítésével: százalékosan vagy abszolút pixelben megadva Dreamweaverben. Ugyanarra a képre linkelés a százalékos vagy abszolút pixelben megadott nagyítással. Bélyegképek létrehozása a már meglévő képek átméretezésével PhotoShopban. Ekkor két ugyanazt ábrázoló, ám más méretű képpel dolgozunk. A kicsi képről a nagy képre linkelés. << Eszterházy Károly Főiskola ─ Médiainformatika Intézet