HTML

HTML je standardni jezik pri katerem s pomočjo atributov in oznak izdelujemo spletne strani. Koda v HTML dokumentu se vedno začne z lomljenim oklepajem (<), nato ime elementa, če je to naslov je oznaka h1, če je to odstavek je oznaka p, in zaključimo z lomljenim zaklepajem (>). Dokument se lahko izdela v beležnici, ali z uporabo drugih orodij, kot so PHP Storm, Visual Studio Code itn.

HTML

Kaj je HTML?

    Kako pišemo elemente v HTML dokument:
  1. <h1>vsebina naslova</h1>
  2. <p>vsebina odstavka</p>
  3. <imeElementa>vsebina dokumenta</imeElementa>
    HTML pomeni Hyper Text Markup Language, in:
  1. je standardni jezik za ustvarjanje spletnih strani
  2. opisuje strukture spletne strani
  3. je sestavljen iz vrste elementov
  4. sporoča brskalniku, kako prikazati vsebino
  5. označuje dele vsebine, kot je to naslov, odstavek itd.
ELEMENT OPIS
<!DOCTYPE html> definira dokument kot HTML5
<html> je korenski element HTML strani
<head> vsebuje meta informacije o dokumentu
<title> določa naslov HTML dokumenta
<body> vsebuje vidno vsebino strani
<h1> <h2> <h3> <h4> <h5> <h6> določa velikost naslova
<p> določa odstavek
</body> vsebino zaključimo
</html> zaključimo naš HTML dokument
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>NASLOV</title>
    </head>
    <body>
    <h1>vsebina naslova</h1>
    <p>vsebina odstavka</p>
    </body>
    </html>
    

Pisanje HTML dokumenta

Obstaja kar nekaj brezplačnih programov za pisanje HTML dokumenta, med katere spada Beležnica v sistemu Windows, in v ostalih operacijskih sistemih. Vse, kar moramo storiti, ko dokument pišemo, je, da ga shranimo pod .html, in pod Vrsta datoteke izberemo Vse datoteke. Druga možnost je Notepad ++, tretja možnost je Visual Studio Code in pa zadnja, po mojem mnenju najboljša rešitev PHP Storm. PHP Storm je brezplačen samo za 30 dni, kasneje plačljiv, ampak vredna vsakega centa, več o PHP Storm dokumentaciji, si lahko preberemo tukaj.

Pisanje HTML dokumenta 2
Pisanje HTML dokumenta 2

DOCTYPE

Vse je odvisno od tipa elementa, kateri ima atribute, ki jih dovoli večini. Vsi elementi so že vnaprej definirani, in si ne moremo izmišljevati svojih. Sam HTML dokument se začne z znakom DOCTYPE <!DOCTYPE html>, kjer definiramo tip dokumenta. Odstavek ali naslov je vedno potrebno zaključiti s poševnico (/), ni pa potrebno zaključevati slike (kratica =img) elementa.

doctype

HTML je standardni jezik za ustvarjanje spletnih strani. Koda v HTML dokumentu se vedno začne z oklepajem (<), nato ime elementa, če je to naslov je oznaka h, če je to odstavek je oznaka p, in vse skupaj zaključimo z zaklepajem (>). Vsaka oznaka ima različne atribute. Najbolj razširjen oziroma uporabljen atribut je class in se navezuje na call, ki je shranjen v CSS, in z njim povezujemo spletno stran. Povezujemo se tudi na class atribut, ki ima lastnosti s katerimi oblikujemo odstavek, podatke, spise itn.

Metadata

Metadata so podatki o podatkih, in oznaka meta vsebuje podatke o HTML dokumentu. Metapodatki se ne prikažejo na spletni strani, ampak so strojno primerljivi. Meta podatki se običajno uporabljajo za določitev opisa strani, ključnih besed, avtorja dokumenta, nazadnje spremenjenih podatkov itn. Metapodatke uporabljajo brskalniki, kako prikazati vsebino spletne strani ali druge spletne storitve. HTML5 je z oznako meta uvedel metodo, s katero spletni oblikovalci lahko prevzamemo nadzor nad vidnim poljem spletne strani.

Meta oznake gredo vedno znotraj <head> elementa (glave), in so vedno preneseni v parih ime/vrednost. Če je ime ali http-equiv atribut definiran, MORA vsebinski atribut biti prav tako. Če nič od tega ni definirano, vsebinski atribut NE MORE biti definiran.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="description (opis)" vsebina="Izdelava spletnih strani">
    <meta name="keywords (ključna beseda)" vsebina="HTML, CSS, JavaScript, PHP, CSharp">
    <meta name="author" vsebina="Kranjski Janez">
    <meta name="viewport (pogled)" vsebina="width=device-width, initial-scale=1.0">
    </head>
    <body>

    </body>
    </html>
    
ATRIBUT VREDNOST OPIS
charset character_set določa kodiranje znakov za HTML dokument
content / vsebina besedilo določa vrednost, ki je povezana z atributom http-equiv ali name
http-equiv
  • content-security-policy
  • content-type
  • default-style
  • refresh
ponuja vrednost vsebine atributa
name
  1. application-name / ime aplikacije
  2. avtor
  3. description / opis
  4. generator
  5. keywords / ključna beseda
  6. viewport / pogled
določi ime za metapodatke

Viewport

HTML5 predstavlja metodo, ki spletnim oblikovalcem dovoli prevzeti kontrolo nad vidnim poljem spletne strani, skozi meta oznako. Vidno polje je vidno območje spletne strani uporabnika, in je odvisno od naprave. Zato bo na mobilnem telefonu manjši, kot na računalniškem zaslonu ali prenosniku. Da se to ne zgodi, moramo v vsako svojo spletno stran vključiti naslednji izraz.

    <meta name="viewport" content="width=device-width, initial-scale=1">

Element vidnega polja meta brskalniku daje navodila, kako nadzirati dimenzije in velikosti posameznih elementov. Širina width=device-width nastavi širino tako, da sledi širini zaslona naprave (telefon, prenosnik, tablica). Začetna lestvica initial-scale=1.0 nastavi začetno stopnjo povečave, ko brskalnik prvič naloži spletno stran.

iframe

Iframe se uporablja za dodajanje video posnetkov, in zemljevidov na spletno mesto. Zemljevid na Google Maps izberemo, in kliknemo na Skupna raba (share), kjer izberemo Vdelaj (embed a map), in za konec še Kopiraj (copy HTML). S tem smo dobili iframe naslov, katerega samo prilepimo v naš urejevalnik, in ko zaženemo spletno stran, bo zemljevid tam.

Enako lahko storimo z videom. Gremo na YouTube, poiščemo video, in ga predvajamo. Potem se pomaknemo na povezavo Skupna raba (share), takoj pod videom, in nanjo kliknemo. Odpre se nam novo okno, kjer izberemo Vdelaj (embed), in s tem dobimo povezavo. Za konec samo še kliknemo na Kopiraj (copy), in enako kot pri Google Maps, prilepimo povezavo v naš HTML urejevalnik. Ko zaženemo brskalnik bo video nameščen na strani.