Základy tvorby internetových stránok

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

... - tučný text... - šikmý text... - podčiarknutý text... - horný index

... - dolný index

 - 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

 ... - sama o sebe by značka font nemala význam, preto k nej musíme pridať vlastnosti

... - zmení farbu písma... - zmení veľkosť písma... - zmení vzhľad písma

Vlastnosti môžeme kombinovať v jednej značke a nemusíme ich písať zvlášť:

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

• 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: text

Ďalšie informácie Ďalšie informácie nájdetenájdete

www.jakpsatweb.czwww.jaknaweb.czwww.interval.cz www.w3.orgwww.w3schools.com/HTML

Základy tvorby internetových stránok

Documents