13. lekce - opakování
Opakování matka moudrosti - ve stručném přehledu si shrneme základní elementy webových stránek (HTML) a jejich vlastnosti (CSS) zhruba v tom pořadí, jak jsme je probírali v minulých lekcích.
Prvky stránek - tagy (elementy)
Stránka se dělí na hlavičku a tělo. V hlavičce jsme zatím použili jen titulek, tělo stránky obsahuje její zobrazovaný obsah:
<html>
<head>
<title> Moje první stránka </TITLE>
</head>
<body>
Vítám všechny na své první skvělé www stránce.
</body>
</html>
Pro jednoduchou úpravu textu lze použít tagy (ale spíš bychom využili styly):
<b> tučné písmo </b>
<i> kurziva </i>
<u> podtržení </u>
<strike> přeškrtnutí </strike>
<kbd> neproporcionální písmo </kbd>
<sub> dolní index </sub>
<sup> horní index </sup>
Další tagy:
<p> text odstavce </p>
<h1> text nadpisu </h1> (ty jsou největší) po šestou (nejmenší) úroveň <h6> text nadpisu </h6>
Odkazy:
<a href="vtipy.html"> vtipy </a> - odkaz na stránku, která je umístěná ve stejné složce jako stránka s odkazem
<a href="http://www.microsoft.com"> odkaz na Microsoft </a> - odkaz na jinou adresu
<a href="1kolo.zip"> zadání 1. kola </a> - odkaz na soubor (ke stažení nebo otevření - mp3, video, obrázek ..)
Obrázek:
<img src = "foto z hor.jpg" width=200 alt="Foto Sněžky" align=right> - vložení obrázku (daná šířka a zarovnání textu kolem obrázku)
<a href="větší foto.jpg"> <img src = "foto.jpg"> </a> - obrázek jako odkaz na obrázek
Cesty:
<a href="hry/hry.html">hry</a> - odkaz na stránku (soubor) ve složce
<a href="../index.html">zpět na index</a> - odkaz na stránku (soubor) o úroveň výš
Tabulka:
<table><tr> <td> buňka</td> </tr> </table> - tabulka s jedním řádkem <tr> a jednou buňkou <td>
Seznamy:
<ul>
<li>Jablka</li>
<li>Hrušky</li>
<li>Švestky</li>
<li>Banány</li>
</ul>
- nečíslovaný seznam s odrážkou
<OL>
<LI>Jablka
<LI>Hrušky
<LI>Švestky
<LI>Banány
</OL>
- číslovaný seznam (v HTML můžete pro tagy použít i velká písmena a některé nemusíte ukončovat, není to ale perspektivní)
<div> - pro omezení libovolné části (bloku) stránky
<span> - ohraničení textu ne řádku
Vlastnosti tagů - styly
Styl je možno psát k tagu přímo do zdroje: <p style="color: red"> Tento odstavec bude červený.</p> nebo do hlavičky stránky pomocí tagu style:
<head>
<title>užití stylů</title>
<style>
p {color: red}
</style>
</head>
Nejběžnější způsob je zápis stylů do externího souboru s příponou css, na který se odkazuje v hlavičce, například:
<head>
<title>Stránka s externím stylopisem</title>
<link rel="stylesheet" type="text/css" href="pokus.css">
</head>
Soubor se styly potom obsahuje vždy název tagu a za ním ve složených závorkách vlastnosti oddělené středníkem:
body {color: Maroon; font-size: 15px;}
p {color: red; font-size: 12px; text-align: justify}
h1 {color: green; text-align: center}
Vlastnosti probrané v minulých lekcích:
color = barva textu
font-size = velikost textu (jednotky např. px, pt, em - stejně jako pro jiné velikosti)
text-align = zarovnání textu (vlevo, vpravo, na střed, do bloku - justify)
font-style = styl (normal, italic = kurzíva, oblique = skloněné)
font-variant = (normal, small-caps = kapitálky (velká písmena))
font-weight = tloušťka (v násobcích 100 do 900)
font-size = velikost (o jednotkách níže)
font-family = uvede se buď název písma (víceslovný raději v úvozovkách) nebo jeho třída (serif, sans-serif, cursive, fantasy a monospace)
text-decoration = podtržení či škrtnutí textu (none = nepodtržený, underline = podtržený, overline = přeškrtnutý)
letter-spacing = mezera mezi písmeny
line-height = výška řádku
vertical-align = svislé posunutí od normální polohy, používá se třeba pro indexy (horní, dolní), poznámky apod.
background-color = barva pozadí
Vlastnosti odkazů se určují pro element a a pseudoelementy:
a - určuje vlastnosti všude, kde se vyskytuje tag a
a:hover - odkaz, na který "najela myš"
a:link - nenavštívený odkaz
a:visited - již navštívený odkaz
a:active - aktivní odkaz - je na něj kliknuto myší, nebo je vybraný tabelátorem
Využití obrázků:
background-image: url(image.jpg); - obrázek na pozadí
background-attachment: fixed; - obrázek neroluje
background-position: center; - umístění na střed
background-repeat: no-repeat; - neopakuje se
Styl položky seznamu s obrázkovou odrážkou:
li {color: green; list-style-image:url(SIPKA1.GIF); list-style-position: inside; list-style-type: disc}
Rozměry, okraje a rámeček:
width - šířka, height - výška (různé jednotky: px, pt, em, % ..)
padding - "vnitřní" mezera mezi objektem a rámečkem
margin - prázdné místo kolem rámečku, mezera mezi objekty na stránce
border - rámeček, vlastnosti: tloušťka = border-width barva = border-color a styl = border-style (různé typy, bez něj se rámeček nezobrazí)
Mezery i rámeček lze určit jen na některých stranách (top, right, left, bottom), nebo na kařdé straně jiný, například:
p {padding-bottom: 1ex; padding-left: 2ex; border-left: 8px red solid} - u rámečku je použitá hromadná deklarace (nevypisuje se každá vlastnost zvlášť)
Každý element dědí vlastnosti nadřazeného tagu, při použití více stylů se "skládají" na sebe.
Zdálo se ti opakování zbytečné? Podstatě rozumíš a ostatní víš kde najít? Pak ti gratuluji ke zvládnutí probírané látky, ale teprve následující praktický test ti ukáže, co v tobě skutečně je :-)):
Úkoly:
Opakovací test (10 bodů):
Zpracujte jen pomocí kaskádových stylů soubor test.txt tak, aby se výsledná stránka co nejvíce podobala té na obrázku za dodržení následujících podmínek (uložte do složky test):
- na celé stránce bude základní font Arial CE
- celá stránka má zvolený okraj
- barva pozadí stránky má číslo #ffffcc
- kde je to možné použij hromadné definice
- velikosti a barvy textu odlište jako na obrázku
- text básničky má být kurzívou s okrajem a rámečkem vlevo
- blok textu s rámečkem má bílé pozadí
- správně volte mezery (padding) a okraje (margin) objektů
- odkazům se při "najetí myší" změní výplň z #ffffcc na červenou a barva textu na bílou (nemusí být funkční, stačí když budou vypadat :-))
| Název školy: | Základní škola, Hradec Králové, M. Horákové 258 |
| Název projektu: | EU peníze školám |
| Číslo projektu: | CZ.1.07/1.4.00/21.2575 |
| Téma: | Tvorba WWW stránek |
| Název: | VY_32_INOVACE_13_10B_tvorba www13 |
| Autor: | Pavel Petr |