HTML HTML. Základní struktura. HyperText Markup Language

Podobné dokumenty
HTML. HyperText Markup Language Josef Steinberger

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

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

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

Obsah. Stručná historie World Wide Webu 7

<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 HTML (2. přednáška)

HTML - stručná reference

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

Návrh a tvorba WWW stránek 1/8. Formuláře

Funkce grafiky na webu. Primární grafická informace Fotografie Schémata Diagramy Loga Bannery

HTML Hypertext Markup Language

Formuláře. Internetové publikování. Formuláře - příklad

Formuláře. Internetové publikování

XHTML 1. Formuláře. Element form. <form>... </form>

HTML - Úvod. Zpracoval: Petr Lasák

Tvorba webových stránek

Tvorba webových stránek

IE1 jazyk HTML a kaskádové styly

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

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

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

IE1 jazyk HTML a kaskádové styly

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.

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

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

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

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

NSWI096 - INTERNET. Úvod do HTML

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

Tvorba WWW stránek. Mojmír Volf

Úvod do jazyka HTML (Hypertext Markup Language)

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

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

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

Formuláře. Aby nám mohli uživatelé něco hezného napsat třeba co si o nás myslí!

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

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

Skriptování na straně serveru a klienta

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

HTML. Úvod do (X)HTML. Tagy značky. Slouží ke strukturování dokumentu (párové a nepárové) <tag atribut1= hodnota atributu > text </tag>

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

Tomáš Herout

(X)HTML. Internetové publikování

Atribut Význam Hodnoty

<!DOCTYPE html> <html lang="cs"> <head> <meta charset="utf-8" /> <title>název stránky v titulkovém pruhu prohlížeče</title> </head>

Formuláře. neomezený počet formulářových polí v rámci HTML dokumentu může být více formulářů, nelze je ale do sebe vnořovat

Grafika na webu. Lukáš Bařinka

Grafické rozhraní pro práci s formuláři přes internet Graphic interface for working with forms placed on Internet. Bc.

České Budějovice, Emy Destinové 395

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)


HTML Kapesní přehled. Lukáš Honek. w w w. h o n e k. b i z. Pravidla psaní kódu. Abecední přehled tagů, atributů, entit, konstant a událostí

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

DUM 14 téma: Interakce s uživatelem

Javascript. Javascript - jazyk

Webové formuláře v HTML5 a Web Forms 2.0

Tvorba internetových aplikací v XHTML 2.0 BAKALÁŘSKÁ PRÁCE

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

PODPORA ELEKTRONICKÝCH FOREM VÝUKY

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

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

Vývoj Internetových Aplikací

Specifikace ASYMBO XML feedu

Inovace a zkvalitnění výuky prostřednictvím ICT Tvorba webových stránek. Ing. Zelinka Pavel Číslo: VY_32_INOVACE_35 17 Anotace:

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

Struktura stránek. <TITLE></TITLE>... text mezi tagy je zobrazen v názvu okna. <BODY></BODY> atributy:

<jméno_prvku> text </jméno_prvku> <jméno_prvku jméno_atributu=hodnota > text </jméno_prvku>

Kaskádové styly (CSS)

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.

Jazyky XHTML, DHTML, CSS a WML

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

Základy webových aplikací ZWA Přednáška č. 3 tvorba formulářů na klientské straně. Martin Klíma

Pravidla tvorby pístupného webu. Zpracovala Kristýna Knapová. Obrázky. Kaskádové styly CSS. Javascript. Obrázky dekoraní

HTML 5 Historie HTML5 Co je HTML5 Přehled novinek

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

03 - Základy editace dynamických stránek

(X)HTML. Internetové publikování

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

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

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

Tvorba WWW stránek s využitím technologií (X)HTML, CSS, PHP a databází

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

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

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

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

22. Tvorba webových stránek

Základy HTML, URL, HTTP, druhy skriptování, formuláře

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í

25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY

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

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

Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML

JavaScript 101. "Trocha života do statických stránek"

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

1. Tvorba WWW stránek

Nová struktura souborů a složek

TVORBA WEBOVÝCH STRÁNEK

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

Transkript:

HTML <!DOCTYPEHTMLPUBLIC"/W3C/DTDHTML4.01/EN" "htp:/ẇw3ọrg/tr/html4/stricṫdtd"> <HTML><HEAD><TITLE>MyfirstHTMLdocument TITLE> BODY><P>Heloworld! HEAD> < HTML> HyperText Markup Language současná verze: 4.01 W3C Recommendation 24. 12. 1999 aplikace jazyka SGML HTML Základní struktura HTML kořenový element HEAD hlavička BODY tělo Varianty Strict: bez prezentačních elementů a atributů Transitional: včetně prezentačních elementů a atributů Frameset: shodné s Transitional až na obsah elementu HTML, kde je BODY nahrazeno elementem FRAMESET

