HTML+Leksionet+1 21

7/31/2019 HTML+Leksionet+1 21

1/206

1

HTML


2/206

2

HTML-I eshte gjuha per pershkrimin e webfaqeve.HTML nenkupton Hyper Text Markup Language.

HTML-I nuk eshte gjuhe programuese, por eshtenje Gjuhe Markup.

Gjuha Markup eshte nje grup i Markup Tags.

Markup Tags pershkruajn se si teksti duhetparaqitur.

Cfar eshte HTML-i


3/206

3

HTML markup tags zakonisht thiren HTML tags

HTML tags jane fjali te rethuara me simbolet me emadhe dhe me e vogel, shembulli -

HTML tags zakonisht shkojne ne cifte, shembulli - dhe

Tag-u I pare thiret Start Tag, dhe Tag-u i dyt thiret

End TagShenim: Tag-at Start dhe End thiren poashtuedhe Tag-sat e hapjes dhe mbylljes

HTML MARKUP TAGS


4/206

4

-Nje Fajll HTML eshte nje fajll teksti me Tag-saHTML

-Nje Fajll HTML duhet te perfundoj me .htm ose

.html-Nje Fajll HTML mund te krijohet me perdorimin enje editori te thjesht Teksti si psh Notepad

-Nje Fajll HTML shpesh quhet edhe HTMLdokument ose Web Faqe

Cfar eshte nje HTML File


5/206

5

Kur e ruani nje fajll HTML, ju mund ta ruanisi .htm ose .html zgjatim. Shpesh mund teshihni neper shembuj .htm jo pse eshte

korekte apo gabim por eshte mbetur shprehie disave nga koherat e kaluare kur shumicae programeve lejonin zgjatimi e vetem 3

shkronjave.Me softwer-at e rinje eshte krejtesisht esigurt dhe ne regull te perdoresh .html

Zgjatimi HTM ose HTML


6/206

6

HTML TAGS-at bazike


7/206

7

Permbajtja e ketyre elementeve ne Body(Trup) shfaqet ne Browserin tuaj.

Shembujt


8/206


9/206

9

Kjo eshte nje paragraf



Elementet e paragrafit definohen me Tag-

un p.

HTML Paragrafet


10/206

10




Elementet e paragrafit definohen me Tag-un p

Dalja


11/206

11

Headings definohen prej dei tek tags-at. Definon Headings-in me temadh. Definon headings-in me te vogel.

Kjo eshte nje heading



HTML HEADINGS (Krye texti)


12/206

12

Rezultati:

Kjo eshte nje headingKjo eshte nje headingKjo eshte nje heading

HTML automatikisht shfaq nje resht te zbrazetpara dhe pas Headings-ave


13/206

13

Shembulli

Kjo eshte nje Heading 1 Kjo eshte nje Heading 2 Kjo eshte nje Heading 3 Kjo eshte nje Heading 4

Kjo eshte nje Heading 5 Kjo eshte nje Heading 6

Perdorni Heading Tag-sat vetem per kryetituj.Mos i perdorni per diqka si text te madh ose Bold

Perdorni per Tag-sat tjer per ate.


14/206

14

Kjo eshte nje Heading 1 Kjo eshte nje Heading 2 Kjo eshte nje Heading 3

Kjo eshte nje Heading 4 Kjo eshte nje Heading 5 Kjo eshte nje Heading 6

Perdorni Heading Tag-sat vetem per kryetituj.

Mos i perdorni per diqka si text te madh ose BoldPerdorni per Tag-sat tjer per ate.

OUTPUTI


15/206

15

HTML PARAGRAFET

Paragrafet definohen me

tag.


Kjo eshte edhe nje paragraf

HTML automatically displays an empty line

before and after a paragraph.


16/206

16

Shembulli

Kjo eshte nje paragraf.



Elementet e paragrafit nje te definuara me p

Tag.


17/206

17

Dalja




Elementet e paragrafit nje te definuara me pTag.


18/206

18

Perdorni
tag-un nese deshironi te thyenireshtin (nje resht te ri) pa filluar nje paragrafte ri :

