1 / 22

Základy tvorby internetových stránok

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

dannon
Download Presentation

Základy tvorby internetových stránok

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Základy tvorby internetových stránok

  2. 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

  3. 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)

  4. 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

  5. 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>

  6. 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 />

  7. 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">

  8. Š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

  9. 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">

  10. 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

  11. Telo • Obsahuje značky, pomocou ktorých vytvárame obsah a základny formát dokumentu

  12. 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

  13. 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, ...)

  14. 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

  15. 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)

  16. 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>

  17. 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, ...)

  18. 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

  19. 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

  20. 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)

  21. 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>

  22. Ďalšie informácie nájdete www.jakpsatweb.cz www.jaknaweb.cz www.interval.cz www.w3.org www.w3schools.com/HTML

More Related