TITLE titulek META metainformace name content http-equiv <metahtp6equiv="content6type" content="text/html;charset=utf68"> <metaname="author"content="ondřejkučera"> HEAD LINK vztah k jinému dokumentu BASE výchozí cesta STYLE styly SCRIPT scripty Společné atributy title titulek id unikátní identifikátor v dokumentu class třída lang jazyk dir směr psaní (ltr rtl) style styl šest úrovní H1, H2, H3, H4, H5, H6 Nadpisy Psaní textu EM zdůraznění STRONG výraznější zdůraznění CITE citace DFN definice (pojmu) CODE fragment počítačového kódu SAMP ukázka výstupu počítačového programu KBD vstup od uživatele VAR proměnná nebo argument ABBR zkratka ACRONYM zkratkové slovo

Psaní textu Q citace, inline cite (URI) zdroj BLOCKQUOTE citace, bloková cite (URI) zdroj SUB dolní index SUP horní index Psaní textu P odstavec nesmí obsahovat žádný blokový element BR odřádkování v rámci odstavce clear PRE předformátovaný text INS vložený text, DEL smazaný text cite (URI) zdroj vysvětlující důvod změny datetime doba změny smějí být použity jako blokové i jako inline, ovšem jsou-li použity jako inline, nesmějí obsahovat blokový element. Psaní textu CENTER TT, I, B, BIG, SMALL, STRIKE, S, U FONT, BASEFONT HR (horizontální čára) Seznamy UL neuspořádaný seznam type, compact OL uspořádaný seznam type, start, compact LI položka seznamu value

Vnořené seznamy Obvyklý postup instalace programu ze zdrojových kódů pro změnu umístění použij např. při typické instalaci je potřeba pouštět jako root ice620make zvažn pracovat,./configure6prefix usr rozumně zároveň chceš systémem se 1.. 2.m akeinstal 3.m akepokud Seznamy definic dl> Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words. d>youngexcitablepersonwhomaymature intoa<em>nerd em>or<em>gek em> d> d>technicalybrightbutsocialyineptperson d> d>acleverprogramer d> <dl><dt>dweb dt> <dt>hacker dt> <dt>nerd dt> < Vnořené seznamy Obvyklýpostupinstalaceprogramuzezdrojovýchkódů <ol><li><code>./configure code> ul><li>prozměnumístěnípoužijnapř. <br <code>./configuresprefix usr code> li> ul><li>pokudsesystémemchcešzároveňrozumněpracovat, ul><li>přitypickéinstalacijepotřebapouštětjakorot li> zvaž<code>nices20make code> li> ul> li><li><code>make code> ul> li><li><code>makeinstal code> < ul> li> ol> Seznamy definic DL seznam definic DT termín DD popis

DIR MENU Seznamy Tabulky TABLE tabulka - - (CAPTION?, (COL* COLGROUP*), THEAD?, TFOOT?, TBODY+) summary (shrnutí; především pro nevizuální prohlížeče) width (šířka) border (okraj), frame, rules cellspacing (prostor mezi buňkami) cellpadding (odsazení obsahu buňky) CAPTION popis tabulky Tabulky THEAD hlavička tabulky - O (TR)+ align (left center right justify char) char charoff ( specifies the offset to the first occurrence of the alignment character on each line ) valign (top middle bottom baseline) TFOOT patičcka tabulky - O (TR)+ TBODY tělo tabulky O O (TR)+ Tabulky COLGROUP skupina sloupců - O (COL)* span (počet sloupců ve skupině) width (šířka každého sloupce ve skupině) COL sloupec - O EMPTY span, width

Tabulky The COL element allows authors to group together attribute specifications for table columns. The COL does not group columns together structurally that is the role of the COLGROUP element. COL elements are empty and serve only as a support for attributes. They may appear inside or outside an explicit column group (i.e., COLGROUP element). Tabulky TR řádek TH nadpis rowspan, colspan abbr (zkrácená forma obsahu buňky) scope (row col rowgroup colgroup) axis (logická kategorie, do které buňka spadá) headers TD buňka rowspan, colspan, abbr, axis, scope headers (seznam nadpisů pro tuto buňku) Odkazy A odkaz (kotva) name (vytváří cílovou kotvu odkazu) href (určuje cílovou kotvu odkazu) hreflang (jazyk odkazu) type (MIME type odkazu) rel (vztah současného dokumentu k odkazu) rev (vztah odkazu k současnému) charset (kódování znaků použité v odkazovaném dokumentu) shape, coords, target, tabindex, accesskey LINK odkaz (vztah k jinému dokumentu) charset, href, hreflang, type, rel, rev media (média) BASE výchozí cesta nebo cíl href, target Obrázky IMG obrázek src (adresa) alt (krátký popis) longdesc (dlouhý popis) align, width, height, border, hspace, vspace ismap, usemap

