Web Technology
Web Technology refers to the tools and
techniques used in the process of
communication between different types of
devices over the Internet.
A web browser is used to access web pages,
which can be defined as programs that display
text, data, pictures, animation, and video on
the Internet.
Classification of Web Technology
• World Wide Web (WWW):
• Web Browser:
• Web Server:
• Web Pages:
• Web Development:
Uses of the Web Technology
• Knowledge Acquisition
• Communication
• E-Commerce ...
• Learning and Education ...
• Entertainment ...
• Social Media ...
• Online Banking and Finance ...
• Job Hunting ...
Characteristics of Web Technology
Availability
Performance
Security
Functional
Ease of use
Content
Modern:-Using current trends and technologies
Advantages of Web Technology
• Communication Forum:
• Abundant Information:
• Inexhaustible Education:
• Entertainment for Everybody:
• Online Services and E-commerce:
• Social Network:
• Learning: .
• Internet Banking:
Disadvantages of Web Technology
• Internet Addiction Disorder:
• Cyber Crime:.
• Social Alienation: Decrease in social abilities.
• Spam: Unnecessary emails, advertisements,
Health issues:
• Wastage of Time:
• Virus/Malware:
• Affect Focus and Patience:
Web Browser
A web browser is an application for accessing
websites. When a user requests a web page
from a particular website, the browser retrieves
its files from a web server and then displays the
page on the user's screen. Browsers are used on
a range of devices, including desktops, laptops,
tablets, and smartphones.
Search Engine
A search engine is a software system that provides
hyperlinks to web pages and other relevant
information on the Web in response to a user's query.
The user inputs a query within a web browser and
search results Users also search images, videos, or
news.
• Google
• Bing
• Yahoo!
• Baidu
• Yandex
Different types of protocol used
• Transmission Control Protocol (TCP)
• Hypertext Transfer Protocol Secure (HTTPS)
• File Transfer Protocol (FTP)
• Dynamic Host Configuration Protocol (DHCP)
• Secure Shell (SSH)
• Internet Message Access Protocol (IMAP) and Post Office
Protocol (POP)
• Simple Network Management Protocol (SNMP)
• Border Gateway Protocol (BGP)
• Transport Layer Security (TLS)/Secure Sockets Layer (SSL)
User Interface (UI)
The user interface (UI) is the point of human-
computer interaction and communication in a
device.
This can include display screens, keyboards, a
mouse and the appearance of a desktop.
How a user interacts with an application or a
website, using visual and audio elements, such
as type fonts, icons, buttons, animations and
sounds.
User Experience (UX)
User experience (UX) is how a user interacts with
and experiences a product system or service. It
includes a person's perceptions of utility,
ease of use, and efficiency.
Wireframes
Wireframes are a simplified, visual
representation of a digital interface, such as a
website, mobile app, or software application.
They are a fundamental step in the design
process that serves as a blueprint or skeleton for
the final product.
Wireframes Design
What is HTML?
HTML (HyperText Markup Language) is the most basic building
block of the Web. It defines the meaning and structure of web
content. Other technologies besides HTML are generally used
to describe a web page's appearance/presentation (CSS) or
functionality/behavior (JavaScript).
• HTML stands for Hyper Text Markup Language
• HTML is the 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
• HTML elements label pieces of content such as "this is a
heading", "this is a paragraph", "this is a link", etc.
Objectives of HTML
• Insert a graphic within a web page.
• Create a link within a web page.
• Create a table within a web page.
• Insert heading levels within a web page.
• Insert ordered and unordered lists within a web
page.
• Use cascading style sheets.
• Create a web page.
• Validate a web page.
• Publish a web page.
Simple Structure of HTML Document
• <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Tags
1. <html> … </html>
<head> … </head>
<title> … </title>
<body> … </body>
<h1> … </h1>
<p> … </p> — A paragraph
<a> … </a> — A link
<img> — An image
<div> … </div> — A block-level container for content
HTML Formatting in HTML
• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
• HTML anchors are essential elements used to create hyperlinks, between different sections of a
webpage or to other web pages.
• Creating an Anchor Link
• To create an anchor link use href
• <!DOCTYPE html>
• <html>
• <head>
• <title>Anchor Example</title>
• </head>
• <body>
• <a href="#section-2">Jump to Section 2</a><br />
• <a href="#section-3">Jump to Section 3</a><br />
• <a href="#section-4">Jump to Section 4</a><br />
<h2 id="section-1">Section 1</h2>
• <p>Content for section 1...</p>
<h2 id="section-2">Section 2</h2>
• <p>Content for section 2...</p>
<h2 id="section-3">Section 3</h2>
• <p>Content for section 3...</p>
<h2 id="section-4">Section 4</h2>
• <p>Content for section 4...</p>
<p>Go to the <a href="#section-1">top</a>.</p>
• </body>
• </html>
The <a> HTML element (or anchor element),
with its href attribute, creates a hyperlink to
web pages, files, email addresses, locations in
the same page, or anything else a URL can
address.
HTML lists
HTML lists allow web developers to group a set of related items in lists. There are three types of lists in HTML: unordered, ordered,
and description lists.
Unordered List
• An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets
(small black circles) by default.
• <ul>
• <li>Coffee</li>
• <li>Tea</li>
• <li>Milk</li>
• </ul>
Ordered 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.
• <ol>
• <li>Coffee</li>
• <li>Tea</li>
• <li>Milk</li>
• </ol>
Description List
• A description list is a list of terms, with a description of each term. The <dl> tag defines the description list, the <dt> tag
defines the term (name), and the <dd> tag describes each term.
• <dl>
• <dt>Coffee</dt>
• <dd>- black hot drink</dd>
• <dt>Milk</dt>
• <dd>- white cold drink</dd>
• </dl>
HTML Tables
HTML tables are a powerful way to organize and display data in a structured format using
rows and columns.
Example of a Simple 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>
• HTML Image Tag
• The <img> tag in HTML is used to embed images into a web page.
Example
• <img src="img_girl.jpg" alt="Girl in a
jacket" width="500" height="600">
• Required Attributes:
• src: Specifies the path to the image.
• alt: Provides alternate text for the image if it cannot be displayed.
Optional Attributes:
• width: Specifies the width of the image.
• height: Specifies the height of the image.
• loading: Specifies whether a browser should load an image
immediately or defer loading (e.g., lazy).
• cross origin: Allows images from third-party sites that allow cross-
origin access to be used with canvas
What is an HTML Form?
• An HTML form is a section of a webpage used to collect user input. This input is
typically sent to a server for processing.
• Key Elements and Attributes
• Form Element (<form>):
• Input Element (<input>):
• Label Element (<label>):
• Select Element (<select>):
• Textarea Element (<textarea>):
Basic Structure of an HTML Form
• <form action="/submit_form" method="post">
• <label for="fname">First name:</label><br>
• <input type="text" id="fname" name="fname"><br>
• <label for="lname">Last name:</label><br>
• <input type="text" id="lname" name="lname"><br><br>
• <input type="submit" value="Submit">
• </form>
Definition and Usage of <div> Tag in HTML
The <div> tag in HTML is a versatile and widely-used element that serves as a container for grouping similar content
together on a web page The <div> tag defines a division or a section in an HTML document. It is a block-level element
Common Uses of <div>
• Web Layouts:
• CSS Art:
Example
• Here is a basic example of a <div> element used to group a heading and a paragraph:
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• myDiv {
• border: 5px outset red;
• background-color: lightblue;
• text-align: center;
• }
• </style>
• </head>
• <body>
• <div class="myDiv">
• <h2>This is a heading in a div element</h2>
• <p>This is some text in a div element.</p>
• </div>
• </body>
• </html>
CSS (Cascading Style Sheets) is a style sheet language used to
describe the presentation of a document written in HTML or
XML. It is a cornerstone technology of the World Wide Web,
alongside HTML and JavaScript.
Benefits of Using CSS
• Efficiency:
• Consistency:
• Accessibility:
• Performance:
Example
• h1 {
• color: red;
• font-size: 5em;
• }
• Embedding CSS in HTML
• CSS (Cascading Style Sheets) is used to style and layout web
pages. There are three main ways to embed CSS in HTML: inline
CSS, internal CSS, and external CSS.
• Inline CSS
• Inline CSS is used to apply a unique style to a single HTML
element.
Example:
• <!DOCTYPE html>
• <html>
• <body>
• <h1 style="color:blue;text-align:center;">This is a heading</h1>
• <p style="color:red;">This is a paragraph.</p>
• </body>
• </html>
Internal CSS
• Internal CSS is used to define styles for a single HTML page.
Example:
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• body {
• background-color: linen;
• }
• h1 {
• color: maroon;
• margin-left: 40px;
• }
• </style>
• </head>
• <body>
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• </body>
• </html>
External CSS
• External CSS is the most efficient way to style multiple pages.
Example:
• <!DOCTYPE html>
• <html>
• <head>
• <link rel="stylesheet" href="[Link]">
• </head>
• <body>
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• </body>
• </html>
• The [Link] file might look like this:
• body {
• background-color: lightblue;
• }
• h1 {
• color: navy;
• margin-left: 20px;
• }