Úvod do HTML

Když vidíte v prohlížeči nějakou webovou stránku, spatříte v nejjednodušším případě slova. Ta slova mají obvykle nějaký charakteristický styl, například barvu nebo velikost písma. Většinou se ale na webové stránce vyskytují také obrázky, popřípadě video. Občas se tam najde formulář, kam můžete zadat nějaké informace, případně něco vyhledat nebo přizpůsobit zobrazení stránky k obrazu svému. Často se tam vyskytuje také nějaký proměnlivý obsah, jehož podoba se v čase mění, zatímco zbytek stránky je stejný.

K definici vlastností jednotlivých HTML elemetnů se používá nakolik dalších technologií (jako je CSS, JavaScript, Flash, AJAX, JSON). Na nejnižší (a zcela základní) úrovni je však stránka definována jazykem HTML (HyperText Markup Language). Bez HTML se žádná webová stránka neobejde.

Tento člának pokrývá úvod do HTML. Pokud vás někdy zajímalo, co se děje „za oponou“ ve vašem webovém prohlížeči, tento článek je správným místem, kde začít.

Vznik HTML

Na konci 80. let 20. století pracoval ve švýcarském CERNu (the European Organization for Nuclear Research) fyzik jménem Tim Berners-Lee. Ten navrhnul způsob, jak sdílet vědecké dokumenty pomocí internetu. Do té doby byla internetová komunikace omezena na přenos prostého textu s využitím technologií jako email, FTP (File Transfer Protocol), a diskusní skupiny Usenet. Vynález HTML využil model, kdy je obsah uložen na centrálním serveru a na vyžádání přenesen na lokální pracovní stanici a zobrazen v prohlížeči. Zjednodušil se tím přístup k obsahu a umožnilo se zobrazování obrázků a pokročilého formátování textu.

Co je HTML?

HTML je značkovací jazyk. Říká webovému prohlížeči, jak obsah zobrazit. Odděluje obsah (slova, obrázky, zvuk, video, apod.) od způsobu prezentace (definice typu obsahu a instrukce, jak má být zobrazen). Používá přitom pevně danou sadu značek k určení jednotlivých částí dokumentu. Tyto vyznačené části se nazývají elementy. Značky vyznačující jednotlivé elementy jsou uzavřeny do špičatých závorek a říká se jim tagy. Koncové tagy jsou navíc uvozeny lomítkem.

Například element předatavující odstavec sestává z úvodního tagu <p> a koncového tagu </p>. Následující příklad ukazuje odstavec textu uzevřený v HTML elementu odstavce:

<p>My dog ate all the guacamole.</p>

Když se jeho obsah zobrazí v prohlížeči, vypadá asi takhle:

Prohlížeč používá tagy k tomu, aby věděl jak zobrazit obsah uzavřený mezi nimi.

Do elementů, které obsahují nějaký obsah, můžou být obvykle vnořeny další elementy. Například element zvíraznění (emphasis, <em>) může být vložen do elementu odstavce:

<p>My dog ate <em>all</em> the guacamole.</p>

Po zobrazení vypadá takto:

Některé elementy žádný obsah neobsahují. Například obrázek v elementu <img> je specifikován jednoduše pomocí atributu:

<img src="smileyface.jpg">

Před koncovou špičatou závorku se obvykle dává lomítko jako znak konce tagu. V HTML to sice není povinné, ale je to striktně vyžadováno v XHTML (což je XML schéma implementující elementy HTML).

Zbytek tohoto článku se koncepty představenými v této části zabývá detailněji. Chcete-li už však začít zkoumat HTML v akci, podívajte se na Mozilla Thimble, což je interaktivní on line editor, který vás naučí psát značky HTML. Řovněž si prohlédněte seznam HTML Elementů, abyste získali přehled o dostupných elemtech a jejich použití.

Elementy — základní stavební prvky

HTML sestává ze sady elementů. Elementy definují sémantický význam jejich obsahu. Elementy zahrnují vše mezi dvěma odpovídajícími tagy, včetně tagů samotných. Například element <p> označuje odstavec; element <img> značí obrázek. Pro úplný přehled se podívejte na seznam HTML Elementů.

Některé elementy mají velmi jednoznačný význam („obrázek“, „nadpis“ nebo „číslovaný seznam“). Jiné jsou méně specifické, jako „oddíl dokumentu“ nebo „část textu“. Některé slouží jen pro technické účely, jako „informace o stránce, které se nezobrazují“. Každý HTML element má však určitý význam.

