Introduction to the web, WWW architecture, Fundamentals of HTML, Text formatting tags, marquee, Inserting images, links, lists, Creating tables, Frames, Working with form elements.

midhunanubhavkmea 7 views 131 slides Mar 01, 2025
Slide 1
Slide 1 of 131
Slide 1
1
Slide 2
2
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9
Slide 10
10
Slide 11
11
Slide 12
12
Slide 13
13
Slide 14
14
Slide 15
15
Slide 16
16
Slide 17
17
Slide 18
18
Slide 19
19
Slide 20
20
Slide 21
21
Slide 22
22
Slide 23
23
Slide 24
24
Slide 25
25
Slide 26
26
Slide 27
27
Slide 28
28
Slide 29
29
Slide 30
30
Slide 31
31
Slide 32
32
Slide 33
33
Slide 34
34
Slide 35
35
Slide 36
36
Slide 37
37
Slide 38
38
Slide 39
39
Slide 40
40
Slide 41
41
Slide 42
42
Slide 43
43
Slide 44
44
Slide 45
45
Slide 46
46
Slide 47
47
Slide 48
48
Slide 49
49
Slide 50
50
Slide 51
51
Slide 52
52
Slide 53
53
Slide 54
54
Slide 55
55
Slide 56
56
Slide 57
57
Slide 58
58
Slide 59
59
Slide 60
60
Slide 61
61
Slide 62
62
Slide 63
63
Slide 64
64
Slide 65
65
Slide 66
66
Slide 67
67
Slide 68
68
Slide 69
69
Slide 70
70
Slide 71
71
Slide 72
72
Slide 73
73
Slide 74
74
Slide 75
75
Slide 76
76
Slide 77
77
Slide 78
78
Slide 79
79
Slide 80
80
Slide 81
81
Slide 82
82
Slide 83
83
Slide 84
84
Slide 85
85
Slide 86
86
Slide 87
87
Slide 88
88
Slide 89
89
Slide 90
90
Slide 91
91
Slide 92
92
Slide 93
93
Slide 94
94
Slide 95
95
Slide 96
96
Slide 97
97
Slide 98
98
Slide 99
99
Slide 100
100
Slide 101
101
Slide 102
102
Slide 103
103
Slide 104
104
Slide 105
105
Slide 106
106
Slide 107
107
Slide 108
108
Slide 109
109
Slide 110
110
Slide 111
111
Slide 112
112
Slide 113
113
Slide 114
114
Slide 115
115
Slide 116
116
Slide 117
117
Slide 118
118
Slide 119
119
Slide 120
120
Slide 121
121
Slide 122
122
Slide 123
123
Slide 124
124
Slide 125
125
Slide 126
126
Slide 127
127
Slide 128
128
Slide 129
129
Slide 130
130
Slide 131
131

About This Presentation

The web is a system of interlinked hypertext documents and multimedia content that is accessed via the Internet using web browsers.
Components: It consists of websites, web pages, and web applications, which are built using languages like HTML, CSS, and JavaScript.
Functionality: It allows users to ...


Slide Content

Syllabus Introduction to the web, WWW architecture, Fundamentals of HTML, Text formatting tags, marquee, Inserting images, links, lists, Creating tables, Frames, Working with form elements.

Internet Definition : The Internet is a global network of interconnected computers that communicate with each other using standardized protocols. It is the underlying infrastructure that enables data exchange. Functionality : It allows various services, including email, file transfer, and web browsing, among others.

Web/WWW/W3 The web is a system of interlinked hypertext documents and multimedia content that is accessed via the Internet using web browsers. Components : It consists of websites, web pages, and web applications, which are built using languages like HTML, CSS, and JavaScript. Functionality : It allows users to access and share information through hyperlinks , making it easy to navigate between different pages and resources.

WWW was created by Tim Berners Lee in 1989 at CERN in Geneva. WWW works on a client-server approach. The protocol used is HTTP (Hyper Text Transfer Protocol).