Objekty <p><!6firstțrythepythonaplet6> <objectitle="theearthasenfromspace" clasid="htp:/ẇobserveṙmars/theeartḣpy"> <objectdata="theeartḣmpeg"type="aplication/mpeg"> <objectdata="theeartḣgif"type="image/gif"> The<strong>Earth strong>asenfromspacė <!6ElsețrytheMPEGvideo6> <!6ElsețrytheGIFimage6> <!6Elserenderthetext6> object> object> Objekty OBJECT objekt data (adresa dat objektu) type (MIME type dat) classid, codebase, codetype, archive, declare, standby align, width, height, border, hspace, vspace usemap PARAM parametr objektu name (název) value (hodnota) valuetype (data ref object) type (MIME type pro případ ref) APPLET applet codebase, code, name, archive, object, width, height, alt, align, hspace, vspace Obrázkové mapy Obrázkové mapy MAP mapa name (název) AREA oblast shape (default rect circle poly) coords (souřadnice) nohref (není odkazem) alt, href, target, tabindex, accesskey <p><objectdata="navbar1.gif"type="image/gif"usemap="#map1"> ords="276,0,276,28,10,20,50,50,276,0"> <p>thisisanavigationbaṙ object> mapname="map1"> areahref="guidėhtml" lt="acesguide" < a hape="rect" ords="0,0,18,28"> areahref="searcḣhtml" sc lt="search" hape="rect" ords="184,0,276,28"> areahref="shortcuṫhtml" < lt="go" hape="circle" ords="184,20,60"> areahref="top10ḥtml" lt="topten" a hape="poly" sc map>

Rámy FRAMESET rozložení rámů rows (horizontální rozložení rámů) cols (vertikální rozložení rámů) FRAME rám name (název) src (umístění obsahu rámu) noresize (rámu nelze měnit velikost) scrolling (auto yes no) frameborder (1 0) marginwidth, marginheight, longdesc NOFRAMES alternativní obsah Rámy Obrázkové mapy na serveru ttp://www.acme.com/cgi-bin/competition?10,27 IFRAME inline rám width, height, src, name, longdesc frameborder, marginwidth, marginheight, scrolling, align <ahref="htp:/ẇacmėcom/cgiábin/competition"> a>h<imgsrc="gamėgif"ismapalt="target"> Rámy <!DOCTYPEHTMLPUBLIC"s/W3C/DTDHTML4.01Frameset/EN" <ul><li><ahref="contents_of_frame1ḥtml">someneatcontents a> <li><imgsrc="contents_of_frame2.gif"alt="aneatimage"> <li><ahref="contents_of_frame3ḥtml">someotherneatcontents a> "htp:/ẇw3ọrg/tr/html4/frameseṫdtd"> <html><head><title>asimpleframesetdocument title> framesrc="contents_of_frame1ḥtml"> <framesrc="contents_of_frame2.gif"> framesrc="contents_of_frame3ḥtml"> head><framesetcols="20%,80%"> framesetrows="10,20"> p>thisframesetdocumentcontains: frameset> <noframes> < ul> noframes> frameset> html>

Formuláře FORM formulář action (adresa) method (get post) enctype (MIME type pro případ metody post) accept-charset (seznam kódování, která server přijímá) accept (seznam MIME typů, která server přijímá) name, target Formuláře INPUT formulářový vstup type (text password checkbox radio submit reset file hidden image button) name (název) value (úvodní hodnota) size (velikost) maxlength (maximální délka vstupu) checked, readonly, disabled src (adresa) alt, align, accept, tabindex, accesskey, usemap, ismap BUTTON tlačítko type (submit reset button) name, value, disabled, tabindex, accesskey Formuláře SELECT menu multiple (dovoluje vybrat více položek) size (množství najednou viditelných položek) name, disabled, tabindex OPTGROUP skupina voleb label (popis) disabled OPTION volba selected (předvybráno) value, label, disabled Formuláře TEXTAREA víceřádkový vstup rows (počet řádků) cols (počet sloupců) name, readonly, disabled, tabindex ISINDEX jednořádkový vstup LABEL popis for (id prvku, ke kterému se vztahuje) accesskey, tabindex FIELDSET skupina formulářových prvků LEGEND nadpis skupiny align, accesskey

Styly STYLE styl type (MIME type) media (screen tty tv projection handheld print braille aural all) title Scripty SCRIPT script src (adresa) type (MIME type) charset (kódování scriptu) defer (script negeneruje žádnou část dokumentu) NOSCRIPT alternativní obsah Události onload, onunload, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onfocus, onblur, onkeypress, onkeydown, onkeyup, onsubmit, onreset, onselect, onchange Nesémantické kontejnery SPAN řádkový DIV blokový především v souvislosti se stylováním XHTML aplikace jazyka XML XHTML 1.0 W3C Recommendation 26. 1. 2000, revisited 1. 8. 2002 XHTML Basic 1.0 W3C Recommendation 19. 12. 2000 1.1 W3C Working Draft 5. 7. 2006 XHTML Modularization 1.0 W3C Recommendation 10. 4. 2001 1.1 W3C Working Draft 5. 7. 2006 XHTML 1.1 First edition W3C Recommendation 31. 5. 2001 Second edition W3C Working Draft 16. 2. 2007 XHTML 2.0 W3C Working Draft 26. 7. 2006

Odkazy a literatura Odkazy W3C HTML Home Page Jak psát web W3C Markup Validation Service Literatura???