Kjo eshte nje
para
Grafthyerjen e reshtit

tag-u nenkupton nje tag te zbrazet. Nukka nje tag perfundues si .

HTML Thyerja e Reshtit


19/206

19

Komentet mund te futen ne kodin HTML per te

krijuar nje kontekst me te lexueshem dhekuptueshem. Komentet injorohen nga Browseri dhenuk paraqiten ne te.

Komentet shkruhen keshtu:

Shenim: Nje pike quditese ndodhet pas hapjes sesimboleve, por jo edhe para mbylljes se simboleveose Tag-ut.

Komentet ne HTML


20/206

20

Ky eshte nje paragraf i regullt

Shembulli


21/206

21

Ky eshte nje paragraf i regullt

Dalja


22/206

22

Une qendroj mbi Uje.

Ti qendron mbi Uje.Ne qendrojme mbi Uje.

Mos qendroni asnjeri Mbi Uje.

Shiqoni se si Browser-i juaj e injoron renditjen tuaj !

Shembulli


23/206

23

Une qendroj mbi Uje. Ti qendron mbi Uje. Neqendrojme mbi Uje. Mos qendroni asnjeri MbiUje.

Shiqoni se si Browser-i juaj e injoron renditjentuaj !

OUTPUT


24/206

Finito !!!!!!


25/206

25

Have you ever seen a Web page andwondered "Hey! How did they do that?

To find out, click the VIEW option in yourbrowser's toolbar and select SOURCE orPAGE SOURCE. This will open a window that

shows you the HTML code of the page.

HOW TO VIEW HTML SOURCE


26/206

26

This example demonstrates how to insert a horizontal rule.

The hr tag defines a horizontal rule:

This is a paragraph

This is a paragraph

This is a paragraph

HORIZONTAL RULE


27/206

27

The hr tag defines a horizontal rule:

This is a paragraph

This is a paragraph

This is a paragraph

OUTPUT

R i i


28/206

28

Tag Description

Defines an HTML document

Defines the document's body

to Defines header 1 to header 6

Defines a paragraph

Inserts a single linebreak

Defines a horizontal rule

Defines a comment

Revision


29/206

29

HTML ELEMENT

An HTML Element

Start Element ContentEnd

This is a

paragraph


30/206

30

WHY LOWERCASE TAGS?

HTML tags are not case sensitive:

means the same as

.

Plenty of web sites use uppercase HTML tags intheir pages.

Recommends lowercase in HTML 4, anddemands lowercase tags in newer versions of(X)HTML.


31/206

31

Attributes provide additional informationabout HTML elements.

HTML ATTRIBUTES


32/206

32

HTML tags can have attributes. Attributesprovide additional information about the HTMLelement.

Attributes always come in name/value pairslike this: name="value.

Attributes are always specified in the start tagof an HTML element.

HTML ATTRIBUTES


33/206

33

defines the body of an HTMLdocument.

has additionalinformation about the background color.

ATTRIBUTES EXAMPLE-1

CENTER ALIGNED HEADING


34/206

34

This is heading 1

The heading above is aligned to the center of this page.The heading above is aligned to the center of this page. Theheading above is aligned to the center of this page.

CENTER ALIGNED HEADING


35/206

35

OUTPUT

This is heading 1

The heading above is aligned to the

center of this page. The heading aboveis aligned to the center of this page. Theheading above is aligned to the center of

this page.


36/206

36

ATTRIBUTES EXAMPLE- 2

defines the body of an HTML document.

has additional informationabout the background color.


37/206

37

EXAMPLE: BACKGROUND COLOR

Look: Colored Background!

OUTPUT


38/206

38

OUTPUT

LOOK: COLORED BACKGROUND!

R B S


39/206

39

defines an HTML table.

has additional informationabout the border around the table.

ATTRIBUTES EXAMPLE- 3

HTML TEXT FORMATTING


40/206

40

This text is bold

This text is big

This text is italic

This is computer output

This is and superscript

subscript

HTML TEXT FORMATTING

EXAMPLE


41/206

41

This text is bold

