Welcome to HTML - Uvod u HTML

8/9/2019 Welcome to HTML - Uvod u HTML

1/12

1


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


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:


4/12

Headings

Headings

form:


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


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


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


9/12

9

Picture10. An example for different tags use


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.


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


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.

Date post:	01-Jun-2018
Category:	Documents
Upload:	mjovica
View:	229 times
Download:	0 times

Welcome to HTML - Uvod u HTML

Documents