Scribd
Upload
17 views12 pages

LABORATORY 4 Theory

The document provides an introduction to HTML including basic tags like <html>, <head>, <title>, <body> and others. It describes common formatting tags like <b>, <i>, <font> and how to insert comments. It also covers tables in HTML using tags like <table>, <tr>, <td>.

Uploaded by

Гульжамал Калман
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
17 views12 pages

LABORATORY 4 Theory

The document provides an introduction to HTML including basic tags like <html>, <head>, <title>, <body> and others. It describes common formatting tags like <b>, <i>, <font> and how to insert comments. It also covers tables in HTML using tags like <table>, <tr>, <td>.

Uploaded by

Гульжамал Калман
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 12

INTRODUCTION IN HTML

HTML is intended for creation of the documents placed on Web servers, access to which to be made by means of Internet.
The HTML document may be looked through by means of the browser (for example, Internet Explorer, Mozilla FireFox,
Opera). The HTML document is a usual text file, which containing information, and commands - tags (Tag – a label, a sign),
which specify how the browser will display the document. HTML – a page can be created by means of the Notepad.
Example.
<html>
<head>
<title> Это простейшая страничка
</title>
</head>
<body>
Привет! Добро пожаловать на мою
страничку!!!
</body>
</html>

Save the file with name suffix .htm or .html. Open this saved file. For return to a page code, do the following: press the
View menu and there choose command – HTML code Viewing.
There are two types of tags: opening and closed.
For example, <html> - opening, </html> - closed

1. Basic Tags
Tag Description
<html> Defines an HTML document

<title> Defines a title for the document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

<p> Defines a paragraph

<br> Inserts a single line break

<hr> Inserts the continuous line

<!--...--> Defines a comment

The <BODY> tag has attributes:


Attribute Value Description
alink color Specifies the color of an active link in a document

background URL Specifies a background image for a document

bgcolor color Specifies the background color of a document

link color Specifies the color of unvisited links in a document

text color Specifies the color of the text in a document

vlink color Specifies the color of visited links in a document

Example.
<html>
<head>
<title> Пример </title>
<body bgcolor = yellow text = red> Фон желтый, а текст красный
</body>
</html>

<P>, <H1..Н6> tags have parameters:


Attribute Value Description
align left
right Specifies the alignment of the text within a paragraph
center
justify

Example.
<h1 align = center> Глава 1 </h1>.

2. Tags of formatting
Tag Description
<abbr> Defines an abbreviation

<address> Defines contact information for the author/owner of a document/article

<b> Defines bold text

<blockquote> Defines a section that is quoted from another source

<center> Defines centered text

<code> Defines a piece of computer code

<font> Defines font, color, and size for text

<i> Defines italics text

<kbd> Defines keyboard input

<pre> Defines preformatted text

<samp> Defines sample output from a computer program

<small> Defines smaller text

<strike> Defines strikethrough text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<tt> Defines teletype text

<u> Defines the text underlined

<var> Defines a variable

The <FONT> tag has parameters:


Attribute Value Description
color rgb(x,x,x) Specifies the color of text
#xxxxxx
colorname

face font_family Specifies the font of text

size number Specifies the size of text

Example.
<font size =5>Привет!</font> Это моя домашняя страничка. < font size
=+2>(комментарии)</ font>
<font face ="Times New Roman, Arial, Courier New">Это моя домашняя
страничка.</font>
Color table
Color name Code Color name Code
Black # 000000 Maroon # 800000
Green # 008000 Navy # 000080
Silver # C0C0C0 Red # FF0000
Lime # 00FF00 Blue # 0000FF
Gray # 808080 Purple # 800080
Olive # 808000 Teal # 008080
White # FFFFFF Fuchsia # FF00FF
yellow # FFFF00 Aqua # 00FFFF

Example.
Текст <Font color = red> красного </Font> цвета
3. Special symbols and comments.

Name Code Sumbol


&lt; &#60; <
&gt; &#62; >
&nbsp; &#160; Пробел
&copy; &#169; ©
&amp; &#34; &
&quot; &#38; “ (двойные кавычки)
&sect; &#167; §
&laquo; &#171; «
&raquo; &#187; »
&reg; &#174; ®
2
&sup2; &#178; (в квадрате)
3
&sup3; &#179; (в кубе)
Arrows
&larr; &#8592; ←
&uarr; &#8593; ↑
&rarr; &#8594; →
&darr; &#8595; ↓
&harr; &#8596; ↔

