Úvod do jazyka HTML (Hypertext Markup Language)

Podobné dokumenty
Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD

Tvorba webových stránek

Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou

22. Tvorba webových stránek

Čtvrtek 11. dubna. Základy HTML. Obecná syntaxe HTML. Struktura HTML

HTML Hypertext Markup Language

Tvorba webových stránek

Základy HTML. Obecná syntaxe HTML. Struktura HTML

Základy HTML. Autor: Palito

Základy HTML. Obecná syntaxe HTML. Struktura HTML

<html> - párový tag, uzavírá celý dokument <head> - párový, určuje hlavičku dokumentu <body> - párový, uzavírá tělo dokumentu Př. Základní struktura

Základy informatiky. 03 HTML, tvorba webových stránek. Kačmařík/Szturcová/Děrgel/Rapant

12. Základy HTML a formuláře v HTML

Tvorba WWW stránek. Mgr. Petr Jakubec. Katedra fyzikální chemie Univerzita Palackého v Olomouci Tř. 17. listopadu

Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka

13. Vytváření webových stránek

Výukový materiál KA č.4 Spolupráce se ZŠ

<link> - definuje vztah k jiným XHTML dokumentům, typicky

Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

Internet 02 - Tvorba statických www stránek za pomoci HTML tagů

HTML. HTML- HyperTextMarkUpLanguage (nadtextový značkový jazyk) TAGY

Tvorba fotogalerie v HTML str.1

Tvorba internetových stránek

9. Tagy tvorba www stránky pomocí tagů

Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami <!-- a -->, je považováno za poznámku a nezobrazuje se.

Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014

Základy informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML

Úvod do tvorby internetových stránek v jazyce HTML

tvoříme web HTML/CSS

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák

HTML. ICT_01., 02. konzultace; 2. ročník 1/6

Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_135_IVT_HTML_08_tvorba_www

CSS Kaskádové styly. formátování webových stránek

Jemný úvod do HTML. Co je HTML značka? Web nezná text formátovaný mezerami a konci řádku! Ale já potřebuji psát více mezer a určovat zalomení řádku!

HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy

Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1.

Přehled základních html tagů

Tvorba webu. Základní HTML tagy. Martin Urza

Výukový materiál vytvořen v rámci projektu EU peníze školám. "Inovace výuky" registrační číslo CZ.1.07/1.5.00/

Tvorba stránek v HTML ve Wordu

Vývoj Internetových Aplikací

WWW a HTML. Základní pojmy. Ivo Peterka

Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: str ánk y. Vytvořil: Petr Lerch.

Stránka se dá otevřít dvěma způsoby

Jazyk HTML SOŠ OTROKOVICE, TŘ. T. BATI 1266, OTROKOVICE Pomocný text pro výuku výpočetní techniky. PaedDr. Pavel Kovář

CSS Selektory tříd a ID, dědičnost, další vlastnosti. Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace

Dokument ve formátu webové stránky vytvořený pomocí XHTML a CSS

Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD

HTML - Úvod. Zpracoval: Petr Lasák

IE1 jazyk HTML a kaskádové styly

Tabulky. Přehled tagů z oblasti tabulek. Tag Význam Párový Výskyt. tr řádek tabulky nepovinně <table>, <tbody>, <thead>, <tfoot>

Inovace bakalářského studijního oboru Aplikovaná chemie

Základy CSS (3. přednáška)

MODERNÍ WEB SNADNO A RYCHLE

Mgr. Vlastislav Kučera Struktura stránky, hlavička,

IE1 jazyk HTML a kaskádové styly

KAPITOLA 3 - ZPRACOVÁNÍ TEXTU

v laboratořích CERN ve Švýcarsku byl zahájen projekt WWW (T. Barners-Lee přichází s projektem distribuovaného hypertextového systému)

Kaskádové styly základy grafiky

NSWI096 - INTERNET. Úvod do HTML

CSS styly. Cascading Style Sheets kaskádové styly

INTERNET A SÍTĚ. Role při tvorbě webových aplikací. Rozhodovací vrstvy při tvorbě webových aplikací. povrch kostra struktura obsah strategie

Digitální učební materiál

Jdeme tvořit webové stránky!

Internet 1 vývoj, html, css

Tvorba webových stránek

CSS Stylování stránek. Zpracoval: Petr Lasák

Co je HTML. 1. Párový tag má začátek a konec: 2. Nepárový tag nemá ukončovací značku:

Mgr. Stěpan Stěpanov, 2013

(X)HTML-TAGY. VOŠ a SŠT Česká Třebová

Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1

Internetové technologie, cvičení č. 5

