TNPW1 Cvičení 1
This presentation is the property of its rightful owner.
Sponsored Links
1 / 36

TNPW1 Cvičení 1 PowerPoint PPT Presentation


  • 77 Views
  • Uploaded on
  • Presentation posted in: General

TNPW1 Cvičení 1. 13.2.2013 [email protected] Organizační úvod. 13.2.2013 [email protected] TNPW1 Cvičení 1. O čem je TNPW1 Tvorba statických stránek v XHTML Strict Úprava vzhledu stránek pomocí CSS Základní zásady webdesignu a použitelnosti

Download Presentation

TNPW1 Cvičení 1

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Tnpw1 cvi en 1

TNPW1 Cvičení 1

13.2.2013

[email protected]


Tnpw1 cvi en 1

Organizační úvod

13.2.2013

[email protected]


Tnpw1 cvi en 1

TNPW1 Cvičení 1

O čem je TNPW1

  • Tvorba statických stránek v XHTML Strict

  • Úprava vzhledu stránek pomocí CSS

  • Základní zásady webdesignu a použitelnosti

  • Na přednáškách také informace o moderních technikách (HTML5, CSS3,…)


Tnpw1 cvi en 11

TNPW1 Cvičení 1

Informace - cvičení

  • http://lide.uhk.cz/bartuan1

  • materiály ke cvičení

  • změny ve výuce a jiné aktuality k cvičení

  • [email protected]

  • dotazy ke cvičení, domlouvání konzultací

  • zasílání úkolů a projektu


Tnpw1 cvi en 12

TNPW1 Cvičení 1

Informace – projekty a přednášky

  • www.jiristepanek.cz

  • požadavky na projekt – hodnotící kritéria

  • přednášky ke stažení

  • V DOWNLOADS / TNPW1 ostatní – velmi užitečný soubor projectguide.pdf – přečtěte si až začnete pracovat na projektu


Tnpw1 cvi en 13

TNPW1 Cvičení 1

Organizace cvičení

  • Přednostní právo na židli mají ti, kdo mají předmět povinný ve studijním plánu, poté mají přednost řádně přihlášení před náhradníky

  • Účast na cvičeních je nepovinná

  • Na cvičeních je ale možnost získat bonusové body ke zkoušce za odevzdané úkoly (pro možnost získání bodů je nutná účast na konkrétním cvičení)


Tnpw1 cvi en 14

TNPW1 Cvičení 1

Podmínky pro zápočet

  • Odevzdání samostatné práce - projektu

  • Požadavky na projekt v kostce:

    • Statický web, validní XHTML Strict a CSS

    • Jednotné téma projektu

    • Minimálně 5 podstran

    • Správné použití probíraných HTML elementů

    • Podstatná je správnost a čistota kódu

    • Více na http://www.jiristepanek.cz/


Tnpw1 cvi en 15

TNPW1 Cvičení 1

Možnost zrychleného absolvování

  • Odevzdání projektu je možné kdykoli během semestru, nejpozději ve stanovený deadline (poté budou sankce za pozdní odevzdání)

  • Do 27/2 můžete zkusit odevzdat bez vedlejších následků (tj. pokud neuspějete, můžete odevzdat znovu v řádném termínu)


Tnpw1 cvi en 16

TNPW1 Cvičení 1

Zápočet a zkouška - body

  • Zápočet

    • Projekt: možných 50 bodů, pro splnění zápočtu je potřeba min. 30 bodů

    • Cvičení: možných 10 bodů (pro splnění zápočtu není potřeba)

  • Zkouška

    • zkouškový test (podmínky Ing. Štěpánek)

    • plus body ze zápočtu (ale max. do výše 50 bodů)


Tnpw1 cvi en 17

TNPW1 Cvičení 1

Další materiály

  • Literatura

    • HTML, XHTML a CSS / Elizabeth Castro

    • 333 tipů a triků pro CSS / Martin Domes

  • Internet

    • http://www.w3schools.com/

    • http://www.jakpsatweb.cz/


Tnpw1 cvi en 18

TNPW1 Cvičení 1

Otázky k organizaci?


Tnpw1 cvi en 1

Úvod do tvorby WWW

13.2.2013

