Tvorba jednoduchých WWW stránek
RNDr. Daniela Ďuráková
VŠB - Technická univerzita Ostrava Katedra informatiky
Vznik WWW technologie • Vznik - CERN 1989-90, vedoucí projektu Tim Berners-Lee • cíl - infrastruktura pro sdílení výsledků vědeckých výzkumů • Vyvinutá technologie – protokol HTTP – adresování objektů pomocí URL adres – jazyk HTML
HTTP - Hypertext Transfer Protocol • protokol pro přenos stránek mezi webovým serverem a prohlížečem • jednoduchý aplikační protokol vystavený nad protokolem TCP • několik verzí - HTTP 0.9, HTTP 1.0, HTTP 1.1 Průběh vyřízení požadavku obrázek 1. navázání spojení 2. zaslání požadavku klientem 3. zaslání odpovědi serverem 4. uzavření spojení Pomalé v případě stránek s mnoha vloženými objekty (obrázky apod.). Novější verze HTTP umožňují během jednoho spojení vyřídit několik požadavků/odpovědí.
URL - Uniform Resource Locator • URL je adresa, jednoznačně identifikuje zdroj v rámci Internetu • URL používá se ve službách WWW, FTP, e-mail, telnet, . . . HTML - Hypertext Markup Language • značkovací jazyk založený na SGML pro popis struktury webových stránek • nezávislý na platformě
Princip WWW stránek World Wide Web (WWW) — služba počítačové sítě Internet • prezentace informací pomocí grafického rozhraní, • informace jsou uloženy ve formátu textových dokumentů, • obsahují ”čistý” text a příkazy, • odkazy na části dokumentů, jiné dokumenty, obrázky, zvukové sekvence, videosekvence ap. • nezávislost na platformě při zobrazování (Windows, UNIX, případně Linux)
• Tvorba pomocí speciálního jazyka — HyperText Markup Language (HTML), který umožňuje používání odkazů, značkovací jazyk založený na SGML pro popis struktury webových stránek • Pro prezentaci dokumentů se používají prohlížeče, které umožňují zobrazit WWW stránku v grafické podobě. • Vytvořené dokumenty jsou přístupné „celému světuÿ (na Internetu). • Anglické označení „webÿ charakterizuje právě propojení dokumentů pomocí odkazů. • Soubory vytvořené pomocí jazyka HTML mají typicky příponu .html, případně .htm.
Historie a vývoj HTML • HTML 0.9 - 1991 Tim Berners-Lee - členění textu do několika logických úrovní, použití několika druhů zvýraznění textu, lze zařadit odkazy a obrázky • HTML 2.0 – první formální specifikace - IETF (Internet Engineering Task Force) návrh standardu - označován HTML 2.0, – základní formátování a strukturování dokumentu, obrázky, formuláře, – plně vyhovuje normě SGML (ISO 8879 z roku 1986). • HTML 3.0 - 1995 návrh standardu Dave Raggett z laboratoří Hawlett-Packard formalizoval HTML+, vytvořil jeho deklaraci DTD (Document Type Declaration) v jazyku SGML (Standard Generalized Markup Language)
• HTML 3.2 - 1996 – výrobci prohlížečů přidávají nestandardní rozšíření HTML, – konsorcium W3C proto vybírá společnou podmnožinu rozšíření a schvaluje HTML 3.2 – lepší možnosti formátování dokumentu • HTML 4.0 - 1997 – podpora kaskádových stylů, rámy – skripty vložené do stránky, multimediální objekty – rozšířené možnosti tabulek, formulářů – i18n (podpora více jazyků, tok textu zleva doprava) – podporu HTML 4.0 mají prohlížeče (IE6, NN7, O7, M1.6). • HTML 4.01 - 1999 opravy drobných chyb ve specifikaci HTML 4.0
Požadavky pro tvorbu a zpřístupnění WWW stránek Vytvoření vlastních WWW dokumentů znamená zvládnout techniku tvorby a rozumět jednotlivým aspektům, nutných k prezentaci WWW stránek. 1. Editor, který umí pracovat s čistým ASCII textem, (HTML dokumenty jsou textové soubory). V prostředí operačního systému Windows postačí notepad. 2. Znalost jazyka HTML - schopnost vytvořit zdrojový kód ve formátu HTML. 3. Prohlížeč pro kontrolu a zobrazení vytvořených WWW stránek (nejpoužívanější Microsoft Internet Explorer, Netscape Navigator, Opera, Mozilla). 4. Připojení k síti internet pro zpřístupnění WWW stránek ostatním uživatelům internetu.
Doporučení a zásady pro tvorbu WWW stránek • kontrola zdrojového textu prohlížečem (lépe více prohlížečích), • je lépe chyby opravovat „za pochoduÿ, než po dopsání celého dokumentu, • jedna stránka by neměla obsahovat příliš souvislého textu bez nadpisu a obrázků, či jiných prvků pro členění textu, • je lépe stránku nejprve připravit a pak na ni odkazovat, než vystavovat stránky s informací, že se teprve se na ní pracuje, • stránky by měly obsahovat informace o poslední aktualizaci (některé informace ztrácejí po delším čase smysl - například konání akce před dvěmi lety), • pro jednoduchou správu stránek je lépe se vyhnout prvkům, kterým úplně nerozumíte.
Uložení WWW stránky Jak uložit vlastní WWW stránky? 1. Použijeme program winscp, kde na vyžádání zadáme přihlašovací jméno (login name) a heslo. 2. V případě, že adresář public html není na serveru vytvořen, vytvoříme jej jako nový adresář. 3. Zkopírujeme náš soubor (vytvořený WWW dokument) do tohoto adresáře a přejmenujeme jej na index.html. 4. Zkontrolujeme, zda stránka je v prohlížeči správně zobrazena — uvedeme v něm patřičnou url adresu: http://homel.vsb.cz/~loginname.
Struktura URL Jednoznačná adresa v rámci internetu identifikuje různé zdroje, ať už jdou to webovské stánky, e-mailové adresy, soubory, . . . URL má (většinou) následující tvar: http://www.vsb.cz/cz/vitejte/areal.html význam jednotlivých částí je následující: • http — znamená typ protokolu, který zajišťuje přenos stránek umístěných na webovém serveru na počítač uživatele, Dnes se používá i protokol https, což je stejný protokol jako http, pouze přenášená data jsou kryptována (zabezpečená). • www.vsb.cz — je jedinečné označení (zde jméno) serveru v rámci Internetu, které je tvořeno z částí: – www — název serveru v rámci VŠB, – vsb — v rámci české domény doména vsb (Vysoká škola báňská), – cz — označení národní či jinak světově registrované domény (v našem případě české)
• /cz/vitejte/ — další část URL je cesta k patřičným dokumentům, • areal.htm — název dokumentu. / — oddělovače jednotlivých částí adresy.
Použití odkazů Odkazy, pomocí kterých jsou propojeny různé soubory, mohou být zapsány dvěmi odlišnými způsoby. Pomocí • relativního odkazu a • absolutního odkazu. Vlastní související stránky by měly používat relativní odkazy z důvodu přenositelnosti na jiný server. Odkazy na cizí zdroje a stránky by naopak měly být absolutní, aby byla zajištěna jejich funkčnost právě v případě jejich přenesení na jiný server. Tvar relativního odkazu se od absolutního liší neuvedením jména serveru — stačí pouze jméno dokumentu, případně uvedení patřičného adresáře ze stromové struktury adresářů na disku, kde jsou dokumenty umístěny. Například: Absolutní odkaz na dokument "http://www.cs.vsb.cz/durakova/vyuka/zpp/projekt.html" a odpovídající relativní odkaz
"projekt.html" Pokud je soubor umístěn o úroveň výš, stačí do odkazu přidat znak pro cestu na vyšší úroveň adresáře. "../projekt.html"
Syntaxe HTML • elementy, tagy • atributy • znakové entity • DTD, DOCTYPE Kontrola syntaxe Kontrola správné syntaxe HTML stránky pomocí – specializovaných programů a služeb, – nebo je možné použít SGML parser. Validační služby on-line: – W3C HTML Validation Service na adrese ”http://validator.w3.org/” – Dr. Watson na adrese ”http://watson.addy.com/”
Základní struktura HTML stránky Formátovací značky označovány také tag, zajistí textu určitý význam, který je interpretován použitým prohlížečem. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
Name_of_page Nadpis první úrovně
První odstavec obsahuje ...
V druhém odstavci se popisuje ...
Používání značek Tagy ve většině případů fungují jako závorky v matematice. • použití levého (počátečního) tagu ve tvaru <xxx> vyvolá nutnost použít i pravý (koncový) tag , v případě tzv. párového tagu. Nepárový levý tag se používá například při vkládání obrázků. • Konkrétní význam elementu je dán použitým tagem — identifikátor elementu. Text mezi počátečním a koncovým tagem daného typu tvoří tělo elementu. • Identifikátory elementů mohou být psány malými i velkými písmeny. Zápisy ve tvaru <TITLE>, <TiTlE>,
i <title> prohlížeč chápe a interpretuje stejně. POZOR! Na začátku tagu nesmí být mezera! Například < title> je špatně! • Tagy, které prohlížeč nezná, ignoruje. Nemusí hlásit žádnou chybu! Ve Windows, znak „<ÿ je možné napsat (bez přepnutí klávesnice na anglickou) stiskem kláves pravý Alt + <, znak „>ÿ stiskem kláves pravý Alt + >.<br />
<br />
cements<br />
<br />
Členění dokumentu HTML dokument HEAD První HTML stránka BODY H1 Nadpis první úrovně P První odstavec obsahuje . . .<br />
<br />
P Druhý odstavec popisuje . . . .. . P Poslední odstavec . . .<br />
<br />
Editory 1. Strukturní editor • přímá úprava výsledného kódu, • nutná znalost jazyka HTML, • užívají profesionální tvůrci dynamických a jinak specifických stránek, z důvodu kontroly nad vytvářeným kódem, • text file • Notepad, HomeSite, UltraEdit, české EasyPad a PSPad. 2. Wysiwyg editor • zobrazuje při psaní přímo vzhled stránky v prohlížeči, • automatické generování kódu, (kód při ukládání i trochu mění!!!) • pohodlné zpracování, • neukazují to, co pak prohlížeč opravdu zobrazí • Microsoft FrontPage, Dreamweaver, Adobe GoLive, Mozilla Editor.<br />
<br />
Přehled HTML značek (tagů) • Struktura • Text • Bloky • Seznamy • Odkazy • Obrázky • Tabulky • Rámy • Objekty • Formuláře<br />
<br />
• Hlavička • Skripty a styly (kaskádové)<br />
<br />
Působení stránek na čtenáře • grafický design - první uživatelův dojem, ohled na široký okruh lidí • struktura stránek, navigace na stránkách • syntakticky správný HTML kód - méně práce pro prohlížeč • vhodné metainformace - méně práce pro vyhledávací roboty Jednotlivé prvky je vhodné uvážlivě vyvážit, každý dle svého citu.<br />
<br />
Obsah versus forma Ideál – vyváženost obsahu a formy. (Internet a HTML jazyk) původně byly určeny jako médium zprostředkující obsah. • Formátování stránek - nese sebou chyby v zobrazování v prohlížečích různého typu, každý prohlížeč interpretuje jinak • Rychlost natahování pomalé je způsobeno zejména – mnoho obrázků – text s mnoha definicemi fontů, velikostí a barev písma, • Čitelnost písma – volba - individuální – patkové - písmo curier není vhodné – bezpatkové - Arial, Helvetica, Verdana – pro dlouhé texty patková písma s rozdílnou tloušťkou tahů (takzvaný serif, například Times New Roman).<br />
<br />
– font nezadávat - prohlížeč použije defaultní font • Pozadí – zvýraznění příp. oživení - použití obrázku či barvy na pozadí je nevhodné, velký obrázek se dlouho natahuje – nečitelné písmo - dbát na kontrast barev • Jednotný vzhled stránek autor určuje styl - měl by se dodržet jednotný styl pro všechny stránky – jednotná úprava nenutí uživatele učit se na každé stránce jiné ovládání a rozmístění prvků – rychlejší natažení (sdílené soubory s formátovacími prvky) – rozlišuje daný web od ostatních stránek – pro tvůrce je i snažší práce (jednou pro všechny stránky)<br />
<br />
Nevhodné!!! • Nadpisy z obrázků – dlouho se natahují – vyhledávací roboti nejsou schopni nadpis přečíst – při příštím natahování stránek se opakuje pomalost (není-li obr uložen) • Flashové prvky – ne všichni uživatelé mají flash – nemusí se zobrazit – psychologické bariéry<br />
<br />
Čeština / cestina Diakritika na HTML stránkách. Každý znak (písmeno, číslice, . . .) je reprezentován jako číslo od 0 do 255 (jeden bajt), angličtina používá 128 znaků, tzv. ASCII. Od 128 do 255 jsou vyhrazeny pro diakritizované znaky jiných jazyků (např. kód Latin-1 - pro češtinu použitelné jen á a í). Kódování = přiřazení diakritizovaných znaků číslům od 128 do 255. Problém: mnoho různých kódování. • ASCII čeština bez háčků a čárek, tj. hacky a carky jsou odstraneny • ISO-8859-2 (ISO Latin 2) mezinárodní kódovací norma pro jazyky střední Evropy, standard na Unixu a na Linuxu, u Microsoftu označován ”Středoevropské jazyky (ISO)” • CP1250 (Windows-1250)<br />
<br />
základní kódování u firmy Microsoft, platforma Windows, označován ”Středoevropské jazyky”, vzniklo z ISO-8859-2, chybí plná kompatibilita • MAC (Macintosh) standard užívaný na počítačích Apple Macintosh • CP852 (PC Latin 2) původní český a slovenský DOS • KEYBCS2 (Kamenici) kód bratří Kamenických, textový režimu MS-DOS • KOI8-CS (KOI-8 CS) kdysi standard pro státy střední a východní Evropy • Unicode, UTF-8 užití pro všechny světové jazyky, mezinárodní kódování znaků založené na tabulce 256 používaných znaků<br />
<br />
Rozdíly kódování - nejlépe zjistit v kódovacích tabulkách š, ž, ť, Š, Ž, Ť<br />
<br />
Jak docílit patřičný typ kódování? • automatické meta nastavení <meta http-equiv="Content-Type" charset=iso-8859-2"><br />
<br />
content="text/html;<br />
<br />
nebo: <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> • vytvořit stránku několikrát, pokaždé v jiném kódování, čtenář si vybere kódování • použít serverové programy na překódování (Saczech nebo ModCzech) • použít český kód, (nejčastěji windows-1250) • psát bez hacku a carek (čili v ASCII), špatně čitelné<br />
<br />
Problémy dnešního webu • informační zahlcení • nutnost lepšího vyhledávání • nestandardní rozšíření HTML jednotlivými výrobci prohlížečů Řešení problému? XML - eXtensible Markup Language • pomocí DTD můžeme vytvářet nové jazyky založené na XML • vhodně zvolené elementy přidají dokumentu informační hodnotu a usnadní prohledávání Webu • XML má striktnější syntaxi než HTML (neukončené tagy, ohraničení atributů uvozovkami apod.) ? snazší implementace<br />
<br />
Reference • www.jakpsatweb.cz/ • jm.vse.cz/html/hatmatilka/titul.html • www.kit.vslib.cz/ satrapa/www/ • www.kosek.cz/ • www.builder.cz • www.developer.sk • www.interval.cz • www.wdvl.com • msdn.microsoft.com/ie/ • developer.netscape.com<br />
<br /> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://adoc.pub/report/tvorba-jednoduchych-www-stranek-vb-technicka-univerzita-ostr" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "Tvorba jednoduchých WWW stránek. VŠB - Technická univerzita Ostrava Katedra informatiky"</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var inner_height = $(window).innerHeight() - 250;
$('#pdfviewer').css({"height": inner_height + "px"});
});
</script>
<footer class="footer" style="margin-top: 60px;">
<div class="container-fluid">
Copyright © 2024 ADOC.PUB. All rights reserved.
<div class="pull-right">
<span><a href="https://adoc.pub/about">About Us</a></span> |
<span><a href="https://adoc.pub/privacy">Privacy Policy</a></span> |
<span><a href="https://adoc.pub/term">Terms of Service</a></span> |
<span><a href="https://adoc.pub/copyright">Copyright</a></span> |
<span><a href="https://adoc.pub/contact">Contact Us</a></span> |
<span><a href="https://adoc.pub/cookie_policy">Cookie Policy</a></span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-note-label">Sign In</h4>
</div>
<div class="modal-body">
<form action="https://adoc.pub/login" method="post">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember me
</label>
<label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-177279549-1');
</script>
<script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css">
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://adoc.pub/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function( event, ui ) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- cookie policy -->
<div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;">
Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a>
</div>
<script>
function accept_ADOCPUB_cookie_box() {
document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/";
hide_ADOCPUB_cookie_box();
}
function hide_ADOCPUB_cookie_box() {
var cb = document.getElementById('ADOCPUB_cookie_box');
if (cb) {
cb.parentElement.removeChild(cb);
}
}
(function () {
var ADOCPUB_cookie_box_viewed = (function (name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
})('ADOCPUB_cookie_box_viewed');
if (ADOCPUB_cookie_box_viewed) {
hide_ADOCPUB_cookie_box();
}
})();
</script>
<!-- end cookie policy -->
</body>
</html>
