FULL STACK PROGRAMMING - Both Front End and Back End

This ppt gives details about Full Stack Programming and its basics.

1. UNIT - 1 Introduction to World Wide Web and HTML5

2. Introduction to World Wide Web and HTML5 Web Basics – Multitier Application Architecture – Client-Side Scripting versus Server-Side Scripting – W3C – HTML5: Introduction – Editing HTML5 – W3C Validation service – Headings – Linking – Images – Special Characters – Horizontal Rules – List - Tables – Forms – Form Input Types – meta elements – Page structure elements

3. Web Basics V.PREETHA AP/CSE 3

4. Overview V.PREETHA AP/CSE 4 Internet Internet-Based Services WWW HTTP URL Website Web Server W e b Browser SMT P Server ISP HTML Hyperlink DNS W3C

5. 1.What is Internet? V.PREETHA AP/CSE 5 The Internet is a vast network that connects computers all over the world. The Internet is a worldwide system of computer networks in which users at any one computer can get information from any other computer if they have permission. How the Internet works? A set of protocols called Transmission Control Protocol/Internet Protocol ( TCP/IP ). The TCP/IP suite, present sets of rules that devices must follow in order to complete tasks. Without this common collection of rules, machines would not be able to communicate. The protocols are also responsible for translating the alphabetic text of a message into electronic signals that can be transmitted over the Internet, and then back again into legible, alphabetic text.

6. V.PREETHA AP/CSE 6 The process of transferring information from one device to another relies on packet switching. Each computer connected to the Internet is assigned a unique IP address that allows the device to be recognized. When one device attempts to send a message to another device, the data is sent over the Internet in the form of manageable packets . Each packet is assigned a port number that will connect it to its endpoint.

7. World Wide Web vs Internet V.PREETHA AP/CSE 7 The Internet is a global connection of networks while the Web is a collection of information that can be accessed using the Internet. In other words, the Internet is the infrastructure and the Web is a service on top. The Web provides access to billions of pages of information. Web browsing is done through a Web browser , the most popular of which are Google Chrome , Firefox and Internet Explorer . Large amounts of information, both public and private, are collected across the Internet, opening users up to the risk of data breaches and other security threats. Hackers and crackers can break into networks and systems and steal information.

8. 2.Internet-Based Services V.PREETHA AP/CSE 8 Email − A fast, easy, and inexpensive way to communicate with other Internet users around the world. Telnet − Allows a user to log into a remote computer as though it were a local system. (Terminal to terminal). FTP − Allows a user to transfer virtually every kind of file that can be stored on a computer from one Internet-connected computer to another. World Wide Web WWW − A hypertext interface to Internet information resources

9. 3. What is HTTP? V.PREETHA AP/CSE 9 HTTP stands for Hypertext Transfer Protocol. The Hypertext Transfer Protocol (HTTP) is the foundation of the World Wide Web, and is used to load webpages using hypertext links.  This is the protocol being used to transfer hypertext documents that makes the World Wide Web possible.

10. What is URL? V.PREETHA AP/CSE 10 URL stands for Uniform Resource Locator and is used to specify addresses on the World Wide Web. A URL is the fundamental network identification for any resource connected to the web e. g. , hypertextpages, images, and soundfiles . A URL will have the following format − protocol://hostname/other_information

11. What is Web Server? V.PREETHA AP/CSE 11 Every Website sites on a computer known as a Web server. This server is always connected to the internet. Every Web server that is connected to the Internet is given a unique address made up of a series of four numbers between 0 and 256 separated by periods. For example, 68. 178. 157.132 or 68.122.35.127. When you register a Web address, also known as a domain name , such as tutorialspoint.com you have to specify the IP address of the Web server that will host the site.

12. What is Web Browser? V.PREETHA AP/CSE 12 Web Browsers are software installed on your PC. To access the Web you need a web browsers, such as Netscape Navigator, Microsoft Internet Explorer or Mozilla Firefox. Currentl y you mus t be using an y sor t of W e b browser whil e you ar e navigating through tutorialspoint.com. On the Web, when you navigate through pages of information this is commonly known as browsing or surfing.

13. What is SMTP Server? V.PREETHA AP/CSE 13 SMTP stands for Simple Mail Transfer Protocol Server. This server takes care of delivering emails from one server to another server. When you send an email to an email address, it is delivered to its recipient by a SMTP Server.

