Co je to webová prezentace?

Slides:



Advertisements
Podobné prezentace
Základy HTML – vkládání objektů
Advertisements

Úvod do tvorby internetových stránek v jazyce HTML Dostupné z Metodického portálu ISSN: , financovaného z ESF a státního rozpočtu.
Jazyk HTML. Zdrojový kód  Elementy obsah obsah př. důležité př. důležité př. př.
Tagy neboli příkazy Olga Kasafírková Základy HTML.
Styly, záhlaví a zápatí, oddíly
Štěpán Šípal Gymnázium Čakovice. Dnešní témata  Vznik XHTML a předchůdci  Základní prvky XHTML dokumentu  Tagy a atributy  Elementy a jejich druhy.
WWW stránky.
Výpočetní technika 2008/09.
ZÁKLADY HTML Číslo DUM: VY_32_INOVACE_04_11 Autor: Mgr. Ivana Matyášková Datum vytvoření: duben 2013 Ročník: tercie Vzdělávací obor: informační technologie.
Technologie pro publikování na webu 1 Ing. Jiří Štěpánek.
TNPW1 Technologie pro publikování na webu Přednáška č. 4 seznamy seznamy tabulky tabulky jejich sémantika jejich sémantika Ing. Martin Adámek Katedra informačních.
<. DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4
Základy HTML.
Mgr. Vlastislav Kučera přednáška č. 5.  Seznamy  CSS – vlastnosti seznamů ◦ list-style-type, list-style-image, list-style-position  Tabulky  CSS –
Základní škola a mateřská škola Bzenec Číslo projektu: CZ.1.07/1.4.00/ Číslo a název šablony klíčové aktivity: III/2: využívání ICT – inovace Vypracoval/a:
Tvorba stránek  komu jsou stránky určeny  grafická úprava stránek  obsah  motivy vzhledu stránky
HyperText Markup Language
Nové modulové výukové a inovativní programy - zvýšení kvality ve vzdělávání Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem.
Obchodní akademie a Střední odborná škola, gen. F. Fajtla, Louny, p.o. Osvoboditelů 380, Louny Číslo projektu CZ.1.07/1.5.00/ Číslo sady29Číslo DUM14.
Programování HTML stránek
Základy html pro úplné začátečníky.
Úvod do html kódu. Roman Hendrich
Tvorba www stránek SYNTAXE ICT 4.ročník. Obsah TAGY TAGY ATRIBUTY ATRIBUTY KŘÍŽENÍ TAGŮ KŘÍŽENÍ TAGŮ VELIKOST PÍSMEN VELIKOST PÍSMEN MEZERY VE ZDROJOVÉM.
TAGY A STRUKTURA WEBOVÉ STRÁNKY. web – skupina webových stránek a dalších souborů (styly, obrázky, …), které na sebe navzájem odkazují jazyky pro psaní.
TVORBA WEBOVÝCH STRÁNEK
Tematická oblast: Aplikační software pro práci s informacemi II.
Tvorba webových stránek II. Odkazy, obrázky, seznamy.
Formátování textu. Odstavce  tvoříme párovou značkou  text bude od ostatního textu oddělen Konec řádky  nepárová značka způsobuje ukončení řádku a.
Jazyk HTML.
Veronika Hladíková. V dnešní době se dají webové stránky zhotovit mnoha způsoby, ale zdaleka ne všechny jsou ty správné. V následující prezentaci se Vám.
Odkazy Pomocí odkazu se lze pohybovat mezi stránkami. Cílem může být další stránka nebo identifikátor na aktuální stránce. Pomocí odkazu se lze pohybovat.
VY_32_INOVACE_4.3.IVT1.17/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Tvorba webových.
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)
HTML (XHTML) 2. 2 HYPERTEXTOVÉ ODKAZY Odkaz může ukazovat na různá místa v internetu, na další Vaše internetové stránky nebo obrázky či jiné dokumenty.
ZÁKLADY HTML – ODKAZY, SEZNAMY. - vodorovná čára atributy:  width – délka čáry – pixely nebo %  size - šířka ve smyslu tloušťky  align - zarovnání.
XHTML – tabulky Mgr. Lenka Švancarová Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Lenka Švancarová. Dostupné z Metodického portálu.
Číslo projektuCZ.1.07/1.5.00/ Číslo materiáluVY_32_INOVACE_258 Název školyGymnázium, Tachov, Pionýrská 1370 Autor Ing. Roman Bartoš Předmět Informatika.
HTML Text, seznamy, tabulky. Formátování textu Tučné... Kurzíva … Velké … Malé … Dolní index … Horní index … Přeškrtnuté … Podtržené … MOŽNO KOMBINOVAT.
TNPW1 Cvičení
Číslo projektuCZ.1.07/1.5.00/ Číslo materiáluVY_32_INOVACE_259 Název školyGymnázium, Tachov, Pionýrská 1370 Autor Ing. Roman Bartoš Předmět Informatika.
CSS Cascading Style Sheets Kaskádové styly
Základní škola a mateřská škola Bzenec Číslo projektu: CZ.1.07/1.4.00/ Číslo a název šablony klíčové aktivity: III/2: využívání ICT – inovace Vypracoval/a:
Obchodní akademie a Střední odborná škola, gen. F. Fajtla, Louny, p.o. Osvoboditelů 380, Louny Číslo projektuCZ.1.07/1.5.00/ Číslo sady29Číslo DUM16.
Tvorba webu Jazyk HTML, úvod
Tvorba www stránek Seznam, tabulky, grafika a barvy (1.část) Ing. Miroslav Vachůn, Ph.D.
XHTML – formátování textu, vodorovná čára Mgr. Lenka Švancarová.
Obrázky v HTML dokumentech Druhy a použití. Obrázky + Zvyšují atraktivitu stránek. + Zvyšují vypovídací schopnost stránek. - Zvyšují dobu načítání stránky.
CO NÁS ČEKÁ ve cvičení 5 Oč. - KIT PEF CZU 1. O DKAZY Chceme-li, aby čtenář naší html stránky někam odklepnul..... Oč. - KIT PEF CZU.
HTML JAZYK Výuka HTML jazyka pro střední školy. 1. Jazyk HTML Standardní značkovací jazyk používaný pro dokumenty na webu. Jazyk HTML pomocí tágů (značek)
Číslo šablony: III/2 VY_32_INOVACE_P4_3.11 Tematická oblast: Aplikační software pro práci s informacemi II. HTML - odkazy, obrázky Typ: DUM - kombinovaný.
Párová a nepárová značka, atributy a jejich hodnoty
VY_32_INOVACE_4.3.IVT1.13/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Tvorba webových.
HTML – TABULKY. - uzavírá celou strukturu tabulky atributy tabulky:  align - obtékání tabulky ostatním textem – right, left, center  cellpadding – vnitřní.
Tvorba www stránok.
HTML pokračování. Co obsahuje každý html dokument? stránka stránka ahoj světe HTML.
Základy tvorby www stránky v HTML kódu. © Mgr. Petr Loskot, leden Časopis PPK Časopis PC World.
Krátký úvodní kurz HTML Jenyk Obecně 1 - html  V HTML jazyce nezáleží na rozložení a délce řádku, extrémem je napsat celý program v jednom řádku.
WWW a HTML Základní pojmy Ivo Peterka.
NÁZEV ŠKOLY: Masarykova základní škola a mateřská škola Melč, okres Opava, příspěvková organizace ČÍSLO PROJEKTU: CZ.1.07/1.4.00/ AUTOR: Mgr. Vladimír.
Základy tvorby www stránky v HTML kódu.
Webové prezentace II.
WWW a HTML Základní pojmy Ivo Peterka.
Inf Tvorba WWW – tabulky a seznamy
Tvorba WEBOVÝCH stránek – obrázky
Formátování textu Logické členění textu
NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov
NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov
Jazyk HTML (1) Jazyk HTML (Hypertext Markup Language) se používá pro vytváření Web Pages (www stránek) HTML používá text a sadu formátovacích značek, označovaných.
Typy tagů stylové (formátovací) - tučné , šikmé , styl , písmo  ... strukturální- odstavce , nadpisy , seznamy , tabulky  ...
Html.
Transkript prezentace:

