HTML - Computer Science and Engineering Department

advertisement
HTML
HyperText Markup
Language
Dr. Awad Khalil
Computer Science Department
AUC
HTML, by Dr. Khalil
1
History of Markup

SGML, the Standard Generalized Markup Language (1980),
is a more powerful ancestor of XML. SGML is a text-based
meta-language used to describe application languages. SGML is a
text-based language that can be used to markup data – that is,
add metadata – in a way which is self describing. Although
SGML has many useful features, the complexity of SGML makes
it extremely hard to use and learn.

HTML, the HyperText Markup Language (1989), is one of the
best known applications of SGML. HTML was defined to be a
universal markup language for the display of information, and the
linking of different pieces of information. The idea was that any
HTML document (or web page) would be presentable in any
application that was capable of understanding HTML (termed a
web browser).
HTML, by Dr. Khalil
2
HTML
 HTML is
the document formatting language used
to design most Web pages.
 It
is a simple, yet powerful, platform-independent
document language.
 Originally
developed by Tim Berners-Lee while
at CERN but was standardized in November
1995.
 In
early 2000, W3C produced XHTML 1.0 as a
reformulation of HTML 4 in XML.
HTML, by Dr. Khalil
3
So Why XML?

Unfortunately, SGML is such a
complicated language that it’s not
well suited for data interchange
over the web.

And, although HTML has been
incredibly successful, it’s also
limited in its scope; it is only
intended for displaying documents
in a browser.

Due to these reasons, XML was
created.

XML is a subset of SGML with the
attempt to make most of the power
of SGML and to make simpler and
easier to learn and use.


For example, suppose we have data
about a name, and we need to be
able to share that information with
others. But we also want to be able
to use that information in a
computer program. Instead of just
creating a text file like this:
Tamer Soliman
or an HTML file like this:
<HTML>
<HEAD><TITLE>Name</TITLE></HEAD>
<BODY><P>Tamer Soliman</P></BODY>
</HTML>
We might create an XML file like this:
<name>
<first>Tamer</first>
<last>Soliman</last>
</name>
XML is not really a “language” at
all, but a standard for creating
languages which meet the XML
HTML, by Dr. Khalil
criteria.
4
Who is the World Wide Web Consortium?
 The World Wide Web Consortium (W3C)
