Welcome To HTML - Uvod U HTML

1
WEL
W LCO
OME
E TO
O HTM
H ML
What iss HTML?
HTML (H
HyperText Maarkup Languaage) is a very simple language devised to allow webssite creation.
This is a standard
s
langu
uage for Interrnet documennts.
With the development
d
of the Interneet came the em
mergence of new
n type of ddocument - thee hypertext.
This is a teext that contaains links to other
o
documennts or to yourrself. Specificcally, hypertexxt is a set of
pages in thhe form of filles, interconneected with linnks, which aree inserted intoo the page.
Workin
ng with HT
TML
Generating HTML pag
ge you need a simple text eeditor, such ass Notepad or W
WordPad (yo
ou can find
ograms Acccessories. Th
hat is shown iin Picture1).
them in thhe Start menu under All Pro
Pictuure1. Findingg of Notepad//WordPad
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>, </HTML> - HTML document brackets;

<HEAD>, </HEAD> - the header brackets;
<TITLE>, </TITLE> - HTML document name brackets
<BODY>, </BODY> - marked documents text brackets.
HTML part
The entire HTML document is located between <HTML> and </ HTML> tags, where <HTML> is
used at the beginning and </ HTML> 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
<head> and </ head> tags, and the body of an HTML document by <body> and </ body> 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 <body> and </body> tags is the body of the document and it will be
displayed in the browser window.
Example1. General page layout
<html>
<head>
<title>
</title>
</head>
<body>
Everything that should be displayed is here to be written.
</body>
</html>
Furthermore, between <BODY> and </BODY> 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: <! ------ Your comment ------>

Headingss
Headings are coded by numbers from
m 1 to 6, accoording to the relative depthh. Head tag haas the generall
m 1 to 6, and each title is smaller
s
than thhe
form: <Hnn> level n heaading </ Hn>, where n takees values from
previous one.
o
For examp
ple:
Picture2. T
Title appearan
nce
Division
A divisionn is describedd with <DIV>
> and </DIV> tags. This tag
gs can have aalign attribute ALIGN withh
CENTER,, RIGHT or LEFT
L
values, where the vaalue is enteredd in the first taag:
<DIV AL
LIGN=LEFT>
> ... </DIV> to
t align to thee left edge,
<DIV ALIIGN= CENTE
ER> ... </ DIV> for centerring and
<DIV ALIIGN= RIGHT
T> ... </ DIV>
> to align to tthe right edgee.
ph
Paragrap
A paragraaph is marked with <P> and
d </P> tags. T
This tag can have
h
align attrribute ALIGN
N that takes
same valu
ues as in <DIV
V> tag.
New line
New line (break)
(
is marked with <B
BR> tag. This is a simple taag, which meaans there is noo end tag
</BR>.

Rule tag
It is marked with <HR> label with an optional NOSHADE attribute. This is a simple tag as well (no
end tag </HR>), and it has SIZE attribute that describes line thickness.
For example: <HR SIZE=4 WIDTH="50 %">. For a simple line you can use just <HR> tag.
Picture3. An example of basic tags use

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
<UL>
<LI>apples
<LI> bananas
<LI> grapefruit.
</UL>
Appearance:
<OL>
<LI>Element 1
<LI>Element 2
....
</OL>
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
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 <dt> and </ dt> and descriptions of the guidelines between <dd>
and
</ dd> tags, while the entire list is placed between<dl> and </ dl> 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
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 <center> and </ center> 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
<font> and </ font> 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:
<font face="Comic Sans MS"> My font is. </ font> 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:
<font color="#ff0000"> Enter your text. </font>
Special effects are shown in tables below:
Picture9. Special effects tables
Picture10. An example for different tags use
Colors in HTML
The HTML pages backgrounds and texts may appear in entire color spectrum. This is
achieved by using attributes within <body> 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 <body> tag. After each
attribute there is a sign of equality that is used to give a value to certain attribute, and an
attribute 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 <BODY> tag quotation,
navigator assigns white color to the background.
For example, if someone wants to change the background color to yellow, then <body> tag
should look like:
<body bgcolor="#ffff00"> or:
<body bgcolor="yellow">
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:
<body bgcolor="#ffff00" text="#008000">
Also, the initial text color, which is described with the text attribute, can be changed with
COLOR attribute of the <FONT> 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:
<body background="pozadina1.jpg" bgcolor="#000000">
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 readable
even 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 hasnt.
10
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:
<body link="#0000ff" vlink="#ee82ee" alink="#ff0000">
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 <img> tag. If you want to insert an image that is in the same folder as your
HTML document, type: <img src="name. extension">.
Some of the <img> 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

11
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):
<A HREF="#address"> text that you can "click" on</ A>
Then the incoming text contains tag (the incoming node):
<A NAME= "address"> incoming text </ A>.
If you want to link your document to another page then the link tag looks like:
<a href="address of a new page you want to go to"> text you click on to open a new page
</ a>
It is possible that the picture is a link, and then <a> tag has the following form:
<a href="Example.html"><img src="picture.gif"></ a>
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.
12

Welcome To HTML - Uvod U HTML

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Welcome To HTML - Uvod U HTML

Hochgeladen von

Copyright:

Verfügbare Formate

1

Pictuure1. Findingg of Notepad//WordPad

Creating one webpage

HTML webpage structure

<HTML>, </HTML> - HTML document brackets;

Picture4. Enumerated and numerated lists

Picture5. A list with Roman numerals

Picture6. An unordered list

Picture7. Complex lists use

Picture8. Font size display

Picture9. Special effects tables

Picture10. An example for different tags use

burly wood DEB887

spring green 00FF7F

light steel blue B0C4DE

slate blue 7B68EE

Picture11. Inserting an image

Das könnte Ihnen auch gefallen