pre začiatočníkov
Tvorba webstránok
Lekcia 1 – Zoznámenie s HTML
HTML = (HyperText Markup Language)
- je značkovací jazyk určený na vytváranie webových stránok a iných informácií zobraziteľných vo webovom prehliadači
- kladie dôraz skôr na prezentáciu informácií texty, obrázky, prepojenia, štruktúra
HTML značka
- je tvorená kľúčovým slovom (názvom tagu), ktorý je obklopený ostrými zátvorkami
<názovtagu>obsah</názovtagu>
HTML značky sú uvádzané väčšinou v pároch
<p> a </p>
- <html> – HTML DOKUMENT
- <head> – HLAVIČKA STRÁNKY – názov, meta údaje, ikonka stránky, import fontov,…
- <body> – hlavný obsah
- <footer> – obsah pätičky
- <p> – odsek
- <div> – sekcia
- <h1>…<h6> – nádpisy
- <br> – voľný riadok
- …
HTML elementy
- HTML dokumenty sú tvorené pomocou HTML elementov
- každý HTML element je písaný so štartovacím, koncovým tagom (značkou) a medzi nimi sa nachádza konkrétny obsah
<názovtagu>obsah</názovtagu>
HTML elementy môžu byť vnorené navzájom do druhého.
<p> =označuje odsek
<div> =označuje oblasť, ktorá ma nejaký spoločný súvis
Zoznamy
Jazyk HTML umožňuje vypisovať tzv. zoznamy – súbory položiek, ktoré spolu nejako súvisia. Tie môžu byť nečíslované alebo číslované.
<ul>
<li> vec A </li>
<li> vec B </li>
</ul>
=
vec A
vec B
<ol>
<li> vec A </li>
<li> vec B </li>
</ol>
=
1. vec A
2. vec B
Obrázky a prepojenia
Našu stránku môžeme oživiť obrázkami alebo prepojeniami na iný obsah.
Tag <a>
- text, ktorý slúži ako odkaz, je obalený párovým tagom
<a>Text odkaz</a>
Href
Tag <a> má dôležitý atribút „href“.
Href obsahuje adresu, podľa ktorej prehliadač pozná, na akú stránku má prepnúť, keď sa na odkaz klikne.
<a href=“https://www.facebook.com“>Facebook</a>
IMG
V HTML sa obrázky vkladajú nepárovým tagom IMG, ktorý má jeden povinný a mnoho nepovinných parametrov.
Tým povinným je src, umiestnenie obrázku.
<img src=“nejaky_obrazok.gif“>
Pokiaľ bude v inom adresári (priečinku), pridá sa adresárová cesta.
<img src=“./adresar/iny_obrazok.gif“>
Selektory
- id – charakterizuje jedinečný prvkov – #
- class – charakterizuje skupinu podobných prvkov – .
ÚLOHY:
VYTVORTE POMOCOU HTML STRÁNKU SO ŠTRUKTÚROU, OBSAHUJÚCU TITLE, ODSEKY, NÁDPISY, VOĽNÝ RIADOK, …
tip: prvé stránky kódujte v poznámkovom bloku alebo prostredí, ktoré s vami nebude spolupracovať a dopĺňať vám kód
Následne odporúčam používať Visual Studio Code, ktoré si bezplatne stiahnete na: https://code.visualstudio.com/
Inšpirácia kódu:
<!DOCTYPE html>
<html>
<head>
<title>NÁZOV STRÁNKY</title>
<meta charset=”UTF-8”>
</head>
<body>
<p>Môj prvý odsek</p>
<h1>Môj prvý názov</h1>
<br>
<h5>Menší názov</h5>
</body>
<footer>
<p>vytvorila Daniela</p>
</footer>
</html>