Relationship B/w Internet and Web Dependency : The web relies on the Internet for its functionality. We need an Internet connection to access web content. Scope : The Internet encompasses a broader range of services beyond just the web, including email, VoIP, and file sharing, while the web specifically refers to the content and services accessed through web browsers. In summary, the Internet is the infrastructure that enables connectivity, while the World Wide Web is a service that operates on that infrastructure , facilitating access to information and resources.

Client and Server A client can be a device or a machine. A client program runs on the local machine(like desktop, or smartphone), requesting service from the server . A client program is a finite program where the user starts the service and terminates when the service is completed. For instance, web browser.

A server is like a computer program, which is used to provide functionality to other programs. The server receives the request from the client for a web document, and it sends the requested information to the client's computer. Server has high efficiency and performance . Simultaneous multiple-user login and request processing are supported in servers. Some of the complex tasks like fulfilling client requests , storing and processing large datasets, data analysis are common for servers.

Client and Server

WEB SERVER A web server is a program that processes the network requests of the users and serves them with files that create web pages. This exchange takes place using Hypertext Transfer Protocol (HTTP).  For example, you want to open Facebook on your laptop and enter the URL in the search bar of google. Now, the laptop will send an HTTP request to view the facebook webpage to another computer known as the webserver.

This computer (webserver) contains all the files which make up the website. After processing the request, the web server will send the requested website-related files to your computer and then you can reach the website. Examples of Web servers are- Facebook server,Appache HTTP sever etc.

Website A website is a combination or collection of webpages grouped together , often handled by a person or an organization, which can be accessed anywhere and anytime by anyone via the internet.    All these pages are linked together using the hyperlinks . Websites can also be either static or interactive. Some examples- e-commerce websites, social networking websites etc.

Webpage Webpage, is a single document or page that is displayed in web browsers like the Firefox, Google Chrome, Opera. A unique URL address is also attached to the webpages and is used to render or access that particular page. Webpages can also be either static or dynamic. Examples- Home page , contact page, about page etc

Domain Name A domain name is the name of the site that you put in the URL bar. A domain name is just the address to a website.

When you type in a domain name in the browser, it sent a request to a network of servers called the Domain Name System. These servers look up the domain in their records and send the request that you’re looking for their site.

Protocol P rotocol , a set of rules or procedures for transmitting data between electronic devices, such as  computers . For computers to exchange information, there must be a preexisting agreement as to how the information will be structured and how each side will send and receive it .

Applications running on various devices can communicate using a group of protocols known as application layer protocols . These protocols support numerous services, including email, web browsing, and file transfer , and they define the structure and content of the transmitted data.

1. Hypertext Transfer Protocol (HTTP) The World Wide Web's foundational protocol is  HTTP.   It supports web client and server communication and loads web pages using hypertext links. An individual, known as the user-agent, requests a server using the client-server protocol known as HTTP. The user agent is typically a web browser . 

2. File Transfer Protocol (FTP) FTP  is an application layer protocol that transfers files between local and remote systems. 3. Domain Name System (DNS) DNS   is a hierarchy and distributed naming system for computers, services, and other Internet resources or IP networks. DNS is responsible for translating domain names into IP addresses for locating and identifying computer services and devices with the underlying network protocols.

4. Simple Mail Transfer Protocol (SMTP) It is a widely used Internet protocol for sending emails between servers.  5. Post Office Protocol (POP) and Internet Message Access Protocol (IMAP) Email can be retrieved from a server and delivered to a local client using this application layer protocol.  6. Telnet Telnet enables users to sign in to a distant computer as if they were physically nearby.

Architecture of WWW 2-tier architecture- That is client-server architecture. Browser acts as a client. Using the web browser, the user can send the request to the server to access the web page. The server provides a copy of the requested web page with additional information.