14. What is ISP? V.PREETHA AP/CSE 14 ISP stands for Internet Service Provider. They are the companies who provide you service in terms of internet connection to connect to the internet. You will buy space on a Web Server from any Internet Service Provider. This space will be used to host your Website.

15. What is HTML? V.PREETHA AP/CSE 15 HTML stands for Hyper Text Markup Language. This is the language in which we write web pages for any Website . This is a subset of Standard Generalized Mark-Up Language SGML for electronic publishing, the specific standard used for the World Wide Web.

16. What is Hyperlink? V.PREETHA AP/CSE 16 A hyperlink or simply a link is a selectable element in an electronic document that serves as an access point to other electronic resources . Typically, you click the hyperlink to access the linked resource. Familiar hyperlinks include buttons, icons, image maps, and clickable text links.

17. What is DNS? DNS stands for Domain Name System. When someone types in your domain name, www.example.com , your browser will ask the Domain Name System to find the IP. When you register your domain name, your IP address should be put in a DNS along with your domain name. Without doing it your domain name will not be functioning properly . V.PREETHA AP/CSE 17

18. What is W3C? V.PREETHA AP/CSE 18 W3C stands for World Wide Web Consortium which is an international consortium of companies involved with the Internet and the Web. The W3C was founded in 1994 by Tim Berners-Lee, the original architect of the World Wide Web. The organization's purpose is to develop open standards so that the Web evolves in a single direction rather than being splintered among competing factions. The W3C is the chief standards body for HTTP and HTML .

19. N- Tier or Multi- Tier Architecture or 3- Tier Architecture V.PREETHA AP/CSE 19

20. N- Tier or Multi- Tier Architecture or 3- Tier Architecture V.PREETHA AP/CSE 20 An N- Tier Application program is one that is distributed among three or more separate computers in a distributed network. Distributed network: A network configuration where every participant can communicate with one another without going through a centralized point. Example: Cellular networks (Cellular networks are distributed networks with base stations physically distributed in areas called cells). The most common form of n-tier is the 3-tier Application: User interface Business logic Database

21. Example V.PREETHA AP/CSE 21

22. Ctd … V.PREETHA AP/CSE 22 This architecture model provides Software application/systems with maximum flexibility. Developers to create Reusable In N- tier, “N” refers to a number of tiers or layers are being used like – 2-tier, 3- tier or 4- tier, etc . The n- tier architecture is an industry-proven software architecture model. It is suitable to support enterprise level client- server applications by providing solutions to scalability, security, fault tolerance, reusability, and maintainability . It helps developers to create flexible and reusable applications.

23. Common terms in Multi- tier Architecture V.PREETHA AP/CSE 23 Distributed Network Client-Server Architecture Platform Database

24. a. Distributed Network V.PREETHA AP/CSE 24 It is a network architecture, where the computers coordinate and communicate their actions only by passing messages. It is a collection of multiple systems situated at different nodes but appears to the user as a single system. .

25. b. Client-Server Architecture V.PREETHA AP/CSE 25 It is an architecture model where the client (one program) requests a service from a server (another program) i.e. It is a request- response service provided over the internet or through an intranet. In this, client computer provides an interface to an end user to request a service from a server and on the other hand server then processes the request and displays the result to the end user. An example of Client-Server Model– an ATM machine. A bank is the server for processing the application within the large customer databases and ATM machine is the client having a user interface with some simple application processing.

26. c. Platform V.PREETHA AP/CSE 26 In computer science or software industry, a platform is a system on which applications program can run . It consists of a combination of hardware and software that have a built- in instruction for a processors/microprocessors to perform specific operations. An example of Platform – A personal machine loaded with Windows or Mac OS X.

27. d. Database V.PREETHA AP/CSE 27 Database: It is a collection of information in an organized way so that it can be easily accessed, managed and updated. Examples of Database – MySQL, SQL Server, and Oracle Database are some common Db’s.

28. 3- Tier Architecture V.PREETHA AP/CSE 28 Presentation layer Business Logic layer Database layer

29. N Tier Architecture Diagram V.PREETHA AP/CSE 29 Some of the popular sites who have applied this architecture are: MakeMyTrip.com Sales Force enterprise application Indian Railways – IRCTC Amazon.com, etc.

30. Presentation tier V.PREETHA AP/CSE 30 The presentation tier is the user interface and communication layer of the application, where the end user interacts with the application. Its main purpose is to display information to and collect information from the user. This top- level tier can run on a web browser, as desktop application, or a graphical user interface (GUI), Example. Web presentation tiers are usually developed using HTML, CSS and JavaScript.

31. application tier The application tier, also known as the logic tier or middle tier, is the heart of the application. In this tier, information collected in the presentation tier is processed- using business logic, a specific set of business rules. The application tier can also add, delete or modify data in the data tier. The application tier is typically developed using Python, Java, Perl, PHP or Ruby, and communicates with the data tier using API calls. V.PREETHA AP/CSE 31

32. Database tier V.PREETHA AP/CSE 32 The data tier, sometimes called database tier , data access tier or back-end , is where the information processed by the application is stored and managed. This can be a relational database management system such as PostgreSQL , MySQL, MariaDB, Oracle, DB2, Informix or Microsoft SQL Server, or in a NoSQL Database server such as Cassandra, CouchDB or MongoDB . In a three-tier application, all communication goes through the application tier. The presentation tier and the data tier cannot communicate directly with one another.

33. Advantages V.PREETHA AP/CSE 33 Scalability Data Integrity Reusability Improved Security Improved Availability

34. Disadvantages V.PREETHA AP/CSE 34 Increase in Complexity Increase in Effort

35. Client- Side Scripting vs Server- Side Scripting 35 V.PREETHA AP/CSE

36. Client- Side Scripting vs Server- Side Scripting 36 The scripts may be created in two ways: on the client side or the server side , where the server- side scripts are processed on a server. In contrast, client- side scripting needs browsers to execute scripts on the client system but doesn't connect with the server executing the client- side scripts. V.PREETHA AP/CSE

37. 37 What is Server- side Scripting? Server- side scripting is a programming technique for creating code that may run software on the server side. In other words, server- side scripting is any scripting method that may operate on a web server. At the server end, actions such as website customization, dynamic changes in website content, response creation to user requests, database access, and many more are carried out. Server- side scripting creates a communication channel between a server and a client. V.PREETHA AP/CSE

38. 38 Previously, CGI (Common Gateway Interface) scripts were used to implement server- side scripting, and CGI was created to execute scripts written in computer languages such as C++ or Perl on websites. The server- side is made up of three parts: the database, the server, the APIs, and the backend web software written in the server- side scripting language. When a browser requests a page with server- side scripting, the web server evaluates the script before delivering the page to the browser. In this case, script processing may entail collecting information from a database, performing simple computations, or selecting the relevant material to be shown on the client end. V.PREETHA AP/CSE

39. 39 The output is provided to the web browser when the script is processed. The web server hides the scripts from the end user until the content is delivered, making the data and source code safer. V.PREETHA AP/CSE

40. 40 Server- side Scripting Languages There are various server- side scripting languages . Some main server- side scripting languages are as follows: a. Python It is an open- source language that is very powerful and easy to learn. It is suitable for beginners because it is simple to learn and read. It is believed to be used by Google and YouTube. It is a OOPs language with data structures. It has grown to be one of the most popular languages for both quick application development and web development. V.PREETHA AP/CSE

41. 41 b. PHP It is an open- source server- side scripting programming language mainly designed for web apps and is the most utilized scripting language. It allows you to retrieve and manipulate data from a database and is utilized along with SQL to query the database. It is a fast and simple language to learn and develop, and Facebook, Wikipedia, and WordPress utilize it. V.PREETHA AP/CSE

42. 42 Ruby It is a free and open- source programming language that was developed and firstly introduced in the early 1990s. It is a dynamic language that is simple to read and write and an OOPs language that is interpreted as it runs. It has evolved continuously since its development and is one of the most utilized web development languages. V.PREETHA AP/CSE

43. 43 Features of Server- side Scripting It is connected with data access, error handling, and data processing speed. It is processed and interacts with the server. Using a highly integrated programming language makes it more secure than client- side scripting. V.PREETHA AP/CSE

44. 44 Client- side Scripting Client- side scripting generates code that may be executed on the client end without needing server- side processing. These scripts are typically embedded into HTML text. Client- side scripting may be utilized to check the user's form for problems before submitting it and to change the content based on the user input. The web needs three components to function: client, database, and server. The client- side scripting may significantly reduce server demand. It is intended to be utilized as a scripting language with a web browser as the host program. The HTML and CSS are delivered as plain text when a user uses a browser to request a webpage from the server, and the browser understands and renders the web content at the client end. V.PREETHA AP/CSE

