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

Átírás

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

2 Dokumentumok közzététele I. Adobe Acrobat (pdf): e-papír Formázott dokumentumok, kérdőívek létrehozása. Interneten való közzétételhez, létrehozása: Acrobat, bármilyen dokumentumból, megnézése, nyomtatása: Acrobat Reader ingyenes, platformfüggetlen Postscript (ps, eps): lapleíró nyelv Formázott dokumentumok leírásához készült. Professzionális nyomtatás, digitális nyomdák, létrehozása: postscript nyomtatómeghajtóval, megnézése, nyomtatása: pl. Ghostview ingyenes, platformfüggetlen

3 Dokumentumok közzététele II. TeX/LaTeX szöveg (kiadvány) szerkesztő rendszer, elsősorban matematikai/műszaki szövegek létrehozásához: komoly képletszerkesztő, szöveg alapú vagy WYSIWYG formázás, eredménye általában PostScript fájl. HTML (Hypertext Markup Language) weblapok leírónyelve, szöveg alapú vagy WYSIWYG formázás.

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

5 Jelölőnyelv (Markup Language, html) Formázás leírása kulcsszavakkal pl. kiemelés: <em> </em> (majdnem) minden kulcsszónak (tag) van kezdő és záró párja a HTML ezeket elemnek (element) nevezi megjelenésük, jelentésük befolyásolható paraméterekkel (attribute): <em title="fontos!"> </em> általános formájuk: <tag> </tag> <tag att1="value" att2="value" > </tag>

6 Szerkesztés megjelenítés Szerkesztés text editor, WYSIWYG szerkesztő Megjelenítés böngésző értelmezi a html kódot (interpreter)

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 Tagolás elemei I. Bekezdés: <p> </p> Címsorok: 6 szint <h1> </h1>, <h6> </h6> Felsorolás: <ul> </ul> Számozott lista: <ol> </ol> Új sor: <br /> (vagy <br>, nincs záró elem) Előre formázott szöveg: <pre> </pre> fix szélességű karakterek, számít az Enter, szóköz, etc., szóközökkel táblázatosra igazítható. Vízszintes vonal: <hr /> (vagy <hr>, nincs záró elem) Táblázat: <table><tr><td>cella</td> </tr> </table> Fehér-köz (white space) karakterek nem tagolnak: Enter ( ) Szóköz ( ) Tabulátor ( ) Lapdobás () Listaelemek: <li> </li> <li> </li> Ezekből bármennyi kerülhet egymás után, de csak egyetlen szóközként jelennek meg, a szöveget NEM TAGOLJÁK.

9 Tagolás elemei II. szövegben (inline, zárójelben a megjelenési forma): <em> kiemelés (kurzív) <strong> erősebb kiemelés, hangsúlyozás (félkövér) <cite> referencia, vagy idézett ember/mű (kurzív) <q> rövidebb, bekezdésen belüli idézet (normál, az idézőjelek kitétele a megjelenítő eszköz feladata) <sub>, <sup> alsó és felső index <span> valamely paraméter(ek) megadása a közbezárt részre nagyobb egységekben (block-level): <blockquote> több bekezdésre kiterjedő idézet (megnövelt bal margó) <div> valamely paraméter(ek) megadása a közbezárt részre blokk-szintű (block-level) vs. szövegközi (inline) elem: blokk-szintű elem előtt és után mindig sortörés van (bekezdéshatár), lehet kerete, margója; blokk-szintű elem bármilyen elemet tartalmazhat (blokkszintűt is); szövegközi elem szöveget és szövegközi elemeket tartalmazhat (blokk-szintű elemet nem).

10 Kemény és lágy sortörés Szövegtípus Formázott szöveg Formázatlan szöveg HTML pl. Word, WYSIWYG HTML szerkesztők pl. txt fájl, formázás nélküli szövege pl. weblap, HTML-lel formázott e- mail Lágy sortörés (sor vége, újratördelésnél máshova kerülhet) egy Enter vagy 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>

11 Hivatkozás A horgony elem (anchor) <a> : href: relatív vagy abszolút hivatkozás (URL) target="_new": megnyitás új ablakban name: ua. mint az id (egy másik hivatkozás célpontja lehet) A kép (image) elem: <img /> (vagy <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.

12 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

13 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

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

15 Formázás (elavult, ld. stíluslapok) Karakterformázás: méret: abszolút méret: <font size="1..7"> </font> relatív méret: +n vagy -n betűváltozatok: betűtípus: <font face="serif" color="green"> fix szélességű betű: <tt> </tt> félkövér: <b> </b>, dőlt: <i> </i>, aláhúzott: <u> </u> Bekezdés és egyéb formázás, csak egyes elemekhez: Vízszintes igazítás: align="left/center/right/justify" (<div>, <p>, <h1> - <h6>, <hr>), szín: color="red" (<font>), háttérszín: bgcolor="#ff0000" (<body>), méret: size="pixel" (<font>, <hr>) szélesség: width="pixel" vagy % (<hr>, <img>)

16 Á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 céljából (pl. adatbázis). 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.

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

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

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

20 Néhány stílusparaméter I. 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 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)

