HTML tekst : HTML Text

HTML naslovi : Headings

HTML razlikuje 6 razina naslova u tekstu. Naslovi se međusobno razlikuju po veličini fonta. Najveći je glavni naslov (naslov veličine 1) odnosno element <h1> a najmanji je naslov veličine 6 odnosno element <h6>. Potrebno je razlikovati naslove <h1> do <h6> unutar teksta web stranice od naslova web stranice <title> koji se ispisuje na kartici web stranice.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML naslovi</title>
  </head>
  <body>
    <h1>Ovo je glavni naslov </h1>
    <h2>Ovo je naslov razine 2</h2>
    <h3> Ovo je naslov razine 3</h3>
    <h4> Ovo je naslov razine 4</h4>
    <h5> Ovo je naslov razine 5</h5>
    <h6> Ovo je naslov razine 6</h6>
  </body>
</html>

HTML kodovi i web dizajn

HTML Odlomci : Paragraphs

Želimo li umetnuti tekst unutar web stranice najjednostavnije je koristiti za to html elemente odlomka: <p> (engl. paragraphs). Svaki html odlomak počinje u novom retku. Želimo li oblikovati tekst koristimo oznake elemenata za podebljan ili nakošen tekst, tekst u eksponentu ili indeksu i druge.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML odlomci</title>
  </head>
  <body>
    <p>Odlomak se sastoji od jedne ili više rečenica. </p>
    <p>Svaki odlomak počinje u novom retku.</p>
    <p>Poglavlja u knjizi imaju podnaslove. </p>
    <p>Unutar podnaslova može se nalaziti jedan ili više odlomaka.</p>
  </body>
</html>

HTML podebljan tekst: Strong

HTML omogućava podebljavanje dijela teksta pomoću elementa <strong>. Ovaj element je linijski što znači da on ne uzrokuje prijelaz u novi redak za razliku od elementa odlomka <p> koji je blok element i nakon njega web preglednik prelazi u novi redak.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML podebljano</title>
  </head>
  <body>
    <p>Pomoću ovog elementa <strong>podebljamo</strong> slova</p>
    <p>U opisu možemo <strong>važnije stvari</strong> podebljati.</p>
  </body>
</html>

HTML nakošen tekst : Italic

Pomoću HTML-a možemo nakositi dio teksta korištenjem elementa <em>. Ovaj element je tekođer linijski što znači da on ne uzrokuje prijelaz u novi redak za razliku od elementa odlomka <p> koji je blok element (nakon njega web preglednik prelazi u novi redak).

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML nakošen tekst</title>
  </head>
  <body>
    <p>Pomoću ovog elementa možemo <em>nakositi</em> tekst.</p>
    <p>Marko Polo je putovao u <em>Kinu</em>.</p>
  </body>
</html>

HTML indeks i eksponent : Subscript and Superscript

U html-u možemo umetati tekst u indeks i eksponent kao u primjeru z2 = x2 + y2 ili H20. I html elementi za prikazivanje teksta u indeksu i eksponentu su linijski elementi.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML indeks i eksponent</title>
  </head>
  <body>
    <p>x<sup>2</sup>+y<sup>2</sup> = z<sup>2</sup>
    koristimo za opisivanje kružnice.</p>
    <p>Količinu CO<sub>2</sub> je u porastu zbog povećanog prometa.</p>
  </body>
</html>

HTML razmak : White Space

U slijedećem primjeru možemo vidjeti kako se web preglednik ponaša kada uzastopno umetnemo više uzastopnih razmaka u tekst. On više od jednog razmaka zanemaruje.

Ovdje također vidimo što se događa s umetanjem prelaska u novi redak u tekstu (pritiskom tipke Enter). I on je ignoriran od strane web preglednika.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML razmak</title>
  </head>
  <body>
    <p>Mjesec se okreće oko zemlje.</p>
    <p>Mjesec se              okreće oko zemlje..</p>
    <p>Mjesec se okreće 
                        oko 
    
					zemlje.</p>
  </body>
</html>

HTML novi redak : Line Breaks

Želimo li umetnuti novi redak u tekst potrebno je koristiti poseban element za to. Njegova oznaka je <br /> koja dolazi kao kratica engleske riječi break.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML razmak</title>
  </head>
  <body>
    <p>Zemlja se okreće oko <br />sunca. Četiri godišnja <br />doba.</p>
  </body>
</html>

HTML vodoravna crta : Horizontal Rules

Želimo li odijeliti dva dijelove web stranice vodoravnom crtom koristimo element <hr />. Crta zauzima 100% roditeljskog elementa ako drugačije ne naznačimo pomoću svojstva width.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML vodoravna crta</title>
  </head>
  <body>
    <p>Putovanje u središte zemlje.</p>
    <hr />
    <p>Gospodar prstenova.</p>
    <hr width="50%" />
  </body>
</html>

HTML citati : Quotations

HTML omogućava umetanje citata u tekst. Za to nam služi element <blockquote>. Tko je citiran u tekstu određuje vrijednost dodijeljena svojstvo cite u početnom elementu <blockquote>.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML citati</title>
  </head>
  <body>
    <blockquote cite="https://www.mojwebdizajn.net ">
    <p>Želiš li početi s web dizajnom?</p>
    </blockquote>
    <p>Kao što je navedeno, <q>ljudi traže istinu.</q></p>
  </body>
</html>

HTML kratice i akronimi : Abbreviations and Acronyms

Trebamo li koristiti kratice, u html za to nam služi element <abbr> gdje svojstvu title dodjeljujemo vrijednost punog naziva. Za korištenje akronima koristimo element <acronym> u kojem također svojstvu title dodjeljujemo puni naziv akronima.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML kratice</title>
  </head>
  <body>
    <p><abbr title="Profesor">Prof</abbr> Ruđer Bošković 
    je bio fizičar i astronom.</p>
    <p><acronym title="National Aeronautics and Space Administration">NASA
    <dfnacronym> istražuje svemir.</p>
  </body>
</html>

HTML definicije : Definitions

Definicije u html označavamo elementom <dfn>.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML definicije</title>
  </head>
  <body>
    <p><dfn>crna rupa </dfn>
    je prosto u svemiru iz kojega ništa ne može izaći.</p>
  </body>
</html>

HTML adresa : Address

HTML omogućava i unos adrese pomoću elementa <address>.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML adresa</title>
  </head>
  <body>
    <address>
    <p><a href="mailto:ivan@primjer.org">ivan@primjer.org</a></p>
    <p>Braće Radić 12. Zagreb</p>
    </address>
  </body>
</html>

HTML umetanje i brisanje : Insert and Delete

Ponekad je potrebno u html-u označiti da smo umetnuli unutar teksta nove dijelove koje se nisu tu prije nalazili. Html element koji nam to omogućava je c kao kratica od engleske riječi insert.

Ako smo dijelove teksta obrisali u odnosu na prethodnu inačicu teksta koristimo html element <del> koji je kratica od engleske riječi delete.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML umetanje i brisanje</title>
  </head>
  <body>
    <p>Ovo je <del>najgora</del> a ovo <ins>najbolja</ins> ideja.</p>
  </body>
</html>

HTML precrtano : Strikethrough

Želimo li precrtati dio teksta omeđimo ga html elementom <s>.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML umetanje i brisanje</title>
  </head>
  <body>
    <p>Stara cijena računala je:</p>
    <p><s>2995kn</s><p>
    <p>Sada je samo 1995kn</p>
  </body>
</html>