Introduction To Web Development

Computer Programming: .
Net Technology 1
/**MAC**/
Computer Programming: .Net Technology 1
INTRODUCTION TO WEB DEVELOPMENT
Learning Objective: At the end of this chapter the student should be able to
 Understand the concept of Internet.

 Identify Internet tools and resources
 Utilize Internet search tools and services
 Evaluate Internet tools and resources
 Explain the concept of HTML and role in web designing
 Exploring HTML5
 Defining a Project plan
 Create Wireframes and Storyboard
What is Internet?
The Internet is a system architecture that has transformed
communications and business by allowing computer networks all over the world
to communicate. The Internet, often known as a "network of networks," first
appeared in the United States in the 1970s but did not become widely known
until the early 1990s.
It facilitates human contact through social media, electronic mail (e-mail),

"chat rooms," newsgroups, and audio and video transmission, and it enables
individuals to collaborate in a variety of settings. Many programs, like the World
Wide Web, can use it to access digital information.
The Internet is a global network of computer networks utilizing a suite of

protocols called TCP/IP (Transmission Control Protocol/Internet Protocol) that
supports interconnection of a number of different computer networks.
The Internet supports communication and sharing of data, and offers vast
amount of Information through a variety of services tools
What is ARPANET?
ARPANET, also known as the Advanced Research Projects Agency

Network, was an experimental computer network that served as the precursor of
the Internet. In the late 1960s, the Advanced Research Projects Agency (ARPA),
a branch of the United States Defense Department, financed the construction of
the Advanced Research Projects Agency Network (ARPANET).
Visual representation of the spread of ARPANET as of September 1974
Its original goal was to connect computers at Pentagon-funded research

organizations over phone lines. At the height of the Cold War, military leaders
sought a computer communications system without a central core, with no
headquarters or base of operations that could be attacked and destroyed by
adversaries, thus blacking out the whole network.
The goal of ARPANET was always more academic than military, but as
more academic centers linked to it, the network began to take on the tentacle-
like structure that military authorities had envisioned. The Internet, on a far
bigger scale, largely maintains that shape.
Internet/Inventors
Robert Elliot Kahn (December 23, 1938) is an

American electrical engineer who co-invented the
Transmission Control Protocol (TCP) and the
Internet Protocol (IP), the fundamental
communication protocols at the heart of the
Internet, with Vint Cerf.
Bob Kahn
Vinton Gray Cerf (June 23, 1943) is an

American Internet pioneer and is recognized
as one of “the father of the Internet” sharing
this title with TCP/IP co-developer Bob Kahn.
He has received honorary degrees and awards
that include the National Medal of Technology,
the Turing Award, the Presidential Medal of
Freedom, the Marconi Prize and membership
in the National Academy of Engineering. Vint Cerf
The Internet: IP Address & DNS
What is IP Address?
IP address is an abbreviation for internet protocol address; it is a
numerical identifier linked with a certain computer or computer network. When
a computer is linked to the internet, the IP address allows it to send and receive
data.
Four types of IP address
1. Public - A public IP address is an IP address assigned to your home or

business router by your ISP and used when you connect to the internet.
Any publicly accessible network gear, such as a home router and servers
that host websites, need a public IP address.
2. Private - On an internal network, a private IP address is one that is not
accessible through the Internet. Network equipment, such as routers, use
network address translation to give private IP addresses (NAT).
3. Static - A static IP address is just a non-changing address. When you
assign a static IP address to a device, that number usually stays the same
until the device is retired or your network architecture changes. Servers
and other critical equipment typically utilize static IP addresses.
4. Dynamic - A dynamic IP address is one that your ISP allows you to use
on a temporary basis. If a dynamic address is not in use, it can be allocated
to another device automatically. DHCP or PPPoE are used to assign
dynamic IP addresses.
What is Internet Protocol?
The Internet Protocol (IP) is a protocol, or collection of rules, that is used

to route and address data packets so that they can travel across networks and
arrive at their intended destination. Data traveling across the Internet is split
into smaller bits known as packets.
Internet Protocol version 4 (IPV4)
Internet Protocol Version 4 (IPV4) is the fourth edition of the Internet

Protocol, and it is a widely used protocol for data transfer over many types of
networks. IPv4 is a connectionless protocol that is often used in packet-switched
layer networks like Ethernet. It establishes a logical link between network
devices by identifying each one.
Internet Protocol version 6 (IPV6)
Internet Protocol Version 6 (IPv6) is a version of the Internet Protocol (IP)

