8/9/2019 Welcome to HTML - Uvod u HTML
1/12
1
8/9/2019 Welcome to HTML - Uvod u HTML
2/12
What i
HTML (
This is a s
With the
This is a t
pages in t
Worki
Generatin
them in th
2
E
HTML?
yperText M
tandard lang
evelopment
ext that cont
e form of fil
g with H
g HTML pag
e Start menu
C
rkup Langua
age for Inter
of the Intern
ins links to o
es, interconn
ML
e you need a
under All Pr
Pict
M
ge) is a very
net documen
t came the e
ther docume
ected with li
simple text e
ograms→ A
ure1. Findin
T
simple langu
ts.
ergence of
ts or to your
ks, which ar
ditor, such as
ccessories. T
of Notepad/
age devised t
ew type of d
self. Specific
inserted int
Notepad or
at is shown
WordPad
T
o allow webs
ocument - th
ally, hyperte
the page.
ordPad (yo
n Picture1).
L
ite creation.
e hypertext.
t is a set of
u can find
8/9/2019 Welcome to HTML - Uvod u HTML
3/12
3
Creating one webpage
After you open the text editor you can start creating your website. For this you need the knowledge of
working with tags in HTML, which will further be explained.
HTML webpage structure
Minimum structure of HTML document includes tags:
, - HTML document brackets;
, - the header brackets;
, - HTML document name brackets
, - marked document’s text brackets.
HTML part
The entire HTML document is located between and tags, where is
used at the beginning and at the end of the whole document.
HEAD part
Every HTML document consists of two parts: the header (head) and body. The header is separated by
and tags, and the body of an HTML document by and tags.
Everything that is written in the header of the document will not be displayed in the browser window,
only serves to provide some basic website information.
BODY part
Everything written between and tags is the body of the document and it will be
displayed in the browser window.
Example1. General page layout
Everything that should be displayed is here to be written.
Furthermore, between and tags you can add different entities.
The comment
An additional option allows you to mark a comment in the HTML text that cannot be seen in
document visualization. For example:
8/9/2019 Welcome to HTML - Uvod u HTML
4/12
Headings
Headings
form:
8/9/2019 Welcome to HTML - Uvod u HTML
5/12
5
Rule tag
It is marked with label with an optional NOSHADE attribute. This is a simple tag as well (noend tag ), and it has SIZE attribute that describes line thickness.
For example: . For a simple line you can use just tag.
Picture3. An example of basic tags use
8/9/2019 Welcome to HTML - Uvod u HTML
6/12
6
Lists
Words or phrases which need to be set apart from the rest of the body of text can be emphasized with a
“bullet” (a heavy dot used for calling attention to a particular section of text). An empty tag called a
“list” tag is used to do this. There are three types of lists:
• enumerated• numerated,
• unordered lists.
Enumerated lists Numerated lists
apples Element 1
bananas Element 2
grapefruit. . . . .
Appearance: Appearance:
Picture4. Enumerated and numerated lists
If you are not satisfied with Arabic numerals, which this tag uses by default, you can use
attribute type. This attribute can have the following values:
• A - upper case letters
• a - lowercase letters
• I - Roman numerals
• i - lowercase Roman numerals
An example of a list with Roman numerals:
Picture5. A list with Roman numerals
8/9/2019 Welcome to HTML - Uvod u HTML
7/12
7
Unordered lists are more complex because in its syntax appear guidelines (subtitles), as well
as descriptions of the settings that describe the subtitle itself.
Guidelines are put between and and descriptions of the guidelines between
and tags, while the entire list is placed between and tags.
An example for an unordered list:
Picture6. An unordered list
Lists with in-lists are more complex, but a better form of visual representation.
An example:
Picture7. Complex lists use
8/9/2019 Welcome to HTML - Uvod u HTML
8/12
8
Text formatting
Unless otherwise emphasized, text within an HTML page is aligned along the left side. If
someone wants any page element to be centered, then code of that element should be placed
between and tags.
If someone does not emphasize particular font to be used, the browser will use the default font
(which is usually Times New Roman). Work with fonts in one HTML page is done by using and tags. These tags can have follow in attributes: face, size and color.
Attribute face defines the font type face that someone wants text to be written with.
For example, the following line of HTML code:
My font is. looks like: My font is.Apart from the way text is written, within the webpage size of the letters can be adjusted, too.
For this purpose size attribute is used within the font tag. HTML knows 7 font sizes that are
valued 1 to 7. Default size is 3.
Picture8. Font size display
The last attribute that you can change is font color. Attribute font color is used for that, but
one must know code of the color in order to change it.
So, if you want to get the following text printed in red:
Enter your text
Use the following code line:
Enter your text.
Special effects are shown in tables below:
Picture9. Special effects tables
8/9/2019 Welcome to HTML - Uvod u HTML
9/12
9
Picture10. An example for different tags use
8/9/2019 Welcome to HTML - Uvod u HTML
10/12
10
Colors in HTML
The HTML pages backgrounds and texts may appear in entire color spectrum. This is
achieved by using attributes within tag. Attributes are inserted in the initial tag and
serve to further describe the tag.
The background color is set by bgcolor attribute that is a part of tag. After each
attribute there is a sign of equality that is used to give a value to certain attribute, and anattribute value is placed between the symbols " and ".
Colors can be defined in two ways: through the predefined English color title (e.g.
"Yellow" for yellow), or through the hexadecimal value in front of which is necessarily a #
symbol (e.g. # ffff00).
In case that these described attributes are omitted during the tag quotation,
navigator assigns white color to the background.
For example, if someone wants to change the background color to yellow, then tag
should look like:
or:
Both examples will give the same result.Apart from the background, the text color can be changed using the text attribute. For
example, if someone wants to add green letters to previously defined page then the following
code should be written:
Also, the initial text color, which is described with the text attribute, can be changed with
COLOR attribute of the tag.
The background, for example, does not need to be in one color. Very often someone will
encounter effective presentation that has different background images. These images are in
electronic form in JPEG or GIF format.
The desired image should be first placed on the certain place within the presentation. The
simplest solution for that image is to be located in the same folder that the presentation can be
found in. The background in the form of an image is defined using the appropriate attributes
in the body tag. Attribute in this case is called background and has nothing in common with
the bgcolor attribute that defines the background color only.
For example, if someone wants to put a background image "picture1.jpg" then the body tag
looks like:
You can see that there are both background and bgcolor tag, and not by accident. Many
people with slower modems turn off automatic graphics load while surfing the internet. This
means that any image background that is defined in the page will not be loaded. The problem
occurs when the text is one of a light color, and the browser does not load the background, but
the background remains white. Pale (or white) letters on a white background will simply not
be seen. Therefore, always assign a color to your background, so your letters remain readableeven in situation previously described.
Links in the HTML document allow one-click navigation, and loading of another page. When
you bring mouse cursor over the link, two things will happen: mouse cursor will turn into a
hand with an outstretched finger (which symbolically indicates that you can click there), and
the link itself will change color, usually red or blue, unless otherwise defined. Besides, color
of links that have already been visited will be different from other links’ color. This way the
user easily identifies which pages he has already visited, and which he hasn’t.
8/9/2019 Welcome to HTML - Uvod u HTML
11/12
11
The colors of links can be defined by three attributes: link , vlink and alink . Link defines the
initial link color, vlink defines color of the link that has been visited, and alink defines the
color of an active link within the page.
For example, defining the link color blue, visited links purple, and active links red is done like
this:
Some of the color codes are:
white FFFFFF orange FFA500 burly wood DEB887
black 000000 yellow FFFF00 spring green 00FF7F
red FF0000 lime 00FF00 aqua 00FFFF
light steel blue B0C4DE slate blue 7B68EE blue 0000FF
orchid DA70D6 purple 800080 thistle D8BFD8
Images
Image tag is tag. If you want to insert an image that is in the same folder as your
HTML document, type: .
Some of the tag attributes are:
• An ALIGN attribute, with values: TOP, MIDDLE, BOTTOM (for vertical alignment)
or LEFT, CENTER, RIGHT (for horizontal alignment);
• Size attributes WIDTH and HEIGHT;
• An attribute that describes the width of the picture frame - BORDER…
An example of using this tag:
Picture11. Inserting an image
8/9/2019 Welcome to HTML - Uvod u HTML
12/12
12
Links
Links are used to connect multiple HTML pages. They are used to move you to a part of the
same document (page) or to any other document (page) with a click of a mouse.
The first type of links would be links through which you can access any other part of the same
page. An example is link that is placed at the bottom of a page and it returns the user back to
the top of the page.First, the original text contains tag (the initial node):
text that you can "click" on
Then the incoming text contains tag (the incoming node):
incoming text .
If you want to link your document to another page then the link tag looks like:
text you click on to open a new page
It is possible that the picture is a link, and then tag has the following form:
So, when linking, it is very important that you create several pages, note their locations and
then link them. That is how internet sites work, as well.
In the end, once you finish writing your code in text editor, save it as a “name.html” file, a
html extension file.
This has been a brief introduction to HTML. We hope that you understand basics of
HTML showed in this tutorial, and we hope that you'll continue to spread gained
knowledge by further researching of this area.