TlačiťTlačiť Slovenčina English Hľadať RSS

© 2005 – 2024 Roman Horváth, všetky práva vyhradené. Dnes je 1. 5. 2024.

Stránka sa načítava, prosím čakajte…

Upozornenie!

Tento predmet v tomto semestri buď nevyučujem, alebo používam na výmenu informácií so študentmi iný priestor (napr. MS Teams otvárané v novom okne (obvykle ide o externý odkaz)). Ak sa do tohto priestoru v budúcnosti vrátim, tak informácie, ktoré s týmto predmetom súvisia môžu byť upravené alebo spresnené pred alebo tesne po začiatku semestra, v ktorom ho budem vyučovať, resp. v ktorom obnovím používanie tohto priestoru na výmenu informácií so študentmi.

Podrobnosti o podmienkach hodnotenia nájdete zverejnené v systéme MAIS. otvárané v novom okne (obvykle ide o externý odkaz)

Základná štruktúra HTML5 dokumentu

<!DOCTYPE html>
<html lang="sk">
<head>
	<meta charset="UTF-8" />
	<title>Titulok stránky</title>
</head>


<body>

</body>
</html>

Základné značky HTML dokumentu

Značka Atribút Rozvinutie skratky Preklad do slovenčiny a význam
html   — koreň HTML dokumentu
head   — hlavička dokumentu
body   — telo dokumentu
Značky používané v hlavičke dokumentu
title   — titulok dokumentu (názov okna alebo karty prehliadača)
meta   metadata metaúdaje – „informácie o informáciách“ (o dokumente); napríklad autor, dátum vytvorenia, spoločnosť atď.; používa sa aj na určenie kódovania dokumentu; «nepárová značka»
charset character set určenie kódovej stránky (napr. UTF­‑8)
style   — štýl dokumentu (očakáva vložené CSS definície)
link   — prepojenie – prepojí tento dokument s iným zdrojom informácií (v našom prípade s definíciou štýlov CSS); «nepárová značka»
rel relationship typ vzťahu – povinný atribút; určuje vzťah medzi týmto dokumentom a pripojeným dokumentom (v našom prípade stylesheet)
type — typ – určuje typ média pripojeného dokumentu (v našom prípade text/css)
href hypertext reference hypertextový odkaz – v tomto prípade adresa súboru obsahujúceho definíciu štýlov CSS (v najjednoduchšom prípade meno súboru na rovnakej lokalite)
Značky používané v tele dokumentu
h1 – h6   heading 1 – 6 nadpis prvej až šiestej úrovne
p   paragraph odsek
br   break prerušenie – zlom riadka v rámci odseku; «nepárová značka»
a   anchor „kotva“ – obvykle odkaz na iný dokument
href hypertext reference hypertextový odkaz – adresa cieľovej stránky (v najjednoduchšom prípade meno súboru na rovnakej lokalite)
target — cieľ – určuje cieľové okno (kartu) v ktorom má byť odkaz otvorený; jednou z rezervovaných hodnôt je _blank, ktorá spôsobí, že odkaz bude otvorený v novom okne (na novej karte); pozor na znak _, keď ho zabudnete uviesť, správanie určené týmto atribútom sa zmení…
img   image obrázok; «nepárová značka»
src source zdroj – adresa zdroja obrázka
alt alternative text náhradný text zobrazovaný textovými prehliadačmi alebo v prípade chyby
width — šírka obrázka
height — výška obrázka
ul   unordered list „nezotriedený“ odrážkový zoznam
ol   ordered list „zotriedený“ číslovaný zoznam
li   list item položka zoznamu (zotriedeného alebo nezotriedeného)
Univerzálne atribúty (majú význam pre značky používané v tele dokumentu)
  class — trieda kaskádového štýlu – CSS
  style — vložené atribýty štýlov CSS

 

Za normálnych okolností sú v HTML dokumente zlúčené prázdne znaky do priestoru jednej medzery. To znamená, že aj nasledujúci odsek:

<p>Toto     je

odsek      s množstvom

zbytočného
prázdneho     priestoru.</p>

Bude nakoniec vyzerať takto:

Toto je odsek s množstvom zbytočného prázdneho priestoru.

Prerušiť riadok je možné značkou <br />. A aj keď to nie je odporúčané (z typografického a estetického hľadiska), vložiť viac medzier medzi slovami do textu je možné s pomocou takzvanej pevnej medzery, ktorú nemôže ignorovať ani HTML.

