Internet 1 vývoj, html, css

Save this PDF as:

WORD PNG TXT JPG

Rozměr: px

Začít zobrazení ze stránky:

Download "Internet 1 vývoj, html, css"

Denis Černý
před 1 lety
Počet zobrazení:

Transkript

Internet 1 vývoj, html, css Martin Hejtmánek hejtmmar@fjfi.cvut.

1 Internet 1 vývoj, html, css Martin Hejtmánek hejtmmar Počítačový kurs Univerzity třetího věku na FJFI ČVUT Znalci 19. března 2009

2 Dnešní přednáška 1 Historie Internetu 2 Základní principy 3 Jazyk html 4 Vývoj jazyka html 5 Internetové prohĺıžeče 6 Kaskádové styly css

3 Internet 1969 ARPANET Advanced Research Project Agency Net 1973 Univerzitní sít v USA Sdílení souborů 1989 Tim Berners-Lee, CERN Conseil Européen pour la Recherche Nucléaire Myšlenka hypertextu Jim Clark + Marc Andreessen Prohĺıžeč Mosaic

Adresování Propojené počítače Adresování pro počítač IP adresa např. 147.32.0.

4 Adresování Propojené počítače Adresování pro počítač IP adresa např Adresování pro lidi Systém DNS Domain Name System www. seznam.cz /soubor.html protokol subdoména jméno domény TLD cesta k souboru

5 Komunikace klient server Prohĺıžeč formuluje dotaz v http Server zpracuje dotaz Server odešle odpověd v http Prohĺıžeč interpretuje instrukce

6 Co se přenáší Textové soubory většinou Obrázky často Ostatní soubory

7 html údaje o vzhledu HyperText Mark-up Language Značkovací jazyk Veškeré formátování pomocí značek Narozdíl od např. Wordu

8 html značky ( = tagy) Označeny ostrými závorkami <p>, <b>, <table>, <body> Párové nepárové <p> začátek odstavce, </p> konec odstavce <img> vloží obrázek Parametry značek <p align="left">... </p> odstavec zarovnaný doleva Značky s obsahem = element

9 html značky ( = tagy) Párové značky se nesmí křížit <p><i>nějaký text<p></i> špatně! <p><i>nějaký text</i></p> správně

10 html značky ( = tagy) Znaky se speciálním významem Slouží k tvoření značek Přímý zápis pomocí tzv. znakových entit Znak Znaková entita < < > > & & " nedělitelná mezera

11 html tvorba stránky Obyčejný textový soubor Zápis textu a značek Uložení s příponou.html Dva způsoby otevření V poznámkovém bloku vidím kód V internetovém prohĺıžeči vidím stránku

12 html značky ( = tagy) Co se stránkou dělá prohĺıžeč? Má slovník a překládá.

13 html značky ( = tagy) Co se stránkou dělá prohĺıžeč? Má slovník a překládá.

14 html značky ( = tagy) Jakékoliv formátování pomocí značek Bílé znaky za sebou jsou interpretovány jako jeden Tyto zápisy jsou ekvivalentní:

15 html tagy podle účelu Vymezující oblasti stránky Děĺı stránku na části <html></html>, <head></head>, <body></body>

16 html tagy podle účelu Strukturní Tvoří nadpisy, odstavce, tabulky, seznamy <h1></h1>, <p></p>, <table></table>, <ol></ol>

17 html tagy podle účelu Vkládací Vkládají obrázky, odkazy na jiné stránky <link>, <img>, <a></a>

18 html tagy podle účelu Vzhledové Definují vzhled textu velikost a řez písma atd. <font></font>, <b></b>, <i></i>, <u></u>

19 html seznamy Číslované nečíslované Ordered List Unordered List, List Item <ol></ol>, <ul></ul>, <li></li> Položka seznamu List Item <li></li>

20 html tabulky <table></table> Tvoří se po řádcích Table Row <tr></tr> V rámci řádků buňky tabulky Table Data <td></td>

21 html odkazy a uspořádání webové prezentace Absolutní odkaz Adresa je vložena od začátku až do konce /index.html Relativní odkaz Adresa je určena vzhledem k aktuální pozici index.html (předpokládám, že jsem na ) Vážená paní Vážená paní Krasomila Rozkošná Krasomila Rozkošná Na Růžovém Vršku 7 Na Růžovém Vršku 7 Praha Česká republika

22 html odkazy a uspořádání webové prezentace Všechno v jedné složce Např. mojestranky/ Uvnitř složky další složky podle typu souborů Např. mojestranky/obrazky, mojestranky/dokumenty Jednotlivé html dokumenty přímo ve složce mojestranky/ Propojení relativními odkazy

komerce vkládání nových prvků Chaos 1994 Consortium

23 html vývoj 1989 Tim Berners-Lee původní čistě účelová forma Jen zobrazování informací Začátek komerce vkládání nových prvků Chaos 1994 Consortium W3C standardizace Doporučení prohĺıžečům, jak značky překládat

24 html vývoj 2002 Současná verze html html 4.02 Budoucnost xhtml (extensible HyperText Mark-up Language) Současně příprava na ostrou verzi xhtml xhtml 1.1 Přísnější pravidla pro tvorbu dokumentů

25 Internetové prohĺıžeče Hrubý odhad procentuálního zastoupení na trhu Internet Explorer Mozilla Firefox Opera Konqueror ostatní 70% 20% 8% 1% 1%

26 Válka prohĺıžečů Netscape Microsoft

27 css kaskádové styly css Cascading Style Sheets Pokročilý vzhled stránek Motivace oddělit strukturu dokumentu od vzhledu Velké množství výhod

28 Kaskádové styly historie 1994 První náznaky 1996 css 1 Netscape 4.0 Internet Explorer css 2 Pozicování prvků???? css 3

29 Kaskádové styly Soupis vlastností značek z html Např. color: blue; font-size: 20pt; Parametr style Např. <p style="color: blue; font-size: 20pt;"> Nebo značka <style></style> v hlavičce dokumentu

30 Kaskádové styly pozicování prvků Html značky <div></div>, <span></span> Uzavřou obsah do bloku Nastavíme jim pozici

Podobné dokumenty

Internet 2 css, skriptování, dynamické prvky

Internet 2 css, skriptování, dynamické prvky Martin Hejtmánek hejtmmar@fjfi.cvut.cz http://kmlinux.fjfi.cvut.cz/ hejtmmar Počítačový kurs Univerzity třetího věku na FJFI ČVUT Znalci 26. března 2009 Dnešní