11zon Web Technology PDF
11zon Web Technology PDF
WWW
WWW stands for World Wide Web. It is also called web. It is the
collection of all connected web documents stored on different web
servers. These documents contain information in the form of text,
pictures, audio and video clips. WWW has many advantages:
finding a job
searching information
weather forecast
entertainment
education
Web Page
Web Site
Web Browser
Extranet
Upload
Download
DNS
IP address
For example, you could have a smart speaker that you can talk to, and
it can turn on the lights in your room or play your favorite music. Or
you could have a smart fridge that can order food when you're running
low, so you never run out of your favorite snacks.
IoT devices can make our lives more convenient, but it's important to
remember that they can also collect information about us, so we need to
be careful about what information we share and who we share it with.
Cloud Computing
Client
For example, when you use a social media app on your phone, your
phone acts as a client computer, and it sends a request to a server
computer to retrieve the information you want to see, like photos or
messages. The server computer processes the request, retrieves the
information, and sends it back to your phone, which displays it for you
to see.
Overall, a client computer is a device that you use to access and interact
with services provided by another computer or server.
Server
For example, when you send an email, the email is typically sent to a
server computer, which stores the message and sends it to the recipient's
email server. The recipient's computer or device then requests the email
from their email server and downloads it onto their device.
Overall, server computers are the backbone of the internet and other
networks, providing the services and functionality that make it possible
for computers and devices to communicate and exchange information.
Network Protocol
There are many different network protocols, but some of the most
common ones include TCP/IP, HTTP, FTP, and SMTP. Each protocol
has its own set of rules for how data is formatted, transmitted, and
received.
For example, the HTTP protocol is used by web browsers and servers to
transfer web pages and other web resources over the internet. When you
type in a web address, your web browser uses the HTTP protocol to
request the web page from the server, which sends the web page back
to your browser using the same protocol.
However, HTTP is not always safe. Just like how you don't want
someone else to read your letter, you don't want other people to see the
information you're sending over the internet. That's why HTTPS was
created.
HTTPS is like sending a secret message that only the website you're
communicating with can read. It's like putting your letter in a locked
box that only the person you're sending it to can open. This makes it
much harder for someone to spy on your communication or steal your
information.
When you visit a website that uses HTTPS, you can see a little padlock
icon in the web address bar. This means that the website is secure and
that your information is safe.
Search Engine
A search engine is a software program that allows you to search for
information on the internet. It works by crawling the web and indexing
web pages, images, videos, and other content, so that users can easily
find and access the information they're looking for.
When you type a search query into a search engine, it uses complex
algorithms to match your query with relevant web pages and other
online content. The search engine then displays a list of results, with the
most relevant and popular results appearing at the top of the list.
Some popular search engines include Google, Bing, and Yahoo, which
allow you to search for information on virtually any topic. These search
engines are incredibly powerful tools that can help you find information
quickly and easily.
HTML
Features of HTML
6. Forms and Input - HTML provides forms and input tags for
creating interactive elements like text boxes, radio buttons,
and dropdown menus.
HTML Tags
HTML tags are composed of two parts: an opening tag and a closing
tag. The opening tag begins with a less than symbol (<), followed by
the tag name, and ends with a greater than symbol (>). The closing tag
begins with a less than symbol, followed by a forward slash (/), the tag
name, and ends with a greater than symbol.
For example, the following HTML uses the <HTML> tag to mark the
starting of HTML page and </HTML> to end the page.
Elements of HTML
HTML tag attributes can be used to apply styles, provide metadata, and
specify links, among other things. Some common attributes include:
HTML Code
<html>
<head>
<title>My Simple HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Structure of HTML
In this example, the <p> tag is a container tag that is used to define a
paragraph. The opening tag <p> tells the browser to start a new
paragraph, and the closing tag </p> tells it when to end the paragraph.
<imgsrc="image.jpg" alt="image">
In this example, the <img> tag is an empty tag that is used to display
an image on the webpage. The src attribute tells the browser where to
find the image file, and the alt attribute provides a text description of
the image.
Font Tag
The <font> tag is used to change the font, size, and color of text in
HTML.
In this example, the face attribute specifies the font family, the size
attribute specifies the font size, and the color attribute specifies the font
color. You can use any valid CSS color name, RGB value, or hex code
for the color attribute.
<html>
<head>
<title>Example of Font tag in HTML</title>
</head>
<body>
<h1>Using Font tag in HTML</h1>
<p>This paragraph uses the font tag to change the color and size
of the text.</p>
<font color="blue" size="5">This text will be blue and size 5.
</font>
<p>This paragraph is used to change the font family and size of
the text.</p>
<span style="font-family: Arial, sans-serif; font-size: 18px;">This
text will be Arial and size 18px.</span>
</body>
</html>
Font style elements
HTML Code
<html>
<head>
<title>Example of Font Style Elements in HTML</title>
</head>
<body>
<h1>Using Font Style Elements in HTML</h1>
<p>This paragraph uses the <strong>strong</strong> tag to
emphasize text.</p>
<p>This paragraph uses the <em>em</em> tag to indicate a
change in tone.</p>
<p>This paragraph uses the <u>u</u> tag to underline text.
</p>
<p>This paragraph uses the <s>s</s> tag to strike through
text.</p>
<p>This paragraph uses the <small>small</small> tag to
make text smaller.</p>
<p>This paragraph uses the <big>big</big> tag to make text
larger.</p>
<p>Scientific formula: E = mc<sup>2</sup></p>
<p>Chemical formula: H<sub>2</sub>O</p>
</body>
</html>
<html>
<head>
<title>Example of Header Tags in HTML</title>
</head>
<body>
<h1>Main Heading</h1>
<h2>Section Heading</h2>
<p>This is some content under the section heading.</p>
<h3>Subsection Heading</h3>
<p>This is some content under the subsection heading.</p>
<h4>Sub-subsection Heading</h4>
<p>This is some content under the sub-subsection heading.</p>
<h5>Sub-sub-subsection Heading</h5>
<p>This is some content under the sub-sub-subsection heading.
</p>
<h6>Minor Heading</h6>
<p>This is some content under the minor heading. </p>
</body>
</html>
Paragraph alignment tag in html
In HTML, you can use the align attribute to align the text within a
paragraph
<html>
<head>
<title>Example of Paragraph Alignment in HTML</title>
</head>
<body>
<p align="center">This paragraph is centered.</p>
</body>
</html>
HTML provides several list elements that allow you to create lists of
items. Here are the three main types of lists in HTML:
a) Unordered Lists: Unordered lists are created using the <ul>
element. Each item in the list is represented by the <li>
element. By default, items in an unordered list are preceded by
a bullet point. Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
b) Ordered Lists: Ordered lists are created using the <ol> element.
Each item in the list is represented by the <li> element. By
default, items in an ordered list are preceded by a number.
Example:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
c) Definition Lists: Definition lists are created using the <dl>
element. Each item in the list is represented by a <dt> element,
which stands for "definition term", and a <dd> element, which
stands for "definition description". The <dt> element represents
the term being defined, while the <dd> element represents the
definition of the term. Example:
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
<dt>Term 3</dt>
<dd>Definition 3</dd>
</dl>
In this example, the <a> element with the "name" attribute creates an
anchor point that can be targeted by a hyperlink. The <h2> and <p>
elements create the content of the section. To create a hyperlink that
targets this anchor, you can use the "#" symbol followed by the name of
the anchor as the value of the "href" attribute. Here's an example:
<a href="#section1">Go to Section 1</a>
In this example, when the user clicks on the "Go to Section 1" link,
they will be taken to the anchor point created by the <a> element with
the "name" attribute.
Working with Image in HTML
Working with images in HTML involves two main steps: adding the
image to your HTML document, and styling the image as needed. Here's
a brief overview of how to do each of these steps:
Adding an Image:
To add an image to your HTML document, you can use the <img>
element with the "src" attribute, which specifies the URL of the image
file. Here's an example:
<imgsrc="image.jpg" alt="Description of the image">
In this example, the "src" attribute specifies the URL of the image file,
and the "alt" attribute provides a description of the image for users who
cannot see it.
Styling the Image:
Once you've added the image to your HTML document, you can use
CSS to style the image as needed. Here are some common ways to style
images:
Width and Height: You can use the "width" and "height" properties to
specify the dimensions of the image. Here's an example:
<imgsrc="image.jpg" alt="Description of the image" width="200"
height="150">
Border: You can use the "border" property to add a border around the
image. Here's an example:
<imgsrc="image.jpg" alt="Description of the image" style="border: 1px
solid black;">
Alignment: You can use the "align" property to specify the alignment of
the image within its container. Here's an example:
<imgsrc="image.jpg" alt="Description of the image" align="left">
In this example, the "align" property aligns the image to the left within
its container.
<table>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
Populating the Table with Data:
Once you've created the basic table structure, you can populate it with
data. You can add text, images, links, and other elements to table cells
using the same HTML tags you would use elsewhere in your document.
Here's an example of a table with some additional elements:
php
<table>
<tr>
<td>Product</td>
<td>Price</td>
<td>Image</td>
</tr>
<tr>
<td><a href="product1.html">Product 1</a></td>
<td>$19.99</td>
<td><imgsrc="product1.jpg" alt="Product 1"></td>
</tr>
<tr>
<td><a href="product2.html">Product 2</a></td>
<td>$29.99</td>
<td><imgsrc="product2.jpg" alt="Product 2"></td>
</tr>
</table>
In this example, the table has three columns: Product, Price, and Image.
The first row contains the column headings, and the subsequent rows
contain data. The "Product" column contains links to product pages, and
the "Image" column contains images of the products.
Table attribute in html
In HTML, you can use several attributes to further customize the
appearance and behavior of tables. Here are some of the most
commonly used table attributes:
1. Border Attribute: The "border" attribute specifies the width of
the border around the table. Here's an example:
In this example, the "border" attribute sets the width of the border to 1
pixel.
2. Cellpadding and Cellspacing Attributes: The "cellpadding"
attribute specifies the amount of space between the content of
a cell and its border, while the "cellspacing" attribute specifies
the amount of space between adjacent cells. Here's an
example:
In this example, the "width" attribute sets the width of the table to 500
pixels, and the "height" attribute sets the height of the table to 300
pixels.
4. Rowspan and Colspan Attributes: The "rowspan" attribute
specifies the number of rows that a cell should span, while
the "colspan" attribute specifies the number of columns that a
cell should span. Here's an example:
<table>
<td>Cell 2</td>
</tr>
</tr>
</table>
In this example, the first cell in the first row spans two rows, while the
second cell in the first row is a normal cell. The first cell in the second
row spans two columns, while the second cell in the second row is a
normal cell.
10.2.1.6 Working with form in HTML
The <form> tag in HTML is used to create a form on a web page. A
form is a collection of interactive elements such as text boxes,
checkboxes, radio buttons, drop-down lists, and buttons that allow users
to enter or select data and submit it to a server for processing.
The basic syntax of the <form> tag is as follows:
<form action="url_to_submit_form_data" method="get_or_post"><!--
form elements --></form>
The action attribute specifies the URL of the server-side script that will
process the form data after the user submits it. The method attribute
specifies how the form data will be sent to the server. There are two
possible values for the method attribute: get and post.
The get method sends the form data as a query string
appended to the URL of the form's action URL. This method
is suitable for submitting small amounts of data that do not
contain sensitive information.
The post method sends the form data in the request body,
which is more secure than the get method. This method is
suitable for submitting large amounts of data and sensitive
information.
Here is an example of a simple form with two text fields and a submit
button:
<form action="submit-form.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Submit</button>
</form>
In this example, the action attribute specifies the URL of the server-side
script that will process the form data, and the method attribute is set to
post. The form contains two text fields, one for the user's name and one
for their email address, and a submit button.
When the user clicks the submit button, the data entered into the form
will be sent to the server-side script specified in the action attribute
using the post method. The server-side script can then process the form
data and perform any necessary actions.
When the form is submitted, the server-side script will receive an array
of values for the "fruit" checkbox group, with each selected checkbox's
value being included in the array. The script can then process the
submitted data and perform any necessary actions.
<select name="select_box_name">
...
</select>
The name attribute specifies the name of the select box control.
The <option> tag is used to create each option in the select box.The
value attribute of each <option> element specifies the value of the
option that will be submitted to the server if that option is selected.The
text between the opening and closing <option> tags specifies the label
that will be displayed in the select box for that option.
<form>
<label for="country">Country:</label>
<option value="Canada">Canada</option>
<option value="Mexico">Mexico</option>
<option value="Brazil">Brazil</option>
</select>
</form>
In this example, the name attribute of the select box is set to "country".
When the form is submitted, the server-side script will receive the value
of the selected option from the "country" select box. The script can then
process the submitted data and perform any necessary actions.
You can also specify a default or pre-selected option in the select box
by adding the selected attribute to the corresponding <option> element:
<option value="Canada">Canada</option>
<option value="Brazil">Brazil</option>
</select>
In this example, the "Mexico" option will be pre-selected when the page
loads.
<form>
</form>
The type attribute is set to "file" to indicate that this is a file upload box
control.
The name attribute specifies the name of the file upload box control.
<br>
</form>
In this example, the form's action attribute is set to the URL of the
server-side script that will handle the file upload, and the method
attribute is set to "post" to submit the form data to the server in a
secure way. The enctype attribute is set to "multipart/form-data" to
indicate that the form data includes binary data (i.e., the uploaded file).
When the user selects a file and submits the form, the selected file will
be uploaded to the server and can be processed by the server-side script.
The uploaded file can be accessed in the script using the $_FILES super
global variable.
Note that there are some security considerations when allowing file
uploads on your website, such as checking file types and sizes, and
preventing malicious files from being uploaded. It's important to
carefully validate and sanitize any user-submitted data to prevent
security vulnerabilities.
Here are the different types of button controls and their behaviors:
1. Submit button: This type of button is used to submit a form
to the server. When the user clicks on a submit button, the
form data is sent to the server for processing.
<button type="submit">Submit</button>
<button type="reset">Reset</button>
Creating Rollover Image: Rollover images are images that change when
the mouse pointer hovers over them. In HTML and JavaScript, rollover
images can be created using the onmouseover and onmouseout event
handlers to change the image source when the mouse enters or leaves
the image area.
Properties and Values: CSS properties are the attributes you want to
change, such as color, font-size, or margin. Each property has a value
associated with it, which defines how the property should be applied.
For example, color: blue; sets the text color to blue.
Cascade and Specificity: The "C" in CSS stands for "Cascading," which
refers to the process of combining multiple style sheets and resolving
conflicts between them. CSS also employs specificity rules to determine
which styles should be applied when multiple rules target the same
element.
External Stylesheets: CSS rules can also be placed in external files with
a .css extension and linked to HTML documents using the <link>
element. For example:
<link rel="stylesheet" type="text/css" href="styles.css">
Benefits of CSS:
Separation of Concerns: CSS separates the structure (HTML) from the
presentation (CSS) and behavior (JavaScript) of a webpage, making it
easier to maintain and update.
Consistency: CSS allows for consistent styling across multiple web
pages by defining styles in a centralized location.
Flexibility and Control: CSS provides precise control over the visual
appearance of elements, enabling designers to create custom layouts and
designs.
Accessibility: Properly structured CSS can enhance the accessibility of
web content by making it easier to navigate and understand for users
with disabilities.
In summary, Cascading Style Sheets (CSS) is a powerful tool for
controlling the presentation of web pages, offering a wide range of
styling options and facilitating the creation of visually appealing and
accessible websites.
ID Selector: IDs are unique identifiers for elements. They are defined
using a hash (#) followed by the ID name. For example:
#my-id {
background-color: yellow;
padding: 10px;
}
And then apply it to HTML elements like this:
3. Inline Menu:
An inline menu typically refers to a navigation menu displayed
horizontally across a webpage. To create an inline menu with CSS, you
would typically use an unordered list <ul> and list items <li>, styled to
display horizontally. For example:
<book category="fiction">
<title lang="en">Harry Potter</title>
<author>J.K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
Root Element: Every XML document must have a single root element
that contains all other elements.
Nesting: Elements can be nested within each other, creating a
hierarchical structure.
Self-closing Tags: Empty elements can be self-closed with a forward
slash (/) before the closing angle bracket.
2. Purpose:
Data Exchange: XML is used for exchanging structured data between
different systems, platforms, and programming languages.
Configuration Files: XML is often used for configuration files due to its
readability and extensibility.
Web Services: Many web services use XML for representing data in
requests and responses, particularly SOAP-based services.
3. Advantages:
Readability: XML is human-readable and easy to understand, making it
useful for both humans and machines.
Extensibility: XML allows for the creation of custom tags and attributes,
making it highly flexible and adaptable to various use cases.
Interoperability: XML is platform-independent and widely supported,
enabling interoperability between different systems and applications.
4. Familiar Tools and Technologies:
XML Parsing: Various programming languages provide libraries and
APIs for parsing XML documents, allowing developers to extract and
manipulate data programmatically.
XPath: XPath is a query language for navigating XML documents,
allowing users to select nodes and perform queries to retrieve specific
data.
XSLT: XSLT (eXtensible Stylesheet Language Transformations) is a
language for transforming XML documents into other formats, such as
HTML or another XML document.
XML Schema: XML Schema is a specification for describing the
structure and constraining the contents of XML documents, providing a
way to define and validate the format of XML data.
5. Example Use Cases:
RSS Feeds: Many websites use XML-based RSS feeds to syndicate their
content for distribution.
SOAP: Simple Object Access Protocol (SOAP) uses XML for
exchanging structured information in web services communication.
Configuration Files: Many software applications use XML for storing
configuration settings, preferences, and metadata.
Document Markup: XML is used for marking up documents with
structured data, such as in XHTML for web pages or DocBook for
technical documentation.
Overall, XML is a versatile and widely adopted technology for
representing structured data, offering readability, extensibility, and
interoperability across different systems and applications.
Web Server:
A web server is a software application or hardware device that serves
content (such as web pages, images, videos, etc.) to users over the
internet or an intranet. Here are some key points about web servers:
Proxy Server:
A proxy server acts as an intermediary between client devices (such as
web browsers) and other servers (such as web servers). It facilitates
indirect connections between clients and servers, providing various
functionalities. Here are some key points about proxy servers:
Content Filtering and Security: Proxy servers can filter and inspect
incoming and outgoing traffic to enforce security policies, block
malicious content, or restrict access to certain websites or services.