Tvorba internetových stránek Ing. Michal Seibert E111 Konzultační hodiny: Středa 9:00-10:00h http://tvorba-is.wz.cz/
Samostatný úkol •
Zvolili jste si doménu a zjistili její cenu?
•
Nalezli jste svůj freehosting? • Proč právě tento? • Čím je lepší než konkurence? • S jakou konkurencí jste porovnávali?
Prezentace ze cvičení ve formátu PDF: http://tvorba-is.wz.cz
Co nás čeká? • • • • •
Webstránka. Struktura. Tagy a atributy. Odkazy, obrázky, číslované seznamy, tabulky a další. Samostatný úkol.
Webstránka •
Textový soubor obohacený o HTML tagy. (přípona *.html, názvy bez mezer, diakritiky a velkých písmen, implicitní název)
•
•
HTML tagy jsou uzavřeny v < >, vše mimo ně je zobrazovaný text. Tagy určují formu zobrazení a ovlivňují chování stránky. Tagy
Příklad: Tento text je
tučný a tento
kurzívou. Výsledek: Tento text je tučný a tento kurzívou.
Webstránka - struktura •
Úvod, hlavička, tělo = , ,
• •
Dvě aplikace, pro editaci a prohlížení. Vytvořte tuto stránku sami za pomocí Notepadu a zobrazte ji v Chromu.
Webstránka – párovost a atributy
Příklad stránky
atributy
párový tag
Příklad atributu a párovosti
Obyčejný text v odstavci, zde kurzíva a tučné písmo, jak je již známe.
A zde další odstavec, kde máme odkaz Fakultní web
zde odkaz na předchozí příklad
a na dalším novém řádku text s ukončením odstavce.
nepárový tag
Příklad jiného zadání barvy
A jeden <span style="color:#FF0000">barevný text v odstavci.
Vyzkoušejte si vytvořit tuto stránku. Experimentujte s barvami a odkazy. Přijdete na to jak otevřít odkaz v novém okně?
Webstránka – párovost a atributy Výsledek:
Webstránka – obrázek ...
...
Připravte si obrázek a vyzkoušejte si jeho přidání do své stávající stránky. Zjistěte si další atributy tagu
![]()
a experimentujte s nimi.
Další informace na: http://www.jakpsatweb.cz/html/
Webstránka – další tagy ...
...
Vytvořte římskými číslicemi číslovaný seznam o 5-ti položkách, druhou a třetí položku rozšiřte nečíslovanými pododrážkami. Vytvořte na stránce obrázek, který bude odkazem vedoucím na web fakulty. Zarovnejte jej vpravo nahoru. Vytvořte na stránce odkaz, kterým bude možno stáhnout *.doc soubor, který si předem připravíte.
Webstránka – tabulka ...
...
Vytvořte tabulku 3x5. Dokážete naleznout a použít správné atributy tak, aby jste dosáhli sloučení prvních dvou buněk na třetím řádku a posledních dvou buněk posledního sloupce? Cíl:
Webstránka – úkol Obsahuje: • V tabulce sloučené sloupce i řádky, použití záhlaví. • Vložený obrázek, • Různé typy víceúrovňových seznamů, • Odkazy otevírané v novém okně. • Práce s barvou pozadí. • Umístit na svůj freehosting a poslat e-mailem odkaz na
[email protected]
Souhrn úkolů •
• • • • • •
Vytvořte „Hello world” stránku sami za pomocí Notepadu a zobrazte ji v prohlížeči. Vyzkoušejte si vytvořit stránku s párovými a nepárovými odkazy, atributy tygů, absolutní a relativní cestou odkazu. Experimentujte s barvami a odkazy. Přijdete na to jak otevřít odkaz v novém okně? Připravte si obrázek a vyzkoušejte si jeho přidání do své stávající stránky. Zjistěte si další atributy tagu
![]()
a experimentujte s nimi. Vytvořte římskými číslicemi číslovaný seznam o 5-ti položkách, druhou a třetí položku rozšiřte nečíslovanými pododrážkami. Vytvořte na stránce obrázek, který bude odkazem vedoucím na web fakulty. Zarovnejte jej vpravo nahoru. Vytvořte na stránce odkaz, kterým bude možno stáhnout *.doc soubor, který si předem připravíte. Vytvořte tabulku 3x5. Dokážete naleznout a použít správné atributy tak, aby jste dosáhli sloučení prvních dvou buněk na třetím řádku a posledních dvou buněk posledního sloupce?