Fundamentals of HTML HTML stands for Hyper Text Markup Language. It is a standard markup language for creating Web pages. HTML describes the structure of a Web page HTML consists of a series of elements HTML elements tell the browser how to display the content

Key Concepts in HTML HTML Document Structure : An HTML document is structured using various elements to define the content and its presentation. The basic structure includes the <html>, <head>, and <body> tags. The <html> tag encapsulates the entire document, while the <head> tag contains meta-information and the document’s title. The actual content is placed within the <body> tag.

Tags and Elements: HTML uses tags to define elements that represent different types of content . Tags are written between angle brackets, and most have opening and closing tags. For example, the <p> tag is used for paragraphs, and it is closed with </p>. Attributes: Attributes provide additional information about HTML elements and are always included in the opening tag. They are written as name/value pairs and are used to modify the element’s behavior or appearance.

Headings and Text Formatting : HTML provides different heading tags (<h1> to <h6>) to define headings based on their importance. Additionally, text can be formatted using tags like < em > for emphasis (italic) and <strong> for strong emphasis (bold). Links and Images : Creating hyperlinks with the <a> tag allows users to navigate between pages. Images are embedded using the < img > tag , and the src attribute specifies the image source. Lists : HTML supports ordered (< ol >) and unordered (< ul >) lists, as well as definition lists (<dl>). List items are marked with <li> tags.

Importance of Tags Structure and Semantics : HTML tags define the structure of a webpage . They indicate different parts of the content, such as headings, paragraphs, lists, links, and images . This semantic structure helps browsers understand how to display the content and assists search engines in indexing it properly.

How to save HTML File Open  Start  >  Programs >   Accessories >   Notepad Write the HTML code into Notepad Save the file on your computer. Select  File > Save as  in the Notepad menu. Name the file  "index.htm“ U se either . htm or .html as the file extensions , There is no difference

Basics The <html> element is the root element of an HTML page The <head> element contains meta-information about the HTML page The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or the page's tab) The <body> element defines the document's body and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. The <h1> element defines a large heading The <p> element defines a paragraph

Basic Program to display your name <html> <head> <title>My First Web Page</title> </head> <body> <h1>Hello</h1> <p> My Name is ASWATHY V S</p> </body> </html>

HTML Text Formatting HTML text formatting refers to using specific HTML tags to modify the appearance and structure of text on a webpage.

In HTML the formatting tags are divided into two categories: Physical tag : These tags provide the visual appearance of the text. Physical tags directly affect how text looks on the webpage by changing the font, size, or style. Logical tag : These tags are used to add some logical or semantic value to the text. Logical tags convey the meaning or importance of the text without necessarily altering its visual appearance. Note: Some physical and logical tags may give the same visual appearance, but they will be different in semantics.

<b> tag The HTML <b> tag specifies bold text , without any logical importance. It opens with <b> and ends with </b> tag. Syntax- <b>Content Goes Here.</b>

<strong> Tag The HTML <strong> tag is a logical tag that specifies text with importance . The content inside the <strong> element appears in the bold text but with semantic importance . It opens with <strong> and ends with </strong> tag. Syntax-<strong>Content Goes Here.</strong>

< i > Tag HTML < i > tag displays the text in italics . It begins with < i > tag and ends with </ i > tag. Syntax-< i >Content Goes Here.</ i >

< em > Tag The HTML < em > tag emphasizes the text with semantic importance. It begins with < em > tag and ends with </ em > tag. Syntax-< em >Content Goes Here.</ em >

<mark> tag if you want to mark or highlight a text , you should write the content within <mark>.........</mark>. <h2 >   I want to put a  < mark >  Mark </ mark >  on your face </ h2 >     

<u> tag If you write anything within <u>.........</u> element, is shown in underlined text . <p >   < u > Write Your First Paragraph in underlined text. </ u ></ p >   

<strike> Anything written within <strike>.......................</strike> element is displayed with strikethrough . It is a thin line that crosses the statement . <p >   < strike > Write Your First Paragraph with strikethrough </ strike > . </ p >   

