220 likes | 338 Views
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
E N D
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 />
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 Parametre pre webserver (oddelené znakom &) Názov zdroja (súboru) Priečinok alebo priečinky ( oddelené znakom / ) Port (nemusí sa uvádzať) Server (doménové meno) Protokol (môže byť http, https, ftp, telnet, ...)
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