that is used to transport data in packets from a source to a destination across
multiple networks. IPv6 is an improved version of IPv4 that can support far larger
numbers of nodes than IPv4. It supports a total of 2128 possible node or address
combinations.
Internet Protocol Version 4 vs Internet Protocol Version 6
When compared to IPv4, Internet Protocol version 6 (IPv6) is more

sophisticated and offers more capabilities. It is capable of providing an unlimited
number of addresses. It is replacing IPv4 to handle the rising number of networks
throughout the world and to assist solve the problem of IP address depletion.
The look of IP addresses is one of the changes between IPv4 and IPv6. IPv4
addresses are four one-byte decimal integers separated by a dot (for example,
192.168.1.1), but IPv6 addresses are hexadecimal numbers separated by colons
(i.e. fe80:: d4a8:6435:d2d8:d9f3b11).
Domain Name System
The Domain Name System (DNS) is the Internet's phonebook. Domain

names, such as nytimes.com or espn.com, are used by humans to access content
online. Web browsers communicate via Internet Protocol (IP) addresses. DNS
converts domain names to IP addresses so that browsers may access Internet
resources.
Packet
A packet is a tiny part of a bigger communication in networking. Data

transferred across computer networks*, such as the Internet, is broken down
into packets. The computer or device that receives these packets then
recombines them.
Routing
The process of determining a path across one or more networks is known

as network routing. The routing concepts may be used to any form of network,
from telephone networks to public transportation. Routing determines the
pathways that Internet Protocol (IP) packets take from their origin to their
destination in packet-switching networks like the Internet. Routers, which are
specialized pieces of network gear, make these Internet routing decisions.
What is HTTP?
HTTP is a protocol that enables the retrieval of resources such as HTML

pages. It is the cornerstone of all data transmission on the Web and is a client-
server protocol, which implies that requests are started by the recipient, which
is typically the Web browser. A full document is reconstructed from the many
sub-documents retrieved, such as text, layout description, pictures, videos,
scripts, and morgue notes.
Clients and servers

communicate by
sending and receiving
individual messages
(as opposed to a
stream of data).
Requests are
messages sent by the
client, which is
generally a Web
browser, and replies are messages delivered by the server as an answer.
HTTP, which was created in

the early 1990s, is an
adaptable protocol that has
developed through time. It is
an application layer protocol
that is delivered over TCP or
a TLS-encrypted TCP
connection, however it could
potentially be sent over any
trustworthy transport
protocol.
Because of its extensibility, it is used to retrieve not just hypertext pages,
but also pictures and videos, as well as to submit material to servers, as with
HTML form results. HTTP may also be used to get portions of documents in order
to dynamically update Web sites.
Components of HTTP-based systems
HTTP is a client-server protocol, which means that requests are submitted

by a single entity, the user-agent (or a proxy on behalf of it). The user-agent is
often a Web browser, although it can be anything, such as a robot that crawls
the Web to populate and maintain a search engine index.
Each request is sent to a server, which handles it and returns an answer,

known as the response. Between the client and the server, there are several
entities known as proxies that provide various functions such as gateways or
caches.
Client: the user-agent
Any tool that operates on the user's behalf is referred to as a user-agent.

The Web browser plays this function largely; additional alternatives include tools
used by engineers and Web developers to debug their apps.
The browser is always the one who makes the request. It is never the
server's fault (though some mechanisms have been added over the years to
simulate server-initiated messages).
The browser sends an initial request to fetch the HTML document that
represents the page in order to show it. It then parses this file, making further
requests for execution scripts, layout information (CSS) to display, and page sub-
resources (usually images and videos).
The Web server
The server is located on the other side of the communication connection

and serves the document as requested by the client. Virtually, a server appears
to be a single machine: this is due to the fact that it may really be a cluster of
servers sharing the load or a complicated piece of software interrogating other
machines, completely or partially creating the document on demand.
Proxies
Numerous computers and devices transmit HTTP messages between the

Web browser and the server. Because of the Web stack's tiered nature, most of
these function at the transport, network, or physical layers, becoming invisible
at the HTTP layer and potentially impacting performance significantly. Those
that operate at the application layers are commonly referred to as proxies.
Basic aspects of HTTP
1. HTTP is simple - Even with the extra complexity provided by HTTP/2 by

