Základy HTML/XHTML
Info: obsah těchto stránek byl vytvořen v roce 2018, takže některé informace již jsou zastaralé, i když všeobecné základy jsou stále platné
Tipy a triky
Tipy
- dívejte se na stránky na internetu a studujte jejich kód
- dokumenty vytvářejte s ohledem na skupinu návštěvníků, který jsou určeny
- využívejte své jednou již napsané dokumenty (většinou hlavička a patička je stejná a mění se jen obsah)
- snažte se uržet střídmost a přehlednost dokumentu
Triky
Uživatelské odrážky
S použitím tagu <dl>, <dt> a <dd>.
<![CDATA[
<dl>
<dt></dt>
<dd><img src="obr/bullet.gif" border="0" width="10" height="11"
hspace="5" vspace="0">text text text text text text
text text text text</dd>
<dt></dt>
<dd><img src="obr/bullet.gif" border="0" width="10" height="11"
hspace="5" vspace="0">text text text text text text text</dd>
<dt></dt>
<dd><img src="obr/bullet.gif" border="0" width="10" height="11"
hspace="5" vspace="0">text text text text text text text text</dd>
</dl>
]]>
Ukázka:
text text text text text text text text text text- text text text text text text text
- text text text text text text text text
druhý způsob s využitím kaskádových stylů (CSS)
<![CDATA[
ul.moje_odr {list-style-image: url(obr/bullet.gif)}
<ul class="moje_odr">
<li>text text text text text text text text text text</li>
<li>text text text text text text text </li>
<li>text text text text text text text text </li>
</ul>
]]>
Ukázka:
- text text text text text text text text text text
- text text text text text text text
- text text text text text text text text
Stránka o více sloupcích se záhlavím pře celou šířku
<![CDATA[
<table width="98%" border="0" cellpadding="10" cellspacing="0" align="center" bgcolor="#FFFFCC">
<tr bgcolor="#FFCC00">
<td colspan="7" align="center" valign="middle"><h1>Nadpis na celou šířku</h1></td>
</tr>
<tr>
<td width="5"> </td> <!-- mezera na okraji, poloviční než mezi sloupci -->
<td width="30%" align="justify" valign="top"> <!-- obsah 1 sloupce -->
Obsah - text prvního sloupce, text1 text1 text1 text1 text1
text1 text1 text1 text1 text1 text1 text1 text1 text1
text1 text1 text1 text1 text1 text1 text1 text1 text1
text1 text1 text1 text1 text1 text1 text1 text1 text1
</td>
<td width="10"> </td> <!-- mezera mezi sloupci -->
<td width="30%" align="justify" valign="top"> <!-- obsah 2 sloupce -->
Obsah - text druhého sloupce, text 2 text 2 text 2 text 2 text 2
text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2
text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2
text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2
</td>
<td width="10"> </td> <!-- mezera mezi sloupci -->
<td width="30%" align="justify" valign="top"> <!-- obsah 3 sloupce -->
Obsah - text třetího sloupce, text3 text3 text3 text3 text3 text3
text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3
text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3
text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3
</td>
<td width="5"> </td> <!-- mezera na okraji, poloviční než mezi sloupci -->
</tr>
</table>
]]>
Ukázka
Nadpis na celou šířku |
| |
Obsah - text prvního sloupce, text1 text1 text1 text1 text1
text1 text1 text1 text1 text1 text1 text1 text1 text1
text1 text1 text1 text1 text1 text1 text1 text1 text1
text1 text1 text1 text1 text1 text1 text1 text1 text1
|
|
Obsah - text druhého sloupce, text 2 text 2 text 2 text 2 text 2
text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2
text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2
text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2
|
|
Obsah - text třetího sloupce, text3 text3 text3 text3 text3 text3
text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3
text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3
text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3
|
|
Rozvržení formuláře pomocí tabulky
V příkladu je v první tabulce vložena tabulka s formulářem. Vložením tabulky s formulářem je dosaženo barevného okraje tabulky o šířce 5px.
<![CDATA[
<form action="mailto:muj_email@vutbr.cz" method="post" enctype="text/plain">
<table border="0" cellpadding="5" cellspacing="0" bgcolor="#FFCC00">
<tr>
<td align="center" valign="middle">
<table border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFCC">
<tr>
<td align="right">Příjmení a jméno:</td>
<td><input type="text" name="jmeno" maxlength="30" size="30"></td>
</tr>
<tr>
<td align="right">Ulice:</td>
<td><input type="text" name="ulice" maxlength="30" size="30"></td>
</tr>
<tr>
<td align="right">Město:</td>
<td><input type="text" name="mesto" maxlength="30" size="30"></td>
</tr>
<tr>
<td colspan="2"><hr noshade color="#000080"></td>
</tr>
<tr>
<td colspan="2" align="center">
Mobil: <input type="text" name="mobil" size="10" maxlength="13">
Email: <input type="text" name="email" size="10" maxlength="20">
</td>
</tr>
<tr>
<td colspan="2"><hr noshade color="#000080"></td>
</tr>
<tr>
<td align="center"><input type="reset" value="Vymazat"></td>
<td align="center"><input type="submit" value="Odeslat"></td>
</tr>
</table>
</td>
</tr>
</table>
<div style="display:none"><label>Fill This Field</label><input type="text" name="honeypot" value=""></div></form>
]]>
Ukázka:
Zobrazení popisu odkazu ve stavovém řádku
K tomu se využívá jednoho z atributu událostí "onMouseOver" a skriptu v jazyce JavaScript. Pozor na uvozovky!
<![CDATA[
<p>Soubor s <a href="index.html" onMouseOver="window.status='Odkaz na úvodní soubor
s obsahem.'; return true">obsahem</a> má název "index.html".</p>
]]>
Ukázka:
Soubor s obsahem má název "index.html".
Po najetí myší na odkaz, se ve stavovém řádku objevý zadaný text.
Poznámka: "window.status" je již nepovolený a může způsobovat chybu RUN-TIME ERRORS
Otevření dokumentu v novém okně na zadaném místě a rozměry
Nové okno se otevře, ale nemá menu, ikony, stavový řádek apod. Otevře se na zadaném místě se zadanými rozměry. Využívá se zde jednoho z atributů události onClick a JavaScriptu.
<![CDATA[
<script language="JavaScript" type="text/javascript">
<!--
// *** Otevře externí okno dle zadaných parametrů
function OtevriOkno(JmenoOkna,Sirka,Vyska,RohVrch,RohLevy)
{
msg = window.open(JmenoOkna, 'nove_okno', 'toolbar=no, location=no,
directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes,
width='+Sirka+', height='+Vyska+', top='+RohVrch+', left='+RohLevy+'');
}
-->
</script>
<p>Soubor s obsahem má název "<a href="index.html" target="nove_okno"
onClick="OtevriOkno('Obsah',450,400,50,50);">index.html</a>".</p>
]]>
Ukázka:
Soubor s obsahem má název "index.html".
Obrázek pod textem
Využívá se zde vrstev dokumentu a pomocí kaskádových stylů. "z-index" umisťuje obrázek na vrstvu pod text a "position" nastavuje umístění obrázku.
<![CDATA[
<img src="obr/obr-mapa-tl.jpg" border="0" width="125" height="165" hspace="20"
vspace="10" style="z-index: -1; position: absolute;">
<p>text as bnsb nsma snas
<br>na snbd as da dad a asd
<br>asd asd ad as da sd asd
<br>asasd as dsd asdasd asd
<br>as adsasd dd sd asd asd
<br>asasd as dsd asdasd asd
<br>na snbd as da dad a asd
<br>sad a s d a s a sd ssad</p>
]]>
Ukázka:
text as bnsb nsma snas
na snbd as da dad a asd
asd asd ad as da sd asd
asasd as dsd asdasd asd
as adsasd dd sd asd asd
asasd as dsd asdasd asd
na snbd as da dad a asd
sad a s d a s a sd ssad