Előadást letölteni
Az előadás letöltése folymat van. Kérjük, várjon
1
Java web programozás 2.
2
Tartalom HTML folytatás. A CSS technika Táblázat Listák Űrlap A CSS
A CSS lépcsős használata A szintakszis 2009
3
HTML táblázat <table> … </table>: A táblázat elem.
<tr> … </tr> : A táblázat egy sora. <td> … </td> : A táblázat egy cellája. 2009
4
HTML táblázat <th> … </th>: A táblázat fejléce.
<caption> … </caption> : A táblázat címe. 2009
5
HTML lista <ul> … </ul> : Felsorolás.
<ol> … </ol> : Számozott lista. <li> … </li> : Egy listaelem. 2009
6
HTML űrlap Űrlap („form”)
Adatok bekérése, és elküldése a szerver felé. <form action=„xy.jsp”> … </form> : Egy űrlap tag. A „form” tagon belül, különféle beviteli elemek biztosítják az adatbevitelt. Szövegmező <input type=„text” name=„xy”/> 2009
7
HTML űrlap Rádiógomb <input type=„radio” name=„drink” value=„sor”>Sőr</input> 2009
8
HTML űrlap Jelölőnégyzet
<input type=„checkbox” name=„car”>Autóm van 2009
9
HTML űrlap Lenyíló lista <select name=„autok”>… </select>
<option value=„..”>xy … </select> 2009
10
HTML űrlap Szövegmező <textarea rows=„8” cols=„20”>
Kezdő szöveg </ textarea> 2009
11
HTML űrlap Az űrlap adatainak az elküldése
<input type=„submit” value=„Küldés”> Ekkor a <form> tag, „action” attribútumában megadott szerver oldali kódhoz kerülnek a megadott adatok. GET: Az űrlap adatai, az URL-be kerülnek bele. POST: Az űrlap adatai, a kérés törzsében szerepelnek. 2009
12
A CSS Mi a CSS? Cascading Style Sheets.
Meghatározza, hogyan jelenjenek meg a HTML tag-ek. Általában külön állományban (*.css) vannak a „formázási utasítások”. A CSS segítségével, szétválasztható a „tartalom”, a „megjelenítéstől”! 2009
13
A CSS nyelvtana szelektor {attribútum: érték}
Szelektor („kiválasztó”): Egy HTML tag neve Meghatározza, hogy „MIT” formázunk. Attribútum: A HTML tag, egy jellemzője. Érték: A konkrét változás „értéke”. 2009
14
Lépcsős használat Az alábbi „sorrendben” érvényesülnek a CSS beállítások: 1. A böngésző alapbeállítása 2. Külső stíluslap. 3. A HEAD tag-ben, definiált „<style>” tag. 4. Soron belüli („in-line”) stílus. 2009
15
A böngésző alapbeállítása
Eszközök Internetbeállítások 2009
16
A böngésző alapbeállítása
Eszközök Internetbeállítások Kisegítő lehetőségek 2009
17
Külső stíluslap. Egy külön *.css fájlban szerepelnek a formázási utasítások. A <head> tag-ben használjuk. Használata: <link rel="stylesheet" href="basic.css" type="text/css"/> 2009
18
A <style> tag A <head> elemben szerepel egy <style> tag, amelyben a CSS utasítások kapnak helyet. Pl.: 2009
19
Soron belüli („in-line”) stílus.
Ekkor, a formázni kívánt HTML tag, „style” attribútumát kell beállítani. Pl.: <p style="text-align:right; font-size: 22pt">Ez egy formázott bekezdés.</p> 2009
20
A CSS használata Elem kiválasztása:
Megadjuk azt a típusú elemet, amelyet formázni szeretnénk. Pl. lásd. 18. dia. Több elem kiválasztása: Felsorolás jelleggel. Ekkor csak a felsorolt elemekre lesz érvényes a stílus. 2009
21
A CSS használata Osztály kiválasztó:
Más-más módon lehet megjeleníteni az ugyanolyan tag-eket. A HTML kód: 2009
22
A CSS használata Azonosító alapú kiválasztás:
A HTML elemhez megadjuk az „id” attribútumát. Pl. Megjegyzés használata: /* Ez egy megjegyzés. */ 2009
Hasonló előadás
