Weblapszerkesztés. Építész-informatika előadás, szeptember 8.

Átírás

1 Weblapszerkesztés Építész-informatika előadás, szeptember 8.

2 Az Internet szerkezete Piros Ázsia és Csendes Óceán Zöld Európa/Közel-kelet/Közép- Ázsia/Afrika Kék Észak-Amerika Sárga Latin Amerika és a Karibszigetvilág Cián privát címek Fehér ismeretlen

3 Az Internet működése Egymásra épülő szintek protokoll 7. Alkalmazási réteg Web (www, wap), fájl transzfer (fájl- és nyomtatómegosztás, FTP, SCP), távoli terminál (Távoli Asztal, Telnet, SSH, X-window, VNC), levelezés ( , newsgroups), chat, IP telefon, videokonferencia, stb. 3. Hálózati réteg: TCP/IP csomagokra bontás csomagirányítás 1. Fizikai réteg: jel átvitele két csomópont között Kapcsolt telefonvonal (analóg modem: max 56 kbit/s, ISDN: kbit/s) Szélessávú szolgáltatás (ADSL kbit/s, kábeltv: kbit/s) Mobiltelefon szolgáltató (GSM modem: 9,6-14,4 kbit/s, GPRS: ~30-50(-172,8) kbit/s, HSCSD: 38,4-57,6 kbit/s, EDGE: kbit/s, 3G/HSDPA: kbit/s) Vezeték nélküli helyi hálózat (IrDA: 115 kbit/s, Bluetooth: 57,8-432 kbit/s, WiFi: Mbit/s) Hálózati kábel (sodort érpár: Mbit/s, optikai szál: Mbit/s) Műholdas adatátvitel

4 Az Internet működése

5 Kommunikáció Telefonszám: az IP cím, pl bites szám ( közötti egész, azaz kb. 4 milliárd egyedi cím) Könnyebb írás érdekében 4 8 bites szám ( , azaz közötti egész) Magánhálózati cím: pl. 10.x.x.x vagy x.x IPv6 címzés: 128 bites szám, pl. 2001:0db8:85a3:08d3:1319:8a2e:0370:7334 alternatíva: DNS név, pl. Domain name server-ek hierarchikus hálózata biztosítja a címfordítást (pl. Akárhány tagból állhat, szóközt nem, de ékezetes betűt már tartalmazhat Beszélgetés indul http mailto https voip smtp bittorrent ftp telnet skype pop3 news chat rss scp ssh imap snmp ntp nfs

6 Fogalomtár Kódlap Beágyazás Csatolás Relatív hossz Protokoll Színkód Relatív útvonal Robot Cache Cookie (süti)

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

8 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

9 Fontosabb html elemek 1. Elem Html Word formázás Bekezdés <p> </p> Enter, Szövegtörzs stílus Címsor Felsorolás (Számozott lista) és listaelem Új sor (bekezdésen belül) <h1> </h1> <h6> </h6> <ul> (<ol>) <li> </li> </ul> (</ol>) <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

10 Fontosabb html elemek 2. Elem Html Word formázás Kiemelés <em> </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 blokkszintű formázás <strong> </strong> <sub> </sub> <sup> </sup> <span> </span> <div> </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

11 Fontosabb html elemek 3. Elem Táblázat Html <table> <tr> <th> fejléc </th> <th> fejléc </th> </tr> <tr> <td> cella </td> <td> cella </td> </tr> </table>

12 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

13 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>

14 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 nyers html forráskód szerkesztése Lágy sortörés (újratördelésnél máshova kerül) 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>

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

16 Uniform Resource Locator (URL) protokoll: http (hypertext transfer protocol): információ letöltése webkiszolgálóról ftp (file transfer protocol): távoli gépen lévő állományok másolása, átnevezése, törlése (nincs titkosítás!) 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

17 Uniform Resource Locator (URL) kapu (port): közötti szám, általában nem kell, mert a protokoll megszabja az alapértelmezést (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)

18 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).

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

20 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

21 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">

22 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= apro paraméterű html elemek) 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, csak az alábbiak léteznek): 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)

23 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)

24 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-color: rgb(), színkód border-style: none, dotted, dashed, solid, double, groove, ridge, inset, outset padding: felső (-top), jobb (-right), alsó (-bottom), bal (-left): hossz Lebegő objektumok, pl. <img> elemhez margin padding Szöveg border 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

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

26 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

27 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

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

29 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

30 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

31 Html opciók Wordben Fájl> Mentés másként, Fájltípus: Weblap: minden formázást ment, képek azonos nevű mappába kerülnek Weblap, szűrt (filtered): html által nem támogatott elemeket kihagyja (pl. többhasábos szöveg) Webarchívum: a szöveget és a képeket egy fájlba menti, csak IE-vel kompatibilis Háttérszín: Formátum> Háttér Keretek: Formátum> Keretek (Frames)

32 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 weblap ellenőrzőt (html parser) használni: (online, ingyenes) A Real Validator (offline, shareware) Html Tidy (forráskód-szépítő)

33 Saját weblap készítése Téma: eddigi tanulmányok során készített modellek és tervek bemutatása Szempontok: Böngészőfüggetlen Egyszerűen bővíthető Egyéni, áttekinthető, informatív Elhelyezés: Ural2, tetszőleges tükörszerver Felmásolás: winscp-vel Cím: Szerepeljen rajta: Tükörszerver címe Építész-informatika 1 tárgy keretében készült

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