11. Statické a dynamické www stránky
Níže je uveden pouze náhled materiálu. Kliknutím na tlačítko 'Stáhnout soubor' stáhnete kompletní formátovaný materiál ve formátu PDF.
11. Statické a dynamické www stránky
Otázky
Popište vlastnosti a základní značky HTML.
Uveďte postup tvorby statické HTML stránky a možnosti jejího publikování.
Vysvětlete postup vytváření obsahu stránek.
Vysvětlete problematiku formátování stránek včetně CSS.
Popište možnosti použití skriptovacího jazyka JavaScript .
Vlastnosti a značky HTML
VlastnostiSamotný jazyk HTML (Hypertext Markup Language) nám umožňuje vytvářet pouze statické webové
stránky, jejichž obsahem může být maximálně jen nějaký text, nebo obrázky a jsou propojeny
hypertextovými odkazy.
Značky
Párové:
odstavec
nadpis
Nepárové:
zalomení řádku
podtržení
odkaz
<html>
<head>
<meta charset="utf-8">
<title>Titulek stránkytitle>
head>
<body>
<h1>Nadpis stránkyh1>
<p>Toto je <a href="http://example.com/">odkaza> v odstavci.p>
body>
html>
Základní značky HTML
Struktura dokumentu
html
začátek HTML dokumentu
head
hlavička stránky
body
tělo stránky + definice pozadí
poznámka
Fyzické formátování
b
tučné písmo
i
kurzíva
u
podtržení textu
s
přeškrtnutý text
Logické formátování
span
úsek textu
strong
zvýraznění (tučně)
Bloky
p
odstavec
br
řádkový zlom
hr
vodorovná čára
div
oddíl
center
vycentrování
h1 - h6
nadpisy různých velikostí
Seznamy
li
položka seznamu
ol
číslovaný seznam
ul
odrážkový seznam
Odkazy
a
odkaz, hyperlink
Obrázky
img
obrázek
picture
kontejner pro obrázek
Tabulky
table
tabulka
tr
řádek tabulky
td
buňka tabulky
Formuláře
form
formulář
input
vstupní pole
select
výběrové pole
option
volba
textarea
velké vstupní pole
button
tlačítko
Skripty a styly
script (kdekoliv v kódu) skript, program
style (v hlavičce kódu)
zápis CSS stylu
Obecné atributy
class
třída pro CSS selekci
id
identifikátor pro CSS a skripty
style
zápis CSS stylu
name
jméno pro spolupráci s dalšími
prvky
Postup tvorby statické HTML stránky a její publikaceOtevřete si jakýkoli textový editor (PSPad, Visual Studio), v něm vytvořte strukturu html (hlavička,
tělo, patička), do těla (obsah) potom vložte Vámi zvolený obsah (svojí stránku můžete
zdarma testovat v jakémkoli internetovém prohlížeči, nejlépe v Googlu) a nakonec, k její publikaci,
využijete buď internetových služeb, poskytujících placený hosting, nebo je prostě budete hostovat u
sebe (např. přes protokol FTP).
Vytváření obsahu stránekV HTML píšeme obsah do párového tagu obsah
V PHP píšeme obsah do tagů echo ”obsah”;
Problematika formátování stránek a CSSAby stránka nějak vypadala, je pro její vzhledovou úpravu potřeba vložit několik doplňujících
parametrů do HTML tagů, např.
červený text
nebonepřehledným. Proto se využívá tzv. stylů CSS (Cascadic Style Sheet), které nám umožňují oddělit
parametry pro vzhled od samotného kódu. V hlavičce kódu stránky stačí jen vytvořit párový tag
a do něj potom jednotlivé parametry takto psát: p {color:red;}
div {background-color:yellow;}.
Kdybychom ale v kódu chtěli mít třeba více odstavců