[email protected]


Tnpw1 cvi en 19

TNPW1 Cvičení 1

Technologie pro tvorbu webu

  • HTML, XHTML – značkovací jazyk

    • struktura, obsah, odkazy - hypertext

  • CSS – kaskádové styly

    • vzhled (rozvržení, formátování, jednoduché efekty)

  • Javascript – skriptování na straně klienta

    • efekty, interakce, taky AJAX, jQuery

  • PHP, ASP, Java, Perl, … - na straně serveru

    • dynamické stránky, aplikace, práce s databází

  • MySQL, MSSQL - databáze


Tnpw1 cvi en 110

TNPW1 Cvičení 1

To není vše…


Tnpw1 cvi en 1

TNPW1 Cvičení 2

13.2.2013

[email protected]


Tnpw1 cvi en 1

Práce na cvičeních

13.2.2013

[email protected]


Tnpw1 cvi en 2

TNPW1 Cvičení 2

Vývojové prostředí

  • Dle vaší volby, ale textové, ne WYSIWYG!

  • PsPad, NetBeans, nebo třeba Poznámkový blok.. Na cvičeních doporučuji PsPad


Tnpw1 cvi en 21

TNPW1 Cvičení 2

Publikování na UHK

  • Síťový disk w, na jakékoli učebně

  • http://lide.uhk.cz/fim/student/login- zobrazí soubor index.html – výchozí soubor pro webovou prezentaci)

  • http://lide.uhk.cz/fim/student/login/slozka/soubor - můžete si vytvořit složky např. cviceni1, cviceni2, …


Tnpw1 cvi en 22

TNPW1 Cvičení 2

Přístup z domu

  • Pro připojení k vašemu www adresáři mimo síť UHK je potřeba SFTP klient (např. WinSCP)

  • Přihlašovací údaje

    • Adresa: lide.uhk.cz (pro domovský adresář je to hera.uhk.cz)

    • Login: [váš login do UHK]

    • Heslo: [vaše heslo]


Tnpw1 cvi en 23

TNPW1 Cvičení 2

!!! Validace stránek !!!

  • V průběhu vaší práce nebo alespoň před odevzdáním, a hlavně v prvních několika cvičeních, používejte validátor http://validator.w3.org

  • Kontrolujte XHTML 1.0 Strict

  • Úkoly i projekt musí být validní!


Tnpw1 cvi en 24

TNPW1 Cvičení 2

Validace stránek 2

  • Do zdrojového kódu svých stránek na cvičení přidávejte na konec tento kód (vytvoří přímý odkaz na validátor pro jednodušší kontrolu):

  • <a href="http://validator.w3.org/check?uri=referer"> <imgsrc="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /> </a>


Tnpw1 cvi en 25

TNPW1 Cvičení 2

Poznámka k validaci

  • Odkaz na validátor nebude fungovat, pokud nemáte prezentaci na internetu, v tom případě si to musíte zkontrolovat pomocí "Validate by FileUpload na http://validator.w3.org/

  • Pokud pracujete na disku W, validace je bez problému (publikováno na lide.uhk.cz)


Tnpw1 cvi en 1

Začínáme…

13.2.2013

[email protected]


Tnpw1 cvi en 26

TNPW1 Cvičení 2

Úvod do XHTML

  • HTML a XHTML jsou značkovací jazyky – používají značky / tagy k popsání obsahu

  • tagyjsou klíčová slova v závorkách <html>

  • většinou jsou párové <html> a </html>

  • prohlížeče interpretují tagy a podle toho zobrazují obsah (k tomu využívají CSS, pokud není tak defaultní styly prohlížeče)


Tnpw1 cvi en 27

TNPW1 Cvičení 2

Základní tagy / elementy

  • HTML

  • Hlava a tělo stránky

  • Metadata, titulek

  • Nadpisy

  • Odstavce

  • Odkazy


Tnpw1 cvi en 28

TNPW1 Cvičení 2

Struktura stránky

<html>

<head>

<title>Titulek stránky</title>

</head>

<body>

<h1>Hlavní nadpis stránky</h1>

<p>Odstavec na stránce</p>

</body>

</html>


Tnpw1 cvi en 29