This text is big

This text is italic

This is computer output

This is subscript and

superscript

EXAMPLE


42/206

42

HTML uses tags like and forformatting output, like bold or italictext.

These HTML tags are called formatting tags.

HTML FORMATTING TAGS


43/206

43

This text is bold

This text is strong

This text is big

This text is emphasized

This text is italic

This text is small

This is subscript and superscript

EXAMPLE - TEXT FORMATTING

OUTPUT


44/206

44

OUTPUT

This text is bold

This text is strong

This text is big

This text is emphasized

This text is italic

This text is small

This is and superscriptsubscript


45/206

45

EXAMPLE PREFORMATTED TEXT

This ispreformatted text.It preserves both spacesand line breaks.

The pre tag is good for displaying computer code:

for i = 1 to 10

print i

next i

OUTPUT


46/206

46

OUTPUT

This is preformatted text. It preserves bothspaces and line breaks.

The pre tag is good for displaying computer

code:

for i = 1 to 10print i

next i

ADDRESS


47/206

47

Donald Duck
BOX 555

Disneyland

USA

ADDRESS

OUTPUT


48/206

48

OUTPUT

Donald DuckBOX 555DisneylandUSA

ABBREVIATIONS AND ACRONYMS


49/206

49

UN

WWW

The title attribute is used to show the spelled-out version whenholding the mouse pointer over the acronym or abbreviation.

This only works for the acronym element in IE 5.

This works for both the abbr and acronym element in Netscape6.2.

ABBREVIATIONS AND ACRONYMS

OUTPUT


50/206

50

UN

WWW

The title attribute is used to show the spelled-outversion when holding the mouse pointer over theacronym or abbreviation.

This only works for the acronym element in IE 5.

This works for both the abbr and acronym elementin Netscape 6.2.

OUTPUT

EXAMPLE QUOTATIONS


51/206

51

Here comes a long quotation:

This is a long quotation. This is a long quotation. This is a long quotation. This is a longquotation. This is a long quotation.

Here comes a short quotation:

This is a short quotation

With the block quote element, the browser inserts line breaks and margins, but the q elementdoes not render as anything special.

EXAMPLE QUOTATIONS

OUTPUT


52/206

52

Here comes a long quotation:

This is a long quotation. This is a long quotation. This is along quotation. This is a long quotation. This is a longquotation.

Here comes a short quotation: This is a shortquotation

With the block quote element, the browser inserts linebreaks and margins, but the q element does notrender as anything special.

OUTPUT

DELETED AND INSERTED TEXT


53/206

53

a dozen is

twentytwelve

pieces

Most browsers will overstrike deleted text and underline inserted text.

Some older browsers will display deleted or inserted text as plain text.

DELETED AND INSERTED TEXT

OUTPUT


54/206

54

a dozen is twenty twelve pieces

Most browsers will overstrike deleted

text and underline inserted text.

Some older browsers will display deleted

or inserted text as plain text.

OUTPUT

Revision


55/206

55

Revision

Tag Description

Defines bold text

Defines big text

Defines emphasized text

Defines italic text

Defines small text

Defines strong text
http://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asp


56/206

56

Tag Description

Defines subscripted text Defines superscripted text

Defines inserted text

Defines deleted text

Deprecated. Use instead

Deprecated. Use instead

Deprecated. Use styles instead

NON BREAKING SPACE
http://www.w3schools.com/tags/tag_sup.asphttp://www.w3schools.com/tags/tag_sup.asphttp://www.w3schools.com/tags/tag_ins.asphttp://www.w3schools.com/tags/tag_del.asphttp://www.w3schools.com/tags/tag_strike.asphttp://www.w3schools.com/tags/tag_strike.asphttp://www.w3schools.com/tags/tag_u.asphttp://www.w3schools.com/tags/tag_u.asphttp://www.w3schools.com/tags/tag_u.asphttp://www.w3schools.com/tags/tag_strike.asphttp://www.w3schools.com/tags/tag_strike.asphttp://www.w3schools.com/tags/tag_strike.asphttp://www.w3schools.com/tags/tag_strike.asphttp://www.w3schools.com/tags/tag_del.asphttp://www.w3schools.com/tags/tag_del.asphttp://www.w3schools.com/tags/tag_ins.asphttp://www.w3schools.com/tags/tag_ins.asphttp://www.w3schools.com/tags/tag_sup.asphttp://www.w3schools.com/tags/tag_sup.asphttp://www.w3schools.com/tags/tag_sup.asphttp://www.w3schools.com/tags/tag_sup.asp


