Mobil eszközön, karakterek méretei stílus nélkül.
Ezen oldalt, asztali és mobil eszközön is, teszteljük.
Így lesz rálátásunk, hogy milyen eltérés van olvashatósági szempontból.
Asztali vagy mobil eszközön, szövegek megjelenési stílusát, az éppen alkalmazott böngésző határozza meg.
Bal felső sarokban látható zöld visszaléptető nyíl (kép) méretei:
width="70px" height="70px"
Weboldal szélessége:
width: 940px; padding-left: 10px;
H1-es címsor karakterei.
H2-es címsor karakterei.
H3-es címsor karakterei.
H4-es címsor karakterei.
H5-es címsor karakterei.
H6-es címsor karakterei.
<p> Jelölőelemnél, szöveg megjelenése. </p>
<p><strong>
Vastagon kiemelt szöveg.
</strong></p>
<p><em>
Dőlt kiemelt szöveg.
</em></p>
<pre>
Jelölőelemnél, szöveg megjelenése.
</pre>
<blockquote>
Jelölőelemnél, szöveg megjelenése.
</blockquote>
<acronym>
Mozaikszó, szöveg megjelenése.
</acronym>
<address>
Külső címek kiemelésének megjelenése. </address>
- <ul>
- <li> Listás szöveg. </li>
- <li> Sortávolság. </li> </ul>
- <ol>
- <li> Számozott lista. </li>
- <li> Sortávolság. </li> </ol>
Hivatkozási link.
Táblázat és szövegének megjelenése, stílus meghatározás nélkül.
<table border="1px">
<caption>Kettő oszlopos táblázat.</caption>
<tr> <th>1.Oszlop elnevezése</th> <th>2.Oszlop elnevezése</th> </tr>
<tr> <td>Adattároló cella.</td> <td>Adattároló cella.</td> </tr>
</table>
| 1.Oszlop elnevezése | 2.Oszlop elnevezése |
|---|---|
| Adattároló cella. | Adattároló cella. |
| 1.Oszlop elnevezése | 2.Oszlop elnevezése | 3.Oszlop elnevezése |
|---|---|---|
| Adattároló cella. | Adattároló cella. | Adattároló cella. |
| 1.Oszlop elnevezése | 2.Oszlop elnevezése | 3.Oszlop elnevezése | 4.Oszlop elnevezése |
|---|---|---|---|
| Adattároló cella. | Adattároló cella. | Adattároló cella. | Adattároló cella. |
Táblázat szésességét,
100%-ra állítjuk.
| 1.Oszlop elnevezése | 2.Oszlop elnevezése |
|---|---|
| Adattároló cella. | Adattároló cella. |
Megjegyzés:
Mobilon nagyítás nélkül,
olvashatatlan részek.
1. <pre> felsorolások.
2. <caption> Tábla elnevezése.
3. <th> és <td> adatok.
XHTML fájl meghatározása:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mobil natur oldal.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</head>
<body>
<h1>Megjelenítés, stílus nélkül.</h1>
</body>
</html>
HTML5 fájl meghatározása:
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title> ..................... </title>
</head>
<body>
<h1> .................... </h1>
<p>Html5 fájl kódolását
át kell alakítani
UTF-8 kódolásra BOM nélkül <p>
</body>
</html>
A <pre> és <table> meghatározásai, mobil olvashatóságra.
<pre> szöveg, olvashatósági mérete:
pre{font-size:30pt;}
A pre elem szövege.
<table> szövegek megjelenése:
Kettő oszlopos táblázat, olvashatósági méretei.
Weboldal szélessége: 900px;
table
{
width: 99%;
border 1px solid black;
}
caption{font-size:35pt;}
th{font-size:32pt;}
td{font-size:30pt;}
| 1.Oszlop elnevezése | 2.Oszlop elnevezése |
|---|---|
| Adattároló cella. | Adattároló cella. |