Scribd
Upload
23 views43 pages

Lec03_Tut04

This document provides an introduction to HTML, covering its structure, common tags, and editing techniques. It explains key elements such as headers, text styling, linking, and image insertion, along with practical examples. The document serves as a tutorial for beginners to understand and create basic web pages using HTML.

Uploaded by

kin yam Law
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
23 views43 pages

Lec03_Tut04

This document provides an introduction to HTML, covering its structure, common tags, and editing techniques. It explains key elements such as headers, text styling, linking, and image insertion, along with practical examples. The document serves as a tutorial for beginners to understand and create basic web pages using HTML.

Uploaded by

kin yam Law
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 43

Lecture 3 & Tutorial 4

Introduction to HTML
Outline
3.1 Introduction
3.2 Markup Languages
3.3 Editing HTML
3.4 Common Tags
3.5 Headers
3.6 Text Styling
3.7 Linking
3.8 Images
3.9 Formatting Text With <FONT>
3.10 Special Characters, Horizontal Rules and
More Line Breaks
3.11 Unordered Lists
3.12 Nested and Ordered Lists
CC2005 (10/11) Sem. 1 - L3 1
3.1 Introduction
• HTML
– HyperText Markup Language
– Not a procedural programming language like C, Fortran,
Cobol or Pascal
– Markup language
• Identify elements of a page so that a browser can render that
page on your computer screen
• Presentation of a document vs. structure

CC2005 (10/11) Sem. 1 - L3 2


3.2 Markup Languages
• Markup language
– Used to format text and information
• HTML
– Marked up with elements, delineated by tags
– Tags: keywords contained in pairs of angle brackets
• HTML tags
– Not case sensitive
– Good practice to keep all the letters in one case
• Forgetting to close tags is a syntax error

CC2005 (10/11) Sem. 1 - L3 3


3.3 Editing HTML
• HTML files or documents
– Written in source-code form using text editor
– Notepad: Start-Programs-Accessories
– HTML-Kit: http://www.chami.com/html-kit
• HTML files
– .htm or .html extensions
– Name your files to describe their functionality
– File name of your home page should be index.html
• Errors in HTML
– Usually not fatal

CC2005 (10/11) Sem. 1 - L3 4


3.4 Common Tags
• Always include the <HTML>…</HTML> tags
• Comments placed inside <!--…--> tags
• HTML documents
– HEAD section
• Info about the document
• Info in header not generally rendered in display window
• TITLE element names your Web page
– BODY section
• Page content
• Includes text, images, links, forms, etc.
• Elements include backgrounds, link colors and font faces
• P element forms a paragraph, blank line before and after

CC2005 (10/11) Sem. 1 - L3 5


1 <HTML>
2 Outline
3
4 <!-- Our first Web page -->
1. HEAD section
5
6 <HEAD>
1.1 TITLE element
7 <TITLE>Internet and WWW How to Program - Welcome</TITLE>
8 </HEAD> 2. BODY section
9 2.1 P element
10 <BODY>
11
12 <P>Welcome to Our Web Site!</P>
13
14 </BODY>
15 </HTML>

© 2000 Deitel & Associates, Inc. All rights reserved.


3.5 Headers
• Headers
– Simple form of text formatting
– Vary text size based on the header’s “level”
– Actual size of text of header element is selected by
browser
– Can vary significantly between browsers
• CENTER element
– Centers material horizontally
– Most elements are left adjusted by default

CC2005 (10/11) Sem. 1 - L3 7


1 <HTML>
2
3
Outline
4 <!-- HTML headers -->
5 1. Varying header
6 <HEAD>
sizes
7 <TITLE>Internet and WWW How to Program - Headers</TITLE>
8 </HEAD> 1.1 Level 1 is the largest,
9 level 6 is the
10 <BODY> smallest
11
12 <!-- Centers everything in the CENTER element -->
13 <CENTER>
14 <H1>Level 1 Header</H1> <!-- Level 1 header -->
15 <H2>Level 2 header</H2> <!-- Level 2 header -->
16 <H3>Level 3 header</H3> <!-- Level 3 header -->
17 <H4>Level 4 header</H4> <!-- Level 4 header -->
18 <H5>Level 5 header</H5> <!-- Level 5 header -->
19 <H6>Level 6 header</H6> <!-- Level 6 header -->
20 </CENTER>
21
22 </BODY>
23 </HTML>

