Sie sind auf Seite 1von 31

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 clients software translates the clients query to a type, understandable for the server and make a connection with it. HTML is a computer language at the clients 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 (www.w3.org), 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 (<) and greater than (>) signs, also known as angle brackets that indicate how the browser should display the text.
<name_ of_ tag> Text between the opening and closing tag </name_ of_ tag> Example: <B>Vacation</B> The browser presents at the monitor: Vacation

<html> is the command, obligatory for all HTML-documents.


The end of the HTML-document is: </html>

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 tags 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: <html>Here is my first HTML-page!</html>
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 <html> and </html> 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: <html> <head> </head> <body> </body> </html>

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 <html>. Title
The HTML document must have a title.

<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 </title>
Example The HEAD section including the title looks like:

<head> <title> Stoilova </title> </head>

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:

<meta http-equiv=name" content=content" />


tags with attributes HTTP-EQUIV are used for managing the action of the browsers.
< meta http-equiv ="Content-Type" content ="text/html; charset=windows-1251">

tags containing the attribute NAME and attribute CONTENT. They have the form: <meta name=name" content=content" />
tags with attributes NAME are used for giving information to search indexes
Typical of the tags is that they have opening tag<META>, but they have not closing tag </META>.
According to the requirements of XHTML all tags have to have closing tags. This is the reason at the end of tags to write / before >.

BODY
Just after HEAD section begins BODY section.

Tag <body> 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) background (image as a background) text link, alink vlink (colors of the hyperlinks)

Attributes of BODY section: bgcolor (background color of the page)


The attribute bgcolor determine the background color of the page. <body bgcolor=the color of the page in English"> If you want your page to have black background, you have to write the following code:

<body bgcolor="black">
For yellow background: <body bgcolor="yellow">

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: <body background="picture.jpg">

Attributes of BODY section:

text

Using the text attribute you can give a color of the pages text. The coding is similar to the background color. If you want blue text, for example, you have to write: <body text="blue">

Text is black by default.

Attributes of BODY section : link, alink vlink


Attribute link shows the color of texts hyperlinks of the HTML-document (unvisited hyperlinks ) <body link="green"> Attribute alink determines the color of the hyperlink on clicking by the mouse. Attribute vlink determines the color of the visited hyperlinks. Example: <body link="green" alink=yellow vlink=brown>

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: <body bgcolor="black" text="white" link="blue" alink="yellow" vlink="green"> 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 <font> In contrast to the command <body>, <font> is used always with attributes. The attributes of <font> are: face, size and color.

Attributes of FONT: face (type of the font)


The type of the font is determined by the code:

<font face=Fonts name">Here is written the text</font> There are two main and often used fonts - times new roman and arial. The font of this page is arial: <font face="arial">This is text, written in arial.</font> The effect at the browsers screen is: This is text, written in arial. The other popular font is times new roman: <font face="times new roman"> This is text, written in times new roman.</font>

The effect at the browsers 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 clients chance to see the text as you want.

<font face="arial, helvetica, verdana, sanssherif"> , arial, helvetica, verdana, sans-sherif.</font>


<font face="times new roman, georgia, timoku"> , times new roman, georgia, timoku.</font>

Attributes of FONT tag: size (fonts size)


<font size=digit from 1 to 7">The text is written here</font>
<font size="2">This is text with size 2</font>
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:
<font size="-1"> This text has a size less of those by default with 1.</font> For text bigger of those by default with 1 use: <font size="+1"> - .</font>
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 <h>


There is a special command for creating titles in HTML - <h> together with digits from 1 to 6 (included). It has closing tag - </h>, which has to have the same digit . Example: <h2> This is a title with size 2</h2> The usage of <h> automatically adds empty row above and bellow of the texts 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 (fonts color) Giving a color of the text becomes by assigning a value to the color attribute, for example: <font color="blue">This is blue text</font> <font color="green">This is green text</font>
etc

Example for usage of attributes of Font tag

<font face="arial, helvetica, verdana, sans-sherif" size="4" color="blue">This is text in arial font and its similar with size 4, blue color</font>

Instruments for additional influence to the text view

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

Other possibilities for changing the texts view


<strong> The text is bold like using the tag <b></strong> <ins>The text is underline, similar to tag<u></ins> <em>Shows the text italic like tag <i> </em> <cite>Shows the text italic like tag <i></cite> <dfn>Shows the text italic like tag <i></dfn> <var>Shows the text italic like tag <i></var>

<big>Increase the font size with 1 after each usage of the tag</big>

<small>Decrease the font size with 1 after each usage of the tag</small> <strike>Strike the text</strike> <s>Strike the text</s> <sup>Write the text like supreme indices</sup> <sub> Write the text like sub indices </sub>


<tt>The text is like using typewriter, similar to font Courier</tt>
<code>The text is like using typewriter, similar to font Courier</code>

<samp>The text is like using typewriter similar to font Courier</samp>


<kbd>The text is like using typewriter similar to font Courier</kbd> <acronym> </acronym> 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

<p> </p> <br>

Margin of block text

<blockquote> </blockquote> Using preformatted text <pre> </pre> Leaving larger space &nbsp; &nbsp; 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

<div> </div>
<div align="left"> <div align="right"> <div align="center"> <center> </center> Text alignment in left and right simultaneously <div align="justify"> text </div>

<p align="justify">Text of paragraph</p> <h2 align="center">Text of title</h2>

Das könnte Ihnen auch gefallen