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. Příklad: Tento text je <b>tučný</b> a tento <i>kurzívou</i>. Výsledek: Tento text je tučný a tento kurzívou. Tagy
Webstránka - struktura Úvod, hlavička, tělo = <HTML>, <HEAD>, <BODY> 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 <html> <head> <title>příklad stránky</title> atributy </head> <body style="background-color: lightblue; color: brown;"> párový tag <h1>příklad atributu a párovosti</h1> <p>obyčejný text v odstavci, zde <i>kurzíva</i> a <b>tučné</b> písmo, jak je již známe.</p> <p>a zde další odstavec, kde máme odkaz <a href="http://www.ekf.vsb.cz"> Fakultní web</a><br> zde odkaz na <a href="index.html">předchozí příklad</a><br> a na dalším novém řádku text s ukončením odstavce.</p> <h2>příklad jiného zadání barvy</h2> nepárový tag <p>a jeden <span style="color:#ff0000">barevný</span> text v odstavci.</p> </body> </html> 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 <html> <head>... <img src="logo-interval.cz.png">... </body> </html> 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 <IMG> a experimentujte s nimi.
Další informace na: http://www.jakpsatweb.cz/html/ Webstránka další tagy <html> <head>... <hr> <ul> <li>text</li> <li>text</li> </ul>... </body> </html> 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 <html> <head>... <table> <tr> <th>záhlaví</th> <th>záhlaví</th> </tr> <tr> <td colspan= 2 >text</td> </tr> </table> 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:... </body> </html>
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 sei74@vsb.cz
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 <IMG> 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?