Stáhnout prezentaci
Prezentace se nahrává, počkejte prosím
1
WWW stránky
2
Trocha teorie Www stránky bývají nejčastěji psány v programovacím jazyku html Všechny potřebné informace pro zobrazení webové stránky se nacházejí ve zdrojovém kódu Webová stránka je psána pomocí tagů Webové stránky se dají tvořit v html editorech Nebo také lze psát čistý zdrojový kód např. v poznámkovém bloku
3
Vytvoření www stránky Vytvoříme si Nový textový dokument (pravé tlačítko myši/Nový/Textový dokument) Klikneme na Soubor/Uložit jako Název souboru: index.htm Potom si otevřeme soubor index.htm Klikneme na Zobrazit/zdrojový kód (zkratka alt+z+z) Otevře se textový dokument a v něm můžete upravovat kód
5
Základní struktura Začátek a konec dokumentu
Hlavička, nezobrazuje se, jsou v ní důležité informace Název dokumentu Tělo dokumentu. Co je zde napsáno bude se zobrazovat
6
Tagy Tagy jsou uzavřeny v ostrých závorkách <>
Tagy můžeme rozdělit na párové nebo nepárové Párové tagy jsme viděli již v základním rozdělení webové stránky např. <html></html> Tagy mohou mít své parametry. zadání: nazevparametru=”hodnota“
7
Metainformace HTML značka <META>
Řídí způsob, jakým je stránka v síti WWW indexována. Uvádí se v hlavičce HTML dokumentu (mezi značkami <HEAD> a </HEAD>). Nejsou-li dostupné žádné další informace, budou indexována všechna slova vašeho dokumentu (s výjimkou poznámek) a několik prvních slov dokumentu bude použito jako krátká ukázka ve vráceném seznamu odpovědí na příslušný dotaz.
8
Meta tagy Nejdůležitější pro indexování jsou "description" a "keywords". "Description" vrací námi definovaný popis stránky na místě výpisu vyhledávací služby. "Keywords" poskytuje klíčová slova (jejich možné kombinace) pro vyhledávací službu k jejich přidružení s příslušným URL..
9
Barvy Lze zadávat několika způsoby.
1. název barvy např. <font color=“red”> 2. pomocí šestnáctkového zápisu modelu RGB (z ang. red (červená), green(zelená), blue(modrá) ) <font color=“#000000”> každá barvy je zastoupena dvěma čísly, ty mohou nabývat hodnoty 00-ff
10
Obrázky - grafika Pro vkládání obrázku existuje tag <img>
Parametry: src - umístění souboru s obrázkem, relativní nebo absolutní adresa souboru (URL) alt - alternativní popis (text) width a height – šířka a výška obrázku v procentuální hodnotě nebo v pixelech align - left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom
11
Formátování textu <b>tučný text <i>kurzíva
<u>podtržení <font> formátuje text pomocí parametrů v závorce možné hodnoty Parametry: size-velikost textu (1-7) Face-typ fontu písma (např. Arial) Color-barva (viz v kapitole o barvách)
12
Příklad
13
Parametry tagu body bgcolor barva pozadí background obrázek na pozadí
bgproperties (fixed, scroll) fixed-pozadí se neposouvá společně s textem, sroll-posouvá se s textem link barva nenavštívených odkazů vlink barva navšvtívených odkazů alink barva odkazů na které je kliknuto
14
Bloky textu a nadpisy <p> odstavec <br> řádkový zlom
<center> vycentrování <h1> nadpis úrovně 1 (podobně <h2>-<h6>) <hr> čára parametry tagu <p>: align-zarovnání (left, center, right, justify (do bloku) )
15
Seznamy <li> položka seznamu <ol> číslovaný seznam
<ul> odrážkový seznam Ukázka použití <ol> <li>první položka</li> <li>druhá položka</li> </ol> parametry <li> type, square (čtvereček), circle (kolečko), disc (puntík), 1 (normální číslování), A (velká písmenka), a (malá písmenka) I (velké řím. číslice), i (malé řím. číslice)
16
Příklad
17
Odkazy Po kliknutí na odkaz se nám zobrazí jiná webová stránka
používá se tag <a> parametry <a>: href: cíl odkazu (název souboru, adresa www stránky, či název záložky (slouží k odkazu na jiné místo v dokumentu) ) name: název záložky příklad použití záložky <a name=“#1”> <a href=“#1”>nahoru</a> Po kliknutí na „nahoru“ se naroluje stránka na místo, kam je vložená záložka
18
Tabulky – základ života
Tag table tvoří tabulku tr a td – řádek a buňka tabulky align - obtékání tabulky textem Cellpadding a cellspacing vnitřní a vnější okraj buněk (pixely) Border - šířka rámečku buněk (pixely) Width - minimální šířka tabulky Height - minimální výška Background - obrázek na pozadí (URL obrázku) Bordercolor - barva rámečku BgColor – barva pozadí tabulky
19
KONEC PREZENTACE Vypracovali: Tomáš Daniel Jan Králík
Podobné prezentace
