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

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

HTML Hypertext Markup Language

HTML - Úvod. Zpracoval: Petr Lasák

NSWI096 - INTERNET. Úvod do HTML

Úvod do jazyka HTML (Hypertext Markup Language)

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

Vývoj Internetových Aplikací

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

Tvorba webových stránek

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

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

Tvorba webových stránek

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

<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

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

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

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

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

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

Úvod do aplikací internetu a přehled možností při tvorbě webu

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

Uspořádání klient-server. Standardy pro Web

Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML

Úvod do tvorby internetových aplikací

Transformace Aplikace Trojný integrál. Objem, hmotnost, moment

22. Tvorba webových stránek

(X)HTML, CSS a jquery

z 0 3a 0 0dosti o vyda 0 0n rozhodnut o um ste 0 3n stavby

Mgr. Vlastislav Kučera lekce č. 2

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

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

Tvorba WWW stránek. Mojmír Volf

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

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

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

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

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

HTML. HyperText Markup Language Josef Steinberger

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

Tvorba WWW stránek. přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování

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

Základy HTML (2. přednáška)

Základy (X)HTML. WWW stránka WWW stránka dokument (soubor) s informacemi a pokyny pro jejich zobrazení

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

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

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

Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN

Internetové publikování

14/10/2015 Z Á K L A D N Í C E N Í K Z B O Ž Í Strana: 1

Základy WWW publikování

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

APLIKACE XML PRO INTERNET

Hodnost matice. Studijnı materia ly. Pro listova nı dokumentem NEpouz ı vejte kolec ko mys i nebo zvolte moz nost Full Screen.

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

Tvorba stránek v HTML ve Wordu

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

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

Základy webových aplikací ZWA Přednáška č. 2 HTML. Martin Klíma

Tvorba jednoduchých WWW stránek. VŠB - Technická univerzita Ostrava Katedra informatiky

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

Programování v jazyce JavaScript

Vs eobecne podmi nky ve rnostni ho programu spolec nosti Victoria-Tip.

Gaussovou eliminac nı metodou

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

V Z O R. D o d a t e k č. /2019

HTML. PIA 2012/2013 Téma 1. P. Brada, O. Rohlík, J. Tichava, Západočeská univerzita

Jazyky XHTML, DHTML, CSS a WML

Darujme.cz. Podrobné statistiky 2015

Kaskádové styly (CSS)

uбdajuй rоaбdneб cоi mimorоaбdneб uбcоetnуб zaбveоrky a oddeоleneб evidence naбkladuй a vyбnosuй podle zvlaбsоtnубho praбvnубho prоedpisu.

10. SEO Obsah meta, konkrétní elementy v html kódu. Web pro kodéry (Petr Kosnar, ČVUT, FJFI, KFE, PINF 2008)

CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.

KIV/PIA 2012 Ing. Jan Tichava

Co je to diferenciální rovnice Rovnice se separovanými proměnnými Aplikace. Diferenciální rovnice I

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

- 2 -

SENIORSKÝ DŮM OŘECH. Dne Služby Seniorského domu Ořech. SD Bohemia Group a.s.

TNPW1 Cvičení aneta.bartuskova@uhk.cz

Operace s maticemi. Studijnı materia ly. Pro listova nı dokumentem NEpouz ı vejte kolec ko mys i nebo zvolte moz nost Full Screen.

Raciona lnı lomena funkce, rozklad na parcia lnı zlomky

Parsování HTML. Pro účely testování jsem vytvořil stránku parsovani.html. Zdrojový kód:

(X)HTML. Internetové publikování

Studijnı materia ly. Pro listova nı dokumentem NEpouz ı vejte kolec ko mys i nebo zvolte moz nost Full Screen. RNDr. Rudolf Schwarz, CSc.

HTML stránka vložení obrázku

XHTML 1. Značkovací jazyky (mark-up): Součastí prostředků je systém m značek

JavaScript v jazyku HTML

Operace s maticemi. Studijnı materia ly. Pro listova nı dokumentem NEpouz ı vejte kolec ko mys i nebo zvolte moz nost Full Screen.

Mgr. Stěpan Stěpanov, 2013

Tvorba www v jazyku HTML

