XHTML – a tanultak összefoglalása
Az XHTML fájl részei dokumentumtípus deklaráció <html> tag <head> - fejrész <title> - cím megadása a <head> részen belül <body> rész
Szövegek <h1>, <h2>, …, <h6>: címsorok <p>: bekezdés <div>: a dokumentum egy részét határozza meg <br />: sortörés <sub>: alsó index <sup>: felső index <pre>: minden szóközt és sortörést megjelenít, ahogyan az a forrásfájlban található. egyéb szövegformázó tagek (<b>, <i>, <em>, <code>, <del>, <ins> stb.)
Hiperlinkek hivatkozás egy dokumentumra/fájlra: <a href= "http://valami.hu">ide jön a képernyőre kiírandó szöveg, ami a hivatkozás</a> könyvjelzők: <a href="#konyvjelzo_neve">képernyőre kerülő szöveg</a> Ha rákattintunk, ide ugrik: <a name="konyvjelzo_neve" /> A könyvjelző nevében szóköz nem szerepelhet!
Listák <ul>: rendezetlen lista <li>: listaelemek <ol>: rendezett (számozott) lista <dl>: definíciós lista <dt>: definiálandó szó, fogalom <dd>: maga a definíció
Táblázatok <table>: táblázat létrehozása border: keret vastagsága (0 is lehet) cellpadding: cellák közötti távolság cellspacing: cellákban lévő szavak távolsága a cella szélétől <caption>: táblázat felirata. Közvetlenül a <table> tag után kell következnie! <tr>: táblázat sorainak megadása <th>: fejléchez tartozó cellák rowspan, colspan: sorok/oszlopok összevonása <td>: adatot tartalmazó cellák
Űrlapok <form action="http://valami.com/idekuldjeel" method="post"> <p> taget érdemes használni <label for="…">… </label> - input tagek előtt: <input type="text” id="…" /> <textarea name="…" cols="90" rows="2"></textarea> <input type="radio" name ="…" value ="…" />gombhoz tartozó szöveg <input type="checkbox" name="…" value="…" /> Kijelölőnégyzethez tartozó szöveg <input type="file" name ="…" /> <select name"…" id="…"> <option value="magyar">Magyar</option> <option value="angol">Angol</option> <option value="nemet">Német</option> </select> <input type="submit" value="Ez_lesz_ráírva_a_gombra" /> <input type="reset" />
Frame-ek <html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </html> <html> <frameset rows="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </html>
Frame-ek <frameset rows="150,*"> <frame src="felsoresz.htm" name="topFrame" /> <frameset cols="20%, 80%"> <frame src="menu.htm" name="leftFrame" /> <frame src="main.htm" name="mainFrame" marginwidth="25" marginheight="25" /> </frameset> <noframes> <body> <p>Ez a dokumentum az alábbiakat tartalmazza: <ul> <li><a href="…">…</a></li> <li><a href="…"> …</a></li> … </ul> </p> </body> </noframes>
Képek <img>: kép beillesztése src="…" : kép elérhetősége alt="…" : ezt írja ki a böngésző, ha nem tudja megjeleníteni a képet / ha a kép fölé megyünk az egérrel. Megadni kötelező!
Képtérkép <img src ="\images\Bolygók.gif" width="145" height="126" alt="Bolygók" usemap ="#bolygok_terkepe" /> <map id ="bolygok_terkepe" name="bolygok_terkepe"> <area shape ="rect" coords ="0,0,82,126" href ="Nap.htm" target ="_blank" alt="Nap" /> <area shape ="circle" coords ="90,58,3" href ="Merkúr.htm" target ="_blank" alt="Merkúr" /> </map>
Stíluslapok - szövegformázás font-family: Helvetica; font-weight: bold; font-size: 20pt; line-height: 14pt; font-style: italic; word-spacing:4mm; margin: 0.5in; color: red; background-color: yellow;
Stíluslapok – rendezetlen lista list-style-type: disc; list-style-type: circle; list-style-type: square; list-style-type: none; list-style-image: url("hangjegy.gif"); list-style-position: inside;
Stíluslapok - hiperlinkek a { color: blue; } /* még nem látogatott link */ a:visited { color: purple; } /* látogatott link */ a:active { color: green; } /* aktív link (rákattintunk) */ a:hover { color: red; } /* felette van az egér */
Stíluslapok - divek .fejlec, .lablec { background-color: gray; color: white; clear: left; padding: 0; margin: 0; } .tartalmi_resz { margin-left: 200px; border-left: 1px solid gray; padding: 1em; .bal { float: left; width: 160px; padding: 20px; } .jobb { float: right; background-color: yellow; line-height: 150%; height: 160px; .kulso_div { border: 1px solid gray; A számok után rögtön jön a mértékegység! Nincs szóköz!