Example
&copy; Издательство &quot; Высшая школа &quot;
© Издательство “Высшая школа”

TABLES IN HTML

The HTML table allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other
tables, etc. -- into rows and columns of cells. Each table may have an caption that provides a short description of t he table's
purpose. HTML tables are created using the <table> tag along with other tags that are nested inside it (such as the
<tr> and <td> tags).
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table

Example
<table>
<tr>
<th>Месяц</th>
<th>Экономия</th>
</tr>
<tr>
<td>Январь</td>
<td>1000 тг.</td>
</tr>
</table>
The <TABLE> tag has attributes:
Attribute Value Description
align left Specifies the alignment of a table according to surrounding text
center
right

top
middle
valign Vertical aligns the content in a table row
bottom
baseline
bgcolor rgb(x,x,x) Specifies the background color for a table
#xxxxxx
colorname
border 1 Specifies the table borders
""
cellpadding pixels Specifies the space between the cell wall and the cell content
cellspacing pixels Specifies the space between cells
width pixels Specifies the width of a table
%

The <TR> tag has attributes:


Attribute Value Description
align left
right Aligns the content in a header cell
center
justify
char
bgcolor rgb(x,x,x)
#xxxxxx Specifies the background color of a header cell
colorname
valign top
middle Vertical aligns the content in a header cell
bottom
baseline

The <TH>, <TD> tags have attributes:


Attribute Value Description
align left
right Aligns the content in a header cell
center
justify
char
bgcolor rgb(x,x,x)
#xxxxxx Specifies the background color of a header cell
colorname
colspan number Specifies the number of columns a header cell should span
height pixels
% Sets the height of a header cell
rowspan number Specifies the number of rows a header cell should span
valign top
middle Vertical aligns the content in a header cell
bottom
baseline
width pixels
% Specifies the width of a header cell

Example
<table bgcolor =yellow width=80% border=2 bordercolor=green align =center
cellspacing=5 cellpadding=8>
<tr>
<th width =30%>Имя</th>
<th width =50%>Фамилия</th>
<th width =*>Очки</th>
</tr>
<tr valign=bottom>
<td>Ева</td>
<td>Джексон</td>
<td>94</td>
</tr>
<tr align=center bgcolor=red>
<td><font color=white>Джейн</font></td>
<td><font color=white>Янсон</font></td>
<td><font color=white>84</font></td>
</tr>
<tr>
<td colspan="2"><font color=blue>среднее значение</font></td>
<td><font color=blue>89</font></td>
</tr>
</table>

«LISTS AS A TOOL FOR STRUCTURING»

1. Create of lists

HTML can have Unordered Lists, Ordered Lists, or Description Lists. Any list created according to next scheme:

<opening tag of list>


< tag of list element > text of list element
< tag of list element > text of list element
< tag of list element > text of list element
</ closing tag of list >

Ordered Lists:
1. Element of list 1 Unordered Lists: Description Lists:
2. Element of list 1  Element of list 1 Definition 1
3. Element of list 1  Element of list 1 Description of definition 1
 Element of list 1 Definition 2
Description of definition 2
Definition 3
Description of definition 3
HTML List Tags

Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines the term in a description list
<dd> Defines the description in a description list

The <LI> tag has attributes:


Attribute Value Description
1
A
a
I
type
i Specifies which kind of bullet point will be used
disc
square
circle
Specifies the value of a list item. The following list items will
value number
increment from that number (only for <ol> lists)

You can use any tags into any lists. For example, you can highlight Definition 1 in bold, if you writing <B>Definition
1</B>.

2. Ordered Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers.
Example
<ol>
<li> Кофе
<li> Молоко
</ol>

The <OL> tag has attributes:


Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
start Allow to change numeration of list

Example
Numbers: Upper Case: Lower Case: Roman Upper Roman Lower
<ol type="1"> <ol type="A"> <ol type="a"> Case: Case:
<li>кофе <li>кофе <li>кофе <ol type="I"> <ol type="i">
<li>чай <li>чай <li>чай <li>кофе <li>кофе
<li>молоко <li>молоко <li>молоко <li>чай <li>чай
</ol> </ol> </ol> <li>молоко <li>молоко
</ol> </ol>

3. Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with small
black circles.
Example
<ul>
<li>Кофе
<li>Чай
<li>молоко
</ul>

The <UL> tag has attributes:


Style Description
Type=disc The list items will be marked with bullets (default)
Type=circle The list items will be marked with circles
Type=square The list items will be marked with squares

