,

-

,

---

), „ szín: color="red" (), „ háttérszín: bgcolor="#FF0000" (), „ méret: size="pixel" (,

---

) „ szélesség: width="pixel" vagy % (

---

, )

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

Stíluslapok Stíluslap (CSS) Weblap (HTML)

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ó… † külön fájlban „ elem a HTML dokumentum fejlécében „ pl.: † a HTML dokumentum fejlécében (head) „ <style> elem a HTML dokumentum fejlécében „ pl.: <style type="text/css"> body {font-size: 10pt} … † egy HTML elem részeként: „ a dokumentum törzsében bármely elemhez a style paraméter „ pl.:

…

„ nem ajánlott: a tartalom keveredik a formázással.

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}

ritkított szöveg

(0,3 em-mel az első alapján)

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, 200…900 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)

Néhány stílusparaméter II. †

Margók, keretek (bármilyen blokk-szintű elemhez) „ „ „ „ „

†

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

float: left, right (lebegő objektum), none (szövegközi objektum) clear: none, left, right, both (pl.

, elem megadott oldalán nem lehet lebegő objektum)

Listák (

és
elemhez) „ „ „

2

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

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.

Stíluslapok használata † Tulajdonságok öröklése:

The headline <em>is important!

„ ha pl. szín nincs megadva az <em> elemhez, akkor a

elem színét örökli, „ alapértelmezés megadása: a 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 stíluslap(ok)ra: @import 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.

Html táblázatok szerkezete I. † Html táblázat szerkezete „ táblázaton () belül sorok (), „ sorokon belül cellák ( elemeket fognak össze „ fejlécsorok: „ láblécsorok: (fejléc után adandó meg, de legalulra kerül) „ általános sorok: (több is lehet) † Oszlopcsoportok A

adatcella,	sor- vagy oszlopfejléc-cella) † Sorcsoportok

elem után, de az első elem előtt kell megadni „ több oszlop összefogása: † 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: (vagy ) † span="nn": egyforma oszlopok száma † width="pixel", %, relatív: oszlop szélessége

Html táblázatok szerkezete II. † Cellák egyesítése (végéig) „ rowspan="szám": hány sor magasságban ("0": aktuális , vagy 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:

Rögtön a elem után következhet,

† align="top/bottom/left/right": képaláírás helye, inkább stíluslapon definiálandó.

Keretek Törzs () helyett : <noframes>

Ezen a keretes weblapon található:

• fejléc,
• menü,
• 

†

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" Gray = "#808080" Silver = "#C0C0C0" White = "#FFFFFF"

Navy = "#000080" Teal = "#008080" Blue = "#0000FF" Aqua = "#00FFFF"

Maroon = "#800000" Purple = "#800080" Red = "#FF0000" Fuchsia = "#FF00FF"

Green = "#008000" Olive = "#808000" Lime = "#00FF00" Yellow = "#FFFF00"

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.

Hasznos weblapok † www.mek.iif.hu: Magyar Elektronikus Könyvtár „ számos dokumentum írja le a html nyelvet (magyar)

† 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őmotor „ keresés az Interneten kulcsszavak alapján

Weblapszerkesztők † Araneae: www.araneae.com (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

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: „ http://validator.w3.org/ (online) „ A Real Validator (offline, shareware) „ Html Tidy (forráskód-szépítő)

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), 1998-2003.

×

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

Your name

Email

Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint

Description

Close Send

×

Sign In

Email

Password

Remember me Forgot password?

Sign In

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close

,	elem) „ colspan="szám" : hány oszlop szélességben ("0": aktuális