This article is currently in the process of being translated into Hungarian (~28% done).
Első weblapod
Itt egy példa az egyik legegyszerűbb HTML5 dokumentumokra amit létrehozhatsz. Itt a HTML5 doctype-al kezdődik, követve a lap címét és utána követve valamilyen tartalom, ebben az esetben egy egyetlen bekezdés.
<!DOCTYPE html>
<title>Your first HTML5 Document</title>
<p>Okay, now we’re going somewhere!</p>Kell legyen róla neked egy ötlet arról hogy hogyan fog kinézni egy böngészőben - A dokumentum címe "Az első HTML5 dokumentumod" és a szövege "Ok, valahová fogunk tartani" az oldalad bal felső sarkába írva.
The doctype deklaráció elmondja mindenkinek hogy HTML tartalmát követve olvassa.
<!DOCTYPE html>Ha rá tekintettél HTML dokumentumok jelölésére azelőtt, akkor láthattad már a doctype deklarációt ami így nézett ki sokaknál:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Még a webfejlesztő szakemberek is másolva beillesztve ezt a hosszú doctype-t egy dokumentumból a másikba - az egyszerűbb doctype-t könnyű megjegyezni és emiatt nem kell deklarálni a specifikus verzióját, minden új jövőbeli funkció automatikusan elérhető az oldalaidhoz.
Mire való the DOCTYPE is ?
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.
The last thing you would want to add is the <html> element and it is placed right after the 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
- Always declare the doctye - <!DOCTYPE html>
- Use the element <head> to separate the information about your page
- Use the element <body> to separate the actual content of your webpage
- 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
- You can nest one element inside another element
