základy tvorby internetových stránok
Post on 11-Jan-2016
48 Views
Preview:
DESCRIPTION
TRANSCRIPT
Základy tvorby Základy tvorby internetových stránokinternetových stránok
Základné webové Základné webové technológietechnológie
• Na vytváranie internetových stránok (webstránok) sú vo svete používané nasledovné technológie (jazyky):– HTML (HyperText Markup Language) –
základný jazyk pre tvorbu obsahu webstránok– CSS (Cascade StyleSheet) – jazyk pre definíciu
formátu stránky– JavaScript – jazyk väčšinou používaný pre
kontrolu vstupov z formulárov– PHP (Personal HomePage) – skriptovací jazyk
pre vytváranie dynamických webstránok
Typy webstránokTypy webstránok
• Statická webstránka – jej obsah sa veľmi často nemení a nie je schopná reagovať na individuálne potreby používteľov
• Dynamická webstránka – jej obsah sa dokáže meniť v závislosti na rôznych podmienkach (krajiny používateľa, dátumu a času, podľa prihláseného používateľa)
Základy HTMLZáklady HTML
• HTML je značkovací jazyk teda jeho „príkazmi“ sú rôzne značky
• Typy značiek– Párové značky– Nepárové značky
Párové značkyPárové značky
• Majú svoju „otváraciu“ časť aj „uzatváraciu časť“
• Otváracia časť párových značiek vyzerá nasledovne:
<značka>
• Uzatváracia časť párových značiek vyzerá nasledovne:
</značka>
Nepárové značkyNepárové značky
• Nepárové značky majú len svoju „otváraciu“ časť
• Otváracia časť nepárových značiek vyzerá nasledovne:
<značka />
Vlastnosti značiekVlastnosti značiek
• Každá značka, či už je párová alebo nepárová, môže obsahovať vlastnosti, ktorými ju vieme upraviť (napr. zmeniť typ alebo farbu písma, veľkosť obrázku ...)
• Vlastnosti sa vždy píšu do otváracej časti značky
• Formát zápisu vlastností vyzerá takto:<značka vlastnosť1="hodnota" vlastnosť2="hodnota">
Štruktúra HTML dokumentuŠtruktúra HTML dokumentu
• HTML dokument sa skladá z troch základných častí:– DOCTYPE - označenie verzie jazyka
HTML, v ktorom robíme webstránku– Hlavička – obsahuje „neviditeľné“
informácie o stránke (autor, znaková sada, kľúčové slová pre vyhľadávač,...)
– Telo – obsahuje samotný obsah, ktorý používateľ vidí zobrazený v prehliadači
DOCTYPEDOCTYPE
• Tak ako sa vyvíjali prehliadače a požiadavky používateľov, musel sa vyvíjať aj jazyk HTML
• Bolo preto nutné označiť každý HTML dokument, aby bolo jasné aké značky v ňom môžu byť použité a aké pravidlá boli aplikované pri tvorbe stránky
• DOCTYPE vyzerá asi takto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HlavičkaHlavička
• V hlavičke sa nachádzajú najčastejšie tieto informácie:– Titulok stránky – to čo sa zobrazí v hornej lište
prehliadača (prípadne na karte v prehliadači)– Meno autora– Znaková sada – či používame čínske, ruské,
stredoeurópske znaky a pod.– Kľúčové slová (keywords) – používa ich
vyhľadávač pri prechádzaní stránok a zaradzovaní do svojej databázy
– Popis stránky (description) – to čo vidíte vo vyhľadávači pod odkazom
TeloTelo
• Obsahuje značky, pomocou ktorých vytvárame obsah a základny formát dokumentu
URLURL
• Pre získanie akéhoľvek zdroja z internetu (stránky, obrázku, dokumentu) musíme poznať jeho umiestnenie
• Umiestnenie každého zdroja označuje reťazec URL (Uniform Resource Locator – Jednotný lokátor zdroja)
• URL vyzerá takto:
http://www.spseke.sk:80/w/index.php?title=URL&action=edit
URLURL
http://www.spseke.sk:80/w/index.php?title=URL&action=edit
Protokol (môže byť http, https, ftp, telnet, ...)
Server (doménové meno)
Port (nemusí sa uvádzať)
Priečinok alebo priečinky ( oddelené znakom / )
Názov zdroja (súboru)
Parametre pre webserver (oddelené znakom &)
Pravidlá pre pomenovanie Pravidlá pre pomenovanie súborov webstránkysúborov webstránky
• Pre každý súbor, z ktorého sa skladá stránka (samotné stránky, obrázky, priečinky, súbory na stiahnutie) by mali platiť tieto pravidlá:– Používať len malé písmená– Nepoužívať diakritiku– Nepoužívať medzery (použite podčiarnik _ )– Prvý súbor, ktorý sa otvorí po zadaní URL do
prehliadača sa musí nazývať index.html alebo index.htm alebo index.php
Základné potreby pre Základné potreby pre vytvorenie webstránkyvytvorenie webstránky
• Pre vytvorenie webstránky potrebujeme mať minimálne tieto veci:– Samotné súbory stránky– Webpriestor (priestor na serveri, kde
nahráme súbory stránky)– Doménu (to, čo zadávame do
prehliadača – napr. www.mojastranka.sk)
Príklad jednoduchej stránkyPríklad jednoduchej stránky
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Moja prvá webstránka</title><meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
</head>
<body>Toto je moja prvá, úplne jednoduchá webstránka.
</body></html>
V čom robiť stránkyV čom robiť stránky
• Stránky sa dajú písať v rôznych editoroch:– Textový editor (notepad, PSPad) – umožňuje
písať priamo HTML kód, niektoré textové editory aj zvýrazňujú značky a atribúty
– WYSIWYG (What You See Is What You Get) – editory, ktoré majú možnosť vkladať priamo značky z menu a interaktívne ich upravovať, pričom používateľ hneď vidí, ako sa mení stránka pri zmene značky alebo vlastnosti (napr. Macromedia Dreamweaver, NVU, ...)
Základné značky pre Základné značky pre formátovanie textuformátovanie textu
<b>...</b> - tučný text<i>...</i> - šikmý text<u>...</u> - podčiarknutý text<sup>...</sup> - horný index
<sub>...</sub> - dolný index
<br /> - nový riadok<hr /> - horizontálna (vodorovná) čiara<center> ... </center> - centrovanie textu<h1>...</h1> - najvýznamnejší nadpis<h6>...</h6> - najmenej významný nadpis
Značky pre zmenu fontu Značky pre zmenu fontu písmapísma
<font> ... </font> - sama o sebe by značka font nemala význam, preto k nej musíme pridať vlastnosti
<font color= "red">...</font> - zmení farbu písma<font size="4">...</font> - zmení veľkosť písma<font face="Arial">...</font> - zmení vzhľad písma
Vlastnosti môžeme kombinovať v jednej značke a nemusíme ich písať zvlášť:
<font color="red" size="4" face="Arial">...</font> zmení farbu, veľkosť aj vzhľad písma
Zapisovanie fariebZapisovanie farieb
• Farby sa dajú v HTML zapisovať dvoma spôsobmi:– Slovne – názov farby po anglicky (zoznam
farieb)– Číselne – ako pomer medzi červenou, zelenou
a modrou farbou v šesnástkovej sústave, začína sa vždy znakom # (napr. #FF00A0 znamená, že výsledná farba bude zložená z 255 dielov červenej (FF), 0 dielov zelenej (00) a 160 dielov modrej (A0) farby – teda nejako takto)
Kombinovanie značiekKombinovanie značiek• Značky môžeme medzi sebou kombinovať,
napríklad vytvárať súčasne hrubé, šikmé a počiarknuté písmo
• Vždy ale musí platiť, že značku, ktorú „otváram“ ako prvú, musím uzatvoriť ako poslednú
• Podobne ako v matematike narábame so zátvorkami: {[()]} musíme narábať aj v HTML so značkami <b><u><i>text</i></u></b>
• Nesmieme teda značky mixovať• Ani v matematike nespravíme v zátvorkách
„guláš“: {[(]}){[(]}) teda ani v HTML nebudeme robiť „guláš“ v značkách: <b><u><i>text</b></u></i>
Ďalšie informácie Ďalšie informácie nájdetenájdete
www.jakpsatweb.czwww.jaknaweb.czwww.interval.cz www.w3.orgwww.w3schools.com/HTML
top related