Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to HTML5: Part I

First part of an introduction to HTML5 and related technologies

  • Be the first to comment

  • Be the first to like this

Introduction to HTML5: Part I

  1. 1. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Introduction to HTML5: Part I Apostolos Syropoulos Xanthi, Greece asyropoulos@yahoo.com Introduction to HTML5 for members of the Erasmus+ founded project GAMES
  2. 2. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Presentation Outline 1 Markup Languages 2 The Web and HTML 3 HTML5 Document Structure 4 Finale
  3. 3. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is markup?
  4. 4. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is markup? Markup a sequence of characters that you insert at certain places in a text or word processing file to indicate how the file should look when it is printed or displayed or to describe the document’s logical structure.
  5. 5. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is markup? Markup a sequence of characters that you insert at certain places in a text or word processing file to indicate how the file should look when it is printed or displayed or to describe the document’s logical structure.
  6. 6. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Examples of Textual markup
  7. 7. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Examples of Textual markup LATEX markup: normal textbf{bold} normal again
  8. 8. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Examples of Textual markup LATEX markup: normal textbf{bold} normal again troff markup: normal .ft B bold .ft R normal again
  9. 9. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Examples of Textual markup LATEX markup: normal textbf{bold} normal again troff markup: normal .ft B bold .ft R normal again HTML markup: normal <b>bold</b> normal again
  10. 10. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Examples of Textual markup LATEX markup: normal textbf{bold} normal again troff markup: normal .ft B bold .ft R normal again HTML markup: normal <b>bold</b> normal again Wiki markup: normal '''bold''' normal again
  11. 11. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Examples of Textual markup (cont.)
  12. 12. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Examples of Textual markup (cont.) Word2007 markup: <w:r><w:rPr><w:lang w:val="en-US"/></w:rPr> <w:t xml:space="preserve">Normal </w:t></w:r> <w:r w:rsidRPr="00F166C3"><w:rPr><w:b/> <w:lang w:val="en-US"/></w:rPr><w:t>bold</w:t></w:r> <w:proofErr w:type="gramEnd"/> <w:r w:rsidRPr="00F166C3"><w:rPr><w:b/><w:lang w:val="en-US"/></w:rPr> <w:t xml:space="preserve"> </w:t></w:r><w:r><w:rPr><w:lang w:val="en-US"/> </w:rPr><w:t>normal again</w:t></w:r>
  13. 13. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Examples of Textual markup (cont.) Word2007 markup: <w:r><w:rPr><w:lang w:val="en-US"/></w:rPr> <w:t xml:space="preserve">Normal </w:t></w:r> <w:r w:rsidRPr="00F166C3"><w:rPr><w:b/> <w:lang w:val="en-US"/></w:rPr><w:t>bold</w:t></w:r> <w:proofErr w:type="gramEnd"/> <w:r w:rsidRPr="00F166C3"><w:rPr><w:b/><w:lang w:val="en-US"/></w:rPr> <w:t xml:space="preserve"> </w:t></w:r><w:r><w:rPr><w:lang w:val="en-US"/> </w:rPr><w:t>normal again</w:t></w:r> LibreOffice/OpenOffice use similar markup.
  14. 14. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is HyperText?
  15. 15. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is HyperText? Hyper- generally means “above, beyond”, thus hypertext is something that goes beyond the limitations of ordinary text (e.g., it can be non-sequential).
  16. 16. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is HyperText? Hyper- generally means “above, beyond”, thus hypertext is something that goes beyond the limitations of ordinary text (e.g., it can be non-sequential). Hypertext is text which contains links to other information. The term was coined by Theodor Holm “Ted” Nelson around 1963.
  17. 17. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is HyperText? Hyper- generally means “above, beyond”, thus hypertext is something that goes beyond the limitations of ordinary text (e.g., it can be non-sequential). Hypertext is text which contains links to other information. The term was coined by Theodor Holm “Ted” Nelson around 1963. Software programs such as dictionaries and encyclopedias have long used hypertext in their definitions allowing readers to quickly navigate content.
  18. 18. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is HyperText? Hyper- generally means “above, beyond”, thus hypertext is something that goes beyond the limitations of ordinary text (e.g., it can be non-sequential). Hypertext is text which contains links to other information. The term was coined by Theodor Holm “Ted” Nelson around 1963. Software programs such as dictionaries and encyclopedias have long used hypertext in their definitions allowing readers to quickly navigate content. HyperMedia is a term used for hypertext which is not constrained to be text: it can include graphics, video and sound, etc. Ted Nelson coined this term too.
  19. 19. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is HyperText? Hyper- generally means “above, beyond”, thus hypertext is something that goes beyond the limitations of ordinary text (e.g., it can be non-sequential). Hypertext is text which contains links to other information. The term was coined by Theodor Holm “Ted” Nelson around 1963. Software programs such as dictionaries and encyclopedias have long used hypertext in their definitions allowing readers to quickly navigate content. HyperMedia is a term used for hypertext which is not constrained to be text: it can include graphics, video and sound, etc. Ted Nelson coined this term too.
  20. 20. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is Markup Language?
  21. 21. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is Markup Language? A set of rules specifying how to markup content so to control its structure, formatting, or the relationship among its parts.
  22. 22. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is Markup Language? A set of rules specifying how to markup content so to control its structure, formatting, or the relationship among its parts. The most widely used markup languages are SGML, HTML, and XML.
  23. 23. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is Markup Language? A set of rules specifying how to markup content so to control its structure, formatting, or the relationship among its parts. The most widely used markup languages are SGML, HTML, and XML. The Standard Generalized Markup Language (SGML), is a language for defining markup languages. HTML is one such “application” of SGML.
  24. 24. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is Markup Language? A set of rules specifying how to markup content so to control its structure, formatting, or the relationship among its parts. The most widely used markup languages are SGML, HTML, and XML. The Standard Generalized Markup Language (SGML), is a language for defining markup languages. HTML is one such “application” of SGML. XML stands for eXtensible Markup Language.
  25. 25. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is Markup Language? A set of rules specifying how to markup content so to control its structure, formatting, or the relationship among its parts. The most widely used markup languages are SGML, HTML, and XML. The Standard Generalized Markup Language (SGML), is a language for defining markup languages. HTML is one such “application” of SGML. XML stands for eXtensible Markup Language. XML was designed to store and transport data.
  26. 26. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is Markup Language? A set of rules specifying how to markup content so to control its structure, formatting, or the relationship among its parts. The most widely used markup languages are SGML, HTML, and XML. The Standard Generalized Markup Language (SGML), is a language for defining markup languages. HTML is one such “application” of SGML. XML stands for eXtensible Markup Language. XML was designed to store and transport data. XML was designed to be both human- and machine-readable.
  27. 27. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is Markup Language? A set of rules specifying how to markup content so to control its structure, formatting, or the relationship among its parts. The most widely used markup languages are SGML, HTML, and XML. The Standard Generalized Markup Language (SGML), is a language for defining markup languages. HTML is one such “application” of SGML. XML stands for eXtensible Markup Language. XML was designed to store and transport data. XML was designed to be both human- and machine-readable. The HyperText Markup Language or just HTML is the de facto standard for the presentation of information over the Web.
  28. 28. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . History of HTML
  29. 29. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . History of HTML Tim Berners-Lee created what we call the Web while he was working at CERN.
  30. 30. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . History of HTML Tim Berners-Lee created what we call the Web while he was working at CERN. He created HTML and the HyperText Transfer Protocol (HTTP) and designed and implemented the first web browser.
  31. 31. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . History of HTML Tim Berners-Lee created what we call the Web while he was working at CERN. He created HTML and the HyperText Transfer Protocol (HTTP) and designed and implemented the first web browser. On October 1991 “HTML Tags” was made available.
  32. 32. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . History of HTML Tim Berners-Lee created what we call the Web while he was working at CERN. He created HTML and the HyperText Transfer Protocol (HTTP) and designed and implemented the first web browser. On October 1991 “HTML Tags” was made available. A description of version 2.0 of HTML was published on November 1995.
  33. 33. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . History of HTML Tim Berners-Lee created what we call the Web while he was working at CERN. He created HTML and the HyperText Transfer Protocol (HTTP) and designed and implemented the first web browser. On October 1991 “HTML Tags” was made available. A description of version 2.0 of HTML was published on November 1995. HTML 3.2 was published on January 1997.
  34. 34. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . History of HTML Tim Berners-Lee created what we call the Web while he was working at CERN. He created HTML and the HyperText Transfer Protocol (HTTP) and designed and implemented the first web browser. On October 1991 “HTML Tags” was made available. A description of version 2.0 of HTML was published on November 1995. HTML 3.2 was published on January 1997. HTML 4.0 was published on December 1997.
  35. 35. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . History of HTML Tim Berners-Lee created what we call the Web while he was working at CERN. He created HTML and the HyperText Transfer Protocol (HTTP) and designed and implemented the first web browser. On October 1991 “HTML Tags” was made available. A description of version 2.0 of HTML was published on November 1995. HTML 3.2 was published on January 1997. HTML 4.0 was published on December 1997. HTML5 was published on October 2014 while HTML 5.1 was published on November 2016.
  36. 36. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is the HTTP?
  37. 37. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is the HTTP? It is a protocol that allows browsers to fetch web pages.
  38. 38. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is the HTTP? It is a protocol that allows browsers to fetch web pages. Each server connected to the Internet is like a fortress.
  39. 39. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is the HTTP? It is a protocol that allows browsers to fetch web pages. Each server connected to the Internet is like a fortress. The fortress has a number of communication ports.
  40. 40. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is the HTTP? It is a protocol that allows browsers to fetch web pages. Each server connected to the Internet is like a fortress. The fortress has a number of communication ports. Each port is numbered and the port for web pages is number 80.
  41. 41. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is the HTTP? It is a protocol that allows browsers to fetch web pages. Each server connected to the Internet is like a fortress. The fortress has a number of communication ports. Each port is numbered and the port for web pages is number 80. A client sends a request to a server’s port 80.
  42. 42. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is the HTTP? It is a protocol that allows browsers to fetch web pages. Each server connected to the Internet is like a fortress. The fortress has a number of communication ports. Each port is numbered and the port for web pages is number 80. A client sends a request to a server’s port 80. The server replies by sending the HTML file and accompanying data files.
  43. 43. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is the HTTP? It is a protocol that allows browsers to fetch web pages. Each server connected to the Internet is like a fortress. The fortress has a number of communication ports. Each port is numbered and the port for web pages is number 80. A client sends a request to a server’s port 80. The server replies by sending the HTML file and accompanying data files. The web page is displayed locally. Let’s see what goes in the backstage…
  44. 44. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTTP in Action! apostolo@adalind>> telnet reudic.eu 80 Trying 192.185.173.40... Connected to reudic.eu. Escape character is '^]'. GET /index.html HTTP/1.1 host: reudic.eu HTTP/1.1 200 OK Server: nginx/1.12.2 Date: Mon, 11 Dec 2017 19:24:17 GMT Content-Type: text/html Content-Length: 11612 Connection: keep-alive Last-Modified: Sun, 13 Aug 2017 20:42:23 GMT Accept-Ranges: bytes <!DOCTYPE html>
  45. 45. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Explaining the Action
  46. 46. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Explaining the Action The telnet command asks to connect to the server on port 80.
  47. 47. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Explaining the Action The telnet command asks to connect to the server on port 80. The web server (usually some version of Apache) receives the request and responds accordingly.
  48. 48. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Explaining the Action The telnet command asks to connect to the server on port 80. The web server (usually some version of Apache) receives the request and responds accordingly. Then we ask for file index.html which contains the web page.
  49. 49. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Explaining the Action The telnet command asks to connect to the server on port 80. The web server (usually some version of Apache) receives the request and responds accordingly. Then we ask for file index.html which contains the web page. Also, we specify the server in case the host serves virtual hosts.
  50. 50. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Explaining the Action The telnet command asks to connect to the server on port 80. The web server (usually some version of Apache) receives the request and responds accordingly. Then we ask for file index.html which contains the web page. Also, we specify the server in case the host serves virtual hosts. The server replies by sending the contents of file index.html
  51. 51. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Explaining the Action The telnet command asks to connect to the server on port 80. The web server (usually some version of Apache) receives the request and responds accordingly. Then we ask for file index.html which contains the web page. Also, we specify the server in case the host serves virtual hosts. The server replies by sending the contents of file index.html Try to request an non-existing file to see what will happen.
  52. 52. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . NCSA Mosaic Browser
  53. 53. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . NCSA Mosaic Browser Mosaic is the web browser that popularized the World Wide Web and the Internet.
  54. 54. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . NCSA Mosaic Browser Mosaic is the web browser that popularized the World Wide Web and the Internet.
  55. 55. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Netscape Navigator Browser
  56. 56. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Netscape Navigator Browser Netscape Navigator is a discontinued proprietary web browser. Firefox is an offspring of this browser.
  57. 57. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Netscape Navigator Browser Netscape Navigator is a discontinued proprietary web browser. Firefox is an offspring of this browser.
  58. 58. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Sun’s HotJava Browser
  59. 59. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Sun’s HotJava Browser The HotJava browser was the first one that could run Java applets. it was created by Sun Microsystems the company that created Java.
  60. 60. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Sun’s HotJava Browser The HotJava browser was the first one that could run Java applets. it was created by Sun Microsystems the company that created Java.
  61. 61. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Today’s Browsers
  62. 62. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Today’s Browsers Mozilla Firefox was created by the Mozilla Foundation.
  63. 63. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Today’s Browsers Mozilla Firefox was created by the Mozilla Foundation. Google Chrome was created by Google.
  64. 64. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Today’s Browsers Mozilla Firefox was created by the Mozilla Foundation. Google Chrome was created by Google. Opera was created by Opera Software AS.
  65. 65. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Today’s Browsers Mozilla Firefox was created by the Mozilla Foundation. Google Chrome was created by Google. Opera was created by Opera Software AS. Microsoft Edge was created by Microsoft Corp.
  66. 66. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Today’s Browsers Mozilla Firefox was created by the Mozilla Foundation. Google Chrome was created by Google. Opera was created by Opera Software AS. Microsoft Edge was created by Microsoft Corp. Vivaldi was created by Vivaldi Technologies.
  67. 67. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Today’s Browsers Mozilla Firefox was created by the Mozilla Foundation. Google Chrome was created by Google. Opera was created by Opera Software AS. Microsoft Edge was created by Microsoft Corp. Vivaldi was created by Vivaldi Technologies. Microsoft Internet Explorer was created by Microsoft Corp.
  68. 68. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Today’s Browsers Mozilla Firefox was created by the Mozilla Foundation. Google Chrome was created by Google. Opera was created by Opera Software AS. Microsoft Edge was created by Microsoft Corp. Vivaldi was created by Vivaldi Technologies. Microsoft Internet Explorer was created by Microsoft Corp. Tor Browser was created by the The Tor Project.
  69. 69. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . A Simple Document
  70. 70. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . A Simple Document Open Notepad++ and type the HTML markup that follows.
  71. 71. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . A Simple Document Open Notepad++ and type the HTML markup that follows. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Greetings</title> </head> <body> Hello World! </body> </html>
  72. 72. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let us see the result of our work…
  73. 73. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let us see the result of our work… Save the content to a file whose name extension is html (e.g., Example.html) and open it with your browser. You will see something like what follows.
  74. 74. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let us see the result of our work… Save the content to a file whose name extension is html (e.g., Example.html) and open it with your browser. You will see something like what follows.
  75. 75. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The parts of a document
  76. 76. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The parts of a document <!DOCTYPE html>
  77. 77. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The parts of a document <!DOCTYPE html> ⟵ document type
  78. 78. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The parts of a document <!DOCTYPE html> ⟵ document type <html>
  79. 79. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The parts of a document <!DOCTYPE html> ⟵ document type <html> ⟵ beginning of document
  80. 80. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The parts of a document <!DOCTYPE html> ⟵ document type <html> ⟵ beginning of document <head>
  81. 81. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The parts of a document <!DOCTYPE html> ⟵ document type <html> ⟵ beginning of document <head> ⟵ beginning of head
  82. 82. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The parts of a document <!DOCTYPE html> ⟵ document type <html> ⟵ beginning of document <head> ⟵ beginning of head <title>Greetings</title>
  83. 83. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The parts of a document <!DOCTYPE html> ⟵ document type <html> ⟵ beginning of document <head> ⟵ beginning of head <title>Greetings</title> ⟵the title
  84. 84. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The parts of a document <!DOCTYPE html> ⟵ document type <html> ⟵ beginning of document <head> ⟵ beginning of head <title>Greetings</title> ⟵the title </head>
  85. 85. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The parts of a document <!DOCTYPE html> ⟵ document type <html> ⟵ beginning of document <head> ⟵ beginning of head <title>Greetings</title> ⟵the title </head> ⟵ end of head
  86. 86. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The parts of a document <!DOCTYPE html> ⟵ document type <html> ⟵ beginning of document <head> ⟵ beginning of head <title>Greetings</title> ⟵the title </head> ⟵ end of head <body>
  87. 87. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The parts of a document <!DOCTYPE html> ⟵ document type <html> ⟵ beginning of document <head> ⟵ beginning of head <title>Greetings</title> ⟵the title </head> ⟵ end of head <body> ⟵ beginning of body
  88. 88. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The parts of a document <!DOCTYPE html> ⟵ document type <html> ⟵ beginning of document <head> ⟵ beginning of head <title>Greetings</title> ⟵the title </head> ⟵ end of head <body> ⟵ beginning of body </body>
  89. 89. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The parts of a document <!DOCTYPE html> ⟵ document type <html> ⟵ beginning of document <head> ⟵ beginning of head <title>Greetings</title> ⟵the title </head> ⟵ end of head <body> ⟵ beginning of body </body> ⟵ end of body
  90. 90. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The parts of a document <!DOCTYPE html> ⟵ document type <html> ⟵ beginning of document <head> ⟵ beginning of head <title>Greetings</title> ⟵the title </head> ⟵ end of head <body> ⟵ beginning of body </body> ⟵ end of body </html>
  91. 91. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The parts of a document <!DOCTYPE html> ⟵ document type <html> ⟵ beginning of document <head> ⟵ beginning of head <title>Greetings</title> ⟵the title </head> ⟵ end of head <body> ⟵ beginning of body </body> ⟵ end of body </html> ⟵ end of document
  92. 92. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The head of a document
  93. 93. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The head of a document The <head> element is a container for metadata (data about data)
  94. 94. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The head of a document The <head> element is a container for metadata (data about data) The <style> element is used to define style information for a single HTML page.
  95. 95. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The head of a document The <head> element is a container for metadata (data about data) The <style> element is used to define style information for a single HTML page. The <link> element is used to link to external style sheets.
  96. 96. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The head of a document The <head> element is a container for metadata (data about data) The <style> element is used to define style information for a single HTML page. The <link> element is used to link to external style sheets. The <meta> element is used to specify which character set is used, page description, keywords, author, etc.
  97. 97. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The head of a document The <head> element is a container for metadata (data about data) The <style> element is used to define style information for a single HTML page. The <link> element is used to link to external style sheets. The <meta> element is used to specify which character set is used, page description, keywords, author, etc. <meta charset="UTF-8">
  98. 98. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The head of a document The <head> element is a container for metadata (data about data) The <style> element is used to define style information for a single HTML page. The <link> element is used to link to external style sheets. The <meta> element is used to specify which character set is used, page description, keywords, author, etc. <meta charset="UTF-8"> ⟵ encoding
  99. 99. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The head of a document The <head> element is a container for metadata (data about data) The <style> element is used to define style information for a single HTML page. The <link> element is used to link to external style sheets. The <meta> element is used to specify which character set is used, page description, keywords, author, etc. <meta charset="UTF-8"> ⟵ encoding <meta name="description" content="HTML5 Examples">
  100. 100. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The head of a document The <head> element is a container for metadata (data about data) The <style> element is used to define style information for a single HTML page. The <link> element is used to link to external style sheets. The <meta> element is used to specify which character set is used, page description, keywords, author, etc. <meta charset="UTF-8"> ⟵ encoding <meta name="description" content="HTML5 Examples"> <meta name="keywords" content="HTML5, CSS">
  101. 101. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The head of a document The <head> element is a container for metadata (data about data) The <style> element is used to define style information for a single HTML page. The <link> element is used to link to external style sheets. The <meta> element is used to specify which character set is used, page description, keywords, author, etc. <meta charset="UTF-8"> ⟵ encoding <meta name="description" content="HTML5 Examples"> <meta name="keywords" content="HTML5, CSS"> <meta name="author" content="James T. Kirk">
  102. 102. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The head of a document The <head> element is a container for metadata (data about data) The <style> element is used to define style information for a single HTML page. The <link> element is used to link to external style sheets. The <meta> element is used to specify which character set is used, page description, keywords, author, etc. <meta charset="UTF-8"> ⟵ encoding <meta name="description" content="HTML5 Examples"> <meta name="keywords" content="HTML5, CSS"> <meta name="author" content="James T. Kirk"> <meta http-equiv="refresh" content="30">
  103. 103. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The head of a document The <head> element is a container for metadata (data about data) The <style> element is used to define style information for a single HTML page. The <link> element is used to link to external style sheets. The <meta> element is used to specify which character set is used, page description, keywords, author, etc. <meta charset="UTF-8"> ⟵ encoding <meta name="description" content="HTML5 Examples"> <meta name="keywords" content="HTML5, CSS"> <meta name="author" content="James T. Kirk"> <meta http-equiv="refresh" content="30"> ⟵ refresh rate
  104. 104. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is this character encoding?
  105. 105. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is this character encoding? Text is made of characters. Each character is represented internally using an encoding.
  106. 106. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is this character encoding? Text is made of characters. Each character is represented internally using an encoding. There are many different character encodings.
  107. 107. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is this character encoding? Text is made of characters. Each character is represented internally using an encoding. There are many different character encodings. In one common encoding the letter é is represented internally by the number 233 while in another encoding this number represents the letter щ.
  108. 108. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is this character encoding? Text is made of characters. Each character is represented internally using an encoding. There are many different character encodings. In one common encoding the letter é is represented internally by the number 233 while in another encoding this number represents the letter щ. Unicode solves this and other problems by encoding all possible symbols.
  109. 109. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is this character encoding? Text is made of characters. Each character is represented internally using an encoding. There are many different character encodings. In one common encoding the letter é is represented internally by the number 233 while in another encoding this number represents the letter щ. Unicode solves this and other problems by encoding all possible symbols. UTF-8 is only one of the possible ways of encoding Unicode characters but it is one supported internally by all operating systems.
  110. 110. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is this character encoding? Text is made of characters. Each character is represented internally using an encoding. There are many different character encodings. In one common encoding the letter é is represented internally by the number 233 while in another encoding this number represents the letter щ. Unicode solves this and other problems by encoding all possible symbols. UTF-8 is only one of the possible ways of encoding Unicode characters but it is one supported internally by all operating systems. We need <meta charset="UTF-8"> to ensure that all characters will be displayed correctly.
  111. 111. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Saving HTML files
  112. 112. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Saving HTML files Always save a file as a UTF-8 encoded file.
  113. 113. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Saving HTML files Always save a file as a UTF-8 encoded file.
  114. 114. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Paragraphs and Alignment
  115. 115. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Paragraphs and Alignment Element <p> is for paragraphs.
  116. 116. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Paragraphs and Alignment Element <p> is for paragraphs. <p>This is a paragraph</p>
  117. 117. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Paragraphs and Alignment Element <p> is for paragraphs. <p>This is a paragraph</p>
  118. 118. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Paragraphs and Alignment Element <p> is for paragraphs. <p>This is a paragraph</p> To override paragraph formatting use a style parameter.
  119. 119. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Paragraphs and Alignment Element <p> is for paragraphs. <p>This is a paragraph</p> To override paragraph formatting use a style parameter. <p style="text-align:justify">Justified text</p>
  120. 120. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Paragraphs and Alignment Element <p> is for paragraphs. <p>This is a paragraph</p> To override paragraph formatting use a style parameter. <p style="text-align:justify">Justified text</p> <p style="text-align:center">Centered text</p>
  121. 121. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Paragraphs and Alignment Element <p> is for paragraphs. <p>This is a paragraph</p> To override paragraph formatting use a style parameter. <p style="text-align:justify">Justified text</p> <p style="text-align:center">Centered text</p> <p style="text-align:right">Right-aligned text</p>
  122. 122. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Paragraphs and Alignment Element <p> is for paragraphs. <p>This is a paragraph</p> To override paragraph formatting use a style parameter. <p style="text-align:justify">Justified text</p> <p style="text-align:center">Centered text</p> <p style="text-align:right">Right-aligned text</p>
  123. 123. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s practice paragraphs
  124. 124. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s practice paragraphs Open a text-editor and type the HTML markup that follows.
  125. 125. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s practice paragraphs Open a text-editor and type the HTML markup that follows. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>&lt;p&gt; examples</title> </head> <body> <p style="text-align:justify">type some long text</p> </body> </html>
  126. 126. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s practice paragraphs Open a text-editor and type the HTML markup that follows. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>&lt;p&gt; examples</title> </head> <body> <p style="text-align:justify">type some long text</p> </body> </html> Note that &lt; and &gt; are an entity names to get the < and > symbols.
  127. 127. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s practice paragraphs (2)
  128. 128. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s practice paragraphs (2) Save what you have typed as an HTML file and open it with a browser.
  129. 129. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s practice paragraphs (2) Save what you have typed as an HTML file and open it with a browser. Next modify the mark up as follows.
  130. 130. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s practice paragraphs (2) Save what you have typed as an HTML file and open it with a browser. Next modify the mark up as follows. <p style="text-align:center">do not change the text</p>
  131. 131. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s practice paragraphs (2) Save what you have typed as an HTML file and open it with a browser. Next modify the mark up as follows. <p style="text-align:center">do not change the text</p> Check out the result of the modification and then modify the mark up again.
  132. 132. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s practice paragraphs (2) Save what you have typed as an HTML file and open it with a browser. Next modify the mark up as follows. <p style="text-align:center">do not change the text</p> Check out the result of the modification and then modify the mark up again. <p style="text-align:right">do not change the text</p>
  133. 133. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Headers
  134. 134. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Headers Headings are defined with the <h1> to <h6> tags.
  135. 135. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Headers Headings are defined with the <h1> to <h6> tags.
  136. 136. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Headers Headings are defined with the <h1> to <h6> tags. Insert headings into your working file. <h1>Heading 1</h1> <h2>Heading 2</h2> ⋮
  137. 137. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Italics, Bold,…
  138. 138. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Italics, Bold,… The <b> tag is used to set text in bold face.
  139. 139. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Italics, Bold,… The <b> tag is used to set text in bold face. The <i> tag is used to set text in italic (slanted) face.
  140. 140. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Italics, Bold,… The <b> tag is used to set text in bold face. The <i> tag is used to set text in italic (slanted) face. To emphasize text use the <em> tag.
  141. 141. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Italics, Bold,… The <b> tag is used to set text in bold face. The <i> tag is used to set text in italic (slanted) face. To emphasize text use the <em> tag. Use <i><b> tags to create italic bold face.
  142. 142. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Italics, Bold,… The <b> tag is used to set text in bold face. The <i> tag is used to set text in italic (slanted) face. To emphasize text use the <em> tag. Use <i><b> tags to create italic bold face. The <tt> tag sets text in a monospaced font.
  143. 143. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Italics, Bold,… The <b> tag is used to set text in bold face. The <i> tag is used to set text in italic (slanted) face. To emphasize text use the <em> tag. Use <i><b> tags to create italic bold face. The <tt> tag sets text in a monospaced font. Use <h3 style="font-family: MyFont">Κείμενο</h3> to set text in your choice of font.
  144. 144. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Italics, Bold,… The <b> tag is used to set text in bold face. The <i> tag is used to set text in italic (slanted) face. To emphasize text use the <em> tag. Use <i><b> tags to create italic bold face. The <tt> tag sets text in a monospaced font. Use <h3 style="font-family: MyFont">Κείμενο</h3> to set text in your choice of font.
  145. 145. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . More on fonts
  146. 146. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . More on fonts Enter <i>Italic text</i>&emsp; <b>text in bold face</b> into your file and check out the result.
  147. 147. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . More on fonts Enter <i>Italic text</i>&emsp; <b>text in bold face</b> into your file and check out the result. The entity &emsp; creates an em space and &ensp; an en space.
  148. 148. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . More on fonts Enter <i>Italic text</i>&emsp; <b>text in bold face</b> into your file and check out the result. The entity &emsp; creates an em space and &ensp; an en space. Enter <em>emphasized text</em>&emsp;
  149. 149. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . More on fonts Enter <i>Italic text</i>&emsp; <b>text in bold face</b> into your file and check out the result. The entity &emsp; creates an em space and &ensp; an en space. Enter <em>emphasized text</em>&emsp; and <tt>monospaced font</tt><br> into your file and check out the result.
  150. 150. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . More on fonts Enter <i>Italic text</i>&emsp; <b>text in bold face</b> into your file and check out the result. The entity &emsp; creates an em space and &ensp; an en space. Enter <em>emphasized text</em>&emsp; and <tt>monospaced font</tt><br> into your file and check out the result. The <br> tag is behaves like the enter key in a word processor.
  151. 151. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . More on fonts Enter <i>Italic text</i>&emsp; <b>text in bold face</b> into your file and check out the result. The entity &emsp; creates an em space and &ensp; an en space. Enter <em>emphasized text</em>&emsp; and <tt>monospaced font</tt><br> into your file and check out the result. The <br> tag is behaves like the enter key in a word processor. Enter <h3 style="font-family: Mistral">Vienna, Austria</h3> to check out the result.
  152. 152. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Simple decorations
  153. 153. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Simple decorations To add a background color use <body style="background-color:#E6E6FA"> or <body style="background-color:blue">
  154. 154. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Simple decorations To add a background color use <body style="background-color:#E6E6FA"> or <body style="background-color:blue"> Adding background image(s) is a bit involved and we will say more about it later.
  155. 155. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Simple decorations To add a background color use <body style="background-color:#E6E6FA"> or <body style="background-color:blue"> Adding background image(s) is a bit involved and we will say more about it later. The tag <img src="smiley.gif" alt="Smiley face" width="42" height="42"> adds an image into a web page.
  156. 156. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Simple decorations To add a background color use <body style="background-color:#E6E6FA"> or <body style="background-color:blue"> Adding background image(s) is a bit involved and we will say more about it later. The tag <img src="smiley.gif" alt="Smiley face" width="42" height="42"> adds an image into a web page. The <hr> tag adds a horizontal line.
  157. 157. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Simple decorations To add a background color use <body style="background-color:#E6E6FA"> or <body style="background-color:blue"> Adding background image(s) is a bit involved and we will say more about it later. The tag <img src="smiley.gif" alt="Smiley face" width="42" height="42"> adds an image into a web page. The <hr> tag adds a horizontal line. Use <p style="color:red">This is a paragraph.</p> to have a paragraph in red.
  158. 158. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Simple decorations To add a background color use <body style="background-color:#E6E6FA"> or <body style="background-color:blue"> Adding background image(s) is a bit involved and we will say more about it later. The tag <img src="smiley.gif" alt="Smiley face" width="42" height="42"> adds an image into a web page. The <hr> tag adds a horizontal line. Use <p style="color:red">This is a paragraph.</p> to have a paragraph in red. Use <h3 style="font-family: Verdana; color: blue">Έρασμος</h3> to use the Verdana typeface in blue.
  159. 159. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Wallpapers
  160. 160. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Wallpapers Wallpapers can be added with CSS…We will say a few things here. Very few, I promise!
  161. 161. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Wallpapers Wallpapers can be added with CSS…We will say a few things here. Very few, I promise!
  162. 162. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Adding wallpapers The code that follows takes care of everything!
  163. 163. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Adding wallpapers The code that follows takes care of everything! <style> html { height: 100%; } body { background-image: url("DSC_1260.JPG"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } p {color: blue; font: 30px Verdana; text-align: center; } </style>
  164. 164. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Wallpapers: The Gory Details
  165. 165. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Wallpapers: The Gory Details element { properties }
  166. 166. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Wallpapers: The Gory Details element { properties } ⟵ General form
  167. 167. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Wallpapers: The Gory Details element { properties } ⟵ General form html { height: 100%; }
  168. 168. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Wallpapers: The Gory Details element { properties } ⟵ General form html { height: 100%; } ⟵ Make page high enough
  169. 169. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Wallpapers: The Gory Details element { properties } ⟵ General form html { height: 100%; } ⟵ Make page high enough body {background-image: url("DSC_1260.JPG");
  170. 170. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Wallpapers: The Gory Details element { properties } ⟵ General form html { height: 100%; } ⟵ Make page high enough body {background-image: url("DSC_1260.JPG"); ⟵ Image file to load
  171. 171. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Wallpapers: The Gory Details element { properties } ⟵ General form html { height: 100%; } ⟵ Make page high enough body {background-image: url("DSC_1260.JPG"); ⟵ Image file to load height: 100%;
  172. 172. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Wallpapers: The Gory Details element { properties } ⟵ General form html { height: 100%; } ⟵ Make page high enough body {background-image: url("DSC_1260.JPG"); ⟵ Image file to load height: 100%; ⟵ Occupy all available verical space
  173. 173. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Wallpapers: The Gory Details element { properties } ⟵ General form html { height: 100%; } ⟵ Make page high enough body {background-image: url("DSC_1260.JPG"); ⟵ Image file to load height: 100%; ⟵ Occupy all available verical space background-position: center;
  174. 174. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Wallpapers: The Gory Details element { properties } ⟵ General form html { height: 100%; } ⟵ Make page high enough body {background-image: url("DSC_1260.JPG"); ⟵ Image file to load height: 100%; ⟵ Occupy all available verical space background-position: center; ⟵ Put image at center
  175. 175. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Wallpapers: The Gory Details element { properties } ⟵ General form html { height: 100%; } ⟵ Make page high enough body {background-image: url("DSC_1260.JPG"); ⟵ Image file to load height: 100%; ⟵ Occupy all available verical space background-position: center; ⟵ Put image at center background-repeat: no-repeat;
  176. 176. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Wallpapers: The Gory Details element { properties } ⟵ General form html { height: 100%; } ⟵ Make page high enough body {background-image: url("DSC_1260.JPG"); ⟵ Image file to load height: 100%; ⟵ Occupy all available verical space background-position: center; ⟵ Put image at center background-repeat: no-repeat; ⟵ Use one copy of the image
  177. 177. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Wallpapers: The Gory Details element { properties } ⟵ General form html { height: 100%; } ⟵ Make page high enough body {background-image: url("DSC_1260.JPG"); ⟵ Image file to load height: 100%; ⟵ Occupy all available verical space background-position: center; ⟵ Put image at center background-repeat: no-repeat; ⟵ Use one copy of the image background-size: cover;}
  178. 178. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Wallpapers: The Gory Details element { properties } ⟵ General form html { height: 100%; } ⟵ Make page high enough body {background-image: url("DSC_1260.JPG"); ⟵ Image file to load height: 100%; ⟵ Occupy all available verical space background-position: center; ⟵ Put image at center background-repeat: no-repeat; ⟵ Use one copy of the image background-size: cover;} ⟵ Image covers the whole screen
  179. 179. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Setting the paragraph
  180. 180. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Setting the paragraph p { color: blue;
  181. 181. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Setting the paragraph p { color: blue; ⟵ Text will be blue
  182. 182. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Setting the paragraph p { color: blue; ⟵ Text will be blue font: 30px Verdana;
  183. 183. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Setting the paragraph p { color: blue; ⟵ Text will be blue font: 30px Verdana; ⟵ Use the Verdana font at size 30
  184. 184. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Setting the paragraph p { color: blue; ⟵ Text will be blue font: 30px Verdana; ⟵ Use the Verdana font at size 30 text-align: center;
  185. 185. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Setting the paragraph p { color: blue; ⟵ Text will be blue font: 30px Verdana; ⟵ Use the Verdana font at size 30 text-align: center; ⟵ Text should be centered
  186. 186. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Setting the paragraph p { color: blue; ⟵ Text will be blue font: 30px Verdana; ⟵ Use the Verdana font at size 30 text-align: center; ⟵ Text should be centered margin: 200px 0;}
  187. 187. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Setting the paragraph p { color: blue; ⟵ Text will be blue font: 30px Verdana; ⟵ Use the Verdana font at size 30 text-align: center; ⟵ Text should be centered margin: 200px 0;} ⟵ Add vertical space above paragraph
  188. 188. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Setting the paragraph p { color: blue; ⟵ Text will be blue font: 30px Verdana; ⟵ Use the Verdana font at size 30 text-align: center; ⟵ Text should be centered margin: 200px 0;} ⟵ Add vertical space above paragraph <p>The Albertina Museum</p>
  189. 189. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Setting the paragraph p { color: blue; ⟵ Text will be blue font: 30px Verdana; ⟵ Use the Verdana font at size 30 text-align: center; ⟵ Text should be centered margin: 200px 0;} ⟵ Add vertical space above paragraph <p>The Albertina Museum</p> ⟵ This is what we put in the body of the page!
  190. 190. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Links
  191. 191. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Links Links allow users to click their way from page to page.
  192. 192. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Links Links allow users to click their way from page to page. <a href="url">link text</a>
  193. 193. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Links Links allow users to click their way from page to page. <a href="url">link text</a> ⟵ Make link text a link
  194. 194. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Links Links allow users to click their way from page to page. <a href="url">link text</a> ⟵ Make link text a link Links can also be images, as you already know.
  195. 195. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Links Links allow users to click their way from page to page. <a href="url">link text</a> ⟵ Make link text a link Links can also be images, as you already know. <a href="url"><img src="img.jpg"></a>
  196. 196. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Links Links allow users to click their way from page to page. <a href="url">link text</a> ⟵ Make link text a link Links can also be images, as you already know. <a href="url"><img src="img.jpg"></a> ⟵ A simple image link
  197. 197. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Links Links allow users to click their way from page to page. <a href="url">link text</a> ⟵ Make link text a link Links can also be images, as you already know. <a href="url"><img src="img.jpg"></a> ⟵ A simple image link <h2 id="C4">Chapter 4</h2>
  198. 198. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Links Links allow users to click their way from page to page. <a href="url">link text</a> ⟵ Make link text a link Links can also be images, as you already know. <a href="url"><img src="img.jpg"></a> ⟵ A simple image link <h2 id="C4">Chapter 4</h2> ⟵ How to create a bookmark
  199. 199. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Links Links allow users to click their way from page to page. <a href="url">link text</a> ⟵ Make link text a link Links can also be images, as you already know. <a href="url"><img src="img.jpg"></a> ⟵ A simple image link <h2 id="C4">Chapter 4</h2> ⟵ How to create a bookmark <a href="#C4">Jump to Chapter 4</a>
  200. 200. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Links Links allow users to click their way from page to page. <a href="url">link text</a> ⟵ Make link text a link Links can also be images, as you already know. <a href="url"><img src="img.jpg"></a> ⟵ A simple image link <h2 id="C4">Chapter 4</h2> ⟵ How to create a bookmark <a href="#C4">Jump to Chapter 4</a> ⟵ Use this bookmark
  201. 201. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML Links Links allow users to click their way from page to page. <a href="url">link text</a> ⟵ Make link text a link Links can also be images, as you already know. <a href="url"><img src="img.jpg"></a> ⟵ A simple image link <h2 id="C4">Chapter 4</h2> ⟵ How to create a bookmark <a href="#C4">Jump to Chapter 4</a> ⟵ Use this bookmark Create a web page with both text and image links and bookmarks.
  202. 202. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Finale
  203. 203. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Finale I have introduced basic notions related to HTML5.
  204. 204. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Finale I have introduced basic notions related to HTML5. I have described the structure of a HTML5 document
  205. 205. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Finale I have introduced basic notions related to HTML5. I have described the structure of a HTML5 document I have presented a number of tags and elements.
  206. 206. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Finale I have introduced basic notions related to HTML5. I have described the structure of a HTML5 document I have presented a number of tags and elements. In part II I will introduce tables and other interesting things!
  207. 207. Introduction to HTML5: Part I Syropoulos Markup Languages The Web and HTML HTML5 Document Structure Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Finale I have introduced basic notions related to HTML5. I have described the structure of a HTML5 document I have presented a number of tags and elements. In part II I will introduce tables and other interesting things! Thank you very much for your attention!

×