Call Girls in Nagpur Suman Call 7001035870 Meet With Nagpur Escorts
WST I (Lesson 1)-2.pdf
1. Learn Now
Web System and
Technology I
by Rose Ann M. Inmenzo
Lessons Quizzes Tasks Assignments Rules
2. Web System and Technology I
This course deals with the design and development of Web pages and
Websites. Emphasis is on user-interface design, and scripts using
various open-source Web technologies. Topics include World Wide
Web, Hypertext Markup Language (HTML), Cascading Style Sheets
(CSS), and JavaScript.
Lessons Quizzes Tasks Rules
3. Lesson 1
Lessons
Lesson 2 Lesson 3 Lesson 4
Internet
World Wide Web
Principles of …
Quizzes Tasks Rules
What is the Internet?
The Internet was derived from the word Interconnected NETwork. It is a globally connected system
that uses TCP/IP in transmitting data via various types of media. The network consists of millions of
private, public, academic, business, and government networks that are linked by a broad array of
electronic, wireless, and optical networking technologies.
How to access the Internet?
ISP (Internet Service Provider), is a commercial organization that provides data connection to the
subscribers allowing them to access the Internet through physical transport infrastructure. They
charge users whether households, businesses, and governments a monthly fee on a contractual
basis.
4. Lesson 1
Lessons
Lesson 2 Lesson 3 Lesson 4
Next
Uses of the Internet?
Quizzes Tasks Rules
Listed below are some common uses of the internet:
• Email and Personal Communication
• Research
• News
• Shopping
• Entertainment
• Banking
• Job Hunting
The Internet can be accessed anywhere by means of numerous ways, our mobile phones, data card,
handheld game consoles, and cellular routers can be connected to the internet wirelessly. Different
services of the internet may be available and can be done effectively including electronic mail.
Internet
World Wide Web
Principles of …
5. As mentioned earlier, IP is the key factor in the definition of the Internet. This HTTP is the key component in the definition of the
World Wide Web.
Lesson 1
Lessons
Lesson 2 Lesson 3 Lesson 4
Basic Internet Protocol
Quizzes Tasks Rules
A computer communication protocol refers to the ways in which devices can identify and
communicate with each other in order to serve some purposes.
• Internet Protocol (IP)
• Transmission Control Protocol (TCP)
• User Datagram Protocol (USD)
• Domain Name Service (DNS)
• Host name
• Higher-level Protocols
Next
Internet
World Wide Web
Principles of …
6. Lesson 1
Lessons
Lesson 2 Lesson 3 Lesson 4
The World Wide Web
World Wide Web refers to the collection of information that is accessed via the internet, which we
usually tap into the browser. This used Hypertext Transfer Protocol (HTTP) which this HTTP is a
language used to transmit data to access information that lives on different networks.
It's a single HTML document that
can contain text, images, videos,
links, and other elements that can
be displayed in a web browser.
Quizzes Tasks Rules
WEBPAGE WEBSITE
A collection of interconnected webpages
that are related to each other and are
typically organized under a common
domain name.
Internet
World Wide Web
Principles of …
7. Lesson 1
Lessons
Lesson 2 Lesson 3 Lesson 4
Browser Rendering Engines
Quizzes Tasks Rules
Internet
World Wide Web
Principles of … The program that is responsible for converting HTML and CSS into what you see rendered on the
screen is called a rendering engine (also browser engine or layout engine). Browsers that you use on
desktop computers and mobile devices are made up of rendering engines as well as other code used
for their own user interfaces and functionality.
8. Lesson 1
Lessons
Lesson 2 Lesson 3 Lesson 4
The Web Page Addresses
Quizzes Tasks Rules
Internet
World Wide Web
Principles of …
Every page and resource on the web has its own special address called a URL, which stands for
Uniform Resource Locator.
Parts of URL
A complete URL is generally made up of three components: the protocol, the site
name, and the absolute path to the document or resource, as shown below.
9. Lesson 1
Lessons
Lesson 2 Lesson 3 Lesson 4
http://
Quizzes Tasks Rules
Internet
World Wide Web
Principles of …
The first thing the URL does is define the protocol that will be used for that particular transaction.
The letters “HTTP” let the server know to use Hypertext Transfer Protocol, or get into “web mode.”
You may also see a URL beginning with https://, which I explain in the “HTTPS, The Secure Web
Protocol” sidebar.
10. Lesson 1
Lessons
Lesson 2 Lesson 3 Lesson 4
www.example.com
Quizzes Tasks Rules
Internet
World Wide Web
Principles of …
The next portion of the URL identifies the website by its domain name. In this example, the
domain name is “example.com.” The “www.” part at the beginning is the particular hostname at
that domain. The hostname “www” has become a convention but is not a rule. In fact, sometimes
the hostname may be omitted. There can be more than one website at a domain (called
subdomains). For example, there might also be “develop- ment.example.com,”
“clients.example.com,” and so on.
11. Lesson 1 Lesson 2 Lesson 3 Lesson 4
/2018/samples/first.html
Lessons Quizzes Tasks Rules
Internet
World Wide Web
Principles of …
This is the absolute path through directories on the server to the requested HTML document,
first.html. The words separated by slashes are the directory names, starting with the root directory
of the host (as indicated by the initial /). Because the internet originally comprised computers
running the Unix operating system, our current way of doing things still follows Unix rules and
conventions, hence the / separating directory names.
12. Lesson 1
Lessons
Lesson 2 Lesson 3 Lesson 4
A browser is a software program
that displays web pages.
Internet
World Wide Web
Principles of …
Quizzes Tasks Rules
WEB BROWSER SEARCH ENGINE
A search engine is a website that
finds web pages.
Google Chrome, Mozilla Firefox,
Safari, Microsoft Edge.
Google, Bing, DuckDuckGo
15. Lessons
Next
Quizzes Tasks Rules
So you put the code for your web page on a computer that’s always
running. This computer can serve your page whenever a client
computer requests it.
client
server
16. Lessons
Next
Quizzes Tasks Rules
All computers have an address called an IP address.
Think of it as a mailing address for computers.
client
server
Address: 169.232.116.21
Address: 193.45.12.4
17. Lessons
Next
Quizzes Tasks Rules
Each domain name (ex: helloworld.com) corresponds to an IP
address to a server.
client
server
Address: 169.232.116.21
Address: 193.45.12.4 aka helloworld.com
18. Lessons
Next
Quizzes Tasks Rules
So when you type in a domain name from your computer, you are
making a request to a server with that corresponding address.
client
server
Address: 169.232.116.21
Address: 193.45.12.4 aka helloworld.com
27. Lesson 1
Lessons
Lesson 2 Lesson 3 Lesson 4
Principles of Good Website Design
An effective website design should fulfill its intended function by conveying its particular message
while simultaneously engaging the visitor. Several factors such as consistency, colors, typography,
imagery, simplicity, and functionality all contribute to good website design.
Your website needs to accommodate the needs of the user.
• Describing Expertise
• Building Your Reputation
• Generating Leads
• Sales and After Care
Internet
World Wide Web
Principles of …
Quizzes Tasks Rules
1. Website Purpose
28. Lesson 1
Lessons
Lesson 2 Lesson 3 Lesson 4
Simplicity is the best way to go when considering the user experience and the usability of your
website.
• Colour
• Type
• Imagery
Internet
World Wide Web
Principles of …
Quizzes Tasks Rules
2. Simplicity
Navigation is the wayfinding system used on websites where visitors interact and find what they
are looking for. Website navigation is key to retaining visitors. If the website’s navigation is
confusing visitors will give up and find what they need elsewhere. Keeping navigation simple,
intuitive and consistent on every page is key.
3. Navigation
29. Lesson 1
Lessons
Lesson 2 Lesson 3 Lesson 4
The F- based pattern is the most common way visitors scan text on a website. Eye tracking
studies have found that most of what people see is in the top and left area of the screen. The F’
shaped layout mimics our natural pattern of reading in the West (left to right and top to
bottom). An effective designed website will work with a reader’s natural pattern of scanning the
page.
Internet
World Wide Web
Principles of …
Quizzes Tasks Rules
4. F-SHAPED PATTERN READING
Visual hierarchy is the arrangement of elements in order of importance. This is done either by
size, colour, imagery, contrast, typographically, whitespace, texture and style. One of the most
important functions of visual hierarchy is to establish a focal point; this shows visitors where the
most important information is.
5. VISUAL HIERARCHY
30. Lesson 1
Lessons
Lesson 2 Lesson 3 Lesson 4
An effective web design has both great design and great content. Using compelling language
great content can attract and influence visitors by converting them into customers.
Internet
World Wide Web
Principles of …
Quizzes Tasks Rules
6. CONTENT
Grids help to structure your design and keep your content organized. The grid helps to align
elements on the page and keep it clean. The grid based layout arranges content into a clean rigid
grid structure with columns, sections that line up and feel balanced and impose order and
results in an aesthetically pleasing website.
7. GRID BASED LAYOUT
31. Lesson 1
Lessons
Lesson 2 Lesson 3 Lesson 4
Waiting for a website to load will lose of visitors. Nearly half of web visitors expect a site to load
in 2 seconds or less and they will potentially leave a site that isn’t loaded within 3 seconds.
Optimizing image sizes will help load your site faster.
Internet
World Wide Web
Principles of …
Quizzes Tasks Rules
8. LOAD TIME
More people are using their phones or other devices to browse the web. It is important to
consider building your website with a responsive layout where your website can adjust to
different screens.
9. MOBILE FRIENDLY