45. 45 Client- side Scripting Languages a. HTML It is not a scripting language; it is a markup language. However, it serves as the basic language for client- side web development, also referred to as front- end. The presence of hypertext on a page denotes its hyperlinks. The markup language uses tags to define the structure and layout. It is a programming language that is mainly used to design a web page's structure and layout. V.PREETHA AP/CSE

46. 46 b. CSS CSS is an abbreviation for Cascading Style Sheets. It provides a technique for creating graphic elements that help a web application's appearance look more appealing. A style tag in a web page defines all the specifics regarding the web page's presentation, including its border styles, image styles, colour, font styles, borders, format, font size, margins, padding, etc. c.JavaScript It is a client- side scripting language designed for a specific purpose, but several JavaScript frameworks are already utilized as server- side scripting technologies. V.PREETHA AP/CSE

47. 47 Features of Client- side Scripting It is intended to execute code on which a web browser runs, and the results of the inputs are delivered to an accessible user. Client- side scripting enables greater involvement with clients via the browser and is used to validate programs and functionality based on the request. The client does not include any contact with the server in client- side scripting; the only interaction is receiving the requested data. V.PREETHA AP/CSE

48. Difference 48 V.PREETHA AP/CSE

49. 49 V.PREETHA AP/CSE

50. W3C (World Wide Web Consortium) 50 V.PREETHA AP/CSE

51. W3C 51 The W3C (World Wide Web Consortium) is an international organization that creates standards for the World Wide Web . Th e W3 C i s committe d t o improvin g th e we b by settin g and promoting web-based standards. Th e W3C' s goal i s t o creat e technica l standard s and guidelines for web technologies worldwide. These standards are intended to keep a consistent level of technical quality and compatibility concerning the World Wide Web. V.PREETHA AP/CSE

52. 52 History World Wide Web Consortium was founded by Tim Berners-Lee in October 1994 at the Massachusetts Institute of Technology , with the support of DARPA(Défense Advanced Research Projects Agency) and CERN. The main vision of W3C was to standardize the technologies as well as the protocols that are used to build the web. It also tried to encourage the organizations to adopt the new standards defined by the World Wide Web Consortium. In the next few years, the W3C thus published various recommendations such as the format of PNG images, CSS(versions 1 and 2), etc . V.PREETHA AP/CSE

53. 53 V.PREETHA AP/CSE

54. 54 Purpose of the W3C W3C is designed to bring interested parties together from different areas of IT to work on developing web standards. The W3C also focuses on developing protocols and guidelines that help ensure the growth and longevity of the web . Developing new standards is a consensus-based process by different teams in the W3C , as these standards are intended to help ensure quality for web-based developers and end users. V.PREETHA AP/CSE

55. 55 W3C standards W3 C standard s describe a rang e of recommende d programming language s to generally accepted principles in web services and open architectures. Web design and application standards are following: Common Gateway Interface (CGI) CSS Document Object Model ( DOM ) Extensible HTML (XHTML) Extensible Markup Language ( XML ) Gleaning Resource Descriptions from Dialects of Languages (GRDDL) HTML JavaScript Object Notation for Linked Data (JSON-LD) V.PREETHA AP/CSE

56. 56 Resource Description Framework ( RDF ) Simpl e Objec t Acces s Protoco l ( SOA P ) SPARQL Protocol and RDF Query Language ( SPARQL ) Speech Recognition Grammar Specification (SRGS) Speech Synthesis Markup Language (SSML) Scalable Vector Graphics ( SVG ) V oiceXML ( VXM L ) Web Real-Time Communications ( WebRTC ) Web Services Description Language (WSDL) V.PREETHA AP/CSE

57. 57 Ad v a nt a g es W3C enables the easier maintenance of the W3C validated websites. It provides a consistent and defined look for all the W3C validated websites. It standardize s th e validate d website s s o tha t the y ar e accessible t o di f ferent devices. It enables faster browser interaction. V.PREETHA AP/CSE

58. 58 Disadvantages W3C validation is a timely process and thus the time for full validation depends on the website code. W3C validation exercises have costs associated with them. Sometimes translation issues arise in W3C validation of websites. V.PREETHA AP/CSE

59. HTML 5 Introduction 59