enclosing HTTP messages in frames, HTTP is typically meant to be simple
and human readable. Humans can read and understand HTTP
communications, making testing easier for engineers and reducing
complexity for newcomers.
2. HTTP is extensible - HTTP headers, which were introduced in HTTP/1.0,
allow this protocol to be easily extended and experimented with. A simple
agreement between a client and a server on the semantics of a new header
can even provide new functionality.
3. HTTP is stateless, but not sessionless - HTTP is stateless, which means
that there is no relationship between two requests sent on the same
connection at the same time. This instantly raises the possibility of
problems for users seeking to interact with certain sites logically, such as
when utilizing e-commerce shopping baskets. However, while the
foundation of HTTP is stateless, HTTP cookies enable the usage of stateful
sessions. HTTP Cookies are introduced to the process via header
extensibility, allowing session formation on each HTTP request to share
the same context or state.
4. HTTP and connections - Because a connection is managed at the
transport layer, it is essentially outside the purview of HTTP. Although
HTTP does not need the underlying transport protocol to be connection-
based, it does require it to be dependable (i.e., not lose messages) (so at
minimum presenting an error). TCP is the more dependable of the two
most used Internet transport protocols, while UDP is not. As a result, HTTP
is based on the TCP standard, which is connection-based.
What is URL?
A URL, which stands for Uniform Resource Locator, includes a domain

name.
Uniform Resource Locator stands for the URL. A URL is just the address of a
certain web site. In principle, a single resource is indicated by each valid URL.
The HTML page, CSS document, picture etc. might be a resource. In practice, a
URL indicating a resource which is no longer available or has relocated, is the
most typical exception. Since the web server handles the resource represented
by the URL and the webserver itself, it is the owner of the web server to handle
this resource and its related URL properly.
Basic Anatomy of a URL
A URL consists of many elements, which are compulsory and optional.
Scheme
The first element of the URL is the system, which shows the protocol to be
used by the browser to request resource (a protocol is a set method for
exchanging or transferring data around a computer network). The protocol is
normally HTTPS or HTTP for websites (its unsecured version). One of them
requires a webpage, but other systems, like mailto, are managed by browsers as
well (to launch the mail client), so don't be shocked if you encounter additional
protocols.
Authority
 The domain shows which web server is accessed. This is normally a

domain name, but also an IP address (but this is rare as it is much less
convenient).
 The port shows the technical 'gate' for accessing the web server resources.
It is often ignored to allow access to its resources by a web server that
utilizes the standard HTTP ports (80 for HTTP and 443 for HTTPS). It is
compulsory otherwise.
Path to resource
/path/to/myfile.html is the path to the resource on the Web server. In the

early days of the Web, a path like this represented a physical file location on the
Web server. Nowadays, it is mostly an abstraction handled by Web servers
without any physical reality.
Parameters
The additional arguments sent to the Web server are

key1=value1&key2=value2. These are a list of key/value pairs, divided by the &
symbol. Before returning the resource the web server might utilize these
arguments to make additional material. Each Web server has its own parameters
rules and only by asking the owner of the Web server to rely on it may be sure
that certain Web servers manage parameters.
Anchor
An anchor of another portion of the resource itself.

#SomewhereITheDocument an anchor is a type of "bookmark" within the
resource that instructs the browser to display the material contained at that
"bookmarked" location.
For example, in an HTML page, the browser will scroll to the place where
the anchor is declared; in a video or audio document, the browser will attempt
to go to the time the anchor indicates. It is important to note that the section
after the #, commonly known as the fragment identifier, is never transmitted to
the server with the request.
Two Types of URL
 Absolute URL
o The domain name and the directory/page path are included in this
form of URL. There is a full location information in an absolute URL.
It starts with a "http://" protocol and goes on, providing all details.
The following format usually includes an absolute URL.
 Relative URL
o That URL type has the route with the domain name excluded.
Relative means "related to," and in terms of the present location a
relative URL says to a URL location. For references to the URL of a
file inside the same domain, the relative path is utilized.
What is Cookies?
Cookies are small-piece text files – such as a username and a password –

used to identify your machine using a network computer. Specific cookies known
as HTTP cookies are used to identify and enhance your browsing experience for
certain users. When you are connected, the server creates the data saved in a
cookie. The data is marked with your ID and computer's unique identification.
The server is able to read the ID and know what information is especially
for you when your computer and the network server exchanges the cookie.
Different type of cookies
 Magic Cookies
o Magic cookies "are an ancient name for computing information
packets that are transmitted and received without modifications.
This would generally be used for computer database login systems,
such as an internal company network. The current cookie which we
use today is predated by this notion.
 HTTP Cookies
o HTTP cookies are a "magic cookie" version repurposed for web
browsing. The "magic cookie" was the brainchild of web browser
inventor Lou Montulli in 1994. When he helped an online shopping
mall solve their overloaded servers, he reproduced same approach
for browsers.
o The HTTP cookie is what our online experiences are currently using.
It is also what some unscrupulous persons may use to spy out and
steal your personal information from your online activities.
o Specifically for online browsers to monitor, customize and save
information about each user's session, HTTP cookies, or internet
Cookies, are developed. A "session" relates only to how long you
spend on a website.
How cookie are intended to be used:
1. Session management - Cookies allow websites to recognize users and

recall their specific login and sports versus politics information and
preferences.
2. Personalized - The most common method cookies are used to tailor your
experiences is through customized advertising. You may visit certain goods
or portions of a website, and cookies utilize this information to help
generate targeted advertising that you may find interesting.
3. Tracking - Cookies are used by shopping sites to monitor products that
users have previously viewed, allowing the sites to recommend additional
goods that users may be interested in and to store items in shopping carts
while they continue browsing.
Different Type of HTTP Cookies
1. Session cookies - are only utilized when navigating a website. They are
kept in random access memory and are never saved to the hard disk.
2. Persistent cookies - stay on a computer indefinitely, however many
include an expiration date and are deleted automatically when that date
is reached.
LAYER OF SECURITY
What is Secure Socket Layer (SSL)?
Secure Sockets Layer (SSL) is a technology that establishes a secure

channel between two devices linked through the Internet or an internal network.
Until 1999, when Transport Layer Security (TLS) superseded it, SSL was the
most widely used cryptographic protocol for assuring the security of online
communication between a user and a service provider. Because of the latter's
contribution, TLS is still referred to as "SSL" today.
SSL ensures that all information transmitted between the two devices is
secure. As a result, it is helpful for protecting online communications such as
email and bankcard transactions. Web browsers will display a padlock in the
window where the URL is shown if the website is SSL-protected. The URL prefix
is also shown as HTTPS rather than HTTP.
SSL connections are formed by first obtaining SSL certificates from a

certificate authority and then associating them with a web server. The certificate
authority will, however, undertake an investigation, and applicants must
interact with and provide documents to the authority. Once this procedure has
been completed, the authority will grant the service provider the ability to utilize
SSL. Certificates have expiration dates and must be renewed with the certificate
authority.
Father of SSL
Taher Elgamal (born August 18, 1955) is an Egyptian

cryptographer and businessman. He is known as the "Father
of SSL" for his work in computer security while working at
Netscape, which contributed to the establishment of private
and secure communications on the Internet.
What is Transport Layer Security (TLS)?
TLS, or Transport Layer Security, is a widely used protection protocol that

facilitates privacy and data security for Internet connections. Encrypting
communication between online applications and servers, such as web browsers
loading a webpage, is a key use case for TLS. TLS may also be used to encrypt
other types of communications including email, messaging, and voice over IP
(VoIP).
The Internet Engineering Task Force (IETF), an international standards

body, proposed TLS, and the first version of the protocol was published in 1999.
TLS 1.3, which was released in 2018, is the most recent version.
What is the difference between TLS and SSL?
TLS evolved from Secure Sockets Layer (SSL), a prior encryption

technology created by Netscape. TLS version 1.0 originated as SSL version 3.1,
but the protocol's name was changed before release to emphasize that it was no
longer linked with Netscape. As a result of this history, the words TLS and SSL
are frequently used interchangeably.
What is the difference between TLS and HTTPS?
HTTPS is a TLS encryption implementation built on top of the HTTP

protocol, which is used by all websites and some online services. TLS encryption
is used by any website that utilizes HTTPS.
ENCRYPTION & PUBLIC KEYS
ENCRYPTION
What is Encryption?
Encryption is a method of encrypting data so that only authorized parties

may decipher it. It is the process of turning human-readable plaintext to
unintelligible text, also known as ciphertext, in technical terms. Encryption, in
a nutshell, changes readable data so that it seems random. Encryption
necessitates the employment of a cryptographic key, which is a set of
mathematical values agreed upon by both the sender and the recipient of an
encrypted communication.
Why is data encryption required?
1. Privacy: Encryption ensures that only the intended receiver or the rightful
data owner may read messages or data at rest. This prohibits attackers,
advertising networks, Internet service providers, and, in certain
circumstances, governments from collecting and accessing sensitive data.
2. Security: Encryption aids in the prevention of data breaches, whether the
data is in transit or at rest. If a business device is lost or stolen and its
hard disk is correctly encrypted, the data on that device remains safe.
Similarly, encrypted communications allow communicating parties to
transmit sensitive data without the data being leaked.
3. Data Integrity: Encryption also aids in the prevention of harmful conduct,
such as on-path assaults. When data is transferred over the Internet,
encryption (together with additional integrity safeguards) ensures that the
data received by the receiver has not been tampered with along the way.
4. Authentication: Among other things, public key encryption may be used
to prove that the owner of a website possesses the private key specified in
the website's TLS certificate. This helps website visitors to be certain that
they are linked to the legitimate website.
5. Regulations: For these reasons, many industry and government laws
mandate firms that handle user data to encrypt such data. HIPAA, PCI-
DSS, and the GDPR are examples of regulatory and compliance standards
that need encryption.
What is Decryption?
Decryption is the process of converting encrypted data back to its original

