Weblapszerkesztés. Számítógépek alkalmazása előadás, október 24.

Átírás

1 Weblapszerkesztés Számítógépek alkalmazása előadás, október 24.

2 A Hypertext (html) Koncepciója már 1945-ben megjelent (Vannevar Bush újságcikke egy képzeletbeli számítógépről, amely nem csak az információt tárolja, hanem az összefüggéseket is). A hypertext kifejezést a 60-as évek végén alkotta Ted Nelson. Széles körben elterjedté a World Wide Web tette (Tim Berners-Lee, CERN, 1990). A kereszthivatkozás, az index, a tartalomjegyzék, a súgó is hypertext. A hypermédia olyan hypertext, amely képekre, zenére, filmre mutató hivatkozásokat is tartalmaz.

3 Jelölőnyelv (Markup Language, html) Weblap címsorokkal és bekezdésekkel Doboz (Box) modell a doboz lehet blokkszintű vagy szövegközi, helye és mérete rugalmas Html kulcsszavak (tag) egy doboz = egy tag, a tag-ek nyitó + záró elemből állnak, egymásba ágyazhatóak Html forrás

4 Fontosabb html elemek 1. Elem Html Word formázás Bekezdés <p> Enter, Szövegtörzs stílus Címsor Felsorolás, Számozott lista listaelem Új sor (bekezdésen belül) <h1> <h6> <ul> <ol> <li> <br /> Címsor 1-6 stílusok Formátum> Felsorolás és számozás Shift-Enter Vízszintes vonal <hr /> Formátum> Szegély és Mintázat> Vízszintes vonal gomb> legelső elem

5 Fontosabb html elemek 2. Elem Html Word formázás Kiemelés <em> Emphasis/ Kiemelés stílus Hangsúlyozás (erősebb kiemelés) Alsó index Felső index Általános szövegközi formázás Általános blokk-szintű formázás <strong> <sub> <sup> <span> <div> Strong/ Kiemelés2 stílus Formátum> Betűtípus> alsó index, felső index Formátum> Betűtípus egyéb beállításai Formátum> Bekezdés, Formátum> Szegély és mintázat

6 Fontosabb html elemek 3. Weblap táblázattal Doboz modell a táblázat minden cellája blokk-szintű elem Html kulcsszavak (tag) táblázat: <table> minden sor: <tr> a sor cellái: <td>, <th> Html forrás

7 HTML dokumentum szerkezete dokumentumtípus html lap fejléc törzs <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>a dokumentum címe</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta http-equiv="content-language" content="hu"> <meta name="author" content="fejer Tamas"> <link rel="stylesheet" type="text/css" href="/stilus.css"> </head> <body>  </body> </html>

8 Kemény és lágy sortörés Szövegtípus: Formázott szöveg Formázatlan szöveg Html forrás pl. Word, ALAKHŰ html szerkesztők pl. txt fájl, formázás nélküli szövege html forráskód NEM-ALAKHŰ szerkesztése Lágy sortörés (újratördelésnél máshova kerülhet) egy Enter (néha automatikus) automatikus automatikus Kemény sortörés (bekezdés vége) egy Enter két, egymást követő Enter blokkszintű elem vége </p>, </div>

9 Hivatkozás A horgony elem (anchor) <a> : href: relatív vagy abszolút hivatkozás (URL) target="_new": megnyitás új ablakban name vagy id: a név egy másik hivatkozás célpontja lehet A kép (image) elem: <img /> a hivatkozott kép megjelenik a dokumentumban, src: a képre mutató relatív vagy abszolút hivatkozás (URL), align="left" vagy "right": lebegő objektum (float) lesz, alt: alternatív szöveg nem grafikus böngészők számára, width="640" és height="100%": kép méretei pixelben vagy %-ban; opcionális; ha a kép nem ekkora, akkor átméretezi.

