2.ročník IKT - Tvorba Webových Stránek

Základy

Co je to webová stránka?

Webová stránka je jedna určitá stránka na jedné určité adrese. Zobrazuje se jako dokument internetového prohlížeče po zadání příslušné URL adresy, většinou pomocí World Wide Webu (WWW).

Data jsou psána kódem pomocí značkovacího jazyka HTML nebo XHTML a kaskádových stylů CSS. Html dokument je zdrojovým kódem webové stránky.

Struktura Html Dokumentu

HTML dokument se skládá z hlavičky a těla. V hlavičce jsou různé informace o stránce, v těle je vlastní obsah stránky, který se zobrazí v okně prohlížeče.

Odkazy

Jak se dělá odkaz?

Odkaz se vytvoří tagem <a>

Vše, co je mezi značkami <a> a </a> bude sloužit jako odkaz (tzn. bude klikatelné).Uvnitř elementu <a> se může objevit skoro cokoliv. Často se odkazem obaluje obrázek, který tak bude celý sloužit jako odkaz.Href se zapisuje jako URL.

Příklady odkazů

Odkaz na stránku seznam.cz
Odkaz na konkrétní článek na seznamu
Odkaz na pokusný dokument, který je na stejném místě
Odkaz na pokusný dlouhýýýýý dokument, který je na stejném místě

Odkay na první kapitolu dlouhého dokumentu.
Odkay na 2.kapitolu dlouhého dokumentu.
Odkay na předposlední kapitolu dlouhého dokumentu.
Odkay na poslední kapitolu dlouhého dokumentu.
tento odkaz se otevře v novém okně
tento odkaz se otevře v novém okně jménem susunka
tento odkaz se otevře v novém okně jménem susunka

Obrázky

Jak vložit obrázek do HTML stránky?

Odkaz se vytvoří tagem <img> Tady svymi slovy vysvětlím...

Obrázek (angl. image). Nepárový tag. Do stránky se vloží obrázek načtený z obrázkového souboru. Pokud soubor obrázku nebude nalezen (typicky protože je adresa zadaná špatně), zobrazí se ve stránce zástupný symbol nenalezeného obrázku (nejčastěji červený křížek) se zástupným textem.Obrázek lze zapsat také přímo do HTML nebo CSS souboru pomocí schématu data:. Já sám to nepoužívám.

Příklady




Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ornare wisi eu metus. Nulla quis diam. Nam sed tellus id magna elementum tincidunt. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Donec iaculis gravida nulla. Vivamus porttitor turpis ac leo. Cras pede libero, dapibus nec, pretium sit amet, tempor quis.

Závěr

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris dictum facilisis augue. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Integer malesuada. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Aliquam erat volutpat. Integer vulputate sem a nibh rutrum consequat.

Integer imperdiet lectus quis justo. Nam sed tellus id magna elementum tincidunt. Integer lacinia. Proin mattis lacinia justo. Nullam at arcu a est sollicitudin euismod. Proin in tellus sit amet nibh dignissim sagittis. Maecenas lorem. Curabitur bibendum justo non orci. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Praesent id justo in neque elementum ultrices. Nulla non lectus sed nisl molestie malesuada.


CUM sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce tellus. Integer in sapien. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nulla quis diam. Phasellus faucibus molestie nisl. Aenean placerat. Vestibulum fermentum tortor id mi. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Nulla accumsan, elit sit amet varius semper.

Fusce wisi. Curabitur vitae diam non enim vestibulum interdum. Nullam rhoncus aliquam metus. Et harum quidem rerum facilis est et expedita distinctio. Maecenas sollicitudin. Nulla non arcu lacinia neque faucibus fringilla. Nulla non lectus sed nisl molestie malesuada. Nullam sit amet magna in magna gravida vehicula. Mauris metus. Quisque porta.

In enim a arcu imperdiet malesuada. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Duis risus. Duis pulvinar. Pellentesque ipsum. Maecenas aliquet accumsan leo. Curabitur bibendum justo non orci. Fusce consectetuer risus a nunc. Ut tempus purus at lorem. Aenean vel massa quis mauris vehicula lacinia. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Tuto stránku vytvořil Jan Hipp