TNPW1 Cvičení 2

Základní XHTML dokument

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>An XHTML 1.0 Strict standard template</title>

<meta http-equiv="content-type" content="text/html;charset=windows-1250" />

</head>

<body>

<p>… Your HTML contenthere …</p>

</body>

</html>


Tnpw1 cvi en 210

TNPW1 Cvičení 2

Metadata

  • Zapisují se do hlavičky XHTML dokumentu

  • <meta http-equiv='Content-Type' content='text/html; charset=windows-1250' /> (určení znakové sady)

  • <meta name='description' content=' … ' /> (popis stránky)

  • <meta name='keywords' content= = ' … ' /> (klíčová slova stránky oddělená čárkami)

  • Obě výše zmíněné slouží pro indexaci a vyhledávání


Tnpw1 cvi en 211

TNPW1 Cvičení 2

Nadpisy

  • Několik úrovní

  • <h1>Nadpis první úrovně</h1>

    • nadpis celé stránky, jednou na každé stránce

    • uvádějte ho vždy a pojmenujte smysluplně – zásadní element při indexaci stránek, podobně jako titulek <title>!

  • <h2>Nadpis druhé úrovně</h2> atd.

    • počet na stránce podle potřeby


Tnpw1 cvi en 212

TNPW1 Cvičení 2

Nadpisy 2

  • Nadpis <h2> sémanticky vyjadřuje podnadpis hlavního nadpisu atd.

  • Obsah jde strukturovat až po nadpis <h6>

  • Nadpisy dalších úrovní by neměly být použity, pokud neexistuje nadpis předchozí úrovně

  • Nepřeskakujte úrovně (ne <h1> a za ním <h3>)


Tnpw1 cvi en 213

TNPW1 Cvičení 2

Nadpisy 3 - ukázka

<h1>Stránka o zelenině</h1>

<h2>Květák</h2>

<p>Květák je oblíbenou košťálovou zeleninou.</p>

<h3>Recepty s květákem</h3>

<h4>Květáková polévka</h4>

<p>Očištěný květák rozdělíme na růžičky a opláchneme ve studené vodě… </p>

<h3>Jak pěstovat květák</h3>

<p>Květák vyžaduje vhodné stanoviště… </p>

<h2>Zelí</h2>

<p>Zelí je z rodu brukev.</p>


Tnpw1 cvi en 214

TNPW1 Cvičení 2

Odkazy

  • Hypertextové odkazy – absolutní a relativní

  • Absolutní nás dostane vždy na stejnou adresu (použití při odkazování na jiný web)

  • Relativní používáme při odkazování mezi stránkami a soubory jednoho webu (při změně umístění webu budou odkazy stále fungovat)


Tnpw1 cvi en 215

TNPW1 Cvičení 2

Odkazy 2 - atributy

  • <a href="http://www.seznam.cz">Seznam</a>

  • <a href="obrazky/muj_obrazek.jpg">Můj obrázek</a>

    Atributy

  • href – cíl odkazu – URL (absolutní nebo relativní)

  • name – jméno záložky (viz další stránka)


Tnpw1 cvi en 216

TNPW1 Cvičení 2

Odkazy 3 – v rámci stránky

  • Stránka se odroluje na pozici záložky

  • Místo atributu name lze použít atribut id

    <h1><a name="kotvaProNadpis">Nadpis webu</a></h1>

    <p> … </p>

    <a href="#kotvaProNadpis">Vrátit na nadpis webu</a>

    <p> … </p>


Tnpw1 cvi en 217

TNPW1 Cvičení 2

Zkuste si

  • Vytvořit složku „cviceni1” na disku W

  • Vytvořit v ní soubor index.html s nějakým obsahem (nadpis, odstavec) – v PsPadu

  • Zobrazit tento soubor v prohlížeči na adrese http://lide.uhk.cz/fim/student/login/cviceni1

  • Doplnit v PsPadu jeden absolutní odkaz a vyzkoušet v prohlížeči (aktualizace okna F5)


Tnpw1 cvi en 218

TNPW1 Cvičení 2

Příští cvičení

  • Obrázky

  • Seznamy

  • Tabulky

  • Procvičení

  • Bodovaný úkol


  • Login