Web Design HTML 1

HTML
MSc Petar Milić

Introduction
 HTML (HyperText Markup Language) is a markup language
designed for the description of web documents (pages).
 Hypertext is text which contains links to other documents or to

himself.
 It can be defined as a set of pages that are interconnected by links

that are inserted into the page.
 Hypertext is read by following hyperlinks in the text, as opposed to

plain text, which is read linearly (top-down), which means not
necessarily in a linear fashion.
2
Introduction
 HTML is the standard language for web pages.
 It is simple, and is used to execute programs remotely.
 HTML pages have the extension html or htm.
 These pages are located into particular directory on the web server that is
connected to the Internet, and thus become available on the Web.
 The web browser reads these pages and presents the content to the user.
 In addition to text, HTML allows you to view images, multimedia and links
(hyperlinks).
3
Introduction
 As we said earlier, HTML is a language designed for the description text.
 Besides him, there are a number of languages that allow to describe the
appearance and content of a text.
 Particularly important are:
 SGML (Standard General Markup Language),

 TeX и LaTeX,
 PostScript,
 RTF (Rich Text Format).
4
Introduction
 In hypertext, the most significant are the following languages:
 SGML,
 HTML (HyperText Markup Language),
 DHTML (Dynamic HTML)
 XHTML (Expandable HTML) и
 XML (Extensible Markup Language).
5
Introduction
 HTML was created by simplification of SGML language, with the
purpose of describing the documents to be published on the
web, so we can freely say that this was his simplified version.
 As for the labeling content, it was initially limited, providing only

basic things for tagging and text formatting.
 With the development of the Web, the need arise to richer

content, and in that direction the HTML was developed.
6
Introduction
 HTML pages can be generated using a simple text editor
(Notepad).
 Also, more advanced tools such as MS Frontpage and

Macromedia DreamViewer can be used
 View the site can be done through a web browser: Internet

Explorer, Mozilla Firefox, Opera, Chrome.
7
TAGs
 HTML is based on the tags.
 Tag is an HTML command that tells the browser how and in what way to show the contents of
web documents.
 Tags are "case insensitive", which means that it does not matter whether they write in small or in
capital letters.
 They are written in square brackets "<" and ">", for example. <html>.
 HTML tags are used in pairs, HTML and </ html>.
 The first pair is the start tag, and the other end tag.
 Symbol "/" indicates where the cessation of initial tag.
8
TAGs
 There are three types of HTML tags, such as:
 Simple tags of “<X>” form, to describe the simple elements

of the logical structure,
 a complex tags of form “<X> test </ x>”, with which is

described a part of the text “test”
 attributes of tags in form “<X A1=a A2=b ...> test </ X>” with
additional information about the layout of the text “test”.
9
TAGs
 HTML tags can have attributes that define them further, which are
stated in the initial tag.
 The general form is: name_of_attribute = "value".
 The most important HTML tags are HTML and </ html>.
 Located at the beginning of every HTML document.
 <html> tells the browser that the file he began to load is the HTML
document, and </ html> marks the end of an HTML document.
10
Document structure
 HTML documents consist of two parts: the part that describes
the document (header) and the part that represents the contents
of the document (the body).
 Information on the description of the HTML document is placed

within <head> and </ head> tags.
 The content of the document is located between the tags

<body> and </ body>.
11
Document structure
 Minimum structure of an HTML document includes tags:
<html> </ html> - brackets of the HTML text,

<head> </ head> - header brackets,
<title> </ title> - brackets for the name of an HTML
document and
<body> </ body> - brackets for the content of an HTML
document.
12
Document structure
 The content of the document header is not displayed in the
browser window, but as we have said provides some
information about the site.
 The content between the tags <body> and </ body> appears as
the content of a web document in a browser window.
13
Example No.1
<html>
<head>
<title>
title of the document
</title>
</head>
<body>
content of the document
</body>
</html>
14
Comments in the document
 HTML language has the opportunity to comment on the code,
