lekce-02.

Transkript

lekce-02.

Mgr. Vlastislav Kučera
Struktura stránky, hlavička, …






Struktura stránky
hlavička
meta tagy
titulek stránky
připojení stylů, ...
CSS
<doctype html>
<html lang="cs">
<head>
<meta charset="Windows-1250">
<title>To je to, co se zobrazí v titulkové liště
prohlížeče</title>
</head>
<body>
</body>
</html>


uvozena tagy <head></head>
vše, co je mezi nimi obsaženo, se nezobrazí


nepárový tag
syntaxe:
◦ <meta name="" content=""/>
 pro zadání popisu webu, klíčových slov, autora, ...
◦ <meta charset=""/>
 pro zadání kódování

více na:
◦ http://interval.cz/clanky/kurz-html-jak-na-metatagy-v-html/
◦ http://interval.cz/clanky/xhtml-element-meta-ajeho-pouziti/
◦ http://www.jakpsatweb.cz/meta-tagy.html

nastavení kódování
◦ charset
 utf-8
 windows-1250
◦ př.:
 <meta charset="utf-8" >

popis stránky
◦ name
 description
◦ content
 popis dokumentu (webu, ...)
◦ př.:
 <meta name="description" content=„Stručný
popis webu." />

klíčová slova
◦ name
 keywords
◦ content
 klíčová slova, která se váží ke stránce, k webu, ...
◦ př.:
 <meta name="keywords" content=„UHK, PdF," />

autor
◦ name
 author
◦ content
 jméno tvůrce, mail, ...
◦ př.:
 <meta name="author" content="Vlastislav Kučera;
[email protected]" />

copyright
◦ name
 copyright
◦ content
 informace o copyrightu, ...

roboti
◦ name
 robots
◦ content
 all
 robot může stránku zanést do databáze (zaindexovat) i procházet
stránky, na které jsou v ní odkazy
 výchozí nastavení
 index
 robot může stránku zaindexovat
 nofollow
 robot nesmí procházet odkazy
 noindex
 robot stránku nesmí zaindexovat

robots.txt
◦ náhrada za meta robots
◦ umístěn v kořenovém adresáři webu (jinými slovy, tam co je
výchozí soubor webu)



párový tag
<title></title>
př.:
◦ <title>To je to, co se zobrazí v titulkové liště
prohlížeče</title>

<link rel="stylesheet" href="style.css" >

Pro srovnání
o
<link media="screen" rel="Stylesheet"
type="text/css" href="css/hlavni.css" />

Interní styly
◦ tag <style></style>
◦ př.:
 <style type="text/css">
 (XHTML: /* ]]> */)
</style>




oddělení struktury dokumentu od jeho
formátování bylo cílem HTML od samých počátků
v roce 1990
bohužel nedošlo ze strany autorů prohlížečů k
rozvinutí této koncepce
jak stoupala popularita webu, autoři stránek
neměli možnost ovlivnit vzhled svých HTML
dokumentů
dvě reakce:
◦ listopad 1994 – 1. koncept "Cascading HTML Style Sheet"
◦ listopad 1994 – Netscape – místo implementace
stylového jazyka zabudoval základní formátovací
prostředky přímo do jazyka HTML

CSS1
◦ prosinec 1996

CSS2
◦ květen 1998

CSS3
◦ zatím neuveden, stále ve stadiu příprav

IE
◦ částečná podpora CSS1 – IE3

Netscape
◦ NN4 – v důsledku konkurenčního boje spíše chybová

Opera
◦ od verze 3.5


tag <script>
př.:
◦ <script src="js/script.js"></script>


interně
př.:
◦ <script></script>

širší formátovací možnosti
◦ několik příkladů
 <b> - v HTML nastavuje tučné písmo; v CSS pomocí font-weight lze sílu
písma nastavit až v devíti stupních
 <hr /> - v HTML – čára (horizontální), lze nastavit sílu, styl (3D, plochá),
barvu; v CSS pomocí border lze vytvořit až 8 stylů čar o libovolné síle a
barvě, lze tvořit i vertikální čáry
 <ol> - v HTML – lze určit jeden ze tří možných stylů odrážky; v CSS
pomocí list-style-image lze pro odrážky použít libovolný obrázek

snadná tvorba a údržba stylu

oddělení struktury a stylu
◦ údržba webu, který nevyužívá CSS, je velmi složitá a zdlouhavá
(nalézt a nahradit tagy <font>, změnit atributy tabulek, ...)
◦ lepší "dělba" práce
◦ tentýž obsah lze prezentovat různými způsoby

3 metody
◦ tag <link>
 používá se pro připojení ext. styl. předpisu
◦ tag <style>
 používá se pro vložení interního styl. předpisu
◦ parametr style u HTML tagů
 používá pro přiřazení stylu konkrétnímu tagu


vkládá se výhradně do hlavičky dokumentu (mezi tagy <head> a </head>)
př.:
<style>

</style>
<style media="all">
/* <![CDATA[ */
/* ]]> */
</style>


parametry
◦
◦
◦
type – typ odkazovaného předmětu, v tomto případě hodnota – text/css
media – určuje média, pro které je stylový předpis určen, není povinný (screen, print, …)
title – textový titulek danému styl. předpisu
◦
◦
zvětšuje objem dokumentu (načítá se s každou stránkou)
obtížně se udržují (každá změna se musí provést ve více dokumentech)
méně praktický

výhoda
◦ snadné testování


nedoporučuje se používat
př:
◦ <h1 style="text-align: center; text-decoration:
underline;">
◦ <p style="color: #FF0; background-color: #000;
text-indent: 1.2em">

př: H1 {color: red; text-decoration:
underline;}
◦ H1 – selektor
◦ color, text-decoration – vlastnost
◦ red, underline – hodnota

povolené znaky
◦ na velikosti nezáleží (neplatí pro prvky, které nejsou
součástí CSS)
◦ jména prvků, tříd a ID v selektorech – písmena
anglické abecedy, číslice, pomlčku; nesmí začínat
pomlčkou nebo číslicí

komentář: /* .... */

lekce-02.

Transkript

Podobné dokumenty

Příloha č.1 - Specifikace zakázky

Kaskádové styly

Začínáme s optimalizací pro vyhledávače

Podrobný obsah v pdf

celý katalog v PDF

Studijní opora. - Katedra technické a informační výchovy PdF UP v

Mladá frontahledá posily doonline divize!

Vyhledávání na webu - Střední průmyslová škola a Vyšší odborná

TEST – znám Word?

Přehled html a css vlastností

Windows Longhorn

Mikina s kapucou DOG BERRY

CSS reference

Předmluva - Informace studentům

E. Moravec) vytýkány některé příliš loyální projevy k Říši, ale celkem

XPAth

Specifika ovládání webových aplikací pro mobilní zařízení

Znaková sada

Z Á JMOV É KROU Ž KY - VOŠ a SPŠ elektrotechnická Františka

Problém kódování češtiny

Výhody použití CSS - Inovace bakalářského studijního oboru

OCHRANNÁ ZÓNA - fotografie - Praga