Většina elementů může obsahovat jiné elementy, a tvořit tak hierarchickou strukturu. Velmi jedoduchá ale kompletní webová stránka může vypadat takto:

<html>
  <body>

    <p>My dog ate all the guacamole.</p>

  </body>
</html>

As you can see, <html> elements surround the rest of the document, and <body> elements surround the page content. This structure is often throught of as a tree with branches (in this case, the <body> and <p> elements) growing from the trunk (<html>). This hierarchical structure is called the DOM: the Document Object Model.

Tags

HTML documents are written in plain text. They can be written in any text editor that allows content to be saved as plain text (although most HTML authors prefer to use a specialized editor that highlights syntax and shows the DOM). Tag names may be written in either upper or lower case. However, the W3C (the global consortium that maintains the HTML standard) recommends using lower case (and XHTML requires lower case).

HTML attaches special meaning to anything that starts with the less-than sign ("<") and ends with the greater-than sign (">"). Such markup is called a tag. Here is a simple example:

<p>This is text within a paragraph.</p>

In this example there is a start tag and a closing tag. Closing tags are the same as the start tag but also contain a forward slash immediately after the leading less-than sign. Most elements in HTML are written using both start and closing tags. Start and closing tags should be properly nested, that is closing tags should be written in the opposite order of the start tags. Proper nesting is one rule that must be obeyed in order to write valid code.

This is an an example of valid code:

<em>I <strong>really</strong> mean that</em>.

This is an example of invalid code:

Invalid: <em>I <strong>really</em> mean that</strong>.

Note that in the valid example, the closing tag for the nested element is placed before the closing tag for the element in which it is nested.

Some elements do not contain any text content or any other elements. These are empty elements and need no closing tag. This is an example:

<img src="smileyface.jpg">

Many people mark up empty elements using a trailing forward slash (which is mandatory in XHTML).

<img src="smileyface.jpg" />

In HTML this slash has no technical functionality and using it is a pure stylistic choice.

Attributes

The start tag may contain additional information, as in the preceding example. Such information is called an attribute. Attributes usually consist of 2 parts:

• An attribute name.
• An attribute value.

A few attributes can only have one value. They are Boolean attributes and may be shortened by only specifying the attribute name or leaving the attribute value empty. Thus, the following 3 examples have the same meaning:

<input required="required">

<input required="">

<input required>

Attribute values that consist of a single word or number may be written as they are, but as soon as there are two or more strings of characters in the value, it must be written within quotation marks. Both single quotes (') and double quotes (") are allowed. Many developers prefer to always use quotes to make the code less ambiguous to the eye and to avoid mistakes. The following is such a mistake:

<p class=foo bar> (Beware, this probably does not mean what you think it means.)

In this example the value was supposed to be "foo bar" but since there were no quotes the code is interpreted as if it had been written like this:

<p class="foo" bar="">

Named character references

Named character references (often casually called entities) are used to print characters that have a special meaning in HTML. For example, HTML interprets the less-than and greater-than symbols as tag delimiters. When you want to display a greater-than symbol in the text, you can use a named character reference. There are four common named character references one must know:

• > denotes the greater than sign (>)
• < denotes the less than sign (<)
• & denotes the ampersand (&)
• " denotes double quote (")

There are many more entities, but these four are the most important because they represent characters that have a special meaning in HTML.

Doctype and comments

In addition to tags, text content and entities, an HTML document must contain a doctype declaration as the first line. In modern HTML this is written like this:

<!DOCTYPE html>

The doctype has a long and intricate history, but for now all you need to know is that this doctype tells the browser to interpret the HTML and CSS code according to W3C standards and not try to pretend that it is Internet Explorer from the 90's. (See quirks mode.)

HTML has a mechanism for embedding comments that are not displayed when the page is rendered in a browser. This is useful for explaining a section of markup, or leaving notes for other people who might work on the page, or for leaving reminders for yourself. HTML comments are enclosed in symbols as follows:

<!-- This is comment text -->

A complete but small document

Putting this together here is a tiny example of an HTML-document. You can copy this code to a text editor, save it as myfirstdoc.html and load it in a browser. Make sure you are saving it using the character encoding UTF-8. Since this document uses no styling it will look very plain, but it is only a small start.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>A tiny document</title>
</head>
<body>
  <h1>Main heading in my document</h1>
  <!-- Note that it is "h" + "1", not "h" + the letter "one" -->
  <p>Loook Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
</body>
</html>