<del> Anything that puts within <del>..........</del> is displayed as deleted text . <p > Hello  < del > Delete your first paragraph. </ del ></ p >   

<sup> If you put the content within <sup>..............</sup> element, is shown in superscript ; means it is displayed half a character's height above the other characters. <p > Hello  < sup > Write Your First Paragraph in superscript. </ sup ></ p >        

<sub> If you put the content within <sub>..............</sub> element, is shown in subscript ; which means it is displayed half a character's height below the other characters. <p > Hello  < sub > Write Your First Paragraph in subscript. </ sub ></ p >    

< big> If you want to put your font size larger than the rest of the text then put the content within <big>.........</big>. It increases one font size larger than the previous one. <p > Hello  < big > Write the paragraph in larger font. </ big ></ p >   

<small> If you want to put your font size smaller than the rest of the text then put the content within <small>.........</small>tag. It reduces one font size than the previous one. < p > Hello  < small > Write the paragraph in smaller font. </ small ></ p >  

HTML headings < h1 > Heading no. 1 </ h1 >    < h2 > Heading no. 2 </ h2 >    < h3 > Heading no. 3 </ h3 >    < h4 > Heading no. 4 </ h4 >    < h5 > Heading no. 5 </ h5 >    < h6 > Heading no. 6 </ h6 >   

Write an HTML code to demonstrate all text formatting tags <html> <head> <title>Text Formatting</title> </head> <body> <h1>Heading no. 1</h1>   <h2>Heading no. 2</h2>   <h3>Heading no. 3</h3>   <h4>Heading no. 4</h4>   <h5>Heading no. 5</h5>   <h6>Heading no. 6</h6>  

<b>Bold Text</b> < br > <strong>Strong Text</strong>< br > < i >italics Text</ i >< br > < em >emphasizes Text</ em >< br > <p> My Name is <mark>ASWATHY V S- Eg : of marked Text</mark></p>< br > <p> <u>Write Your First Paragraph in underlined text.</u></p> < br > <p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>< br >   <p>Hello <del>Delete your first paragraph.</del></p>  < br > <p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>< br >      <p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>< br >   <p>Hello <big>Write the paragraph in larger font.</big></p>< br >   <p>Hello <small>Write the paragraph in smaller font.</small></p> < br > </body> </html>

OUTPUT

<marquee> tag The <marquee> tag is a container tag of HTML that is implemented for creating scrollable text or images within a web page from either left to right or vice versa, or top to bottom or vice versa . The different attributes of <marquee> tag are

Example

Inserting 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

The src Attribute The required src attribute specifies the path (URL) to the image. The alt Attribute The required alt attribute provides an alternate text for an image if the user for some reason cannot view it (because of a slow connection, an error in the src attribute, or if the user uses a screen reader).

Example <html> <head> <title>Baby Boy</title> </head> <body> < img src ="C:\Users\Hp\OneDrive\Pictures\baby.jpg" alt="Baby Boy" width ="520" height="520"> </body> </html>

Image as Link <html> <head> <title>Baby Boy</title> </head> <body> <a  href =“ default.asp"> < img src ="C:\Users\Hp\OneDrive\Pictures\baby.jpg“ alt="Baby Boy" width ="520" height="520"> </a> </body> </html>

HTML LINKS HTML links are hyperlinks . You can click on a link and jump to another document . When you move the mouse over a link, the mouse arrow will turn into a little hand . A link does not have to be text. A link can be an image or any other HTML element

Syntax The HTML <a> tag defines a hyperlink. It has the following syntax: < a   href =" url "> link text < /a > The most important attribute of the <a> element is the href attribute , which indicates the link's destination. The link text is the part that will be visible to the reader. Clicking on the link text, will send the reader to the specified URL address.

Example <html> <body> <h1>HTML Links</h1> <p><a href ="https://www.google.com/">Visit Google!</a></p> </body> </html>

