31
HTML (Hypertext Markup Language )

HTML ( Hypertext Markup Language )

  • Upload
    rollin

  • View
    92

  • Download
    0

Embed Size (px)

DESCRIPTION

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; - PowerPoint PPT Presentation

Citation preview

Page 1: HTML ( Hypertext Markup Language  )

HTML

(Hypertext Markup Language )

Page 2: 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

Page 3: HTML ( Hypertext Markup Language  )

• 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)

Page 4: HTML ( Hypertext Markup Language  )

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.

Page 5: HTML ( Hypertext Markup Language  )

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.

Page 6: HTML ( Hypertext Markup Language  )

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

Page 7: HTML ( Hypertext Markup Language  )

<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 tag’s attributes.

Page 8: HTML ( Hypertext Markup Language  )

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".

Page 9: HTML ( Hypertext Markup Language  )

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.

Page 10: HTML ( Hypertext Markup Language  )

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>

Page 11: HTML ( Hypertext Markup Language  )

• 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.

HEADHEAD begins just after the first tag <html>.

TitleThe 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>

ExampleThe HEAD section including the title looks like:

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

Page 12: HTML ( Hypertext Markup Language  )

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">

Page 13: HTML ( Hypertext Markup Language  )

• МЕТА 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 tagthey have not closing tag </META> </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 “>”.

Page 14: HTML ( Hypertext Markup Language  )

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)

Page 15: HTML ( Hypertext Markup Language  )

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.

Page 16: HTML ( Hypertext Markup Language  )

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">

Page 17: HTML ( Hypertext Markup Language  )

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: <body text="blue">

Text is black by default.

Page 18: HTML ( Hypertext Markup Language  )

Attributes of BODY section :

link, alink и vlink • Attribute link shows the color of text’s 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”>

Page 19: HTML ( Hypertext Markup Language  )

Example of using the attributes of BODY tagWe 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)

Page 20: HTML ( Hypertext Markup Language  )

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.

Page 21: HTML ( Hypertext Markup Language  )

Attributes of FONT: face (type of the font) The type of the font is determined by the code:

<font face=“Font’s 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 browser’s 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 browser’s screen is: This is text, written in times new roman.

Usually, the font “times new roman” is given by default.

Page 22: HTML ( Hypertext Markup Language  )

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.

<font face="arial, helvetica, verdana, sans-sherif">Това е текст, написан на arial, helvetica, verdana, sans-sherif.</font>

<font face="times new roman, georgia, timoku">Това е текст, написан на times new roman, georgia, timoku.</font>

Page 23: HTML ( Hypertext Markup Language  )

Attributes of FONT tag: size (font’s 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

Page 24: HTML ( Hypertext Markup Language  )

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.

Page 25: HTML ( Hypertext Markup Language  )

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 text’s title.

The titles are in the form:

This is a title with size 1This is a title with size 2This is a title with size 3This is a title with size 4 This is a title with size 5 This is a title with size 6

Page 26: HTML ( Hypertext Markup Language  )

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:

<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>

Page 27: HTML ( Hypertext Markup Language  )

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>

Page 28: HTML ( Hypertext Markup Language  )

Other possibilities for changing the text’s 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>

Page 29: HTML ( Hypertext Markup Language  )

• <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.

Други възможности за променяне на вида на текста

Page 30: HTML ( Hypertext Markup Language  )

Disposal of text on the page and text alignment

• New paragraph <p> </p> • Go to next row <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

Page 31: HTML ( Hypertext Markup Language  )

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>