Základy tvorby internetových stránok
Základné webové technoló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á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 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č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čky Nepárové značky majú len svoju „otváraciu“ časť Otváracia časť nepárových značiek vyzerá nasledovne: <značka />
<značka vlastnosť1="hodnota" vlastnosť2="hodnota"> Vlastnosti 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 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
DOCTYPE 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.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Hlavič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
Telo Obsahuje značky, pomocou ktorých vytvárame obsah a základny formát dokumentu
URL 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
URL 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 sú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 vytvorenie 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á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á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 formá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 pí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 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č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 nájdete www.jakpsatweb.cz www.jaknaweb.cz www.interval.cz www.w3.org www.w3schools.com/HTML