Stranica oživi kada tekst dobije naglaske, kada se poveže sa drugim stranama i kada ima slike. U ovoj lekciji su elementi za oblikovanje teksta, linkovi (apsolutne i relativne putanje, sidra) i slike sa obaveznim opisom.
<p><strong>strong</strong> – važan tekst (podebljano)</p>
<p><em>em</em> – naglašen tekst (koso)</p>
<p><mark>mark</mark> – označeno markerom</p>
<p>H<sub>2</sub>O i x<sup>2</sup> – indeks i stepen</p>
<p><code>code</code> – deo koda</p>
<blockquote>blockquote – duži citat, uvučen</blockquote>
<p>Specijalni znakovi: < > & ©</p>
Rezultat:
Znakove <, > i & pregledač bi shvatio kao deo HTML-a, pa se pišu kao <, >, &.
Link se pravi elementom a (anchor), a adresa se zadaje atributom href:
| Vrsta | Primer | Kada |
|---|---|---|
| apsolutna adresa | <a href="https://petlja.org">Petlja</a> | link na drugi sajt |
| relativna adresa | <a href="kontakt.html">Kontakt</a> | strana u istom folderu |
| podfolder | <a href="projekti/igra.html">Igra</a> | fajl u podfolderu |
| folder iznad | <a href="../index.html">Početna</a> | .. = jedan folder gore |
| sidro na istoj strani | <a href="#hobiji">Hobiji</a> | skok na element sa id="hobiji" |
<a href="mailto:ime@primer.rs">Piši mi</a> | otvara email program |
Link koji treba da se otvori u novoj kartici dobija target="_blank" i, zbog bezbednosti, rel="noopener noreferrer". Tekst linka treba da kaže kuda vodi: „Pravila takmičenja“, a ne „klikni ovde“.
moj_sajt/
├── index.html ← početna
├── o_meni.html
├── kontakt.html
├── css/
│ └── stil.css
└── slike/
├── logo.png
└── odbojka.jpgIz index.html slika se poziva kao slike/logo.png. Imena fajlova piši malim slovima, bez razmaka i bez naših slova (moja_slika.jpg, ne Moja Slika.JPG) – na serverima se razlikuju velika i mala slova, a razmaci kvare adrese.
<img src="https://picsum.photos/id/1025/300/180" alt="Pas u ćebetu" width="300" height="180">
<figure>
<img src="nepostojeca.png" alt="Ovaj opis se vidi jer slika ne postoji" width="200">
<figcaption>Slika 1: figure i figcaption povezuju sliku i potpis</figcaption>
</figure>
Rezultat:
| Atribut | Značenje |
|---|---|
src | putanja do slike (relativna ili apsolutna) |
alt | obavezan opis: čita ga čitač ekrana za slepe, prikazuje se kada slika ne može da se učita i pomaže pretraživačima |
width, height | dimenzije u pikselima – pregledač unapred zna koliko mesta da ostavi, pa se stranica ne „trese“ dok se učitava |
loading="lazy" | slika se učitava tek kada se približi ekranu |
| Format | Za šta |
|---|---|
| JPG | fotografije |
| PNG | slike sa providnom pozadinom, snimci ekrana |
| SVG | logotipi i ikone – vektorski, oštri u svakoj veličini |
| WebP / AVIF | moderni formati – manji fajlovi |
<video src="video/eksperiment.mp4" controls width="400"></video>
<!-- YouTube video: na YouTube-u Podeli → Ugradi, pa se kopira iframe -->
<iframe src="https://www.youtube.com/embed/ID_VIDEA" title="Naziv videa" allowfullscreen></iframe>Element iframe prikazuje drugu stranicu unutar tvoje. Na ovoj strani se tako prikazuju i rezultati primera.
Za svaki zadatak postoji primer, uputstvo i rešenje. Rešenja su provereno ispravna u pregledaču.
Napravi stranicu sa sadržajem na vrhu (tri sidra: Priroda, Grad, Linkovi), dva odeljka sa po jednom slikom i potpisom (figure) i odeljak sa dva linka na spoljne sajtove koji se otvaraju u novoj kartici.
Logo.PNG ≠ logo.png na serveru).alt; ako je samo ukras, piše se prazan: alt="".C:\Users\... rade samo na tvom računaru – uvek koristi relativne putanje.1. Koji atribut zadaje adresu linka?
2. Čemu služi atribut alt kod slike?
3. Šta znači putanja ../index.html?
4. Koji format je najbolji za logo koji mora biti oštar u svakoj veličini?