Dynamický web

Název školy	Vyšší odborná škola obalové techniky a Střední škola, Štětí, příspěvková organizace
Adresa školky	Kostelní 134, 411 08 Štětí
IČ	46773509
Název operačního programu	OP Vzdělávání pro konkurenceschopnost
Registrační číslo	CZ.1.07/1.5.00/34.1006
Označení vzdělávacího materiálu
Název tématické oblasti (sady)	Programování
Název materiálu	PHP - cvičení IV
Anotace
Autor		Jazyk
Očekávaný výstup
Klíčová slova
Druh výukového zdroje		Věková skupina žáků
Typ interakce		Ročník
Speciální vzdělávací potřeby	žádné
Zhotoveno, (datum/období)		Celková velikost

PHP - cvičení IV

Obsah

HTML
Lorem ipsum
- Řešení
  - CSS
  - Hlavička
  - Patička
  - Hlavní obsah
Consectetur
- Řešení
  - Obrázky
Adipisicing
- Řešení
  - Formulář

HTML

Následující úkoly jsou cílené na procvičení čistého HTML. Pokud chcete přimíchat PHP, můžete.

Jde celkem o 3 stránky, které mají stejný layout a CSS. Layout lze realizovat tabulkou (nedoporučuje se vzhledem k aktuálním verzím HTML a CSS) a nebo s využitím HTML5 elementů a CSS formátování.

Použité obrázky ke stažení: img.zip

Lorem ipsum

Řešení

Nejprve HTML záhlaví dokumentu

řešení

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Lorem ipsum</title>
    <link rel="stylesheet" type="text/css" href="styly.css">
</head>
<body>

CSS

řešení

 
body {
    margin: 0;
    padding: 0;
}
 
#wrapper {
    margin: 0 5%;
}
 
header {
    background-color: cornflowerblue;
    padding: 12pt;
}
 
h1, h2 {
    font-family: "Helvetica", sans-serif;
    font-weight: bolder;
    margin: 0;
    color: white;
}
 
h2 {
    font-weight: lighter;
    margin: 12pt 0;
    color: #505050;
}
 
p {
    color: #505050;
    line-height: 1.3;
    max-width: 700px;
    text-align: justify;
}
 
nav {
    float: left;
    width: 200px;
 
}
 
nav ul {
    padding: 0;
    margin: 4px 12px 4px 4px;
    list-style-type: none;
}
 
nav a {
    font-family: sans-serif;
    display: block;
    color: indianred;
    padding: 8px;
    border-bottom: 2px solid lightgray;
    text-decoration: none;
}
 
nav a:hover {
    border-bottom-color: black;
    background-color: whitesmoke;
}
 
article {
    margin-left: 220px;
}
 
article li {
    color: #505050;
    line-height: 1.3;
}
 
.active {
 
    border-bottom-color: black;
}
 
footer {
    height: 120px;
    background-color: #505050;
    margin-top: 100pt;
}
 
footer p {
    padding: 50px;
    margin: 0;
    color: whitesmoke;
}
 
article img {
    width: 150px;
}
 
article ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    max-width: 700px;
}
 
article ul li {
    display: inline-block;
}
 
table td {
    padding: 8px;
}
 
label {
    font-family: sans-serif;
}
 
input, textarea, select {
    border: 1px solid gray;
    padding: 6px;
}

Další řešení je pak rozděleno do několika částí: hlavička (hlavní nadpis), patička a hlavní část.

Hlavička

řešení

<header>
    <h1>Lorem ipsum</h1>
</header>

Patička

řešení

<footer>
    <p>&copy; by ~mist~</p>
</footer>

Hlavní obsah

řešení