Example
Disc:
<ul type=disc>
<li>кофе
<li>чай
<li>молоко
</ul>
Circle:
<ul type=circle>
<li>кофе
<li>чай
<li>молоко
</ul>
Square:
<ul type=square>
<li>кофе
<li>чай
<li>молоко
</ul>
4. HTML Description Lists

A description list, is a list of terms, with a description of each term. The <dl> tag defines a description list. The
<dt> tag defines the term (name), and the <dd> tag defines the data (description).
Example
<dl>
<dt>Кофе</dt>
<dd>- черный горячий напиток</dd>
<dt>Молоко</dt>
<dd>- белый холодный напиток</dd>
</dl>
List items can contain new list, and other HTML elements, like images and links, etc.

«USING DESCRIPTOR <IMG> FOR INSERTING GRAPHICS INTO FILES»

The <IMG> tag defines an image in an Web-page. This tag has two required attributes: SRC and ALT. The <IMG>
tag creates a holding space for the referenced image. <IMG> tag has not a closing tag.

The <IMG> tag has attributes:

Attribute Value Description


top
bottom
Specifies the alignment of an image according to surrounding
align middle
elements
left
right
alt text Specifies an alternate text for an image
border pixels Specifies the width of the border around an image
height pixels Specifies the height of an image
hspace pixels Specifies the whitespace on left and right side of an image
ismap ismap Specifies an image as a server-side image-map
src URL Specifies the URL of an image
usemap #mapname Specifies an image as a client-side image-map
vspace pixels Specifies the whitespace on top and bottom of an image
width pixels Specifies the width of an image

Examples
<img src=”hello.gif” alt=”Привет!!” height=50 width=50> - relative link on
image (the image has to be in folder with HTML-document);

<img src=”c:\windows\images\hello.gif” alt=”Привет!!” height=100


width=50 hspace=10> - absolute link on image;

«TYPES OF HYPERLINKS. THE CONCEPT OF THE URL AND USING THEM »

The <A> tag defines a hyperlink, which is used to link from one page to another.
The most important attribute of the <A> element is the HREF parameter, which indicates the link's page.
By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red

The <A> tag has attributes:

Attribute Value Description


href URL Specifies the URL of the page the link goes to
name section_name Specifies the name of an tab
default
rect
shape Specifies the shape of a link
circle
poly
coords coordinates Specifies the coordinates of a link
Specifies where to open the linked document
blank Opens the linked document in a new window or tab
_blank Opens the linked document in the same frame as it was
_parent _self
clicked (this is default)
target _self
_top _parent Opens the linked document in the parent frame
frame name Opens the linked document in the full body of the
_top
window
framename Opens the linked document in a named frame

Examples
<A HREF="pictures.html">Здесь</A>
находятся мои фотографии.

<A NAME="Top of Page"></A> - a tab on a page;


<A HREF="#Top of Page">наверх</A> -
hyperlink to the page’s tab;
<A HREF="1.html#Top of Page">наверх</A> - hyperlink to the other page’s tab;

<A HREF="mailto:[email protected]"> пишите </A> мне - hyperlink to e-mail;


<A HREF="ftp://ftpsitename.com/programs/program.exe"> скачать </A> файл
– hyperlink to the FTP-server.

« CREATING FRAMES. SETTING THE FRAME»


1. <FRAMESET> tag

The <frameset> tag defines a frameset.


The <frameset> element contains one or more <frame> elements. Each <frame> element can contain separate
document.

The <frameset> tag has parameters:

Attribute Value Description


pixels
cols % Specifies the number and size of columns in a frameset
*
pixels
rows % Specifies the number and size of rows in a frameset
*

2. <FRAME> tag

The <frame> tag defines one particular window (frame) within a <frameset>. The <frame> tag hasn’t closing
tag.
Each <frame> in a <frameset> can have different parameters: border, scrolling, the ability to resize, etc.

The <frame> tag has parameters:

Attribute Value Description


0
frameborder Specifies whether or not to display a border around a frame
1
marginheight pixels Specifies the top and bottom margins of a frame
marginwidth pixels Specifies the left and right margins of a frame
name text Specifies the name of a frame
noresize noresize Specifies that a frame is not resizable
yes
scrolling no Specifies whether or not to display scrollbars in a frame
auto
src URL Specifies the URL of the document to show in a frame
Examples
<frameset cols="35%,*">
<frame src="1.htm" name="1">
<frame src="2.htm" name="2">
</frameset>
Browser window divide on two particular window
(frames). Into each window load one Web-document.