Image as Link <html> <body> <h1>HTML Links</h1> <a href ="https://www.google.com/"> < img src ="C:\Users\Hp\OneDrive\Pictures\baby1.jpg" alt="Baby Boy" style="width:120px; height:120px;"> </a> </body> </html>

HTML LISTS HTML Lists are used to specify lists of information. There are three different types of HTML lists: Ordered List or Numbered List ( ol ) Unordered List or Bulleted List ( ul ) Description List or Definition List (dl)

HTML Ordered List or Numbered List In the ordered HTML lists, all the list items are marked with numbers by default . It is also known as a numbered list . The ordered list starts with < ol > tag and the list items begin with <li> tag.

Example <html> <head> <title>HTML LISTS</title> <body> <h1>List of Fruits</h1> < ol > <li>Orange</li> <li>Apple</li> <li>Banana</li> <li>Watermelon</li> </ ol > </body> </html>

HTML Unordered List or Bulleted List In HTML Unordered list, all the list items are marked with bullets. It is also known as a bulleted list. The Unordered list starts with < ul > tag and list items start with the <li> tag.

Example <html> <head> <title>HTML LISTS</title> <body> <h1>List of Fruits</h1> < ul > <li>Orange</li> <li>Apple</li> <li> Bannana </li> <li>Watermelon</li> </ ul > </body> </html>

  < ul > type Attribute The HTML < ul > type attribute in the < ul > tag specifies the type of marker used in an unordered list. Values include disc (default filled circle), circle (hollow circle), square, and none. It controls the appearance of list items.

Attribute Values: disc:  Default. A filled circle. circle:  An unfilled circle square  A filled square.

HTML id Attribute The HTML id attribute is used to specify a unique id for an HTML element. You cannot have more than one element with the same id in an HTML document. Note:  The id name is case-sensitive ! Note:  The id name must contain at least one character, cannot start with a number, and must not contain whitespaces (spaces, tabs, etc.).

Example

HTML TABLE A table in HTML refers to the arrangement of data in rows and columns. Using tables, we can display data, such as products and their prices; employees, their date of joining and salaries etc.

Tags to Create Table To create a table in HTML, you will need to define the table with the <table> tag . The <table> tag is the table container specifying where the table will begin and where it ends. You can add a table row with the <tr> tag . We will need to use the < th > tag to add a table header . A table cell or data can be added using the <td> tag.

HTML Table Syntax <html> <head> <title>HTML Table Example</title> </head> <body> <table> <tr> <td>Column 1</td> <td>Column 2</td> </tr>

<tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> </body> </html>

Example <html> <style> table, th , td { border:1px solid black; } </style> <body> <h2>List of Students</h2> <table style="width:50%">

<tr> < th >SL NO</ th > < th >NAME</ th > < th >Marks</ th > </tr> <tr> <td>1</td> <td>Arun</td> <td>75</td> </tr>

<tr> <td>1</td> <td> Adhil </td> <td>85</td> </tr> </table> </body> </html>

Table attributes in HTML are used to customize table such as changing its background color, alignment, width, border, etc.

1) What is the difference between cell spacing and cell padding in html? In HTML, the main difference between cell padding and cell spacing is that  cell padding is the space between the content and the border of a cell, while cell spacing is the space between adjacent cells 2) What are row span and col span in an HTML Table? Row span allows a single table cell to span the height of more than one cell or row. Column span a llows a single table cell to span the width of more than one cell or column

HTML Tables with Caption In an HTML table, the caption is simply the title of the table . For this, HTML  <caption></caption>  tag can be used. <Caption> tag can be used in <table> tag, but it is recommended to use <caption> tag just after the <table> tag to keep your code clean and easy to understand.

Background color

