NSWI096 - INTERNET. Úvod do HTML

Podobné dokumenty
HTML - Úvod. Zpracoval: Petr Lasák

Internet cvičení (X)HTML Jakub Klímek

HTML Hypertext Markup Language

Tvorba WWW stránek. Mojmír Volf

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

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

Vývoj Internetových Aplikací

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

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 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

<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

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

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

(X)HTML, CSS a jquery

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

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

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

Čtvrtek 11. dubna. 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

Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML

Základy WWW publikování

Tvorba webových stránek

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

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

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

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

APLIKACE XML PRO INTERNET

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

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

Úvod do tvorby internetových aplikací

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!

Úvod do jazyka HTML (Hypertext Markup Language)

Základy HTML. Autor: Palito

22. Tvorba webových stránek

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

Mgr. Vlastislav Kučera lekce č. 2

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

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

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

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

(X)HTML. Internetové publikování

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

Dnešní téma. Oblasti standardizace v ICT. Oblasti standardizace v ICT. Oblasti standardizace v ICT

Š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

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

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

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

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

Jazyk XSL XPath XPath XML. Jazyk XSL - rychlá transformace dokumentů. PhDr. Milan Novák, Ph.D. KIN PF JU České Budějovice. 9.

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

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

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

Název modulu: Tvorba webu pomocí XHTML a CSS začátečníci

Internet 1 vývoj, html, css

Mgr. Stěpan Stěpanov, 2013

Tvorba fotogalerie v HTML str.1

Tvorba stránek v HTML ve Wordu

HTML stránka vložení obrázku

24. XML. Aby se dokument XML vůbec zobrazil musí být well-formed (správně strukturovaný). To znamená, že splňuje formální požadavky specifikace XML.

Internetové publikování

Internet a tvorba WWW stránek

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

Internetové technologie, cvičení č. 5

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

Jazyky XHTML, DHTML, CSS a WML

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í

Tvorba webových stránek

Obsah prezentace. Co je to XML? Vlastnosti. Validita

MODERNÍ WEB SNADNO A RYCHLE

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

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

HTML stránka odkaz, zvýraznění textu

Nová struktura souborů a složek

Tvorba webových stránek

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

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

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

Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument

Tomáš Herout

Internet WEB stránky HTML, Hypertext MarkUp Language - nadtextový jazyk - Místo příkazů obsahuje tagy - značky

Dokumenty umístěné na počítačových serverech jsou adresovány pomocí URL (Uniform Resource Locator).

(X)HTML. Internetové publikování

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

HTML. HyperText Markup Language Josef Steinberger

Jazyky pro popis dat

Název Live prez Sear enta Maps

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

7.CVIČENIE. Základy HTML

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

IE1 jazyk HTML a kaskádové styly

Informatika pro moderní fyziky (8) CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument

Úvod 1 ČÁST 1 HTML 1 Základy HTML a kaskádových stylů 5

Obsah. Stručná historie World Wide Webu 7

Jak vytva r et webove stra nky pomocı XHTML a CSS.

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

IE1 jazyk HTML a kaskádové styly

1. Struktura stránky, zásady při psaní kódu, MVC pattern. Web pro kodéry (Petr Kosnar, ČVUT, FJFI, KFE, PINF 2008)

Transkript:

NSWI096 - INTERNET Úvod do HTML

XHTML CO TO JE? XML extensible Markup Language Sada pravidel, jak kódovat dokumenty Podle těchto pravidel lze vytvořit nekonečně mnoho různých jazyků HTML HyperText Markup Language Jazyk pro tvorbu WWW stránek XHTML extensible HyperText Markup Language "kombinace Je to jazyk HTML přizpůsobený pravidlům XML Dnes už převážně XHTML Vzhledem k více méně kosmetickým rozdílům budeme používat jen XHTML

XML JAK TO VYPADÁ - TAG Řetězec uzavřený v ostrých závorkách <můj_tag> Mají 3 typy Start-tag: <můj_tag> End-tag: </můj_tag> Empty-element tag: <můj_tag/>

