<HTML>

HyperText Markup Language

Што е HTML?

HTML (HyperText Markup Language) е стандардизиран јазик за создавање и дизајнирање на веб-страници и веб-апликации.

Заедно со CSS и JavaScript, HTML е една од трите основни технологии што го овозможуваат модерниот веб-развој.

Главна цел на HTML е структурирање и семантичко опишување на содржината на вашиот веб-сајт со цел да се овозможи разбирливост и интероперабилност.

Надворешни линкови и ресурси

Структура и синтакса

Содржината се организира со елементи кои се дефинираат со почетни и крајни ознаки (тагови). Постојат и елементи како <link>, <meta>, <label>, <img>, <hr> кои немаат свои крајни ознаки.

Повеќето елементи имаат и свои атрибути кои го додефинираат елементот или ја дообјаснуваат содржината во него.

<!-- Ова е коментар -->
<parent attr="value">
  <child>
    текст
  </child>

  <child attr="value">
    текст
  </child>
</parent>

<html>, <head>, <body>

Основни елементи на секој HTML документ се <html>, <head> и <body>. <!DOCTYPE html> се става пред првата <html> ознака, односно пред почетокот на кодот, и ја означува верзијата на вашиот HTML документ.

Елементи кои го дообјаснуваат вашиот документ или повикуваат други надворешни документи се <title>, <meta> и <link> елементите.

<!DOCTYPE html>
<html lang="mk">
  <head>
    <meta charset="UTF-8">
    <meta name="author" content="CodeMaster">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- Останати мета податоци и надворешни фајлови -->
    <title>Наслов</title>
  </head>

  <body>
    <!-- Содржина на вашиот веб-сајт -->
  </body>
</html>

Надворешни линкови и ресурси

Текст, линк, слика

Основи на секој HTML документ се текстот, линкот (врската со други веб страници) и сликите, односно графичките елементи.

<h1>...<h6>

Елементите <h1>, <h2>, <h3>, <h4>, <h5>, <h6> се користат за дефинирање на наслови и поднаслови и најчесто ѝ претходат на содржината што ја опишуваат. Секој од овие елементи има различен степен на важност (семантички) почнувајќи од <h1> како најважен, сѐ до <h6> како најслов со најмала важност.

<p>

Со <p> елементот се дефинираат параграфи кои овозможуваат визуелно и семантичко групирање на текстот во засебни блокови. Покрај текст, со <p> елементот може да се групираат и други елементи во една засебна целина. За повеќе информации, обратете се до официјалната HTML спецификација.

<а>

Елементот <a> се користи за поврзување на вашиот HTML документ со други документи и ресурси. Важен е за навигација, без разлика дали станува збор за навигација од една веб-страница до друга или навигација во рамките на еден ист HTML документ.

<a href="#fragment">Линк 1</a>
<a href="https://developer.mozilla.org" target="_blank">Линк 2</a>

Поважни атрибути за <а> елементот се href, target, rel.

<img>

Се користи за вметнување на слики во вашиот документ. Атрибутот src е задолжителен и внатре се дефинира патеката до ресурсот (сликата). Со alt атрибутот се дефинира алтернативен текст што ќе се прикаже во случај дадениот ресурс да не е достапен.

<img src="assets/img/img.png" alt="Ова е слика" />

Поважни атрибути за <img> елементот се src, alt, width и height.

Надворешни линкови и ресурси

Листи и табели

<ul>, <ol>, <dl>

Овие елементи се користат за прикажување на податоци во линеарна структура. Синтаксата за подредена листа <ol> и неподредена листа <ul> е идентична. Вгнездените елементи се означуваат со <li>.

<ol>
  <li>Елемент 1</li>
  <li>Елемент 2
    <ol>
      <li>Елемент 2.1</li>
      <li>Елемент 2.2</li>
    </ol>
  </li>
  <li>Елемент 3</li>
</ol>

Дескриптивната листа <dl> се состои од група термини <dt> и нивни описи <dd>. Крајните ознаки (тагови) </dt> и </dd> можат да бидат изоставени.

<dl>
  <dt>Термин 1</dt>
  <dd>Опис</dd>
  <dd>Опис</dd>
  <dt>Термин 2</dt>
  <dd>Опис</dd>
</dl>

<table>

Табелите се користат за приказ на сет од податоци или информации кои се организираат во редови и колони (табеларен приказ) за поголема прегледност. Првиот ред во табелата најчесто е резервиран за насловни, односно описни, ќелии, додека последниот може да се користи за додатни информации или сумирање на податоци.

Елементите <thead>, <tbody>, <tfoot>, <colgroup> и <caption> се користат за семантичко доопишување и групирање на содржината и не се задолжителни.

<table border="1">
  <caption>Наслов на табела</caption>
  
  <thead>
    <tr>
      <th>Име</th>
      <th>Возраст</th>
    </tr>
  </thead>

  <tbody attr="value">
    <tr>
      <td>Филип</td>
      <td>29</td>
    </tr>

    <tr>
      <td>Ратко</td>
      <td>30</td>
    </tr>
  </tbody>

  <tfoot attr="value">
    <tr>
      <td colspan="2">Додатни информации</td>
    </tr>
  </tfoot>
