HTML Tags and Their Usage I

Dreamweaver Obsah lekce:

(X)HTML code
Elements
Parameters
Values
Block vs. Row elements
Parents and Their Children
Links, Images and Non-text Content
File Names
URL (Uniform Resource Locator) Address
Relative vs. Absolute URL

(X)HTML code

A (X)HTML source code contains format instructions + details about the relationships between several parts of a document (website). (X)HTML contains:

Elements
Parameters
Values
Declarations
Entities

Elements

They identify and structure different parts of the page (head, paragraph, term, ...).
They can have one or more parameters.
Non-empty (pair) elements - opening mark (the name of the element and its parameters), content and closing mark. For example <em> tag which turns italics on. This <em>term</em> is important.
Empty (non-pair) elements - they do not surround any text content, for example <img> tag to insert an image: <img src=“imagename.jpg” width=“300” />. You can see the last couple of characters "/>" - these characters close the element because the slash is a content of the tag.

Parameters

They contain information about data without being data itself.
Any value of a parameter in (X)HTML has to be placed into quotation marks. For example the img tag parameters: the source of image (parameter src) and the width of image (parameter width): <img src=“imagename.jpg” width=“300” />.
All parameters for all elements can be found at this address: http://www.w3.org/TR/html4/cover.html#minitoc.

Values

They contain a value for an attribute (parameter), for example the value 300 for width attribute at img tag in the previous example.

Block vs. Row elements

An element could be written as a block element (it is always displayed on a new line - for example a paragraph) or as a row element (a word inside a paragraph - any couple of characters which do not have to be a whole paragraph).

One note to HTML: you can make as many spaces as you want in HTML code because the browser will always convert them to one. The same rule functions for the enter key (new lines) - HTML will only place a new paragraph on a new line, new lines created by enter key are ignored.

HTML Code Sample


              <h2>ZÁSADA</h2>

              <p><em>Zásada</em>, slovo tajemné a mocné. Vy ze zásady se procházíte před večeří; vaše teta ze zásady nechodí do divadla; váš moudrý bratranec ze zásady se vyhýbá davům, zatímco váš nebožtík dědeček pil ze zásady pivo ohřívané. Kdybyste se procházel ze zvyku a dyspepsie, kdyby vaše teta trávila večery doma z pohodlnosti a lakoty, kdyby váš bratránek se davů prostě bál a váš nebožtík dědeček si ohříval pivo z něžného ohledu k svým katarům, byl by svět nepochybně pestřejší a jazyk bohatší, ale život by patrně ztrácel na mravní závaznosti. Procházíte-li se ze zásady, plníte tím důležitě a věrně svou mravní povinnost; důležitější je ze zásady se vyvětrat než bez zásady navštívit nemocného přítele. Vykládá-li si vaše teta večer doma karty, jelikož zásadně neholduje světské marnosti hudby a jeviště, je to důstojný akt mravní vůle. Z každého zvyku, z každé lenosti, slabosti a setrvačnosti můžete udělat věc zásady; svět tím sice pranic nezíská, vy však ano; vyhovíte sami sobě a nádavkem se budete cítit charaktery.</p>

              <p>Karla Čapka Kritika slov (dostupná online <a href="http://www.mlp.cz/karelcapek">www.mlp.cz/karelcapek</a>)</p>

The result from the previous code is displayed here:

ZÁSADA

Zásada, slovo tajemné a mocné. Vy ze zásady se procházíte před večeří; vaše teta ze zásady nechodí do divadla; váš moudrý bratranec ze zásady se vyhýbá davům, zatímco váš nebožtík dědeček pil ze zásady pivo ohřívané. Kdybyste se procházel ze zvyku a dyspepsie, kdyby vaše teta trávila večery doma z pohodlnosti a lakoty, kdyby váš bratránek se davů prostě bál a váš nebožtík dědeček si ohříval pivo z něžného ohledu k svým katarům, byl by svět nepochybně pestřejší a jazyk bohatší, ale život by patrně ztrácel na mravní závaznosti. Procházíte-li se ze zásady, plníte tím důležitě a věrně svou mravní povinnost; důležitější je ze zásady se vyvětrat než bez zásady navštívit nemocného přítele. Vykládá-li si vaše teta večer doma karty, jelikož zásadně neholduje světské marnosti hudby a jeviště, je to důstojný akt mravní vůle. Z každého zvyku, z každé lenosti, slabosti a setrvačnosti můžete udělat věc zásady; svět tím sice pranic nezíská, vy však ano; vyhovíte sami sobě a nádavkem se budete cítit charaktery.

Karla Čapka Kritika slov (dostupná online www.mlp.cz/karelcapek)

Try to identify elements, attributes and values. Differ row and block elements in the previous sample.

Parents and Their Children

If one element contains another one, it is taken as a parent who closes its children. This is a key property of (X)HTML code and allows you to assign CSS styles. An element which is nested inside another one has to be closed before its parent is closed.

The following sample shows using a stressed text inside a paragraph. The p element is the parent of the em element. The first sample shows proper nesting, the second one shows wrong nesting:

Links, Images and Nontext Content

You know from the previous lessons that HTML is created by text only. The HTML file contains no images, videos, sounds and more. How can such content be added?

Pages are linked to each other using links or their link to images, flash animations, MP3s, ...
These files are stored separately and are linked (links are a plane text so the versatility is kept).
Browsers can handle most of the files without problems. In case that a file is not supported then the browser looks for a suitable plugin or tries to find an application in your operating system to open the file.

A sample of inserting non-text content inside the HTML code:

File Names

When creating HTML pages you should use lower-case file names - you will avoid many problems. You should also use concrete extensions like .html, .htm, .php or .aspx.

URL (Uniform Resource Locator) Address

The location of the source of image, video or other content can be specified using the URL.
The first part is a protocol how to hand the file (usually http, but can also be ftp, https, mailto, file and others).
The second part is the name of server where is the file saved and the name of the file itself.
An URL can end with a backslash or with a name of file (index.html, index.php, default.asp).

Several more URL examples:

http://www.gjszlin.cz/gztgm/
ftp://ftp.stranky.cz/pub/program.exe
mailto:administrator@nejake.stranky.cz
File:///c/cesta/stranka.htm

From left: protocol, name of server, path, the name of file (script), parameters of the page.

Relative vs. Absolute URL

An absolute path contains the complete path to a file (protocol, name of the server, complete path and name) - for example a link to a file located on another server.

A relative path should be used for every file on the same server because of the possibility to move the whole website as a complex without the need to rewrite every path in every file. A relative path only contains a few last directories, not the whole domain, protocol and name).

Individual Task

Create a directory for your website on your hard drive and create a file named moje-prvni-html-stranka.html. Try to insert a head, headline and a paragraph inside it.

Questions

Describe using an example what is an entity, a parameter and a value.
Characterize elements of a html page.
Characterize block and row elements. What is the main difference? Name several examples.
Explain the principle of proper nesting a html child inside a html parent element.
Describe the principle of inserting non-text content inside a html file. Why cannot we insert an image straight inside the file with the code?
Which rules should we follow when renaming files for our web?
What is an URL? Introduce an example and describe its parts.
What is the difference between an absolute and a relative URL? When should you use it and why?

webdesign, xhtml, css, php - Mgr. Michal Mikláš