First part of an introduction to HTML5 and related technologies

1. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Introduction to HTML5: Part I
Apostolos Syropoulos
Xanthi, Greece
asyropoulos@yahoo.com
Introduction to HTML5 for members of the
Erasmus+ founded project GAMES

2. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Presentation Outline
1 Markup Languages
2 The Web and HTML
3 HTML5 Document Structure
4 Finale

3. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is markup?

4. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is markup?
Markup a sequence of characters that you insert at certain places
in a text or word processing file to indicate how the file should
look when it is printed or displayed or to describe the document’s
logical structure.

5. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is markup?
Markup a sequence of characters that you insert at certain places
in a text or word processing file to indicate how the file should
look when it is printed or displayed or to describe the document’s
logical structure.

6. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Examples of Textual markup

7. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Examples of Textual markup
LATEX markup:
normal textbf{bold} normal again

8. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Examples of Textual markup
LATEX markup:
normal textbf{bold} normal again
troff markup:
normal
.ft B
bold
.ft R
normal again

9. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Examples of Textual markup
LATEX markup:
normal textbf{bold} normal again
troff markup:
normal
.ft B
bold
.ft R
normal again
HTML markup:
normal <b>bold</b> normal again

10. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Examples of Textual markup
LATEX markup:
normal textbf{bold} normal again
troff markup:
normal
.ft B
bold
.ft R
normal again
HTML markup:
normal <b>bold</b> normal again
Wiki markup:
normal '''bold''' normal again

11. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Examples of Textual markup (cont.)

12. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Examples of Textual markup (cont.)
Word2007 markup:
<w:r><w:rPr><w:lang w:val="en-US"/></w:rPr>
<w:t xml:space="preserve">Normal </w:t></w:r>
<w:r w:rsidRPr="00F166C3"><w:rPr><w:b/>
<w:lang w:val="en-US"/></w:rPr><w:t>bold</w:t></w:r>
<w:proofErr w:type="gramEnd"/>
<w:r w:rsidRPr="00F166C3"><w:rPr><w:b/><w:lang
w:val="en-US"/></w:rPr> <w:t xml:space="preserve">
</w:t></w:r><w:r><w:rPr><w:lang w:val="en-US"/>
</w:rPr><w:t>normal again</w:t></w:r>

13. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Examples of Textual markup (cont.)
Word2007 markup:
<w:r><w:rPr><w:lang w:val="en-US"/></w:rPr>
<w:t xml:space="preserve">Normal </w:t></w:r>
<w:r w:rsidRPr="00F166C3"><w:rPr><w:b/>
<w:lang w:val="en-US"/></w:rPr><w:t>bold</w:t></w:r>
<w:proofErr w:type="gramEnd"/>
<w:r w:rsidRPr="00F166C3"><w:rPr><w:b/><w:lang
w:val="en-US"/></w:rPr> <w:t xml:space="preserve">
</w:t></w:r><w:r><w:rPr><w:lang w:val="en-US"/>
</w:rPr><w:t>normal again</w:t></w:r>
LibreOffice/OpenOffice use similar markup.

14. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is HyperText?

15. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is HyperText?
Hyper- generally means “above, beyond”, thus hypertext is
something that goes beyond the limitations of ordinary text (e.g.,
it can be non-sequential).

16. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is HyperText?
Hyper- generally means “above, beyond”, thus hypertext is
something that goes beyond the limitations of ordinary text (e.g.,
it can be non-sequential).
Hypertext is text which contains links to other information. The
term was coined by Theodor Holm “Ted” Nelson around 1963.

17. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is HyperText?
Hyper- generally means “above, beyond”, thus hypertext is
something that goes beyond the limitations of ordinary text (e.g.,
it can be non-sequential).
Hypertext is text which contains links to other information. The
term was coined by Theodor Holm “Ted” Nelson around 1963.
Software programs such as dictionaries and encyclopedias have
long used hypertext in their definitions allowing readers to
quickly navigate content.

18. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is HyperText?
Hyper- generally means “above, beyond”, thus hypertext is
something that goes beyond the limitations of ordinary text (e.g.,
it can be non-sequential).
Hypertext is text which contains links to other information. The
term was coined by Theodor Holm “Ted” Nelson around 1963.
Software programs such as dictionaries and encyclopedias have
long used hypertext in their definitions allowing readers to
quickly navigate content.
HyperMedia is a term used for hypertext which is not constrained
to be text: it can include graphics, video and sound, etc. Ted
Nelson coined this term too.

19. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is HyperText?
Hyper- generally means “above, beyond”, thus hypertext is
something that goes beyond the limitations of ordinary text (e.g.,
it can be non-sequential).
Hypertext is text which contains links to other information. The
term was coined by Theodor Holm “Ted” Nelson around 1963.
Software programs such as dictionaries and encyclopedias have
long used hypertext in their definitions allowing readers to
quickly navigate content.
HyperMedia is a term used for hypertext which is not constrained
to be text: it can include graphics, video and sound, etc. Ted
Nelson coined this term too.

20. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Markup Language?

21. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Markup Language?
A set of rules specifying how to markup content so to control its
structure, formatting, or the relationship among its parts.

22. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Markup Language?
A set of rules specifying how to markup content so to control its
structure, formatting, or the relationship among its parts.
The most widely used markup languages are SGML, HTML, and
XML.

23. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Markup Language?
A set of rules specifying how to markup content so to control its
structure, formatting, or the relationship among its parts.
The most widely used markup languages are SGML, HTML, and
XML.
The Standard Generalized Markup Language (SGML), is a
language for defining markup languages. HTML is one such
“application” of SGML.

24. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Markup Language?
A set of rules specifying how to markup content so to control its
structure, formatting, or the relationship among its parts.
The most widely used markup languages are SGML, HTML, and
XML.
The Standard Generalized Markup Language (SGML), is a
language for defining markup languages. HTML is one such
“application” of SGML.
XML stands for eXtensible Markup Language.

25. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Markup Language?
A set of rules specifying how to markup content so to control its
structure, formatting, or the relationship among its parts.
The most widely used markup languages are SGML, HTML, and
XML.
The Standard Generalized Markup Language (SGML), is a
language for defining markup languages. HTML is one such
“application” of SGML.
XML stands for eXtensible Markup Language.
XML was designed to store and transport data.

26. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Markup Language?
A set of rules specifying how to markup content so to control its
structure, formatting, or the relationship among its parts.
The most widely used markup languages are SGML, HTML, and
XML.
The Standard Generalized Markup Language (SGML), is a
language for defining markup languages. HTML is one such
“application” of SGML.
XML stands for eXtensible Markup Language.
XML was designed to store and transport data.
XML was designed to be both human- and machine-readable.

27. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Markup Language?
A set of rules specifying how to markup content so to control its
structure, formatting, or the relationship among its parts.
The most widely used markup languages are SGML, HTML, and
XML.
The Standard Generalized Markup Language (SGML), is a
language for defining markup languages. HTML is one such
“application” of SGML.
XML stands for eXtensible Markup Language.
XML was designed to store and transport data.
XML was designed to be both human- and machine-readable.
The HyperText Markup Language or just HTML is the de facto
standard for the presentation of information over the Web.

28. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
History of HTML

29. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
History of HTML
Tim Berners-Lee created what we call the Web while he was
working at CERN.

30. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
History of HTML
Tim Berners-Lee created what we call the Web while he was
working at CERN.
He created HTML and the HyperText Transfer Protocol (HTTP) and
designed and implemented the first web browser.

31. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
History of HTML
Tim Berners-Lee created what we call the Web while he was
working at CERN.
He created HTML and the HyperText Transfer Protocol (HTTP) and
designed and implemented the first web browser.
On October 1991 “HTML Tags” was made available.

32. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
History of HTML
Tim Berners-Lee created what we call the Web while he was
working at CERN.
He created HTML and the HyperText Transfer Protocol (HTTP) and
designed and implemented the first web browser.
On October 1991 “HTML Tags” was made available.
A description of version 2.0 of HTML was published on November
1995.

33. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
History of HTML
Tim Berners-Lee created what we call the Web while he was
working at CERN.
He created HTML and the HyperText Transfer Protocol (HTTP) and
designed and implemented the first web browser.
On October 1991 “HTML Tags” was made available.
A description of version 2.0 of HTML was published on November
1995.
HTML 3.2 was published on January 1997.

34. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
History of HTML
Tim Berners-Lee created what we call the Web while he was
working at CERN.
He created HTML and the HyperText Transfer Protocol (HTTP) and
designed and implemented the first web browser.
On October 1991 “HTML Tags” was made available.
A description of version 2.0 of HTML was published on November
1995.
HTML 3.2 was published on January 1997.
HTML 4.0 was published on December 1997.

35. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
History of HTML
Tim Berners-Lee created what we call the Web while he was
working at CERN.
He created HTML and the HyperText Transfer Protocol (HTTP) and
designed and implemented the first web browser.
On October 1991 “HTML Tags” was made available.
A description of version 2.0 of HTML was published on November
1995.
HTML 3.2 was published on January 1997.
HTML 4.0 was published on December 1997.
HTML5 was published on October 2014 while HTML 5.1 was
published on November 2016.

36. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is the HTTP?

37. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is the HTTP?
It is a protocol that allows browsers to fetch web pages.

38. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is the HTTP?
It is a protocol that allows browsers to fetch web pages.
Each server connected to the Internet is like a fortress.

39. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is the HTTP?
It is a protocol that allows browsers to fetch web pages.
Each server connected to the Internet is like a fortress.
The fortress has a number of communication ports.

40. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is the HTTP?
It is a protocol that allows browsers to fetch web pages.
Each server connected to the Internet is like a fortress.
The fortress has a number of communication ports.
Each port is numbered and the port for web pages is number 80.

41. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is the HTTP?
It is a protocol that allows browsers to fetch web pages.
Each server connected to the Internet is like a fortress.
The fortress has a number of communication ports.
Each port is numbered and the port for web pages is number 80.
A client sends a request to a server’s port 80.

42. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is the HTTP?
It is a protocol that allows browsers to fetch web pages.
Each server connected to the Internet is like a fortress.
The fortress has a number of communication ports.
Each port is numbered and the port for web pages is number 80.
A client sends a request to a server’s port 80.
The server replies by sending the HTML file and accompanying
data files.

43. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is the HTTP?
It is a protocol that allows browsers to fetch web pages.
Each server connected to the Internet is like a fortress.
The fortress has a number of communication ports.
Each port is numbered and the port for web pages is number 80.
A client sends a request to a server’s port 80.
The server replies by sending the HTML file and accompanying
data files.
The web page is displayed locally. Let’s see what goes in the
backstage…

44. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTTP in Action!
apostolo@adalind>> telnet reudic.eu 80
Trying 192.185.173.40...
Connected to reudic.eu.
Escape character is '^]'.
GET /index.html HTTP/1.1
host: reudic.eu
HTTP/1.1 200 OK
Server: nginx/1.12.2
Date: Mon, 11 Dec 2017 19:24:17 GMT
Content-Type: text/html
Content-Length: 11612
Connection: keep-alive
Last-Modified: Sun, 13 Aug 2017 20:42:23 GMT
Accept-Ranges: bytes
<!DOCTYPE html>

45. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Explaining the Action

46. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Explaining the Action
The telnet command asks to connect to the server on port 80.

47. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Explaining the Action
The telnet command asks to connect to the server on port 80.
The web server (usually some version of Apache) receives the
request and responds accordingly.

48. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Explaining the Action
The telnet command asks to connect to the server on port 80.
The web server (usually some version of Apache) receives the
request and responds accordingly.
Then we ask for file index.html which contains the web page.

49. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Explaining the Action
The telnet command asks to connect to the server on port 80.
The web server (usually some version of Apache) receives the
request and responds accordingly.
Then we ask for file index.html which contains the web page.
Also, we specify the server in case the host serves virtual hosts.

50. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Explaining the Action
The telnet command asks to connect to the server on port 80.
The web server (usually some version of Apache) receives the
request and responds accordingly.
Then we ask for file index.html which contains the web page.
Also, we specify the server in case the host serves virtual hosts.
The server replies by sending the contents of file index.html

51. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Explaining the Action
The telnet command asks to connect to the server on port 80.
The web server (usually some version of Apache) receives the
request and responds accordingly.
Then we ask for file index.html which contains the web page.
Also, we specify the server in case the host serves virtual hosts.
The server replies by sending the contents of file index.html
Try to request an non-existing file to see what will happen.

52. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
NCSA Mosaic Browser

53. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
NCSA Mosaic Browser
Mosaic is the web browser that popularized the World Wide Web and
the Internet.

54. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
NCSA Mosaic Browser
Mosaic is the web browser that popularized the World Wide Web and
the Internet.

55. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Netscape Navigator Browser

56. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Netscape Navigator Browser
Netscape Navigator is a discontinued proprietary web browser. Firefox
is an offspring of this browser.

57. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Netscape Navigator Browser
Netscape Navigator is a discontinued proprietary web browser. Firefox
is an offspring of this browser.

58. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Sun’s HotJava Browser

59. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Sun’s HotJava Browser
The HotJava browser was the first one that could run Java applets. it
was created by Sun Microsystems the company that created Java.

60. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Sun’s HotJava Browser
The HotJava browser was the first one that could run Java applets. it
was created by Sun Microsystems the company that created Java.

61. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Today’s Browsers

62. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Today’s Browsers
Mozilla Firefox was created by the Mozilla Foundation.

63. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Today’s Browsers
Mozilla Firefox was created by the Mozilla Foundation.
Google Chrome was created by Google.

64. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Today’s Browsers
Mozilla Firefox was created by the Mozilla Foundation.
Google Chrome was created by Google.
Opera was created by Opera Software AS.

65. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Today’s Browsers
Mozilla Firefox was created by the Mozilla Foundation.
Google Chrome was created by Google.
Opera was created by Opera Software AS.
Microsoft Edge was created by Microsoft Corp.

66. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Today’s Browsers
Mozilla Firefox was created by the Mozilla Foundation.
Google Chrome was created by Google.
Opera was created by Opera Software AS.
Microsoft Edge was created by Microsoft Corp.
Vivaldi was created by Vivaldi Technologies.

67. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Today’s Browsers
Mozilla Firefox was created by the Mozilla Foundation.
Google Chrome was created by Google.
Opera was created by Opera Software AS.
Microsoft Edge was created by Microsoft Corp.
Vivaldi was created by Vivaldi Technologies.
Microsoft Internet Explorer was created by Microsoft Corp.

68. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Today’s Browsers
Mozilla Firefox was created by the Mozilla Foundation.
Google Chrome was created by Google.
Opera was created by Opera Software AS.
Microsoft Edge was created by Microsoft Corp.
Vivaldi was created by Vivaldi Technologies.
Microsoft Internet Explorer was created by Microsoft Corp.
Tor Browser was created by the The Tor Project.

69. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
A Simple Document

70. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
A Simple Document
Open Notepad++ and type the HTML markup that follows.

71. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
A Simple Document
Open Notepad++ and type the HTML markup that follows.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Greetings</title>
</head>
<body>
Hello World!
</body>
</html>

72. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let us see the result of our work…

73. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let us see the result of our work…
Save the content to a file whose name extension is html (e.g.,
Example.html) and open it with your browser. You will see
something like what follows.

74. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let us see the result of our work…
Save the content to a file whose name extension is html (e.g.,
Example.html) and open it with your browser. You will see
something like what follows.

75. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The parts of a document

76. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The parts of a document
<!DOCTYPE html>

77. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The parts of a document
<!DOCTYPE html> ⟵ document type

78. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The parts of a document
<!DOCTYPE html> ⟵ document type
<html>

79. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The parts of a document
<!DOCTYPE html> ⟵ document type
<html> ⟵ beginning of document

80. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The parts of a document
<!DOCTYPE html> ⟵ document type
<html> ⟵ beginning of document
<head>

81. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The parts of a document
<!DOCTYPE html> ⟵ document type
<html> ⟵ beginning of document
<head> ⟵ beginning of head

82. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The parts of a document
<!DOCTYPE html> ⟵ document type
<html> ⟵ beginning of document
<head> ⟵ beginning of head
<title>Greetings</title>

83. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The parts of a document
<!DOCTYPE html> ⟵ document type
<html> ⟵ beginning of document
<head> ⟵ beginning of head
<title>Greetings</title> ⟵the title

84. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The parts of a document
<!DOCTYPE html> ⟵ document type
<html> ⟵ beginning of document
<head> ⟵ beginning of head
<title>Greetings</title> ⟵the title
</head>

85. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The parts of a document
<!DOCTYPE html> ⟵ document type
<html> ⟵ beginning of document
<head> ⟵ beginning of head
<title>Greetings</title> ⟵the title
</head> ⟵ end of head

86. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The parts of a document
<!DOCTYPE html> ⟵ document type
<html> ⟵ beginning of document
<head> ⟵ beginning of head
<title>Greetings</title> ⟵the title
</head> ⟵ end of head
<body>

87. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The parts of a document
<!DOCTYPE html> ⟵ document type
<html> ⟵ beginning of document
<head> ⟵ beginning of head
<title>Greetings</title> ⟵the title
</head> ⟵ end of head
<body> ⟵ beginning of body

88. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The parts of a document
<!DOCTYPE html> ⟵ document type
<html> ⟵ beginning of document
<head> ⟵ beginning of head
<title>Greetings</title> ⟵the title
</head> ⟵ end of head
<body> ⟵ beginning of body
</body>

89. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The parts of a document
<!DOCTYPE html> ⟵ document type
<html> ⟵ beginning of document
<head> ⟵ beginning of head
<title>Greetings</title> ⟵the title
</head> ⟵ end of head
<body> ⟵ beginning of body
</body> ⟵ end of body

90. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The parts of a document
<!DOCTYPE html> ⟵ document type
<html> ⟵ beginning of document
<head> ⟵ beginning of head
<title>Greetings</title> ⟵the title
</head> ⟵ end of head
<body> ⟵ beginning of body
</body> ⟵ end of body
</html>

91. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The parts of a document
<!DOCTYPE html> ⟵ document type
<html> ⟵ beginning of document
<head> ⟵ beginning of head
<title>Greetings</title> ⟵the title
</head> ⟵ end of head
<body> ⟵ beginning of body
</body> ⟵ end of body
</html> ⟵ end of document

92. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The head of a document

93. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The head of a document
The <head> element is a container for metadata (data about
data)

94. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The head of a document
The <head> element is a container for metadata (data about
data)
The <style> element is used to define style information for a
single HTML page.

95. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The head of a document
The <head> element is a container for metadata (data about
data)
The <style> element is used to define style information for a
single HTML page.
The <link> element is used to link to external style sheets.

96. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The head of a document
The <head> element is a container for metadata (data about
data)
The <style> element is used to define style information for a
single HTML page.
The <link> element is used to link to external style sheets.
The <meta> element is used to specify which character set is
used, page description, keywords, author, etc.

97. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The head of a document
The <head> element is a container for metadata (data about
data)
The <style> element is used to define style information for a
single HTML page.
The <link> element is used to link to external style sheets.
The <meta> element is used to specify which character set is
used, page description, keywords, author, etc.
<meta charset="UTF-8">

98. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The head of a document
The <head> element is a container for metadata (data about
data)
The <style> element is used to define style information for a
single HTML page.
The <link> element is used to link to external style sheets.
The <meta> element is used to specify which character set is
used, page description, keywords, author, etc.
<meta charset="UTF-8"> ⟵ encoding

99. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The head of a document
The <head> element is a container for metadata (data about
data)
The <style> element is used to define style information for a
single HTML page.
The <link> element is used to link to external style sheets.
The <meta> element is used to specify which character set is
used, page description, keywords, author, etc.
<meta charset="UTF-8"> ⟵ encoding
<meta name="description" content="HTML5 Examples">

100. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The head of a document
The <head> element is a container for metadata (data about
data)
The <style> element is used to define style information for a
single HTML page.
The <link> element is used to link to external style sheets.
The <meta> element is used to specify which character set is
used, page description, keywords, author, etc.
<meta charset="UTF-8"> ⟵ encoding
<meta name="description" content="HTML5 Examples">
<meta name="keywords" content="HTML5, CSS">

101. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The head of a document
The <head> element is a container for metadata (data about
data)
The <style> element is used to define style information for a
single HTML page.
The <link> element is used to link to external style sheets.
The <meta> element is used to specify which character set is
used, page description, keywords, author, etc.
<meta charset="UTF-8"> ⟵ encoding
<meta name="description" content="HTML5 Examples">
<meta name="keywords" content="HTML5, CSS">
<meta name="author" content="James T. Kirk">

102. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The head of a document
The <head> element is a container for metadata (data about
data)
The <style> element is used to define style information for a
single HTML page.
The <link> element is used to link to external style sheets.
The <meta> element is used to specify which character set is
used, page description, keywords, author, etc.
<meta charset="UTF-8"> ⟵ encoding
<meta name="description" content="HTML5 Examples">
<meta name="keywords" content="HTML5, CSS">
<meta name="author" content="James T. Kirk">
<meta http-equiv="refresh" content="30">

103. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The head of a document
The <head> element is a container for metadata (data about
data)
The <style> element is used to define style information for a
single HTML page.
The <link> element is used to link to external style sheets.
The <meta> element is used to specify which character set is
used, page description, keywords, author, etc.
<meta charset="UTF-8"> ⟵ encoding
<meta name="description" content="HTML5 Examples">
<meta name="keywords" content="HTML5, CSS">
<meta name="author" content="James T. Kirk">
<meta http-equiv="refresh" content="30"> ⟵ refresh
rate

104. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is this character encoding?

105. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is this character encoding?
Text is made of characters. Each character is represented
internally using an encoding.

106. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is this character encoding?
Text is made of characters. Each character is represented
internally using an encoding.
There are many different character encodings.

107. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is this character encoding?
Text is made of characters. Each character is represented
internally using an encoding.
There are many different character encodings.
In one common encoding the letter é is represented internally by
the number 233 while in another encoding this number
represents the letter щ.

108. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is this character encoding?
Text is made of characters. Each character is represented
internally using an encoding.
There are many different character encodings.
In one common encoding the letter é is represented internally by
the number 233 while in another encoding this number
represents the letter щ.
Unicode solves this and other problems by encoding all possible
symbols.

109. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is this character encoding?
Text is made of characters. Each character is represented
internally using an encoding.
There are many different character encodings.
In one common encoding the letter é is represented internally by
the number 233 while in another encoding this number
represents the letter щ.
Unicode solves this and other problems by encoding all possible
symbols.
UTF-8 is only one of the possible ways of encoding Unicode
characters but it is one supported internally by all operating
systems.

110. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is this character encoding?
Text is made of characters. Each character is represented
internally using an encoding.
There are many different character encodings.
In one common encoding the letter é is represented internally by
the number 233 while in another encoding this number
represents the letter щ.
Unicode solves this and other problems by encoding all possible
symbols.
UTF-8 is only one of the possible ways of encoding Unicode
characters but it is one supported internally by all operating
systems.
We need <meta charset="UTF-8"> to ensure that all
characters will be displayed correctly.

111. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Saving HTML files

112. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Saving HTML files
Always save a file as a UTF-8 encoded file.

113. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Saving HTML files
Always save a file as a UTF-8 encoded file.

114. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Paragraphs and Alignment

115. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Paragraphs and Alignment
Element <p> is for paragraphs.

116. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Paragraphs and Alignment
Element <p> is for paragraphs.
<p>This is a paragraph</p>

117. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Paragraphs and Alignment
Element <p> is for paragraphs.
<p>This is a paragraph</p>

118. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Paragraphs and Alignment
Element <p> is for paragraphs.
<p>This is a paragraph</p>
To override paragraph formatting use a style parameter.

119. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Paragraphs and Alignment
Element <p> is for paragraphs.
<p>This is a paragraph</p>
To override paragraph formatting use a style parameter.
<p style="text-align:justify">Justified text</p>

120. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Paragraphs and Alignment
Element <p> is for paragraphs.
<p>This is a paragraph</p>
To override paragraph formatting use a style parameter.
<p style="text-align:justify">Justified text</p>
<p style="text-align:center">Centered text</p>

121. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Paragraphs and Alignment
Element <p> is for paragraphs.
<p>This is a paragraph</p>
To override paragraph formatting use a style parameter.
<p style="text-align:justify">Justified text</p>
<p style="text-align:center">Centered text</p>
<p style="text-align:right">Right-aligned text</p>

122. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Paragraphs and Alignment
Element <p> is for paragraphs.
<p>This is a paragraph</p>
To override paragraph formatting use a style parameter.
<p style="text-align:justify">Justified text</p>
<p style="text-align:center">Centered text</p>
<p style="text-align:right">Right-aligned text</p>

123. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s practice paragraphs

124. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s practice paragraphs
Open a text-editor and type the HTML markup that follows.

125. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s practice paragraphs
Open a text-editor and type the HTML markup that follows.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>&lt;p&gt; examples</title>
</head>
<body>
<p style="text-align:justify">type some
long text</p>
</body>
</html>

126. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s practice paragraphs
Open a text-editor and type the HTML markup that follows.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>&lt;p&gt; examples</title>
</head>
<body>
<p style="text-align:justify">type some
long text</p>
</body>
</html>
Note that &lt; and &gt; are an entity names to get the < and >
symbols.

127. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s practice paragraphs (2)

128. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s practice paragraphs (2)
Save what you have typed as an HTML file and open it with a browser.

129. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s practice paragraphs (2)
Save what you have typed as an HTML file and open it with a browser.
Next modify the mark up as follows.

130. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s practice paragraphs (2)
Save what you have typed as an HTML file and open it with a browser.
Next modify the mark up as follows.
<p style="text-align:center">do not
change the text</p>

131. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s practice paragraphs (2)
Save what you have typed as an HTML file and open it with a browser.
Next modify the mark up as follows.
<p style="text-align:center">do not
change the text</p>
Check out the result of the modification and then modify the mark up
again.

132. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s practice paragraphs (2)
Save what you have typed as an HTML file and open it with a browser.
Next modify the mark up as follows.
<p style="text-align:center">do not
change the text</p>
Check out the result of the modification and then modify the mark up
again.
<p style="text-align:right">do not
change the text</p>

133. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Headers

134. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Headers
Headings are defined with the <h1> to <h6> tags.

135. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Headers
Headings are defined with the <h1> to <h6> tags.

136. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Headers
Headings are defined with the <h1> to <h6> tags.
Insert headings into your working file.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
⋮

137. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Italics, Bold,…

138. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Italics, Bold,…
The <b> tag is used to set text in bold face.

139. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Italics, Bold,…
The <b> tag is used to set text in bold face.
The <i> tag is used to set text in italic (slanted) face.

140. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Italics, Bold,…
The <b> tag is used to set text in bold face.
The <i> tag is used to set text in italic (slanted) face.
To emphasize text use the <em> tag.

141. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Italics, Bold,…
The <b> tag is used to set text in bold face.
The <i> tag is used to set text in italic (slanted) face.
To emphasize text use the <em> tag.
Use <i><b> tags to create italic bold face.

142. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Italics, Bold,…
The <b> tag is used to set text in bold face.
The <i> tag is used to set text in italic (slanted) face.
To emphasize text use the <em> tag.
Use <i><b> tags to create italic bold face.
The <tt> tag sets text in a monospaced font.

143. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Italics, Bold,…
The <b> tag is used to set text in bold face.
The <i> tag is used to set text in italic (slanted) face.
To emphasize text use the <em> tag.
Use <i><b> tags to create italic bold face.
The <tt> tag sets text in a monospaced font.
Use <h3 style="font-family: MyFont">Κείμενο</h3> to
set text in your choice of font.

144. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Italics, Bold,…
The <b> tag is used to set text in bold face.
The <i> tag is used to set text in italic (slanted) face.
To emphasize text use the <em> tag.
Use <i><b> tags to create italic bold face.
The <tt> tag sets text in a monospaced font.
Use <h3 style="font-family: MyFont">Κείμενο</h3> to
set text in your choice of font.

145. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on fonts

146. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on fonts
Enter <i>Italic text</i>&emsp; <b>text in bold
face</b> into your file and check out the result.

147. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on fonts
Enter <i>Italic text</i>&emsp; <b>text in bold
face</b> into your file and check out the result.
The entity &emsp; creates an em space and &ensp; an en space.

148. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on fonts
Enter <i>Italic text</i>&emsp; <b>text in bold
face</b> into your file and check out the result.
The entity &emsp; creates an em space and &ensp; an en space.
Enter <em>emphasized text</em>&emsp;

149. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on fonts
Enter <i>Italic text</i>&emsp; <b>text in bold
face</b> into your file and check out the result.
The entity &emsp; creates an em space and &ensp; an en space.
Enter <em>emphasized text</em>&emsp;
and <tt>monospaced font</tt><br> into your file and
check out the result.

150. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on fonts
Enter <i>Italic text</i>&emsp; <b>text in bold
face</b> into your file and check out the result.
The entity &emsp; creates an em space and &ensp; an en space.
Enter <em>emphasized text</em>&emsp;
and <tt>monospaced font</tt><br> into your file and
check out the result.
The <br> tag is behaves like the enter key in a word processor.

151. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on fonts
Enter <i>Italic text</i>&emsp; <b>text in bold
face</b> into your file and check out the result.
The entity &emsp; creates an em space and &ensp; an en space.
Enter <em>emphasized text</em>&emsp;
and <tt>monospaced font</tt><br> into your file and
check out the result.
The <br> tag is behaves like the enter key in a word processor.
Enter <h3 style="font-family: Mistral">Vienna,
Austria</h3> to check out the result.

152. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Simple decorations

153. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Simple decorations
To add a background color use
<body style="background-color:#E6E6FA">
or <body style="background-color:blue">

154. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Simple decorations
To add a background color use
<body style="background-color:#E6E6FA">
or <body style="background-color:blue">
Adding background image(s) is a bit involved and we will say
more about it later.

155. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Simple decorations
To add a background color use
<body style="background-color:#E6E6FA">
or <body style="background-color:blue">
Adding background image(s) is a bit involved and we will say
more about it later.
The tag <img src="smiley.gif" alt="Smiley face"
width="42" height="42">
adds an image into a web page.

156. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Simple decorations
To add a background color use
<body style="background-color:#E6E6FA">
or <body style="background-color:blue">
Adding background image(s) is a bit involved and we will say
more about it later.
The tag <img src="smiley.gif" alt="Smiley face"
width="42" height="42">
adds an image into a web page.
The <hr> tag adds a horizontal line.

157. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Simple decorations
To add a background color use
<body style="background-color:#E6E6FA">
or <body style="background-color:blue">
Adding background image(s) is a bit involved and we will say
more about it later.
The tag <img src="smiley.gif" alt="Smiley face"
width="42" height="42">
adds an image into a web page.
The <hr> tag adds a horizontal line.
Use <p style="color:red">This is a
paragraph.</p>
to have a paragraph in red.

158. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Simple decorations
To add a background color use
<body style="background-color:#E6E6FA">
or <body style="background-color:blue">
Adding background image(s) is a bit involved and we will say
more about it later.
The tag <img src="smiley.gif" alt="Smiley face"
width="42" height="42">
adds an image into a web page.
The <hr> tag adds a horizontal line.
Use <p style="color:red">This is a
paragraph.</p>
to have a paragraph in red.
Use <h3 style="font-family: Verdana; color:
blue">Έρασμος</h3>
to use the Verdana typeface in blue.

159. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers

160. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers
Wallpapers can be added with CSS…We will say a few things
here. Very few, I promise!

161. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers
Wallpapers can be added with CSS…We will say a few things
here. Very few, I promise!

162. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Adding wallpapers
The code that follows takes care of everything!

163. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Adding wallpapers
The code that follows takes care of everything!
<style>
html { height: 100%; }
body {
background-image: url("DSC_1260.JPG");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
p {color: blue; font: 30px Verdana;
text-align: center; }
</style>

164. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details

165. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties }

166. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form

167. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; }

168. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; } ⟵ Make page high enough

169. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; } ⟵ Make page high enough
body {background-image:
url("DSC_1260.JPG");

170. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; } ⟵ Make page high enough
body {background-image:
url("DSC_1260.JPG"); ⟵ Image file to load

171. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; } ⟵ Make page high enough
body {background-image:
url("DSC_1260.JPG"); ⟵ Image file to load
height: 100%;

172. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; } ⟵ Make page high enough
body {background-image:
url("DSC_1260.JPG"); ⟵ Image file to load
height: 100%; ⟵ Occupy all available verical space

173. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; } ⟵ Make page high enough
body {background-image:
url("DSC_1260.JPG"); ⟵ Image file to load
height: 100%; ⟵ Occupy all available verical space
background-position: center;

174. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; } ⟵ Make page high enough
body {background-image:
url("DSC_1260.JPG"); ⟵ Image file to load
height: 100%; ⟵ Occupy all available verical space
background-position: center; ⟵ Put image at
center

175. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; } ⟵ Make page high enough
body {background-image:
url("DSC_1260.JPG"); ⟵ Image file to load
height: 100%; ⟵ Occupy all available verical space
background-position: center; ⟵ Put image at
center
background-repeat: no-repeat;

176. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; } ⟵ Make page high enough
body {background-image:
url("DSC_1260.JPG"); ⟵ Image file to load
height: 100%; ⟵ Occupy all available verical space
background-position: center; ⟵ Put image at
center
background-repeat: no-repeat; ⟵ Use one
copy of the image

177. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; } ⟵ Make page high enough
body {background-image:
url("DSC_1260.JPG"); ⟵ Image file to load
height: 100%; ⟵ Occupy all available verical space
background-position: center; ⟵ Put image at
center
background-repeat: no-repeat; ⟵ Use one
copy of the image
background-size: cover;}

178. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; } ⟵ Make page high enough
body {background-image:
url("DSC_1260.JPG"); ⟵ Image file to load
height: 100%; ⟵ Occupy all available verical space
background-position: center; ⟵ Put image at
center
background-repeat: no-repeat; ⟵ Use one
copy of the image
background-size: cover;} ⟵ Image covers the
whole screen

179. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Setting the paragraph

180. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Setting the paragraph
p { color: blue;

181. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Setting the paragraph
p { color: blue; ⟵ Text will be blue

182. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Setting the paragraph
p { color: blue; ⟵ Text will be blue
font: 30px Verdana;

183. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Setting the paragraph
p { color: blue; ⟵ Text will be blue
font: 30px Verdana; ⟵ Use the Verdana font at
size 30

184. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Setting the paragraph
p { color: blue; ⟵ Text will be blue
font: 30px Verdana; ⟵ Use the Verdana font at
size 30
text-align: center;

185. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Setting the paragraph
p { color: blue; ⟵ Text will be blue
font: 30px Verdana; ⟵ Use the Verdana font at
size 30
text-align: center; ⟵ Text should be centered

186. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Setting the paragraph
p { color: blue; ⟵ Text will be blue
font: 30px Verdana; ⟵ Use the Verdana font at
size 30
text-align: center; ⟵ Text should be centered
margin: 200px 0;}

187. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Setting the paragraph
p { color: blue; ⟵ Text will be blue
font: 30px Verdana; ⟵ Use the Verdana font at
size 30
text-align: center; ⟵ Text should be centered
margin: 200px 0;} ⟵ Add vertical space above
paragraph

188. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Setting the paragraph
p { color: blue; ⟵ Text will be blue
font: 30px Verdana; ⟵ Use the Verdana font at
size 30
text-align: center; ⟵ Text should be centered
margin: 200px 0;} ⟵ Add vertical space above
paragraph
<p>The Albertina Museum</p>

189. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Setting the paragraph
p { color: blue; ⟵ Text will be blue
font: 30px Verdana; ⟵ Use the Verdana font at
size 30
text-align: center; ⟵ Text should be centered
margin: 200px 0;} ⟵ Add vertical space above
paragraph
<p>The Albertina Museum</p> ⟵ This is what we put
in the body of the page!

190. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Links

191. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Links
Links allow users to click their way from page to page.

192. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Links
Links allow users to click their way from page to page.
<a href="url">link text</a>

193. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Links
Links allow users to click their way from page to page.
<a href="url">link text</a> ⟵ Make link text
a link

194. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Links
Links allow users to click their way from page to page.
<a href="url">link text</a> ⟵ Make link text
a link
Links can also be images, as you already know.

195. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Links
Links allow users to click their way from page to page.
<a href="url">link text</a> ⟵ Make link text
a link
Links can also be images, as you already know.
<a href="url"><img src="img.jpg"></a>

196. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Links
Links allow users to click their way from page to page.
<a href="url">link text</a> ⟵ Make link text
a link
Links can also be images, as you already know.
<a href="url"><img src="img.jpg"></a> ⟵ A
simple image link

197. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Links
Links allow users to click their way from page to page.
<a href="url">link text</a> ⟵ Make link text
a link
Links can also be images, as you already know.
<a href="url"><img src="img.jpg"></a> ⟵ A
simple image link
<h2 id="C4">Chapter 4</h2>

198. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Links
Links allow users to click their way from page to page.
<a href="url">link text</a> ⟵ Make link text
a link
Links can also be images, as you already know.
<a href="url"><img src="img.jpg"></a> ⟵ A
simple image link
<h2 id="C4">Chapter 4</h2> ⟵ How to create a
bookmark

199. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Links
Links allow users to click their way from page to page.
<a href="url">link text</a> ⟵ Make link text
a link
Links can also be images, as you already know.
<a href="url"><img src="img.jpg"></a> ⟵ A
simple image link
<h2 id="C4">Chapter 4</h2> ⟵ How to create a
bookmark
<a href="#C4">Jump to Chapter 4</a>

200. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Links
Links allow users to click their way from page to page.
<a href="url">link text</a> ⟵ Make link text
a link
Links can also be images, as you already know.
<a href="url"><img src="img.jpg"></a> ⟵ A
simple image link
<h2 id="C4">Chapter 4</h2> ⟵ How to create a
bookmark
<a href="#C4">Jump to Chapter 4</a> ⟵ Use this
bookmark

201. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Links
Links allow users to click their way from page to page.
<a href="url">link text</a> ⟵ Make link text
a link
Links can also be images, as you already know.
<a href="url"><img src="img.jpg"></a> ⟵ A
simple image link
<h2 id="C4">Chapter 4</h2> ⟵ How to create a
bookmark
<a href="#C4">Jump to Chapter 4</a> ⟵ Use this
bookmark
Create a web page with both text and image links and
bookmarks.

202. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Finale

203. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Finale
I have introduced basic notions related to HTML5.

204. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Finale
I have introduced basic notions related to HTML5.
I have described the structure of a HTML5 document

205. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Finale
I have introduced basic notions related to HTML5.
I have described the structure of a HTML5 document
I have presented a number of tags and elements.

206. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Finale
I have introduced basic notions related to HTML5.
I have described the structure of a HTML5 document
I have presented a number of tags and elements.
In part II I will introduce tables and other interesting things!

207. Introduction to
HTML5: Part I
Syropoulos
Markup
Languages
The Web and
HTML
HTML5
Document
Structure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Finale
I have introduced basic notions related to HTML5.
I have described the structure of a HTML5 document
I have presented a number of tags and elements.
In part II I will introduce tables and other interesting things!
Thank you very much for your attention!