was started in
1994, according to their web site (http://www.w3.org), “to
lead the World Wide Web to its full potential by
developing common protocols that promote its evolution
and ensure its interoperability”.
 W3C
produces recommendations which describe the
basic building blocks of the web.

HTML recommendation is the most famous contribution
of W3C to the web.
 In
1998, W3C started releasing recommendations for
XML 1.0, XSLT, and XPath.
HTML, by Dr. Khalil
5
What is XML?
 Extensible
Markup Language (XML), is the latest
buzzword on the Internet, but it’s also a rapidly
maturing technology with powerful real-world
applications, particularly for the management, display
and organization of data.
 Together
with its display language (XSL) and the
standardized Document Object Model (DOM), it is an
essential technology for anyone using markup language
on the web or internally.
HTML, by Dr. Khalil
6
HTML Concepts
 HTML
Tags:

HTML tags cover formatting,
structural, and semantic
markup of an HTML
document.



<HTML>
<HEAD>
<TITLE>
<BODY>
<A>
<IMG>
<B>
<I>
<HR>
Good morning <B> Egypt </B>
<HR WIDTH="200">
In 1989, <B><I>Tim
Brayners</I></B> developed the
first version of HTML
<HTML>
<HEAD>
<TITLE>Page1</TITLE>
</HEAD>
<BODY>
Good Morning,
<B><I>Egypt</I></B>
</BODY>
</HTML>
HTML, by Dr. Khalil
7
HTML Concepts
<HTML>
<HEAD>
<TITLE>Exercise 1</TITLE>
</HEAD>
<BODY>
Good Morning, <B><I>Egypt</I></B>
</BODY>
</HTML>
HTML, by Dr. Khalil
8
HTML Concepts
In 1989, <B><I>Tim Brayners</I></B>developed<HYPNOTIC> the first
version of HTML </hypnotic>
HTML, by Dr. Khalil
9
HTML Document Structure
H TM L docum ent
T itle
<HTM L>
<HEAD>
< T IT L E >
T itle o f y o u r d o c u m e n t g o e sh e re
< /T IT L E .
< /H E A D >
<BO DY>
Y o u r d o c u m e n t g o e s h e re
< /B O D Y
< /H T M L >
B o d y s e c tio n
HTML, by Dr. Khalil
10
Elements of HTML
 An
element in HTML consists of three parts:
 A start tag
 Content
 An end tag
 Examples:
<B>Egypt</B>
<B><I>Egypt</I></B>
 Each element may have a set of attributes:
<BODY BGCOLOR=RED TEXT=BLACK>
<IMG SRC=“MyPhoto.jpg” WIDTH=200 LENGTH=300 BORDER=2>
HTML, by Dr. Khalil
11
Classification of HTML Elements
Page Structuring Elements
Used to define the structure of
the page such as:
<H1>…</H1>
<H2>…</H2>
<P>
<Div>…</Div>
<BR>
<HR>
<CENTER>
Text Formatting Elements
Used to define the display
properties of the text and to
include hyperlinks and other
objects such as images and audio:
<B>…</B>
<I>…</I>
<U>…</U>
<A HREF=“URL”>…</A>
<IMG SRC=“URL”>
HTML, by Dr. Khalil
12
Methods of Generating HTML Documents
 Using
Text Editor:
Microsoft NotePad
 Using
HTML Generators:
 Microsoft Front Page
 Microsoft Word
HTML, by Dr. Khalil
13
A Complete HTML Page
<HTML>
<HEAD>
<TITLE>The Universal Construction Company</TITLE>
</HEAD>
<BODY>
<IMG SRC="welcome.gif">
<H1>The Universal Construction Company !</H1>
<H2>Specialists in Construction Since 1920</H2>
<CENTER>
<IMG SRC="logo.gif" HEIGHT=60 WIDTH=100>
</CENTER>
<P>
Our Company offers a highly specialized group of <B><I>highly experienced engineers
</I></B> with the <I><B>state-of-the-art technology </B></I>for constructing modern
buildings. Write us at:<BR>
P.O. Box 555<BR>
Cairo 11511, Egypt<BR>
Or visit our
<A HREF="http://www.ucc.com/technical/">UCC Technical Site</A>
<HR>
</BODY>
</HTML>
HTML, by Dr. Khalil
14
Arranging HTML Elements
<HTML>
<HEAD>
<TITLE>The Universal Construction Company </TITLE>
<HEAD>
<BODY>
<IMG SRC="WELCOME.GIF">
<H1>The Universal Construction Company !</H1>
<H2>Specialists in Construction Since 1920</H2>
<CENTER>
<IMG SRC="LOGO.GIF">
</CENTER>
<P>
Our company offers a specialized group of <B><I> highly experienced group of
engineers</I></B> with the <B><I>state-of-the-art technology</I></B> for constructing
modern buildings. Write us at:<BR>
P.O. BOX 555<BR>
Cairo, Egypt.<BR>
Or visit our
<A HREF="http://www.ucctech.com/">Technical Site</A>
<HR>
</BODY>
</HTML>
HTML, by Dr. Khalil
15
Rules of White Spaces

HTML doesn’t keep white spaces
<TITLE>Good
Software<TITLE>
<BODY>
Without
Good
and
robust <B><I>Software</I></B>,
you
can
throw
the
<B><I>Hardware</I></B> out.
</BODY>
HTML, by Dr. Khalil
16
Using Element <Pre>…</Pre> for White Spaces
<HTML>
<BODY>
<Pre>
XXXXXXXX XXXXXXXX
YYYYYYYY YYYYYYYY
ZZZZZZZZZ ZZZZZZZZZ
</Pre>
<HR>
<p>
XXXXXXXX XXXXXXXX
YYYYYYYY YYYYYYYY
ZZZZZZZZZ ZZZZZZZZZ
</BODY>
</HTML>
HTML, by Dr. Khalil
17
Comments
<!-- My comments start here -->
<!-The Universal Construction Company Home Page
by Awad Khalil
Copyright 2002
-->
HTML, by Dr. Khalil
18
Referencing Entity Codes
Character
Numerical
Entity Code
Character
Entity Code
“
"
"
<
<
<
>
>
>
&
&
&
HTML, by Dr. Khalil
19
Referencing Entity Codes
Bullet:
Trademark symbol:
Copyright symbol
Summation symbol:
Square Root symbol:
Greek Alpha:
Greek Delta:
•
™
&Copy;
&sum:
√
Α
Δ
HTML, by Dr. Khalil
20
Referencing Entity Codes
Khalil & Sons
» khalil & Sons
X < Y
» X<Y
SONY&Trade;
» SONYTM
HTML, by Dr. Khalil
21
Using  
We hope that you will give us a call at (202)
517-3566 soon!
We hope that you will give us a call at (202) 517-3566
soon!
Hello. World;
Hello. World;
HTML, by Dr. Khalil
22
Referencing to Colors
Color
RGB Value
Color
RGB Value
White
#FFFFFF
Fushia
#FF00FF
Red
#FF0000
Aqua
#00FFFF
Green
#00FF00
Navy
#000080
Blue
#0000FF
Gray
#808080
Yellow
#FFFF00
Purple
#800080
HTML, by Dr. Khalil
23
Using Colors
Changing color using attributes
 Attribute BGCOLOR
<BODY BGCOLOR=”[colorname]”>
< BODY BGCOLOR =”#[RGB-value]”>
of the element <BODY>
Attribute TEXT
<BODY TEXT=”[colorname]”>
< BODY TEXT =”#[RGB-value]”>

Attribute BACKGROUND
< BODY BACKGROUNG =”URL”>




Attribute LINK
Attribute VLINK
Attribute ALINK
<BODY LINK=”[colorname]”>
<BODY VLINK=”[colorname]”>
<BODY ALINK=”[colorname]”>
HTML, by Dr. Khalil
24
Changing Background Color by BGCOLOR
<HTML>
<HEAD>
<TITLE>Black and White Are My Favorite Colors</TITLE>
</HEAD>
<BODY BGCOLOR=”BLACK” TEXT=”WHITE”>
<B>Good Morning, Egypt.</B>
</BODY>
</HTML>
---------------------------------------------<BODY BGCOLOR=”Green”>
<BODY BGCOLOR=”#00FF00”>
HTML, by Dr. Khalil
25
Including an Image as a Backgroung
<BODY BACKGROUND=”RB03.jpg”>
HTML, by Dr. Khalil
26
Defining the Color of Text
<BODY TEXT=”TEAL”>
<BODY TEXT=”#008080”>
HTML, by Dr. Khalil
27
Defining the Color of LINK, VLINK, and ALINK
<BODY LINK=”GREEN”>
<BODY LINK=”#00FF00”>
<BODY VLINK=”MAROON”>
<BODY VLINK=”#800000”>
<BODY ALINK=”FUSHIA”>
<BODY ALINK=”#FF00FF”>
HTML, by Dr. Khalil
28
Using the Element <FONT>
 Using
the attribute Size to define the relative or
absolute size of the text.
<FONT SIZE=”5”>The Universal Construction Company! </FONT>
<FONT SIZE=”1”>Copyright © 1988 by Awad Khalil.</FONT>
 Using the attribute Color
<FONT COLOR=”[colorname]”>
<FONT COLOR=”#[RGB-value]”>
to define the color of the text.
 Using
the attribute Face to define the type of font (e.g.;
Arial, Times New Roman, …etc).
<FONT FACE=”Arial”>I lived in Cairo for several years.</FONT>
<FONT COLOR=”RED” SIZE=”4” FACE=”Garamond”>Call me.</Font>
HTML, by Dr. Khalil
29
Examples
<HTML>
<HEAD>
<TITLE>A Splash of my Favorite Colors</TITLE>
</HEAD>
<BODY BGCOLOR=”CYAN” TEXT=”#0000AA”>
<H1>Enjoy The Colors</H1>
<FONT COLOR=”RED”>Blood</FONT> is the favorite food of
vampires. All of us enjoy a walk on the
<FONT COLOR=”GREEN”>grass</FONT>.
The <FONT COLOR=”#FFFF00”>sun</FONT>beams down.
</BODY>
</HTML>
HTML, by Dr. Khalil
30
<HTML>
<HEAD>
<TITLE>The Year 2000</TITLE>
</HEAD>
<BODY BGCOLOR=”YELLOW” TEXT=”BLUE”
LINK=”MAROON” ALINK=”GREEN”
VLINK=”BROWN”>
<!-- The Body tag attributes specify the color
scheme, such as the background color of
yellow. -->
<H1> The Millenium Approaches</H1>
<FONT SIZE=”+5”>
<I>And You’re Invited!</I>
</FONT>
<P>
<FONT COLOR=”PURPLE”>Please come to my
<B>Celebration of the New Millenium BBQ &
Poetry Reading</B> to be held on December
31st at 7:00 p.m. Anyone reading this page is
invited; send me mail using the link below for
more details.</FONT>
<HR>
<A HREF=”Mailto:akhalil@emf.net”>Awad
KHALIL</A><BR> © 1999, Awad KHALIL
</BODY>
</HTML>
HTML, by Dr. Khalil
31
<HTML>
<HEAD>
<TITLE>The Year 2000</TITLE>
</HEAD>
<BODY BGCOLOR=”YELLOW” TEXT=”BLUE” LINK=”MAROON” ALINK=”GREEN’ VLINK=”BROWN”>
<!-- The body tag attributes specify the color scheme, such as the background color of light yellow. -->
<CENTER>
<H1>The Millenium Approaches</H1>
<FONT SIZE=”+5” FACE=”Helvetica”>
<I>And You’re Invited!</I>
</FONT>
</CENTER>
<P>
Please come to my
<FONT COLOR=”PURPLE”>
<B>Celebration of the New Millenium BBQ & Poetry Reading</B>
</FONT>
to be held on December 31st at 7:00 p.m. Anyone
reading this page is invited; send me mail using the
link below for more details.
<P>
<CENTER>
<FONT COLOR=”BLACK” SIZE=”4”>
<B>Look out!</B> Unfortunately I’ll have to charge $200 for admission
</FONT>
</CENTER>
<HR>
<SMALL>
<A HREF=”mailto:akhalil@emf.net”>Awad KHALIL</A>
<BR>
Copyright © 1999, Awad KHALIL and Adel Kamel
</SMALL>
HTML, by Dr. Khalil
<BODY>
</HTML>
32
Header Element
<H1>,<H2>,….<H6>
 There are six levels of headers in HTML:
<H1 ALIGN=“CENTER”>Heading Level One</H1>
<H2 ALIGN=“RIGHT”>Heading Level Two</H2>
<H3 ALIGN=“LEFT>Heading Level Three</H3>
<H4 ALIGN=“JUSTIFY”>Heading Level Four</H4>
<H5>Heading Level Five</H5>
<H6>Heading Level Six</H6>
 Attribute: ALIGN
ALIGN=“CENTER”
ALIGN=“LEFT”
ALIGN=“RIGHT”
ALIGN=“JUSTIFY”
HTML, by Dr. Khalil
33
Paragraph Element
 Used
<P>
to divide the text into paragraphs
<P ALIGN=LEFT>This is paragraph ONE
<P ALIGN=LEFT>This is paragraph TWO
<P>This is paragraph THREE
<P ALIGN=RIGHT>This is paragraph FOUR
<P ALIGN=CENTER>This is paragraph FIVE
<P ALIGN=JUSTIFY>This is paragraph SIX
HTML, by Dr. Khalil
34
Address Element
<ADDRESS>
<ADDRESS>
<A HREF=”MAILTO:akhalil@aucegypt.edu”>Awad Khalil:
akhalil@aucegypt.edu</A>
</ADDRESS>
----------------------------------------------------<ADDRESS>
The American University in Cairo<BR>
113 Kasr El Aini Street <BR>
P.O. Box 2511<BR>
Cairo, Egypt<BR>
Phone: +(202)797-6336<BR>
Fax: +(202)795-7565
</ADDRESS>
HTML, by Dr. Khalil
35
Horizontal Line Element
<HR>
Good Morning <HR> Egypt!
<HR NOSHADE>
<HR SIZE=”1”>
<HR SIZE=”2” >
<HR SIZE=”3” ALIGN=RIGHT
WIDTH=200>
<HR SIZE=”4”>
<HR SIZE=”5” ALIGN=CENTER
WIDTH=40%>
<HR SIZE=”10”>
<HR NOSHADE SIZE=”10”>
<HR SIZE=”15”>
<HR SIZE=”15” NOSHADE>
HTML, by Dr. Khalil
36
Division Element
<DIV>
<TITLE>HappyFunCars
Divisions</TITLE>
<BODY>
HappyFunCars Presents…
<DIV ALIGN=”RIGHT”>
The Newly Revised
<H1>HappyFunCars Home
Page</H1>
Welcome!
<P ALIGN=”CENTER”>We sell used
cars at low prices!
</DIV>
Give us a call at (202(246-1294
HTML, by Dr. Khalil
37
Blockquote Element
<BLOCKQUOTE>
<P>From The Babylonian Laws,
Hammu-rabi, 2027 B.C.:
<BLOCKQUOTE>
If a builder has built a house for a
man and has not made his work
sound, and the house which he has
built has fallen down and so caused
the death of the householder, that
builder shall be put to death.
<p>
If a builder has built a house for a
man and does not make his work
perfect and a wall bulges, that builder
shall put that wall into sound condition
at his own cost.
</BLOCKQUOTE>
HTML, by Dr. Khalil
38
Lists – Unordered Lists
<UL><LI>
<TITLE>Two Shopping Lists</TITLE>
<BODY>
<UL>
<LI>Eggs
<LI>Milk
<LI>Apples
<LI>Razor Blades
</UL>
<UL TYPE=”SQUARE”>
<LI>Hammer
<LI>Screwdriver
<LI TYPE=”DISC”>Screws
<LI TYPE=”CIRCLE”>Chainsaw
</UL>
HTML, by Dr. Khalil
39
<LI>Head
<LI>Hand
<UL>
<LI>Finger
<LI>Thumb
</UL>
<LI>Leg
</UL>
<LI>Mind
<UL>
<LI>Brain
<UL>
<LI>Neuron
</UL>
</UL>
<LI>Spirit
<UL>
<LI>Soul
<UL>
<LI>Light body
</UL>
</UL>
</UL>
HTML, by Dr. Khalil
40
Lists – Ordered Lists
<OL><LI>
<OL>
<LI>Milk
<LI>Bread
<LI>Turkey Bacon
<LI VALUE=”10”>Dark Chocolate
<LI>Avocados
</OL>
-------------------------------------------<OL TYPE=a>
<LI>Milk
<LI>Bread
<LI>Turkey Bacon
<LI>Dark Chocolate
<LI>Avocados
</OL>
HTML, by Dr. Khalil
41
Anchor Element
<A HREF=“URL”>…</A>
<A HREF=”http://www.cs.aucegypt.edu/~akhalil/”>Khalil’s Home Page</A>
<A HREF=”http://www.yahoo.com/”>Visit Yahoo!</A>
--------------------------------------------------------------------------------------------------<P>you can see a five-megabyte movie of two players playing chess
<A HREF=”http://www.unrealities.com/videos/chess.avi”>Chess</A>
---------------------------------------------------------------------------------------------------<A HREF="D:\MY DOCUMENT\zedini-eshkan.mp3">Song</A>
---------------------------------------------------------------------------------------------------<A HREF="D:\CMY DOCUMENT\IT Diploma\ITEC-020\HTMLCONCPTS.PPT">HTML CONCEPTS</A>
---------------------------------------------------------------------------------------------------<P>If you have trouble downloading this
<A HREF=”ftp:D:\CMY DOCUMENT\IT Diploma\ITEC-020\HTMLCONCPTS.PPT”> file</A>, then go ahead and <A
HREF=mailto:akhalil@aucegypt.edu TITLE=“A problem in downloading”>send a message to Dr. Khalil</A>.
---------------------------------------------------------------------------------------------------<A HREF="D:\CMY DOCUMENT\CSCI 485\485 WEB SITE\index.htm"><IMG SRC="khalil.bmp" ALT="Photo of Dr. Khalil"></A>
--------------------------------------------------------------------------------------------------<A HREF=http://www.yahoo.com ACCESSKEY=”Y”>Yahoo!</A>
HTML, by Dr. Khalil
42
Internal Links
<HTML>
<HEAD>
<TITLE>Test Internal Links</TITLE>
</HEAD>
<BODY>
<P ALIGN=RIGHT>
<H1>
<A NAME="TOP">Courses List</A>
</H1>
<P ALIGN=LEFT>
<OL>
<LI><H3><A HREF="#Java" accesskey="J">Java Course</A></H3>
<LI><H3><A HREF="#Database" accesskey = "D">Database Course</A></H3>
<LI><H3><A HREF="#Assembly" accesskey="A">Assembly Course</A></H3>
</OL>
HTML, by Dr. Khalil
43
Internal Links
<H2>
<FONT COLOR=BLUE><A NAME="Java">Java</A></FONT>
</H2>
Java is an object-oriented programming language developed by Sun Microsystems,
........................................
<BR>
<A HREF="#TOP" accesskey="T">TOP</A>
<H2>
<FONT COLOR=BLUE><A NAME="Database">Databases</A></FONT>
</H2>
Databases are considered as major components in almost all recent computer application
..................................................
<BR>
<A HREF="#TOP" accesskey="T">TOP</A>
<H2>
<FONT COLOR=BLUE><A NAME="Assembly">Assembly</A></FONT>
</H2>
Assembly language is a low-level language
..................................................
<BR>
<A HREF="#TOP" accesskey="T">TOP</A>
</BODY>
</HTML>
HTML, by Dr. Khalil
44
Internal Links
HTML, by Dr. Khalil
45
Including an Applet Using Anchor Element
import java.awt .Graphics;
import java.awt.Font;
import java.awt.Color;
public class Welcome extends
java.applet.Applet {
Font f = new Font("Arial",
Font.BOLD, 48);
public void paint(Graphics
screen) {
screen.setFont(f);
screen.setColor(Color.red);
screen.drawString("Welcome
to Egypt", 10, 40);
}
<HTML>
<HEAD>
<TITLE>The Wlecome Page</TITLE>
</HEAD>
<BODY>
<P>We are very happy to say::
<BR>
<APPLET
CODE="Welcome.class"
WIDTH=600 HEIGHT=100>
</APPLET>
</BODY>
</HTML>
}
HTML, by Dr. Khalil
46
Basefont Element
<BASEFONT SIZE=”2”>
Welcome to
<FONT SIZE=”+2”>Coffeehousebook.com</FONT>
- - have a cup!
HTML, by Dr. Khalil
47
Line Break Element
<BR>
Hello<BR>
World!
-----------------------------------------CLEAR=”LEFT”
CLEAR=”RIGHT”
CLEAR=”ALL”
CLEAR=”NONE”
HTML, by Dr. Khalil
48
Qoute Element
<Q>…</Q>
<P>Churchill said,<Q>”We have chosen shame and will get
war,”</Q> but he wasn’t talking about 1066.</P>
HTML, by Dr. Khalil
49
Font Style Elements
<HTML>
<BODY>
<FONT SIZE=+2>
Bold: <B>Good Morning, Egypt</B>
Italic: <I>Good Morning, Egypt</I>
Underline: <U>Good Morning, Egypt</U>
Strike: <STRIKE>I'm some helpless text and I'm Struck</STRIKE>
S: <S>I'm some helpless text and I'm Struck</S>
Big: <BIG>Good Morning, Egypt</BIG>
Small: <SMALL>Good Morning, Egypt<SMALL>
Sub: H<SUB>2</SUB>O
Sup: E=MC<SUP>2</SUP> -- Eat a MAC Burger<SUP>TM</SUP>
</BODY>
</HTML>
HTML, by Dr. Khalil
50
Font Style Elements
Acronym: I spy for the <ACRONYM TITLE=”Federal Bureau of Investigation”> FBI</ACRONYM>
CITE: I have read and reread<CITE>Moby Dick</CITE> but I still can’t make heads nor tails of it.
CODE: To use the Automatic date feature in Excel, just enter <CODE>=Date()</CODE> into a cell.
Definition: It’s not strange that <DFN>HTML</DFN> (HyperText Markup Language) is just a subset of
<DFN>SGML</DFN> (Standard Generalized Markup Language).
Emphasis: I simply <EM>must</EM>get that book!
Strong Emphasis: I swear, if they don’t give me that raise<STRONG> tomorrow</STRONG>, I quit.
Variables: The formula for the <VAR>distance traveled</VAR> (in miles) is <VAR> speed</VAR> (in
miles per hour) multiplied by <VAR> time</VAR> (in hours).
Code: When using an anchor element, make sure to use the
<CODE>HREF="<VAR>URL</VAR>"</CODE> attribute.
TeleType: <TT>abc def ghi jkl</TT>
HTML, by Dr. Khalil
51
Thank you
HTML, by Dr. Khalil
52
Download