index_oldal

Megjelenés asztali vagy mobil eszközön, stílus nélkül.

Tartalmi rész szélessége: width: 900px;

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: 900px; + padding-left: 5px; = 905px


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>
    <ol>
  1. <li> Számozott lista. </li>
  2. <li> Sortávolság. </li>
  3. </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>

Kettő oszlopos táblázat.
1.Oszlop elnevezése2.Oszlop elnevezése
Adattároló cella.Adattároló cella.

 



Három oszlopos táblázat.
1.Oszlop elnevezése2.Oszlop elnevezése3.Oszlop elnevezése
Adattároló cella.Adattároló cella.Adattároló cella.

 



Négy oszlopos táblázat.
1.Oszlop elnevezése2.Oszlop elnevezése3.Oszlop elnevezése4.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.

Kettő oszlopos táblázat.
1.Oszlop elnevezése2.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;}

Kettő oszlopos táblázat.
1.Oszlop elnevezése2.Oszlop elnevezése
Adattároló cella.Adattároló cella.

 

 

 

 

Vissza a lap elejére