<div id="wrapper">
    <nav role="main">
        <ul>
            <li><a class="active" href="index.html">Lorem</a></li>
            <li><a href="consectetur.html">Consectetur</a></li>
            <li><a href="adipisicing.html">Adipisicing</a></li>
        </ul>
    </nav>
 
    <article>
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
        <ol>
            <li>Class aptent taciti socios</li>
            <li>Volutpat lectus malesuada</li>
            <li>Donec rhoncus id odio tempus</li>
            <li>Volutpat magna vehicula</li>
 
        </ol>
 
        <p>Etiam mattis tristique iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nibh nunc, pretium vel libero nec, euismod tristique ante. Donec luctus nisi sem, at mollis turpis sagittis ac. Duis in sapien non velit malesuada ornare. Morbi quis dui vitae elit ullamcorper congue mollis ac sem. In ligula ex, posuere in vulputate faucibus, scelerisque quis lorem. Nullam sed bibendum urna, vel vehicula felis. Etiam interdum ornare elementum. Donec tortor metus, aliquam vel ornare in, posuere at sapien. Sed eget dapibus metus, nec feugiat erat. Duis at lectus imperdiet, vulputate lectus in, mollis lacus. Nullam lacinia accumsan turpis vitae efficitur.</p>
        <p>Aenean magna ex, fringilla in lobortis in, convallis nec nunc. Maecenas eu tempor felis. Ut convallis hendrerit erat sit amet convallis. Integer ultricies convallis nulla vitae scelerisque. Nulla facilisi. Integer lacinia in purus ac ornare. Donec eget tellus imperdiet, euismod massa ac, bibendum sem. Nam lacinia eleifend massa. Cras scelerisque tellus lacus, a faucibus magna cursus ut. Pellentesque vel placerat purus. Maecenas convallis congue tincidunt. Fusce hendrerit, magna at molestie congue, libero lectus dignissim libero, id bibendum nunc enim eu elit. In malesuada porttitor posuere. Suspendisse venenatis in erat vel vestibulum. Sed erat leo, auctor non molestie eu, tristique eget nibh. </p>
    </article>
</div>

Consectetur

Řešení

Obrázky

řešení

<ul>
    <li><a href="img/1.jpg"><img src="img/1.jpg" alt="" /></a></li>
    <li><a href="img/2.jpg"><img src="img/2.jpg" alt="" /></a></li>
    <li><a href="img/3.jpg"><img src="img/3.jpg" alt="" /></a></li>
    <li><a href="img/4.jpg"><img src="img/4.jpg" alt="" /></a></li>
    <li><a href="img/5.jpg"><img src="img/5.jpg" alt="" /></a></li>
    <li><a href="img/6.jpg"><img src="img/6.jpg" alt="" /></a></li>
    <li><a href="img/7.jpg"><img src="img/7.jpg" alt="" /></a></li>
    <li><a href="img/8.jpg"><img src="img/8.jpg" alt="" /></a></li>
    <li><a href="img/9.jpg"><img src="img/9.jpg" alt="" /></a></li>
    <li><a href="img/10.jpg"><img src="img/10.jpg" alt="" /></a></li>
    <li><a href="img/11.jpg"><img src="img/11.jpg" alt="" /></a></li>
 
</ul>

Adipisicing

Řešení

Formulář

řešení

<form>
    <h2>Contactel formium</h2>
    <table>
        <tr>
            <td><label for="i-name">Jméno</label></td>
            <td><input id="i-name" type="text" name="name" value=""></td>
        </tr>
        <tr>
            <td><label for="i-email">E-mail</label></td>
            <td><input id="i-email" type="text" name="email" value=""></td>
        </tr>
        <tr>
            <td><label for="i-immodium">Immodium</label></td>
            <td>
                <select id="i-immodium" name="immodium" size="1">
                    <option value="">tellus</option>
                    <option value="">dignissim</option>
                    <option value="">libero</option>
                </select>
            </td>
        </tr>
        <tr>
            <td><label for="i-duis">Duis</label></td>
            <td><input id="i-duis" type="checkbox" name="duis" value=""> (convallis nec nunc)</td>
        </tr>
        <tr>
            <td><label for="i-zprava">Zpráva</label></td>
            <td><textarea id="i-zprava" name="zprava" cols="40" rows="12"></textarea></td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: right">
                <input type="submit" value="Dolor">
            </td>
        </tr>
    </table>
</form>