HTML

PL

12.1.2023.

Osnove

 

  • HTML je skraćenica od Hyper Text Markup Language
  • HTML je standardni jezik za stvaranje web stranica
  • HTML opisuje strukturu web stranice
  • HTML elementi govore pregledniku kako će prikazati sadržaj web dokumenta

 

HTML je temelj svih web stranica. Bez HTML-a ne biste mogli organizirati strukturu odnosno tekst ili dodavati slike ili videozapise na svoje web stranice. HTML je početak svega što trebate znati za izradu zanimljivih web stranica! Naučit ćete sve uobičajene HTML oznake koje se koriste za strukturiranje HTML stranica. Također ćete moći kreirati HTML tablice za učinkovito predstavljanje tabličnih podataka. Razumjet ćete kodove i znati primijeniti njihove efekte na vlastitu stranicu.

 

Osnovni pojmovi

 

  1. Razvoj weba i jezika za web, osnove izgradnje mrežnih stranica, tehnologije za izradu mrežnih stranica, osnovna sintaksa, apsolutne i relativne poveznice
  2. Zaglavlje i metapodatci, striktni, tranzicijski i okvirni način rada, kraj retka, rad sa slikama, usklađivanje teksta i slika, vanjske poveznice (sidrišta), okviri, odlomci, liste
  3. Hrvatski znakovi, preusmjeravanja, unutarnji okviri, tablice i modifikacije, obrasci HTML-a
  4. Content, layout i njihova međusobna veza
  5. Uvod u HTML5, podrška pretraživača i budućnost kodiranja strukture na webu, videokodeci i videoformati, audiokodeci i audioformati, pretvorba Flasha u HTML5, ubacivanje videoelemenata, audioelemenata i geolokacija

 

 

HTML  dokument 

 

< !DOCTYPE html>
<html>
<head>
         <title> Naslov </title>
</head>
<body>

          <h1> Ovo je heading </h1>
          <p> Ovo je paragraph </p>

</body>
</html>

 

Tagovi HTML ( oznake) nalaze se u uglatim zagradama

 

Tag Značenje
<!DOCTYPE html>                Označava da je dokument pisan u HTML5
<html>     tag elemnt početka i završetka dokumenta
<head>     tag element zaglavlja koji sadrži podatke o stranici
<title>     tag element koji predstavlja naslov stranice
<h1> - <h6>     tag element naslova i podnaslova u sadržaju dokumenta
<p>     tag element paragrafa
<body>     tag je element koji sadrži sve ono što će biti prikazano na stranici

 

 

Osnove prikaza TAG elemenata na ekranu

 

  • Dvije su osnovne vrijednosti prikaza tag elemenata: blok i inline
  • Element na razini bloka uvijek započinje na novoj liniji i zauzima cijelu dostupnu širinu ekrana
  • Inline element ne započinje na novoj liniji i zauzima samo onoliko širine koliko je potrebno
  • <div> Blok element često se koristi kao spremnik za druge HTML elemente
  • <span> Inline element se koristi za označavanje dijela teksta ili dijela dokumenta

 

Block element

 

 

<address>  <article>   <aside>  <blockquote>  <canvas> <dd>
<div>  <dl>  <dt>  <fieldset>  <figcaption> <figure>
<footer> <form>  <h1>-<h6> <header>  <hr> <li> 
<main> <nav>  <noscript> <ol>  <p> <pre>
<section> <table>  <tfoot> <ul> <video>  
           

 

Block elemente možemo zamisliti kao pravokutnik ili list papira koji ima:

  • širinu, ako nije navedena onda je uvijek 100%
  • visinu,
  • marginu ili odmak od ruba susjednog elementa ili ekrana,
  • border (okvir ili granicu),
  • padding odmak unutra od okvira do  sadržaja  
  • sadržaj

 

pogledajte u CSS Box model: https://www.w3schools.com/css/css_boxmodel.asp

                                                                                                                     

Inline element

 

 

<a> <abbr> <acronym> <b> <bdo> <big>
<br> <button> <cite> <code> <dfn> <em>
<i> <img> <input> <kbd> <label> <map>
<object> <output> <q> <samp> <script> <select>
<small> <span> <strong> <sub> <sup> <textarea>
<time> <tt> <var>      

 

 

HTML boje