CSS 1 Relativní pozicování Relativní pozicované bloky jsou pozicované vůči nornálnímu toku elementů dokumentu. (nejsou vyjmuty z normálního toku jako

Administrace webu Postup při práci

Základy programovacího jazyka HTML. Autor: Ing. Jan Nožička SOŠ a SOU Česká Lípa VY_32_INOVACE_1133_Základy programovacího jazyka HTML_PWP

Učebnice a metodika výuky HTML na základní škole

PŘÍRUČKA. Správa obsahu webové prezentace. Formátování textu

Tvorba webu. Úvod a základní principy. Martin Urza

Manuál k editoru TinyMCE

Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace. Šablona 5 VY 32 INOVACE

Kaskadové styly (CSS) VOŠG Hellichova Praha 2010 Jirka Jahoda

1 Úvod. 2 Tvorba internetových prezentací. 2.1 Nástroje pro tvorbu prezentace. Stránka 1

Barvy v počítači a HTML.

INTERSTENO 2013Ghent Mistrovstvísvta v profesionálním word processingu

Microsoft. Word. prostředí, základní editace textu. Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie

Inovace výuky prostřednictvím šablon pro SŠ

Buňka tabulky; tento tag doporučuju psát opět jako párový. Nyní již máme dostatek informací k tomu, abychom dokázali sestrojit jednoduchou tabulku.

Obrázky. Tag Význam Párový Výskyt. img obrázek ne. img video ne. map klikací mapa. area oblast v klikací mapě ne

Mgr. Vlastislav Kučera přednáška č. 2

Mgr. Vlastislav Kučera lekce č. 2

Název: VY_32_INOVACE_PG4120 Literatura, online zdroje informací, testy

Internetový portál Elektrotechnika 2. školení

Gymnázium Vysoké Mýto nám. Vaňorného 163, Vysoké Mýto

Název školy: SOŠ NET OFFICE Orlová, spol. s r.o. Vypracoval/a: Mgr. Alena Sovová

HTML - pokračování. Co už víme?

Webové stránky. 5. Kaskádové styly formátování textu. Datum vytvoření: str ánk y. Vytvořil: Petr Lerch.

WEBOVÉ STRÁNKY

WEBOVÉ STRÁNKY

Tvorba www v jazyku HTML

Transkript:

Úvod do jazyka HTML (Hypertext Markup Language) WWW zdroje: http://www.jakpsatweb.cz/ Jak psát web, návod na HTML stránky (Dušan Yuhů Janovský) http://www.kit.vslib.cz/~satrapa/www/kurs/ Kurs vytváření WWW stánek (Pavel Satrapa) Základní pojmy: Hypertext: Trojrozměrný text (nebo také text s odkazy). WWW: World Wide Web rozhraní pro práci s hypertextem. HTML: HypertText Markup Language jazyk pro vytváření hypertextu. Vlastnosti jazyka HTML: je tvořen příkazy, které se nazývají tagy (značky). Dva typy tagů: párové a nepárové Párové tagy: Dvojice tagů <TAG> a </TAG>, která se v HTML dokumentu zapisuje následovně: <TAG>obsah tagu</tag> <I>organická chemie</i> vypíše text "organická chemie" kursívou. <A href="http://www.chemi.muni.cz">katedra chemie</a> vytvoří hypertextový odkaz s textem "Katedra chemie", který ukazuje na adresu "http://www.chemi.muni.cz". Nepárové tagy: Nepárový tag nemá značku pro ukončení: <TAG> <BR> ukončí řádek. <HR> vytvoří horizontální čáru. 1

Struktura HTML dokumentu: <HTML> <HEAD> <TITLE> Nazev dokumentu </TITLE> </HEAD> <BODY> Tohle bude moje prvni WWW stranka. </BODY> </HTML> Formátování HTML dokumentu: Parametry tagu <BODY>: volba barvy pozadí, písma, odkazů, background bgcolor text link vlink alink obrázek na pozadí barva pozadí barva textu barva odkazu (před navštívením) barva odkazu (po navštívení) barva odkazu (při kliknutí na odkaz) Příklad: <BODY bgcolor= black text= #DDDDDD background= pozadi.gif > Tagy pro oddělení odstavců: <BR> konec řádku <HR> vodorovná čára 2

Tagy pro formátování textu: <I> kursíva </I> <B> tučné písmo </B> <TT> psací stroj </TT> <SUB> dolní index </SUB> <SUP> horní index </SUP> <PRE> ponechává text v původním tvaru </PRE> <H1> velllllké písmo </H1> <H6> malé písmo </H6> <CENTER>centrování textu </CENTER> <BLINK> blikající text </BLINK> <FONT> (font): Funkce: Slouží k nastavení velikosti a barvy textu. <FONT size= 4 color= #800040 > Barevny text </FONT> Barvy: Barevná škála RGB: každou barvu můžeme vytvořit kombinací 256 odstínů červené (R = red), 256 odstínů zelené (G = green) a 256 odstínů modré (B = blue). Barvu tedy zapisujeme pomocí 3 čísel odstínů, čísla leží v intervalu 0 až 255 (čím nižší číslo, tím tmavší barva, 0 = černá). Číslo odstínu se zapisuje v šestnáctkové soustavě (kde 255 = FF) => každý odstín zapíšeme pomocí dvouciferného čísla v intervalu 0 až FF. Obecný zápis barvy: #RRGGBB #000000 černá #FFFFFF bílá #FF0000 červená #990000 tmavě červená #00FF00 zelená #0000FF modrá #FF00FF fialová 3

<IMG> (image): Funkce: Nepárový tag, který zařazuje do dokumentu grafický objekt (obrázek nebo animaci). [Obrázky: V HTML dokumentech se nejčastěji používají tyto 2 formáty obrázků: gif a jpg.] Syntaxe: <img src="adresa_obrazku"> Atributy: alt: text, který bude zobrazen namísto obrázku u negrafických prohlížečů. align: zarovnání [bottom/middle/top] <IMG SRC= obrazky/slunicko.gif alt= obrazek slunicka align= middle > <A HREF> (hyperlink): Funkce: Zobrazení hypertextového odkazu ( klikatelného textu ). Po kliknutí na barevně odlišený text se dostaneme na webovou stránku, na niž odkaz ukazuje. Syntaxe: <A href="adresa WWW stranky"> text, který bude zobrazen </A> <A href="http://www.chemi.muni.cz">katedra biochemie</a> <P> (paragraph): Funkce: Označuje konec a začátek odstavce. Před odstavcem se automaticky vytváří mezera o výšce 1 řádku. Syntaxe: <p align=[ left right center justify ]> Atributy: align: zarovná odstavec vlevo, vpravo, na střed a justify zarovná pravý i levý okraj dokumentu. <P> toto je první odstavec</p> <P>A toto je druhý odstavec.</p> 4

<BR> (Line Break): Funkce: Zalomení řádku. <P>Toto je radek textu. A tady <BR> zlomime radek.</p> Seznamy: <UL> (unordered list), <LI> (list item): Funkce: Párový tag UL označuje konec a začátek neuspořádaného seznamu. Tento seznam se skládá z položek, vymezených párovým tagem LI. Každá položka je uvedena nějakým grafickým symbolem. Syntaxe seznamu: <ul> <li>text první položky</li> <li>text druhé položky</li> </ul> <OL> (ordered list), <LI>: Funkce: Párový tag OL označuje konec a začátek uspořádaného seznamu. Každá položka je uvedena svým číslem (písmenem). Syntaxe seznamu: stejná jako u seznamu UL. Komentáře: Funkce: Text, který je uveden v HTML souboru, ale prohlížeč ho nezobrazuje. Syntaxe: <! komentář > 5

<TABLE>, <CAPTION>, <TR>, <TD>: Funkce: Párový tag TABLE označuje začátek a konec tabulky. Párový tag CAPTION označuje záhlaví tabulky, párové tagy TR a TD označují řádky a sloupce tabulky. Syntaxe TABLE: <table align=[ left right center justify ] width="sirka_tabulky" border="tloustka_ramu" bgcolor="barva"> Syntaxe tabulky: <table border="0" bgcolor="#c0c0c0"> <caption>zahlavi</caption> <tr> <td>radek 1, sloupec 1</td> <td>radek 1, sloupec 2</td> </tr> <tr> <td>radek 2, sloupec 1</td> <td>radek 2, sloupec 2</td> </tr> </table> Výsledná tabulka vypadá takto: zahlavi radek 1, sloupec 1 radek 1, sloupec 2 radek 2, sloupec 1 radek 2, sloupec 2 Atributy: width: šířka tabulky v pixelech border: šířka okraje tabulky (v pixelech). 6

WWW stránky na počítači Bilbo: Postup pro vytvoření domovské stránky: 1. Vytvořit ve svém domovském adresáři adresář www. mkdir www 2. Přidat tomuto adresáři právo ke vstupu pro ostatní uživatele. chmod 755 www 3. V adresáři www vytvořit soubor index.htm html dokument, tvořící Vaši stránku. vi index.htm 4. Přidat tomuto souboru právo ke čtení pro ostatní uživatele (totéž provést i s ostatními soubory, které máte v adresáři www a chcete, aby byly přístupné z Internetu). chmod 755 index.htm Přístup na stránku: Stránka se nachází na adrese: http://www.chemi.muni.cz/~vas_login Seznam domovských stránek na počítači Bilbo naleznete na adrese: http://www.chemi.muni.cz/users.html Vzorová WWW stránka: http://www.ncbr.chemi.muni.cz/~evaf/unix/mustr.html 7