© 2000 Deitel & Associates, Inc. All rights reserved.


Header elements H1 through H6

CC2005 (10/11) Sem. 1 - L3 9


3.6 Text Styling
• Underline style
– <U>…</U>
• Align elements with ALIGN attribute
– right, left or center
• Close nested tags in the reverse order from which they
were opened
• Emphasis (italics) style
– <EM>…</EM>
• Strong (bold) style
– <STRONG>…</STRONG>
• <B> and <I> tags

CC2005 (10/11) Sem. 1 - L3 10


1 <HTML>
2 Outline
3
4 <!-- Stylizing your text -->
5 1. EM, STRONG, and U
6 <HEAD> tags
7 <TITLE>Internet and WWW How to Program - Welcome</TITLE> 1.1 Close nested tags in
8 </HEAD> reverse order from
9 which they were
10 <BODY> opened
11 <H1 ALIGN = "center"><U>Welcome to Our Web Site!</U></H1>
12 2. Page rendered by
13 <P>We have designed this site to teach
browser
14 about the wonders of <EM>HTML</EM>. We have been using
15 <EM>HTML</EM> since <U>version<STRONG> 2.0</STRONG></U>,
16 and we enjoy the features that have been added recently. It
17 seems only a short time ago that we read our first <EM>HTML</EM>
18 book. Soon you will know about many of the great new features
19 of HTML 4.0.</P>
20
21 <H2 ALIGN = "center">Have Fun With the Site!</H2>
22
23 </BODY>
24 </HTML>

© 2000 Deitel & Associates, Inc. All rights reserved.


Stylizing text on Web pages

CC2005 (10/11) Sem. 1 - L3 12


3.7 Linking
• Links inserted using the A (anchor) element
– Requires HREF attribute
• HREF specifies the URL you would like to link to
– <A HREF = “address”>…</A>
– Can link to email addresses, using
<A HREF = “mailto: emailaddress”>…</A>
– Note quotation mark placement

CC2005 (10/11) Sem. 1 - L3 13


1 <HTML>
2 Outline
3
4 <!-- Introduction to hyperlinks -->
5 1. Anchor element
6 <HEAD> 1.1 HREF attribute
7 <TITLE>Internet and WWW How to Program - Links</TITLE>
8 </HEAD>
9
10 <BODY>
11
12 <CENTER>
13 <H2>Here are my favorite Internet Search Engines</H2>
14 <P><STRONG>Click on the Search Engine address to go to that
15 page.</STRONG></P>
16
17 <!-- Hyperlink form: <A HREF = "address"> -->
18 <P>Yahoo: <A HREF = "http://www.yahoo.com">
19 http://www.yahoo.com</A></P>
20
21 <P>AltaVista: <A HREF = "http://www.altavista.com">
22 http://www.altavista.com</A></P>
23
24 <P>Ask Jeeves: <A HREF = "http://www.askjeeves.com">
25 http://www.askjeeves.com</A></P>
26
27 <P>WebCrawler: <A HREF = "http://www.webcrawler.com">
28 http://www.webcrawler.com</A></P>
29 </CENTER>
30
31 </BODY>
32 </HTML>
© 2000 Deitel & Associates, Inc. All rights reserved.
Linking to other Web pages

CC2005 (10/11) Sem. 1 - L3 15


1 <HTML>
2 Outline
3
4 <!-- Adding email hyperlinks -->
5 1. Anchor element
6 <HEAD> 1.1 mailto link
7 <TITLE>Internet and WWW How to Program - Contact Page</TITLE>
8 </HEAD>
9 2. Page rendered by
10 <BODY> browser
11
12 <!-- The correct form for hyperlinking to an email address -->
13 <!-- is <A HREF = "mailto:address"></A> -->
14 <P>My email address is <A HREF = "mailto:[email protected]">
15 [email protected]</A>. Click on the address and your browser
16 will open an email message and address it to me.
17 </P>
18
19 </BODY>
20 </HTML>

© 2000 Deitel & Associates, Inc. All rights reserved.


