Sissejuhatus

Ülesanded: Luua mobiilisõbralik veebileht anekdootide näitamiseks.

Kasutatud tehnoloogiad: HTML5, CSS3, PHP, meta viewport.

1. Failide lugemine PHP-ga

Mida teeb: Loeb tekstifailidest sisu ja kuvab lehel.

<?php
echo nl2br(file_get_contents("teade.txt"));
echo file_get_contents("autor.txt");
?>

Selgitus: file_get_contents() loeb faili, nl2br() muudab reavahetused <br> tagideks.

2. Mobiilne Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Selgitus: Leht kohandub seadme ekraani laiusega.

3. Anekdootide dünaamiline laadimine

$id = isset($_GET['id']) ? (int)$_GET['id'] : 1;
$file = "anekdoodid/anekdoot{$id}.txt";
if(file_exists($file)){
    echo "<h2>Anekdoot $id</h2>";
    echo "<div>" . nl2br(file_get_contents($file)) . "</div>";
}else{
    echo "<h2>Anekdooti ei leitud</h2>";
}

Selgitus: Kontrollib URL parameetrit ja kuvab faili sisu.

4. Mobiilne navigatsioon

<ul class="nav">
    <li><a href="esmaspaev.php">E</a></li>
    <li><a href="teisipaev.php">T</a></li>
    <li><a href="kolmapaev.php">K</a></li>
</ul>

Selgitus: Lühendab menüü nuppe mobiilse ekraani jaoks.

5. CSS mobiilivaatele

.nav li { display: inline; margin: 5px; }
.anekdoot-text { font-size: 14px; line-height: 1.5; }

Selgitus: Lihtne kujundus, mis töötab mobiilse seadme ekraanil.

Mobiilne vaade

Leht kohandub automaatselt väikese ekraani laiusega. Menüü lühendatakse, tekst väiksemaks, kõik elemendid mahuvad ekraanile.