60. HTML 5 Introduction 60 HTML stands for Hyper Text Markup Language. It is used to design web pages using a markup language. Hypertext defines the link between the web pages . The markup language is used to define the text document within the tag which defines the structure of web pages. HTML 5 is the fifth and current version of HTML. It has improved the markup available for documents and has introduced application programming interfaces(API) and Document Object Model(DOM).

61. 61 Features It has introduced new multimedia features which support audio and video controls by using <audio> and <video> tags. There are new graphics elements including vector graphics and tags . Enrich semantic content by including <header> <footer>, <article>, <section> and <figure> are added. Uses SQL database to store data offline . Allows drawing various shapes like triangle, rectangle, circle, etc. Capable of handling incorrect syntax. Easy DOCTYPE declaration i.e. <!doctype html> Easy character encoding i.e. <meta charset=”UTF-8″>

62. 62 New Added Elements in HTML 5 <article>: The <article> tag is used to represent an article. More specifically, the content within the <article> tag is independent other content of the site (even though it can be related). <figcaption>: The <figcaption> tag in HTML is used to set a caption to the figure in a document. <header>: from the element It contain s th e sectio n headin g a s wel l a s other content , suc h a s a navigation links, table of contents , etc.

63. 63 New Added Elements in HTML 5 <footer>: The <footer> tag in HTML is used to define a footer of HTML document . This section contains the footer information ( author information, copyright information, carriers etc .). <mark>: The <mark> tag in HTML is used to define the marked text . It is used to highlight the part of the text in the paragraph. <nav>: The <nav> tag is used to declaring the navigational section in HTML documents . Websites typically have sections dedicated to navigational links , which enables user to navigate the site . These links can be placed inside a nav tag.

64. 64 A Simple HTML Document <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

65. Output 65

66. 66 HTML Editors Step 1: Open Notepad (PC) Step 2: Write Some HTML tags Step 3: Save the HTML Page Step 4: View the HTML Page in Your Browser

67. 67 HTML Basic Examples HTML Headings <!DOCTYPE html> <html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html>

68. 68 HTM L Paragraphs <!DOCTYPE html> <html> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

69. 69 HTML Links <!DOCTYPE html> <html> <body> <h2>HTML Links</h2> <p>HTML links are defined with the a tag:</p> <a href="https://ww w .w3schools.com">This is a link</a> </body> </html >

70. 70 HTM L Images HTML images are defined with the <img> tag. The source file ( src ), alternative text ( alt ), width , and height are provided as attributes. Example: <!DOCTYPE html> <html> <body> <h2>HTML Images</h2> <p>HTML images are defined with the img tag:</p> <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"> </body> </html>

71. 71 How to View HTML Source View HTML Source Code: Right-click in an HTML page and select "View Page Source" (in Chrome) or "View Source" (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page Inspect an HTML Element: This will open a window containing the HTML source code of the page and allow us to edit.

72. 72 HTML Images

73. 73 HTML Images The HTML <img> tag is used to embed an image in a web page. Images are not technically inserted into a web page ; images are linked to web pages . The <img> tag creates a holding space for the referenced image. The <img> tag is empty, it contains attributes only, and does not have a closing tag . The <img> tag has two required attributes: src - Specifies the path to the image alt - Specifies an alternate text for the image Syntax <img src=" url " alt=" alternatetext ">

74. 74 Width and Height, or Style? The width , height , and style attributes are all valid in HTML. However, we suggest using the style attribute. It prevents styles sheets from changing the size of images: Example <!DOCTYPE html> <html> <head> <style> img { width: 100%; } </style> </head> <body> <img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> </body> </html>

75. 75 Images in Another Folder <!DOCTYPE html> <html> <body> <h2>Images in Another Folder</h2> <p>It is common to store images in a sub-folder. You must then include the folder name in the src attribute:</p> <img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> </body> </html>

76. 76 Images on Another Server/Website <!DOCTYPE html> <html> <body> <h2>Images on Another Server</h2> <img src= https://www.w3schools.com/images/w3schools_green.jpg alt="W3Schools.com" style="width:104px;height:142px;"> </body> </html>

77. 77 Special Characters

78. 78 Special Characters Reserved characters in HTML must be replaced with character entities. Some characters are reserved in HTML. If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags. A character entity looks like this: & entity_name ; &# entity_number ;

79. Result Description Name Number non-breaking space &nbsp; &#160; Try it » < less than &lt; &#60; Try it » > greater than &gt; &#62; Try it » & ampersand &amp; &#38;

80. 82 Horizontal Rules

81. Horizontal Rules The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic). The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page. 83

