6. Tvorba webu

  • Základní pojmy – WWW, HTML, web, hosting a doména
  • HTML – tagy a atributy, značky pro formátování, odkazy, obrázky, tabulky
  • Webová stránka – struktura a prvky stránky, uspořádání webu
  • Tvorba webu – HTML editory, přístupnost webu, návštěvnost web
  • Typografie – písma, fonty, velikost, kontrast
  • Barvy – barevné modely, kódování barev, barevná schemata
  • Grafika – typy grafiky, obrázky, pozadí strany, průhlednost, animace
  • Programování – možnosti, principy, prostředky

Základní pojmy

  • WWW – World Wide Web – celosvětová informační internetová služba
  • HTML – Hypertext Markup Language – značkový jazyk pro tvorbu hypertextu
  • Web – prezentace instituce, firmy, osoby … formou www stránek
  • Doména – popisná adresa webového místa
    • generické, národní, druhého a třetího řádu – COM, INFO, CZ, UK, DE, GYMVLA.CZ, INFO.SPSNOME.CZ
    • registrátor – registrace, správa – správce domény – NIC.CZ, DOMENY.CZ, ENDORA.CZ, WEBZDARMA.CZ …
  • Webhosting – diskový prostor serveru poskytovatele pro vystavení souborů prezentace (free a placený)

HTML

  • Tagy – normalizované značky pro formátování a rozložení obsahu webové stránky
    • většina tagů párové značky – <p> ...text... </p> příklad vyznačení textového odstavce
  • Atributy – vlastnosti tagů – <img src="logo.gif" alt="logo"/> soubor obrázku, alternativní text logo
  • Typy značek
    • Stylové
      • <strong>, <em>, <u>, <style>, <br/>
    • Strukturální
      • <head>, <body>, <h1> ...<h6>, <p>, <pre>, <ul>, <ol>, <li>, <table>, <tr>, <td>, <hr/>
      • html5
        TagVýznamPárový
        headerzáhlaví stránky ve smyslu viditelné hlavičkyano
        footerpatička stránkyano
        mainhlavní obsah stránkyano
        articlejeden článek, zejména pro situaci, kdy je na stránce článků vícano
        asidevedlejší obsahano
        sectionobsahová sekce, například kapitoly článkuano
        navnavigace stránkyano
        figureobalení obrázku nebo jiného obsahu s jeho souvisejícím obsahemano
        figcaptionnadpis tagu figureano
      • Souhrnný příklad na strukturní tagy

        <!doctype html>
        <html>
        <head>
            <title>titulek stránky</title>
            <style>/* styly na formátování všech těch tagů */ </style>
        </head>
        <body>
            <header>hlavička, třeba s logem</header>
            <nav>horní navigace</nav>
            <main>
                <article>
                    Vlastní text článku.
                        <section>První kapitola, třeba i s podnadpisy</section>
                        <section>Druhá kapitola nebo jakkoli odlišný obsah</section>
                <aside>Sloupeček, který ale ještě patří do článku</aside>
            </main>
            <nav>spodní navigace</nav>
            <aside>reklama</aside>
            <footer>patička</footer>
        </body>
        </html>

    • Informační
      • <!doctype>, <html>, <title>, <meta>, <!-- komentář -->
  • Hypertextové odkazy – tlačítka menu, texty a obrázky pro zobrazení jiné www stránky
    • <a href="adresa_odkazu">Text odkazu</a>
  • Obrázky – úsporná grafika – JPG, GIF, PNG
    • <img src=obrazek.jpg" />
  • Tabulky – přehled údajů, dříve uspořádání obsahu webové stránky
    • <table>
    • <tr><td>1.buňka</td><td>2.buňka</td></tr>
    • <tr><td>3.buňka</td><td>4.buňka</td></tr>
    • </table>

XHTML (Extended HTML)

Webová stránka

 

www stránka

Struktura

  • Hlavička <head> ... </head>
    • informace pro prohlížeč, vyhledávače a webový server
    <title> – titulek
    <meta ....> – znaková sada, jazyk, popis, klíčová slova …
    <link ....> – připojení stylů a skriptů
    <style ...> – definice stylů stránky
  • Tělo <body> ... </body>
    • Hypertextový odkaz
    <a href="http://google.cz">Vyhledávač</A>
    • Obrázek
    <img src="logo.gif">
 

