HTML (Hypertext Markup Language )

Short history of HTML and World Wide Web Before Web, the information exchange through Internet was by: Telnet protocol, which give the client access to remote computer; FTP - File Transfer Protocol, which allows exchange of files among the computers, connected in the network. The base of World Wide Web is done by Tim Berners-Lee at 1989

The application software for Internet is based on the model “client-server”. According to this model the software is divided on two parts: software for the client (PC looking for information) and for the server (PC delivering services). The client’s software translates the client’s query to a type, understandable for the server and make a connection with it. HTML is a computer language at the client’s side, which says to the web browser how to present the document (web page)

Standardization of HTML As HTML has being developed continuously, there are a lot of new ideas and elements in it. As a result, it was a time when a lot of different versions of HTML incompatible with the different browsers and their different versions exist. A need for standardization of HTML appeared. That is why a special organization was created - World Wide Web Consortium ( All proposals and additions for changing HTML are directed to it.

Commands in HTML The elements of HTML are called tags. The name of the tag hints what is the tag designed for. Usually, the tags are in pairs – opening and closing tag. Between the tags is placed text (usually). The result ca be seen by the browser.

Syntaxes of the tags: HTML tags are commands written between less than ( ) signs, also known as angle brackets that indicate how the browser should display the text. Text between the opening and closing tag Example: Vacation The browser presents at the monitor: Vacation

is the command, obligatory for all HTML-documents. The end of the HTML-document is: More of the HTML tags have attributes with values. Please notice: You have the possibility to write in your native language (if it is not English) in the HTML document, however the tags and attributes are always in Latin alphabet. Between the text of the commands and angle brackets you should not leave a space. There is a space between the tag’s attributes.

Creating HTML document To create a HTML- document you need any text editor. As more of them put additional information, which make the editing later hard, use the simplest one– Notepad, which is a part of Windows and can be open from "Start" (bottom, at left of the monitor) and choose "Programs"-->"Accessories"-->"Notepad".

When you open Notepad, please write something, for instance: Here is my first HTML-page! Then save the file : from the menu "File“ of Notepad choose "Save As" and write the name of your first HTML-page: index.html ( or index.htm) The first page of nearly each Internet site is named index.html or index.htm The browser will distinguish it as a first page and it will open the site only if it has the name index.html or index.htm.

Structure of HTML The beginning and the end of the HTML document are and Between these tags are the both main parts of the HTML document. The first part is HEAD, the second - BODY. These two parts of the HTML-document have opening and closing tags. One typical HTML document looks like: ……… ………

Nesting tags You can use simultaneously more than one tag. For instance, you can want to format your text using bold, italic and underline. Order for opening and closing tags is very important. The first opened tag must be closed last. The last open tag must be closed first. HEAD HEAD begins just after the first tag. Title The HTML document must have a title. The written between these two tags in some browsers appears in the title bar of the window, in others – at the top of the screen Example The HEAD section including the title looks like: Stoilova

Content of section HEAD: МЕТА tags META tags are elements of HEAD МЕТА tags are very important and useful instrument because you can advertise your site, so that the search indexes can find it among the huge amount of information in Internet. Meta tags are two groups: МЕТА tags, including the attribute HTTP-EQUIV and the attribute CONTENT. These Meta tags have the following format: МЕТА tags with attributes HTTP-EQUIV are used for managing the action of the browsers.

BODY Just after HEAD section begins BODY section. Tag can contain several attributes (they are not obligatory), which determine the view of the HTML page. These attributes are: bgcolor (background color of the page) bgcolor (background color of the page) background (image as a background)background (image as a background) text link, alink и vlink (colors of the hyperlinks)link, alink и vlink (colors of the hyperlinks

Attributes of BODY section: bgcolor ( background color of the page ) background color of the page The attribute bgcolor determine the background color of the page. If you want your page to have black background, you have to write the following code: For yellow background: etc.

Attributes of BODY section : background (image as background) The background of the HTML-page, except color, can be used an image. If you want your page to have as a background the image picture.jpg, you have to write the code:

Attributes of BODY section: text Using the text attribute you can give a color of the page’s text. The coding is similar to the background color. If you want blue text, for example, you have to write: Text is black by default.

Attributes of BODY section : link, alink и vlink Attribute link shows the color of text’s hyperlinks of the HTML-document (unvisited hyperlinks )  Attribute alink determines the color of the hyperlink on clicking by the mouse. Attribute vlink determines the color of the visited hyperlinks. Example:

Example of using the attributes of BODY tag We want to create a page with black background, white text, blue color of unvisited hyperlinks, green color of visited hyperlinks, yellow color on clicking. The code is: None of the above attribute is not obligatory! By default The page background is white; The text color is black; The unvisited hyperlinks color is blue; The visited hyperlinks color is violet (if there are not done any other settings of the browser)

TEXT formatting in HTML Tag In contrast to the command, is used always with attributes. The attributes of are: face, size and color.

Attributes of FONT: face (type of the font) The type of the font is determined by the code: Here is written the text There are two main and often used fonts - times new roman and arial. The font of this page is arial: This is text, written in arial. The effect at the browser’s screen is: This is text, written in arial. The other popular font is “times new roman”: This is text, written in times new roman. The effect at the browser’s screen is: This is text, written in times new roman. Usually, the font “times new roman” is given by default.

Important for the fonts: the same or similar fonts have different names in the different computer systems. That is why it is good to include not only one but several similar fonts, divided by commas. This increase the client’s chance to see the text as you want. Това е текст, написан на arial, helvetica, verdana, sans-sherif. Това е текст, написан на times new roman, georgia, timoku.

Attributes of FONT tag: size (font’s size) The text is written here This is text with size 2 Text written by “arial” font with different size is the following: This is text with size 1 This is text with size 2 This is text with size 3 This is text with size 4 This is text with size 5 This is text with size 6 This is text with size 7

You can use not only absolute but relative size as well: This text has a size less of those by default with 1. For text bigger of those by default with 1 use: Това е текст с един размер по-голям от подразбиращия се. This is the size of the text less than those by default with 2. This is the size of the text less than those by default with 1. This is the size of the text by default. This is the size of the text bigger of those by default with 1.

Command for titles There is a special command for creating titles in HTML - together with digits from 1 to 6 (included). It has closing tag -, which has to have the same digit. Example: This is a title with size 2 The usage of automatically adds empty row above and bellow of the text’s title. The titles are in the form: This is a title with size 1 This is a title with size 2 This is a title with size 3 This is a title with size 4 This is a title with size 5 This is a title with size 6

Attributes for tag FONT: color (font’s color) Giving a color of the text becomes by assigning a value to the color attribute, for example: This is blue text This is green text etc Example for usage of attributes of Font tag This is text in arial font and its similar with size 4, blue color

Instruments for additional influence to the text view The main instruments for influence of the text view are the tags, and. Each of them has closing tag text bold text italic underline text Examples: This text is at the same time bold, italic and underline Wrong (the principle of nesting tags is not correct)

Other possibilities for changing the text’s view The text is bold like using the tag The text is underline, similar to tag Shows the text italic like tag Increase the font size with 1 after each usage of the tag Decrease the font size with 1 after each usage of the tag Strike the text Write the text like supreme indices Write the text like sub indices

The text is like using typewriter, similar to font Courier The text is like using typewriter similar to font Courier This tag is not used by graphical browsers but only by audio-browsers where cause spelling each word. Други възможности за променяне на вида на текста

Disposal of text on the page and text alignment New paragraph Go to next row Margin of block text Using preformatted text Leaving larger space does not allow dividing two words to the next row

Disposal of text on the page and text alignment Text alignment in left, right, center Text alignment in left and right simultaneously text Text of paragraph Text of title