HTML parancsok (html tanfolyam témakörei)

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "HTML parancsok (html tanfolyam témakörei)"

Máté Fábián
7 évvel ezelőtt
Látták:

1 HTML parancsok (html tanfolyam témakörei) 1. Bevezető HTML, HEAD, TITLE parancs 2. Karakter formázás: <b> félkövér, <i> dölt, <u> aláhúzott, fejléc: H1, H2, h6 csökkenő betűméret <p>új bekezdés, <br>új sor 3. Kapcsolat <a href= felsorolas.html > kapcsolat új ablakban <a target= _blank href=.. cím beszúrása: <a href= > Könyvjelző beszúrása: címke: <a name= 1 id= 1 > </a> hivatkozás lapon belül: <a href= #1 > másik lapra <a href= inf.html #1 <a href= akarmi.html #cimke> <input type="radio" name="munka" value="festes" id="festes"><label for="festes">festés</label><br> 4. Lista <ul> felsorolás, <ol> számozás <li> listaelem definíciós lista <dl> fogalom <dt> magyarázat <dd> </dl> 5. Tábla készítése: <table> </table> parancsok közé teszem <tr> új rekord <td> új cella <table border= 1 > keret vastagsága <table border=2 cellpadding=10> cellpading a szöveg távolságát állítja be a kerettől. A cellspacing a cellák közötti távolságot állítja be. 6. Tábla készítése Tábla neve <caption> jegyek </caption> <table border=1> <captoins> jegyek </caption> tehetem a táblába is, ekkor a táblán belül ez lesz az első sor. <tr><th> cella fejléce </th></tr> függőlegesen igazít. 1. fent <td valign=top>felül</td> 2. lent <td valign=bottom>alul</td> 3. középen alaphelyzet <td>alaphelyzet</td> 7. tábla készítése Cellák egyesítése: 1. vízszintesen: <td colspan=2>összevonás </td> ( a következő 2 cella 2. függőlegesen: <td rowspan=2> összevonás </td> Tábla szélessége: <tábla border=1 width=100%> a lap szélességében helyezi el a táblát Cella szélessége <td width=100> első <td width=50> második <td width=100> a 250 pontot osztja a cellák szélességében. 8. speciális karakter 9. képek beszúrása <img src= lovak.jpg alt= ló height= 100 width= 50 > a lovak.jpg height= magasság width= szélesség. alt-tal alternatív szöveget adunk a képhez. A képet követő szöveg igazítása 1. fent <img src= lovak.jpg align= top > 2. középen <img src= lovak.jpg align= middle > 1