which is executed by tag:
<! ------ Comment ------>
15
Headers
 The titles in the document are encoded according to the relative
depth of the digits 1 through 6.
 Their general form is:

<Hn> Title level n </ Hn>. n takes values from 1 to 6
16
Example No.2
<html>
<head>
<title>
Titles
</title>
</head>
<body>
<H1> Title (header) H1 </H1>
</body>
</html>
17
Paragraphs
 Paragraph is marked by brackets <p> and </ p>.
 This tag can have attribute “align” with the values center, left
and right, which defines the position of the text in the document
as centered, left and right.
18
Example No.3
<html>
<head>
<title>
Paragraphs
</title>
</head>
<body>
<p align="left"> Left </p>
<p align="center"> Center </p>
<p align="right"> Right </p>
</body>
</html>
19
Divisions
 A similar to paragraph, divs is defined by tags <div> ... </ div>.
 Using this tag can be an effective way to use the style that will
be discussed in next lectures of this course.
20
Example No.4
<html>
<head>
<title>
Divisions
</title>
</head>
<body>
<div align="left"> Left </div>
<div align="center"> Center </div>
<div align="right"> Right </div>
</body>
</html>
21
Lines
 HTML lines are defined with tag <hr>.
 It's a simple tag, so there is no ending tag for this tag.
 This tag can contain an optional attribute “noshade”.
 The specified attribute removes the shadow of the line.
22
Example No.5
<html>
<head>
<title>
HR
</title>
</head>
<body>
<div align="left"> Left </div>
<hr>
<div align="center"> Center </div>
<hr>
<div align="right"> Right </div>
</body>
</html>
23
Lines
 In addition to the above attribute, <hr> tag may contain
attributes “align”, “size”, “width” and “color”, which define the
alignment of the line, line weight in pixels, the length of line and
color of the line, respectively.
24
Example No.6
<html>
<head>
<title>
HTML line with atributes
</title>
</head>
<body>
<hr noshade align="center" size="6" width="50%" color="#ff0000">
</body>
</html>
25
Special characters
 Special characters, such as: ©, ™ and others are defined by first
specifying the character '&' followed by the code.
&#1041 Б &#1073 б
&#154 š &#268 Č
&#1042 В &#1074 в
&#1043 Г &#1075 г &#263 ć &#262 Ć
&#1044 Д &#1076 д &#269 č &#272 Đ
&#1046 Ж &#1078 ж
&#208 Ð &#273 đ
&#1047 З &#1079 з
&#1048 И &#1080 и &#128 € &#134 †
&#1050 К &#1082 к
&#137 ‰ &#153 ™
&#1051 Л &#1083 л
&#169 © &#173 ®
&#1033 Љ &#1052 M
&#1084 м &#1053 Н &#181 μ &#188 ¼
&#1085 н &#1034 Њ
&#189 ½ &#190 ¾
&#1055 П &#1087 п
&#1056 Р &#1088 р &#223 ß &#131 ƒ
&#1054 С &#1089 с &#149 • &#64 @
&#1035 Ћ &#295 ћ
&#133 … &#171 «
&#1059 У &#1091 у
&#1060 Ф &#1092 ф &#187 » &#247 ÷
&#1062 Ц &#1094 ц &#248 ø &#216 Ø
&#1063 Ч &#1095 ч
&#215 × &#47 /
&#1039 Џ &#1064 Ш
&#1096 ш &#142 Ž
&#159 ž &#138 Š
26
Example No.7
<html>
<head>
<title>
Special characters
</title>
</head>
<body>
©