21 Néhány stílusparaméter II. 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

22 Néhány stílusparaméter III. 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.

23 Stíluslapok használata Tulajdonságok öröklése: <h1>the headline <em>is</em> important!</h1> ha pl. szín nincs megadva az <em> elemhez, akkor a <h1> elem színét örökli, alapértelmezés megadása: a <body> elemhez megadott formázás; ha nincs egyéb megadva, ez érvényes mindenhol, a stíluslapon a később definiált formázás felülbírálja a korábbit. Stíluslapon hivatkozás másik url(masik.css); ez csak a legelső sor(ok)ban szerepelhet, a beszúrt stíluslap minden beállítását felülbírálja az aktuális stíluslap.

24 Html táblázatok szerkezete I. Html táblázat szerkezete táblázaton (<table>) belül sorok (<tr>), sorokon belül cellák (<td> adatcella, <th> sor- vagy oszlopfejléc-cella) Sorcsoportok <tr> elemeket fognak össze fejlécsorok: <thead> láblécsorok: <tfoot> (fejléc után adandó meg, de legalulra kerül) általános sorok: <tbody> (több is lehet) Oszlopcsoportok A <table> elem után, de az első <tr> elem előtt kell megadni több oszlop összefogása: <colgroup> span="nn": összefogott oszlopok száma width="pixel", %, relatív: egyes oszlopok szélessége összefogott oszlopokon belül az egyes oszlopok jellemzőinek megadása: <col /> (vagy <col>) span="nn": egyforma oszlopok száma width="pixel", %, relatív: oszlop szélessége

25 Html táblázatok szerkezete II. Cellák egyesítése (<td>, <th> elem) colspan="szám" : hány oszlop szélességben ("0": aktuális <colgroup> végéig) rowspan="szám": hány sor magasságban ("0": aktuális <thead>, <tbody> vagy <tfoot> elem végéig) nekünk kell vigyázni, hogy minden sorban ugyanannyi cella legyen az egyesített cellákat is beleértve Cella igazítása paraméterrel vízszintes: align="left/center/right/justify/char" függőleges: valign="top/middle/bottom/baseline" Cella igazítása stíluslapon vízszintes: text-align=left/center/right/justify/"string" függőleges: vertical-align=baseline/top/bottom/middle Képaláírás: <caption> Rögtön a <table> elem után következhet, align="top/bottom/left/right": képaláírás helye, inkább stíluslapon definiálandó.

26 Keretek Törzs (<body>) helyett <frameset>: <frameset rows="30,*"> <frame src="fejlec.html"> <frameset cols="200,760,*"> <frame src="menu.html"> <frame src="logo.gif"> <frame src="ures.html"> </frameset> <noframes> <p>ezen a keretes weblapon található: <ul> <li><a href="csik.html">fejléc,</a> <li><a href="menu.html">menü,</a> <li><img src="logo.gif" alt="a Tanszék logoja"> </ul> </noframes> </frameset>

27 Színnevek és színkódok Színhűségre (egyenlőre) nincs garancia (a jövő: srgb színrendszer) Színek összeállításánál figyelni kell az olvashatóságra és a színvakságra (pl. zöld alapon piros szöveg) Black = "#000000" Navy = "#000080" Maroon = "#800000" Green = "#008000" Gray = "#808080" Teal = "#008080" Purple = "#800080" Olive = "#808000" Silver = "#C0C0C0" Blue = "#0000FF" Red = "#FF0000" Lime = "#00FF00" White = "#FFFFFF" Aqua = "#00FFFF" Fuchsia = "#FF00FF" Yellow = "#FFFF00"

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 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 1st Page 2000, AceHTML, NoteTab (ingyenes) további WYSIWIG weblapszerkesztők Netscape Composer (ingyenes) WYSIWYG weblapszerkesztő MS FrontPage (MS oktatási licensz) WYSIWYG 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 grafikusoknak

31 Weblap szerkesztése Más hogyan csinálja? IE-ben: File>> Save as (Fájl>> Mentés másként), 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 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) A Real Validator (offline, shareware) Html Tidy (forráskód-szépítő)

32 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),