HTML elemek Linkek, táblázatok és képek Forrás, amelyből össze lett állítva a prezentáció szövege és képei: http://www.tutorial.hu/html5-es-css3 /
HTML elemekLinkek, táblázatok és képek
Forrás, amelyből össze lett állítva a prezentáció szövege és képei: http://www.tutorial.hu/html5-es-css3 /
Képek igazítása<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//HU" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="hu"> <head> <title>Képek igazítása</title> </head> <body> <p> <img border="2" src="kepek/kep_temakor/logo.png" width=„150" height=„50" align="middle" hspace="5" vspace="5" alt=„Drupal logó"> A Drupal egy remek tartalomkezelő rendszer, melyben könnyen dinamikus weblapelemek készíthetőek akár egyetlen kattintással. </p> </body> </html>
Hivatkozások
Talán a leglényegesebb tulajdonsága a hiperszövegnek ez, amely megkülönbözteti egy egyszerű szövegtől. Ezzel hozhatunk létre kapcsolatokat, amely az egész webre jellemző.Az adott elemhez többféle dolgot is hozzákapcsolhatunk, például egy másik oldalt, vagy egy bekezdést az adott oldalon, fájlokat, stb. A hivatkozást <a ...> jelölővel hozhatjuk létre, de ebben a formában nem használjuk, mert mindenképpen adnunk kell neki egy href attribútumot, amelyben megadjuk, hogy hová mutasson a hivatkozás. A jelölő a hivatkozás szövegét határolja. A hivatkozás alapértelmezésben kék színű aláhúzott szöveg, amelyre harákattintunk akkor elérjük a kapcsolatot.
<a href="http://www.w3c.org">A W3C weboldala</a>
Listák készítése
Listák készítése
Egymásba ágyazott lista
Rendhagyó rendezett listák 1.kezdőszám megadása
Rendhagyó rendezett listák 2.sorszám értékének megadása
Rendhagyó rendezett listák 3.visszafelé számozott lista
Mozzila Firefox 15.0.1.-ben nem működik!Google Chrome 25.01364.97m
Meghatározás-listaegy fogalomhoz - egy meghatározás
Meghatározás-listaegy szóhoz több meghatározás, több szóhoz egy meghatározás
Táblázatok készítése
A fejlécek jelölése fontos
Forrás: Akadálymentes weboldalak készítése (Pataki Máté)
A táblázatok jelölői
Feladat:
Megoldás:
…
Cellák egyesítése
<th bgcolor="#bbbbbb">Chrome 8/9</th> <td>13.16 %</td> <td>13.87 %</td> <td>14.93 %</td> </tr> <tr> <th bgcolor="#bbbbbb">Internet Explorer 7</th> <td>7.59 %</td> <td>7.54 %</td> <td>7.21 %</td> </tr></table>
<table border="1" cellspacing="0" cellpadding="10" align="center"> <caption>Böngészők statisztikája 2011. első negyedévben</caption> <tr> <th> </th> <th colspan="3" bgcolor="#5e5e5e">negyedév</th> </tr> <tr> <th bgcolor="#bbbbbb">hónap</th> <th bgcolor="#bbbbbb">január</th> <th bgcolor="#bbbbbb">február</th> <th bgcolor="#bbbbbb">március</th> </tr> <tr> <th bgcolor="#bbbbbb">Firefox 3.6</th> <td>42.89 %</td> <td>43.41 %</td> <td>42.17 %</td> </tr> <tr> <th bgcolor="#bbbbbb">Internet Explorer 8</th> <td>19.05 %</td> <td>19.18 %</td> <td>18.75 %</td> </tr> <tr>
Áttekinthetőség érdkében:
• Nagyméretű táblázatoknál elősegíti az áttekinthetőséget a következő három jelölőelem-pár:
• thead = table head = táblázatfej (ez nem egyenlő a táblázat címmel)tbody = table body = táblázattörzstfoot = table foot = táblázat lábléc
20-as zenei toplista készítése:
20. Röyksopp19. Massive Attack18. Pearl Jam17. Primus16. RHCP15. U214. Pink Floyd13. Kosheen…
Feladatok: