Sperimentazioni di Tecnologie e Comunicazioni Multimediali: Lezione 3

1. SPERIMENTAZIONI DI
TECNOLOGIE E
COMUNICAZIONI MULTIMEDIALI
Lesson 3: BASE HTML & CSS
Salvatore Iaconesi
salvatore.iaconesi@artisopensource.net

2. This lesson is about
HTML & CSS

3. The course is not about
HTML & CSS
But we need them to build
our web and mobile experiences

4. ... so here is a large tutorial
so that we know a little more
about HTML & CSS
We will use these things in class multiple times!
Please study this tutorial well, so that you'll be able to use your time better in class!
(and don't be afraid about mistakes...
things will turn out to be really easy the third/fourth/fifth time you do them)

5. HTML = structure of a page
CSS = aesthetics of a page

6. HTML

7. In HTML you define structure!
Is this a title?
Is this a paragraph of text?
Is this box a user profile?
Etcetera...
In HTML you don't care if it's green or blue,
you care about what each object MEANS
and about what is the STRUCTURE and ROLE of an
object of a page

8. HTML is a DOCUMENT!
HTML is what is called a MARKUP LANGUAGE
MARKUP languages describe documents in terms of their
- structures
- links
- relations
- roles
HTML describes the STRUCTURE of a web page
(and, since a little while, of a mobile web page, too)
http://en.wikipedia.org/wiki/Markup_language
http://en.wikipedia.org/wiki/Html

9. Each document (and, thus, HTML documents) have:
META DATA & DATA
META DATA: describes what is in the document (ex.: title, author, date, keywords)
DATA: is the content of the document (ex.: text, images, videos, links)

10. META DATA is disseminated
all over your HTML documents
It is used for various purposes
SEO (Search Engine Optimization)
Internationalization
Access for users with disabilities
Semantic web
And loads more....

11. SEO (Search Engine Optimization)
It is not acceptable any more to have a website that is not optimized for
search engines.
If your site is not reachable on search engines it does not exist.
Even more: SEO now reaches into Social Networks (Facebook, Twitter...)
The trend is:
“Classical websites (however beautiful and interactive) are progressively
less useful (tending to zero).
Websites today MUST: connect to social networks, establish dialogues,
must be readable or easily translatable by people across languages and
cultures, must be searchable, taggable, aggregatable, indexable.”

12. Internationalization
You don't need to translate everything, but you NEED to make everything easily
Translatable to your users (for example by using Google Translate services).
In your meta data:
- you need to define the main language of the page
- you need to define the correct character set of the page (UTF-8 if you're not sure)
- you need to use plain, readable text wherever you can
- you need to include meta data even in tags wherever you can
Try avoiding Flash whenever you can
(HTML5 and CSS3 do wonders! Use these if you can)

13. Access for disabilities
This is how a blind person sees your webpage

14. Access for disabilities or
education issues
Lots of tools exist nowadays to make the world an enormously better place for
People who can't see, hear, or for people who may be a bit more unlucky than
You are, and maybe they don't know how to read because they didn't have a chance
To go to school for some reason.
You can let all of them experience the beautiful things you do, or the beautiful websites
You will create for your clients. If you just use the right metadata at the right spot.
for example giving nice titles to images, or adding descriptions to the elements of
Your page, or by describing if an element on page is a title or a subtitle, etc.
They will experience a wonderful thing and the world will be much nicer
(and you will also be the first on Google search if you use all this metadata)
USE YOUR META DATA!

15. Semantic web
Use meta data to define the roles of the elements on your page.
Automatic systems will be able to read your page and store it correctly
into databases that hold the description of the knowledge on the web
This is the future of how we will access information on the web:
- web content will be indexed semantically
- we will search not for words, but for meanings
- we will find what we want (if the owner of the website remembered to use meta data)
http://en.wikipedia.org/wiki/Semantic_Web

16. THIS IS THE MOST
IMPORTANT THING
ABOUT WEB PAGES!
:)
IF YOU UNDERSTAND THIS
YOUR LIFE WILL BE EASIER

17. HOW TO ASSIGN ROLES AND
SEMANTIC TYPES TO THE ELEMENTS
ON YOUR INTERFACES
It is useful to assign CLASS and/or ID to the elements of your page
CLASS and ID describe the role of an element in your page
Role
ex. of roles: title, first paragraph, image caption, citation, box heading....
Role represents what the element represents in the structure of the page,
what is its meaning, its function
We can use the definition of the role of an element in HTML to describe its
function in the structure of the page, and then we will use it as a reference
in CSS to assign its representation (ex.: we will be able to say things like
“each title has a yellow background”)

18. CLASS ID
It is a TYPE (a title, a paragraph...) It is an identity (the THIRD title)
There can be more than one on each page There can be one of each in a page
(ex.: all the titles shown in the page) (ex.: there will be only 1 “THIRD title” on
a page)
<div class=”title”>...</div> <div id=”title-3”>...</div>
You can use same class on multiple You can use an ID in only one element
Elements
Each element can be of more than Each element can have only 1 ID
one class
<div class=”title news-section”>...</div> An element can have both ID and class
<div id=”title-3” class=”title”>...</div>
(this would probably mean that this div
Is a title and that it is exactly the third-title)

19. WHY DO WE NEED CLASS AND ID?
To define the semantic (meaning) of our pages (so that, for example, Google
can read them and index them properly)
To define style with CSS (through CSS we could say that all titles on our pages
are yellow, but the first one will be also with a red background --> we need
CLASS and ID to do that)
To make our page more active with javascript (for example we could like to have
an animation on all our titles when we enter a page --> we will use CLASS from
Javascript to create the animation; we could want a different one on the first title
alone --> we will use ID in this case)

20. WHAT IS INSIDE A WEB PAGE?

21. .... document setup ....
<html>
<head>
... the parts of the heading...
</head>
<body>
.... your content ...
</body>
</html>

22. DOCUMENT SETUP
(you probably will never write these things by hand,
but it is nice and useful to know what they mean)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
HTML is one of the standards promoted by W3C (World Wide Web Consortium)
http://w3c.com
These lines certificate that your document comply with the standards
VERY IMPORTANT for search engines and compatibility with many browsers

23. HEADING
(you probably will never write these things by hand,
but it is nice and useful to know what they mean)
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
It describes the type of content of the page
This format of description of contents in your page is very used and is called mime-type
mime-types describe content in multiple places and are like
type/specific-format
For example:
text/html
image/jpeg
image/png
The second parameter (charset) indicates the type of characters that will be used in
the page. If you don't know, use UTF-8 (an international set with accents etc.)

24. HEADING
<title>this is the title of my page</title>
It is the title of the web page
Appears on top of browser window
Very important for search engines
For SEO: use keywords in title and try to have the same keywords appear 4 or 5 times
in the body of the page as well

25. HEADING
<meta name="description" content="a description" />
<meta name="keywords" content="some keywords" />
These two meta tags used to be very important for SEO, but now they are only used
to see if they are coherent with the rest of your page (if you have “barak obama” as
a keyword and “barak obama” is found nowhere in your website, it will result
in a penalty on search engines)
Description should be about 140-160 characters long
Keywords are separated by commas (,) and should be around 6-12
You can use multiple words as keywords (for example “art”, “contemporary art” and
“contemporary art in new york” are all valid keywords)

26. HEADING
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
It is the link to an external style sheet
Try to use external style sheets, so you only write them once and use them in various pages
External stylesheets are good also because they are put in the cache and so page
loading time is better
media parameter can show what this stylesheet is for:
- “screen” will be used for output on monitor
- “print” will be used when you print a webpage
- “all” will be used on all media
There are a lot more values --> look on w3c.com

27. HTML CONTENT

28. HTML is made of TAGS:
<div ... > ... some content .... </ div>
<br />
Tags are defined by angular parenthsis and they can surround some content
(as in the first case) or they can be in a single part (as in the second case)
Tags can have parameters, called attributes:
<img src=”...the address of an image...” width=”100” height=”300” />
'width=”100”' is an attribute of the img tag
Tags can contain other tags (as in the first example on top of the slide)

29. SOME IMPORTANT TAGS

30. h1,h2,h3,h4,h5,h6
They are headings, they are used as titles, subtitles, sub-sub-titles etcetera
H1 should be used only once per page (main title)
H2 to h6 can be used as many times as you want, best if used in order
ex.: h4 is subtitle of h3 which is subtitle of h2
<h2>title</h2
<h3>sub-title</h3>
<h4>sub-sub-title</h4>

31. Ordered (ol) and unordered (ul) lists, and list elements (li)
Lists are very important and by manipulating them through CSS you can
do all sorts of things (animated menus, pieces of interfaces...) that are also
extremely well optimized for SEO purposes
Unordered lists are bullet points
<ul>
<li>I am the first list element</li>
<li>I am the secondlist element</li>
</ul>
Ordered lists are numbered sequences
<ol>
<li>i will be element number 1</li>
<li>i will be element number 2</li>
</ol>

32. links
<a href=”...internet address...” target=”_blank” title=”a title for the link”>CLICK</a>
href: the internet address to which the link points
target: where will the link open (_blank opens a new window, _self opens in the
current window, if you specify a name, it opens a window with that name);
it is an optional parameter
title: sets a title for the link; good for SEO

33. span and div
The span and div tags are used to group things together, so that you can use them in
CSS to create boxes, highlights, position them around the page, animate them etecetera.
span is usually used in-line, for example to group a set of words together if you want
to add a highlight to them
In this sentence <span class=”highlighted-text”>these words are highlighted</span>.
div is a block element, meaning that it represents an area of the screen
<div class=”floater”>I can make the text in this DIV appear all over the page, wit CSS</div>

34. A SET OF GREAT ADVICES:
http://www.htmldog.com/guides/htmladvanced/recap/
Separating meaning and presentation
HTML was never meant to be used for presentation, but user-agents incorporated elements that formatted text and developers found ways to manipulate layout.
With the power of CSS it is now no longer necessary to style using HTML and meaning (HTML) can now be completely separated from presentation (CSS).
There are a number of benefits to this - it should greatly decrease file sizes, it has the flexibility of a central style sheet that applies to the entire website rather
than an individual page and it should also produce pages of much greater accessibility.
Following this philosophy basically means you shouldn't style anything within the HTML. Tags such as font or attributes such as bgcolor should not be used.
Even the border attribute inside an img tag is no longer valid in XHTML 1.1. This shouldn't be a problem - there is no styling that can be done in HTML that can't
be done, and done better, with CSS.
It isn't just about taking away the presentation from HTML, the application of meaning means specific HTML tags should be used when appropriate. For example,
h1, h2 etc. should be used for headings - you should not just use CSS to make fonts larger.
A good guide is to see if a visual browser, with its default styling, presents the document well without a style sheet.
Tables should not be used for layout - tables are designed to display tabular data. This is perhaps the most difficult technique for experienced HTMLer's to get
used to as it completely changes the way the HTML has traditionally been structured in the past. This approach greatly reduces the size of the page and, due to
the resulting linear code, it becomes much more accessible.
Tags
In XHTML all tags should be lowercase and must be closed. For those tags that do not have closing tags (such as br and img), they must close themselves with a '/'
at the end (such as <br />). Note that there should be a space before the forward-slash.
The markup must be well formed, with elements properly nested (for example, <strong><em>this</em></strong>, not <strong><em>this</strong></em>).
All documents must have html, head, title and body elements. They must also start with a document type declaration.
The body of the document should start with p, h1, h2, h3, h4, h5, h6, div, pre, address, ins or del.
Attributes
All attributes must also be lowercase and their values in quotation marks.
Minimized attributes are not allowed (such as <input type="checkbox" checked />). Traditionally minimized attributes must be given the value that is
the same as the name of the attribute (such as <input type="checkbox" checked="checked" />).
The name attribute is no longer valid (except in form elements) and should be replaced with id.
The target attribute is not a valid attribute. Praise be. It was daft anyway.
The alt attribute in the img tag is compulsory.
Accessibility
The reasons for making web pages accessible to users with disabilities are quite self-evident. Not only is it moralistic, but it will also benefit our future as
web users grow older and the acuteness of the senses degenerates. Accessibility isn't just about accommodating people with severe disabilities, it is about
making it easier for a great number of people with minor (predominantly visual) impairments.
There are increasing legal implications such as the introduction of 'Section 508' in the US that makes a (half arsed) attempt to enforce certain accessibility
initiatives and in the UK, all government websites must reach a specified degree of accessibility. How long until similar legislation is applied to general commercial
websites, as it is for buildings?
If you follow the above practices, your HTML should already be highly accessible to users with disabilities. There are further initiatives that can make your web pages
even more accessible (for example, see the Accessible Links and Accessible Forms pages) and it really isn't that difficult.

35. ANOTHER SET OF GREAT ADVICES: how to make links accessible
http://www.htmldog.com/guides/htmladvanced/links/

36. CSS

37. How to apply CSS
In-line (but don't use it)
<p style="color: red">text</p>
This will make that specific paragraph red.
Embedded (but don't use this, too!), or internal styles are used for the whole page. Inside the head tags,
the style tags surround all of the styles for the page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
p{
color: red;
}
a{
color: blue;
}
</style>
...
This will make all of the paragraphs in the page red and all of the links blue.

38. How to apply CSS
External (use this!)
External styles are used for the whole, multiple-page website. There is a separate CSS file,
which will simply look something like:
p{
color: red;
}
a{
color: blue;
}
If this file is saved as "web.css" then it can be linked to in the HTML like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="web.css" />
...

39. Selectors
In CSS you apply style to elements you select from a HTML page
body{
background: #000000;
}
means that the background of the page should be black
div.top-block{
font-size: 12pt;
}
means that all the div elements with class=”top-block” will have a font of 12pt
div#highlight-block{
color: #FFFF00;
}
means that the div element with id=”highlight-block” will have text colored in yellow

40. Selectors from class and ID (continued)
GROUPING
If you have:
h2 {
color: red;
}
.thisOtherClass {
color: red;
}
.yetAnotherClass {
color: red;
}
You could make it:
h2, .thisOtherClass, .yetAnotherClass {
color: red;
}

41. Selectors from class and ID (continued)
NESTING
you can specify properties to selectors within other selectors.
#top {
background-color: #ccc;
padding: 1em
}
#top h1 {
color: #ff0;
}
#top p {
color: red;
font-weight: bold;
}
Removes the need for classes or ID's if it is applied to HTML that looks something like this:
<div id="top">
<h1>Chocolate curry</h1>
<p>This is my recipe for making curry purely with chocolate</p>
<p>Mmm mm mmmmm</p>
</div>
This is because, by separating selectors with spaces, we are saying
'h1 inside ID top is colour #ff0' and 'p inside ID top is red and bold'.
This can get quite complicated (because it can go for more than two levels, such as this
inside this inside this inside this etc.) and may take a bit of practice.

42. Selectors from class and ID (continued)
Pseudo classes
link is for an unvisited link.
visited is for a link to a page that has already been visited.
active is for a link when it is gains focus (for example, when it is clicked on).
hover is for a link when the cursor is held over it.
They are used with “ : “ to indicate them
a.snowman:link {
color: blue;
}
a.snowman:visited {
color: purple;
}
a.snowman:active {
color: red;
}
a.snowman:hover {
text-decoration: none;
color: blue;
background-color: yellow;
}

43. Dimensions
There are many property-specific units for values used in CSS, but there are some
general units that are used in a number of properties and it is worth familiarising
yourself with these before continuing.
em (such as font-size: 2em) is the unit for the calculated size of a font.
So "2em", for example, is two times the current font size.
px (such as font-size: 12px) is the unit for pixels.
pt (such as font-size: 12pt) is the unit for points.
% (such as font-size: 80%) is the unit for... wait for it... percentages.
Other units include pc (picas), cm (centimetres), mm (millimetres) and in (inches).
When a value is zero, you do not need to state a unit.
For example, if you wanted to specify no border, it would be border: 0.

44. How to specify colours
red
Is the same as
rgb(255,0,0)
Which is the same as
rgb(100%,0%,0%)
Which is the same as
#ff0000
Which is the same as
#f00
There are 17 valid predefined colour names.
They are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange,
purple, red, silver, teal, white, and yellow.
transparent is also a valid value.

45. How to specify colours
The three values in the rbg value are from 0 to 255, 0 being the lowest level
(for example no red), 255 being the highest level (for example full red).
These values can also be a percentage.
Hexadecimal (previously and more accurately known as 'sexadecimal') is a base-16
number system. We are generally used to the decimal number system
(base-10, from 0 to 9), but hexadecimal has 16 digits, from 0 to f.
The hex number is prefixed with a hash character (#) and can be three or six digits
in length. Basically, the three-digit version is a compressed version of the
six-digit (#f00 becomes #ff0000, #c96 becomes #cc9966 etc.).
The three-digit version is easier to decipher (the first digit, like the first value in
rgb, is red, the second green and the third blue) but the six-digit version gives you
more control over the exact colour.

46. How to specify colours
h1 {
color: #ffc;
background-color: #009;
}
or
h1 {
color: blue;
background-color: yellow;
}
or
h1 {
color: rgb(0,100,200);
background-color: transparent;
}

47. TEXT
font-family
This is the font itself, such as Times New Roman, Arial, or Verdana.
The font you specify must be on the user's computer, so there is little point in using
obscure fonts. There are a select few 'safe' fonts (the most commonly used are arial,
verdana and times new roman), but you can specify more than one font, separated
by commas. The purpose of this is that if the user does not have the first font you
specify, the browser will go through the list until it finds one it does have. This is useful
because different computers sometimes have different fonts installed.
So
font-family: arial, helvetica
for example, is used so that similar fonts are used on
PC (which traditionally has arial, but not helvetica) and Apple Mac (which, traditionally,
does not have arial and so helvetica, which it does normally have, will be used).
Note: if the name of a font is more than one word, it should be put in quotation marks,
such as font-family: "Times New Roman".

48. TEXT
font-size
The size of the font.
Be careful with this - text such as headings should not just be a paragraph in a
large font; you should still use headings (h1, h2 etc.) even though, in practice,
you could make the font-size of a paragraph larger than that of a heading
(not recommended for sensible people).

49. TEXT
font-weight
This states whether the text is bold or not.
In practice this usually only works as font-weight: bold or font-weight: normal
In theory it can also be
bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 or 900
but seeing as many browsers shake their heads and say "I don't think so",
it's safer to stick with bold and normal.

50. TEXT
font-style
This states whether the text is italic or not.
It can be font-style: italic or font-style: normal
text-decoration
This states whether the text is underlined or not. This can be:
text-decoration: overline, which places a line above the text.
text-decoration: line-through, strike-through, which puts a line through the text.
text-decoration: underline should only be used for links because users generally
expect underlined text to be links.
This property is usually used to decorate links, such as specifying no underline
with text-decoration: none

51. TEXT
text-transform
text-transform: capitalize turns the first letter of every word into uppercase.
text-transform: uppercase turns everything into uppercase.
text-transform: lowercase turns everything into lowercase.
text-transform: none does not apply any transform.
TEXT SPACING
The letter-spacing and word-spacing properties are for spacing between letters
or words. The value can be a length or normal.
The line-height property sets the height of the lines in an element, such as a
paragraph, without adjusting the size of the font. It can be a number (which specifies
a multiple of the font size, so '2' will be two times the font size, for example), a length,
a percentage or normal.
The text-align property will align the text inside an element to left, right, center or justify.
The text-indent property will indent the first line of a paragraph, for example,
to a given length or percentage.

52. MARGIN and PADDING
margin and padding are the two most commonly used properties for spacing-
out elements.
A margin is the space outside of the element, whereas
padding is the space inside the element.
h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 1em;
padding: 3em;
}
You will see that this leaves one-character width space around the secondary
header and the header itself is fat from the three-character width padding.
The four sides of an element can also be set individually with these CSS properties
margin-top, margin-right, margin-bottom, margin-left,
padding-top, padding-right, padding-bottom and padding-left

53. BORDER
To make a border around an element, all you need is border-style.
The values can be solid, dotted, dashed, double, groove, ridge, inset and outset.
border-width sets the width of the border, which is usually in pixels.
There are also properties for
border-top-width, border-right-width, border-bottom-width and border-left-width
border-color sets the colour.
h2 {
border-style: dashed;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: red;
}
This will make a red dashed border around all HTML secondary headers
(the h2 element) that is 3 pixels wide on the top and bottom and 10 pixels wide
on the left and right (these having over-ridden the 3 pixel wide width of
the entire border).

54. Background images
body {
background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}
This amalgamates these properties:
background-color, is the color of the background where there is no image.
background-image, is the internet address of the image.
background-repeat, is how the image repeats itself.
This can be
repeat (equivalent to a 'tile' effect across the whole background),
repeat-y (repeating on the 'y-axis', above and below),
repeat-x (repeating on the 'x-axis', side-by-side) or
no-repeat (which shows just one instance of the image).
background-position, which can be top, center, bottom, left, right
or any sensible combination, such as above.
Background-images can be used in most HTML elements - not just for the whole
page (body) and can be used for simple but effective results, such as shaped corners.

55. Display property
inline elements are displayed inline to follow the flow of a line.
block puts a line break before and after the element.
none doesn't display the element
div.blocks-to-be-hidden{
display: none;
}
(all these blocks will be hidden)

56. Position
The position property is used to define whether an element is
absolute, relative, static or fixed.
The value static is the default value for elements and renders the position in
the normal order of things, as they appear in the HTML.
relative is much like static, but the element can be offset from its original position
with the properties top, right, bottom and left.
absolute pulls an element out of the normal flow of the HTML and delivers it to
a world all of its own.
In this crazy little world, the absolute element can be placed anywhere on
the page using top, right, bottom and left.
fixed behaves like absolute, but it will absolutely position an element in reference
to the browser window as opposed to the web page, so, theoretically, fixed
elements should stay exactly where they are on the screen even when
the page is scrolled.
Why theoretically?
Why else - this works great in browsers such as Mozilla and Opera, but
in IE it doesn't work at all.

57. Floating
Floating an element will shift it to the right or left of a line, with surrounding
content flowing around it.
Floating is normally used to position smaller elements within a page,
but it can also be used with bigger chunks, such as navigation columns.
Taking the HTML example below, you could apply the following CSS:
#navigation {
float: left;
width: 10em;
}
#navigation2 {
float: right;
width: 10em;
}

58. Media Types
The media at-rule will apply its contents to a specified media, such as print. For example:
@media print {
body {
font-size: 10pt;
font-family: times new roman, times, serif;
}
#navigation {
display: none;
}
}
The media-type can be:
all - for every media under, over, around and in the sun.
aural - for speech synthesizers.
handheld - for handheld devices.
print - for printers.
projection - for projectors.
screen - for computer screens.
You can also use braille, embossed, tty or tv

59. SOME LINKS

60. http://www.w3.org/
The World Wide Web Consortium (standards, reference, guides)
http://www.projectseven.com/tutorials/index.htm
Tutorials
http://www.bluerobot.com/web/layouts/
Simple layouts using CSS
http://www.glish.com/css/
CSS techniques
http://realworldstyle.com/
CSS tricks
http://www.csszengarden.com/
Learn how CSS can radically change a website

61. TO DO

62. TAKE THIS SIMPLE WEBPAGE AND MAKE IT BEAUTIFUL USING CSS
(note: you have to add the link to the CSS file as shown in the first slides)
<html>
<head>
<title>This website is beautiful</title>
</head>
<body>
<div id="container">
<div id="first-block">
<div class="testo">THIS</div>
</div>
<div id="second-block">
<div class="testo">WEBSITE</div>
</div>
<div id="third-block">
<div class="testo">IS BEAUTIFUL</div>
</div>
</div>
</body>
</html>