TOC

This article is currently in the process of being translated into Croatian (~22% done).

Introduction to HTML:

Your First Webpage

Here is an example of one of the simplest HTML5 documents you can create. It starts with the HTML5 doctype, followed by a page title and then followed by some content, in this case a single paragraph.

<!DOCTYPE html>
<title>Your first HTML5 Document</title>
<p>Okay, now we’re going somewhere!</p>

Sada bi trebali imati ideju kako bi ovo izgledalo u web pregledniku - Ime dokumenta, "Your first HTML5 Document" i tekst "Okay, now we're going somewhere!" napisan na lijevom gornjem dijelu stranice.

doctype deklaracija govori svima koji čitaju to da slijedi HTML kod.

<!DOCTYPE html>

Ako ste pogledali u sadržaj HTML dokumenta prije, možda ste vidjeli doctype deklaraciju koja izgleda ovako:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Even professional webdevelopers copy and pasted this long doctype from one document to another – the new simpler doctype is easy to remember and as no specific version is declared, all new future features are automatically available to your page.

What is the DOCTYPE for?

But why is there a doctype at all? All browsers have two different ways of reading your document – standard mode and quirks mode. If you don’t tell them what kind of document they are handling, the will go into quirks mode. Think of this as the old way of reading your document – there might be some flaws and you can be sure that not all browsers read your document the same way. Declaring a doctype forces the browsers to go into standard mode – the "new" way of reading your document. Using standard mode, most browsers will read your document the same way and they will actually understand what you are writing.

To make the HTML5 document easier for yourself to understand, you would want to use the two section-elements <head> and <body>. Using these sections you clearly separate the information about your page (the head) from the actual content (body). Using these, you webpage would look like this:

<!DOCTYPE html>
<head>
	<title>Your first HTML5 Document</title>
</head>
<body>
	<p>Okay, now we’re going somewhere!</p>
</body>

What just happened with the indenting, you might think? Whether or not you want to use indenting is your own choice but it visualizes the structure of your page and makes it easier to see at a glance.

Zadnja stvar koju bi htjeli napraviti je dodati <html> element i staviti ga odmah poslije doctype-declaration.

<!DOCTYPE html>
<html>
<head>
	<title>Your first HTML5 Document</title>
</head>
<body>
	<p>Okay, now we’re going somewhere!</p>
</body>
</html>

Congratulations you’ve just created your first HTML5 webpage! Did you notice how the <p> element is inside the <body> element? That is called nesting elements and it is a very essential part of the HTML structure. I will leave it at this for now, but I just wanted to introduce to you the idea of nesting elements.

What you have learned

  • Uvijek deklarirajte doctype - <!DOCTYPE html>
  • Koristite element <head> da odvojite informacije o vašoj stranici.
  • Koristite element <body> da bi odvojili dio stvarnog sadržaja na stranici
  • Using <html>, <head>, and <body> is a matter of style when you use HTML5, but it makes the structure of the page clearer to you.
  • Indenting your markup makes it easier to comprehend
  • Možete ugnijezditi jedan element unutar drugog elementa
This article has been fully translated into the following languages:
Is your preferred language not on the list? Click here to help us translate this article into your language!
adplus-dvertising