57/206

57

NON-BREAKING SPACE

The most common character entity in HTML is thenon-breaking space.

Normally HTML will truncate spaces in your text. Ifyou write 10 spaces in your text HTML will remove9 of them.

To add lots of spaces to your text, use the character entity.


58/206


59/206

59

Result Description Entity Name Entity Number

pound

yen &yen

euro

section

copyright

registeredtrademark


60/206

EXAMPLES


61/206

61

EXAMPLES

Create hyperlinks

This example demonstrates how to create links inan HTML document.

An image as a link

This example demonstrates how to use an image asa link.

EXAMPLE CREATE HYPERLINKS
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_linkshttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_imglinkhttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_imglinkhttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_links


62/206

62

EXAMPLE - CREATE HYPERLINKS

This text is a link to a page on

this Web site.

This text is a link to a page on

the World Wide Web.

OUTPUT


63/206

63

OUTPUT

This text is a link to a page on this Web site.

This text is a link to a page on the World Wide Web.

AN IMAGE AS A LINK
http://www.w3schools.com/html/lastpage.htmhttp://www.microsoft.com/http://www.microsoft.com/http://www.w3schools.com/html/lastpage.htm


64/206

64

You can also use an image as a link:

AN IMAGE AS A LINK

OUTPUT


65/206

65

OUTPUT

You can also use an image as a link:

THE ANCHOR TAG AND THE href ATTRIBUTE


66/206

66

HTML uses the (anchor) tag to create

a link to another document.

An anchor can point to any resource on the

Web: an HTML page, an image, a sound

file, a movie, etc.

The syntax of creating an anchor:

THE ANCHOR TAG AND THE HrefATTRIBUTE


67/206

67

Text to be displayed

The tag is used to create an anchor to

link from, the href attribute is used toaddress the document to link to, and the

words between the open and close of the

anchor tag will be displayed as a hyperlink.

ATTRIBUTE

THE TARGET ATTRIBUTE


68/206

68

THE TARGET ATTRIBUTE

With the target attribute, you can define

where the linked document will be opened.

The line below will open the document in a

new browser window:

Visit St.Aloysius College.

The Anchor Tag and the NameAtt ib t


69/206

69

Attribute

The name attribute is used to create a named

anchor. When using named anchors we can create

links that can jump directly into a specific section on a

page, instead of letting the user scroll around to find

what he/she is looking for.

Below is the syntax of a named anchor:

Text to be displayed

OPEN A LINK IN A NEW BROWSER WINDOW


70/206

70

Last Page

If you set the target attribute of a link to "_blank",the link will open in a new window.

OUTPUT


71/206

71

OUTPUT

Last Page

If you set the target attribute of a link to

"_blank", the link will open in a new window.

LINK TO A LOCATION ON THE SAME PAGE
http://www.w3schools.com/html/lastpage.htmhttp://www.w3schools.com/html/lastpage.htmhttp://www.w3schools.com/html/lastpage.htm


72/206

72

O OC O O S G

See also Chapter 4.

Chapter 1

This chapter explains ba bla bla

Chapter 2


Chapter 3


OUTPUT


73/206

73

See also Chapter 4.

Chapter 1


Chapter 2


Chapter 3


CREATE A MAILTO LINK
http://www.w3schools.com/tags/tag_frameset.asphttp://www.w3schools.com/tags/tag_frameset.asp


74/206

74

CREATE A MAILTO LINK

This is a mail link:

Send Mail

Note: Spaces between words should be replaced by %20 to

ensure that the browser will display your text properly.

OUTPUT


75/206

75

OUTPUT