Pevná medzera je súčasťou kódovej stránky UTF­‑8 a dokonca aj zastaralej Windows-1250, ale v OS Windows sa ťažko vkladá, navyše sa vzhľadom vôbec nelíši od obyčajnej medzery (inak by nebola použiteľná). HTML však poskytuje alternatívny spôsob jej vloženia a to s pomocou takzvanej znakovej entity: &nbsp; (nbsp je skratkou pre non­‑breaking space – nedeliteľná medzera, resp. pevná medzera).

Okrem tejto znakovej entity podporuje HTML množstvo ďalších rôznych znakových entít. Náznak je možné vidieť na tejto stránke: HTML Entities otvárané v novom okne (obvykle ide o externý odkaz)

Toto je časť jedného príkladu, ktorý bol vytvorený na hodine TWS…

Súbor index.html

<!DOCTYPE html>
<html lang="sk">
<head>
	<meta charset="UTF-8" />
	<link href="style.css" rel="stylesheet" type="text/css" />
	<title>Ukážka</title>
</head>

<body>
<div class="jadro">

<ul class="ponuka">
	<li><a href="odkaz.html">massa</a></li>
	<li><a href="odkaz.html">vivamus</a></li>
	<li><a href="odkaz.html">aenean</a></li>
	<li><a href="odkaz.html">luctus</a></li>
	<li><a href="odkaz.html">mauris</a></li>
</ul><div style="clear: both"></div>

<h1>Lorem Ipsum</h1>

<p>Lorem ipsum dolor sit amet, pede urna ridiculus morbi, feugiat at, nec sem
nec pretium, habitasse diam tempor porta massa porta mi. Adipiscing duis purus
dolor magnam ullamcorper, et pretium leo pede. Ornare malesuada pede nonummy
vivamus morbi, erat diam neque laoreet nec, cursus scelerisque fusce sem, quis
aliquam ipsum et nibh est sed, amet lacus congue. Ante velit eleifend, congue
accumsan montes in amet, nec vestibulum commodo. Aliquet quisque nonummy
malesuada, faucibus ridiculus nulla eros, vitae dictum lacus risus maxime
feugiat.</p>

<p>Faucibus duis ipsum ullamco pharetra, pede erat id pellentesque, massa
integer quisque magna, sociis sit tempus, praesent velit iaculis feugiat eu
non. Nunc metus vehicula nullam, erat amet aliquet ut nascetur volutpat, mi
lacinia odio vel dolor pede, magna maecenas. Adipiscing vivamus pulvinar mus.
Congue curabitur risus repellat nostra sit, cursus neque. Mollis hymenaeos per
suspendisse turpis, turpis pellentesque sodales, justo ornare posuere, nunc
sapien, blandit a dolor nec odio urna. Pulvinar ornare nunc amet, proin lorem,
ipsum nunc quisque ut sit, donec egestas volutpat donec bibendum massa, nec
pellentesque faucibus purus nec.</p>

<p>Iste scelerisque donec aliquet habitant, mauris nec pharetra donec duis
dignissim nam, ut viverra nullam nulla. Et facilisis risus fusce fusce urna,
praesent nunc ligula, enim proin dui duis, aliquam interdum, ipsum tempor ut
vivamus. Nascetur hendrerit. Et nibh rhoncus amet, amet massa vivamus aenean
luctus mauris, ultricies augue lacinia feugiat dignissim. Lobortis imperdiet
quam facilisi integer suspendisse lobortis, felis elementum mauris lacinia.
Integer vel aenean eu donec sit sodales, ut condimentum lacus, est vitae sit
nunc turpis eu iaculis, quam aliquet nunc malesuada. Felis in, eleifend vel
phasellus mi ut, suscipit suspendisse dignissim arcu odio. Iaculis
consequatur, ut porttitor amet wisi duis in enim, rutrum vehicula ut. Mauris
pretium a non nulla at erat, nulla lectus nec erat pellentesque eget ultrices,
semper malesuada tristique maecenas egestas curabitur, nostra at in tellus
ipsum.</p>

<p>Velit hendrerit lacus ornare consectetuer hendrerit, donec elit rutrum elit
fermentum. Tortor tempus. Sed lorem nunc tempor orci risus suscipit, congue
faucibus elit sed dolor magna litora, accumsan quam leo porttitor etiam,
pellentesque amet pulvinar gravida. Accumsan nonummy nisl molestie. Sed a et
ornare a eu. Aliquam nulla mollis metus eu cras aliquam, fusce ligula, viverra
dictum et pharetra accumsan sapien euismod, laoreet non scelerisque, erat erat
varius elit id lectus. Libero ornare in elementum. Mi sem fermentum neque sit
diam, urna elit diam lorem adipiscing id luctus. Tincidunt consectetuer a
torquent magnis tempor libero, morbi atque mauris, sapien vestibulum semper
nisl cursus placerat metus, donec maecenas aenean eu enim, gravida at. Vivamus
ac auctor nec vitae iaculis eros, etiam leo mauris risus, odio non erat
suspendisse faucibus leo wisi, cras semper mauris vestibulum eum nec nec.
Praesent eu. Mauris vitae adipiscing id non ut in, orci dapibus quisque fusce
etiam malesuada quo.</p>

