TNPW1 Cvičení 2 6.10.2015
[email protected]
TNPW1 Cvičení 1
Technologie pro tvorbu webu • HTML, HTML5 – značkovací jazyk – struktura, obsah, odkazy - hypertext
• CSS, CSS3 – kaskádové styly – vzhled (rozvržení, formátování, jednoduché efekty)
• Javascript – skriptování na straně klienta – efekty, interakce, taky AJAX, knihovna jQuery
• PHP, ASP, Java, Perl, … - na straně serveru – dynamické stránky, aplikace, práce s databází
• MySQL, MSSQL - databáze
Úvod do HTML 6.10.2015
[email protected]
TNPW1 Cvičení 2
Úvod do HTML • HTML (HTML5) je značkovací jazyk – používá značky / tagy k popsání obsahu • tagy jsou klíčová slova v závorkách • většinou jsou párové a • prohlížeče interpretují tagy a podle toho zobrazují obsah (k tomu využívají CSS, pokud není, tak defaultní styly prohlížeče)
TNPW1 Cvičení 2
Základní tagy / elementy • • • • • • •
HTML - označuje HTML stránku Hlava a tělo - základní dělení stránky Metadata (o stránce), titulek webu Strukturní elementy HTML5 Nadpisy, odstavce, odkazy Obrázky, tabulky, seznamy ...
TNPW1 Cvičení 2
Základní HTML5 dokument
Základní HTML5 dokument <meta charset="utf-8">
Základní HTML5 dokument
nějaký text
TNPW1 Cvičení 2
Titulek
• Titulek stránky - měl by být smysluplný a jedinečný pro každou stránku - zásadní element při indexaci stránek / vyhledávání<br />
<br />
• Zapisuje se do hlavičky HTML dokumentu (mezi <head> a </head>), stejně jako metadata • <title>Star Wars - postavy a herci z filmu
TNPW1 Cvičení 2
Metadata <meta> • <meta charset='utf-8'> (určení znakové sady)
• <meta name='description' content='...' > (popis stránky) - zobrazuje se např. v Google vyhledávání • <meta name='keywords' content= '... ' > (klíčová slova stránky oddělená čárkami) - dnes už se nepoužívá, dřív sloužilo pro indexaci a vyhledávání
HTML nadpisy 6.10.2015
[email protected]
TNPW1 Cvičení 2
Nadpisy
• Několik úrovní • Nadpis první úrovně
– nadpis celé stránky, jednou na každé stránce – uvádějte ho vždy a pojmenujte smysluplně – zásadní element při indexaci stránek, podobně jako titulek ! • <h2>Nadpis druhé úrovně</h2> atd. – počet na stránce podle potřeby<br />
<br />
TNPW1 Cvičení 2<br />
<br />
Nadpisy <h1-6> • Nadpis <h2> sémanticky vyjadřuje podnadpis hlavního nadpisu atd. • Obsah jde strukturovat až po nadpis <h6> • Nadpisy dalších úrovní by neměly být použity, pokud neexistuje nadpis předchozí úrovně • Nepřeskakujte úrovně (ne <h1> a za ním <h3>)<br />
<br />
TNPW1 Cvičení 2<br />
<br />
Příklad <h1>Stránka o zelenině</h1> <h2>Květák</h2> <p>Květák je oblíbenou košťálovou zeleninou.</p> <h3>Recepty s květákem</h3> <h4>Květáková polévka</h4> <p>Očištěný květák rozdělíme na růžičky a opláchneme ve studené vodě… </p> <h3>Jak pěstovat květák</h3> <p>Květák vyžaduje vhodné stanoviště… </p> <h2>Zelí</h2> <p>Zelí je z rodu brukev.</p><br />
<br />
HTML odkazy 6.10.2015 aneta.bartuskova@uhk.cz<br />
<br />
TNPW1 Cvičení 2<br />
<br />
Odkazy <a> • Hypertextové odkazy – absolutní a relativní • Absolutní nás dostane vždy na stejnou adresu (použití při odkazování na jiný web) • Relativní používáme při odkazování mezi stránkami a soubory jednoho webu (při změně umístění webu budou odkazy stále fungovat)<br />
<br />
TNPW1 Cvičení 2<br />
<br />
Atributy + příklad Atributy • href – cíl odkazu – URL (absolutní nebo relativní) • name – jméno záložky (viz další stránka - kotvy)<br />
<br />
• <a href="http://www.seznam.cz" rel="nofollow">Seznam</a> • <a href="obrazky/muj_obrazek.jpg" rel="nofollow">Můj obrázek</a><br />
<br />
TNPW1 Cvičení 2<br />
<br />
Kotvy • Odkaz v rámci jedné stránky - při kliknutí na odkaz se stránka odroluje na pozici záložky <h1 id="zalozka">Nadpis webu</h1> <p> ... </p> <a href="#zalozka" rel="nofollow">Vrátit na nadpis webu</a> <p> ... </p> Pozn.: Místo elementu <h1> lze použít jakýkoli jiný, třeba odstavec <p> Pozn.2: Místo atributu id lze použít atribut name<br />
<br />
HTML obrázky 6.10.2015 aneta.bartuskova@uhk.cz<br />
<br />
TNPW1 Cvičení 2<br />
<br />
Obrázky <img> • Používáme nepárový element <img> • Obrázky mějte uložené s takovými rozměry, ve kterých je chcete zobrazit na webu (např. u fotogalerie - obvykle miniatura obrázku odkazující na větší obrázek v původní velikosti obrázky jsou uložené jako dva soubory o různé velikosti!) - jinak web zbytečně zpomalujete, pozor také na deformaci poměru stran<br />
<br />
TNPW1 Cvičení 2<br />
<br />
Atributy • src - cesta k obrázku, zpravidla zadaná relativně • title - může se zobrazit jako tooltip spolu s obrázkem • alt - alternativní text, který se zobrazí při nenačtení obrázku, tedy místo obrázku. Měl by popisovat, co je na obrázku, ne jen název souboru. • width, height - rozměry obrázku, měly by souhlasit se skutečnými rozměry obrázku (když se obrázek nenačte nebo se bude načítat pomalu, tak se layout nerozsype ani se nebude přeskupovat)<br />
<br />
TNPW1 Cvičení 2<br />
<br />
Příklad • <img src= "kosik-s-houbami.jpg" title= "Náš košík s houbami" alt= "Našli jsme spoustu hub a máme plný košík!" width= "200" height= "120"><br />
<br />
Procvičení 6.10.2015 aneta.bartuskova@uhk.cz<br />
<br />
TNPW1 Cvičení 2<br />
<br />
Procvičení • Vytvořte složku „cviceni1” na disku W • Vytvořte v ní soubor index.html se základní strukturou (viz slide 6) • Zobrazte tento soubor v prohlížeči na adrese http://lide.uhk.cz/fim/student/login/cviceni1<br />
<br />
TNPW1 Cvičení 2<br />
<br />
Procvičení 2 • Doplňte soubor, aby obsahoval – – – – – –<br />
<br />
srozumitelný titulek metatagy charset a description nadpis h1 + nadpisy nižší úrovně několik odstavců absolutní odkaz v textu obrázek se všemi atributy<br />
<br />
• postupně vyzkoušejte v prohlížeči (je potřeba aktualizace okna pomocí klávesy F5)<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/tnpw1-cvieni84d27959ccc153135fabe20e23a9581c51972" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "TNPW1 Cvičení"</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>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script> 
