Embed Size (px)
Citation preview
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Introduction to HTML5: Part I
Apostolos Syropoulos
Xanthi, [email protected]
Introduction to HTML5 for members of theErasmus+ founded project GAMES
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Presentation Outline
1 Markup Languages
2 The Web and HTML
3 HTML5 Document Structure
4 Finale
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is markup?
Markup a sequence of characters that you insert at certain placesin a text or word processing file to indicate how the file shouldlook when it is printed or displayed or to describe the document’slogical structure.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is markup?
Markup a sequence of characters that you insert at certain placesin a text or word processing file to indicate how the file shouldlook when it is printed or displayed or to describe the document’slogical structure.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is markup?
Markup a sequence of characters that you insert at certain placesin a text or word processing file to indicate how the file shouldlook when it is printed or displayed or to describe the document’slogical structure.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Examples of Textual markup
LATEX markup:normal \textbf{bold} normal againtroff markup:normal.ft Bbold.ft Rnormal again
HTML markup:normal <b>bold</b> normal againWiki markup:normal '''bold''' normal again
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Examples of Textual markup
LATEX markup:normal \textbf{bold} normal again
troff markup:normal.ft Bbold.ft Rnormal again
HTML markup:normal <b>bold</b> normal againWiki markup:normal '''bold''' normal again
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Examples of Textual markup
LATEX markup:normal \textbf{bold} normal againtroff markup:normal.ft Bbold.ft Rnormal again
HTML markup:normal <b>bold</b> normal againWiki markup:normal '''bold''' normal again
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Examples of Textual markup
LATEX markup:normal \textbf{bold} normal againtroff markup:normal.ft Bbold.ft Rnormal again
HTML markup:normal <b>bold</b> normal again
Wiki markup:normal '''bold''' normal again
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Examples of Textual markup
LATEX markup:normal \textbf{bold} normal againtroff markup:normal.ft Bbold.ft Rnormal again
HTML markup:normal <b>bold</b> normal againWiki markup:normal '''bold''' normal again
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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:langw: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.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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:langw: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.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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:langw: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.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is HyperText?
Hyper- generally means “above, beyond”, thus hypertext issomething that goes beyond the limitations of ordinary text (e.g.,it can be non-sequential).
Hypertext is text which contains links to other information. Theterm was coined by Theodor Holm “Ted” Nelson around 1963.
Software programs such as dictionaries and encyclopedias havelong used hypertext in their definitions allowing readers toquickly navigate content.
HyperMedia is a term used for hypertext which is not constrainedto be text: it can include graphics, video and sound, etc. TedNelson coined this term too.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is HyperText?
Hyper- generally means “above, beyond”, thus hypertext issomething that goes beyond the limitations of ordinary text (e.g.,it can be non-sequential).
Hypertext is text which contains links to other information. Theterm was coined by Theodor Holm “Ted” Nelson around 1963.
Software programs such as dictionaries and encyclopedias havelong used hypertext in their definitions allowing readers toquickly navigate content.
HyperMedia is a term used for hypertext which is not constrainedto be text: it can include graphics, video and sound, etc. TedNelson coined this term too.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is HyperText?
Hyper- generally means “above, beyond”, thus hypertext issomething that goes beyond the limitations of ordinary text (e.g.,it can be non-sequential).
Hypertext is text which contains links to other information. Theterm was coined by Theodor Holm “Ted” Nelson around 1963.
Software programs such as dictionaries and encyclopedias havelong used hypertext in their definitions allowing readers toquickly navigate content.
HyperMedia is a term used for hypertext which is not constrainedto be text: it can include graphics, video and sound, etc. TedNelson coined this term too.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is HyperText?
Hyper- generally means “above, beyond”, thus hypertext issomething that goes beyond the limitations of ordinary text (e.g.,it can be non-sequential).
Hypertext is text which contains links to other information. Theterm was coined by Theodor Holm “Ted” Nelson around 1963.
Software programs such as dictionaries and encyclopedias havelong used hypertext in their definitions allowing readers toquickly navigate content.
HyperMedia is a term used for hypertext which is not constrainedto be text: it can include graphics, video and sound, etc. TedNelson coined this term too.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is HyperText?
Hyper- generally means “above, beyond”, thus hypertext issomething that goes beyond the limitations of ordinary text (e.g.,it can be non-sequential).
Hypertext is text which contains links to other information. Theterm was coined by Theodor Holm “Ted” Nelson around 1963.
Software programs such as dictionaries and encyclopedias havelong used hypertext in their definitions allowing readers toquickly navigate content.
HyperMedia is a term used for hypertext which is not constrainedto be text: it can include graphics, video and sound, etc. TedNelson coined this term too.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is HyperText?
Hyper- generally means “above, beyond”, thus hypertext issomething that goes beyond the limitations of ordinary text (e.g.,it can be non-sequential).
Hypertext is text which contains links to other information. Theterm was coined by Theodor Holm “Ted” Nelson around 1963.
Software programs such as dictionaries and encyclopedias havelong used hypertext in their definitions allowing readers toquickly navigate content.
HyperMedia is a term used for hypertext which is not constrainedto be text: it can include graphics, video and sound, etc. TedNelson coined this term too.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Markup Language?
A set of rules specifying how to markup content so to control itsstructure, formatting, or the relationship among its parts.
The most widely used markup languages are SGML, HTML, andXML.
The Standard Generalized Markup Language (SGML), is alanguage 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 factostandard for the presentation of information over the Web.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Markup Language?
A set of rules specifying how to markup content so to control itsstructure, formatting, or the relationship among its parts.
The most widely used markup languages are SGML, HTML, andXML.
The Standard Generalized Markup Language (SGML), is alanguage 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 factostandard for the presentation of information over the Web.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Markup Language?
A set of rules specifying how to markup content so to control itsstructure, formatting, or the relationship among its parts.
The most widely used markup languages are SGML, HTML, andXML.
The Standard Generalized Markup Language (SGML), is alanguage 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 factostandard for the presentation of information over the Web.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Markup Language?
A set of rules specifying how to markup content so to control itsstructure, formatting, or the relationship among its parts.
The most widely used markup languages are SGML, HTML, andXML.
The Standard Generalized Markup Language (SGML), is alanguage 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 factostandard for the presentation of information over the Web.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Markup Language?
A set of rules specifying how to markup content so to control itsstructure, formatting, or the relationship among its parts.
The most widely used markup languages are SGML, HTML, andXML.
The Standard Generalized Markup Language (SGML), is alanguage 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 factostandard for the presentation of information over the Web.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Markup Language?
A set of rules specifying how to markup content so to control itsstructure, formatting, or the relationship among its parts.
The most widely used markup languages are SGML, HTML, andXML.
The Standard Generalized Markup Language (SGML), is alanguage 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 factostandard for the presentation of information over the Web.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Markup Language?
A set of rules specifying how to markup content so to control itsstructure, formatting, or the relationship among its parts.
The most widely used markup languages are SGML, HTML, andXML.
The Standard Generalized Markup Language (SGML), is alanguage 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 factostandard for the presentation of information over the Web.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Markup Language?
A set of rules specifying how to markup content so to control itsstructure, formatting, or the relationship among its parts.
The most widely used markup languages are SGML, HTML, andXML.
The Standard Generalized Markup Language (SGML), is alanguage 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 factostandard for the presentation of information over the Web.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
History of HTML
Tim Berners-Lee created what we call the Web while he wasworking at CERN.
He created HTML and the HyperText Transfer Protocol (HTTP) anddesigned 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 November1995.
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 waspublished on November 2016.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
History of HTML
Tim Berners-Lee created what we call the Web while he wasworking at CERN.
He created HTML and the HyperText Transfer Protocol (HTTP) anddesigned 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 November1995.
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 waspublished on November 2016.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
History of HTML
Tim Berners-Lee created what we call the Web while he wasworking at CERN.
He created HTML and the HyperText Transfer Protocol (HTTP) anddesigned 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 November1995.
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 waspublished on November 2016.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
History of HTML
Tim Berners-Lee created what we call the Web while he wasworking at CERN.
He created HTML and the HyperText Transfer Protocol (HTTP) anddesigned 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 November1995.
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 waspublished on November 2016.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
History of HTML
Tim Berners-Lee created what we call the Web while he wasworking at CERN.
He created HTML and the HyperText Transfer Protocol (HTTP) anddesigned 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 November1995.
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 waspublished on November 2016.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
History of HTML
Tim Berners-Lee created what we call the Web while he wasworking at CERN.
He created HTML and the HyperText Transfer Protocol (HTTP) anddesigned 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 November1995.
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 waspublished on November 2016.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
History of HTML
Tim Berners-Lee created what we call the Web while he wasworking at CERN.
He created HTML and the HyperText Transfer Protocol (HTTP) anddesigned 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 November1995.
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 waspublished on November 2016.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
History of HTML
Tim Berners-Lee created what we call the Web while he wasworking at CERN.
He created HTML and the HyperText Transfer Protocol (HTTP) anddesigned 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 November1995.
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 waspublished on November 2016.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 accompanyingdata files.
The web page is displayed locally. Let’s see what goes in thebackstage…
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 accompanyingdata files.
The web page is displayed locally. Let’s see what goes in thebackstage…
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 accompanyingdata files.
The web page is displayed locally. Let’s see what goes in thebackstage…
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 accompanyingdata files.
The web page is displayed locally. Let’s see what goes in thebackstage…
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 accompanyingdata files.
The web page is displayed locally. Let’s see what goes in thebackstage…
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 accompanyingdata files.
The web page is displayed locally. Let’s see what goes in thebackstage…
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 accompanyingdata files.
The web page is displayed locally. Let’s see what goes in thebackstage…
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 accompanyingdata files.
The web page is displayed locally. Let’s see what goes in thebackstage…
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTTP in Action!
apostolo@adalind>> telnet reudic.eu 80Trying 192.185.173.40...Connected to reudic.eu.Escape character is '^]'.GET /index.html HTTP/1.1host: reudic.eu
HTTP/1.1 200 OKServer: nginx/1.12.2Date: Mon, 11 Dec 2017 19:24:17 GMTContent-Type: text/htmlContent-Length: 11612Connection: keep-aliveLast-Modified: Sun, 13 Aug 2017 20:42:23 GMTAccept-Ranges: bytes
<!DOCTYPE html>
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 therequest and responds accordingly.
Then we ask for file index.htmlwhich 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.htmlTry to request an non-existing file to see what will happen.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 therequest and responds accordingly.
Then we ask for file index.htmlwhich 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.htmlTry to request an non-existing file to see what will happen.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 therequest and responds accordingly.
Then we ask for file index.htmlwhich 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.htmlTry to request an non-existing file to see what will happen.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 therequest and responds accordingly.
Then we ask for file index.htmlwhich 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.htmlTry to request an non-existing file to see what will happen.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 therequest and responds accordingly.
Then we ask for file index.htmlwhich 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.htmlTry to request an non-existing file to see what will happen.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 therequest and responds accordingly.
Then we ask for file index.htmlwhich 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.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 therequest and responds accordingly.
Then we ask for file index.htmlwhich 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.htmlTry to request an non-existing file to see what will happen.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
NCSA Mosaic Browser
Mosaic is the web browser that popularized the World Wide Web andthe Internet.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
NCSA Mosaic Browser
Mosaic is the web browser that popularized the World Wide Web andthe Internet.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
NCSA Mosaic Browser
Mosaic is the web browser that popularized the World Wide Web andthe Internet.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Netscape Navigator Browser
Netscape Navigator is a discontinued proprietary web browser. Firefoxis an offspring of this browser.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Netscape Navigator Browser
Netscape Navigator is a discontinued proprietary web browser. Firefoxis an offspring of this browser.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Netscape Navigator Browser
Netscape Navigator is a discontinued proprietary web browser. Firefoxis an offspring of this browser.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Sun’s HotJava Browser
The HotJava browser was the first one that could run Java applets. itwas created by Sun Microsystems the company that created Java.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Sun’s HotJava Browser
The HotJava browser was the first one that could run Java applets. itwas created by Sun Microsystems the company that created Java.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Sun’s HotJava Browser
The HotJava browser was the first one that could run Java applets. itwas created by Sun Microsystems the company that created Java.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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>
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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>
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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>
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 seesomething like what follows.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 seesomething like what follows.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 seesomething like what follows.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The head of a document
The <head> element is a container for metadata (data aboutdata)
The <style> element is used to define style information for asingle HTML page.
The <link> element is used to link to external style sheets.
The <meta> element is used to specify which character set isused, 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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The head of a document
The <head> element is a container for metadata (data aboutdata)
The <style> element is used to define style information for asingle HTML page.
The <link> element is used to link to external style sheets.
The <meta> element is used to specify which character set isused, 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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The head of a document
The <head> element is a container for metadata (data aboutdata)
The <style> element is used to define style information for asingle HTML page.
The <link> element is used to link to external style sheets.
The <meta> element is used to specify which character set isused, 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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The head of a document
The <head> element is a container for metadata (data aboutdata)
The <style> element is used to define style information for asingle HTML page.
The <link> element is used to link to external style sheets.
The <meta> element is used to specify which character set isused, 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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The head of a document
The <head> element is a container for metadata (data aboutdata)
The <style> element is used to define style information for asingle HTML page.
The <link> element is used to link to external style sheets.
The <meta> element is used to specify which character set isused, 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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The head of a document
The <head> element is a container for metadata (data aboutdata)
The <style> element is used to define style information for asingle HTML page.
The <link> element is used to link to external style sheets.
The <meta> element is used to specify which character set isused, 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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The head of a document
The <head> element is a container for metadata (data aboutdata)
The <style> element is used to define style information for asingle HTML page.
The <link> element is used to link to external style sheets.
The <meta> element is used to specify which character set isused, 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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The head of a document
The <head> element is a container for metadata (data aboutdata)
The <style> element is used to define style information for asingle HTML page.
The <link> element is used to link to external style sheets.
The <meta> element is used to specify which character set isused, 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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The head of a document
The <head> element is a container for metadata (data aboutdata)
The <style> element is used to define style information for asingle HTML page.
The <link> element is used to link to external style sheets.
The <meta> element is used to specify which character set isused, 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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The head of a document
The <head> element is a container for metadata (data aboutdata)
The <style> element is used to define style information for asingle HTML page.
The <link> element is used to link to external style sheets.
The <meta> element is used to specify which character set isused, 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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The head of a document
The <head> element is a container for metadata (data aboutdata)
The <style> element is used to define style information for asingle HTML page.
The <link> element is used to link to external style sheets.
The <meta> element is used to specify which character set isused, 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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The head of a document
The <head> element is a container for metadata (data aboutdata)
The <style> element is used to define style information for asingle HTML page.
The <link> element is used to link to external style sheets.
The <meta> element is used to specify which character set isused, 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
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is this character encoding?
Text is made of characters. Each character is representedinternally using an encoding.
There are many different character encodings.
In one common encoding the letter é is represented internally bythe number 233 while in another encoding this numberrepresents the letter щ.
Unicode solves this and other problems by encoding all possiblesymbols.
UTF-8 is only one of the possible ways of encoding Unicodecharacters but it is one supported internally by all operatingsystems.
We need <meta charset="UTF-8"> to ensure that allcharacters will be displayed correctly.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is this character encoding?
Text is made of characters. Each character is representedinternally using an encoding.
There are many different character encodings.
In one common encoding the letter é is represented internally bythe number 233 while in another encoding this numberrepresents the letter щ.
Unicode solves this and other problems by encoding all possiblesymbols.
UTF-8 is only one of the possible ways of encoding Unicodecharacters but it is one supported internally by all operatingsystems.
We need <meta charset="UTF-8"> to ensure that allcharacters will be displayed correctly.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is this character encoding?
Text is made of characters. Each character is representedinternally using an encoding.
There are many different character encodings.
In one common encoding the letter é is represented internally bythe number 233 while in another encoding this numberrepresents the letter щ.
Unicode solves this and other problems by encoding all possiblesymbols.
UTF-8 is only one of the possible ways of encoding Unicodecharacters but it is one supported internally by all operatingsystems.
We need <meta charset="UTF-8"> to ensure that allcharacters will be displayed correctly.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is this character encoding?
Text is made of characters. Each character is representedinternally using an encoding.
There are many different character encodings.
In one common encoding the letter é is represented internally bythe number 233 while in another encoding this numberrepresents the letter щ.
Unicode solves this and other problems by encoding all possiblesymbols.
UTF-8 is only one of the possible ways of encoding Unicodecharacters but it is one supported internally by all operatingsystems.
We need <meta charset="UTF-8"> to ensure that allcharacters will be displayed correctly.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is this character encoding?
Text is made of characters. Each character is representedinternally using an encoding.
There are many different character encodings.
In one common encoding the letter é is represented internally bythe number 233 while in another encoding this numberrepresents the letter щ.
Unicode solves this and other problems by encoding all possiblesymbols.
UTF-8 is only one of the possible ways of encoding Unicodecharacters but it is one supported internally by all operatingsystems.
We need <meta charset="UTF-8"> to ensure that allcharacters will be displayed correctly.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is this character encoding?
Text is made of characters. Each character is representedinternally using an encoding.
There are many different character encodings.
In one common encoding the letter é is represented internally bythe number 233 while in another encoding this numberrepresents the letter щ.
Unicode solves this and other problems by encoding all possiblesymbols.
UTF-8 is only one of the possible ways of encoding Unicodecharacters but it is one supported internally by all operatingsystems.
We need <meta charset="UTF-8"> to ensure that allcharacters will be displayed correctly.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is this character encoding?
Text is made of characters. Each character is representedinternally using an encoding.
There are many different character encodings.
In one common encoding the letter é is represented internally bythe number 233 while in another encoding this numberrepresents the letter щ.
Unicode solves this and other problems by encoding all possiblesymbols.
UTF-8 is only one of the possible ways of encoding Unicodecharacters but it is one supported internally by all operatingsystems.
We need <meta charset="UTF-8"> to ensure that allcharacters will be displayed correctly.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Saving HTML files
Always save a file as a UTF-8 encoded file.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Saving HTML files
Always save a file as a UTF-8 encoded file.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Saving HTML files
Always save a file as a UTF-8 encoded file.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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>
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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>
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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>
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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>
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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>
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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>
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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>
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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>
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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>
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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><p> examples</title></head><body><p style="text-align:justify">type somelong text</p></body></html>
Note that < and > are an entity name to get the < and >symbols.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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><p> examples</title></head><body><p style="text-align:justify">type somelong text</p></body></html>
Note that < and > are an entity name to get the < and >symbols.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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><p> examples</title></head><body><p style="text-align:justify">type somelong text</p></body></html>
Note that < and > are an entity name to get the < and >symbols.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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><p> examples</title></head><body><p style="text-align:justify">type somelong text</p></body></html>
Note that < and > are an entity name to get the < and >symbols.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 notchange the text</p>
Check out the result of the modification and then modify the mark upagain.
<p style="text-align:right">do notchange the text</p>
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 notchange the text</p>
Check out the result of the modification and then modify the mark upagain.
<p style="text-align:right">do notchange the text</p>
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 notchange the text</p>
Check out the result of the modification and then modify the mark upagain.
<p style="text-align:right">do notchange the text</p>
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 notchange the text</p>
Check out the result of the modification and then modify the mark upagain.
<p style="text-align:right">do notchange the text</p>
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 notchange the text</p>
Check out the result of the modification and then modify the mark upagain.
<p style="text-align:right">do notchange the text</p>
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 notchange the text</p>
Check out the result of the modification and then modify the mark upagain.
<p style="text-align:right">do notchange the text</p>
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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>
⋮
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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>
⋮
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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>
⋮
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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>
⋮
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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> toset text in your choice of font.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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> toset text in your choice of font.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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> toset text in your choice of font.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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> toset text in your choice of font.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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> toset text in your choice of font.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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> toset text in your choice of font.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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> toset text in your choice of font.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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> toset text in your choice of font.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on fonts
Enter <i>Italic text</i>  <b>text in boldface</b> into your file and check out the result.
The entity   creates an em space and   an en space.
Enter <em>emphasized text</em> and <tt>monospaced font</tt><br> into your file andcheck 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.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on fonts
Enter <i>Italic text</i>  <b>text in boldface</b> into your file and check out the result.
The entity   creates an em space and   an en space.
Enter <em>emphasized text</em> and <tt>monospaced font</tt><br> into your file andcheck 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.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on fonts
Enter <i>Italic text</i>  <b>text in boldface</b> into your file and check out the result.
The entity   creates an em space and   an en space.
Enter <em>emphasized text</em> and <tt>monospaced font</tt><br> into your file andcheck 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.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on fonts
Enter <i>Italic text</i>  <b>text in boldface</b> into your file and check out the result.
The entity   creates an em space and   an en space.
Enter <em>emphasized text</em> 
and <tt>monospaced font</tt><br> into your file andcheck 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.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on fonts
Enter <i>Italic text</i>  <b>text in boldface</b> into your file and check out the result.
The entity   creates an em space and   an en space.
Enter <em>emphasized text</em> and <tt>monospaced font</tt><br> into your file andcheck 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.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on fonts
Enter <i>Italic text</i>  <b>text in boldface</b> into your file and check out the result.
The entity   creates an em space and   an en space.
Enter <em>emphasized text</em> and <tt>monospaced font</tt><br> into your file andcheck 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.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on fonts
Enter <i>Italic text</i>  <b>text in boldface</b> into your file and check out the result.
The entity   creates an em space and   an en space.
Enter <em>emphasized text</em> and <tt>monospaced font</tt><br> into your file andcheck 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.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 saymore 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 aparagraph.</p>to have a paragraph in red.
Use <h3 style="font-family: Verdana; color:blue">Έρασμος</h3>to use the Verdana typeface in blue.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 saymore 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 aparagraph.</p>to have a paragraph in red.
Use <h3 style="font-family: Verdana; color:blue">Έρασμος</h3>to use the Verdana typeface in blue.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 saymore 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 aparagraph.</p>to have a paragraph in red.
Use <h3 style="font-family: Verdana; color:blue">Έρασμος</h3>to use the Verdana typeface in blue.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 saymore 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 aparagraph.</p>to have a paragraph in red.
Use <h3 style="font-family: Verdana; color:blue">Έρασμος</h3>to use the Verdana typeface in blue.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 saymore 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 aparagraph.</p>to have a paragraph in red.
Use <h3 style="font-family: Verdana; color:blue">Έρασμος</h3>to use the Verdana typeface in blue.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 saymore 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 aparagraph.</p>to have a paragraph in red.
Use <h3 style="font-family: Verdana; color:blue">Έρασμος</h3>to use the Verdana typeface in blue.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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 saymore 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 aparagraph.</p>to have a paragraph in red.
Use <h3 style="font-family: Verdana; color:blue">Έρασμος</h3>to use the Verdana typeface in blue.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers
Wallpapers can be added with CSS…We will say a few thingshere. Very few, I promise!
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers
Wallpapers can be added with CSS…We will say a few thingshere. Very few, I promise!
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers
Wallpapers can be added with CSS…We will say a few thingshere. Very few, I promise!
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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>
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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>
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; } ⟵Make page wide enough
body {background-image:url("DSC_1260.JPG"); ⟵ Image file to load
height: 100%; ⟵ Occupy all available space
background-position: center; ⟵ Put image atcenter
background-repeat: no-repeat; ⟵ Use onecopy of the image
background-size: cover;} ⟵ Image covers thewhole screen
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties }
⟵ General form
html { height: 100%; } ⟵Make page wide enough
body {background-image:url("DSC_1260.JPG"); ⟵ Image file to load
height: 100%; ⟵ Occupy all available space
background-position: center; ⟵ Put image atcenter
background-repeat: no-repeat; ⟵ Use onecopy of the image
background-size: cover;} ⟵ Image covers thewhole screen
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; } ⟵Make page wide enough
body {background-image:url("DSC_1260.JPG"); ⟵ Image file to load
height: 100%; ⟵ Occupy all available space
background-position: center; ⟵ Put image atcenter
background-repeat: no-repeat; ⟵ Use onecopy of the image
background-size: cover;} ⟵ Image covers thewhole screen
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; }
⟵Make page wide enough
body {background-image:url("DSC_1260.JPG"); ⟵ Image file to load
height: 100%; ⟵ Occupy all available space
background-position: center; ⟵ Put image atcenter
background-repeat: no-repeat; ⟵ Use onecopy of the image
background-size: cover;} ⟵ Image covers thewhole screen
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; } ⟵Make page wide enough
body {background-image:url("DSC_1260.JPG"); ⟵ Image file to load
height: 100%; ⟵ Occupy all available space
background-position: center; ⟵ Put image atcenter
background-repeat: no-repeat; ⟵ Use onecopy of the image
background-size: cover;} ⟵ Image covers thewhole screen
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; } ⟵Make page wide enough
body {background-image:url("DSC_1260.JPG");
⟵ Image file to load
height: 100%; ⟵ Occupy all available space
background-position: center; ⟵ Put image atcenter
background-repeat: no-repeat; ⟵ Use onecopy of the image
background-size: cover;} ⟵ Image covers thewhole screen
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; } ⟵Make page wide enough
body {background-image:url("DSC_1260.JPG"); ⟵ Image file to load
height: 100%; ⟵ Occupy all available space
background-position: center; ⟵ Put image atcenter
background-repeat: no-repeat; ⟵ Use onecopy of the image
background-size: cover;} ⟵ Image covers thewhole screen
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; } ⟵Make page wide enough
body {background-image:url("DSC_1260.JPG"); ⟵ Image file to load
height: 100%;
⟵ Occupy all available space
background-position: center; ⟵ Put image atcenter
background-repeat: no-repeat; ⟵ Use onecopy of the image
background-size: cover;} ⟵ Image covers thewhole screen
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; } ⟵Make page wide enough
body {background-image:url("DSC_1260.JPG"); ⟵ Image file to load
height: 100%; ⟵ Occupy all available space
background-position: center; ⟵ Put image atcenter
background-repeat: no-repeat; ⟵ Use onecopy of the image
background-size: cover;} ⟵ Image covers thewhole screen
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; } ⟵Make page wide enough
body {background-image:url("DSC_1260.JPG"); ⟵ Image file to load
height: 100%; ⟵ Occupy all available space
background-position: center;
⟵ Put image atcenter
background-repeat: no-repeat; ⟵ Use onecopy of the image
background-size: cover;} ⟵ Image covers thewhole screen
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; } ⟵Make page wide enough
body {background-image:url("DSC_1260.JPG"); ⟵ Image file to load
height: 100%; ⟵ Occupy all available space
background-position: center; ⟵ Put image atcenter
background-repeat: no-repeat; ⟵ Use onecopy of the image
background-size: cover;} ⟵ Image covers thewhole screen
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; } ⟵Make page wide enough
body {background-image:url("DSC_1260.JPG"); ⟵ Image file to load
height: 100%; ⟵ Occupy all available space
background-position: center; ⟵ Put image atcenter
background-repeat: no-repeat;
⟵ Use onecopy of the image
background-size: cover;} ⟵ Image covers thewhole screen
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; } ⟵Make page wide enough
body {background-image:url("DSC_1260.JPG"); ⟵ Image file to load
height: 100%; ⟵ Occupy all available space
background-position: center; ⟵ Put image atcenter
background-repeat: no-repeat; ⟵ Use onecopy of the image
background-size: cover;} ⟵ Image covers thewhole screen
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; } ⟵Make page wide enough
body {background-image:url("DSC_1260.JPG"); ⟵ Image file to load
height: 100%; ⟵ Occupy all available space
background-position: center; ⟵ Put image atcenter
background-repeat: no-repeat; ⟵ Use onecopy of the image
background-size: cover;}
⟵ Image covers thewhole screen
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Wallpapers: The Gory Details
element { properties } ⟵ General form
html { height: 100%; } ⟵Make page wide enough
body {background-image:url("DSC_1260.JPG"); ⟵ Image file to load
height: 100%; ⟵ Occupy all available space
background-position: center; ⟵ Put image atcenter
background-repeat: no-repeat; ⟵ Use onecopy of the image
background-size: cover;} ⟵ Image covers thewhole screen
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Setting the paragraph
p { color: blue; ⟵ Text will be blue
font: 30px Verdana; ⟵ Use the Verdana font at30 pixels
text-align: center; ⟵ Text should be centered
margin: 200px 0;} ⟵ Add vertical space aboveparagraph
<p>The Albertina Museum</p> ⟵ This is what we putin the body of the page!
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Setting the paragraph
p { color: blue;
⟵ Text will be blue
font: 30px Verdana; ⟵ Use the Verdana font at30 pixels
text-align: center; ⟵ Text should be centered
margin: 200px 0;} ⟵ Add vertical space aboveparagraph
<p>The Albertina Museum</p> ⟵ This is what we putin the body of the page!
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Setting the paragraph
p { color: blue; ⟵ Text will be blue
font: 30px Verdana; ⟵ Use the Verdana font at30 pixels
text-align: center; ⟵ Text should be centered
margin: 200px 0;} ⟵ Add vertical space aboveparagraph
<p>The Albertina Museum</p> ⟵ This is what we putin the body of the page!
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Setting the paragraph
p { color: blue; ⟵ Text will be blue
font: 30px Verdana;
⟵ Use the Verdana font at30 pixels
text-align: center; ⟵ Text should be centered
margin: 200px 0;} ⟵ Add vertical space aboveparagraph
<p>The Albertina Museum</p> ⟵ This is what we putin the body of the page!
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Setting the paragraph
p { color: blue; ⟵ Text will be blue
font: 30px Verdana; ⟵ Use the Verdana font at30 pixels
text-align: center; ⟵ Text should be centered
margin: 200px 0;} ⟵ Add vertical space aboveparagraph
<p>The Albertina Museum</p> ⟵ This is what we putin the body of the page!
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Setting the paragraph
p { color: blue; ⟵ Text will be blue
font: 30px Verdana; ⟵ Use the Verdana font at30 pixels
text-align: center;
⟵ Text should be centered
margin: 200px 0;} ⟵ Add vertical space aboveparagraph
<p>The Albertina Museum</p> ⟵ This is what we putin the body of the page!
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Setting the paragraph
p { color: blue; ⟵ Text will be blue
font: 30px Verdana; ⟵ Use the Verdana font at30 pixels
text-align: center; ⟵ Text should be centered
margin: 200px 0;} ⟵ Add vertical space aboveparagraph
<p>The Albertina Museum</p> ⟵ This is what we putin the body of the page!
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Setting the paragraph
p { color: blue; ⟵ Text will be blue
font: 30px Verdana; ⟵ Use the Verdana font at30 pixels
text-align: center; ⟵ Text should be centered
margin: 200px 0;}
⟵ Add vertical space aboveparagraph
<p>The Albertina Museum</p> ⟵ This is what we putin the body of the page!
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Setting the paragraph
p { color: blue; ⟵ Text will be blue
font: 30px Verdana; ⟵ Use the Verdana font at30 pixels
text-align: center; ⟵ Text should be centered
margin: 200px 0;} ⟵ Add vertical space aboveparagraph
<p>The Albertina Museum</p> ⟵ This is what we putin the body of the page!
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Setting the paragraph
p { color: blue; ⟵ Text will be blue
font: 30px Verdana; ⟵ Use the Verdana font at30 pixels
text-align: center; ⟵ Text should be centered
margin: 200px 0;} ⟵ Add vertical space aboveparagraph
<p>The Albertina Museum</p>
⟵ This is what we putin the body of the page!
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Setting the paragraph
p { color: blue; ⟵ Text will be blue
font: 30px Verdana; ⟵ Use the Verdana font at30 pixels
text-align: center; ⟵ Text should be centered
margin: 200px 0;} ⟵ Add vertical space aboveparagraph
<p>The Albertina Museum</p> ⟵ This is what we putin the body of the page!
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Links
Links allow users to click their way from page to page.
<a href="url">link text</a> ⟵Make link texta link
Links can also be images, as you laready know.
<a href="url"><img src="img.jpg"></a> ⟵ Asimple image link
<h2 id="C4">Chapter 4</h2> ⟵ How to create abookmark
<a href="#C4">Jump to Chapter 4</a> ⟵ Use thisbookmark
Create a web page with both text and image links andbookmarks.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Links
Links allow users to click their way from page to page.
<a href="url">link text</a> ⟵Make link texta link
Links can also be images, as you laready know.
<a href="url"><img src="img.jpg"></a> ⟵ Asimple image link
<h2 id="C4">Chapter 4</h2> ⟵ How to create abookmark
<a href="#C4">Jump to Chapter 4</a> ⟵ Use thisbookmark
Create a web page with both text and image links andbookmarks.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Links
Links allow users to click their way from page to page.
<a href="url">link text</a>
⟵Make link texta link
Links can also be images, as you laready know.
<a href="url"><img src="img.jpg"></a> ⟵ Asimple image link
<h2 id="C4">Chapter 4</h2> ⟵ How to create abookmark
<a href="#C4">Jump to Chapter 4</a> ⟵ Use thisbookmark
Create a web page with both text and image links andbookmarks.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Links
Links allow users to click their way from page to page.
<a href="url">link text</a> ⟵Make link texta link
Links can also be images, as you laready know.
<a href="url"><img src="img.jpg"></a> ⟵ Asimple image link
<h2 id="C4">Chapter 4</h2> ⟵ How to create abookmark
<a href="#C4">Jump to Chapter 4</a> ⟵ Use thisbookmark
Create a web page with both text and image links andbookmarks.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Links
Links allow users to click their way from page to page.
<a href="url">link text</a> ⟵Make link texta link
Links can also be images, as you laready know.
<a href="url"><img src="img.jpg"></a> ⟵ Asimple image link
<h2 id="C4">Chapter 4</h2> ⟵ How to create abookmark
<a href="#C4">Jump to Chapter 4</a> ⟵ Use thisbookmark
Create a web page with both text and image links andbookmarks.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Links
Links allow users to click their way from page to page.
<a href="url">link text</a> ⟵Make link texta link
Links can also be images, as you laready know.
<a href="url"><img src="img.jpg"></a>
⟵ Asimple image link
<h2 id="C4">Chapter 4</h2> ⟵ How to create abookmark
<a href="#C4">Jump to Chapter 4</a> ⟵ Use thisbookmark
Create a web page with both text and image links andbookmarks.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Links
Links allow users to click their way from page to page.
<a href="url">link text</a> ⟵Make link texta link
Links can also be images, as you laready know.
<a href="url"><img src="img.jpg"></a> ⟵ Asimple image link
<h2 id="C4">Chapter 4</h2> ⟵ How to create abookmark
<a href="#C4">Jump to Chapter 4</a> ⟵ Use thisbookmark
Create a web page with both text and image links andbookmarks.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Links
Links allow users to click their way from page to page.
<a href="url">link text</a> ⟵Make link texta link
Links can also be images, as you laready know.
<a href="url"><img src="img.jpg"></a> ⟵ Asimple image link
<h2 id="C4">Chapter 4</h2>
⟵ How to create abookmark
<a href="#C4">Jump to Chapter 4</a> ⟵ Use thisbookmark
Create a web page with both text and image links andbookmarks.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Links
Links allow users to click their way from page to page.
<a href="url">link text</a> ⟵Make link texta link
Links can also be images, as you laready know.
<a href="url"><img src="img.jpg"></a> ⟵ Asimple image link
<h2 id="C4">Chapter 4</h2> ⟵ How to create abookmark
<a href="#C4">Jump to Chapter 4</a> ⟵ Use thisbookmark
Create a web page with both text and image links andbookmarks.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Links
Links allow users to click their way from page to page.
<a href="url">link text</a> ⟵Make link texta link
Links can also be images, as you laready know.
<a href="url"><img src="img.jpg"></a> ⟵ Asimple image link
<h2 id="C4">Chapter 4</h2> ⟵ How to create abookmark
<a href="#C4">Jump to Chapter 4</a>
⟵ Use thisbookmark
Create a web page with both text and image links andbookmarks.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Links
Links allow users to click their way from page to page.
<a href="url">link text</a> ⟵Make link texta link
Links can also be images, as you laready know.
<a href="url"><img src="img.jpg"></a> ⟵ Asimple image link
<h2 id="C4">Chapter 4</h2> ⟵ How to create abookmark
<a href="#C4">Jump to Chapter 4</a> ⟵ Use thisbookmark
Create a web page with both text and image links andbookmarks.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML Links
Links allow users to click their way from page to page.
<a href="url">link text</a> ⟵Make link texta link
Links can also be images, as you laready know.
<a href="url"><img src="img.jpg"></a> ⟵ Asimple image link
<h2 id="C4">Chapter 4</h2> ⟵ How to create abookmark
<a href="#C4">Jump to Chapter 4</a> ⟵ Use thisbookmark
Create a web page with both text and image links andbookmarks.
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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!
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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!
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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!
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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!
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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!
Introduction toHTML5: Part I
Syropoulos
MarkupLanguages
The Web andHTML
HTML5DocumentStructure
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!
