Online tečaj izrade web stranica – Osnove HTML-a

Online tečaj izrade web stranica – Osnove HTML-a post thumbnail image

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

TagDescription
<!–…–>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

169 thoughts on “Online tečaj izrade web stranica – Osnove HTML-a”

  1. 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.

  2. Hello there, just became alert to your blog through Google, and found
    that it’s really informative. I’m going to watch out for brussels.
    I will be grateful if you continue this in future.
    Many people will be benefited from your writing.

    Cheers! Lista escape roomów

  3. An interesting discussion is definitely worth comment.
    I do believe that you ought to publish more on this subject,
    it might not be a taboo subject but generally people don’t talk about such topics.
    To the next! Many thanks!!

  4. Great site you have here.. It’s difficult to find good quality writing like yours nowadays. I truly appreciate individuals like you! Take care!!

  5. This site certainly has all of the information I needed about this subject and didn’t know who to ask.

  6. Your style is unique in comparison to other folks I’ve read stuff from. Thanks for posting when you have the opportunity, Guess I will just book mark this page.

  7. I’m very pleased to discover this website. I need to to thank you for your time for this fantastic read!! I definitely liked every bit of it and i also have you saved to fav to look at new things on your web site.

  8. Hi there! This article couldn’t be written much better! Looking at this post reminds me of my previous roommate! He continually kept talking about this. I will forward this information to him. Pretty sure he’ll have a good read. Many thanks for sharing!

  9. This is a really good tip especially to those new to the blogosphere. Short but very precise information… Thank you for sharing this one. A must read article!

  10. I must thank you for the efforts you have put in writing this website. I am hoping to see the same high-grade blog posts from you in the future as well. In fact, your creative writing abilities has motivated me to get my own, personal site now 😉

  11. The next time I read a blog, I hope that it does not disappoint me just as much as this one. I mean, Yes, it was my choice to read, however I truly believed you’d have something interesting to talk about. All I hear is a bunch of complaining about something you could fix if you weren’t too busy seeking attention.

  12. An impressive share! I’ve just forwarded this onto a colleague who was conducting a little research on this. And he actually bought me breakfast because I found it for him… lol. So let me reword this…. Thank YOU for the meal!! But yeah, thanks for spending the time to discuss this matter here on your website.

  13. You’ve made some decent points there. I checked on the web for additional information about the issue and found most people will go along with your views on this site.

  14. Having read this I believed it was very informative. I appreciate you spending some time and effort to put this information together. I once again find myself personally spending a significant amount of time both reading and leaving comments. But so what, it was still worthwhile.

  15. When I initially left a comment I appear to have clicked the -Notify me when new comments are added- checkbox and from now on whenever a comment is added I recieve 4 emails with the exact same comment. Perhaps there is an easy method you can remove me from that service? Kudos.

  16. I blog quite often and I really appreciate your information. The article has really peaked my interest. I am going to bookmark your site and keep checking for new details about once per week. I opted in for your RSS feed too.

  17. Greetings! Very useful advice in this particular article! It is the little changes which will make the biggest changes. Many thanks for sharing!

  18. Your style is very unique in comparison to other people I have read stuff from. Many thanks for posting when you have the opportunity, Guess I’ll just bookmark this blog.

  19. Great blog you have here.. It’s difficult to find high quality writing like yours these days. I really appreciate people like you! Take care!!

  20. Everything is very open with a very clear description of the challenges. It was truly informative. Your site is very helpful. Thank you for sharing.

  21. You’re so cool! I do not think I’ve read a single thing like this before. So great to find another person with a few genuine thoughts on this topic. Seriously.. thank you for starting this up. This website is something that’s needed on the internet, someone with a little originality.

  22. Your style is really unique compared to other folks I’ve read stuff from. Thanks for posting when you have the opportunity, Guess I will just bookmark this blog.

  23. Oh my goodness! Awesome article dude! Thank you, However I am having issues with your RSS. I don’t know the reason why I cannot subscribe to it. Is there anyone else getting the same RSS issues? Anyone who knows the answer will you kindly respond? Thanks!

  24. Oh my goodness! Amazing article dude! Thanks, However I am having problems with your RSS. I don’t understand the reason why I cannot subscribe to it. Is there anybody getting identical RSS problems? Anybody who knows the solution can you kindly respond? Thanks!

  25. I really love your site.. Great colors & theme. Did you create this web site yourself? Please reply back as I’m wanting to create my own personal website and want to know where you got this from or what the theme is named. Kudos!

  26. Your style is very unique compared to other people I’ve read stuff from. Many thanks for posting when you’ve got the opportunity, Guess I’ll just bookmark this site.

  27. After I initially left a comment I appear to have clicked the -Notify me when new comments are added- checkbox and from now on every time a comment is added I get four emails with the exact same comment. Is there a means you can remove me from that service? Kudos.

  28. Can I simply say what a comfort to uncover someone who actually understands what they are talking about on the internet. You definitely realize how to bring a problem to light and make it important. A lot more people really need to read this and understand this side of your story. I can’t believe you are not more popular because you most certainly have the gift.

  29. Hi, I do think this is an excellent blog. I stumbledupon it 😉 I will come back once again since i have book-marked it. Money and freedom is the best way to change, may you be rich and continue to guide other people.

  30. Individuals have the power to look beyond temporary depressions in favor of a long term outlook.Speculators who believe strongly in market timing attempt to buy inexpensive stocks in the hopes of these stocks will suddenly spike in profits.

  31. WSD is the perfect partner to start such a division or product for the company considering the business with little or no investment but with joint management capabilities between WSD and the Institution wishing to get into the business.

  32. This is the right blog for anybody who wants to find out about this topic. You realize a whole lot its almost tough to argue with you (not that I personally would want to…HaHa). You certainly put a new spin on a topic that has been written about for ages. Wonderful stuff, just excellent.

  33. After I initially left a comment I appear to have clicked on the -Notify me when new comments are added- checkbox and now whenever a comment is added I receive 4 emails with the same comment. Is there an easy method you are able to remove me from that service? Thanks a lot.

  34. Hi, I do think this is an excellent web site. I stumbledupon it 😉 I will return once again since i have bookmarked it. Money and freedom is the greatest way to change, may you be rich and continue to help other people.

  35. If you are still not sure how you can make profitable enterprises from the stock market, then before buying stocks you should learn a strategy first or a trading technique or two and some Stock Market Trading Tips.

  36. Your style is very unique compared to other people I have read stuff from. Thanks for posting when you have the opportunity, Guess I will just book mark this page.

  37. I blog quite often and I really thank you for your content. This article has really peaked my interest. I’m going to bookmark your blog and keep checking for new details about once a week. I subscribed to your Feed too.

  38. Nice post. I learn something totally new and challenging on sites I stumbleupon on a daily basis. It will always be exciting to read through articles from other authors and practice something from other web sites.

  39. You made some really good points there. I checked on the net for more info about the issue and found most people will go along with your views on this web site.

  40. You are so cool! I do not suppose I’ve read through anything like that before. So wonderful to find another person with some original thoughts on this issue. Seriously.. thanks for starting this up. This website is one thing that’s needed on the web, someone with some originality.

  41. An outstanding share! I have just forwarded this onto a friend who was doing a little research on this. And he in fact ordered me breakfast because I stumbled upon it for him… lol. So allow me to reword this…. Thank YOU for the meal!! But yeah, thanx for spending some time to talk about this subject here on your internet site.

  42. In this case the person who is the holder of the bond can very easily put the bond back to the person who is the issuer and also short as well as long ratings whose basis is the analysis of the joint default.

  43. I absolutely love your blog.. Very nice colors & theme. Did you build this web site yourself? Please reply back as I’m trying to create my own personal blog and would like to know where you got this from or just what the theme is called. Cheers.

  44. After going over a number of the articles on your blog, I seriously like your way of writing a blog. I bookmarked it to my bookmark website list and will be checking back soon. Please visit my web site as well and let me know what you think.

  45. Hi there! This post could not be written any better! Reading through this post reminds me of my previous roommate! He constantly kept preaching about this. I will forward this post to him. Fairly certain he’ll have a great read. Many thanks for sharing!

  46. I was pretty pleased to discover this web site. I wanted to thank you for ones time just for this fantastic read!! I definitely loved every little bit of it and i also have you saved as a favorite to check out new information in your web site.

  47. Hi, I do think this is a great blog. I stumbledupon it 😉 I will revisit once again since i have book marked it. Money and freedom is the best way to change, may you be rich and continue to help others.

  48. I have to thank you for the efforts you’ve put in penning this blog. I am hoping to view the same high-grade blog posts from you in the future as well. In fact, your creative writing abilities has motivated me to get my very own site now 😉

  49. Howdy! I could have sworn I’ve been to this blog before but after going through many of the articles I realized it’s new to me. Regardless, I’m certainly delighted I stumbled upon it and I’ll be bookmarking it and checking back frequently.

  50. Can I simply just say what a comfort to discover somebody who actually knows what they are talking about online. You actually understand how to bring a problem to light and make it important. A lot more people need to check this out and understand this side of the story. I can’t believe you’re not more popular since you certainly have the gift.

  51. I needed to thank you for this excellent read!! I certainly loved every bit of it. I have you book marked to check out new things you post…

  52. An interesting discussion is worth comment. I believe that you should write more on this topic, it might not be a taboo subject but usually people do not speak about these topics. To the next! Kind regards.

  53. May I just say what a relief to find an individual who truly understands what they are discussing on the internet. You actually know how to bring an issue to light and make it important. More and more people have to check this out and understand this side of the story. It’s surprising you aren’t more popular because you most certainly have the gift.

  54. This is the perfect site for anybody who wishes to understand this topic. You understand so much its almost hard to argue with you (not that I personally would want to…HaHa). You definitely put a brand new spin on a topic that has been discussed for a long time. Wonderful stuff, just excellent.

  55. After looking over a few of the blog articles on your web page, I truly like your way of writing a blog. I added it to my bookmark website list and will be checking back in the near future. Please visit my web site too and let me know how you feel.

  56. Nice post. I learn something new and challenging on sites I stumbleupon everyday. It will always be interesting to read articles from other writers and practice something from other websites.

  57. You’ve made some really good points there. I looked on the internet for additional information about the issue and found most individuals will go along with your views on this site.

  58. Sec. 125) Prohibits the Secretary of the Army from utilizing appropriated funds to relocate an Army unit that: (1) performs a testing mission or perform that isn’t performed by some other Military unit and is statutorily required, and (2) is situated at a army installation at which the entire number of Army civilian workers and contractor personnel exceeds 10 of the whole quantity of normal and reserve Military personnel assigned there.

  59. Since then, Jamie’s Italian closed after the company went into administration in May 2019, and Handmade Burger Co would suffer the same fate 8 months later in January 2020, later to be replaced by Vietnamese Street Kitchen.

  60. After I initially left a comment I seem to have clicked the -Notify me when new comments are added- checkbox and now every time a comment is added I receive four emails with the same comment. Is there an easy method you can remove me from that service? Appreciate it.

  61. Having read this I thought it was rather enlightening. I appreciate you spending some time and effort to put this short article together. I once again find myself personally spending a lot of time both reading and posting comments. But so what, it was still worth it!

  62. Hello there! Do you know if they make any plugins to safeguard against
    hackers? I’m kinda paranoid about losing everything I’ve worked hard on.
    Any tips?

  63. Data showed China recorded declines in forex reserves showing the first consecutive fall since the first quarter of previous years as a narrowing trade surplus and an outflow of speculative funds reversed the accumulation of dollars.

  64. A motivating discussion is definitely worth comment. I do believe that you should write more on this subject matter, it might not be a taboo matter but typically folks don’t speak about such topics. To the next! All the best.

  65. A motivating discussion is definitely worth comment. I do think that you need to write more on this subject matter, it may not be a taboo matter but typically people don’t discuss such subjects. To the next! Kind regards.

  66. In 2008, as liquidity in the global markets came to a halt, the FED took action to allow the TSLF to expand the types of acceptable collateral: student loans, car loans, home equity loans and credit card debt, as long as it was highly rated.

  67.  This  post w​as created ​by GSA Content Generat᠎or Demover sion᠎. This is commonly not noticed by Peer and Toon, however when it is, it leads to an embarrassing scenario (and a combat).

  68. The well being centres serve round 100,000 individuals in small towns and villages of Tamil Nadu with regard to water and sanitation, nutrition, women’s health, communicable and non-communicable diseases, child well being, immunization, clinical observe, faculty health schooling, and maintenance of delivery and demise records.

  69. Spot on with this write-up, I actually feel this site needs far more attention. I’ll probably be returning to read through more, thanks for the information!

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa * (obavezno)

Related Post