<a
href ="3.htm" target="2"> загрузить 3-й
документ во второй фрейм</a>
Document's hyperlink, which load the third file's content
into the frame with name «2».

«THE CONCEPT OF MEDIA FILES»

1. The <EMBED> tag defines a container for an external application or interactive content (a plug-in).
The <EMBED> tag has attributes:

Attribute Value Description


height pixels Specifies the height of the embedded content
src URL Specifies the address of the external file to embed
width pixels Specifies the width of the embedded content
True
autoplaying Specifies that the video will start playing
false

Examples
<embed src="Linkin Park - What
I`ve done-LQ.avi" autoplaying="true">

2. The HTML <BGSOUND> tag is used to play a


soundtrack in the background. This tag is for Internet
Explorer only.
The < BGSOUND > tag has attributes:
Attribute Value Description
loop number Lets you replay a background soundtrack a certain number of times.
src URL Specifies the path of the sound file.

Examples
<bgsound src=" Metallica_Nothing_Else_Matters.mp3" loop=20>

3. An HTML marquee is a scrolling piece of text in your webpage. This is created by using HTML
<MARQUEES> tag
The < MARQUEES > tag has attributes:
Attribute Value Description
width % This specifies the width of the marquee.
height % This specifies the height of the marquee. This can be a value like 10 or 20% etc.
up,
direction down, This specifies the direction in which marquee should scroll.
left right
scroll,
behavior slide This specifies the type of scrolling of the marquee.
alternate
scrolldelay number This specifies how long to delay between each jump.
scrollamount number This specifies the speed of marquee text.
loop number This specifies how many times to loop.
bgcolor color This specifies background color in terms of color name or color hex value.
hspace % This specifies horizontal space around the marquee.
vspace % This specifies vertical space around the marquee.

Examples
<marquee bgcolor=yellow>размещение
рекламы</marquee>

« NAVIGATION MAPS »

The <MAP> tag is used to define a client-side image-map. An image-map is an image with clickable areas.
The required name attribute of the <MAP> element is associated with the <IMG>'s usemap attribute and
creates a relationship between the image and the map.
The <MAP> element contains several of <AREA> elements, that defines the clickable areas in the image map.
The <MAP> tag has attributes:

Attribute Value Description


name mapname Required. Specifies the name of an image-map
The <AREA> element is always nested inside a <MAP> tag. The <AREA> tag has not closing tag.
The <AREA> tag has attributes:

Attribute Value Description


Specifies an alternate text for the area. Required if the HREF
alt text
attribute is present
coords coordinates Specifies the coordinates of the area

href URL Specifies the hyperlink target for the area


default
rect
shape Specifies the shape of the area
circle
poly
_blank
_parent
target _self Specifies where to open the target URL
_top
framename
Attributes of COОRDS parameter:

Value Description
Specifies the coordinates of the left, top, right, bottom corner of the rectangle (for
x1,y1,x2,y2
shape="rect")
x,y,radius Specifies the coordinates of the circle center and the radius (for shape="circle")
Specifies the coordinates of the edges of the polygon. If the first and last coordinate pairs are
x1,y1,x2,y2,..,xn,yn not the same, the browser will add the last coordinate pair to close the polygon (for
shape="poly")
Examples
Create navigation map with name ImageMap:

<MAP NAME="ImageMap">
<AREA HREF="Содержание.html" SHAPE="rect" COORDS="0,0,70,140" ALT="Левая половинка">
<AREA HREF="фильмы.html" SHAPE="poly" COORDS="71,0,80,95,140,130" ALT="Правый
многоугольник">
</MAP>

<BODY>
Attach the map to the image:

<IMG SRC="sakura.jpg" USEMAP="#ImageMap" HEIGHT="140" WIDTH="140" BORDER="0">


</BODY>

REFERENCES

1. Томас А. Паулл Полное руководство по HTML- Минск 2001 г.


2. Матросов А., Сергеев А., Чаунин М. HTML 4.0- Санкт-Петербург, из. BHV (в
подлиннике)
3. Будилов В.А. Практическое занятие по HTML- Санкт-Петербург 2001 г.
(краткий курс)
4. В.Холмогоров. Основы Веб-мастерства. – Питер, 2010.
5. http://www.w3schools.com/html/default.asp
6. http://www.w3schools.com/css/default.asp
7. www.youtube.com

You might also like