© Mgr. Stěpan Stěpanov, 2013
Abstrakt V tomto kurzu se seznámíme se základními pojmy HTML, klíčovými pravidly pro práci se značkami a atributy a strukturou dokumentu. Také se dozvíte, jak a v čem lze vytvářet webové stránky.
Obsah Co to je HTML?
Značky
Atributy
Struktura dokumentu
První stránka za dvě minuty
HTML editory a standardy
Co to je HTML? HTML – HyperText Markup Language, hypertextový značkovací jazyk.
Hypertext – nelineárně strukturovaný text, obsahuje hyperlinky nebo-li odkazy. HTML je základní a nejrozšířenější jazyk
pro tvorbu webových stránek. První funkční verze byla vydána v roce 1991. Česká Wiki
Anglická Wiki
HTML 4
HTML 5
Značky Do běžného textu se vkládají HTML
, tedy značky, určující význam, vzhled, způsob chování
jednotlivých částí běžného textů. Tak vzniká hypertextový dokument nebo-li webová stránka. Značky se dělí na párové a nepárové. Název značky se vkládá mezi symboly < а >. Párová značka určuje počátek a konec svého působení, například počátek a konec zvýraznění tučným písmem nebo počátek a konec odkazu. Nepárová značka má jednorázový účinek, například vložení jednoho nového řádku.
Značky Začátek párové značky obsahuje její jméno a případné atributy v lomených závorkách < >.
Konec párové značky obsahuje lomítko / a jméno značky v lomených závorkách < >. Případné atributy není třeba uvádět. Nepárová značka se píše stejně jako začátek párové značky, ale nemá žádný konec.
Nepárová značka
Začátek a konec
párové značky P
Atributy značek Každá značka má specifikovanou množinu svých atributů. Atributy rozšiřují možnosti značek, řada
značek má bez atributů minimální význam. Atributy se uvádí po jménu značky spolu s jejich hodnotou, neuvádí se při uzavření párové značky. Značka P obsahuje atribut align s hodnotou right
Začátek a konec
párové značky P
Tolerance Párová značka by měla mít svůj jasně stanovený počátek a konec. Nicméně HTML toleruje
absenci konce u celé řády párových značek. Pozor! Neuzavřená párová značka, které chybí konec, může způsobit značné problémy! HTML také toleruje překlepy a nesprávně napsané značky. Pokud nerozpozná název značky nebo atributu značky, ignoruje takovou chybu. Ale i v tomto případě mohou utrpět finální vzhled a funkčnost stránky. Spustit příklad
Tolerance Rozeberme příklad z minulého snímku: Párové značky , a by měly mít svůj začatek a konec. Zde chybí
!
Třetí značka však postrádá uzavření, tudíž
její platnost pokračuje dal. Ve výsledku i poslední odstavec je obarven červenou barvou.
Struktura dokumentu Základní struktura webové stránky: 1. Informace o dodržovaném DTD standardu. Pokud není uveden, prohlížeč sám rozhodně o zpětné kompatibility některých značek. 2. Kořenový element na začátku a konci. 3. Hlavička , obsahující název stránky
, informace o stylech, metadata o kódování dokumentu, klíčových slovech, autorovi atd. Do hlavičky se také umisťuje kód skriptovacích jazyků jako JavaScript, VB Script atd. 4. Tělo <body>, obsahující vlastní obsah dokumentu. Ve vzácných případech se nevyužívá.<br />
<br />
Struktura dokumentu Příklad kódu, obsahující, mimo jiné: 1. Informace o DTD standardu 4.01 Transitional. 2. Název stránky ve značce <title> 3. Metadata o českém kódování a autorovi.<br />
<br />
Spustit příklad<br />
<br />
První stránka za dvě minuty 1. Otevřete program, zvaný Poznámkový Blok. Dá se spustit pomoci příkazu notepad.exe.<br />
<br />
2. Napište do něj HTML kód, například tento: <html><body>Ahoj světe!</body></html><br />
<br />
3. Uložte soubor pod libovolným názvem s příponou<br />
<br />
.html. 4. Dvakrát na něj kliknete, aby prohlížeč zobrazil vámi napsanou webovou stránku. Máme stejnou? Spustit příklad<br />
<br />
HTML editory Většina tvůrců webových stránek dnes používá HTML editory, zrychlující a usnadňují práci. Není zapotřebí vlastnit drahý složitý editor, stačí aby váš editor zobrazoval HTML kód stránky, zvýrazňoval značky a atributy, umožňovat náhled zpracovávané stránky a uměl kontrolovat případné chyby jako neuzavřené párové značky. Pozor! Většina konvertorů do formátu HTML dělají stránku nepřehlednou a těžkou na údržbu. Podívejte se po Free HTML editorech na Google!<br />
<br />
Standardy HTML Postupem času mnoho značek HTML začalo být považováno za zastaralé a jejich využívaní se<br />
<br />
nedoporučuje. Objevily se kaskádové styly a skriptovací jazyky, rozšiřující možnosti původního HTML. Moderní prohlížeče stále nedodržují všechny standardy HTML. To způsobuje tvůrcům stránek mnoho problémů – musí kontrolovat funkčnost stránek pro každý prohlížeč! Splňuje váš prohlížeč standard HTML 5?<br />
<br />
Shrnutí Dozvěděli jsme se dnes o: HTML jako jazyce pro tvorbu webových stránek<br />
<br />
Značkách HTML – párových i nepárových Atributech HTML Toleranci jazyka HTML a následcích chyb<br />
<br />
Struktuře dokumentu Editorech a standardech HTML<br />
<br />
… a nyní umíme sami vytvářit jednoduchou<br />
<br />
stránku! Gratulujeme!<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/mgr-stpan-stpanov-2013" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "Mgr. Stěpan Stěpanov, 2013"</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>