Šablona pro využití externího souboru css

starší způsob bez tagů html5

šablona pro css

novější způsob s html5

Css soubor

starší způsob bez css3

novější způsob s css3

CSS vlastnosti

Box model v CSS pro HTML element

Tvorba webu

  • HTML editory
    • editory kódu – BlueFish, Doctor HTML editor, PsPad,  HomeSite
      • šablony kódu, doplňování a kontrola kódu, barevné zvýraznění
    • vizuální editory – MS FrontPage, SharePoint Designer, Adobe DreamWeaver
      • šablony vzhledu, vizuálním (wysiwyg) prostředí, automatické generování kódu
  • Přístupnost webu
    • obsah – zajímavost, přehlednost, čitelnost a vzhled
    • validita – zápis kódu podle norem HTML, stejné zobrazení v různých prohlížečích
    • dostupnost – zajímavá adresa, optimalizace pro vyhledávače, registrace v katalozích
    • ovladatelnost – přehlednost, jednoduchost, logika, plná kontrola uživatele
  • Návštěvnost webu
    • SEO – Search Engine Optimization – optimalizace kódu pro vyhledávače
      • informace pro vyhledávače v hlavičkách – Titulek, Popis, Klíčová slova
      • registrace do vyhledávačů a katalogů – Google, Seznam, Centrum, Jyxo
  • soubory map stránek webu – website.xml
  • Doporučené zásady pro tvorbu www stránek:
  1. názvy všech souborů a složek malými písmeny bez diakritiky a mezer
  2. všechny soubory www stránek (*.html, *.css…) ukládám do jedné složky
  3. všechny soubory s obrázky ukládám do podsložky této složky např. obr, img…(dopředu upravím velikost obrázků na cca 100 kB)
  4. všechny ostatní soubory (např. *.doc, *.xls, *.ppt, *.avi…) ukládám do jiné podsložky této složky např. ostatni
  5. hlavní soubor stránek pojmenuji index.html
  6. všechny tagy píši malými písmeny
  7. při tvorbě nového souboru nejdřív uložím soubor, pak vkládám obrázky a tvořím odkazy (kontroluji relativní cestu)

Typografie

  • nauka o písmu, jeho zákonitostech a správném užití
  • Písmo – pojmy
    • Font – druh písma – Arial, Calibri, Verdana, Times New Romain …
    • Rodina fontů – Font-family – souhrn písem téhož druhu
    • Bezpatkové písmo – Sans-serif – tahy stejně silné, technický charakter
    • Patkové písmo – Serif – patkové zakončení tahů, novinový charakter …
  • Velikost písma – důležitá vlastnost pro zajištění čitelnosti a přehlednosti
    • přehlednost – zajištěna pomocí úrovní nadpisů – html tagy <h1> - <h6>
    • čitelnost – nastavení pomocí css vlastnosti font-size nebo pomocí zoomu prohlížeče
      • pojmenované výšky – „xx-small“, „x-small“, „small“, „medium“, „large“, „x-large“ a „xx-large“
      • relativní jednotky – obrazový bod – pixel – px, procento písma rodičovského prvku – %, násobek velikosti znaku M – em
  • Výška řádku – důležitá vlastnost pro zajištění čitelnosti – line-height – px, %, em
  • Kontrast – určuje čitelnost závislou na rozdílu barvy písma a pozadí – color, background-color

Barvy

  • Barevné modely
    • Model RGB – aditivní, pro monitor
      • složky – red, green, blue
      • stupně – 0 – 255
      0,0,0 – černá, 100,100,100 – šedá, 255,255,255 – bílá
    • Model CMYK – substraktivní, pro tisk
      • složky – cyan, magenta, yellow, black
      • stupně – 0 – 100
      0,0,0 – bílá, 0,0,0,100 – černá, 10,10,10 – šedá
  • Kódování barev v HTML
    • pojmenované barvy – redsilvermagentanavy
    • procentní kód RGB – rgb(20%, 50%, 80%)
    • desítkový kód RGB – rgb(80, 200, 0)
    • desítkový kód RGBA – rgba(255, 0, 0, 0.3) 
    • hexadecimální kód RGB – #0033ff
 