This is a mail link: Send Mail

Note: Spaces between words should be

replaced by %20 to ensure that the browserwill display your text properly.

HTML FRAMES
mailto:[email protected]?subject=Hello%20againmailto:[email protected]?subject=Hello%20again


76/206

76

HTML FRAMES

With frames, you can display more than one

Web page in the same browser window.


77/206

OUTPUT


78/206

78

OUTPUT

HORIZONTAL FRAMESET


79/206

79

OUTPUT


80/206

80

OUTPUT

FRAMES


81/206

81

With frames, you can display more than oneHTML document in the same browserwindow. Each HTML document is called aframe, and each frame is independent of the

others.

The disadvantages of using frames are:

The web developer must keep track of moreHTML documentsIt is difficult to print the entire page

THE FRAMESET TAG


82/206

82

The tag defines how to divide

the window into frames.

Each frameset defines a set of rows or

Columns.

The values of the rows/columns indicate the

amount of screen area each row/column will

occupy.

THE FRAME TAG


83/206

83

The tag defines what HTML document to put into

each frame.

In the example below we have a frameset with twocolumns.

The first column is set to 25% of the width of the browserwindow. The second column is set to 75% of the width of thebrowser window. The HTML document "frame_a.htm" is putinto the first column, and the HTML document "frame_b.htm"is put into the second column:


84/206

BASIC NOTES - USEFUL TIPS


85/206

85

If a frame has visible borders, the user can resizeit by dragging the border. To prevent a user fromdoing this, you can add noresize="noresize" to the tag.

Add the tag for browsers that do not

support frames.

Important: You cannot use the tagstogether with the tags! However, if

you add a tag containing some text for browsersthat do not support frames, you will have to enclose the textin tags! See how it is done in the firstexample below.

HOW TO USE THE TAG


86/206

86

TAG

Your browser does not handle frames!


87/206


88/206

OUTPUT


89/206

89

OU U

FRAMESET WITHNORESIZE=NORESIZE


90/206

90

OUTPUT


91/206

91

NAVIGATION FRAME


92/206

92

OUTPUT


93/206

93

JUMP TO A SPECIFIED SECTIONWITHIN A FRAME


94/206

94

WITHIN A FRAME

OUTPUT


95/206

95


96/206

OUTPUT


97/206

97

FRAME TAGS


98/206

98

Tag Description