2 3. lent <img src= lovak.jpg align= bottom > 10 színek: tábla színe: <table border= 1 bgcolor= ffff00 > sárga Űrlapok: Form-mal kezdődik neve: 1. Szöveg bevitele: Input type = text size= 25 maxlength= 40 name= név value= tibi > 2. Jelszó bevitele: Input type = password size= 10 name= jelszó > 3. Többsoros beviteli mező: <textarea name= vélemény rows= 6 cols= 33 ></textarea> Egyet választhat: 1. kijelölő: <input type= checkbox name= né gyzet value= négyzet checked> alapértelmezetten ez lesz kijelölve 2. rádiógomb <input tpe= radio name= radiogomb value=radiogomb checked> alapértelmezett kijelöl 3. Legördülő listából választhat: <select multiple name= mivel size= 3 > < Options selected> alapértelmezett kiválaszt nyomógomb: 1. <input type="submit" name="mehet" value="mehet"> stylus-lap CSS alapok - Stíluslapok működése A CSS az angol Cascading Style Sheets kifejezés rövidítése, jelentése rangsorolt stíluslapok. A stíluslapot egy szöveges fájlban kell megírni, amit.css kiterjesztéssel kell elmenteni. Karakterkódolás beállítása A stíluslapfájl legelső sorába ajánlott a karakterkódolásra vonatkozó információt írni. Itt is az UTF-8 kódolást ajánlom, mint a HTML esetében. Ekkor így kell kezdődnie a "utf-8"; Kijelölők Kijelölők, tulajdonságok, értékek (selector) 1. karakter kijelölő: Ezután az egész stíluslap nem más, mint kijelölők (selector) és meghatározásblokkok (declaration) felsorolása. A meghatározás két részből áll: tulajdonságból (property) és értékből "utf-8"; Pl: h1 { color: red; kijelölő (selector) a h1; a tulajdonság (property) color: értéke (value) red. CSS kommentek HTML megjegyzést vagy kommentet a  jelek közé írhatunk. CSS-megjegyzést vagy kommentet a /* és a */ jelek közé. Egy megjegyzés több sort is átfoghat. 2. Osztálykijelölők (class -tal hivatkozunk a styluslapon) Ha nem akarunk egységes megjelenést, akkor a class attribútummal minden címkére külön szabályozhatjuk, hogy melyik stílus vonatkozzon rá, és melyik ne. A class attribútumot szinte bármelyik címkébe beleírhatjuk, így: 2

3 <h1 class="osztalykijelolo1">h1 címsor</h1> <h2 class="osztalykijelolo2">h2 címsor</h2> Ekkor a stíluslapban így tudjuk különválasztani a h1 kétféle megjelenését: kijelölővel az egész dokumentumra vonatkozik. h1, h2 { background: lime; A center nevű osztály besorolású elemre vonatkozik: h1.center, h2.center { background: maroon; 3. Azonosítókijelölők (id #) Azonos nevű class attribútumból akármennyi lehet, de id attribútumból csak egyfajta érték fordulhat elő egy HTML dokumentumon belül. Az id attribútum arra való, hogy egyértelműen azonosítson egy címkét, ezért két id ugyanolyan értékkel nem fordulhat elő egy oldalon belül. Az id-nek Javascriptben több jelentősége van, ott ennek segítségével tudunk egy elemre hivatkozni. Valójában az id attribútum ugyanarra kell, mint a class attribútum: ezekkel jelölhetünk meg egy-egy címkét. Így kell megadni a HTML kódban: <h1 id="piros">piros színű címsor</h1> <h1 id="kek">kék színű címsor</h1> A stíluslapban pedig így tudunk bizonyos nevű id-ra stílust alkalmazni: h1#piros { color: red; bemeneti(input formázása): input[type='reset']{ font-weight: bold; width: 150px; Szöveg igazítása: letter-spacing: betűk közötti távolság megadása, text-decoration: vonalakat helyezhetünk el a szöveg alatt, felett, vagy a szöveg belsejében,( Lehetséges értékek: none (díszítetlen), underline (aláhúzott), overline (felülhúzott), line-through (áthúzott), blink (villogó).) text-align: a szöveg igazítását határozhatjuk meg vele, vertical-align: feljebb, vagy lejjebb tolhatjuk az elemeket a vele egy sorban elhelyezett elemekhez képes, middle (középre), top (felülre), bottom (alulra). text-transform: kis és nagybetűk használatát szabályozza, line-height: az aktuális sor teteje és a következő sor teteje közötti távolságot állíthatjuk be segítségével. Háttérszíneket és háttérképeket: color: egy elem szövegének színét határozhatjuk meg vele, background-color: egy elem háttérszínét határozza meg, background-image: az elem hátteréül használt háttérkép kiválasztására szolgál, 3

4 background: gyors megoldást kínál az előbb felsorolt háttérbeállítások meghatározására. Betűtípusok font-style: a betűkészlet stílusát határozza meg, font-family: a szöveg betűtípusát határozhatjuk meg segítségével, font-variant: a normál érték a kisbetűket a hagyományos módon, a small caps érték pedig kiskapitális formájában jeleníti meg, font-size: a betűkészlet pontmérete, font-weight: a szöveg vastagságát határozhatjuk meg. Lehetséges értékek: normal, bold (félkövér), bolder (kövér), light (vékonyabb), lighter (egészen vékony), illetve számmal: 100, , 400, 500, 600, 700, 800, 900 (egyre vastagabbak lesznek, a normálnak a 400-as érték felel meg). pl: body { font-weight: lighter; Szöveg díszítés. Lehetséges értékek: none (díszítetlen), underline (aláhúzott), overline (felülhúzott), line-through (áthúzott), blink (villogó). Kis és nagybetű váltások. Lehetséges értékek: none (módosítatlan), capitalize (első betű nagy), uppercase (összes betű nagy), lowercase (összes betű kicsi). Általános elrendezés: margin: ugyanazt azt értéket rendeli mind a négy margószélességhez, width: egy elem szélességét határozza meg, height: egy elem magasságát határozza meg, float: egy elem szöveggel történő körbefuttatására szolgál, clear: ezzel a tulajdonsággal fejezhetjük be az elemek szövegekkel történő körbefuttatását Hasonló módon a deklarációk is csoportosíthatók: pl: H1 {font-family: helvetica; font-size: 12pt; font-style: normal; Font Size: betűméret megadása, mely lehet abszolút vagy relatív. Abszolút betűméret lehetséges értékei: xx-small, x-small, small, medium, large, x-large, xx-large. A relatív méretek: larger (nagyobb), smaller (kisebb), illetve az előjeles értékkel megadható mértékegységek: em (a betű magasságértéke), ex (a kisbetű, x magasságértéke), px (betűmagasság megadása pixelben). Lehetséges az értékek előjeles megadása százalékos formában is, a % jel kiírásával. ul { font-size: 20px; ol { font-size: 4em; 4

5 Kitöltés Az egyes elemek a kereten (legyen az akár 0 képpontnyi) belüli helyfoglalását szabályozhatjuk a kitöltések segítségével. Lehetséges értékek: { padding: 0px 1px 2px 3px; 0px felül, 1px jobbra, 2px alul, 3px bal oldalt a kitöltés. { padding: 5px; mindenhol egységes. { padding: 10px 5px; 10px függőlegesen, 5px vízszintesen. Keretek Keret szín: { border-color: red; Lehetséges értékek: szín név, hexadecimális szín kód, rgb kód. Keret szélesség: { border-width: 5px; keret stílus:lehetséges értékek: none (nincs), hidden (rejtett), dotted (pontozott), dashed (szaggatott), solid (vonal), double (dupla), Lehetőségünk van a keretek mind a négy oldalon külön-külön történő beállítására is. { border-left: 5px double red; { border-top: 8px dotted rgb(0,0,255); { border-right: 5px double green; 5

6 { border-bottom: 8px dashed #800080; A paraméterek összevonhatóak: { border: 5px double blue; 6

Hasonló dokumentumok

Multimédia 2017/2018 II.

Multimédia 2017/2018 II. 1. gyakorlat HTML5, CSS3 alapok Alapvető HTML5 elemek Egyszerű HTML dokumentum Oldal cime