1
2
body {background-color: yellow; colorblue}
h2 {colorgreenborderred}
  • Barevná schemata
    • kombinace barev použitých na daném webu
      • monochromatické – černá, bílá + 1 barevný odstín
      • analogické barvy – použití podobných barev s jednou dominantní
      • komplementární barvy – použití dvou kontrastních barevných odstínů
    • možnost použití on-line generátoru
    • volba barevného ladění podle tématu webu
      • zelená – peníze, příroda; červená – láska; modrá a žlutá – cestování…
      • použití firemních barev pro firemní prezentace

Grafika

 – pozor na velikost (stačí cca 800 x 600 px = cca 100 kB) – vhodná dávková konverze např. v XnView
  • Typy grafiky
    • rastrová – JPG, PNG, GIF, ICO
      • fotografie, ikony, tlačítka, vzorky, barevné přechody
    • vektorové fonty – TTF, EOT
    • vektorová grafika – SVG, SWF
      • písma, kliparty, kresby, loga, schémata
  • Obrázky
    • využití tagu IMG s atributy – zdrojový soubor, rozměry, rámeček, popis, zarovnání (obtékání) v textu
      1
      2
      3
      <img src="foto.jpg" width="60" height="60" border="1" alt="Obrázek" align="left">
      <!-- náhled s odkazem na obrázek -->
      <a href="obrazek.jpg"><img src="obrazek.jpg" width="80" height="50" alt="popis obrázku"></a>
  • Pozadí strany
    • použití CSS pravidla BACKGROUND pro stylování prvku BODY
    • nastavení barvy pozadí, obrázku, pozice, opakování a ukotvení
      1
      2
      3
      4
      body {background: yellow url("pozadi.jpg"bottom repeat-x fixed}
      /* použití souhrnné vlastnosti background je stejné jako použití samostatných vlastností */
      body {background-color: yellow; background-imageurl("pozadi.jpg"); background-positionbottom;
            background-repeatrepeat-xbackground-attachmentfixed;}
  • Grafické efekty
    • Průhlednost – CSS3 – vlastnost RGBA (red, green, blue, opacity)
    • Zaoblení – CSS3 – vlastnost – BORDER-RADIUS nebo BORDER-RADIUS-TOPLEFT
    • Stínování – CSS3 – vlastnost TEXTSHADOWBOXSHADOW (délka-x, délka-y, rozpití, barva)
    • Animace – CSS 3 – vlastnost ANIMATION, animované obrázky – GIF, animace s využitím technologie flash – SWF
    • http://programujte.com/clanek/2010070801-css3-drzte-krok-s-dobou-nove-vlastnosti/

Programování

  • Možnosti
    • soubory webu mohou obsahovat programové skripty
    • skripty jsou krátké programy, které reagují na vnější události
      • načtení souboru, vložení hodnoty do formuláře, kliknutí na obrázek …
    • příkazy skriptu jsou postupně interpretovány a dochází ke zpracování zadaných dat
      • generování se HTML kódu, výpočet hodnot, odeslání mailu, zobrazení obrázků, vysunutí menu …
  • Principy
Programování na straně klienta
Zvětšit
Programování na straně serveru
Zvětšit
  • Programovací jazyky
    • JavaSript – klientský prog. jazyk, interpret je součástí prohlížeče, syntaxe z jazyka C, objektový
    • PHP – serverový prog. jazyk, interpret běží na serveru, umožňuje ukládání dat v databázi

Vývojové nástroje

  • Servery
    • Apache – webový server pro různé operační systémy
    • IIS – Internet Information Services – webový server pro Windows (IIS 7 součást WIN 7 PRO)
  • Běhová prostředí
    • Prohlížeč
    • PHP Preprocesor
    • ASP.NET
  • Vývojové systémy
    • NetBeans
    • Aptana Studio
    • Visual WebDeveloper

Správa dat

  • Principy
    • spolupráce databázového serveru s webovým serverem
    • využití relačních databází s uložením dat formou tabulek
    • využití příkazů SQL – Structured Query Language (strukturovaný dotazovací jazyk)
HTML
  • Prostředky
  • Databáze MySQL