</body>
</html>
27
Special characters
&#1041 Б &#1073 б
&#154 š &#268 Č
&#1042 В &#1074 в
&#1043 Г &#1075 г &#263 ć &#262 Ć
&#1044 Д &#1076 д &#269 č &#272 Đ
&#1046 Ж &#1078 ж
&#1047 З &#1079 з
&#208 Ð &#273 đ
&#1048 И &#1080 и &#128 € &#134 †
&#1050 К &#1082 к
&#137 ‰ &#153 ™
&#1051 Л &#1083 л
&#1033 Љ &#1052 M &#169 © &#173 ®
&#1084 м &#1053 Н
&#181 μ &#188 ¼
&#1085 н &#1034 Њ
&#1055 П &#1087 п &#189 ½ &#190 ¾
&#1056 Р &#1088 р &#223 ß &#131 ƒ
&#1054 С &#1089 с
&#1035 Ћ &#295 ћ
&#149 • &#64 @
&#1059 У &#1091 у &#133 … &#171 «
&#1060 Ф &#1092 ф
&#187 » &#247 ÷
&#1062 Ц &#1094 ц
&#1063 Ч &#1095 ч &#248 ø &#216 Ø
&#1039 Џ &#1064 Ш
&#215 × &#47 /
&#1096 ш &#142 Ž
&#159 ž &#138 Š
28
Text formating
 HTML has one standard for all sizes, whether it is text, image, or something
else, which is very useful.
 This standard is called the default, and in it all sizes are defined.
 If you do not explicitly specify the size of a text, its size will be 3, font will be
Times New Roman and color will be black.
 Coding of part of the web document with all the desired properties consumes
a lot of time, so using the default standard is best solution.
 Thus, under this standard text within a web document is aligned with the left
side, unless otherwise indicated.
29
Example No.8
<html>
<head>
<title>
Centered text
</title>
</head>
<body>
<center> Centered text</center>
</body>
</html>
30
Fonts
 Fonts in web documents can be changed by using the tags
<font> </ font>.
 Like other tags, this tag have optional attributes that can
describe more closely the text in the web document.
 Some of these attributes are: face (for font selection), color (to
select the font color) and size (for font size selection).
31
Example No.9
<html>
<head>
<title>
Fonts
</title>
</head>
<body>
<font face="Comic Sans MS"> This text is in font "Comic Sans MS" . </font>
<font color="#ff0000"> This text is in red, </font>
<font size=„5"> and this have size of 5. </font>
</body>
</html>
32
Fonts
 In a web document can be used several different fonts, as is
shown in Example No.9.
 It is important to note that a user that loads the page in his

computer needs to have installed the font specified in a web
document.
 Otherwise, his browser will not display the text.
 Only widespread fonts should be used, that this would not

happen.
33
Fonts
 It is good practice when using fonts that are rarely used in Web
documents, to indicate several of them, one after another,
separated by commas.
 If a user on his computer does not have a font that is listed first
in the order, then the browser try to display text in a font that is
listed next and so on in order.
34
Example No.10
<html>
<head>
<title>
Fonts
</title>
</head>
<body>
<font face="Comic Sans MS,Arial,Courier"> Usings fonts <font/>
</body>
</html>
35
Font attributes
 The following table provides an overview of the attributes that
can be used within the tags <font> </ font>.
Таг Опис
<b> Дефинише bold текст
<big> Дефинише big текст
<em> Дефинише emphasized текст
<i> Дефинише italic текст
<small> Дефинише small текст
<strong> Дефинише strong текст
<sub> Дефинише subscripted текст
<sup> Дефинише superscripted текст
<ins> Дефинише inserted текст
<del> Дефинише deleted текст
36
Line breaking
 According to the standard default, the text is automatically broken at the end of the line.
 If you want to have some text in a row, then we can use tags <nobr> and </ nobr>.
37
Example No.11
<html>
<head>
<title>
Without breaking
</title>
</head>
<body>
<nobr> here is the text that will not be broken at the end of the line </nobr>
</body>
</html>
38
Line breaking
 As from the above example can be seen, in the bottom of the window there was a horizontal scroll bar, so the user must scroll it to see the full text.
 Breaking text to a precise location can be achieved by using the tag <wbr>.
 This tag does not require a closing tag.
 He will wrap line if the text before it is too long to fit on one line.
 It also makes it possible to break a long word at the end of the line.