format. In general, it is a reverse encryption procedure. Because decryption
requires a secret key or password, it decodes the encrypted information so that
only an authorized user may decrypt the data. While being exchanged or
communicated, the process of encryption converts information from its original
format, known as plaintext, into an unreadable format, known as ciphertext.
What is Symmetric Encryption?
Symmetric encryption is a type of encryption that uses only one key (a

secret key) to encrypt and decode electronic data. The key must be exchanged
between the organizations communicating using symmetric encryption so that it
may be utilized in the decryption process. This encryption method varies from
asymmetric encryption in that communications are encrypted and decrypted
using a pair of keys, one public and one private.
There are two types of symmetric encryption algorithms:
1. Block algorithms - Set lengths of bits are encrypted in electronic data

blocks using a unique secret key. While the data is being encrypted, the
system stores it in memory while it waits for complete blocks.
2. Stream algorithms - Data is encrypted as it streams instead of being retained
in the system’s memory.
What is Asymmetric Encryption?
Asymmetric cryptography, often known as public-key cryptography, is a

cryptographic method that employs pairs of keys: public keys and private keys.
Cryptographic methods, which are based on mathematical problems known as
one-way functions, are used to generate such key pairs.
HyperText MARKUP LANGUAGE
What is HTML?
The term HTML is an acronym for HyperText Markup Language. It is a

markup language used for creating Web pages. A markup language than is a set
of interpretation to text that describes how it is to be structured, lain out or
formatted.
Exploring HTML Text Editors
An HTML editor is software that provides a variety of capabilities for

creating a well-structured and functional website. People may simply construct
a website from start and alter the code to add extra features using an HTML
editor.
What’s new in HTML5?
HTML5 is backwards compatible which means it also supports earlier

versions. HTML5 addresses error handling by its detailed algorithms for passing
errors.
HTML5 is the most recent significant revision of the HTML standard, after
HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a World Wide Web standard
for information organization and presentation.
The World Wide Web Consortium (W3C) and the Web Hypertext
Application Technology Working Group collaborated on HTML5 (WHATWG). The
new standard includes video playback and drag-and-drop functionality that was
previously dependent on third-party browser plug-ins like Adobe Flash,
Microsoft Silverlight, and Google Gears.
Browser Support
Many HTML5 capabilities are supported by the most recent versions of

Apple Safari, Google Chrome, Mozilla Firefox, and Opera, and Internet Explorer
9.0 will also support certain HTML5 capability.
HTML5 compatibility is great in the mobile web browsers that come pre-installed
on iPhones, iPads, and Android phones.
New Features
HTML5 offers a number of new elements and characteristics that can aid in the
development of contemporary websites. The following is a list of some of the most
notable HTML5 features.
 New Semantic Elements - These are similar to <header>, <footer>, and

<section>.
 Forms 2.0 − Improvements to HTML web forms, including the addition of
additional properties for the <input> tag.
 Persistent Local Storage − to accomplish without the need of third-party
plugins.
 WebSocket − A bidirectional communication technique for web
applications of the future.
 Server-Sent Events − HTML5 introduces Server-Sent Events, which are
events that travel from a web server to a web browser (SSE).
 Canvas − this allows you to program a two-dimensional drawing surface
in JavaScript.
 Audio & Video − you may include music or video on your websites without
using third-party plugins.
 Geolocation − Visitors may now select whether or not to reveal their
physical location with your online application.
 Microdata − This allows you to expand your web pages with unique
semantics by creating your own vocabulary beyond HTML5.
 Drag and drop − Drag and drag the objects from one position on the same
webpage to another.
Backward Compatibility
HTML5 is meant to be as backward compatible as feasible with older web

browsers. Its new capabilities are based on existing ones and enable you to
deliver fallback content for outdated browsers.
It is proposed that a few lines of JavaScript be used to detect support for

