Základy tvorby internetových stránok

Slides:



Advertisements
Podobné prezentace
HTML HyperText Markup Language Je to značkovací jazyk používaný na tvorbu webových stránek, které jsou propojeny hypertextovými odkazy. Je hlavním z.
Advertisements

Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Autor: Bc. Pavel Šiktanc Internetové stránky Co se všechno naučíme???
CSS styly Gymnázium a Jazyková škola s právem státní jazykové zkoušky Zlín Tematická oblastTvorba WWW stránky v HTML Datum vytvoření2013 Ročník2 Stručný.
HTML (I) (2). Projekt: CZ.1.07/1.5.00/ OAJL - inovace výuky Příjemce: Obchodní akademie, odborná škola a praktická škola pro tělesně postižené,
ZÁKLADY JAZYKA HTML Číslo projektu CZ.1.07/1.5.00/ Název školy
Název školy: ZŠ Bor, okres Tachov, příspěvková organizace
HTML a CSS Rostislav Miarka.
ADOBE DREAMWEAVER CS6 Formátování HTML vs. CSS
Tvorba webových stránek - hyperlink
NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov
TM40 Dotyková klávesnica
Využitie vlastností kvapalín
ODBYT registračné pokladnice: kontrola stavu hotovosti
Monika Smoroňová ZŠ Rozhanovce V. A
Počítač s príslušenstvom INF V. ročník
SOFTWARE.
REALIZÁCIA PROGRAMU 3. etapa tvorby programu
L1 cache Pamäť cache.
„Brutácia“ nepeňažného príjmu
SME MEDZINÁRODNE CERTIFIKOVANÁ ŠKOLA.
Práca s internetom (Ľ. Jašková, Ľ. Šnajder, R. Baranovič)
Kreslenie v textovom dokumente 1.časť
T.Zamborská L.Nedbalová 8.A
MATURITA Miroslava Drahošová
Ako príklad inštalácie uvádzame Bullzip Free PDF Printer.
Rozpoznávanie slovných druhov alebo vetnej skladby
Spínaný zdroj v Počítači.
Miroslav Sajko Martin Petruňa
Aktualizačné vzdelávanie učiteľov cvičných firiem
CSS – základné princípy
Pomer, mierka mapy.
Kľúč na určovanie rastlín
Elektronická výplatná páska
Sociálna interakcia,medziosob- ná percepcia
Základy tvorby internetových stránok
Ochrana potravín Tréningový kurz Co-financiado.
Pomer, mierka mapy.
Hypertextové prepojenia
Alica Takácsová Lenka Marčišová
Leona Pavlíková,Lenka Kulifajová 9.A
Použitie počítačov v geografii (2)
Rastrova a Vektorov grafika
Praktická časť odbornej zložky PČOZ
Poznámky z teórie kriviek a plôch Margita Vajsáblová
Úvod do štúdia literatúry
Geografické informačné systémy
Cabri geometry II Mgr. Róbert Truchan ZŠ Sačurov.
ZÁKLADY TVORBY WEBOVÝCH STRÁNOK Základy HTML
Zmeny v podsystéme v roku 2017
Priamkové plochy.
Pravouhlé (ortogonálne) premietanie VII. ročník
Divergentné úlohy v matematike
Zem ako na dlani.
Hardware Pamäťové média.
Orientácia na pracovnej ploche
MS POWERPOINT ZŠ, Z. Nejedlého 2 Spišská Nová Ves
História internetu meno.
Digitalizácia informácií
Smerovanie Ing. Branislav Müller.
Písanie dátumov, časových údajov a telefónnych čísel
NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov
VLOOKUP (po česky SVYHLEDAT)
ELDP Evidenčný List Dôchodkového Poistenia
MEDLINE Complete ~ Vyhľadávanie
Tutoriál ~ eKnihy Sťahovanie
Stredná odborná škola automobilová Moldavská cesta 2, Košice
Tvorba webových stránek - úvod
Word Základy Wordu. Word Základy Wordu Ročník: 6 Předmět: Informační a komunikační technologie Učitel: Vojtěch Novotný Téma: Základy Wordu Ověřeno.
Střední škola obchodně technická s. r. o.
Digitální učební materiál
Transkript prezentace:

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