NMIN266 - 20.4.2016 - HTML, CSS cvičení

HTML - cvičení

Soubor /usr/html/NMIN266/3/hesse-demian.txt si zkopírujte do adresáře

~/public_html/

pod názvem hesse-demian.html. Tetno soubor upravíme tak, aby se správně zobrazoval jako HTML dokument tj.:

přidáme tagy <html>, <head>, <head a <body>
nastavíme kódování tj. <meta charset="utf-8">

Zkuste si teď dokument prohlédnout v prohlížeči tj.
nic moc...
další úpravy:

řádky Herman Hesse a Demian nastavíme jako nadpis první úrovně tj. <H1>
text Příběh mládí Emila Sinclaira nastavte jako jeden odstavec zarovnaný na střed, psaný kurzivou <p align=center><i>
text překlad Vratislav Slezák nastavte jako jeden odstavec zarovnaný doprava<p align=right> a velikost písma zmenšete o jednotku <font size=-1>
z následujících čtyř řádek udělejte jeden odstavec s vynucenými přechody na novou řádku <br>
na další řádek doplňte slovo "KAPITOLA" a v celém dokumentu zaměňte slovo KAPITOLA za <h2>KAPITOLA</h2> - tj. nadpis druhé úrovně. Navíc odřádkujte (pomocí záměn vložíte konec řádku jako CTRL+V, ENTER tj. ^M) a tag pro začátek odstavce <p>
postupně najděte všechna slova "KAPITOLA" a přidejte čísla 1,2,3 ...
navíc před každkou kapitolu přidejte tag <a name=kap1> atd. podle příslušného čísla kapitoly
v celém textu zaměňte tečku na konci řádku za konec a začátek odstavce (:%s/\.$/.^M<\/p>^M<p>)
na úplném začátku vytvořte obsah. tj. hypertextový odkaza na část dokumentu kap1...kap9tj.
<a href=#kap1>1. kapitola<a>

znovu si výsledek prohlédněte v prohlížeči.
...lepší, ale stále to má mouchy...
Použijeme CSS tj. na začátek dokumetu (do <head>) přidáme:

<style>
body{
  background-color : #ffffe0;
  font-family: sans-serif;
}
p{
  text-align:justify;
  width:700px;
}
</style>

Z umístění /usr/html/NMIN266/ si zkopírujte soubory Hermann_Hesse.jpg a Hermann_Hesse_2.jpg do ~/public_html/
Na závěr dokumentu vložte vertikální čáru tj. <hr> a do prvku <div> vložte
zkopírovaný obrázek a text Hermann Hesse: 2.6.1877-9.8.1962tj.

<hr>
<div>
<img src=Hermann_Hesse_2.jpg><br>
Hermann Hesse 2.6.1877-9.8.1962
</div>

Opět si dokument prolédněte v prohlížeči ...
Obrázek je moc velký - upravíme velikost obrázku:

<hr>
<div>
<img src=Hermann_Hesse_2.jpg width=200px><br>
Hermann Hesse 2.6.1877-9.8.1962
</div>

a na závěr prvek <div> posuneme, orámujeme a nastavíme mu šířku:

<hr>
<div style="position:relative;left:300px;border-width:1px;border-style:solid;width:300px;">
<img src=Hermann_Hesse_2.jpg width=200px;<br>
Hermann Hesse 2.6.1877-9.8.1962
</div>

Formulářové prvky

v adresáři ~/public_html vytvořte soubor form.html, který bude obsahovat tři input políčka s názvem (name)

  jmeno
  prijmeni
  heslo (type password)
  narozeni s předvyplněnou hodnotou DDMMYYYY
  email
  odesílací tlačítko

odesílací metoda bude POST
skript k zpracování formuláře bude:

http://www.karlin.mff.cuni.cz/~richter/NMIN266/form.php

tj.
<form method=post action=http://www.karlin.mff.cuni.cz/~richter/NMIN266/form.php>
formulář si otevřete na webu, vyplňte a odešlete""