particular HTML5 capabilities.
If you have never used HTML before, I recommend that you go through our HTML
Tutorial before diving into the capabilities of HTML5.
History of HTML
Tim Berners-Lee created the initial version of HTML in 1993. There have
been many different versions of HTML since then. HTML 4.01, which became an
official standard in December 1999, was the most frequently used version during
the 2000s.
Another version, XHTML, was an XML-based rewriting of HTML. XML is a

standard markup language that serves as the foundation for additional markup
languages. Today, there are hundreds more XML languages in use, including
GML (Geography Markup Language), MathML, MusicML, and RSS (Really Simple
Syndication). Because these languages were developed in a common language
(XML), their content may be readily transferred between applications.
As a result, XML has the potential to be quite strong, and it's not
surprising that the W3C would produce an XML version of HTML (again, called
XHTML). In 2000, XHTML became an official standard, and it was revised in
2002. XHTML is comparable to HTML, but with tighter restrictions. Strict
restrictions are required for all XML languages since interoperability across
applications would be impossible without them.
The majority of Web pages now were created with HTML 4.01 or XHTML
1.0. However, in recent years, the W3C has been working on a completely new
version of HTML, HTML5, in conjunction with another organization, the
WHATWG. HTML5 is still a draft proposal and is not yet an official standard as
of 2011. However, browsers and other web-enabled gadgets already support it,
and it is the way of the future.
Kinds of Content
Content Example Elements

METADATA Sets up the presentation base, link, meta,
or behavior of the rest of nonscript, script, style,
the content or sets up title
the relationship of the
document with other
documents
FLOW Most elements that are A, abbr, address, area,
used in the body of article, aside, audio, n,
documents are bdi, bdo, blockquote, br,
categorized as flow button, canvas, cite,
content code, datalist, del,
details, dfn, dialog, div,
dl, em, emded, fieldset,
figure, footer, form h1,
h2, h3, h4, h5, h6,
header, hgroup, hr, i,
iframe, img, input, ins,
kbd, keygen, label, main,
map, mark, math, menu,
meter, nav, nonscript,
object, ol, output, p, pre,
progress, q, ruby, s,
samp, script, section,
select, small, span,
strong, style, sub, sup,
svg, table, textarea, time,
u, ul, var, video, wbr, text
SECTIONING Defines the scope of article, aside, nav,
heading and footers section
HEADING Defines the header of a h1, h2, h3, h4, h5, h6,
section header, hgroup
PHRASING Marks up the text at the a, abbr, area, audio, b,
intra-paragraph level bdi, bdo, br, button,
canvas, cite, code,
datalist, del, dfn, em,
embed, I, iframe, img,
input, ins, kbd, keygen,
label, map, mark, math,
meter, nonscript, object,
output, progress, g, ruby,
s, samp, script, select,
small, span, strong, sub,
sup, svg, textarea, time,
u, var, video, wbr, text
EMBEDDED Imports another audio, canvas, emded,
resource into the iframe, img, math, object,
document svg, video
INTERACTIVE For user interaction a, audio, button, details,
emded, iframe, img,
input, keygen, label,
object, select, textarea,
video
NEW ELEMENTS in HTML5
HTML5 includes a number of new elements, which are mentioned in table 1-2.
The current browser does not support all of these components. Before utilizing
these new elements, be sure you thoroughly test them and check for browser
support.
ELEMENT DESCRIPTION
<article> A section for the main page content, such as a newspaper
or magazine article, blog entry, or any other independent
item of content.
<aside> A section for side content such as a pull quote or other
content related to the main article
<audio> Contain sound, streaming audio, or other aural content
<canvas> Let’s scripting application dynamically render graphics,
animations, or other visual images
<command> Defines a command action for interaction with the user
<datalist> contains drop-down list content for older browsers; used
for legacy compatibility
<details> Contains additional information or controls that the user
can obtain on demand
<embed> Represents an insertion point for an external application
or interactive content
<figure> Contains an image or graphics with an optional caption
using the <legend> elements
<footer> Typically contains information such as who wrote the Web
page, links to related documents and copyright notices
<header> Typically contains heading and subheadings that describe
the page content
<mark> Includes a string of text in a document marked or
highlighted for reference purposes
<meter> Includes a measurements within a known range, or a
fractional value
<nav> Contains primary navigation links to other pages or to
content within the page
<output> Contains the result of a calculation
<progress> Represent the completion progress of a task
<rp> Stands for ruby parentheses, which hide ruby text <rt>
from browsers that do not support the <ruby> element
<rt> Contains ruby text, used with <ruby> element
<ruby> Allows markup of text content with ruby annotations.
Ruby annotations are descriptive strings of text presented
next to base text, primarily used in East Asian typography
as a guide for pronunciation or to include other
annotations.
<section> Specifies a generic section of a web page; a section, in this
context, is a thematic grouping of content, typically with
its own heading
<source> Specifies multiple media sources for media elements
<time> Contains a date or time
<video> Contains video content
DEFINING A PROJECT PLAN
People and organizations all around the world use

the World Wide Web, or web for short, to
communicate information. You may publish your
own material on the online by producing web
pages, which are documents structured to be
accessible on the web, and then publishing them as websites that are open to
anybody with web access.
Making information available on the web begins with careful preparation,

whether you intend to create a single web page or a huge group of interconnected
web sites.
Whether you're brainstorming for a personal site or meeting with a client

about a site you've been paid to develop, the first step is to establish a project
plan that includes audience, budget, and timeline.
You met with Marco Blaine Cipriano, owner of IGNITEZ Lakeland Resort,
to discuss the elements he wants to add in his new website.
FIGURE A-1 shows the project plan you developed based on client responses at
this meeting.
Figure A-1: IGNITEZ Lakeland Resort
Project Plan for IGNITEZ Lakeland Resort
Objectives:
 Make general facility information and contact information available online.
 Allow potential guests to look over the lodgings and grounds.
 Make it possible for prospective visitors to reserve a stay online.
Target Audience:
 35+
 People who live in southern Canada and the upper Midwest of the United States
 Desire to "get away from it all."
 I'm not sure about the technical details of the users, but it's believed that the majority will
have some online expertise.
Site type:
 Billboard (While the customer desires some e-commerce capability, this will be
accomplished by linking to another site that accepts reservations; hence, no advanced
functionality is required for this site.)
Budget:
 Hien is working on a few comprehensive alternatives for the customer; this section will
be updated after the budget has been set and the contract has been signed.
Project Plan for IGNITEZ Lakeland Resort
Timeline:
Milestone Date Assigned

Design mockup submitted for August 5, 2021 Project Manager
approval
Draft site published to testing August 15, 2021 Project Manager
server
Feedback received from August 22 , 2021 Marco Blaine Cipriano
client
Client feedback incorporated September 1, 2021 Project Manager
Final Feedback from client September 8, 2021 Marco Blaine Cipriano
Final Feedback incorporated September 22, 2021 Project Manager
Final signoff from client October 5, 2021 Marco Blaine Cipriano
Site goes live October 5, 2021 Project Manager
Client contact info:
Marco Blaine Cipriano
IGNITEZ Lakeland Resort
080 March Green Grass Ln.
Marble, MN 55764
(0998) 226 5063

Important questions to consider when planning a website include the

following:
 What are the goals and objectives of the website? In order to

understand the goals and objectives for the site, you want to ask your
client a variety of questions.
 Who is the target audience? It can be helpful to know the target audience
for a website when choosing a layout and design. Websites should look
different based upon who will be visiting the site and why they are
interested in the content.
 What type of website is it? Identifying the type of website the owner
wants can help to focus the scope of the project. A website usually has one
of a small number of main functions: providing a web presence that server
an online information brochure, providing important for special interest
groups and nonprofit organizations, showcasing examples of different
types of works and designs commonly used by web design individual and
agencies, providing multiple levels of information with page templates,
extracting information from databases, or conducting the sale of products
or services and other business transactions through the Internet.
 What is the budget for the project? Every websites design project
should include a budget that is presented to the client prior to
completing any work. The budget should be included in the project plan,
which becomes part of the contract.
 What is the timeline for the project? You should always provide the
website with a timeline that includes the delivery date of the final
website, along with various implementation milestone along the way. The
timeline should always identify who is responsible for which tasks.
Create Wireframes and a Storyboard
When you create a web page or website, it can be helpful to start by getting
a clear idea of what is a sketch that outlines the components of each web page
and their place in the layout.
A designer usually creates one wireframes for each web page or web page
type. For a website containing multiple pages, they also create a storyboard,
which illustrates links among the pages. When there is a web design team
working on a project, the people responsible for art or design often create the
wireframes and storyboard, and then they hand off these documents to the
developers, who use these documents to create a web page or website.
You work with Karl Samson,

one of your colleagues in the
art department, to create a
wireframe and a storyboard
for the IGNITEZ Lakeland
Resort website based on the
project plan.
When you create a wireframe and a storyboard for a website, be sure to

include these main steps:
 Identify components to include before you start sketching, it is

