Tvorba www stránek Ing. Miroslav Vachůn, Ph.D.. Struktura dokumentu TagVýznamPárovýVýskyt html začátek HTML dokumentuanona začátku souboru head hlavička.

Slides:



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

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.
Š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.
Tvorba webových stránek
WWW stránky.
Referát č. 22 Tvorba webových stránek (Struktura webu, struktura HTML dokumentu, vytvoření webové stránky exportem z aplikačního programu, provázání.
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.
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:
14SIAP – SÍTĚ A PROTOKOLY Hodina 3..
Mgr. Vlastislav Kučera přednáška č. 2.  Struktura stránky  hlavička  meta tagy  titulek stránky  připojení stylů,...  CSS.
<. DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4
Základy HTML.
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
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
1 Provázání stránek Vytvořte dvě www stránky, jednu růžovou a druhou modrou – viz. zdrojové kódy RŮŽOVÁ STRÁNKA Růžová stránka Odkaz na modrou stránku.
HTML. Barvy Co je to HTML soubor? HTML je zkratka Hyper Text Markup Language V HTML souboru je textový soubor proložen malými značkovacími.
Úvod do html kódu. Roman Hendrich
Kaskádové styly (Cascading Style Sheets, CSS) slouží k formátování HTML prvků. Pomocí kaskádových stylů lze nastavit font, řez písma, velikost písma, zarovnání,
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
Formátování dokumentu O. Kánský 2011 Vyberte svůj textový editor Writer OpenOffice.org Word XP Microsoft Office Word Microsoft Office.
XHTML Tvorba webových stránek. Vývoj značkovacích jazyků HTML – HyperText Markup Language  Značkovací jazyk pro vytváření www stránek. Pomocí značek.
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.
Třídy, generické třídy, pseudotřídy
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)
ZÁKLADY HTML – ODKAZY, SEZNAMY. - vodorovná čára atributy:  width – délka čáry – pixely nebo %  size - šířka ve smyslu tloušťky  align - zarovnání.
Kaskádové styly Cascading Style Sheets. Využití CSS jde o jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML umožňuje.
Čí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.
VY_32_INOVACE_4.3.IVT1.12/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.
Pravidla a doporučení pro názvy souborů
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:
HTML, XHTML a CSS Základy jazyků značek.
CSS – style Mgr. Lenka Švancarová. CSS – značka style (textstyle.html)
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.
Čí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 styly Kaskádové styly (CSS – Cascading Style Sheets) jsou prostředkem, který zajišťuje jednotný vzhled publikovaných stránek. Technologii CSS podporují.
CSS Cascading Style Sheets Kaskádové styly
XHTML – odkazy 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.
Tvorba www stránek Seznam, tabulky, grafika a barvy (1.část) Ing. Miroslav Vachůn, Ph.D.
Formátováním odstavce se rozumí změna jeho vlastností jako velikost, barva, typ, podtržení atd. Pokud chceme změnit některou z vlastností již napsaného.
VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ CSS.
Párová a nepárová značka, atributy a jejich hodnoty
HTML – TABULKY. - uzavírá celou strukturu tabulky atributy tabulky:  align - obtékání tabulky ostatním textem – right, left, center  cellpadding – vnitřní.
Základy HTML 1 Odkazy. 2 a aOdkaz (z angl.anchor). Obsah odkazu Vše, co je mezi značkami a bude sloužit jako odkaz (tzn. bude klikatelné). Např. Hlavní.
Odkazy. Href Nejdůležitější atribut, cíl odkazu. Zjednodušeně pojato tato hodnota říká, jaká stránka se objeví po kliknutí. Href se zapisuje jako URL.
Tvorba www stránek CSS (Úvod do kaskádových stylů (Úvod do kaskádových stylů) Ing. Miroslav Vachůn, Ph.D.
Kaskádové styly Cascading Style Sheets. Využití CSS jde o jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML umožňuje.
Tvorba www stránek.
Kristýna Krejčí, Aneta Smyčková, Tereza Kryzanová, Zuzana Purová 9.B.
Jak si vytvořit stránku (X)HTML, CSS, PHP. Úvod Internetová stránka je soubor s příponou htm nebo html. Je to skoro obyčejný textový soubor obohacený.
HTML pokračování. Co obsahuje každý html dokument? stránka stránka ahoj světe HTML.
Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Autor: Bc. Pavel Šiktanc Internetové stránky II. Co se všechno.
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.
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.
WORDPAD Textový dokument.
Co je to webová prezentace?
NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov
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.
Html.
Transkript prezentace:

Tvorba www stránek Ing. Miroslav Vachůn, Ph.D.

Struktura dokumentu TagVýznamPárovýVýskyt html začátek HTML dokumentuanona začátku souboru head hlavička stránkyanona začátku souboru body tělo stránky + definice pozadíanoza poznámkaanokdekoliv !doctype specifikace DTDneúplně na začátku souboru Má první stránka Moje první html stránka. A nějaké další texty.

Hlavička TagVýznamPárovýVýskyt title titulek stránkyano meta informace o dokumentune meta Informace o dokumentu. Nepárový tag vyskytující se v hlavičce. Slouží třeba k informaci o klíčových slovech nebo použitém kódování. Běžná internetová stránka má v hlavičce kolem čtyř různých tagů. V praxi je čtou a používají pouze programy (vyhledávače, parsery a editory).

Tag, atribut name name=Významcontent= keywords v minulosti klíčová slova pro vyhledávací stroje, dnes bezcené slovo, slovo, slovo description popis stránky, většinou pro vyhledávací stroje stručný popis obsahu stránky author informace o autorovi, většinou jménocokoliv generator identifikace programu, který stránku vytvořil řetězec vkládaný programem robots zakázání robotů indexovat nebo sledovat odkazy [index | noindex ], [ follow | nofolow] a další milión hodnot, které si přidává nějaký software nebo se hodí pro cosi záhadného

Atribut tagu VýznamHodnoty bgcolorbarva pozadíbarva backgroundobrázek pozatí URL obrázku textbarva popředí (textu)barva linkbarva nenavštívených odkazůbarva vlinkbarva navštívených odkazůbarva alinkbarva klikaných odkazů (a pod tabulátorem)barva bgpropertiesposouvání obrázkového pozadí scroll | fixed scrollrolování těla (raději neměňte) yes | no leftmarginlevý okrajpixely topmarginhorní okrajpixely rightmarginpravý okraj (ne v NN)pixely bottommarginspodní okraj (ne v NN)pixely marginwidthlevý a pravý (pouze NN)pixely marginheighthorní a spodní (pouze NN)pixely Atributy tagu Atributy tagu

Tagy fyzického formátování textu TagVýznamPárový b tučné písmoano i kurzívaano u podtržení textuano sub dolní indexano sup horní indexano small zmenšení textuano big zvětšení písmaano s přeškrtnutý textano strike přeškrtnutý textano font písmoano basefont základní fontne blink blikání písmaano nobr nezalamovat obsahano

Odkazy odkaz, hyperlink, záložka odkaz, hyperlink, záložka AtributVýznamHodnota hrefcíl odkazuURL namejméno záložkylibovolné jméno targetcílový rámjméno rámu reldruh odkazu několik vyjmenovaných hodnot pingměření proklikůsledovací adresa

Odkazy href href Příklad: Portál Seznam Příklad: Portál Seznam name name záložka záložka Příklad: Příklad: Text příkladu Po kliknutí na tento odkaz odroluje stránka na záložku příkladu. Text příkladu Po kliknutí na tento odkaz odroluje stránka na záložku příkladu.

Odkazy target target Cílové okno, iframe, nebo rám, ve kterém se obsah zobrazí Cílové okno, iframe, nebo rám, ve kterém se obsah zobrazí Jména virtuálních rámů Jména virtuálních rámů target=Kde se to otevře _blanknové okno nebo nový tab _topnejvyšší okno hierarchie rámů _parentnadřazený rám _selftentýž rám

Bloky TagVýznamPárový podstavecnepovinně brřádkový zlomne divoddílano centervycentrováníano h1nadpis 1. úrovněano h2nadpis 2 úrovněano h3nadpis 3. úrovněano h4nadpis 4. úrovněano h5nadpis 5. úrovněano h6nadpis 6. úrovněano blockquotecitace, odsazeníano addressadresaano prepředformátovaný textano hrvodorovná čárane

<p> Odstavec Odstavec align=význampoznámky leftzarovnání doleva výchozí hodnota, nemusí se nastavovat rightzarovnání doprava pravý okraj textu bude zarovnaný centerzarovnání na střed justifyzarovnání do bloku budou zarovnány oba okraje textu, poslední řádek bude zarovnán doleva velmi staré prohlížeče justify nepodporují, často vznikají nehezky velké mezislovní mezery

Nadpisy – – Tag Stupeň písma Výchozí velikost Využití h1624pxHlavní nadpis stránky h px Podnadpisy, názvy kapitol h3416pxMezinadpisy h4313pxDůležitější odstavce h5210px Žádné rozumné použití h619px Nejde ani pořádně přečíst