XML JAK TO VYPADÁ - ELEMENT Dvojice Start-tag, end-tag se stejným názvem <můj_tag>...</můj_tag>... se nazývají obsah elementu. To může být jak text, tak další elementy Empty-element tag říká že element nemá žádný obsah <můj_tag/> Stejné jako <můj_tag></můj_tag>

XML JAK TO VYPADÁ - OBSAH Prázdný <můj_tag/> Textový <můj_tag>můjtext</můj_tag> Elementový <můj_tag><další_tag/><jiný_tag/></můj_tag> Smíšený <můj_tag>t<jiný_tag>text</jiný_tag></můj_tag>

XML JAK TO VYPADÁ ATRIBUTY Dvojice název/hodnota uvnitř Start-tagu nebo Empty-element tagu Například number="3" Příklady Název number Hodnota 3 <položka id="123">toto je položka</položka> <značka id="456"/>

XML - PRAVIDLA Záleží na velkých a malých písmenech Nelze: <Můj_tag></můj_tag> Správné uzávorkování Nelze: <Tag1><Tag2></Tag1></Tag2> Pouze jeden kořenový element Celý XML dokument má tvar stromu První řádek dokumentu obsahuje hlavičku <?xml version="1.0" encoding="utf-8"?> Encoding je použité kódování znaků Nejlépe Unicode UTF-8 Lze i ISO8859-2 nebo Windows-1250

XML - PŘÍKLAD <?xml version="1.0" encoding='utf-8'?> <záznam> <img src="fotka.jpg" alt="moje fotka"/> <popis> Tohle je moje fotka ze dne: <datum> <den>2</den>.<měsíc>12</měsíc>. <rok>2009</rok> </datum> </popis> </záznam>

HTML JAK TO VYPADÁ Je to sada tagů, atributů a pravidel, jak tyto tagy a atributy mohou být umístěny Tagy: html, body, head, h1, h2, div, span,... Atributy: id, src, ref,... Pravidla "Tag head musí být jen v tagu html a to právě jednou "Tag img musí mít atribut src...

HTML VS. XHTML HTML není XML, XHTML je XML V HTML je možné mít třeba start-tag a ne endtag <p>, <br> Aby to bylo XML a tedy XHTML, musí to být správně uzávorkované <p/>, <br/> nebo <p></p>, <br></br> Další rozdíly, v podstatě vychází z HTML 4.01

(X)HTML HLAVIČKA DOKUMENTU HTML i XHTML dokument má hlavičku říkající podle které verze W3C doporučení je dokument napsán HTML: 4.01 XHTML: 1.0 Strict, 1.0 Transitional, 1.0 Frameset, XHTML 1.1 navíc moduly <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> Před prvním tagem ve stránce http://www.w3schools.com/tags/tag_doctype.asp

XHTML - MOJE PRVNÍ STRÁNKA Soubor s příponou.htm nebo.html Je to jedno, která první je jenom z historického hlediska Pro psaní čistého HTML nepotřebujeme ani server, ani browser ani nějaký HTML Editor Zvláštní postavení index.html nebo index.php Pokud máme začleněn kód v stránce, tak je nutné zde mít index První se hledá.php až pak.html Lze nastavit i jiné řešení

XHTML - ZÁKLADNÍ DĚLENÍ STRÁNKY <html> a </html> Vymezují rozsah HTML stránky Atribut xmlns="http://www.w3.org/1999/xhtml" Ta je rozdělena vnitřně na hlavičku a tělo <head> a </head> Vymezují hlavičku Obsahuje především popis obsahu stránek Klíčové slova, kódování stránky, refresh interval, styly <body> a </body> Vymezují tělo stránky Samotný obsah stránek Text, obrázky, odkazy, javascripty

XHTML - HLAVIČKA HTML STRÁNKY <title> a </title> Titulek dané stránky <meta /> Určuje meta informace o stránce http-equiv typ meta informace Spolu s dalším upřesněním hodnoty <style> a </style> Styl definovaný přímo v hlavičce <script> a </script> Definice JavaScriptu přímo v hlavičce