3.8 Images
• Images as anchors
• Background color
– Preset colors (white, black, blue, red, etc.)
– Hexadecimal code
• First two characters for amount of RED color
• Second two characters for amount of GREEN color
• Last two characters for amount of BLUE color
• 00 is the weakest a color can get
• FF is the strongest a color can get
• Ex. black = #000000

CC2005 (10/11) Sem. 1 - L3 17


3.8 Images
• Image background
– <BODY BACKGROUND = “background”>
– Image does not need to be large as browser tiles image across and
down the screen
• Pixel
– Stands for “picture element”
– Each pixel represents one addressable dot of color on the screen
• Insert image into page
– Use <IMG> tag
• Attributes:
– SRC = “location”
– HEIGHT (in pixels)
– WIDTH (in pixels)
– BORDER (black by default)
– ALT (text description for browsers that have images turned off or
cannot view images)
CC2005 (10/11) Sem. 1 - L3 18
1 <HTML>
2 Outline
3
4 <!-- Adding images with HTML -->
5 1.1 Background image
6 <HEAD> 1.2 IMG element
7 <TITLE>Internet and WWW How to Program - Welcome</TITLE>
1.3 IMG attributes
8 </HEAD>
9
10 <BODY BACKGROUND = "background.gif"> 2. Page rendered by
11
browser
12 <CENTER>
13 <!-- Format for entering images: <IMG SRC = "name"> -->
14 <IMG SRC = "deitel.gif" BORDER = "1" HEIGHT = "144"
15 WIDTH = "200" ALT = "Harvey and Paul Deitel">
16 </CENTER>
17
18 </BODY>
19 </HTML>

© 2000 Deitel & Associates, Inc. All rights reserved.


1 <HTML>
2 Outline
3
4 <!-- Using images as link anchors -->
5
1. Images as anchors
6 <HEAD> 1.1 Format for value
7 <TITLE>Internet and WWW How to Program - Nav Bar</TITLE> for SRC attribute
8 </HEAD>
9
2. BR element
10 <BODY BGCOLOR = "#CDCDCD">
11 <CENTER>
12
13 <A HREF = "main.html">
14 <IMG SRC = "buttons/about.jpg" WIDTH = "65" HEIGHT = "50"
15 BORDER = "0" ALT = "Main Page"></A><BR>
16
17 <A HREF = "links.html">
18 <IMG SRC = "buttons/links.jpg" WIDTH = "65" HEIGHT = "50"
19 BORDER = "0" ALT = "Links Page"></A><BR>
20
21 <A HREF = "list.html">
22 <IMG SRC = "buttons/list.jpg" WIDTH = "65" HEIGHT = "50"
23 BORDER = "0" ALT = "List Example Page"></A><BR>
24
25 <A HREF = "contact.html">
26 <IMG SRC = "buttons/contact.jpg" WIDTH = "65" HEIGHT = "50"
27 BORDER = "0" ALT = "Contact Page"></A><BR>
28
29 <A HREF = "header.html">
© 2000
30 <IMGDeitel
SRC& =
Associates, Inc. All rights reserved.
"buttons/header.jpg" WIDTH = "65" HEIGHT = "50"
31 BORDER = "0" ALT = "Header Page"></A><BR>
Outline
32
3. Page rendered by
33 <A HREF = "table.html"> browser

34 <IMG SRC = "buttons/table.jpg" WIDTH = "65" HEIGHT = "50"

35 BORDER = "0" ALT = "Table Page"></A><BR>

36

37 <A HREF = "form.html">

38 <IMG SRC = "buttons/form.jpg" WIDTH = "65" HEIGHT = "50"

39 BORDER = "0" ALT = "Feedback Form"></A><BR>

40 </CENTER>

41

42 </BODY>

43 </HTML>
© 2000 Deitel & Associates, Inc. All rights reserved.
Using images as link anchors

CC2005 (10/11) Sem. 1 - L3 22


3.9 Formatting Text With <FONT>

• FONT element
– Add color and formatting to text
– FONT attributes:
• COLOR
– Preset or hex color code
– Value in quotation marks
– Note: you can set font color for whole document using
TEXT attribute in BODY element

CC2005 (10/11) Sem. 1 - L3 23


