PORTÁLOVÉ SYSTÉMY I. Přednáška č. 2 Jan Górecki gorecki@opf.slu.cz > Prostředí portálů •Internet –Celosvětový systém navzájem propojených počítačových sítí –Služby •WWW •E-mail •FTP •VoIP •Instant messaging •DNS – domény •Sdílení souborů •Připojení ke vzdálenému počítači •Cloud – Jazyky •HTML (HyperText Markup Language) –Značkovací jazyk pro hypertext –Od roku 2007 se opět vyvíjí –Dokončuje se specifikace verze 5 (navrhována konsorciem firem W3C) •XHTML (Extensible Hypertext Markup Language ) –značkovací jazyk pro tvorbu hypertextových dokumentů v prostředí WWW vyvinutý W3C (mezinárodní konsorcium, jehož členové společně s veřejností vyvíjejí webové standardy pro World Wide Web) –Vývoj XHTML 2.0 – slepá větev – Jazyky •CSS (Cascading Style Sheets) –Jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo WML (Wireless MarkUp Language) –Aktuálním standardem je verze CSS3 (konsorcium W3C) –Hlavním smyslem je umožnit návrhářům oddělit vzhled dokumentu od jeho struktury a obsahu – Jazyky •PHP (Hypertext Preprocessor) –Skriptovací programovací jazyk, určený především pro programování dynamických internetových stránek –Začleňuje se přímo do struktury jazyka HTML Jazyky •JAVA –objektově orientovaný programovací jazyk –Čipové karty (JavaCard) –Mobilní telefony (JavaME) –Aplikace pro desktopové aplikace (JavaSE) –Distribuované třívrstvé systémy (JavaEE) –Od roku 2007 JAVA vyvíjena jako opensource HTML –HTML lze kódovat pomocí SGML (Standard Generalized Markup Language) - HTML •SGML je univerzální značkovací metajazyk, který umožňuje definovat značkovací jazyky jako své vlastní podmnožiny –Budeme se věnovat verzi 5 •v této verzi lze používat i všechny prvky známé z verze 4 •přehled motivací a nápadů, jak a proč HTML5 používat už dnes lze najít v http://diveintohtml5.info (nebo česky http://kniha.html5.cz/) •Podporují Chrome, Firefox, IE, Opera, Safari, Edge. HTML •Dokument HTML –textový formát (ASCII) –přípona .htm, .html –není nutná kompilace do binárního nebo jiného kódu –soubory v binárním tvaru (obrázky, zvuky) nejsou přímo součástí souboru HTML, jsou na ně umístěny pouze odkazy •Elementy –části www stránky (HTML dokumentu) –např. odstavec, tabulka, obrázek, nadpis •Příkazy jazyka (Tags, značky) –značení elementů v HTML dokumentu – • • HTML • element •Formát příkazu HTML –p1, p2, …, pn •parametry příkazu •odděleny mezerami (tabelátory nebo oddělovači řádků) •pořadí není v rámci příkazu významné –h1, h2, …, hn •hodnota parametru •u HTML uvozovky povinné v případě textu s mezerami •délka hodnoty parametru max. 1024 znaků •Příklad: •text odkazu HTML •Párové příkazy –počáteční, koncový příkaz –uzavírají mezi sebe formátovaný element –vymezují oblast, na kterou se formátování vztahuje – –Tento text bude tučnýa tento už ne. – •Vnořování párových příkazů –není dovoleno křížení (prohlížeče je však umožňují) – –Tento text bude tučný, –tento tučný a podtržený –tento zase jen tučný –a tento obyčejný. • HTML •Nepárové příkazy –neobsahují koncový příkaz –vztahují se na celý dokument nebo na element, který je sám o sobě vymezen (obrázek, čára) –
,
, –„moje – – – • • • Obecná syntaxe jazyka HTML •u názvů příkazů nezáleží na velikosti písma (, ,) •dvě a více mezer v kódu mají význam jako jedna mezera •konec řádku v kódu není speciálně označen (mezera) •parametry příkazu nemusí být v uvozovkách (kromě textu s mezerami) • • • Obecná syntaxe jazyka HTML •HTML Komentáře –text poznámky se vkládá mezi značky –ignorovány prohlížečem –může obsahovat více řádků • • • Reakce prohlížeče na chyby –SGML tvrdí, že neznámý tag je prohlížečem ignorován a jiné druhy chyb by se měl prohlížeč snažit zobrazit. Nezobrazení SGML dokumentu je zapříčiněno větší chybou. Struktura HTML dokumentu •Dokument ohraničen párovým příkazem •1. Specifikace DTD (Document Type Definition) –definice použité verze jazyka dokumentu •2. Hlavička dokumentu –ohraničena párovým příkazem –definiční část dokumentu –informace o obsahu dokumentu (název, klíčová slova) –parametry pro prohlížeče, vyhledávací stroje atd. •3. Tělo dokumentu –ohraničeno párovým příkazem –obsah dokumentu • • • Příklad dokumentu v HTML 5 • • • • • • Titulek stránky • • • •

Nadpis stránky

•

Toto je tělo dokumentu

• • HTML značky 1 • - bold, underlined, italic • - úsek textu •
- oddíl •

- nový odstavec •
- řádkový zlom • - tabulka • - odkaz • - obrázek • •
    • - seznamy • •Modré značky: nazpaměť Kde se dozvím další značky? A kde si to můžu vyzkoušet? •Česky: •jakpsatweb.cz • •Anglicky: •w3schools.com • •Např: (značka
): •http://www.w3schools.com/html/html_tables.asp • •Zkusit značky z předchozího slajdu (div a span). HTML značky 2 •Portál Seznam •Jak psát web •
• • • • • • • • •
horní levá buňkahorní pravá
dolní levádolní pravá
• HTML příklad • • • • • • • •Vytvořte HTML kód, který vygeneruje stránku dle obrázku Děkuji za pozornost