U PLNA PRAVIDLA SOUTE Z E S OBCHODNI CENTRUM LETN ANY Vyhrajte knihy Tento dokument obsahuje u plna pravidla marketingove soute z e Vyhrajte knihy

Tvorba jednoduchých WWW stránek

OBSAH 1 Podstata mezinárodní smlouvy Kategorie mezinárodních smluv podle jednotlivých kritérií... 21

C 0 3 a 0 0stka 164. (biologicky 0 0ch) a toxinovy 0 0ch zbran a o zme 0 3ne 0 3 z 0 3ivnostenske 0 0ho

Cد aآstka 190 Sb آrka zaآkonuت cد. 563 / ZAآ KON ze dne 24. zaآrد آ 2004 o pedagogickyآch pracovn آc آch a o zmeدneد neدkteryآch zaآkonuت

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

Název: VY_32_INOVACE_PG4116 SEO, standardy, sémantika kódu, přistupnost

insul tube & insul sheet

14. Jazyk HTML (vývoj, principy, funkce, kostra stránky). Jazyk XML, XHTML. Algoritmizace - cyklus for, while a do while, implementace v jazyce

HTML - stručná reference

Transkript:

Tvorba WWW stránek (třetí hodina) Mgr. Petr Jakubec Katedra fyzikální chemie Univerzita Palackého v Olomouci Tř. 17. listopadu 12 Třetí hodina 1 / 14

1 Základní struktura WWW stránek Standard jazyka HTML v4.01 Základní rozvržení HTML Základní rozvržení HTML Definice struktury HTML Hlavička HTML dokumentu Hlavička HTML dokumentu Tělo HTML dokumentu WWW kód 1. část WWW kód 2. část WWW kód 3. část Finální vzhled Třetí hodina 2 / 14

Standard jazyka HTML 1 pr ı sny (strict) pouz ı va jen prvky nove ho standardu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> 2 pr echodovy (transitional) lze pouz ı vat i tzv. zastarale prvky <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/tr/1999/rec-html401-19991224/loose.dtd> 3 s ra my (frameset) stejny jako pr echodovy rez im a navı c lze pouz ı vat prvky pro tvorbu ra mu (napr. frame, frameset) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/1999/rec-html401-19991224/frameset.d Vy voj: HTML + XML = XHTML v. 1.1 3 / 14

Za kladnı rozvrz enı HTML Strukturu a forma tova nı dokumentu definujı znac ky (tagy) Znac ky jsou pa rove <html> a </html> a nepa rove <br> Znac ky se mohou vnor ovat, ale nesmı se kr ı z it Znac ky majı parametry <html lang="cz"> Lze vkla dat komenta r e <!-- komenta r --> Ne ktere znaky lze vkla dat pouze nepr ı mo (napr. < je <) 4 / 14

Za kladnı rozvrz enı HTML Znac ka <html>... </html> Vy znam Definuje poc a tek a konec HTML dokumentu. <head>... </head> Vymezuje tzv. hlavic ku HTML dokumentu. Jejı obsah se nezobrazuje. <body>... </body> Vymezuje vlastnı obsah (te lo) HTML dokumentu a definuje ne ktera za kladnı pravidla zobrazenı dokumentu v prohlı z ec i. Atributy dir=sme r lang=jazyk version=r ete zec dir=sme r lang=jazyk profile=url background=url bgproperties=hodnota bgcolor=barva text=barva link=barva alink=barva vlink=barva leftmargin=hodnota topmargin=hodnota 5 / 14

Definice struktury HTML 1 2 3 4 5 6 7 8 9 10 <! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01 Transitional // EN " " http :// www. w3. org / TR /1999/ REC - html401-19991224/ loose. dtd " > < html > < head >... </ head > < body >... </ body > </ html > 6 / 14

Hlavic ka HTML dokumentu Znac ka <meta> Vy znam Za kladnı informace o obsahu HTML dokumentu pro vyhleda vacı ho robota. Je souc a stı hlavic ky HTML dokumentu. <base> Definuje za kladnı adresu pro vs echny relativnı adresy v ra mci dokumentu. <title>...</title> Na zev HTML dokumentu, ktery se zobrazuje v za hlavı okna prohlı z ec e. Je souc a stı hlavic ky HTML dokumentu Atributy dir=sme r lang=jazyk charset=jme no name=r ete zec content=r ete zec http-equiv=r ete zec scheme=sche ma href=url target=jme no 7 / 14

