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