Co je to webová prezentace? zjednodušeně souhrn informací (textových, zvukových, obrazových.... prezentovaný v počítačové síti (většinou internetu) .....může být i intranet

správná syntaxe html tagy (párové / nepárové): <tag> libovolný obsah </tag> <h1>nadpis první úrovně</h1> <tag> ( tohle<br>tohle ) atributy <tag atribut="hodnota atributu"> <hr size="5" width="250">

správná struktura html <html> <head>        <title>titulek html dokumentu</title> </head> <body> tělo stránky (vše co se na stránce zobrazí) </body> </html>

Blokové elementy v HTML P – odstavec <p align="center">vycentrovaný odstavec</p> Br - zalomení řádku text text text<br>text na dalším řádku Div - oddíl Pre - přeformátovaný text

address <address> Franta Knápek<br> Pardubice<br> Radlice 2<br> </address> h1-h6 <h1>nadpis první úrovně</h1> <h2>nadpis druhé úrovně</h2> <h3>nadpis třetí úrovně</h3> <h4>nadpis čtvrté úrovně</h4> <h5>nadpis páté úrovně</h5> <h6>nadpis šesté úrovně</h6>

Hr - vodorovná čára <hr> <hr size="5" width="250"> <hr size="10" width="150" noshade> <hr size="10" width="150" noshade color="red"> <hr size="10" width="150" noshade color="red" align="right"> <hr size="10" width="150" noshade color="red" align="left">

Fyzické formátování v HTML I – kurzíva <i>písmo zobrazené v kurzívě</i> výsledek: písmo zobrazené v kurzívě B - tučné písmo <b>tučné písmo</b> výsledek: tučné písmo U - podtržené písmo <u>podtržené písmo</u> výsledek: podtržené písmo

Sup - horní index Sub - dolní index Big - větší písmo m<sup>2</sup> výsledek: m2 Sub - dolní index H<sub>2</sub>O výsledek: H2O Big - větší písmo <big>větší písmo</big> výsledek: větší písmo Small - menší písmo <small>menší písmo</small> výsledek: menší písmo

<font size="5" color="red" > text jakýkoliv</font> S - přeškrtnuté písmo <s>přeškrtnuté písmo</s> výsledek: přeškrtnuté písmo Blink – blikání <blink>blikající písmo</blink> výsledek: blikající písmo Font – písmo <font size="5" color="red" > text jakýkoliv</font> příklad

HTML kódy na pozadí atribut bgcolor <HTML> <HEAD> <TITLE>HTML kódy na pozadí - barvy</TITLE> </HEAD> <BODY bgcolor="green"> <p>Tato stránka bude mít zelené pozadí...</p> </BODY> </HTML>

Pomocí hexa kódu <HTML> <HEAD> <TITLE>HTML kódy na pozadí - barvy</TITLE> </HEAD> <BODY bgcolor="#003366"> <p>Tato stránka bude mít takovéhle #003366 pozadí...</p> </BODY> </HTML>

Obrázek na pozadí <HTML> <HEAD> <TITLE>HTML kódy na pozadí - obrázek</TITLE> </HEAD> <BODY background="obrazek.gif"> <p>Tato stránka bude mít na pozadí obrázek... </BODY> </HTML>

Seznam li /položka seznamu/ nepovinně párový ul /odrážkový (nečíslovaný) seznam/ ol /číslovaný seznam/

nečíslovaný seznam atribut Type Atribut type se používá k nastavení druhu odrážky na výběr jsou tři puntík,kolečko a čtverec Hodnoty jsou disc(puntík), circle (kolečko), square(obdélník). Type se může zapisovat v ul i li.

<ul type="circle"> <li>první položka <li>druhá položka <li>třetí položka </ul>

Číselný seznam Type - atribut U číselných seznamů se atribut type používá k nastavení druhu číslic hodnoty jsou: 1(normální číslování), A(velká písmena), a(malá písmena), I(římské číslice), i(malé římské číslice).Type se může zapisovat v ol i li. Start - atribut Atribut start se používá k změně počátečního čísla nebo písmena.

Odkazy A - odkaz A je párový tag obsahuje atributy bez kterých by nefungoval. Jako text odkazu se zobrazí to co je mezi tagy <a> a </a> můžete zadat text nebo i obrázek který bude sloužit jako odkaz..

Atribut Href (cesta) Tento atribut se používá k zadání URL( co je to url = adresa ) jeho hodnotou je cesta k souboru může se použít absolutní nebo relativní. jako absolutní se uvede např. http://www.seznam.cz Na začátku musí být to http:// jinak by to fungovalo jako relativní v relativní adrese se může napsat pouze jméno souboru např. stranka.html pokud je stránka v dalším pod adresáři použije se ve tvaru adresar/stranka.html

atribut target Atribut target se používá k nastavení okna v kterém se bude stránka načítat se využije hlavně s rámy které dokážou okno stránky rozdělit na několik částí. Např: _blank (nové okno) _self (totéž okno)

protokol mailto Pro odkaz na e-mail musíte zadat jiný protokol pro odkaz se použije protokol mailto: existují další (gother, telnet, file, ftp).

Atribut NAME Neboli záložka Při odkazování na záložku se před jméno záložky doplní znak #. <a name="nadpis">označený text nadpisu</a> <a href="#nadpis">odkaz na nadpis</a>

Vložení obrázku Img - obrázek Obrázky se vkládají na stránku nepárovým tagem img možné grafické formáty jsou gif, jpeg, png. Pomocí tagu img také můžete na stránky vložit video ale musíte zaměnit atribut src za dynsrc.

Atribut src Src - cesta k souboru U obrázků je src nejdůležitější atribut, jako jeho hodna se uvádí cesta k souboru může se použít relativní i absolutní. <img src="obrazek.gif">

Atribut alt Alt - popis obrázku Atribut alt slouží jako alternativní text zobrazuje se pokud se nezobrazí obrázky nebo po najetí na obrázek ve žluté bublině, jako hodnota se používá popis obrázku. <img src="obrazek.gif" alt="popis obrázku">

Width a height - šířka a výška atribut šířky a výšky, udává se v pixelech

Tabulky Na internetových stránkách se tabulky používají ve dvou případech: 1) Jestliže je potřeba udělat klasickou tabulku. 2) Jako pomůcka pro úpravu stránek, když je něco potřeba někam umístit (např. sloupcová sazba).

Nejjednodušší tabulka <table > <tr> <td>Obsah buňky</td> <td>Další buňka</td> </tr> <tr> <td>levá spodní</td>    <td>pravá spodní</td> </tr> </table>

Co znamenají jednotlivé tagy: <table> Párový tag, který začíná tabulku. <tr> Párový tag, který začíná a končí řádek tabulky. (TR znamená table row, čili řádek). <td> Tag buňky tabulky.

Tag pro hlavičkové pole <th> <th> se dá použít namísto <td>, ale znamená to hlavičkové pole. Obsah bývá tučný a zarovnaný na střed. Používání této značky se doporučuje kvůli automatickému zpracování textu

Atributy v tabulkách border atribut tagu <table>, který nastavuje šířku vnějšího rámečku kolem tabulky (v obrazovkových bodech); kdyby bylo border="0", nevykreslí se ani vnitřní mřížka cellpadding vnitřní okraj buněk (v pixelech), čili vzdálenost textu od rámečku. Taktéž atribut tagu <table> cellspacing vnější okraj buněk (vně rámečku)

<!-- poznámka --> Všechno, co je v HTML souboru obaleno značkami <!-- a -->, je považováno za poznámku a nezobrazuje se. <!-- je tedy začátek poznámky, --> její konec.