</div>
</body>
</html>

Súbor style.css


body
{
	background-image: url(moje-farebne-pozadie.png);
}

div.jadro
{
	margin: 10px auto;           /* vonkajšie okraje, auto - vystredí */
	padding: 10px 20px;          /* vnútorné okraje */
	font-family: sans-serif;     /* písmo neserifové */
	width: 80%;                  /* 80% šírka bloku */
	min-width: 600px;            /* najmenšia dovolená šírka v pixeloch */
	border-radius: 10px;         /* oblé okraje */
	background-color: rgba(255, 255, 255, 0.75);  /* priehľadné pozadie */
}

p
{
	text-align: justify;         /* zarovnanie podľa okraja */
	line-height: 125%;           /* riadkovanie 1.25 riadka */
}


ul.ponuka
{
	margin: 0px; padding: 0px;   /* vynulovanie všetkých okrajov */
	margin-top: 10px;            /* nastavenie horného vonkajšieho okraja */
	list-style: none;            /* odstránenie odrážok zoznamu */
}

ul.ponuka li
{
	margin: 0px; padding: 0px;   /* vynulovanie všetkých okrajov */
	float: left;                 /* zoradenie vedľa seba - vyžaduje
                                    <div style="clear: both"></div> */
}

ul.ponuka li a
{
	padding: 10px;               /* nastavenie vnútorných okrajov odkazov */
	color: gray;                 /* farba pri normálnom stave */
	font-weight: bold;           /* tučné písmo */
	text-decoration: none;       /* odstránenie podčiarknutia */
}

ul.ponuka li a:hover             /* hover - prechod myši nad prvkom */
{
	color: green;                /* farba pri prechádzaní myšou ponad. */
}

Obrázok s pozadím

Ukážka výsledku

Toto je príklad, ktorého cieľom je ukázať jeden zo spôsobov zlúčenia obsahu viacerých súborov do jedného okna. Príklad používa značku iframe na vloženie dvoch HTML súborov/dokumentov do jedného výsledného s pomocou tzv. (vložených) rámov. Jeden HTML dokument slúži ako ponuka, ten je zobrazený stabilne a druhý HTML dokument tvorí zvolený/zobrazený obsah, jeho zobrazenie sa mení podľa voľby návštevníka stránky. Ponuka je zobrazená vľavo vo vloženom ráme so šírkou 30 % šírky okna a zobrazený obsah je vedľa nej v ráme so šírkou zvyšných 70 %. Na to, aby bol výsledok zobrazený podľa požiadaviek je nevyhnutné odstrániť každý nadbytočný pixel rámov: okraje, orámovanie…

Súbor index.html

