Základy HTML (2. přednáška)
WWW World Wide Web Sestává ze tří stavebních bloků Síť informačních zdrojů Universal Resource Identifier jednotný způsob jak adresovat zdroje, (URL) protokoly pro přístup ke zdrojům (HTTP, FTP,...) HTML formát textových zdrojů umožňující je vzájemě propojovat (založen na SGML)
URI Universal Resource Identifier Typicky má následující tvar: schema:[//][username@]host[:port][/path[?query]] (obsah hranatých závorek je nepovinný) Příklady: http://google.cz/search?q=uri mailto:jonathan.verner@ff.cuni.cz ftp://vernjaff@web.ff.cuni.cz http://localhost:8080/index.html Více viz RFC 2396 (http://www.ietf.org/rfc/rfc2396.txt).
Protokoly HTTP (HyperText Transfer Protocol) Později... GET / HTTP/1.1 Host: google.cz User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/53 Cookie: TZ=-120; HTTP/1.1 200 Ok. Date: Mon, 08. Oct 2012 23:46:26 Server: Apache Set-Cookie: SESSION=askdfj123KLKJ23KJ1LK3J123kjas32 Content-Length: 14371 Content-Type: text/html; charset=utf-8 <!DOCTYPE html PUBLIC...
SGML Standard Generalized Markup Language Formát HTML je speciálním případem (tzv. aplikací) SGML SGML bylo původně navrženo ke sdílení strojově čitelných dokumentů 60. léta, Charles Goldfarb, Edward Mosher, and Raymond Lorie, IBM ISO standard (ISO 8879:1986) aplikace SGML sestává z: DTD (document type definition) strojově čitelná definice formátu Style Sheet určuje jak dané dokumenty zobrazovat Document Instance konkrétní dokumenty nejznámější aplikace XML HTML
DTD Document Type Definition Specifikuje formát dokumentu dokument má stromovou strukturu (DOM) dtd sestává ze seznamu elementů tří základních typů: ENTITY definuje základní stavební kameny pro výstavbu složitějších prvků ELEMENT definuje prvky dokumentu (každý prvek odpovídá uzlu v DOM stromu) ATTLIST definuje vlastnosti jednotlivých uzlů ENTITY <!ENTITY % alignment "center left right">
DTD ELEMENT <!ELEMENT % td - - > <!ELEMENT UL - - (LI)+> <!ELEMENT OPTION - O (#PCDATA)>
DTD ATTLIST <!ATTLIST LINK %attrs; -- %coreattrs, %i18n charset %Charset; #IMPLIED -- char encoding of href %URI; #IMPLIED -- URI for linked re hreflang %LanguageCode; #IMPLIED -- language code -- type %ContentType; #IMPLIED -- advisory content rel %LinkTypes; #IMPLIED -- forward link type rev %LinkTypes; #IMPLIED -- reverse link type media %MediaDesc; #IMPLIED -- for rendering on >
Style Sheet CSS Později...
HTML struktura souboru DOCTYPE odkaz na DTD <html> HEADER BODY </html>
HTML DOCTYPE <!DOCTYPE html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd">
HTML Elements stavební kameny <nazevprvku atribut1=hodnota1 atribut2=hodnota2> potomci + obsah </nazevprvku> <div id=23 class=28> Tohle je text. <img src="../images/obrazek1.jpg" width="100px" /> <p> Tohle je odstavec </p> </div>
HTML Elements společné atributy Atributy společné většině elementů : id, class lang Základní typy elementů: strojově čitelné anotace (link, meta, script,...) block-level (div, table, h1, p,...) inline-level (span, img,...)
Hlavička <head>... </head> Obsahuje titulek povinný (!!), <title>...</title> css styly (prvek style) skripty (prvek script) strojově čitelné odkazy (prvek link) meta-informace (prvek meta) Příklad <head> <link rel="shortcut icon" href="images/favicon.ico" /> <link rel="stylesheet" href="css/layout.css" type="text/css"/> <meta http-equiv="content-type" content="text/xhtml; charset=utf-8" /> <meta name="keywords" content="set theory, topology, winter school, hejnice, forcing" /> <title>winter School in Abstract Analysis, section Set Theory & Topology</title> </head>
Link Element <link... /> Atributy href URI+ #name rel stylesheet odkazuje na soubor se styly alternate ve spojitosti s atributem media (resp. hreflang) umožňuje mít různé varianty pro různá média (resp. v různých jazycích) next,prev,contents,... umožňuje navigaci ve větším souboru dokumentů type formát odkazovaného obsahu (např. text/css, text/javascript) media pro které médium je odkazovaný obsah relevantní (např. print) Poznámka Lze použít pouze uvnitř prvku <head> </head>. Neobsahuje další prvky. Příklad <link rel= stylesheet href= css/print.css type= text/css media= print />
Metadata <meta... /> Kódování <meta http-equiv="content-type" content="text/xhtml; charset=utf-8" /> (<meta charset="utf-8"/> funguje též) Klíčová slova <meta name="keywords" content="set theory, topology, winter school, hejnice, forcing" /> Poznámka Může být přítomen pouze v hlavičce (<head>... </head>)
HTML Body <body>... </body> Obsahuje veškerý obsah Atributy žádné speciální
HTML Značkování/formátování textu h1,..., h6 nadpisy/sekce/kapitoly em, strong zdůraznění (em typicky italikou, strong typicky bold face) cite odkazy na literaturu blockquote, q citace (má atribut cite, jehož hodnotou je URI dokumentu, odkud citace pochází) sub, sup horní a dolní index ul, ol nečíslovaný a očíslovaný seznam (jednotlivé položky jsou v <li>...</li> prvcích) dl slovníkový seznam (definované slovo v <dt>...</dt> prvku, definice v <dd>...</dd> prvku) ins, del změny v dokumentu (ins vložené pasáže, del vypuštěné pasáže) br vynucený konec řádky p odstavec
Obrázky <img /> Atributy Příklad src alt url obrázku textový popis obrázku (povinný) width šířka obrázku height délka obrázku (důležité, umožní prohlížeči zobrazit stránku před načtením obrázku) <img src=../obrazky/fotka.jpg widht=20px height=35px alt= Moje malickost />
Tabulky <table>... </table> Atributy cellspacing cellpadding Obsahuje prvky caption popisek tabulky thead záhlaví tabulky tbody tělo tabulky tfoot patička tabulky tr řádek tabulky th, td buňka tabulky
Tabulky <td>... </td> Atributy rowspan colspan align valign headers sloučí buňky vertikálně sloučí buňky horizontálně horizontální zarovnání obsahu buňky (left, center, right, justify, char) vertikální zarovnání obsahu buňky (top, middle, bottom, baseline) id buňky, kde je nadpis sloupečku, ke kterému daná buňka náleží
Tabulky příklad <table id="demo-table"> <caption> Oceans </caption> <thead> <tr><th> </th><th> Area </th><th>mean depth</th></tr> <tr><th> </th><th>million km<sup>2</sup></th><th>m </th></tr> </thead> <tbody> <tr><th>arctic </th><td> 13,000 </td><td> 1,200 </td></tr> <tr><th>atlantic</th><td> 87,000 </td><td> 3,900 </td></tr> <tr><th>indian </th><td> 75,000 </td><td> 3,900 </td></tr> <tr><th>southern</th><td> 20,000 </td><td> 4,500 </td></tr> </tbody> <tfoot> <tr><th>total </th><td> 361,000 </td><td> </td></tr> <tr><th>mean </th><td> 72,000 </td><td> 3,800 </td></tr> </tfoot> </table> Table : Oceans Area Mean depth million km 2 m Arctic 13,000 1,200 Atlantic 87,000 3,900 Indian 75,000 3,900 Southern 20,000 4,500 Total 361,000 Mean 72,000 3,800
Shrnutí HTML je formát pro "značkování" textů a jejich vzájemné provázání je to "potomek" tzv. SGML formální specifikace je částečně daná strojově čitelným dtd dokumentem, částečně standardem sestává z tzv. prvků, které tvoří stromovou strukturu (DOM) prvky můžou mít vlastnosti (atributy) a potomky vizuální prezentace dokumentu (jak vypadá) je určena pomocí css stylů (viz dále) K dalšímu studiu... https://developer.mozilla.org/en-us/docs/html http://www.w3.org/tr/html4/ http://docs.webplatform.org/