pre začiatočníkov

Tvorba webstránok

späť na hlavnú stránku

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>