important to get a firm handle on all the elements that the website you’re
working on must include. A good place to start is your project plan,
which should include a through inventory of items that must be part of
the website; for instance, an existing logo and color scheme that a client
already uses in all of its printed materials. You should augment this list
with any other essential design elements based on your understanding of
the site’s target audience and functionality.
 Sketch possible layouts and then select one the next steps is to place
the elements in a layout that’s functional, usable, and ideally,
aesthetically pleasing. This step is often the job of a graphic designer;
however, it’s a skill that many web developers without artistic
backgrounds have obtained with study and practice. Whoever does this
steps, it often involves a series of sketches that either lays out a set of
choices or progressively fine-tunes a theme. For a simple website, a
single layout should suffice for all the site’s pages; however, if some
pages have requirements that are best served distinct layouts need to be
finalized in this steps as well.
 Map the relationship among web pages any time you’re creating a
website or a single web page with links to other websites, it’s helpful to
map out the relationships between gaps. This map is a crucial tool when
you create the navigation system for the website.
Figure A-2: IGNITEZ Lakeland Resort (Wireframes)
IGNITEZ Lakeland Resort
Business description
Contact Information
Figure A-3: Storyboard for IGNITEZ Lakeland Resort
MAIN PAGE
About Photo Contact Online Local Feedback Map &

Weather & Ratings Directions
us Gallery us Reservation

Introduction To Web Development - Chapter 1G11

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introduction To Web Development - Chapter 1G11

Uploaded by

Copyright:

Available Formats

Computer Programming: .

 Understand the concept of Internet.

It facilitates human contact through social media, electronic mail (e-mail),

The Internet is a global network of computer networks utilizing a suite of

ARPANET, also known as the Advanced Research Projects Agency

Visual representation of the spread of ARPANET as of September 1974

Its original goal was to connect computers at Pentagon-funded research

Robert Elliot Kahn (December 23, 1938) is an

Vinton Gray Cerf (June 23, 1943) is an

The Internet: IP Address & DNS

Four types of IP address

1. Public - A public IP address is an IP address assigned to your home or

What is Internet Protocol?

The Internet Protocol (IP) is a protocol, or collection of rules, that is used

Internet Protocol version 4 (IPV4)

Internet Protocol Version 4 (IPV4) is the fourth edition of the Internet

Internet Protocol version 6 (IPV6)

Internet Protocol Version 6 (IPv6) is a version of the Internet Protocol (IP)

Internet Protocol Version 4 vs Internet Protocol Version 6

When compared to IPv4, Internet Protocol version 6 (IPv6) is more

Domain Name System

The Domain Name System (DNS) is the Internet's phonebook. Domain

A packet is a tiny part of a bigger communication in networking. Data

The process of determining a path across one or more networks is known

HTTP is a protocol that enables the retrieval of resources such as HTML

Clients and servers

HTTP, which was created in

Components of HTTP-based systems

HTTP is a client-server protocol, which means that requests are submitted

Each request is sent to a server, which handles it and returns an answer,

Client: the user-agent

Any tool that operates on the user's behalf is referred to as a user-agent.

The server is located on the other side of the communication connection

Numerous computers and devices transmit HTTP messages between the

Basic aspects of HTTP

1. HTTP is simple - Even with the extra complexity provided by HTTP/2 by

A URL, which stands for Uniform Resource Locator, includes a domain

A URL consists of many elements, which are compulsory and optional.

 The domain shows which web server is accessed. This is normally a

/path/to/myfile.html is the path to the resource on the Web server. In the

The additional arguments sent to the Web server are

An anchor of another portion of the resource itself.

Two Types of URL

Cookies are small-piece text files – such as a username and a password –

Different type of cookies

How cookie are intended to be used:

1. Session management - Cookies allow websites to recognize users and

Different Type of HTTP Cookies

What is Secure Socket Layer (SSL)?

Secure Sockets Layer (SSL) is a technology that establishes a secure

SSL connections are formed by first obtaining SSL certificates from a

Taher Elgamal (born August 18, 1955) is an Egyptian

What is Transport Layer Security (TLS)?

TLS, or Transport Layer Security, is a widely used protection protocol that

The Internet Engineering Task Force (IETF), an international standards

What is the difference between TLS and SSL?

TLS evolved from Secure Sockets Layer (SSL), a prior encryption

What is the difference between TLS and HTTPS?

HTTPS is a TLS encryption implementation built on top of the HTTP

Encryption is a method of encrypting data so that only authorized parties

Why is data encryption required?

Decryption is the process of converting encrypted data back to its original