Defines a set of frames

) Defines a sub window (aframe

Defines a noframesection for browsers that

do not handle frames

HTML TABLES
http://www.w3schools.com/tags/tag_frameset.asphttp://www.w3schools.com/tags/tag_frame.asphttp://www.w3schools.com/tags/tag_noframes.asphttp://www.w3schools.com/tags/tag_noframes.asphttp://www.w3schools.com/tags/tag_noframes.asphttp://www.w3schools.com/tags/tag_frame.asphttp://www.w3schools.com/tags/tag_frameset.asphttp://www.w3schools.com/tags/tag_frameset.asp


99/206

99

With HTML you can create tables.

Examples

Tables

This example demonstrates how to create tables in an HTML document.

Table borders

This example demonstrates different table borders. (You can find more

examples at the bottom of this page)

EXAMPLE: TABLES
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tableshttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_tableshttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables


100/206

100

Each table starts with a table tag.Each table row starts with a tr tag.Each table data starts with a td tag.

One column:

100

One row and three columns:

100200

EXAMPLE:TABLES


101/206

101

300

Two rows and three columns:100200

300

400500600


102/206

TABLE BORDERS


103/206

103

With a normal border:

First

Row

Second

Row

With a thick border:

TABLE BORDERS


104/206

104

FirstRow

Second

Row

With a very thick border:FirstRow

SecondRow

OUTPUT


105/206

105

TABLES


106/206

106

Tables are defined with the tag. A

table is divided into rows (with the tag),

and each row is divided into data cells (with

the tag). The letters td stands for "tabledata," which is the content of a data cell. A

data cell can contain text, images, lists,

paragraphs, forms, horizontal rules, tables,etc.

TABLES


107/206

107

row 1, cell 1

row 1, cell 2

row 2, cell 1

row 2, cell 2

TABLES


108/206

108

How it looks in a browser:

TABLES AND THE BORDER ATTRIBUTE


109/206

109

If you do not specify a border attribute the table will be

displayed without any borders. Sometimes this can beuseful, but most of the time, you want the borders to show.To display a table with borders, you will have to use theborder attribute:

Row 1, cell 1

Row 1, cell 2

HEADINGS IN A TABLE


110/206

110

Headings in a table are defined with the

tag.HeadingAnother Heading

row 1, cell 1row 1, cell 2

row 2, cell 1row 2, cell 2

HEADINGS IN A TABLE


111/206

111


TABLE WITH NO BORDER


112/206

112

This example demonstrates a table with no borders.

This table has no borders:

100200

300

400500

600

TABLE WITH NO BORDER


113/206

113

And this table has no borders:

100

200

300

400

500

600

OUTPUT


114/206

114

To do.


115/206

115

TABLE WITH CAPTION


116/206

116

This example demonstrates a table with a caption.

This table has a caption,and a thick border:

My Caption100

200300400


117/206

117

TABLE CELLS THAT SPAN MORE THANONE ROW/COLUMN


118/206

118

This example demonstrates how to define table cells that span more

than one row or one column.

Cell that spans two columns:

Name

TelephoneBill Gates555 77 854555 77 855

`

TABLE CELLS THAT SPAN MORETHAN ONE ROW/COLUMN


119/206

119

Cell that spans two rows:

First Name:

Bill Gates

Telephone:

555 77 854

555 77 855

OUTPUT


120/206

120

CELL PADDING


121/206

121

This example demonstrates how to use cell padding to create more

white space between the cell content and its borders.

Without cellpadding:

First

Row

SecondRow

EXAMPLE: CELL PADDING


122/206

122

With cellpadding:

First

Row

SecondRow

OUTPUT


123/206

123

EXAMPLE: CELL SPACING


124/206

124

This example demonstrates how to use cellspacing to increase the

distance between the cells.

Without cellspacing:

First

Row

SecondRow

EXAMPLE: CELL SPACING


125/206

125

With cellspacing:

First

Row

SecondRow

OUTPUT


126/206

126

ADD A BACKGROUND COLOR OR ABACKGROUND IMAGE TO A TABLE


127/206

127

This example demonstrates how to add a background to a table.

A background color:

First

Row

SecondRow

ADD A BACKGROUND COLOR OR ABACKGROUND IMAGE TO A TABLE


128/206

128

A background image:

First

Row

SecondRow

OUTPUT


129/206

129

ADD A BACKGROUND COLOR OR ABACKGROUND IMAGE TO A TABLE CELL


130/206

130

This example demonstrates how to add a background to one or more table cells.

Cell backgrounds:First

RowSecondRow

OUTPUT


131/206

131

ALIGN THE CONTENT IN A TABLE CELL


132/206

132

This example demonstrates how to use the "align" attribute to align the

content of cells, to create a "nice-looking" table.

Money spent on....January

February

Clothes$241.10

$50.20

ALIGN THE CONTENT IN A TABLE CELL


133/206

133

Make-Up$30.00$44.45

Food$730.40

$650.00Sum$1001.50$744.65

To Do..


134/206

134

HTML LIST


135/206

135

HTML supports

An unordered list

An ordered listAn defination list

AN UNORDERED LIST
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists4http://www.w3schools.com/html/tryit.asp?filename=tryhtml_listshttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_listshttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_listshttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_listshttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_listshttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_listshttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists4http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists4


136/206

136

An Unordered List:

CoffeeTeaMilk

OUTPUT


137/206

137

An Unordered List:

Coffee

Tea

Milk

AN ORDERED LIST


138/206

138

An Ordered List:CoffeeTeaMilk

OUTPUT


139/206

139

An Ordered List:

1.Coffee

2.Tea

3. Milk

DEFINITION LISTS


140/206

140

A definition list is not a list of items. This is a list of terms

and explanation of the terms.A definition list starts with the tag. Each definition-list

term starts with the tag.

Each definition-list definition starts with the tag.

Coffee

Black hot drink

MilkWhite cold drink

DEFINITION LISTS


141/206

141

Here is how it looks in a browser:

Coffee

Black hot drink

Milk

White cold drink

DIFFERENT TYPES OF ORDERED LISTS


142/206

142

This example demonstrates different types of ordered lists.

Numbered list:

Apples

Bananas

LemonsOranges

OUTPUT


143/206

143

Numbered list:

1. Apples

2.Bananas

3.Lemons

4.Oranges

DIFFERENT TYPES OF ORDEREDLISTS


144/206

144

Letters list:

Apples

BananasLemons

Oranges

OUTPUT


145/206

145

Letters list:

A. Apples

B. BananasC. Lemons

D. Oranges



146/206

146

Lowercase letters list:

Apples

BananasLemons

Oranges

OUTPUT


147/206

147

Lowercase letters list:

a. Apples

b. Bananasc. Lemons

c. Oranges



148/206

148

Roman numbers list:

Apples

BananasLemons

Oranges

OUTPUT


149/206

149

Roman numbers list:

I. Apples

II. BananasIII. Lemons

IV. Oranges



150/206

150

Lowercase Roman numbers list:

Apples

Bananas

LemonsOranges


151/206

DIFFERENT TYPES OF UNORDEREDLISTS


152/206

152

This example demonstrates different types of unordered lists.

OUTPUT


153/206

153


154/206


155/206

DIFFERENT TYPES OF UNORDEREDLISTS


156/206

156

OUTPUT


157/206

157

To do..


158/206

158

To do


159/206

159

Revision


160/206

160

Tag Description

Defines an ordered list

Defines an unordered list

Defines a list item

Defines a definition list

LIST TAGS
http://www.w3schools.com/tags/tag_ol.asphttp://www.w3schools.com/tags/tag_ul.asphttp://www.w3schools.com/tags/tag_li.asphttp://www.w3schools.com/tags/tag_dl.asphttp://www.w3schools.com/tags/tag_dl.asphttp://www.w3schools.com/tags/tag_dl.asphttp://www.w3schools.com/tags/tag_li.asphttp://www.w3schools.com/tags/tag_li.asphttp://www.w3schools.com/tags/tag_ul.asphttp://www.w3schools.com/tags/tag_ul.asphttp://www.w3schools.com/tags/tag_ol.asphttp://www.w3schools.com/tags/tag_ol.asp


161/206

161

Tag Description Defines a definition term

Defines a definition description

HTML FORMS AND INPUT

HTML F d t l t diff t ki d f
http://www.w3schools.com/tags/tag_dt.asphttp://www.w3schools.com/tags/tag_dd.asphttp://www.w3schools.com/tags/tag_dd.asphttp://www.w3schools.com/tags/tag_dd.asphttp://www.w3schools.com/tags/tag_dt.asphttp://www.w3schools.com/tags/tag_dt.asp


162/206

162

HTML Forms are used to select different kinds of

user input.Examples

Text fieldsThis example demonstrates how to create text

fields on an HTML page. A user can write text in atext field.

Password fieldsThis example demonstrates how to create apassword field on an HTML page.

EXAMPLE: TEXT FIELDS
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_inputhttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_inputhttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_input


163/206

163

OUTPUT


164/206

164

PASSWORD FIELDS


165/206

165

OUTPUT


166/206

166

FORMS

A form is an area that can contain form elements


167/206

167

A form is an area that can contain form elements.

Form elements are elements that allow the user to enter

information (like text fields, textarea fields, drop-down menus,

radio buttons, checkboxes, etc.) in a form.

A form is defined with the tag.

INPUT


168/206

168

The most used form tag is the tag.

The type of input is specified with the type

attribute. The most commonly used input

types are explained below.

TEXT FIELDS

Text fields are used when you want the user to


169/206

169

Text fields are used when you want the user to

type letters, numbers, etc. in a form.

First name:

Last name:

TEXT FIELDS



170/206

170


First name:

Last name:

Note that the form itself is not visible. Also

note that in most browsers, the width of thetext field is 20 characters by default.

RADIO BUTTONS


171/206

171

Radio Buttons are used when you want the user to select oneof a limited number of choices.

Male

Female

RADIO BUTTONS


172/206

172


Male

Female

Note that only one option can be chosen.

CHECKBOXES

Checkboxes are used when you want the user to select one


173/206

173

Checkboxes are used when you want the user to select oneor more options of a limited number of choices.

I have a bike:

I have a car:

I have an airplane:

CHECKBOXES


174/206

174

THE FORMS ACTION ATTRIBUT AND

THE SUBMIT BUTTON

When the user clicks on the "Submit" button, the content of


175/206

175

,

the form is sent to the server. The form's action attribute

defines the name of the file to send the content to. The file

defined in the action attribute usually does something with

the received input.

Username:

THE FORMS ACTION ATTRIBUT AND

THE SUBMIT BUTTON



176/206

176

Username:

If you type some characters in the text fieldabove, and click the "Submit" button, the

browser will send your input to a page called

"html_form_submit.asp". The page will showyou the received input.

SIMPLE DROP DOWN BOX

This example demonstrates how to create a simple drop-down box on


177/206

177

an HTML page. A drop-down box is a selectable list.

OUTPUT


178/206

178

ANOTHER DROP DOWN BOX

This example demonstrates how to create a simple drop-


179/206

179

p p p

down box with a pre-selected value.

OUTPUT


180/206

180

EXAMPLE: TEXTAREA

This example demonstrates how to create a text-area (a multi-line text input


181/206

181

control). A user can write text in the text-area. In a text-area you can write an

unlimited number of characters.


182/206

CREAT A BUTTON

This example demonstrates how to create a button. On the


183/206

183

button you can define your own text.

OUTPUT


184/206

184

EXAMPLE: INSERT IMAGES


185/206

185

OUTPUT


186/206

186

THE ALT ATTRIBUTE

The alt attribute is used to define an "alternate text" for an


187/206

187

The alt attribute is used to define an alternate text for an

image. The value of the alt attribute is an author-definedtext:

The "alt" attribute tells the reader what he or she is missingon a page if the browser can't load images. The browserwill then display the alternate text instead of the image. It isa good practice to include the "alt" attribute for each image

on a page, to improve the display and usefulness of yourdocument for people who have text-only browsers.

BACKGROUND MAGE

This example demonstrates how to add a background image


188/206

188

p g g

to an HTML page.

OUTPUT


189/206

189

ALIGNING IMAGES

This example demonstrates how to align an image within the text.


190/206

190

OUTPUT


191/206

191

ALIGNING IMAGES


192/206

192

OUTPUT


193/206

193

LET THE IMAGE FLOAT

This example demonstrates how to let an image float to the left or right of a

h


194/206

194

paragraph.

OUTPUT


195/206

195


196/206

OUTPUT


197/206

197

MAKE A HYPERLINK OF AN IMAGE

This example demonstrates how to use an image as a link.


198/206

198

OUTPUT


199/206

199

HTML META
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_metahttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_meta


200/206

200

Document descriptionInformation inside a meta element describes the

document.

Document keywords

Information inside a meta element describes the

document's keywords.

Redirect a user

This example demonstrates how to redirect a userif your site address has changed.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_metahttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_keywordshttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_redirecthttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_redirecthttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_redirecthttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_keywordshttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_keywordshttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_metahttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_meta


201/206

OUTPUT


202/206

202

DOCUMENT KEYWORDS


203/206

203

OUTPUT


204/206

204

KEYWORDS FOR SEARCH ENGINES

Some search engines on the WWW will use the name and

t t tt ib t f th t t t i d


205/206

205

content attributes of the meta tag to index your pages.

This meta element defines a description of your page:

This meta element defines keywords for your page:
http://www.w3schools.com/html/html_head.asp


206/206

Thank you

HTML+Leksionet+1 21

Documents

Transcript of HTML+Leksionet+1 21