10 Uniform Resource Locator (URL) protokoll: ftp (file transfer protocol): távoli gépen lévő állomá-nyok másolása, átnevezése, törlése (nincs titkosítás!) http (hypertext transfer protocol): információ letöltése webkiszolgálóról mailto (smtp): elektronikus levél küldése címre telnet: alkalmazás futtatása távoli gépen (bejelentkezési neve vagy IP címe IP cím (IP address): minden egyes az Internethez kapcsolódó gép egyedi azonosítószáma, pl.: név (domain name): az azonosítószámot helyettesítő név

11 Uniform Resource Locator (URL) kapu (port): közötti szám, a protokoll megszabja az alapértelmezést, ezért általában nem kell (ftp: 23, http: 80, smtp: 25, telnet:60) mappa / almappa keresett állomány vagy erőforrás neve horgony (anchor): állományon belüli hely (ld. id) további működési paraméterek (adatbázis-hátterű weblapoknál)

12 Az URL egyes részeinek elhagyása Az URL elejének elhagyása: relatív hivatkozás a teljes elérési út helyett csak egy részét adjuk meg, kiindulási pont az a dokumentum, ahol a hivatkozás található #tematika a cél ugyanebben a dokumentumban van, rfc1739.txt a fájl ugyanebben a mappában van, szg1-net/szg1-net.html a fájl egy almappában van,../index.html a fájl a szülőmappában van, /documents/index.html a fájl ugyanezen a szerveren van. A fájlnév elhagyása: pl. a webszerveren definiálható egy alapértelmezett fájlnév (szokásos: index.html, default.htm), ha az URL-ben nincs fájlnév, akkor ezt a fájlt küldi el, ha nem létezik az alapértelmezett fájl, akkor listázza a mappa tartalmát (ha ez engedélyezett).

13 Általános célú paraméterek Elem egyedi azonosítása: id="azonosító" hivatkozás célpontja, stíluslap-választó, elem neve scriptek számára, Osztályba sorolás: class="osztály1 osztály2 " stíluslap-választó, későbbi feldolgozás számára háttérinformáció. Kiegészítő info: title="ez címke" (megjelenése pl. gyorstipp) Elemformázás: style="font-size: 12pt" (ld. a stíluslapoknál) Események: onclick, onmouseover, etc.

14 Stíluslapok Weblap (HTML) Stíluslap (CSS) Eredmény a böngészőben Példa stíluslap nélkül fenti stíluslappal más stíluslappal

15 Stílus (formázás) megadható egy HTML elem részeként: a dokumentum törzsében bármely elemhez megadható a style paraméter: <p style="color: red"> </p> nem ajánlott: a tartalom keveredik a formázással. a HTML dokumentumban beágyazva a html dokumentum fejlécébe (<head>) : <style type="text/css"> body {font-size: 10pt} </style> külön fájlban csatolva a HTML dokumentum fejlécében (<head>) : <link href="stiluslap.css" rel="stylesheet" type="text/css">

16 Stílus megadása egy elem összes előfordulására body {color: black; background: url(hatter.gif) white;} p, h1 {font-size: 10pt; line-height: 120%} /* relative to font-size */ osztályokra (class= paraméter) h1.appendix {font-style: italic} (adott elem és osztály).apro {font-size: smaller} (bármilyen elem, adott osztály) ál-osztályokra (pseudo-classes): még nem látott link: a:link {color: rgb(255,0,0)} meglátogatott link: a:visited {color: rgb(100%,0%,0%)} megérintett link (CSS2): a:hover {background-color: red} aktív link: a:active {color: #FF0000} azonosító alapján (id) #z98y {letter-spacing: 0.3em} H1#z98y {letter-spacing: 0.5em} <p id="z98y">ritkított szöveg</p> (0,3 em-mel az első alapján)

17 Néhány stílusparaméter 1. Betű- és bekezdésformázás: font-family: serif, sans-serif, cursive, fantasy, monospace, font név (több is megadható vesszővel elválasztva) font-style: normal, italic, oblique font-variant: normal, small-caps font-weight: normal, bold, bolder, lighter, 100, bolder, lighter: relatív vastagság font-size: xx-small small, medium xx-large; smaller, larger vagy hossz: abszolút hosszmértékek: in (hüvelyk), cm, mm, pt (pont), pc (pica) relatív hosszmértékek: em, ex, px (pixel), % color, background-color: rgb(), vagy színkód text-decoration: underline, overline, line-through, blink text-align: left, right, center, justify line-height: hossz (ld. fent)

18 Néhány stílusparaméter 2. Margók, keretek (bármilyen blokk-szintű elemhez) margin: felső (-top), jobb (-right), alsó (-bottom), bal (-left): hossz (egyszerre is megadhatók: {margin: 1em 1em 2em 1em;}) border-width: felső (-top-), jobb (-right-), alsó (-bottom-), bal (-left-): thick, medium, thin, hossz border border-color: rgb(), színkód margin 1 border-style: none, dotted, dashed, 1 solid, double, groove, ridge, inset, outset 4 Szöveg 2 padding: felső (-top), jobb (-right), 4 3 alsó (-bottom), bal (-left): hossz padding Lebegő objektumok, pl. <img> elemhez float: left, right (lebegő objektum), none (szövegközi objektum) clear: none, left, right, both (pl. <p>, <hx> elem megadott oldalán nem lehet lebegő objektum) Listák (<ol> és <ul> elemhez) list-style-type: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none list-style-image: url(), none list-style-position: inside, outside 3 2

19 Néhány stílusparaméter 3. Hangos stíluslapok (CSS level 2) h1, h2, h3, h4, h5, h6 { voice-family: paul; stress: 20; richness: 90; cue-before: url("ping.au")} p.heidi {azimuth: center-left} p.peter {azimuth: right} p.goat {volume: x-soft} Címsorok audio fontja a Paul (a felolvasó hangja), monoton, de telt hangon, minden cím előtt bejátszik egy hangjelet. Heidi (osztályú bekezdések) hangja szemből-balról hallatszik, Péteré jobbról (sztereo vagy quadrofon), a kecske hangja különösen lágy.

20 Stíluslapok (CSS) alkalmazása Előnye: szerkezet és formázás elválasztása Ha ugyanarra az elemre többféle formázás is meg van adva (pl. külső fájlban, a fejlécben és az elem paraméterében), akkor az utolsó definíció él (ilyen sorrendben). Külső fájlt használva gyorsan lecserélhető a teljes megjelenés, pl.: Jó stíluslapot nehéz összerakni: meglévőből érdemes kiindulni

21 Nyílt szabványok Nyílt szabványok pl. html, css hozzáférhető és szerkeszthető a forráskód várhatóan mindig lesznek olyan programok, amik értelmezni tudják Jogvédett formátumok pl..doc,.xls csak a hozzákapcsolt alkalmazás tudja létrehozni és értelmezni támogatás néhány év múltán megszűnik, az újabb verziók nem olvassák a nagyon régi formátumokat

22 Html fájl felhasználása Megjelenítés vizuális böngészővel grafikus böngésző, karakteralapú böngésző, Megjelenítés nem-vizuális böngészővel Braille-megjelenítő, felolvasóprogram (munka közben, autóban), Automatikus feldolgozás keresőrobotok, indexelő, katalogizáló programok, proxy szerverek, Információ tárolása strukturált forma, széles körben elfogadott publikus szabvány, ezért sok év múlva is használható marad.

23 Hasznos weblapok Html tanfolyamok Magyar Elektronikus Könyvtár: számos dokumentum írja le a html nyelvet (magyar) World Wide Web Consortium a web szabványalkotó testülete a html 4 nyelvet leíró szabvány (angol) (legújabb) a css 2 nyelvet leíró szabvány (angol) más Internetes szabványok Keresőmotor keresés az Interneten kulcsszavak alapján

24 Weblapszerkesztők Araneae: (ingyenes) egyszerű text editor, néhány weblapszerkesztési segédeszközzel (nem ALAKHŰ) 1st Page 2000, AceHTML, NoteTab (ingyenes) további ALAKHŰ weblapszerkesztők Netscape Composer (ingyenes) ALAKHŰ weblapszerkesztő MS FrontPage (MS oktatási licensz) ALAKHŰ weblap és webállomásszerkesztő, dinamikus weblapok szerkesztése MS InterDev (MS oktatási licensz) programozói fejlesztőeszköz, dinamikus és adatbázisvezérelt weblapok fejlesztése Macromedia Dreamweaver profi weblaptervezés

25 Weblap szerkesztése Más hogyan csinálja? Forrás megtekintése: View/ Nézet> Source/ Forrás Forrás mentése: Fájl/ File> Mentés másként/ Save as, mentési típus: Web Page, complete (Weblap, teljes) Elmenti a weblapot, és külön mappába a csatolt fájlokat (képek, stíluslapok, etc.) Lap vizsgálata: pl. Dreamweaver (együtt mutatja az ALAKHŰ lapot és a forrását) Kész weblap ellenőrzése Böngésző nem ad hibaüzenetet, ha hibás a lap, ezért érdemes html parsert használni: (online, ingyenes) A Real Validator (offline, shareware) Html Tidy (forráskód-szépítő)

26 Copyright BME Építészmérnöki Kar Építészeti Ábrázolás Tanszék munkaközössége (Peredy József, Szoboszlai Mihály, Kiss Zsolt, Strommer László, Ledneczki Pál, Batta Imre, Juhász Péter, Fejér Tamás, Kovács András, Kovács András Zsolt),