3.9 Formatting Text With <FONT> (II)
• SIZE
– To make text larger, set SIZE = “+x”
– To make text smaller, set SIZE = “-x”
– x is the number of font point sizes
• FACE
– Font of the text you are formatting
– Be careful to use common fonts like Times, Arial, Courier
and Helvetica
– Browser will display default if unable to display specified
font
• Example
<FONT COLOR = “red” SIZE = “+1” FACE =
“Arial”>…</FONT>

CC2005 (10/11) Sem. 1 - L3 24


1<HTML>
2 Outline
3
4<!-- Formatting text size and color -->
5 1. FONT tag
6<HEAD> 1.1 FONT attributes
7<TITLE>Internet and WWW How to Program - Welcome</TITLE>
8</HEAD>
9
10<BODY>
11
12<H1 ALIGN = "center"><U>Welcome to Our Web Site!</U></H1>
13
14<!-- Font tags change the formatting of text they enclose -->
15<P><FONT COLOR = "red" SIZE = "+1" FACE = "Arial">We have
16designed this site to teach about the wonders of
17<EM>HTML</EM>.</FONT>
18
19<FONT COLOR = "purple" SIZE = "+2" FACE = "Verdana">We have been
20using <EM>HTML</EM> since <U>version<STRONG> 2.0</STRONG></U>,
21and we enjoy the features that have been added recently.</FONT>
22
23<FONT COLOR = "blue" SIZE = "+1" FACE = "Helvetica">It
24seems only a short time ago that we read our first <EM>HTML</EM>
25book.</FONT>
26
27<FONT COLOR = "green" SIZE = "+2" FACE = "Times">Soon you will
28know about many of the great new feature of HTML 4.0.</FONT></P>
29
30<H2 ALIGN = "center">Have Fun With the Site!</H2></P>
31
32</BODY>
© 2000 Deitel & Associates, Inc. All rights reserved.
33</HTML>
Using the FONT element to format text

CC2005 (10/11) Sem. 1 - L3 26


3.10 Special Characters, Horizontal
Rules and More Line Breaks
• Special characters
– Inserted in code form
– Format always &code;
• Ex. &amp;
– Insert an ampersand
– Codes often abbreviated forms of the character
– Codes can be in hex form
• Ex. &#38; to insert an ampersand
• Strikethrough with DEL element
• Superscript: SUP element
• Subscript: SUB element
CC2005 (10/11) Sem. 1 - L3 27
1 <HTML>
2 Outline
3
4 <!-- Inserting special characters -->
5 1. Special characters
6 <HEAD>
7 <TITLE>Internet and WWW How to Program - Contact Page</TITLE>
8 </HEAD>
2. Strikethrough
9
10 <BODY> 3. Superscript
11
12 <!-- Special characters are entered using the form &code; -->
13 <P>My email address is <A HREF = "mailto:[email protected]"> 4. Subscript
14 [email protected]</A>. Click on the address and your browser
15 will automatically open an email message and address it to my
16 address.</P>
17
18 <P>All information on this site is <STRONG>&copy;</STRONG>
19 Deitel <STRONG>&amp;</STRONG> Associates, 1999.</P>
20
21 <!-- Text can be struck out with a set of <DEL>...</DEL> -->
22 <!-- tags, it can be set in subscript with <SUB>...</SUB>, -->
23 <!-- and it can be set into superscript with <SUP...</SUP> -->
24 <DEL><P>You may copy up to 3.14 x 10<SUP>2</SUP> characters
25 worth of information from this site.</DEL><BR> Just make sure
26 you <SUB>do not copy more information</SUB> than is allowable.
27
28 <P>No permission is needed if you only need to use <STRONG>
29 &lt; &frac14;</STRONG> of the information presented here.</P>
30
31 </BODY>
© 2000
32 Deitel & Associates, Inc. All rights reserved.
</HTML>
Inserting special characters into HTML

CC2005 (10/11) Sem. 1 - L3 29


