Internet 1 vývoj, html, css

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

HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy

Úvod do aplikací internetu a přehled možností při tvorbě webu

Tvorba webových stránek

DUM č. 11 v sadě. 36. Inf-12 Počítačové sítě

Mgr. Vlastislav Kučera přednáška č. 1

Úvod do tvorby internetových aplikací

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

Vývoj Internetových Aplikací

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

Mgr. Vlastislav Kučera přednáška č. 1

HTML Hypertext Markup Language

Tvorba webových stránek

INTERNET. Vypracoval: Mgr. Marek Nývlt

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

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

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

Kaskádové styly základy grafiky

MODERNÍ WEB SNADNO A RYCHLE

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

Základy WWW publikování

WWW a HTML. Základní pojmy. Ivo Peterka

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

Tvorba webu. Úvod a základní principy. Martin Urza

APLIKACE XML PRO INTERNET

Stránka se dá otevřít dvěma způsoby

22. Tvorba webových stránek

HTML - Úvod. Zpracoval: Petr Lasák

CSS styly. Cascading Style Sheets kaskádové styly

Historie Internetu instalace prvního uzlu společností ARPA

Tvorba internetových stránek

Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN

Tvorba stránek v HTML ve Wordu

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

HTML. ICT_01., 02. konzultace; 2. ročník 1/6

Úvod do jazyka HTML (Hypertext Markup Language)

NSWI096 - INTERNET. Úvod do HTML

(X)HTML a CSS. VOŠ a SŠT Česká Třebová

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

Tvorba webových stránek

Základy HTML. Autor: Palito

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

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

Inovace bakalářského studijního oboru Aplikovaná chemie

Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web,

Uspořádání klient-server. Standardy pro Web

<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

CZ.1.07/1.5.00/

Kaskádové styly (CSS)

Dokument ve formátu webové stránky vytvořený pomocí XHTML a CSS

Úvod do informatiky 5)

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

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

Internet WEB stránky HTML, Hypertext MarkUp Language - nadtextový jazyk - Místo příkazů obsahuje tagy - značky

Jemný úvod do HTML. Co je HTML značka? Web nezná text formátovaný mezerami a konci řádku! Ale já potřebuji psát více mezer a určovat zalomení řádku!

(X)HTML-TAGY. VOŠ a SŠT Česká Třebová

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

Tvorba jednoduchých WWW stránek. VŠB - Technická univerzita Ostrava Katedra informatiky

Tvorba fotogalerie v HTML str.1

Internetové publikování

CSS Selektory tříd a ID, dědičnost, další vlastnosti. Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace

Dokumenty umístěné na počítačových serverech jsou adresovány pomocí URL (Uniform Resource Locator).

Registrační číslo projektu: Škola adresa:

Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML

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í

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

Tvorba jednoduchých WWW stránek. VŠB - Technická univerzita Ostrava Katedra informatiky

Mgr. Stěpan Stěpanov, 2013

Textový editor Microsoft Word 2. Martin Hejtmánek

Internet 3 publikování na webu, zásady bezpečnosti

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

Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: str ánk y. Vytvořil: Petr Lerch.

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

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

Mgr. Vlastislav Kučera přednáška č. 2

tvoříme web HTML/CSS

Web. Získání informace z internetu Grafické zobrazení dat a jejich struktura Rozšíření funkcí pomocí serveru Rozšíření funkcí pomocí prohlížeče

Publikování map na webu - WMS

Manuál k editoru TinyMCE

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

Základní pojmy spojené s webovým publikováním ~ malý slovníček pojmů~ C3231 Základy WWW publikování Radka Svobodová, Stanislav Geidl

Identifikátor materiálu: ICT-3-55

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

Základy XML struktura dokumentu (včetně testových otázek)

CSS Kaskádové styly. formátování webových stránek

Co je HTML. 1. Párový tag má začátek a konec: 2. Nepárový tag nemá ukončovací značku:

Název: VY_32_INOVACE_PG4120 Literatura, online zdroje informací, testy

Tvorba WWW stránek. Mojmír Volf

Mgr. Vlastislav Kučera lekce č. 2

VÝVOJ INTERNETOVÝCH APLIKACÍ - VIA

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

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

Fiktivní firma. Žáci získají základní informace o přípravě a tvorbě webových stránek. Na konci prezentace je úkol, se kterým žáci samostatně pracují.

Nové přístupy tvorby web site. Doc. Ing. Zdeněk Havlíček, CSc. KIT PEF CZU - 13/11/2001

Část 1. Úvod. 1.1 Technické pozadí HTML a web HTML a XHTML Myšlenka CSS Další technologie 48

Naše Město Web design

Formátování obsahu adminweb

Webové stránky. 5. Kaskádové styly formátování textu. Datum vytvoření: str ánk y. Vytvořil: Petr Lerch.

7.CVIČENIE. Základy HTML

Transkript:

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