Frames in HTML Frames in  HTML  are used in web development to divide a webpage into separate sections. Each frame can display its own HTML document. Each of the sections of the browser window is known as a frame and is displayed within a <frameset> or an inline frame (< iframe >) element. Each section highlights separate documents or content. Frames in HTML are organized by structuring them in rows and columns within the <frameset> element.  

Example <html> <head> <title>Frameset’s Col Attribute in Pixels</title> </head> <frameset cols="100px, 200px, 300px"> <frame src ="marquee.htm"> <frame src ="table.htm"> <frame src ="Test.htm"> </frameset> </html>

Rows The rows attribute specifies the number of rows (horizontal frames) in the frameset tag. For example, to create four horizontal frames, set the value as rows=”25%,50%,25%”. It will create three rows, each occupying 25%, 50%, and 25% of the browser window.

Border The border attribute of the <frameset> tag specifies the width of the border around each frame. It is specified in pixels, and its default value is 2 . This attribute is used to give visual separation between frames.  For example, a frameset with cols=”25%,50%,25%” and border=”4″ will have a 4-pixel border between each frame. If border = ”0”, there is no border.

HTML FORMS The HTML form tag is required when you want to collect information that visitors provide The  HTML   <form> tag is used to create a form. The <form> element is a container for different types of input elements, (such as text fields, checkboxes, radio buttons, submit buttons, etc ) label elements, button elements, drop-down list .

Form attributes Action Attribute Method Attribute Target Attribute Autocomplete Attribute

A ction Attribute The action attribute points to the back end of our web page , which handles the form submission The action attribute value defines the web page where information proceeds. It can be . php , . jsp , .asp, etc. or any URL where you want to process your form. <form action="/ action_page.php "> Note: If the action attribute value is blank then the form will be processed to the same page.

Example It will redirect to a new page "action.html" when you click on submit button

M ethod Attribute HTTP method which browser used The method attribute defines the to submit the form . The possible values of method attribute can be- get and post <form  action = "action.html"   method = "post" >    <form  action = "action.html"   method = "get" >   The default HTTP method when submitting form data is GET .   

GET Appends the form data to the URL, in name/value pairs NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!) The length of a URL is limited Useful for form submissions where a user wants to bookmark the result GET is good for non-secure data , like query strings in Google

POST Appends the form data inside the body of the HTTP request (the submitted form data is not shown in the URL) POST has no size limitations , and can be used to send large amounts of data. Form submissions with POST cannot be bookmarked

Target attribute The target attribute defines where to open the response after submitting the form. keywords used with the target attribute are: _self:  If we use _self as an attribute value, then the response will only display on the current page . <form  action = "action.html"   method = "get"   target = "_self" >    _blank :   Using _blank as an attribute will load the response on a new page. <form  action = "action.html"   method = "get"   target = "_blank" >  

A utocomplete Attribute The autocomplete attribute specifies whether a form should have autocomplete on or off. When autocomplete is on, the browser automatically completes values based on values that the user has entered before . It can have two values "on" and "off" which enables autocomplete either ON or OFF. The default value of the autocomplete attribute is "on". <form  action = "action.html"   method = "get"   autocomplete = "on" >    <form  action = "action.html"   method = "get"   autocomplete = "off" >   

The <input> Element HTML <input> element is the most used form element. An <input> element can be displayed in many ways, depending on the type attribute.

Other attributes of input element < input  type ="text"  id =" fname "  name =" fname "  value ="John> id – unique id for input element. name - Each input field must have a name attribute to be submitted. If the name attribute is omitted, the value of the input field will not be sent at all. value - value that we put in the field.

The <label> Element The <label> tag defines a label for many form elements. The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

Example <html> <head> <title>Input and label demo</title> </head> <form> <label for=" fname ">First name:</label>< br > <input type="text" id=" fname " name=" fname " value=" xyz ">< br > <label for=" lname ">Last name:</label>< br > <input type="text" id=" lname " name=" lname " value=" pqr "> </form> </html>