3.10 Special Characters, Horizontal
Rules and More Line Breaks (II)
• Horizontal rule
– <HR> tag
– Inserts a line break directly below it
– HR attributes:
• WIDTH
– Adjusts the width of the rule
– Either a number (in pixels) or a percentage
• SIZE
– Determines the height of the horizontal rule
– In pixels
• ALIGN
– Either left, right or center
• NOSHADE
– Eliminates default shading effect and displays horizontal
rule as a solid-color bar 30
CC2005 (10/11) Sem. 1 - L3
1<HTML>
2 Outline
3
4<!-- Line breaks and horizontal rules -->
5 1. Horizontal rules
6<HEAD> 1.1 HR attributes
7<TITLE>Internet and WWW How to Program - Horizontal Rule</TITLE>
8</HEAD>
9
10<BODY>
11<!-- Horizontal rules as inserted using the format: -->
12<!-- <HR WIDTH = ".." SIZE = ".." ALIGN = ".."> -->
13<HR WIDTH = "25%" SIZE = 1>
14<HR WIDTH = "25%" SIZE = 2>
15<HR WIDTH = "25%" SIZE = 3>
16
17<P ALIGN = "left"><STRONG>Size:</STRONG>4
18<STRONG>Width:</STRONG>75%
19<HR WIDTH = "75%" SIZE = "4" ALIGN = "left">
20
21<P ALIGN = "right"><STRONG>Size:</STRONG>12
22<STRONG>Width:</STRONG>25%
23<HR WIDTH = "25%" SIZE = "12" ALIGN = "right">
24
25<P ALIGN = "center"><STRONG>Size:</STRONG>8
26<STRONG>Width:</STRONG>50%
27<STRONG><EM>No shade...</EM></STRONG>
28<HR NOSHADE WIDTH = "50%" SIZE = "8" ALIGN = "center">
29
30</BODY>
© 2000 Deitel & Associates, Inc. All rights reserved.
31</HTML>
Using horizontal rules

CC2005 (10/11) Sem. 1 - L3 32


END
3.11 Unordered Lists
• Unordered list element
– Creates a list in which every line begins with a bullet
mark
– <UL>…</UL> tags
– Each item in unordered list inserted with the <LI> (list
item) tag
• Closing </LI> tag optional

CC2005 (10/11) Sem. 1 - L3 33


1<HTML>
3 Outline
4<!-- Unordered Lists -->
5
6<HEAD> 1. Unordered list
7<TITLE>Internet and WWW How to Program - Links</TITLE> 1.1 List items
8</HEAD>
9
10<BODY>
11
12<CENTER>
13<H2>Here are my favorite Internet Search Engines</H2>
14<P><STRONG>Click on the Search Engine address to go to that
15page.</STRONG></P>
16
17<!-- <UL> creates a new unordered (bullet) list -->
18<!-- <LI> inserts a new entry into the list -->
19<UL>
20<LI>Yahoo: <A HREF = "http://www.yahoo.com">
21http://www.yahoo.com</A></LI>
22
23<LI>Alta Vista: <A HREF = "http://www.altavista.com">
24http://www.alta-vista.com</A></LI>
25
26<LI>Ask Jeeves: <A HREF = "http://www.askjeeves.com">
27http://www.askjeeves.com</A></LI>
28
29<LI>WebCrawler: <A HREF = "http://www.webcrawler.com">
30http://www.webcrawler.com</A></LI>
31</UL>
32</CENTER>
33</BODY>
© 2000 Deitel & Associates, Inc. All rights reserved.
34</HTML>
Unordered lists with HTML

CC2005 (10/11) Sem. 1 - L3 35


3.12 Nested and Ordered Lists
• Nested list
– Contained in another list element
– Nesting the new list inside the original
• Indents list one level and changes the bullet type to reflect the
nesting
• Browsers
– Insert a line of whitespace after every closed list
• Indent each level of a nested list
– Makes the code easier to edit and debug

CC2005 (10/11) Sem. 1 - L3 36


1 <HTML>
2 Outline
3
4 <!-- Advanced Lists: nested and ordered -->
5 1. Nested lists
6 <HEAD> 1.1 Three levels of
7 <TITLE>Internet and WWW How to Program - List</TITLE>
nesting
8 </HEAD>
9 1.2 Close </UL> tags in
10 <BODY> appropriate places
11
12 <CENTER>
13 <H2><U>The Best Features of the Internet</U></H2>
14 </CENTER>
15
16 <UL>
17 <LI>You can meet new people from countries around
18 the world.</LI>
19 <LI>You have access to new media as it becomes public:</LI>
20
21 <!-- This starts a nested list, which uses a modified -->
22 <!-- bullet. The list ends when you close the <UL> tag -->
23 <UL>
24 <LI>New games</LI>
25 <LI>New applications </LI>
26
27 <!-- Another nested list, there is no nesting limit -->
28 <UL>
29 <LI>For business</LI>
30 <LI>For pleasure</LI>

