Internet 1 vývoj, html, css 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 19. března 2009
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
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 http://info.cern.ch 1991 Jim Clark + Marc Andreessen Prohĺıžeč Mosaic
Adresování Propojené počítače Adresování pro počítač IP adresa např. 147.32.0.1 Adresování pro lidi Systém DNS Domain Name System http:// www. seznam.cz /soubor.html protokol subdoména jméno domény TLD cesta k souboru
Komunikace klient server Prohĺıžeč formuluje dotaz v http Server zpracuje dotaz Server odešle odpověd v http Prohĺıžeč interpretuje instrukce
Co se přenáší Textové soubory většinou Obrázky často Ostatní soubory
html údaje o vzhledu HyperText Mark-up Language Značkovací jazyk Veškeré formátování pomocí značek Narozdíl od např. Wordu
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
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ě
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
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
html značky ( = tagy) Co se stránkou dělá prohĺıžeč? Má slovník a překládá.
html značky ( = tagy) Co se stránkou dělá prohĺıžeč? Má slovník a překládá.
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í:
html tagy podle účelu Vymezující oblasti stránky Děĺı stránku na části <html></html>, <head></head>, <body></body>
html tagy podle účelu Strukturní Tvoří nadpisy, odstavce, tabulky, seznamy <h1></h1>, <p></p>, <table></table>, <ol></ol>
html tagy podle účelu Vkládací Vkládají obrázky, odkazy na jiné stránky <link>, <img>, <a></a>
html tagy podle účelu Vzhledové Definují vzhled textu velikost a řez písma atd. <font></font>, <b></b>, <i></i>, <u></u>
html seznamy Číslované nečíslované Ordered List Unordered List, List Item <ol></ol>, <ul></ul>, <li></li> Položka seznamu List Item <li></li>
html tabulky <table></table> Tvoří se po řádcích Table Row <tr></tr> V rámci řádků buňky tabulky Table Data <td></td>
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 25 125 00 Česká republika
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
html vývoj 1989 Tim Berners-Lee původní čistě účelová forma Jen zobrazování informací 1991-1994 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
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ů
Internetové prohĺıžeče Hrubý odhad procentuálního zastoupení na trhu Internet Explorer Mozilla Firefox Opera Konqueror ostatní 70% 20% 8% 1% 1%
Válka prohĺıžečů Netscape Microsoft
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
Kaskádové styly historie 1994 První náznaky 1996 css 1 Netscape 4.0 Internet Explorer 4.0 1998 css 2 Pozicování prvků???? css 3
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
Kaskádové styly pozicování prvků Html značky <div></div>, <span></span> Uzavřou obsah do bloku Nastavíme jim pozici