Webové stránky 2. Úvod do jazyka HTML
Vytvořil: Petr Lerch
Datum vytvoření: 11. 9. 2012
www.isspolygr.cz Integrovaná střední škola polygrafická, Brno, Šmahova 110 Šmahova 110, 627 00 Brno Interaktivní metody zdokonalující edukaci na ISŠP CZ.1.07/1.5.00/34.0538
W e bov é s t r á nk y
DUM číslo: 2 Název: Úvod do jazyka HTML Strana: 1/6
Škola
Integrovaná střední škola polygrafická, Brno, Šmahova 110
Ročník
4. ročník (SOŠ)
Název projektu
Interaktivní metody zdokonalující proces edukace na ISŠP
Číslo projektu
CZ.1.07/1.5.00/34.0538
Číslo a název šablony
III/2 Inovace a zkvalitnění výuky prostřednictvím ICT
Autor
Petr Lerch
Tématická oblast
Webové stránky
Název DUM
Úvod do jazyka HTML
Pořadové číslo
DUM 2
Kód DUM
VY_32_INOVACE_02_OV_LE
Datum vytvoření
11. 9. 2012
Anotace
Dokument, obsahuje obecný úvod do jazyka HTML.
Pokud není uvedeno jinak, je uvedený materiál z vlastních zdrojů autora.
Integrovaná střední škola polygrafická, Brno, Šmahova 110 Šmahova 110, 627 00 Brno Interaktivní metody zdokonalující edukaci na ISŠP CZ.1.07/1.5.00/34.0538
w e bov é s t r á nk y
DUM číslo: 2 Název: Úvod do jazyka HTML Strana: 2/6
HTML
HTML (HyperText Markup Language), je značkovací jazyk pro hypertext. Jedná se o nejzákladnější jazyk pro vytváření webových stránek v systému World Wide Web, který umožňuje publikaci dokumentů na Internetu. Je charakterizován množinou značek tzv. tagů a jejich vlastností tzv. atributů. Mezi značky se uzavírají části textu dokumentu a tím se určuje význam, neboli sémantika obsaženého textu. Názvy jednotlivých značek se uzavírají mezi úhlové závorky
. Část dokumentu tvořená otevírací značkou, nějakým obsahem a odpovídající ukončovací značkou tvoří tzv. element (prvek) dokumentu.
Editory webových stránek
Editory neboli programy, které nám umožňují vytvářet webový obsah jsou dvojího druhu: – textové editory – WYSIWYG editory
Textové editory
Pro tvorbu webových stránek v textových editorech je výborná znalost kódu nezbytná. Jsou to prakticky textové editory kam kodér (člověk zabývající se kódováním webových stránek) píše ručně jednotlivé tagy a tak vytváří celou strukturu webových stránek. Se znalostí jednotlivých tagů a jejich atributů je schopný vytvořit prakticky cokoliv, od formátování textů po celkový design stránky. Mezi takové editory patří například NotePad (poznámkový blok) nebo PSPad. Editory jako je PSPad obsahují řadu pokročilých funkcí jako například kontrolu kódu, zvýraznění tagů, automatické dokončení tagu, našeptávač a mnoho dalších ...
WYSIWYG editory
Tyto editory pracují na principu What You See Is What You Get (volně přeloženo jako To co vidíš, to dostaneš). Prakticky to znamená, že stránku vytváříme vizuální cestou a HTML kód se generuje automaticky. Tento způsob je doménou programů jako je Microsoft FrontPage, Adobe DreamWeaver nebo Adobe Fireworks.
Integrovaná střední škola polygrafická, Brno, Šmahova 110 Šmahova 110, 627 00 Brno Interaktivní metody zdokonalující edukaci na ISŠP CZ.1.07/1.5.00/34.0538
W e bov é s t r á nk y
DUM číslo: 2 Název: Úvod do jazyka HTML Strana: 3/6
ukázka uživatelského rozhraní programu PSPad ukázka uživatelskéhorozhraní rozhraní programu PSPad ukázka uživatelského programu PSPad
ukázka uživatelského rozhraní programu Adobe Dreamweaver ukázkauživatelského uživatelskéhorozhraní rozhraníprogramu programuAdobe AdobeDreamweaver Dreamweaver ukázka
Publikovánína nainternetu internetu Publikování
Integrovaná střední škola polygrafická, Brno, Šmahova 110 Šmahova 110, 627 00 Brno Interaktivní metody zdokonalující edukaci na ISŠP CZ.1.07/1.5.00/34.0538
66
W e bov é s t r á nk y
DUM číslo: 2 Název: Úvod do jazyka HTML Strana: 4/6
párové a tagy nepárové.
Párové tagy
Tagy v HTML
Párové tagy, jakkód již název dvojice - počáteční
Jak bylo uvedeno výše, HTMLnapovídá, tvoří tzv.tvoří . Tytoznaček značky nám umožňují vytvářet a <\tag> ukončující. tagů tvoří zkratky z anglických slov
obsah webové stránky. Právě Většinu z toho důvodu je jejich základní znalost poměrně důležitá. Tagy dělíme do dvou skupin na tagy párové a tagy nepárové. (např. <\h1> značka pro nadpis první úrovně - anglicky Headline).
Párové Tagů tagypro jednotlivé části webové stránky je mnoho, proto si uvedeme
Párové tagy, jak již napovídá, dvojice značek – počáteční a <\tag> alespoň párnázev základních tagů tvoří pro definování struktury textu. ukončující. Většinu tagů tvoří zkratky z anglických slov (např. <\h1> značka pro nadpis první úrovně – anglicky Headline).
Název tagu
Původ tagu (anglicky)
Typ tagu
Zápis tagu
Nadpis 1
Headline 1
párový tag
text<\h1>
Nadpis 2
Headline 2
párový tag
text<\h2>
Nadpis 3
Headline 3
párový tag
text<\h3>
Nadpis 4
Headline 4
párový tag
text<\h4>
Nadpis 5
Headline 5
párový tag
text<\h5>
Nadpis 6
Headline 6
párový tag
text<\h6>
Odstavec
Paragraph
párový tag
text<\p>
Break
nepárový tag
Tučný text
Bold
párový tag
text<\b>
Kurzíva
Italic
párový tag
text<\i>
Zalomení odstavce
zdroj:proto http://cs.wikipedia.org/wiki/Html Tagů pro jednotlivé části webové stránky je mnoho, si uvedeme alespoň pár základních tagů pro definování struktury textu.
Struktura HTML kódu
Publikování na internetu
7
HTML kód jako takový má pevně danou strukturu. Každá webová stránka začíná tagem a končí tagem <\html>. Následuje hlavička dokumentu <\head> a tělo dokumentu <\body>. Hlavička dokumentu obsahuje množství informací o webové stránce. Například titulek, informaci, která se zobrazuje v záložce webové stránky. Titulek vkládame mezi tagy hlavičky tagem text<\title>.<br />
<br />
Integrovaná střední škola polygrafická, Brno, Šmahova 110 Šmahova 110, 627 00 Brno Interaktivní metody zdokonalující edukaci na ISŠP CZ.1.07/1.5.00/34.0538<br />
<br />
w e bov é s t r á nk y<br />
<br />
DUM číslo: 2 Název: Úvod do jazyka HTML Strana: 5/6<br />
<br />
Například titulek, informaci, která se zobrazuje v záložce webové stránky. Titulek vkládame mezi tagy hlavičky tagem <title>text<\title>.<br />
<br />
Ukázka kódu nejjednodušší webové stránky<br />
<br />
Ukázka kódu nejjednodušší webové stránky <html> <head> <title>Má první stránka
Moje první html stránka. A nějaké další texty. zdroj: http://www.jakpsatweb.cz/zaklady-html.html
zdroj: http://www.jakpsatweb.cz/zaklady-html.html
Otázky 1. Popište pojem HTML. 2. Co jsou to tagy a jak je můžeme rozdělit? 3. Jaký je rozdíl mezi textovým editorem a WYSIWYG editorem webových stránek? 4. Vyjmenujte některé z funkcí textových editorů webových stránek. 5. Popište z jakých základních částí kódu se skládá každá HTML webová stránka? 6. Uveďte tagy pro následující položky: nadpis 1, odstavec, zalomení odstavce a titulek webové stránky.
Odpovědi 1. 2. 3. 4. 5. 6.
HTML je značkovací jazyk pro hypertext. Je to nejzákladnější jazyk pro vytváření webových stránek. Tagy tvoří základ jazyka HTML. Jsou to značky v úhlových závorkách definující obsah webové stránky. Tagy dělíme na párové a nepárové. Textové editory vyžadují znalost kódu a WYSIWYG editory tvoří kód automaticky na základě vizuálního uspořádání stránky. Například kontrola kódu, barevné zvýraznění tagů, automatické dokončení tagu, našeptávač, ... Každý HTML kód začíná tagem na , končí <\html>. Dále obsahuje hlavičku Publikování internetu definovanou tagy <\head> a tělo definované tagy <\body>. nadpis 1<\h1>,
odstavec<\p>,
,
titulek stránky<\title><br />
<br />
Integrovaná střední škola polygrafická, Brno, Šmahova 110 Šmahova 110, 627 00 Brno Interaktivní metody zdokonalující edukaci na ISŠP CZ.1.07/1.5.00/34.0538<br />
<br />
w e bov é s t r á nk y<br />
<br />
DUM číslo: 2 Název: Úvod do jazyka HTML Strana: 6/6<br />
<br />
8<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/webove-stranky-2-uvod-do-jazyka-html-datum-vytvoeni-str-ank-" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: str ánk y. Vytvořil: Petr Lerch"</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>