Radio Button <html> <head> <title>Radio Button</title> </head> <p>Choose your Batch</p> <form> <input type="radio" id="b6" name="Batch" value="Batch6"> <label for="b6">Batch 6</label>< br > <input type="radio" id="b5" name="Batch" value="Batch5"> <label for="b5">Batch 5</label>< br > </form> </html> Radio buttons let a user select ONE of a limited number of choices

Checkboxes <html> <head> <title>Check Boxes</title> </head> <form> <p>Tick your qualification</p> <input type="checkbox" id=" pg " name=" pg " value="Post Graduate"> <label for=" pg ">Post Graduate</label>< br > <input type="checkbox" id="ug" name="ug" value="Graduate"> <label for="ug">Graduate</label>< br > </form> </html> Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Drop down list <html> <head> <title>Drop down List</title> </head> <form> <select> <option>Choose your Batch</option> <option value=“B1">Batch 1</option> <option value=“B2">Batch 2</option> <option value=“B3">Batch 3</option> </select> </form> </html>

Note For multiline text- we use the tag < textarea >- This is used when the user has to enter details that may exceed a single sentence.

The <input type="password"> defines a password field.

<input type=”reset”> Defines a reset button <input type=”email”> Validates that the input is a valid email address. <input type=”number”> Allows the user to enter a number. You can specify min, max, and step attributes for range. <input type=”date”> Allows the user to select a date from a calendar. <input type=”time”> Allows the user to select a time. <input type=”file”> Allows the user to select a file to upload.

Example Student Registration Form

<html> <body> <form method="POST" action= welcome.php > <h1>STUDFENT REGISTRATION FORM</h1> Application Number: < br > <input type="text" name=" appl " required>< br > Name:< br > <input type="text" name=" nam " required>< br > Age:< br > <input type="text" name="age" required>< br >

Gender: <input type="radio" name="gen" value=" Male"required > <label for="male">Male</label> <input type="radio" name="gen" value="Female"> <label for="female">Female</label>< br > Address: < br > < textarea name="add" required></ textarea >< br > Mobile Number:< br > <input type="text" name=" num " required>< br >

Email Id: < br > <input type="email" name="email" required>< br > <label for="Program">Choose a Program</label> <select name=" pgm " id="Program" required> <option value="">--Please choose an option--</option> <option value="BCA">BCA</option> <option value="MCA">MCA</option> <option value="IMCA">IMCA</option> </select>< br >< br >

Date of Application:<input type="date" name="date" required>< br >< br > Certificate Upload: <input type="file" id=" myFile " name="filename" required>< br >< br > <input type="submit" name="submit">< br >

HTML Comments Comments are the explanations of the source code . They are added to make the program code easier for people to understand. Comments explain the intent behind your code to others and yourself.

In   HTML , you can add your comments between <!– … –> tags. The start tag has an exclamation sign (!), but the end tag does not. The web browser will ignore the comments and will not display them on the front end.

Types of HTML Comments In HTML, there are three types of comments Single-line comment Inline comment Multi-lines comment

Single-line Comments A single-line comment spans one line . These comments are short and appear online on one line.

Inline Comments In HTML, we can add comments in the middle of a line of code or sentence. The text which is written inside the <!– –> element will be commented out and the web browser will show the rest of the text.

Multi-lines Comments Multi-line comments are those that span multiple lines . They are similar to the single-line comments, except that multi-line comments close on a new line. Multi-line comments also begin with the start tag <!– and end with the closing tag –>.

Lab Questions Write an HTML code to display the following content.

2. Write an HTML code to demonstrate text formatting tags Bold Strong Italics Emphasizes Mark Underline Strike Delete Subscript Superscript Big Font Small Font

3. Write an HTML code to demonstrate an ordered and unordered list.

4. Write an HTML code to display the table (Mention the attributes- cellspacing =4 cellpadding=4 align= center and bgcolor = lightblue ) Style -border:1px solid black;

5. Write a program to create a student registration form