Poznámka: Aj keď je ukážka tohto súboru opticky rozdelená na tri časti, ide obsah jediného súboru. (Dôvod rozdelenia je zachovanie farebnej syntaxe do viacerých priestorov – HTML, CSS a opäť HTML.) 
<!DOCTYPE html>
<html lang="sk">
<head>
	<meta charset="UTF-8" />
	<title>Stránka s ponukou</title>

	<style>

	hmtl, body
	{
		/* Na fungovanie tejto ukážky je potrebné sa zbaviť
           všetkých okrajov. */
		margin: 0px;
		padding: 0px;

		/* Farby pozadia slúžia len na to, aby bolo vidieť
           jednotlivé časti ukážky. */
		background: silver;
	}

	iframe.ponuka, iframe.jadro
	{
		/* Rámy tiež nesmú mať okraj a ani orámovanie. */
		margin: 0px;
		border: none;
	}

	/*
        (Farby pozadia slúžia len na to, aby bolo vidieť
        jednotlivé časti ukážky.)

        Obidva rámy majú nastavenú šírku tak, aby spolu
        tvorili 100 %.
	*/
	iframe.ponuka { background: white; width: 30%; }
	iframe.jadro  { background: #eee;  width: 70%; }

	</style>
</head>

<body>

<!--
Obsah určený odkazom (src) značky iframe sa zobrazí v tých
prehliadačoch, ktoré ju podporujú a obsah určený „vnútrom“
značky iframe (<iframe src…>«vnútro»</iframe>) sa zobrazí
v tých prehliadačoch, ktoré ju nepodporujú. Vnútro by s tým
malo počítať a zobraziť niečo relevantné. V tomto príklade
prvá značka iframe obsahuje odkaz na zobrazenie ponuky
a druhá je prázdna.

Obidve značky musia byť „nalepené“ na sebe, inak by
prehliadač medzi nich vložil medzeru a zobrazili by sa pod
sebou (ich šírka a šírka medzery by v súčte tvorili viac
ako 100 % šírky okna).
-->
<iframe src="ponuka.html" class="ponuka">
	<p><a href="ponuka.htm">Kliknite sem na zobrazenie ponuky.</a></p>
</iframe><iframe src="uvod.html" class="jadro" name="jadro"></iframe>

</body>
</html>

Súbor ponuka.html

<!DOCTYPE html>
<html lang="sk">
<head>
	<meta charset="UTF-8" />
	<title>Ponuka</title>
</head>

<body>

<p>Ponuka:</p>

<ul>
	<li><a href="uvod.html" target="jadro">Úvod</a></li>
	<li><a href="kontakt.html" target="jadro">Kontakt</a></li>
</ul>

</body>
</html>

Súbor uvod.html

<!DOCTYPE html>
<html lang="sk">
<head>
	<meta charset="UTF-8" />
	<title>Úvod</title>
</head>

<body>

<h1>Ukážkový úvod</h1>
<p>…</p>

</body>
</html>

Súbor kontakt.html

<!DOCTYPE html>
<html lang="sk">
<head>
	<meta charset="UTF-8" />
	<title>Kontakt</title>
</head>
<body>

<h1>Ukážkový kontakt</h1>
<p>…</p>

</body>
</html>

Základné inštrukcie

  • Odkaz na inštaláciu Apache/PHP je už aj v sekcii Softvér.
  • Koreň webového priečinka Apache (do ktorého treba ukladať súbory) je nakonfigurovaný na nasledujúcu cestu: c:\Apache24\htdocs\
  • Lokálne spustenú službu webového servera adresujete v prehliadači takto: http://localhost/​ otvárané v novom okne (obvykle ide o externý odkaz).

Súbor _page-layout.php


<?php

	if (empty($title))
		$title = 'Môj obchod';
	else
		$title .= ' – Môj obchod';

?><!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title><?php echo $title; ?></title>
</head>

<body>

<div class="header">
	<h1>Moje webové sídlo…</h1>
	<p>Heslo mojej stránky alebo nejaká základná informácia…</p>
</div>

<div class="main-menu">
	<a href="#">Položka 1</a>
	<a href="#">Položka 2</a>
	<a href="#">Položka 3</a>
	<a href="#">Položka 4</a>
</div>

<?php
	if (isSet($page_contents))
	{
		echo $page_contents;
		echo "\r\n";
	}
?>
</body>
</html>

Súbor index.php


<?php
$title = 'Úvod';
$moja_premenna = 'vlastnej';
$page_contents = "<p>Obsah $moja_premenna stránky.</p>";
include '_page-layout.php';
?>

Súbor style.css

Zdroj z ktorého sme čerpali štýl základného rozloženia: https://www.​w3schools.​com/​css/​tryit.​asp?​filename=​trycss_​website_​layout_​blog otvárané v novom okne (obvykle ide o externý odkaz)


body
{
	font-family: "Verdana", "Tahoma", "Arial", sans-serif;
	padding: 10px;
	background-color: #f1f1f1;
}


.header
{
	padding: 30px;
	text-align: center;
	background-color: white;
}

.header h1
{
	font-size: 50px;
}


.main-menu
{
	background-color: #246;
}

.main-menu a
{
	float: left;
	display: block;
	color: #eee;
	font-weight: bold;
	padding: 14px 16px;
	text-decoration: none;
}

.main-menu a:hover
{
	background-color: #6b6;
}

.main-menu:after
{
	content: "";
	display: table;
	clear: both;
}

Prosím, vyberte niektorú z kariet sekcie Dokumenty a materiály…

Názov položky Veľkosť Dátum
48,09 MB (45,86 MiB) 19. 4. 2024
24,91 MB (23,76 MiB) 1. 3. 2019

© 2005 – 2024 Pedagogická fakulta Trnavskej univerzity v Trnave, všetky práva vyhradené. Dnes je 1. 5. 2024.