html-css
Vložte svůj text...
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
Tag Význam Párový
header záhlaví stránky ve smyslu viditelné hlavičky ano
footer patička stránky ano
main hlavní obsah stránky ano
article jeden článek, zejména pro situaci, kdy je na stránce článků víc ano
aside vedlejší obsah ano
section obsahová sekce, například kapitoly článku ano
nav navigace stránky ano
figure obalení obrázku nebo jiného obsahu s jeho souvisejícím obsahem ano
figcaption nadpis tagu figure ano 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ář -->
- Stylové
- 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>
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
- informace pro prohlížeč, vyhledávače a webový server
- Tělo <body> ... </body>
- Hypertextový odkaz
<a href="https://google.cz">Vyhledávač</a> - Obrázek
- <img src="logo.gif">
css soubor (css3)
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
- editory kódu - BlueFish, Doctor HTML editor, PsPad, HomeSite
- 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
- SEO - Search Engine Optimization - optimalizace kódu pro vyhledávače
- soubory map stránek webu - website.xml
- Doporučené zásady pro tvorbu www stránek:
- názvy všech souborů a složek malými písmeny bez diakritiky a mezer
- všechny soubory www stránek (*.html, *.css...) ukládám do jedné složky
- 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)
- všechny ostatní soubory (např. *.doc, *.xls, *.ppt, *.avi...) ukládám do jiné podsložky této složky např. ostatni
- hlavní soubor stránek pojmenuji index.html
- všechny tagy píši malými písmeny
- při tvorbě nového souboru nejdřív uložím soubor, pak vkládám obrázky a tvořím odkazy (kontroluji relativní cestu)
Barvy
- Barevné modely
- Model RGB - aditivní, pro monitor
- složky - red, green, blue
- stupně - 0 - 255
- Model CMYK - substraktivní, pro tisk
- složky - cyan, magenta, yellow, black
- stupně - 0 - 100
- Model RGB - aditivní, pro monitor
- Kódování barev v HTML
- pojmenované barvy - red, silver, magenta, navy...
- 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
body {background-color: yellow; color: blue}
h2 {color: green; border: red}
- 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
- kombinace barev použitých na daném webu
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
- rastrová - JPG, PNG, GIF, ICO
- Obrázky
- využití tagu IMG s atributy - zdrojový soubor, rozměry, rámeček, popis, zarovnání (obtékání) v textu
<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>
- využití tagu IMG s atributy - zdrojový soubor, rozměry, rámeček, popis, zarovnání (obtékání) v textu
- Pozadí strany
- použití CSS pravidla BACKGROUND pro stylování prvku BODY
- nastavení barvy pozadí, obrázku, pozice, opakování a ukotvení
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-image: url("pozadi.jpg"); background-position: bottom; background-repeat: repeat-x; background-attachment: fixed;}
- 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 TEXTSHADOW, BOXSHADOW (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
- https://programujte.com/clanek/2010070801-css3-drzte-krok-s-dobou-nove-vlastnosti/