NA VRH
HTML vadnica
DOMOV HTML CSS JavaScript jQuery PHP MySQL Python C# Sass WordPress
glave/headings

HTML Kaj je HTML? Pisanje HTML dokumenta DOCTYPE Metadata Viewport iframe Obrazci Seznami Tabele

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 < (ang. Angle Bracket), nato ime elementa, če je to glava (ang. Heading) je oznaka h1, če je to odstavek (ang. Paragraph) je oznaka p, in zaključimo z lomljenim oklepajem > (ang. Angle Bracket). Dokument se lahko izdela v beležnici, ali z uporabo drugih orodij, kot so PHP Storm, Visual Studio Code, Atom itn.

HTML

    Kako pišemo elemente v HTML dokument:

  1. <h1>vsebina glave</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 glave / 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 glave</h1>
    <p>vsebina odstavka</p>
    </body>
    </html>
            

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
NASLOV

Definirati moramo še dve pomembni oznaki (ang. Tag), to sta heading in body, tudi style še pride, ampak ta je za CSS. Če bomo uporabljali šumnike moramo dodati UTF-8, ki jih podpira.

Title oznaka opisuje naslov spletne strani, kjer znotraj oznake napišemo naslov (naslov se pojavi v zavihku spletne strani). Ko želimo izpisovati vsebine na spletni strani, uporabimo element body, ker se med oznakami <body> definira vsa vsebina, ki je prikazana na spletni strani. Za izpisovanje vsebin, največkrat uporabimo odstavek <p> (ang. paragraph), ki je definiran kot stavek, in pa glavo <h> (ang. heading). To so oznake, ki označujejo naslov dokumenta na spletni strani, in so definirane od h1 do h6, nižja je številka, manjši je naslov.

  1. primer glave
  2. primer odstavka
  3. primer povezave
  4. primer slike

Oznaka alt je glavni ali podnaslov na naši strani. Vsi naslovi od h1 do h3 spadajo v alt, kar je večjih ni potrebno. Če želimo vstaviti sliko pod element <h4> ali manjši, lahko enostavno uporabimo alt našega glavnega naslova spletne strani, elementa <h1>.

Notranja povezava

Za notranjo povezavo lahko izberemo katerikoli element, in se bo ob kliku vrnil na element kateremu smo dodali povezavo. Takšno povezavo imenujemo Anchor.

    <div id="pisanje-html-dokumenta"><a href="#pisanje-html-dokumenta"><h4>NASLOV KI BO VIDEN NA SPLETNI STRANI</h4></a></div>
        

Povezavo, ki jo naredimo lahko uporabimo kot href, in jo prilepimo kamor želimo, kjer jo potrebujemo. Povezava je notranja, na spletni strani, in do nje lahko dostopamo samo preko povezave (href).

    <a href="https://html.vadnica.si/#pisanje-html-dokumenta">TEST</a>
        

Ko sedaj kliknemo na TEST nas bo ta povezava peljala do notranjega naslova, ki smo ga vpisali.

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. Paragraph ali heading 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 glava (ang. Heading) je oznaka <h1>, če je to odstavek (ang. Paragraph) je oznaka <p>, in vse skupaj zaključimo z oklepajem >. Vsaka oznaka (ang. Tag) 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 so podatki o podatkih, in oznaka meta vsebuje podatke o HTML dokumentu. Metapodatki (ang. Metadata) 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, 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 (ang. Content) atribut (ang. Attribute) NE MORE biti definiran.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="opis (ang. description)" vsebina="Izdelava spletnih strani">
        <meta name="ključne besede (ang. keywords)" vsebina="HTML, CSS, JavaScript, PHP, CSharp">
        <meta name="avtor (ang. author)" vsebina="Kranjski Janez">
        <meta name="pogled (ang. viewport)" 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
vsebina (ang. content) 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. aplikacija-ime (ang. application-name)
  2. avtor (ang. author)
  3. opis (ang. description)
  4. generator (ang. generator)
  5. ključne besede (ang. keywords)
  6. pogled (ang. viewport)
določi ime za metapodatke (ang. metadata)

HTML5 predstavlja metodo, ki spletnim oblikovalcem dovoli prevzeti kontrolo nad vidnim poljem spletne strani, skozi meta oznako. Vidno polje (ang. Viewport) 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 (ang. Viewport) meta brskalniku daje navodila, kako nadzirati dimenzije in velikosti posameznih elementov. Širina (ang. Width) 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 se uporablja za dodajanje video posnetkov, in zemljevidov na spletno mesto. Zemljevid na Google Maps izberemo, in kliknemo na Skupna raba (ang. Share), kjer izberemo Vdelaj (ang. Embed a map), in za konec še Kopiraj (ang. 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 (ang. Share), takoj pod videom, in nanjo kliknemo. Odpre se nam novo okno, kjer izberemo Vdelaj (ang. Embed), in s tem dobimo povezavo. Za konec samo še kliknemo na Kopiraj (ang. Copy), in enako kot pri Google Maps, prilepimo povezavo v naš HTML urejevalnik. Ko zaženemo brskalnik bo video nameščen na strani.

Oznaka <input> ima lahko tudi atribut <value> (slo. vrednost), ki nam prikazuje vneseno vrednost. Atribut <value> se uporablja za izpis iz baze.

  1. dodal sem dva primera, in sicer navaden HTML primer in drugega s pomočjo tabele, dodal pa sem tudi obliko, preverite
TIP OPIS
<input type="text"> določi eno vrstico, za vnos besedila
<input type="radio"> določi izbirni gumb (to je izbira ene od številnih možnosti)
<input type="submit"> določi gumb za oddajo obrazca
seznami sezname lahko pišemo z oznakama ol in ul, če uporabimo ol, bodo seznami šteti s številkami, pri uporabi ul pa s pikami PRIMER
reversed stolpec spremeni smer štetja, namesto 1, 2, 3 se spremeni v 3, 2, 1 PRIMER
start lahko uporabimo samo v elementu ol in številko, ki jo vpišemo v narekovaje pomeni, da nam bo štel od te številke naprej => primer: ol start="10" štel bo od 10, 11, 12... naprej PRIMER
type če v element ol vpišemo type="1, A, a, I ali i" se bodo številke spremenile v vrednost, ki jo bomo vpisali PRIMER

Znotraj elementa <table> se vedno definira atribut <thead>, in znotraj tega atributa <tr>. Tr pomeni table row, ki pove koliko stolpcev bo imela tabela, znotraj <tr> je <td>, ki pa so podatki tabele. Naslednji atribut, ki se definira znotraj tabele je <tbody> , in prikazuje vrstice. Za vpisovanje glave tabele, uporabimo atribut <th>, ker okrepi besedo (uporabi krepko pisavo). Tretji atribut pa je <tfoot>, ki sicer ni obvezen, je pa dobrodošel pri izračunih. Isto lahko uporabimo pod-atributa <tr> in <td>. Potem so tukaj še obrobe tabele, ki jih lahko ustvarimo, za to pa uporabimo element <border>, ki ga vpišemo v glavno vrstico.

V HTML dokumentu lahko izdelujemo samo osnovne tabele, če želimo več oblikovanja, to lahko storimo s CSS-om.