39
Example No.12
<html>
<head>
<title>
Breaking text
</title>
</head>
<body>
This text wil be broken <wbr> here, and it goes in new line.
</body>
</html>
40
New line
 Most text editors for moving to a new line use ENTER key.
 Applying the same principles for writing web documents will not produce the same effect.
 A new line is performed using a <br>.
41
Example No.13
<html>
<head>
<title>
New line
</title>
</head>
<body>
First line
<br>
Second line
</body>
</html>
42
Blank space
 To insert a blank space when writing in a text editor, we use the SPACE for a single blank space and TAB if we want more spaces.
 However, the application of the same principle when writing code for web documents will not give the same effect.
 To overcome this problem, use “&nbsp”.
43
Example No.14
<html>
<head>
<title>
White space
</title>
</head>
<body>
This is text without white spaces which is followed
&nbsp&nbsp&nbsp&nbsp by 4 white space
</body>
</html>
44
Colors in HTML
 Elements of Web documents can be displayed across the color spectrum.
 Colors can be defined in two ways:
 using a predefined color name in English (for example, red for red
color)
 or by using the hexadecimal RGB values, in front of which must
necessarily stand symbol # (# FF0000).
 Another way of defining the color, may be carried out using RGB
(255,0,0) codes.
 Hereby, we can adjust the finer nuances of color.
45
Colors in HTML
 The following table gives an example of using the second
method of defining color.
Color Color HEX Color RGB

#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
46
Colors in HTML
 W3C (World Wide Web Consortium) defined the names of 16 colors
for HTML and CSS (it willl be discussed in the next lectures).
 These colors are: aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, purple, red, silver, teal, white, and yellow.
 To use other colors to use hexadecimal color value.
 Background and text within the entire web document is defined by the
attribute “bgcolor” and “text”, respectively, within the tag <body>.
 In the case of omission of this attribute defined default value is

assigned.
47
Example No.15
<html>
<head>
<title>
Background and text color
</title>
</head>
<body bgcolor="#ffff00" text="#ff0000">
Background color is yellow and text color is red.
</body>
</html>
48
Colors & codes
 The following slides gives an overview of codes and colors.
Table of codes and colors