© 2000 Deitel & Associates, Inc. All rights reserved.


31 </UL> <!-- This ends the double nested list -->
32 <LI>Around the clock news</LI> Outline
33 <LI>Search engines</LI>
34 <LI>Shopping</LI>
35 <LI>Programming</LI> 2. Ordered list
36 <UL>
37 <LI>HTML</LI>
38 <LI>Java</LI>
39 <LI>Dynamic HTML</LI>
40 <LI>Scripts</LI>
41 <LI>New languages</LI>
42 </UL>
43 </UL> <!-- This ends the first level nested list -->
44 <LI>Links</LI>
45 <LI>Keeping in touch with old friends</LI>
46 <LI>It is the technology of the future!</LI>
47 </UL> <!-- This ends the primary unordered list -->
48
49 <BR><CENTER><H2>My 3 Favorite <EM>CEO's</EM></H2></CENTER>
50
51 <!-- Ordered lists are constructed in the same way as -->
52 <!-- unordered lists, except their starting tag is <OL> -->
53 <OL>
54 <LI>Bill Gates</LI>
55 <LI>Steve Jobs</LI>
56 <LI>Michael Dell</LI>
57 </OL>
58
59 </BODY>
60 </HTML>

© 2000 Deitel & Associates, Inc. All rights reserved.


Nested and ordered lists in HTML

CC2005 (10/11) Sem. 1 - L3 39


3.12 Nested and Ordered Lists (II)
• Ordered list element
– <OL>…</OL> tags
– By default, ordered lists use decimal sequence numbers
• (1, 2, 3, …)
– To change sequence type, use TYPE attribute in <OL> opening tag
• TYPE = “1” (default)
– Decimal sequence (1, 2, 3, …)
• TYPE = “I”
– Uppercase Roman numerals (I, II, III, …)
• TYPE = “i”
– Lowercase Roman numerals (i, ii, iii, …)
• TYPE = “A”
– Uppercase alphabetical (A, B, C, …)
• TYPE = “a”
– Lowercase alphabetical (a, b, c, …)
CC2005 (10/11) Sem. 1 - L3 40
1<HTML>
2 Outline
3
4<!-- Different Types of Ordered Lists -->
5 1. OL element
6<HEAD> 1.1 TYPE attribute
7<TITLE>Internet and WWW How to Program - List</TITLE>
8</HEAD>
9
10<BODY>
11
12<CENTER>
13<H2>Web Site Outline</H2>
14</CENTER>
15
16<!-- Change the character style by specifying it in -->
17<!-- <OL TYPE = "style"> OR <LI TYPE = "style"> as -->
18<!-- decimal=1, uppercase Roman=I, lowercase Roman=i -->
19<!-- uppercase Latin=A, lowercase Latin=a -->
20<OL>
21<LI>Home page</LI>
22<LI>Links page</LI>
23 <OL TYPE = "I">
24 <LI>Links to search engines</LI>
25 <LI>Links to information sites</LI>
26 <OL TYPE = "A">
27 <LI>News sites</LI>
28 <OL>
29 <LI TYPE = "i">TV based</LI>
30 <OL TYPE = "a">

© 2000 Deitel & Associates, Inc. All rights reserved.


31 <LI>CNN</LI>
32 <LI>Headline News</LI> Outline
33 </OL>
34 <LI TYPE = "i">Text based</LI>
35 <OL TYPE = "a">
36 <LI>New York Times</LI>
37 <LI>Washington Post</LI>
38 </OL>
39 </OL>
40 <LI>Stock sites</LI>
41 </OL>
42 <LI>Links to "fun" sites</LI>
43 </OL>
44 <LI>Feedback page</LI>
45 <LI>Contact page</LI>
46 <LI>HTML Example Pages</LI>
47 </OL>
48
49 </BODY>
50 </HTML>

© 2000 Deitel & Associates, Inc. All rights reserved.


Different types of ordered lists

CC2005 (10/11) Sem. 1 - L3 43

You might also like