Hlavic ka HTML dokumentu 1 2 3 4 5 6 7 8 9 <! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01 Transitional // EN " " http :// www. w3. org / TR /1999/ REC - html401-19991224/ loose. dtd " > < html > < head > < title > Koloidnı str ı bro - metody jeho pr ı pravy </ title > < meta name =" description " content =" Stra nky o str ı bru " > < meta name =" keywords " content =" koloid, str ı bro, pr ı prava " > < meta name =" author " content =" Libor Kvı tek " > </ head > 10 11 12 13 14 < body >... </ body > </ html > 8 / 14

Te lo HTML dokumentu Znac ka <b>... </b> <i>... </i> <u>... </u> <tt>... </tt> <small>... </small> <big>... </big> <sub>... </sub> <sup>... </sup> <font>... </font> Vy znam Tuc ne pı smo. Kurzı va. Podtrz ene Neproporciona lnı pı smo. Pı smo o bod mens ı. Pı smo o bod ve ts ı. Dolnı index. Hornı index. Definuje zme ny vlastnostı pı sma oproti standardnı mu nastavenı pro pr ı slus nou c a st HTML dokumentu. <div>... </div> Me nı zarovna nı a barvu textu uzavr ene ho mezi znac kami. <pre>... </pre> Prohlı z ec ponecha va forma tova nı z pu vodnı ho dokumentu. Atributy size=hodnota color=hodnota name=r ete zec face=r ete zec align color textu 9 / 14

WWW ko d 1. c a st 1 2 3 4 5 6 <! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01 Transitional // EN " " http :// www. w3. org / TR /1999/ REC - html401-19991224/ loose. dtd " > < html > < head > < title > Metody pr ı pravy koloidnı ho str ı bra </ title > </ head > 7 8 9 < body bgcolor ="# FFCC33 " > <h1 > Metody pr ı pravy koloidnı ho str ı bra </ h1 > 10 11 12 13 Koloidnı str ı bro lze pr ipravovat dve ma za kladnı mi zpu soby -<b > dispergac ne </ b > ( <i > zmens ova nı m </ i > velky ch c a stic str ı bra, nebo <b > kondenzac ne </ b > ( <i > vyluc ova nı m </ i > z homogennı ho rozto 10 / 14

WWW ko d 2. c a st 14 <h2 > Dispergac nı metody </ h2 > 15 16 17 18 19 20 21 22 < div align =" justify " > Dispergac nı metody nejsou pr ı lis pouz ı va ny pro pr ı pravu koloidu kovu obecne. K dispozici je jen ma lo vhodny ch metod, takz e na tomto mı ste budou zmı ne ny jen dve metody, ktere jsou v praxi vyuz ı va ny c aste ji, z nichz laserova ablace ovs em patr ı v souc asnosti mezi intenzivne studovane metody pr ı pravy koloidnı ho str ı bra : </ div > 23 24 25 26 27 28 < ul type =" square " > <li > rozpras ova nı v elektricke m oblouku, <li > pu sobenı m vy s o c e f o k u s o v a n e h o za r enı laseru ( laserova ablace ). </ ul > 11 / 14

WWW ko d 3. c a st 29 <h2 > Kondenzac nı metody </ h2 > 30 31 32 33 34 35 36 37 38 39 Kondenzac nı metody jsou podstatne vhodne js ı pro pr ı pravu koloidu kovu a proto je k dispozici s iroka s ka la metod : < ol type ="1" > <li > chemicka redukce roztoku str ı brne soli, <li > fotoly za roztoku str ı brne soli, <li > radioly za roztoku str ı brne soli, < li > sonifikace roztoku str ı brne soli, <li > elektroly za roztoku str ı brne soli. </ ol > 40 41 42 43 44 45 46 47 < hr color =" black " size ="2 px " noshade > <p > <a href =" http :// validator. w3. org / check? uri = referer " > < img src =" http :// www. w3. org / Icons / valid - html401 " alt =" Valid HT </p > </ body > </ html > 12 / 14

Internet Explorer 8.0 Třetí hodina 13 / 14

Safari 5.1.2 Třetí hodina 14 / 14