result coding by word HEX code result
white FFFFFF
ghostwhite F8F8FF
whitesmoke F5F5F5
snow FFFAFA
azure F0FFFF
honeydew F0FFF0
mintcream F5FFFA
lightyellow FFFFE0
floralwhite FFFAF0
ivory FFFFF0
linen FAF0E6
oldlace FDF5E6
seashell FFF5EE
lavenderblush FFF0F5
49
Colors & codes
lavender E6E6FA
gainsboro DCDCDC
lightgrey D3D3D3
silver C0C0C0
darkgray A9A9A9
lightslategray 778899
slategray 708090
gray 808080
dimgray 696969
black 000000
bisque FFE4C4
wheat F5DEB3
moccasin FFE4B5
peachpuff FFDAB9
mistyrose FFE4E1
pink FFC0CB
lightpink FFB6C1
rosybrown BC8F8F
coral FF7F50
tomato FF6347
orangered FF3300
50
Colors & codes
red FF0000
crimson DC143C
indianred CD5C5C
firebrick B22222
darkred 8B0000
maroon 800000
brown A52A2A
saddlebrown 8B4513
sienna A0522D
chocolate D2691E
darkorange FF8C00
orange FFA500
lightsalmon FFA07A
darksalmon E9967A
salmon FA8072
sandybrown F4A460
51
Colors & codes
navajowhite FFDEAD
blanchedalmond FFEBCD
papayawhip FFEFD5
antiquewhite FAEBD7
beige F5F5DC
cornsilk FFF8DC
palegoldenrod EEE8AA
khaki F0E68C
yellow FFFF00
gold FFD700
darkgoldenrod B8860B
peru CD853F
goldenrod DAA520
tan D2B48C
burlywood DEB887
darkkhaki BDB76B
chartreuse 7FFF00
greenyellow ADFF2F
lawngreen 7CFC00
lime 00FF00
52
Colors & codes
springgreen 00FF7F
palegreen 98FB98
mediumspringgreen 00FA9A
limegreen 32CD32
mediumseagreen 3CB371
yellowgreen 9ACD32
aliceblue 9ACD32
mediumaquamarine 66CDAA
darkseagreen 8FBC8F
forestgreen 228B22
green 008000
seagreen 2E8B57
olive 808000
olivedrab 6B8E23
darkgreen 006400
darkslategray 2F4F4F
darkolivegreen 556B2F
53
Colors & codes
aquamarine 7FFFD4
aqua 00FFFF
cyan 00FFFF
paleturquoise AFEEEE
turquoise 40E0D0
mediumturquoise 48D1CC
darkturquoise 00CED1
lightseagreen 20B2AA
cadetblue 5F9EA0
teal 008080
darkcyan 008B8B
steelblue 4682B4
deepskyblue 00BFFF
lightskyblue 87CEFA
lightsteelblue B0C4DE
powderblue B0E0E6
skyblue 87CEEB
54
Colors & codes
cornflowerblue 6495ED
dodgerblue 1E90FF
mediumslateblue 7B68EE
slateblue 6A5ACD
royalblue 4169E1
blue 0000FF
mediumblue 0000CD
darkslateblue 483D8B
navy 000080
darkblue 00008B
midnightblue 191970
indigo 4B0082
blueviolet 8A2BE2
darkorchid 9932CC
darkviolet 9400D3
mediumpurple 9370DB
orchid DA70D6
mediumorchid BA55D3
fuchsia FF00FF
magenta FF00FF
hotpink FF69B4
violet EE82EE
thistle D8BFD8
plum DDA0DD
palevioletred DB7093
deeppink FF1493
mediumvioletred C71585
purple 800080
55
darkmagenta 8B008B

Web Design HTML 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Design HTML 1

Uploaded by

Copyright:

Available Formats

HTML

MSc Petar Milić

 Hypertext is text which contains links to other documents or to

 It can be defined as a set of pages that are interconnected by links

 Hypertext is read by following hyperlinks in the text, as opposed to

 It is simple, and is used to execute programs remotely.

 HTML pages have the extension html or htm.

 Particularly important are:

 SGML (Standard General Markup Language),

 As for the labeling content, it was initially limited, providing only

 With the development of the Web, the need arise to richer

 Also, more advanced tools such as MS Frontpage and

 View the site can be done through a web browser: Internet

 HTML tags are used in pairs, HTML and </ html>.

 Symbol "/" indicates where the cessation of initial tag.

 Simple tags of “<X>” form, to describe the simple elements

 a complex tags of form “<X> test </ x>”, with which is

 The general form is: name_of_attribute = "value".

 Located at the beginning of every HTML document.

 Information on the description of the HTML document is placed

 The content of the document is located between the tags

<html> </ html> - brackets of the HTML text,

<! ------ Comment ------>

 Their general form is:

 It's a simple tag, so there is no ending tag for this tag.

 This tag can contain an optional attribute “noshade”.

 The specified attribute removes the shadow of the line.

 It is important to note that a user that loads the page in his

 Otherwise, his browser will not display the text.

 Only widespread fonts should be used, that this would not

 This tag does not require a closing tag.

 A new line is performed using a <br>.

 To overcome this problem, use “&nbsp”.

 Colors can be defined in two ways:

 Hereby, we can adjust the finer nuances of color.

Color Color HEX Color RGB

 To use other colors to use hexadecimal color value.

 In the case of omission of this attribute defined default value is

Table of codes and colors

You might also like