Nakon prolaska ovog tečaja i vježbanja na računalu poznavat ćete osnove jednostavnih jezika koje su vam dovoljne za izradu jednostavne web stranice.
Prva lekcija se odnosi na učenje HTML-a, odnosno kako izraditi hipertekstualni dokument.
HTML dolazi od engleske kratice HyperText Markup Language.
HTML našim web preglednicima (engl. web browser) daje podatke o sadržaju i strukturi učitane web stranice, a preglednik od tih podataka oblikuje stranicu kakvu mi vidimo.
Svaki dokument koji vidimo na Webu napisan je u HTML-u.
Za izradu HTML dokumenta potrebno je imati instalirane slijedeće programe:
– web preglednik za pregled HTML dokumenta, u kojem upravo čitate ovaj sadržaj, to može biti Chrome, Firefox, Brave, Edge, Internet Explorer, Safari
– običan tekst uređivač (u ovoj lekciji preporučamo korištenje Notepada) za uređivanje HTML dokumenata.
Ukoliko na svom računalu nemate instaliran običan tekst uređivač, preporučamo da instalirate Notepad.
Kliknite ovdje kako bi vidjeli kako instalirati Notepad
Ukoliko treutno niste u mogućnosti instalirati spomenuti softver preko kojeg možete raditi s kodom, na dnu ove stranice je kreiran besplatni online uređivač koda. Ovaj mrežni mrežni uređivač se može koristiti za HTML, CSS i Java skripte.
U uređivaču ispod kopirajte slijedeći kod kako bi vidjeli kako izgleda najosnovniji hipertekstualni dokument
<!DOCTYPE html>
<html>
<head>
<title>Naslov stranice</title>
</head>
<body>
<h1>Moj prvi naslov</h1>
<p>Moj prvi tekst.</p>
</body>
</html>
Nastavi tečaj – Osnovna struktura HTML-dokumenta – html,
head, title i body
OBJAŠNJENJE
!DOCTYPE deklaracija
<!DOCTYPE html>
Svi HTML dokumenti moraju početi s !DOCTYPE deklaracijom.
Deklaracija nije HTML oznaka. To je “informacija” pregledniku o tome koju vrstu dokumenta treba očekivati.
Potrebno ju je navesti na samom početku HTML dokumenta, prije svih drugih elemenata.
DOCTYPE deklaracija nije HTML-element, nego instrukcija pregledniku, kako bi preglednik znao koju inačicu HTML-a treba interpretirati.
U HTML 5 deklaracija je jednostavna:
<!DOCTYPE html>
U starijim verzijama (HTML 4 ili XHTML) deklaracija je kompliciranija jer se deklaracija mora odnositi na DTD (Definiciju vrste dokumenta).
pa tako primjerice definicija u HTML 4.01 izgleda ovako:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Dok definicija u XHTML 1.1 izgleda ovako:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML Označni kodovi – tagovi
Kao što je vidljivo u primjeru iznad svi HTML kodovi dolaze u šiljatim zagradama npr. <html>.
Razlog tome je taj što HTML nije programski jezik nego označni jezik.
Označni jezik sastoji se od označnih kodova – ili HTML tagova (HTML tags)
HTML označni kodovi su ključne riječi (nazivi elemenata) omotani s šiljatim zagradama npr. <title>, što je HTML element za naslov.
Označni kodovi koriste se za opisivanje web stranice.
Elementi daju strukturu html dokumentu i govore web pregledniku kako i što će vaša web stranica sadržavati. Općeniti elementi se sastoje od početnog taga, nekog sadržaja i završnog taga. Ponegdje se početni i završni tag nazivaju i početna odnosno završna oznaka elementa.
Tagovi su oznake web pregledniku za početak i kraj nekog elementa. Svi tagovi počinju sa znakom manje od “<” a završavaju znakom veće od “>”
Općenito govoreći, postoje dvije vrste tagova: otvarajući tagovi npr. <html> i zatvarajući tagovi </html> Jedina razlika između otvarajućeg taga i zatvarajućeg taga je kosa crta “/”. Sadržaj teksta se stavlja između otvarajuće i zatvarajuće oznake taga.
<html> otvarajući tag
</html> zatvarajući tag
Jedino što je potrebno u html-u je poznavanje html elemenata i njihovih svojstava. Učenje html-a je poznavanje i korištenje različitih tagova.
U tablici ispod slijedi lista označnih kodova u HTML-u
| Tag | Description |
|---|---|
| <!–…–> | Ova oznaka definira komentar (između ovih tagova se unosi komentar u kojem autor koda može staviti svoj komentar na kod) |
| <!DOCTYPE> | Ovaj tag definira tip dokumenta – daje uputu web pregledniku koju vrstu dokumenta treba očekivati |
| <a> | Ovaj tag definira hyperlink – hyperlink ili poveznica je riječ, skupina riječi ili slika na koju možemo kliknuti kako bi nas povezala s novim dokumentom ili dijelom unutar postojećeg dokumenta. |
| <abbr> | Definira kraticu ili akronim. Primjer koda je <abbr title="hypertext markup language">HTML</abbr> |
| <acronym> | Element je zastario u HTML5 i umjesto njega treba koristiti <abbr> Definira kraticu. |
| <address> | Definira kontakt podatke za autora/vlasnika dokumenta |
| <applet> | Nije podržan u HTML5. Umjesto toga upotrijebite <embedd> ili <object> Definira ugrađeni objekt. |
| <area> | Definira područje unutar slikovne karte |
| <article> | Definira članak |
| <aside> | Definira sadržaj osim sadržaja stranice |
| <audio> | Definira ugrađeni zvučni sadržaj |
| <b> | Definira boldirani tekst |
| <base> | Određuje osnovni URL/cilj za sve relativne URL-ove u dokumentu |
| <basefont> | Nije podržano u HTML5. Umjesto toga koristite CSS. Određuje zadanu boju, veličinu i font za sav tekst u dokumentu |
| <bdi> | Izolira dio teksta koji bi mogao biti oblikovan u drugom smjeru od drugog teksta izvan njega |
| <bdo> | Nadjačava trenutni smjer teksta |
| <big> | Nije podržano u HTML5. Umjesto toga koristite CSS. Definira veliki tekst |
| <blockquote> | Definira odjeljak koji je citiran iz drugog izvora |
| <body> | Definira tijelo dokumenta |
| <br> | Definira prijelom jednog retka |
| <button> | Definira gumb na koji se može kliknuti |
| <canvas> | Koristi se za crtanje grafike, u hodu, putem skriptiranja (obično korištenjem JavaScripta) |
| <caption> | Definira naslov tablice |
| <center> | Nije podržano u HTML5. Umjesto toga koristite CSS. Definira centriran tekst |
| <cite> | Definira naziv djela |
| <code> | Definira dio računalnog koda |
| <col> | Određuje svojstva stupca za svaki stupac unutar elementa <colgroup> |
| <colgroup> | Određuje grupu od jednog ili više stupaca u tablici za oblikovanje |
| <data> | Dodaje strojno čitljiv prijevod zadanog sadržaja |
| <datalist> | Određuje popis unaprijed definiranih opcija za kontrole unosa |
| <dd> | Definira opis/vrijednost pojma u popisu opisa |
| <del> | Definira tekst koji je obrisan iz dokumenta |
| <details> | Definira dodatne pojedinosti koje korisnik može vidjeti ili sakriti |
| <dfn> | Određuje pojam koji će biti definiran unutar sadržaja |
| <dialog> | Definira dijaloški okvir ili prozor |
| <dir> | Nije podržano u HTML5. Umjesto toga upotrijebite <ul> . Definira popis direktorija |
| <div> | Definira odjeljak u dokumentu |
| <dl> | Definira popis opisa |
| <dt> | Definira pojam/naziv u popisu opisa |
| <em> | Definira naglašeni tekst |
| <embed> | Definira spremnik za vanjsku aplikaciju |
| <fieldset> | Grupira povezane elemente u obliku |
| <figcaption> | Definira natpis za element <figure> |
| <figure> | Određuje samostalni sadržaj |
| <font> | Nije podržano u HTML5. Umjesto toga koristite CSS. Definira font, boju i veličinu teksta |
| <footer> | Definira podnožje za dokument ili odjeljak |
| <form> | Definira HTML obrazac za korisnički unos |
| <frame> | Nije podržano u HTML5. Definira prozor (okvir) u skupu okvira |
| <frameset> | Nije podržano u HTML5. Definira skup okvira |
| <h1> to <h6> | Definira HTML naslove |
| <head> | Sadrži metapodatke/informacije za dokument |
| <header> | Definira zaglavlje za dokument ili odjeljak |
| <hr> | Definira tematsku promjenu sadržaja |
| <html> | Definira korijen HTML dokumenta |
| <i> | Definira dio teksta alternativnim glasom ili raspoloženjem |
| <iframe> | Definira inline okvir |
| <img> | Definira sliku |
| <input> | Definira ulaznu kontrolu |
| <ins> | Definira tekst koji je umetnut u dokument |
| <kbd> | Definira unos s tipkovnice |
| <label> | Definira oznaku za element <input> |
| <legend> | Definira natpis za <fieldset> element |
| <li> | Definira stavku popisa |
| <link> | Definira odnos između dokumenta i vanjskog resursa (najčešće se koristi za povezivanje sa stilskim listovima) |
| <main> | Određuje glavni sadržaj dokumenta |
| <map> | Definira slikovnu kartu |
| <mark> | Definira označeni/naglašeni tekst |
| <meta> | Definira metapodatke o HTML dokumentu |
| <meter> | Definira skalarno mjerenje unutar poznatog raspona (mjernica) |
| <nav> | Definira navigacijske veze |
| <noframes> | Nije podržano u HTML5. Definira alternativni sadržaj za korisnike koji ne podržavaju okvire |
| <noscript> | Definira alternativni sadržaj za korisnike koji ne podržavaju skripte na strani klijenta |
| <object> | Definira spremnik za vanjsku aplikaciju |
| <ol> | Definira uređenu listu |
| <optgroup> | Definira grupu povezanih opcija na padajućem popisu |
| <option> | Definira opciju na padajućem popisu |
| <output> | Definira rezultat izračuna |
| <p> | Definira paragraf |
| <param> | Definira parametar za objekt |
| <picture> | Definira spremnik za više slikovnih resursa |
| <pre> | Definira unaprijed formatirani tekst |
| <progress> | Predstavlja napredak zadatka |
| <q> | Definira kratki citat |
| <rp> | Definira što će se prikazati u preglednicima koji ne podržavaju ruby bilješke |
| <rt> | Definira objašnjenje/izgovor znakova (za istočnoazijsku tipografiju) |
| <ruby> | Definira ruby bilješku (za istočnoazijsku tipografiju) |
| <s> | Definira tekst koji više nije točan |
| <samp> | Definira uzorak izlaza iz računalnog programa |
| <script> | Definira skriptu na strani klijenta |
| <section> | Definira odjeljak u dokumentu |
| <select> | Definira padajući popis |
| <small> | Definira manji tekst |
| <source> | Definira više medijskih resursa za medijske elemente (<video> i<audio>) |
| <span> | Defines a section in a document |
| <strike> | Nije podržano u HTML5. Umjesto toga upotrijebite <del> ili <s> Definira precrtani tekst |
| <strong> | Definira važan tekst |
| <style> | Definira informacije o stilu za dokument |
| <sub> | Definira pretplaćeni tekst |
| <summary> | Definira vidljivi naslov za <details> element |
| <sup> | Definira nadnaslovni tekst |
| <svg> | Definira spremnik za SVG grafiku |
| <table> | Definira tablicu |
| <tbody> | Grupira sadržaj tijela u tablici |
| <td> | Definira ćeliju u tablici |
| <template> | Definira spremnik za sadržaj koji bi trebao biti skriven kada se stranica učita |
| <textarea> | Definira kontrolu višerednog unosa (područje teksta) |
| <tfoot> | Grupira sadržaj podnožja u tablici |
| <th> | Definira ćeliju zaglavlja u tablici |
| <thead> | Grupira sadržaj zaglavlja u tablicu |
| <time> | Definira određeno vrijeme (ili datum i vrijeme) |
| <title> | Definira naslov dokumenta |
| <tr> | Definira red u tablici |
| <track> | Definira tekstualne zapise za medijske elemente (<video> i<audio>) |
| <tt> | Nije podržano u HTML5. Umjesto toga koristite CSS. Definira teletipski tekst |
| <u> | Definira neki tekst koji nije artikuliran i stiliziran drugačije od normalnog teksta |
| <ul> | Definira neuređeni popis |
| <var> | Definira varijablu |
| <video> | Definira ugrađeni video sadržaj |
| <wbr> | Definira mogući prijelom reda |
Postovanje, zelio bih poceti uciti o programiranju i kodiranju, imam neko minimalno predznanje oko racunara, kao i o programiranju, medjutim dosta toga sam zaboravio. Pa bih zelio da pocnem iz korijena. I da dovedem sebe na neki visoki stepen.