WWW stránky.

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ř.
Š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.
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:
Tvorba www stránek Obrázky, animace a transparentnost, grafická menu a klikací oblasti obrázku (1.část) Ing. Miroslav Vachůn, Ph.D.
<. 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 www stránek VLOŽENÍ OBRÁZKŮ ICT 4.ročník. Vložení obrázku OBRÁZEK NA WEBOVÝCH STRÁNKÁCH Binární data – ukládáme do samostatných složek (IMAGE,
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
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.
Třídy, generické třídy, pseudotřídy
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.
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) 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í.
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.
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.
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 styly Kaskádové styly (CSS – Cascading Style Sheets) jsou prostředkem, který zajišťuje jednotný vzhled publikovaných stránek. Technologii CSS podporují.
David Klíma- 1 - Obrázky na webu Než dám obrázek na web co musím udělat? Získat ho Upravit Zmenšit na publikovatelnou formu POZOR! někdy se obrázek natahuje.
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:
XHTML – obrázky 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.
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.
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.
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í.
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:
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.
VY_32_INOVACE_4.3.IVT1.07/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 formátování.
Tvorba www stránek.
Kristýna Krejčí, Aneta Smyčková, Tereza Kryzanová, Zuzana Purová 9.B.
Tvorba www stránok.
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.
Základy tvorby www stránky v HTML kódu. © Mgr. Petr Loskot, leden Časopis PPK Časopis PC World.
Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Autor: Bc. Pavel Šiktanc Internetové stránky III. 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.
Co je to webová prezentace?
Tvorba WEBOVÝCH stránek – obrázky
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.
Tvorba webových stránek
Typy tagů stylové (formátovací) - tučné , šikmé , styl , písmo  ... strukturální- odstavce , nadpisy , seznamy , tabulky  ...
Transkript prezentace:

WWW stránky

Trocha teorie Www stránky bývají nejčastěji psány v programovacím jazyku html Všechny potřebné informace pro zobrazení webové stránky se nacházejí ve zdrojovém kódu Webová stránka je psána pomocí tagů Webové stránky se dají tvořit v html editorech Nebo také lze psát čistý zdrojový kód např. v poznámkovém bloku

Vytvoření www stránky Vytvoříme si Nový textový dokument (pravé tlačítko myši/Nový/Textový dokument) Klikneme na Soubor/Uložit jako Název souboru: index.htm Potom si otevřeme soubor index.htm Klikneme na Zobrazit/zdrojový kód (zkratka alt+z+z) Otevře se textový dokument a v něm můžete upravovat kód

Základní struktura Začátek a konec dokumentu Hlavička, nezobrazuje se, jsou v ní důležité informace Název dokumentu Tělo dokumentu. Co je zde napsáno bude se zobrazovat

Tagy Tagy jsou uzavřeny v ostrých závorkách <> Tagy můžeme rozdělit na párové nebo nepárové Párové tagy jsme viděli již v základním rozdělení webové stránky např. <html></html> Tagy mohou mít své parametry. zadání: nazevparametru=”hodnota“

Metainformace HTML značka <META> Řídí způsob, jakým je stránka v síti WWW indexována. Uvádí se v hlavičce HTML dokumentu (mezi značkami <HEAD> a </HEAD>). Nejsou-li dostupné žádné další informace, budou indexována všechna slova vašeho dokumentu (s výjimkou poznámek) a několik prvních slov dokumentu bude použito jako krátká ukázka ve vráceném seznamu odpovědí na příslušný dotaz.

Meta tagy Nejdůležitější pro indexování jsou "description" a "keywords". "Description" vrací námi definovaný popis stránky na místě výpisu vyhledávací služby. "Keywords" poskytuje klíčová slova (jejich možné kombinace) pro vyhledávací službu k jejich přidružení s příslušným URL..

Barvy Lze zadávat několika způsoby. 1. název barvy např. <font color=“red”> 2. pomocí šestnáctkového zápisu modelu RGB (z ang. red (červená), green(zelená), blue(modrá) ) <font color=“#000000”> každá barvy je zastoupena dvěma čísly, ty mohou nabývat hodnoty 00-ff

Obrázky - grafika Pro vkládání obrázku existuje tag <img> Parametry: src - umístění souboru s obrázkem, relativní nebo absolutní adresa souboru (URL) alt - alternativní popis (text) width a height – šířka a výška obrázku v procentuální hodnotě nebo v pixelech align - left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom

Formátování textu <b>tučný text <i>kurzíva <u>podtržení <font> formátuje text pomocí parametrů v závorce možné hodnoty Parametry: size-velikost textu (1-7) Face-typ fontu písma (např. Arial) Color-barva (viz v kapitole o barvách)

Příklad

Parametry tagu body bgcolor barva pozadí background obrázek na pozadí bgproperties (fixed, scroll) fixed-pozadí se neposouvá společně s textem, sroll-posouvá se s textem link barva nenavštívených odkazů vlink barva navšvtívených odkazů alink barva odkazů na které je kliknuto

Bloky textu a nadpisy <p> odstavec <br> řádkový zlom <center> vycentrování <h1> nadpis úrovně 1 (podobně <h2>-<h6>) <hr> čára parametry tagu <p>: align-zarovnání (left, center, right, justify (do bloku) )

Seznamy <li> položka seznamu <ol> číslovaný seznam <ul> odrážkový seznam Ukázka použití <ol> <li>první položka</li> <li>druhá položka</li> </ol> parametry <li> type, square (čtvereček), circle (kolečko), disc (puntík), 1 (normální číslování), A (velká písmenka), a (malá písmenka) I (velké řím. číslice), i (malé řím. číslice)

Příklad

Odkazy Po kliknutí na odkaz se nám zobrazí jiná webová stránka používá se tag <a> parametry <a>: href: cíl odkazu (název souboru, adresa www stránky, či název záložky (slouží k odkazu na jiné místo v dokumentu) ) name: název záložky příklad použití záložky <a name=“#1”> <a href=“#1”>nahoru</a> Po kliknutí na „nahoru“ se naroluje stránka na místo, kam je vložená záložka

Tabulky – základ života Tag table tvoří tabulku tr a td – řádek a buňka tabulky align - obtékání tabulky textem Cellpadding a cellspacing vnitřní a vnější okraj buněk (pixely) Border - šířka rámečku buněk (pixely) Width - minimální šířka tabulky Height - minimální výška Background - obrázek na pozadí (URL obrázku) Bordercolor - barva rámečku BgColor – barva pozadí tabulky

KONEC PREZENTACE Vypracovali: Tomáš Daniel Jan Králík