Co je to webová prezentace? zjednodušeně souhrn informací (textových, zvukových, obrazových.... prezentovaný v počítačové síti (většinou internetu) .....může být i intranet HTML HTML (Hypertext Markup Language) je základní značkovací jazyk, umožňující publikování informací na internetu. Jazyk je aplikací dříve vyvinutého univerzálního značkovacího jazyka SGML (Standard Generalized Markup Language). Aplikací proto, že meta-jazyk SGML umožňuje pomocí schémat DTD definovat, které značky jsou přípustné a jak a kde je používat. Definováním vhodné podmnožiny značek a vytvořením příslušného DTD tedy vzniklo HTML. SGML Na začátku bylo SGML V roce 1986 byla vydána norma ISO 8879, která si kladla za cíl vytvořit formát, který by umožňoval uložení textů v elektronické podobě a přitom byl nezávislý jak na softwarové, tak na hardwarové platformě a poskytoval dostatečnou flexibilitu. Jazyk definovaný touto normou dostal název Standard Generalized Markup Language (SGML). http://csharpcomputing.com/XMLTutorial/xmlevolution.jpg Webové prezentace vs. internet nhttp://info.cern.ch/ nhttp://www.w3.org/ Tim Berners-Lee a zrození HTML V roce 1989 Tim Berners-Lee vytvořil návrh na hypertextový dokumentový systém určený pro použití v rámci komunity CERN (CERN Data Centre). Ačkoliv má CERN sídlo ve Švýcarsku, jeho členové byli rozptýleni po celém světě a projekty se často střídaly. Požadavek spolupráce na dlouhé vzdálenosti, rychlé začleňování nových členů do týmů a uchování informací v souvislosti s rychlou obměnou týmů byly hnací silou ve vývoji navrhovaného systému. Tento systém, který Berners-Lee, později nazval termínem "World-Wide Web" (v říjnu 1990), definoval několik důležitých podmínek nutných k realizaci této vize, a které v kostce, definují i povahu dnešního WWW: ●Musí být multiplatformní, tj. nezávislý na konkrétním počítači, operačním systému, atd. ●Musí být schopen používat mnoho stávajících informačních zdrojů, systémů a zároveň umožňovat snadné přidávání nových informací. ●Vyžaduje transportní mechanismus pro přesunování dokumentů po sítích (vyvinul se do HTTP) ●Je potřeba identifikační schéma pro adresování lokálních i vzdálených hypertextových dokumentů (vyvinul se v URL řešení) ●Vyžaduje jazyk pro formátování hypertextových dokumentů. Toto nebylo výslovně uvedeno, ale bylo to nedílnou součástí prezentace získaných informací (vyvinul se do HTML). [USEMAP] V roce 1990 Tim Berners-Lee napsal první webový prohlížeč, který nazval WorldWideWeb. Prohlížeč běžel na platformě NeXT, využíval základní stylové předpisy (stylesheets) a umožňoval stahování a otevírání souborů, které podporoval mateřský OS NeXTSTEP (Postscript, videa a zvuky). Obrázky zpočátku otevíral v samostatných oknech. Využíval pro tento účel vytvořený protokol HTTP a jazyk HTML. První www stránka – 6. srpna 1991: http://info.cern.ch/hypertext/WWW/TheProject.html V roce 1991 CERN sprovoznil svůj web, resp. diskuzní skupinu na téma dalšího vývoje HTML. Krátce poté, v roce 1992, organizace NCSA (National Center for Supercomputer Applications) vybídla Marca Andreessena a Erica Binu k vytvoření prohlížeče Mosaic; ten vznikl v roce 1993 ve verzích pro počítače IBM PC a Macintosh a měl obrovský úspěch. Byl to první prohlížeč s grafickým uživatelským rozhraním. Následoval prohlížeč Netscape Navigator (1994) a Internet explorer (1995). Vývoj webových prohlížečů také zpětně ovlivňoval definici jazyka HTML. Mosaic http://www.camelcitydispatch.com/wp-content/uploads/2014/03/timbl-next.jpg Statistika nhttp://www.zakon.org/robert/internet/timeline/ správná syntaxe html ntagy (párové / nepárové): n libovolný obsah n

nadpis první úrovně

n ntohle
tohle natributy n n
správná struktura html n titulek html dokumentu tělo stránky (vše co se na stránce zobrazí) Blokové elementy v HTML nP – odstavec n

vycentrovaný odstavec

nBr - zalomení řádku ntext text text
text na dalším řádku n naddress n
Franta Knápek
Pardubice
Radlice 2
n nh1-h6 n

nadpis první úrovně

nadpis druhé úrovně

nadpis třetí úrovně

nadpis čtvrté úrovně

nadpis páté úrovně
nadpis šesté úrovně
n n nHr - vodorovná čára n n
Fyzické formátování v HTML nI – kurzíva npísmo zobrazené v kurzívě výsledek: písmo zobrazené v kurzívě n nB - tučné písmo ntučné písmo výsledek: tučné písmo n nU - podtržené písmo npodtržené písmo výsledek: podtržené písmo nSup - horní index nm2 výsledek: m2 n nSub - dolní index nH2O výsledek: H2O n nBig - větší písmo nvětší písmo výsledek: větší písmo n nSmall - menší písmo nmenší písmo výsledek: menší písmo nS - přeškrtnuté písmo npřeškrtnuté písmo výsledek: přeškrtnuté písmo n nBlink – blikání nblikající písmo výsledek: blikající písmo n nFont – písmo n text jakýkoliv npříklad n Určení znakové sady nUmístění meta tagu do hlavičky – kódování češtiny a dalších jazyků se specifickými znaky n n HTML kódy na pozadí - barvy n…… n HTML kódy na pozadí natribut bgcolor n HTML kódy na pozadí - barvy

Tato stránka bude mít zelené pozadí...

Pomocí hexa kódu n HTML kódy na pozadí - barvy

Tato stránka bude mít takovéhle #003366 pozadí...

Obrázek na pozadí n HTML kódy na pozadí - obrázek

Tato stránka bude mít na pozadí obrázek... Seznam nli /položka seznamu/ nnepovinně párový n nul /odrážkový (nečíslovaný) seznam/ n nol /číslovaný seznam/ n n n n nečíslovaný seznam natribut Type n n Atribut type se používá k nastavení druhu odrážky na výběr jsou tři puntík,kolečko a čtverec Hodnoty jsou disc(puntík), circle (kolečko), square(obdélník). Type se může zapisovat v ul i li. n n n

Číselný seznam nType - atribut n U číselných seznamů se atribut type používá k nastavení druhu číslic hodnoty jsou: 1(normální číslování), A(velká písmena), a(malá písmena), I(římské číslice), i(malé římské číslice).Type se může zapisovat v ol i li. nStart - atribut n Atribut start se používá k změně počátečního čísla nebo písmena. Odkazy nA - odkaz n A je párový tag obsahuje atributy bez kterých by nefungoval. Jako text odkazu se zobrazí to co je mezi tagy a můžete zadat text nebo i obrázek který bude sloužit jako odkaz.. Atribut Href (cesta) nTento atribut se používá k zadání URL( co je to url = adresa ) jeho hodnotou je cesta k souboru může se použít absolutní nebo relativní. jako absolutní se uvede např. http://www.seznam.cz Na začátku musí být to http:// jinak by to fungovalo jako relativní v relativní adrese se může napsat pouze jméno souboru např. stranka.html pokud je stránka v dalším pod adresáři použije se ve tvaru adresar/stranka.html atribut target nAtribut target se používá k nastavení okna v kterém se bude stránka načítat se využije hlavně s rámy které dokážou okno stránky rozdělit na několik částí. Např: n_blank (nové okno) n_self (totéž okno) protokol mailto nPro odkaz na e-mail musíte zadat jiný protokol pro odkaz se použije protokol mailto: existují další (gother, telnet, file, ftp). Atribut NAME nNeboli záložka n nPři odkazování na záložku se před jméno záložky doplní znak #. n noznačený text nadpisu odkaz na nadpis n n Vložení obrázku nImg - obrázek n Obrázky se vkládají na stránku nepárovým tagem img možné grafické formáty jsou gif, jpeg, png. Pomocí tagu img také můžete na stránky vložit video ale musíte zaměnit atribut src za dynsrc. Atribut src nSrc - cesta k souboru n U obrázků je src nejdůležitější atribut, jako jeho hodna se uvádí cesta k souboru může se použít relativní i absolutní. n Atribut alt nAlt - popis obrázku n Atribut alt slouží jako alternativní text zobrazuje se pokud se nezobrazí obrázky nebo po najetí na obrázek ve žluté bublině, jako hodnota se používá popis obrázku. n popis obrázku Width a height - šířka a výška natribut šířky a výšky, udává se v pixelech Tabulky nNa internetových stránkách se tabulky používají ve dvou případech: n1) Jestliže je potřeba udělat klasickou tabulku. n2) Jako pomůcka pro úpravu stránek, když je něco potřeba někam umístit (např. sloupcová sazba). n Nejjednodušší tabulka n
Obsah buňky Další buňka
levá spodní pravá spodní
Co znamenají jednotlivé tagy: n n Párový tag, který začíná tabulku. n n Párový tag, který začíná a končí řádek tabulky. (TR znamená table row, čili řádek). n
n Tag buňky tabulky. Tag pro hlavičkové pole n n se dá použít namísto , ale znamená to hlavičkové pole. Obsah bývá tučný a zarovnaný na střed. Používání této značky se doporučuje kvůli automatickému zpracování textu Atributy v tabulkách nborder n atribut tagu , který nastavuje šířku vnějšího rámečku kolem tabulky (v obrazovkových bodech); kdyby bylo border="0", nevykreslí se ani vnitřní mřížka ncellpadding n vnitřní okraj buněk (v pixelech), čili vzdálenost textu od rámečku. Taktéž atribut tagu
ncellspacing n vnější okraj buněk (vně rámečku) Příklad zobrazení border, cellpadding a cellspacing n nVšechno, co je v HTML souboru obaleno značkami , je považováno za poznámku a nezobrazuje se. její konec.