Építész-informatika 1. 1. előadás, 2008. szeptember 8....A Hypertext (html) Koncepciója már...
34
Weblapszerkesztés Építész-informatika 1. 1. előadás, 2008. szeptember 8.
Transcript of Építész-informatika 1. 1. előadás, 2008. szeptember 8....A Hypertext (html) Koncepciója már...
Weblapszerkesztés
Építész-informatika 1.1. előadás, 2008. szeptember 8.
Az Internet szerkezete
Piros – Ázsia és Csendes Óceán
Zöld – Európa/Közel-kelet/Közép-Ázsia/Afrika
Kék – Észak-AmerikaSárga – Latin Amerika és a Karib-
szigetvilágCián – privát címekFehér – ismeretlen
Az Internet működése
Egymásra épülő szintek – protokoll7. 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 (e-mail, newsgroups), chat, IP telefon, videokonferencia, stb.
…
3. Hálózati réteg: TCP/IP csomagokra bontáscsomagirá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: 64-128 kbit/s)Szélessávú szolgáltatás (ADSL 1024-8192 kbit/s, kábelTV: 1024-8192 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: 128-220 kbit/s, 3G/HSDPA: 384-7200 kbit/s)Vezeték nélküli helyi hálózat (IrDA: 115 kbit/s, Bluetooth: 57,8-432 kbit/s, WiFi: 11-54
Mbit/s)Hálózati kábel (sodort érpár: 10-100-1000 Mbit/s, optikai szál: 300-10 000 Mbit/s)Műholdas adatátvitel
Az Internet működése
Kommunikáció
Telefonszám: az IP cím, pl. 152.66.40.1632 bites szám (0 – 232-1 közötti egész, azaz kb. 4 milliárd egyedi cím)Könnyebb írás érdekében 4 × 8 bites szám (0 – 28-1, azaz 0 – 255 közötti egész)Magánhálózati cím: pl. 10.x.x.x vagy 192.168.x.xIPv6 címzés: 128 bites szám, pl. 2001:0db8:85a3:08d3:1319:8a2e:0370:7334
alternatíva: DNS név, pl. www.epab.bme.huDomain name server-ek hierarchikus hálózata biztosítja a címfordítást (pl. http://www.12web.hu/etool/Tools/host2ip)Akárhány tagból állhat, szóközt nem, de ékezetes betűt már tartalmazhat
Beszélgetés indulhttp ftp
mailtotelnet
chatskype
ssh
voip
httpsscp
rssnews
smtp
pop3
imapsnmp ntp nfs
bittorrent
Fogalomtár
Kódlap Beágyazás – Csatolás
Relatív hossz Protokoll
Színkód Relatív útvonal
Robot
Cache Cookie (süti)
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.
Jelölőnyelv (Markup Language, html)
Weblapcímsorokkal és bekezdésekkel
Doboz (Box) modella 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
Fontosabb html elemek 1.Elem Html Word formázásBekezdés <p>…</p> Enter, Szövegtörzs stílusCímsor <h1>…</h1>
…<h6>…</h6>
Címsor 1-6 stílusok
Felsorolás(Számozott lista)és listaelem
<ul> (<ol>) <li>…</li>…
</ul> (</ol>)
Formátum> Felsorolás és számozás
Új sor(bekezdésen belül)
<br /> Shift-Enter
Vízszintes vonal <hr /> Formátum> Szegély és Mintázat> Vízszintes vonal gomb> legelső elem
Fontosabb html elemek 2.Elem Html Word formázásKiemelés <em>…</em> Emphasis/ Kiemelés stílusHangsúlyozás(erősebb kiemelés)
<strong>…</strong>
Strong/ Kiemelés2 stílus
Alsó indexFelső index
<sub>…</sub><sup>…</sup>
Formátum> Betűtípus> alsó index, felső index
Általános szövegközi formázás
<span> … </span>
Formátum> Betűtípus egyéb beállításai
Általános blokk-szintű formázás
<div> … </div> Formátum> Bekezdés, Formátum> Szegély és mintázat
Fontosabb html elemek 3.Elem HtmlTáblázat <table>
<tr> <th> fejléc </th> <th> fejléc </th> … </tr><tr> <td> cella </td> <td> cella </td> … </tr>…
</table>
Weblaptáblázattal
Doboz modella 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
Fontosabb html elemek 3.
HTML dokumentum szerkezete<!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-8859-1"><meta http-equiv="Content-Language"
content="hu"><meta name="author" content="Fejer Tamas"><link rel="StyleSheet" type="text/css"
href="/stilus.css">
</head><body><!-- Ide kerül a dokumentum tartalma -->
</body></html>
fejléc
törzs
dokumen-tumtípus
htmllap
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Ű htmlszerkesztők
pl. txt fájl, formázás nélküli e-mail szövege
nyers htmlforráskód
szerkesztése
Lágy sortörés (újratördelésnél máshova kerül)
automa-tikus
egy Enter (néha automatikus)
automa-tikus
Kemény sor-törés (bekezdés vége)
egy Enter két, egymást követő Enter
blokkszintű elem vége</p>, </div>
A horgony elem (anchor) <a> :
href: relatív vagy abszolút hivatkozás (URL)target="_new": megnyitás új ablakbanname 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.
Hivatkozás
Uniform Resource Locator (URL)
protokoll:http (hypertext transfer protocol): információ letöltése webkiszolgálórólftp (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 email címretelnet: alkalmazás futtatása távoli gépen
(bejelentkezési név @)gép neve vagy IP címeIP cím (IP address): minden egyes – az Internethez kap-csolódó – gép egyedi azonosítószáma, pl.: 152.66.115.35név (domain name): az azonosítószámot helyettesítő név
ftp://[email protected]/public_html/images/rdx60w.jpghttp://www.star.bme.hu/oktatas/2003-2004-1/szamgep-1/tema-
szg1.html#feltételekhttp://telefon.bme.hu:8082/index.php?unit&id=3066mailto:[email protected]
Uniform Resource Locator (URL)
kapu (port):1-65535 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 / almappakeresett állomány vagy erőforrás nevehorgony (anchor): állományon belüli hely (ld. id)további működési paraméterek (adatbázis-hátterű weblapoknál)
ftp://[email protected]/public_html/images/rdx60w.jpghttp://www.star.bme.hu/oktatas/2003-2004-1/szamgep-1/tema-
szg1.html#feltételekhttp://telefon.bme.hu:8082/index.php?unit&id=3066mailto:[email protected]
Az URL egyes részeinek elhagyása
Az URL elejének elhagyása: relatív hivatkozása 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. http://www.star.bme.hu/tanszeka 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).
Általános célú paraméterekElem 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.
StíluslapokWeblap (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
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 dokumentumbanbeá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">
Stílus megadása…egy elem összes előfordulásárabody {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)
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, obliquefont-variant: normal, small-capsfont-weight: normal, bold, bolder, lighter, 100, 200…900bolder, lighter: relatív vastagságfont-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ódtext-decoration: underline, overline, line-through, blinktext-align: left, right, center, justifyline-height: hossz (ld. fent)
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, hosszborder-color: rgb(), színkódborder-style: none, dotted, dashed, solid, double, groove, ridge, inset, outsetpadding: felső (-top), jobb (-right), alsó (-bottom), bal (-left): hossz
Lebegő objektumok, pl. <img> elemhezfloat: 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, nonelist-style-image: url(), nonelist-style-position: inside, outside
Néhány stílusparaméter 2.
Szöveg
marginborder
padding
1
23
4
1
2
3
4
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.
Stíluslapok (CSS) alkalmazása
Előnye: szerkezet és formázás elválasztásaHa 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.: www.csszengarden.comJó stíluslapot nehéz összerakni: meglévőből érdemes kiindulni
Nyílt szabványokNyílt szabványok Jogvédett formátumokpl. html, css pl. .doc, .xlshozzáférhető és szerkeszthető a forráskód
csak a hozzákapcsolt alkalmazás tudja létrehozni és értelmezni
várhatóan mindig lesznek olyan programok, amik értelmezni tudják
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
Html fájl felhasználása
Megjelenítés vizuális böngészővelgrafikus böngésző,karakteralapú böngésző,
Megjelenítés nem-vizuális böngészővelBraille-megjelenítő,felolvasóprogram (munka közben, autóban),
Automatikus feldolgozáskeresőrobotok,indexelő, katalogizáló programok,proxy szerverek,
Információ tárolásastrukturált forma,széles körben elfogadott publikus szabvány, ezért sok év múlva is használható marad.
Hasznos weblapok
Html tanfolyamokhttp://mek.oszk.hu: Magyar Elektronikus Könyvtár: számos dokumentum írja le a html nyelvet (magyar)www.webradio.hu/comp/html
www.w3.org: 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
www.google.com: Keresőmotorkeresés az Interneten kulcsszavak alapján
WeblapszerkesztőkAraneae: www.araneae.com (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ázis-vezérelt weblapok fejlesztése
Macromedia Dreamweaverprofi weblaptervezés
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ülnekWeblap, 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érKeretek: Formátum> Keretek (Frames)
Weblap szerkesztéseMás hogyan csinálja?
Forrás megtekintése: View/ Nézet> Source/ ForrásForrá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éseBöngésző nem ad hibaüzenetet, ha hibás a lap, ezért érdemes weblap ellenőrzőt (html parser) használni:http://validator.w3.org/ (online, ingyenes)A Real Validator (offline, shareware)Html Tidy (forráskód-szépítő)
Saját weblap készítése
Téma: eddigi tanulmányok során készített modellek és tervek bemutatásaSzempontok:
BöngészőfüggetlenEgyszerűen bővíthetőEgyéni, áttekinthető, informatív
Elhelyezés: Ural2, tetszőleges tükörszerverFelmásolás: winscp-velCím: http://www.hszk.bme.hu/~név
Szerepeljen rajta:Tükörszerver címeÉpítész-informatika 1 tárgy keretében készült
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), 1998-2008.