XHTML - HLAVIČKA - ZAJÍMAVÉ METATAGY <meta http-equiv="content-type" content="text/html; charset=utf- 8" /> Určuje typ obsahu a kódování stránky <meta name="description" content="free Web tutorials on HTML, CSS, XML" /> Určuje popisek stránek, které indexují některé vyhledávače <meta name="keywords" content="html, CSS, XML" /> Určuje klíčové slova, podle kterých indexují některé vyhledávače <meta http-equiv="expires" content="wed, 21 June 2006 14:25:27 GMT"> Nastaví hodnotu, kdy vyprší platnost stránek a lze jí uchovat v cache

XHTML TĚLO BLOKOVÉ ELEMENTY <div> a </div> Slouží na označení logického celku obsahu Dělí obsah na bloky <p> a </p> Slouží na označení odstavce Mohou být vnořeny do div tagu, né naopak <span> a </span> Slouží k označení části textu v odstavci Mohou být vnořeny do p tagu, né naopak

XHTML TĚLO NADPISY A ČARY Slouží ke strukturování textů Vyhledávače podle nadpisů indexují obsah Mají hierarchii a jsou všechny párové <h1> až <h6> Čáry také oddělují text - <hr />

XHTML TĚLO FORMÁTOVACÍ TAGY Podobně jako <span> existují i párové tagy, které vymezený kus textu i formátují <tt> - použije telegrafický formát Proporcionální písmo <i> - italica, <b> - bold <sub> - dolní index <sup> - horní index <pre> - zobrazí přesně tak, jak je napsáno v zdrojové stránce <big> - zvětšení písma <small> - zmenšení http://www.w3schools.com/html/html_formatting.asp

XHTML TĚLO SEZNAMY Seznamy <ol> - Číslovaný seznam (Ordered list) <ul> - Nečíslovaný seznam (Unordered list) <li> - Položka seznamu (List Item) Příklad: <ul> <li>první</li> <li>druhá</li> </ul>

XHTML TĚLO ENTITY Entita kód pro text Pro web nejzajímavější: & & < < > > " " Obecně lze v XML definovat vlastní, tady na to zapomeňte Příklad: H&M se v XHTML píše: H&M

XHTML TĚLO OBRÁZKY K vkládání obrázku do stránky je tag <img /> Nejdůležitější atribut je src zdroj obrázku Povinný atribut Zdroj může být adresa na serveru nebo samotný obrázek Další povinné atributy: alt alternativní text, pokud jsou vypnuté obrázky Další zajímavé atributy: title text zobrazení po najeti myší border rámeček okolo obrázku width, height rozměry obrázku

XHTML TĚLO ODKAZY <a> - Kotva (Anchor) Hlavní použití jako odkaz <a href="http://www.google.com">google</a> Atribut href udává URL kam odkaz vede Obsah elementu <a> je to, na co budu klikat Další použití jako cíl odkazu v rámci stránky (Bookmark) <a id="odstavec2"> </a> Atribut id udává identifikátor, na který se pak dá odkázat Pomocí <a href="#odstavec2"> </a> Nebo z jiné stránky pomocí <a href="http://www.google.com#odstavec2"> </a>

XHTML - ADRESACE Adresy na webu mohou být absolutní nebo relativní Absolutní - vždy plná cesta http://www.ksi.mff.cuni.cz/~lasak/nswi096.php Relativní - jen rozdílná část Jsme na stránce http://www.ksi.mff.cuni.cz/~lasak/ Chceme na stránku http://www.ksi.mff.cuni.cz/~lasak/nswi096.php Stačí napsat <a href="/nswi096.php">blabla</a>

XHTML - VALIDACE Jak zjistit jestli je stránka validní? Tj. jestli vyhovuje např. XHTML 1.1 standardu? Tj. jestli už splňuje podmínku validity na zápočet? http://validator.w3.org/ Validuje přes odkaz Validuje přes nahrání HTML souboru Validuje přes zadání textu přímo do validátoru