html+leksionet+1 21
TRANSCRIPT
-
7/31/2019 HTML+Leksionet+1 21
1/206
1
HTML
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
6/206
6
HTML TAGS-at bazike
-
7/31/2019 HTML+Leksionet+1 21
7/206
7
Permbajtja e ketyre elementeve ne Body(Trup) shfaqet ne Browserin tuaj.
Shembujt
-
7/31/2019 HTML+Leksionet+1 21
8/206
-
7/31/2019 HTML+Leksionet+1 21
9/206
9
Kjo eshte nje paragraf
Kjo eshte nje paragraf
Kjo eshte nje paragraf
Elementet e paragrafit definohen me Tag-
un p.
HTML Paragrafet
-
7/31/2019 HTML+Leksionet+1 21
10/206
10
Kjo eshte nje paragraf
Kjo eshte nje paragraf
Kjo eshte nje paragraf
Elementet e paragrafit definohen me Tag-un p
Dalja
-
7/31/2019 HTML+Leksionet+1 21
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
Kjo eshte nje heading
Kjo eshte nje heading
HTML HEADINGS (Krye texti)
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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.
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
15/206
15
HTML PARAGRAFET
Paragrafet definohen me
tag.
Kjo eshte nje paragraf
Kjo eshte edhe nje paragraf
HTML automatically displays an empty line
before and after a paragraph.
-
7/31/2019 HTML+Leksionet+1 21
16/206
16
Shembulli
Kjo eshte nje paragraf.
Kjo eshte nje paragraf.
Kjo eshte nje paragraf.
Elementet e paragrafit nje te definuara me p
Tag.
-
7/31/2019 HTML+Leksionet+1 21
17/206
17
Dalja
Kjo eshte nje paragraf.
Kjo eshte nje paragraf.
Kjo eshte nje paragraf.
Elementet e paragrafit nje te definuara me pTag.
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
20/206
20
Ky eshte nje paragraf i regullt
Shembulli
-
7/31/2019 HTML+Leksionet+1 21
21/206
21
Ky eshte nje paragraf i regullt
Dalja
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
24/206
Finito !!!!!!
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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 linebreakDefines a horizontal rule
Defines a comment
Revision
-
7/31/2019 HTML+Leksionet+1 21
29/206
29
HTML ELEMENT
An HTML Element
Start Element ContentEnd
This is a
paragraph
-
7/31/2019 HTML+Leksionet+1 21
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.
-
7/31/2019 HTML+Leksionet+1 21
31/206
31
Attributes provide additional informationabout HTML elements.
HTML ATTRIBUTES
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
33/206
33
defines the body of an HTMLdocument.
has additionalinformation about the background color.
ATTRIBUTES EXAMPLE-1
CENTER ALIGNED HEADING
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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.
-
7/31/2019 HTML+Leksionet+1 21
36/206
36
ATTRIBUTES EXAMPLE- 2
defines the body of an HTML document.
has additional informationabout the background color.
-
7/31/2019 HTML+Leksionet+1 21
37/206
37
EXAMPLE: BACKGROUND COLOR
Look: Colored Background!
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
38/206
38
OUTPUT
LOOK: COLORED BACKGROUND!
R B S
-
7/31/2019 HTML+Leksionet+1 21
39/206
39
defines an HTML table.
has additional informationabout the border around the table.
ATTRIBUTES EXAMPLE- 3
HTML TEXT FORMATTING
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
42/206
42
HTML uses tags like and forformatting output, like bold or italictext.
These HTML tags are called formatting tags.
HTML FORMATTING TAGS
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
47/206
47
Donald Duck
BOX 555Disneyland
USA
ADDRESS
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
48/206
48
OUTPUT
Donald DuckBOX 555DisneylandUSA
ABBREVIATIONS AND ACRONYMS
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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 -
7/31/2019 HTML+Leksionet+1 21
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 -
7/31/2019 HTML+Leksionet+1 21
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.
-
7/31/2019 HTML+Leksionet+1 21
58/206
-
7/31/2019 HTML+Leksionet+1 21
59/206
59
Result Description Entity Name Entity Number
pound
yen ¥
euro
section
copyright
registeredtrademark
-
7/31/2019 HTML+Leksionet+1 21
60/206
EXAMPLES
-
7/31/2019 HTML+Leksionet+1 21
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 -
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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 -
7/31/2019 HTML+Leksionet+1 21
64/206
64
You can also use an image as a link:
AN IMAGE AS A LINK
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
65/206
65
OUTPUT
You can also use an image as a link:
THE ANCHOR TAG AND THE href ATTRIBUTE
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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 -
7/31/2019 HTML+Leksionet+1 21
72/206
72
O OC O O S G
See also Chapter 4.
Chapter 1
This chapter explains ba bla bla
Chapter 2
This chapter explains ba bla bla
Chapter 3
This chapter explains ba bla bla
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
73/206
73
See also Chapter 4.
Chapter 1
This chapter explains ba bla bla
Chapter 2
This chapter explains ba bla bla
Chapter 3
This chapter explains ba bla bla
CREATE A MAILTO LINK
http://www.w3schools.com/tags/tag_frameset.asphttp://www.w3schools.com/tags/tag_frameset.asp -
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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 -
7/31/2019 HTML+Leksionet+1 21
76/206
76
HTML FRAMES
With frames, you can display more than one
Web page in the same browser window.
-
7/31/2019 HTML+Leksionet+1 21
77/206
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
78/206
78
OUTPUT
HORIZONTAL FRAMESET
-
7/31/2019 HTML+Leksionet+1 21
79/206
79
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
80/206
80
OUTPUT
FRAMES
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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:
-
7/31/2019 HTML+Leksionet+1 21
84/206
BASIC NOTES - USEFUL TIPS
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
86/206
86
TAG
Your browser does not handle frames!
-
7/31/2019 HTML+Leksionet+1 21
87/206
-
7/31/2019 HTML+Leksionet+1 21
88/206
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
89/206
89
OU U
FRAMESET WITHNORESIZE=NORESIZE
-
7/31/2019 HTML+Leksionet+1 21
90/206
90
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
91/206
91
NAVIGATION FRAME
-
7/31/2019 HTML+Leksionet+1 21
92/206
92
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
93/206
93
JUMP TO A SPECIFIED SECTIONWITHIN A FRAME
-
7/31/2019 HTML+Leksionet+1 21
94/206
94
WITHIN A FRAME
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
95/206
95
-
7/31/2019 HTML+Leksionet+1 21
96/206
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
97/206
97
FRAME TAGS
-
7/31/2019 HTML+Leksionet+1 21
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 -
7/31/2019 HTML+Leksionet+1 21
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 -
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
101/206
101
300
Two rows and three columns:100200
300
400500600
-
7/31/2019 HTML+Leksionet+1 21
102/206
TABLE BORDERS
-
7/31/2019 HTML+Leksionet+1 21
103/206
103
With a normal border:
First
Row
Second
Row
With a thick border:
TABLE BORDERS
-
7/31/2019 HTML+Leksionet+1 21
104/206
104
FirstRow
Second
Row
With a very thick border:FirstRow
SecondRow
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
105/206
105
TABLES
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
107/206
107
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
TABLES
-
7/31/2019 HTML+Leksionet+1 21
108/206
108
How it looks in a browser:
TABLES AND THE BORDER ATTRIBUTE
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
111/206
111
How it looks in a browser:
TABLE WITH NO BORDER
-
7/31/2019 HTML+Leksionet+1 21
112/206
112
This example demonstrates a table with no borders.
This table has no borders:
100200
300
400500
600
TABLE WITH NO BORDER
-
7/31/2019 HTML+Leksionet+1 21
113/206
113
And this table has no borders:
100
200
300
400
500
600
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
114/206
114
To do.
-
7/31/2019 HTML+Leksionet+1 21
115/206
115
TABLE WITH CAPTION
-
7/31/2019 HTML+Leksionet+1 21
116/206
116
This example demonstrates a table with a caption.
This table has a caption,and a thick border:
My Caption100
200300400
-
7/31/2019 HTML+Leksionet+1 21
117/206
117
TABLE CELLS THAT SPAN MORE THANONE ROW/COLUMN
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
119/206
119
Cell that spans two rows:
First Name:
Bill Gates
Telephone:
555 77 854
555 77 855
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
120/206
120
CELL PADDING
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
122/206
122
With cellpadding:
First
Row
SecondRow
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
123/206
123
EXAMPLE: CELL SPACING
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
125/206
125
With cellspacing:
First
Row
SecondRow
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
126/206
126
ADD A BACKGROUND COLOR OR ABACKGROUND IMAGE TO A TABLE
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
128/206
128
A background image:
First
Row
SecondRow
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
129/206
129
ADD A BACKGROUND COLOR OR ABACKGROUND IMAGE TO A TABLE CELL
-
7/31/2019 HTML+Leksionet+1 21
130/206
130
This example demonstrates how to add a background to one or more table cells.
Cell backgrounds:First
RowSecondRow
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
131/206
131
ALIGN THE CONTENT IN A TABLE CELL
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
133/206
133
Make-Up$30.00$44.45
Food$730.40
$650.00Sum$1001.50$744.65
To Do..
-
7/31/2019 HTML+Leksionet+1 21
134/206
134
HTML LIST
-
7/31/2019 HTML+Leksionet+1 21
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 -
7/31/2019 HTML+Leksionet+1 21
136/206
136
An Unordered List:
CoffeeTeaMilk
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
137/206
137
An Unordered List:
Coffee
Tea
Milk
AN ORDERED LIST
-
7/31/2019 HTML+Leksionet+1 21
138/206
138
An Ordered List:CoffeeTeaMilk
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
139/206
139
An Ordered List:
1.Coffee
2.Tea
3. Milk
DEFINITION LISTS
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
141/206
141
Here is how it looks in a browser:
Coffee
Black hot drink
Milk
White cold drink
DIFFERENT TYPES OF ORDERED LISTS
-
7/31/2019 HTML+Leksionet+1 21
142/206
142
This example demonstrates different types of ordered lists.
Numbered list:
Apples
Bananas
LemonsOranges
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
143/206
143
Numbered list:
1. Apples
2.Bananas
3.Lemons
4.Oranges
DIFFERENT TYPES OF ORDEREDLISTS
-
7/31/2019 HTML+Leksionet+1 21
144/206
144
Letters list:
Apples
BananasLemons
Oranges
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
145/206
145
Letters list:
A. Apples
B. BananasC. Lemons
D. Oranges
DIFFERENT TYPES OF ORDEREDLISTS
-
7/31/2019 HTML+Leksionet+1 21
146/206
146
Lowercase letters list:
Apples
BananasLemons
Oranges
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
147/206
147
Lowercase letters list:
a. Apples
b. Bananasc. Lemons
c. Oranges
DIFFERENT TYPES OF ORDEREDLISTS
-
7/31/2019 HTML+Leksionet+1 21
148/206
148
Roman numbers list:
Apples
BananasLemons
Oranges
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
149/206
149
Roman numbers list:
I. Apples
II. BananasIII. Lemons
IV. Oranges
DIFFERENT TYPES OF ORDEREDLISTS
-
7/31/2019 HTML+Leksionet+1 21
150/206
150
Lowercase Roman numbers list:
Apples
Bananas
LemonsOranges
-
7/31/2019 HTML+Leksionet+1 21
151/206
DIFFERENT TYPES OF UNORDEREDLISTS
-
7/31/2019 HTML+Leksionet+1 21
152/206
152
This example demonstrates different types of unordered lists.
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
153/206
153
-
7/31/2019 HTML+Leksionet+1 21
154/206
-
7/31/2019 HTML+Leksionet+1 21
155/206
DIFFERENT TYPES OF UNORDEREDLISTS
-
7/31/2019 HTML+Leksionet+1 21
156/206
156
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
157/206
157
To do..
-
7/31/2019 HTML+Leksionet+1 21
158/206
158
To do
-
7/31/2019 HTML+Leksionet+1 21
159/206
159
Revision
-
7/31/2019 HTML+Leksionet+1 21
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 -
7/31/2019 HTML+Leksionet+1 21
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 -
7/31/2019 HTML+Leksionet+1 21
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 -
7/31/2019 HTML+Leksionet+1 21
163/206
163
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
164/206
164
PASSWORD FIELDS
-
7/31/2019 HTML+Leksionet+1 21
165/206
165
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
166/206
166
FORMS
A form is an area that can contain form elements
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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
How it looks in a browser:
-
7/31/2019 HTML+Leksionet+1 21
170/206
170
How it looks in a browser:
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
-
7/31/2019 HTML+Leksionet+1 21
171/206
171
Radio Buttons are used when you want the user to select oneof a limited number of choices.
Male
Female
RADIO BUTTONS
-
7/31/2019 HTML+Leksionet+1 21
172/206
172
How it looks in a browser:
Male
Female
Note that only one option can be chosen.
CHECKBOXES
Checkboxes are used when you want the user to select one
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
174/206
174
THE FORMS ACTION ATTRIBUT AND
THE SUBMIT BUTTON
When the user clicks on the "Submit" button, the content of
-
7/31/2019 HTML+Leksionet+1 21
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
How it looks in a browser:
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
177/206
177
an HTML page. A drop-down box is a selectable list.
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
178/206
178
ANOTHER DROP DOWN BOX
This example demonstrates how to create a simple drop-
-
7/31/2019 HTML+Leksionet+1 21
179/206
179
p p p
down box with a pre-selected value.
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
180/206
180
EXAMPLE: TEXTAREA
This example demonstrates how to create a text-area (a multi-line text input
-
7/31/2019 HTML+Leksionet+1 21
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.
-
7/31/2019 HTML+Leksionet+1 21
182/206
CREAT A BUTTON
This example demonstrates how to create a button. On the
-
7/31/2019 HTML+Leksionet+1 21
183/206
183
button you can define your own text.
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
184/206
184
EXAMPLE: INSERT IMAGES
-
7/31/2019 HTML+Leksionet+1 21
185/206
185
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
186/206
186
THE ALT ATTRIBUTE
The alt attribute is used to define an "alternate text" for an
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
188/206
188
p g g
to an HTML page.
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
189/206
189
ALIGNING IMAGES
This example demonstrates how to align an image within the text.
-
7/31/2019 HTML+Leksionet+1 21
190/206
190
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
191/206
191
ALIGNING IMAGES
-
7/31/2019 HTML+Leksionet+1 21
192/206
192
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
193/206
193
LET THE IMAGE FLOAT
This example demonstrates how to let an image float to the left or right of a
h
-
7/31/2019 HTML+Leksionet+1 21
194/206
194
paragraph.
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
195/206
195
-
7/31/2019 HTML+Leksionet+1 21
196/206
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
197/206
197
MAKE A HYPERLINK OF AN IMAGE
This example demonstrates how to use an image as a link.
-
7/31/2019 HTML+Leksionet+1 21
198/206
198
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
199/206
199
HTML META
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_metahttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_meta -
7/31/2019 HTML+Leksionet+1 21
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 -
7/31/2019 HTML+Leksionet+1 21
201/206
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
202/206
202
DOCUMENT KEYWORDS
-
7/31/2019 HTML+Leksionet+1 21
203/206
203
OUTPUT
-
7/31/2019 HTML+Leksionet+1 21
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
-
7/31/2019 HTML+Leksionet+1 21
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 -
7/31/2019 HTML+Leksionet+1 21
206/206
Thank you