</table>

Поважни атрибути што се однесуваат на табелите и нивните поделементи: border, colspan, rowspan, cellpadding, cellspacing, scope, summary...

Надворешни линкови и ресурси

Форми

Формите служат за прибирање на податоци од корисниците и се една од основните алатки за интеракција на корисникот со вашиот веб-сајт. Податоците може да се испратат на сервер за обработка или да се користат на клиентската страна за овозможување на одредени функционалности.

<form>, <input>, <button>, <select>, <textarea>

Овие елементи во зависност од потребите можат да постојат и надвор од рамките на <form> елементот.

Елементите <label>, <fieldset> и <legend> содржат додатни информации за полињата кои потоа корисникот и/или прелистувачот ги користи за соодветно пополнување на формата.

<form action="..." method="post">
  <label>Корисничко име:
    <input type="text" name="username" />
  </label>

  <label>Е-пошта:
    <input type="email" name="email" />
  </label>

  <label>Лозинка:
    <input type="password" name="password" />
  </label>

  <fieldset>
    <legend>Пол:</legend>
    <label>Машки
      <input type="radio" name="gender" value="male" />
    </label>

    <label>Женски
      <input type="radio" name="gender" value="female" />
    </label>
  </fieldset>

  <label>Место на живеење:
    <select name="city">
      <option value="skopje">Скопје</option>
      <option value="stip">Штип</option>
      <option value="pehcevo">Пехчево</option>
    </select>
  </label>

  <label>Вашата порака:
    <textarea name="message"></textarea>
  </label>

  <button type="submit">Испрати</button>
</form>

Поважни атрибути за <form> елементот и неговите поделементи се action, method, id, name, value, placeholder, for, type...

Постојат и алтернативни начини на семантичко поврзување на полињата со нивните етикети.

<p>
  <label>Етикета (ознака)</label>
  <input type="text" placeholder="Име и презиме" name="name" />
</p>

Препорачливо е да се користи for атрибутот за експлицитно поврзување на <label> и <input> елементите и добро е да се практикува секаде, без разлика на избраната синтакса.

<label for="inputId" >Етикета (ознака)</label>
<input id="inputId" type="text" name="name" />

Надворешни линкови и ресурси

Семантички HTML

Пишување семантички HTML значи користење на правилни елементи и ознаки за соодветната содржина со цел подобрување на пристапноста, интероперабилноста и индексирањето на вашата веб-страница од страна на пребарувачите.

Семантичкиот HTML е од особена важност за асистивните технологии, како што се читачите на екран, бидејќи им овозможува на корисниците со ограничени можности подобра навигација и разбирање на содржината.

<header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>
      
<main>
  <article>
    <header>
      <h1>Наслов на статијата</h1>
      <p>Објавено на <time datetime="2024-02-22">22 февруари 2024</time> од CodeMaster</p>
    </header>
    <section>
      <h2>Наслов на секција 1</h2>
      <p>Краток параграф што се однесува на содржината во секција 1.</p>
    </section>
    <section>
      <h2>Наслов на секција 2</h2>
      <p>Краток параграф што се однесува на содржината во секција 1.</p>
    </section>
  </article>

  <aside>
    <h2>За авторот</h2>
    <p>Краток параграф со информации за авторот и/или веб-страницата.</p>
  </aside>
</main>
      
<footer>
    <p>© 2024 CodeMaster</p>
</footer>

<div>, <span>

Овие елементи немаат семантичко значење и служат како помошни елементи во ситуации каде што не е можно користење на семантички-специфични елементи. Служат за визуелно групирање на содржината или се користат како помошни елементи за постигнување на одредена функционалност.

Надворешни линкови и ресурси

CSS и стилизирање

Стилизација, порамнување и анимирање на елементите се постигнува или преку CSS (со <style> елементот или како <link> до надворешен фајл) или преку style атрибутот на елементите.

Препорачливо е да се практикува имплементација со повикување на надворешен CSS фајл бидејќи го олеснува одржувањето и развојниот процес, овозможува повторно користење на кодот и обезбедува подобри перформанси.

<p style="color: red; font-size: 20px;">Текст.</p>

<link>

<link rel="stylesheet" href="css/styles.css" />

<style>

<style>
  .el {
    color: white;
    background-color: black;
  }
</style>

Надворешни линкови и ресурси

JS и функционалност

<script>

Вметнување на JavaScript код се постигнува со <script> елементот, кој најчесто се позиционира во рамките <head> или <body> елементите. Кодот може да биде напишан inline или преку src атрибутот да се од повикува надворешен фајл.

<script src="my-script.js" defer></script>

<script>
  console.log('Мојата скрипта работи');
</script>

Поважни атрибути на <script> елементот се src, type, defer и async.

Надворешни линкови и ресурси

Дополнителни ресурси