82. Example with CSS 84

83. Li s t HTML lists allow web developers to group a set of related items in lists. 85

84. 86 Unordered HTML List An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. Th e lis t item s wil l be marke d wit h bullets (small black circles ) by default: Example: <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

85. 87 Ordered HTML List An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default: Example <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

86. 88 HTML Tables

87. HTML Tables HTML tables allow web developers to arrange data into rows and columns. Example 89

88. 90 Table Cells Each table cell is defined by a <td> and a </td> tag. td stands for table data. Everything between <td> and </td> are the content of the table cell. Each table row starts with a <tr> and ends with a </tr> tag. tr stands for table row. th stands for table header.

89. 91 Define an HTML Table <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> </table>

90. HTML Table Tags 92

91. HTML Table Borders HTML tables can have borders of different styles and shapes. To add a border, use the CSS border property on table, th, and td elements. Example table, th, td { border: 1px solid black; } 93

92. Collapsed Table Borders To avoid having double borders like in the example above, set the CSS border-collapse property to collapse. This will make the borders collapse into a single border: Example table, th, td { border: 1px solid black; border-collapse: collapse; } 94

93. HTML Table Colspan HTML tables can have cells that span over multiple rows and/or columns. 95

94. 96 E x ample <table> <tr> <th colspan="2">Name</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>43</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>57</td> </tr> </table>

95. 97 HTML Table - Rowspan <table> <tr> <th>Name</th> <td>Jill</td> </tr> <tr> <th rowspan="2">Phone</th> <td>555-1234</td> </tr> <tr> <td>555-8745</td> </tr> </table>

96. 98 HTML Forms

97. HTML Forms An HTML form is used to collect user input. The user input is most often sent to a server for processing. 99

98. 100 The <form> Element he HTML <form> element is used to create an HTML form for user input: <form> form elements </form> The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons , etc.

99. The <input> Element The HTML <input> element is the most used form element. An <input> element can be displayed in many ways, depending on the type attribute. Here are some examples: 101

100. 102 Meta Elements

101. 103 Meta Elements HTML lets you specify metadata - additional important information about a document in a variety of ways. The META elements can be used to include name/value pairs describing properties of the HTML document, such as author, expiry date, a list of keywords, document author etc. The <meta> tag is used to provide such additional information . This tag is an empty element and so does not have a closing tag but it carries information within its attributes.

102. 104 C t d … You can include one or more meta tags in your document based on what information you want to keep in your document. In general, met a tag s do no t impac t physical appearance of the document. It does not matter if you include them or not.

103. Adding Meta Tags to Your Documents You can add metadata to your web pages by placing <meta> tags inside the header of the document which is represented by <head> and </head> tags. 105

104. 106 E x ample <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="John Doe"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <p>All meta information goes in the head section...</p> </body> </html>

105. 108 Page Structure Elements

106. Page Structure Elements In HTML there are some semantic elements that can be used to define different parts of a web page: 109

107. 110 <article> <aside> <details> <figcaption> <footer> <header> <nav> <section> <summary>

108. 111 HTML <section> Element The <section> element defines a section in a document. Examples of where a <section> element can be used: Chapters Introduction News items Contact information A web page could normally be split into sections for introduction, content, and contact information.

109. E x ample 112

110. 113 <article> Tag The <article> tag specifies independent, self-contained content. Potential sources for the <article> element: Forum post Blog post News story

111. 114 <aside> Tag The <aside> tag defines some content aside from the content it is placed in. The aside content should be indirectly related to the surrounding content. <aside> tag supports Global Attributes in HTML and Event Attributes in HTML Tip: The <aside> content is often placed as a sidebar in a document .

112. E x ample 115

113. <details> tag 116

114. <nav> tag The <nav> tag defines a set of navigation links. 117

115. <summary> The <summary> tag defines a visible heading for the <details> element. The heading can be clicked to view/hide the details. 118

116. 119 Advantages: All browsers supported. More device friendly. Easy to use and implement. HTML 5 in integration with CSS, JavaScript, etc. can help build beautiful websites.

117. 120 Disadvantages: Long codes have to be written which is time consuming.