Název projektu
Inovace výuky prostřednictvím šablon pro SŠ
Číslo projektu
CZ.1.07/1.5.00/34.0748
Název školy Autor
Gymnázium Jana Pivečky a Střední odborná škola Slavičín Ing. Alois Kužela
Název šablony
III/2 - Inovace a zkvalitnění výuky prostřednictvím ICT
Název DUMu
VY_32_INOVACE_G2_IVT_02_14
Stupeň a typ vzdělávání
Gymnaziální vzdělávání
Vzdělávací oblast
Informatika a Informační a komunikační technologie
Vzdělávací obor
Informatika
Tematický okruh
Informatika
Cílová skupina
Žák 16 - 19 let
Anotace
Prezentace slouží k vysvětlení pojmu „HTML dokument“ a dává návod na vytvoření HTML dokumentu s využitím textového editoru PSPad.
Vybavení, pomůcky
PC, interaktivní tabule
Datum
18. 4. 2013 HTML, SGML, textový editor, WYSIWYG editor, strukturální značky, sémantické značky, stylistické značky, párové tagy, nepárové tagy
Klíčová slova
ww.zlinskedumy.cz
HTML DOKUMENT • HTML (HyperText Markup Language) je značkovací jazyk pro hypertext. Je hlavní z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikace dokumentů na Internetu.
• Vývoj HTML byl ovlivněn vývojem webových prohlížečů, které ovlivňovali definici jazyka.
HTML DOKUMENT • HTML je aplikací dříve vyvinutého univerzálního značkovacího jazyka SGML (Standard Generalized Markup Language), který umožňuje definovat značkovací jazyky jako své vlastní podmnožiny.
• Díky své složitosti není SGML příliš rozšířen.
PROGRAMY PRO TVORBU HTML • Textové editory Běžný textový editor HTML zvládá barevnou syntaxi, dokáže napovídat značky, zvládá validovat dokument podle předepsané specifikace. Takovými editory jsou například Notepad++, PSPad nebo Sublime Text.
• WYSIWYG editory Editory tohoto typu pracují na opačném principu než textové editory – ve WYSIWYG editoru pracujete přímo s již hotovou stránkou a obecně neplatí, že by uživatel tohoto editoru musel znát jazyk HTML. Ve WYSIWYG editoru si může uživatel poskládat stránku, jak se mu zlíbí, a program následně vygeneruje požadovaný kód HTML. Takovými editory jsou například Adobe Dreamweaver nebo Microsoft FrontPage.
STRUKTURA HTML DOKUMENTU • HTML dokument má předepsanou strukturu: • Doctype – úvod dokumentu, sděluje prohlížeči, že otevřel HTML dokument. Povinný, zapisuje se .
• Kořenový element – značky , - reprezentují celý dokument. • Hlavička dokumentu – značky , , obsahují metadata dokumentu. Definuje například kódování, název dokumentu, autora, titulek, popis, klíčová slova nebo CSS styly.
• Tělo dokumentu – značky , zahrnují obsah dokumentu.
DRUHY ZNAČEK • Značky lze z hlediska významu rozdělit na tři základní skupiny: • Strukturální značky - rozvrhují strukturu dokumentu, příkladem jsou třeba odstavce (
) nebo nadpisy (
, ). Dodávají dokumentu formu.
• Popisné (sémantické) značky - popisují povahu obsahu prvku, příkladem je nadpis () nebo adresa (<address rel="nofollow">). Současný trend je orientován právě na sémantické značky, které usnadňují automatizované zpracovávání dokumentů a vyhledávání informací v záplavě dokumentů na webu. Vyvrcholením této snahy je v současné době jazyk XML.<br />
<br />
DRUHY ZNAČEK • Stylistické značky - určují vzhled prvku při zobrazení, typickým příkladem je značka pro tučné písmo (<b>). Od tohoto druhu značek se postupně upouští, trendem je používání kaskádových stylů, které vzhled popisují odděleně od obsahu dokumentu. Mezi důvody pro neužívání těchto značek patří především to, že tyto značky jsou orientovány na prohlížení na obrazovce počítače, příliš se však nepočítá s používáním dokumentu jiným způsobem – alternativní prohlížeče pro postižené (čtečky pro slepce), v mobilních zařízeních a podobně. Kaskádové styly umožňují definovat rozdílné zobrazení pro různá zařízení.<br />
<br />
TAGY • Jazyk HTML je charakterizován množinou značek (tzv. tagů) a jejich vlastností (atributů) definovaných pro danou verzi.<br />
<br />
• Párové tagy – koncová značka je shodná s počáteční, liší se jen lomítkem před názvem. Například <body> a </body>.<br />
<br />
• Nepárové tagy – nemají žádný obsah a nepoužívají koncovou značku. Například <hr>.<br />
<br />
Zdroje Web 1. Wikipedie, otevřená encyklopedie [online]. [cit. 18. 4. 2013]. Dostupný na WWW: http://commons.wikimedia.org/wiki/File:HTML.svg 2. http://cs.wikipedia.org/wiki/Standard_Generalized_Markup_Langua ge<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/inovace-vyuky-prostednictvim-ablon-pro-sfc098f68727bd804fc9e8e9e7969024343027" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "Inovace výuky prostřednictvím šablon pro SŠ"</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>
