HTML CSS web engineering slides topics

 What is Internet?
◦ The Internet is essentially a global network of
computing resources.

 Email: A fast, easy, and inexpensive way to
communicate with other Internet users
around the world.
 Telnet: Allows a user to log into a remote
computer as though it were a local system.
 FTP: Allows a user to transfer virtually every
kind of file that can be stored on a computer
from one Internet-connected computer to
another….

 This stands for World Wide Web.
 A technical definition of the World Wide Web is :
◦ all the resources and users on the Internet that are using the
Hypertext Transfer Protocol (HTTP).
 A broader definition comes from the organization that
Web inventor Tim Berners-Lee helped found, the World
Wide Web Consortium (W3C):
◦ The World Wide Web is the universe of network-accessible
information, an embodiment of human knowledge.

 In simple terms, The World Wide Web is a way
of exchanging information between
computers on the Internet, tying them
together into a vast collection of interactive
multimedia resources.

 This stands for HyperText Transfer Protocol.
 This is the protocol being used to transfer
hypertext documents thats makes the World
World Wide possible.
 A standard web address such as
http://www.yahoo.com/ is called a URL and
here the prefix http indicates its protocol

 URL stands for Uniform Resource Locator, and is
used to specify addresses on the World Wide
Web.
 A URL is the fundamental network identification
for any resource connected to the web (e.g.,
hypertext pages, images, and sound files).
 A URL will have the following format:
protocol://hostname/other_information

 The protocol specifies how information from the
link is transferred.
 The protocol used for web resources is HyperText
Transfer Protocol (HTTP).
 The protocol is followed by a colon, two slashes,
and then the domain name.

l In general circles, a protocol is the set of rules governing
a conversation between people
l We have seen that the client and server carry on a
machine-to-machine conversation
l A network protocol is the set of rules governing a
conversation between a client and a server
l There are many protocols, HTTP is just one

 A Website is a collection of various pages written
in HTML with an address e.g
http://www.google.com.pk.
 This is a location on the web where people can
search on latest technologies.
◦ Similar way there are millions of websites available on
the web.
 Each page available on the Website is called a
web page and first page of any web site is called
home page for that site.

 Every Web site sits on a computer known as a Web
server.
 This server is always connected to the internet.
 Every Web server that is connected to the Internet is
given a unique address made up of a series of four
numbers between 0 and 256 separated by periods.
◦ for example, 68.178.157.132 or 68.122.35.127.
 When you register a Web address, also known as a
domain name, such as google.com.pk you have to
specify the IP address of the Web server that will host
the site.

 Web Browsers are software installed on your PC.
 To access the Web you need a web browsers,
such as Google chrome, Microsoft Internet
Explorer or Mozilla Firefox.
 Currently you must be using any sort of Web
browser while you are navigating through any
site.
 On the Web, when you navigate through pages of
information this is commonly known as browsing
or surfing.

 This stands for Simple Mail Transfer Protocol
Server.
 This takes care of delivering emails from one
server to another server.
 When you send an email to an email address,
it is delivered to its recipient by a SMTP
Server.

 This stands for Internet Service Provider.
 They are the companies who provide you
service in terms of internet connection to
connect to the internet.

 This stands for HyperText Markup Language.
 This is the language in which we write web
pages for any Website.
 This is a subset of Standard Generalized
Mark-Up Language (SGML) for electronic
publishing, the specific standard used for the
World Wide Web.

 A hyperlink or simply a link is a selectable
element in an electronic document that
serves as an access point to other electronic
resources.
 Typically, you click the hyperlink to access
the linked resource.
 Familiar hyperlinks include buttons, icons,
image maps, and clickable text links.

 DNS stands for Domain Name System.
 When someone types in your domain name,
www.example.com, your browser will ask the
Domain Name System to find the IP that hosts
your site.
 When you register your domain name, your IP
address should be put in a DNS along with your
domain name.
 Without doing it your domain name will not be
functioning properly.

 This stands for World Wide Web Consortium (‫)جماعت‬
which is an international consortium of companies
involved with the Internet and the Web.
 The W3C was founded in 1994 by Tim Berners-Lee, the
original architect of the World Wide Web.
 The organization's purpose is to develop open
standards so that the Web evolves in a single direction
rather than being splintered among competing factions.
 The W3C is the chief standards body for HTTP and
HTML.

 On the simplest level, the Web physically consists of
following components:
◦ Your personal computer - This is the PC at which you sit to see
the web.
◦ A Web browser - A software installed on your PC which helps
you to browse the Web.
◦ An internet connection - This is provided by an ISP and
connects you to the internet to reach to any Web site.
◦ A Web server - This is the computer on which a web site is
hosted.
◦ Routers & Switches - They are the combination of software and
hardware who take your request and pass to appropriate Web
server.

 The Web is known as a client-server system.
 Your computer is the client and the remote
computers that store electronic files are the
servers.

 When you enter something like
http://www.google.com, the request goes to one
of many special computers on the Internet known
as Domain Name Servers (DNS).
 All these requests are routed through various
routers and switches.
 The domain name servers keep tables of machine
names and their IP addresses, so when you type
in http://www.google.com, it gets translated into
a number, which identifies the computers that
serve the Google Web site to you.

 When you want to view any page on the Web, you
must initiate the activity by requesting a page
using your browser.
 The browser asks a domain name server to
translate the domain name you requested into an
IP address.
 The browser then sends a request to that server
for the page you want, using a standard called
Hypertext Transfer Protocol or HTTP

 The server should constantly be connected to the
Internet.ready to serve pages to visitors.
 When it receives a request, it looks for the
requested document and returns it to the Web
browser.
 When a request is made, the server usually logs
the client's IP address, the document requested,
and the date and time it was requested.
 This information varies from server to server.

 An average Web page actually requires the Web
browser to request more than one file from the
Web server and not just the HTML / XHTML page,
but also any images, style sheets, and other
resources used in the web page.
 Each of these files including the main page needs
a URL to identify each item.
 Then each item is sent by the Web server to the
Web browser and Web browser collects all this
information and displays them in the form of
Web page.

 We have seen how a Web client - server interaction happens.
We can summaries these steps as follows:
◦ A user enters a URL into a browser (for example,
http://www.google.com). This request is passed to a domain
name server.
◦ The domain name server returns an IP address for the server that
hosts the Web site (for example, 68.178.157.132).
◦ The browser requests the page from the Web server using the IP
address specified by the domain name server.
◦ The Web server returns the page to the IP address specified by the
browser requesting the page. The page may also contain links to
other files on the same server, such as images, which the browser
will also request.
◦ The browser collects all the information and displays to your
computer in the form of Web page.

 While developing a site, we should try to
make it compatible to as many browsers as
possible.

 Business is open 24x7 :
◦ This means that once you put your business onsite then your business is
open 7 days a week and 365 days a year. Even if you are in different
locations of the world then you will be able to server your customers on
24x7 Hours basis.
 Increased Customer Base:
◦ Because anyone in the world can see your web site so you will gain
customers from other states and countries while you are putting in the
same amount of effort and money.
 Tremendous Cost Saving :
◦ This is one of the biggest advantages of having a business online. You do
not need to keep a big man power and lot of resources to maintain a
business on site. There are many other cost saving opportunities while
keeping business online. Think of how many cards you mail out to let
customers know about your sale. All of that can be eliminated by putting
the sale information on your web site and inviting your customers to visit
it.

 Advertising Opportunities:
◦ Apart from saving your advertising cost you have additional
opportunities to run advertisements from other companies and
start making money. If you ever advertised in a local
newspaper, you know the costs. You are being charged per
line, per inch, and per color. On the Web, there is no limit to
how much you can put. So whenever there is new product or
service then you can advertise it in better way.
 Creates a Brand Image:
◦ Internet is a great medium through which you can create any
image of yourself you want. It is all in your hands: design a
professional web site, add helpful content, and your company
will immediately take a step up in the image it represents. No
matter how small your business is, with the right tools and a
great desire you can make it look like a corporation on the
Web.

 Customer Satisfaction:
◦ If you have a really good site online then you can give your
customer a lot of satisfaction in terms of customer care. You
can keep online help, FAQ, and other important information
which is useful for your customers. You can create online
forums for open discussion and you can conduct customer
survey to take customer feedback etc.
 Showcase your work:
◦ Whether you are a real estate agent, construction business
owner or a beauty salon specialist - you can put your work on
display when you have a web site. Anytime a potential client
wants to see your past work and projects, simply refer him or
her to your site. No need to scan and mail pictures, or bring
your client to a finished building project.

 This is not required that you should have
knowledge of all the listed skills.
 If you want to develop a simple Web site then
you would needs just few skills listed here.
 Rest of the skills are required if you want to
go for a bigger and more interactive Web site.

 Computer Operations
 Remote Access: Most of the times your Web
Server will be accessed from remote site only.
◦ You should be well aware how to connect a
computer from remote site.
◦ So at least you should have basic knowledge of
telnet utility to connect to a remote machine.
◦ There are many service providers who will provide
you control panel to manage your Web site.

 File Uploading & Downloading: As I told you most of the
times your Web Server will be on remote site.
◦ So you would need to upload and download all the files related
to your Web site.
◦ So at least you should have basic knowledge of FTP utility to
connect to a remote machine and download or upload your
files.
◦ Almost service providers give you facility to upload your files
on your Web server.
 HTML / XHTML Knowledge: These are the markup
languages which you will use to build your web site.
◦ So you should have good understanding on these languages.

 CSS Knowledge: Cascading Style Sheet
knowledge is required to achieve many
results which are not possible through HTML
or XHTML.
 PHP Script: Now a days many sites are being
developed using PHP language.
◦ This script helps you to create an interactive Web
site.

 Computer Machine
 Internet Connection
 A Web Server
 A Text Editor
 A Web Browser
 Web Authoring Tools
 Secure telnet client
 Secure FTP client

Web Development/Designing Environments
l Paid
l Dreamweaver CS6
l Microsoft .Net Studio
l Donation Based
l Eclipse (neon)
l Free
l Notepad++ (Preferable)
l Vim

 A domain name is the part of your Internet
address that comes after "www".
◦ For example, in www.google.com the domain name is
google.com.
 A domain name becomes your Business Address
so care should be taken to select a domain name.
◦ Your domain name should be easy to remember and
easy to type.

 When you plan to put a site online, this is one of
the important steps to buy a domain name.
 This is always not necessary that whatever
domain name you are looking that is available so
in that case you will have to opt for any other
good domain name.
 When you buy a domain name it is registered and
when domain names are registered they are
added to a large domain name register, and
information about your site - including your
Internet IP address is stored on a DNS server and
your contact information etc is registered with
your registrar.

 There are many different types of domain extensions
you can choose for your domain name.
 This depends on your business nature.
 If you are going to register a domain name for
educational site purpose then you can go for .edu
extension.
 But there is no hard and fast rule to go for any
extension.
 Most commonly used is .com

 .com - Stands for company/commercial, but it can be used for any web
site.
 .net - Stands for network and is usually used for a network of sites.
 .org - Stands for organization and is supposed to be for non-profit
bodies.
 .us, .pk - They are based on your country names so that you can go for
country specific domain extensions.
 .biz - A newer extension on the Internet and can be used to indicate that
this site is purely related to business.
 .info - Stands for information. This domain name extension can be very
useful, and as a new comer it's doing well.
 .tv - Stands for Television and are more appropriate for TV channel
sites.

 This is very important step to name your web
site.
 As I have told you that your domain name will be
your business address so very much care should
be taken while choosing a domain name.
 Many people think it is important to have
keywords in a domain.
 Keywords in the domain name are usually
important, but it usually can be done while
keeping the domain name short, memorable, and
free of hyphens.

 Using keywords in your domain name give you a
strong competitive advantage over your
competitors.
 Having your keywords in your domain name can
increase click through rates on search engine
listings and paid ads as well as make it easier to
use your keywords in keyword rich descriptive
inbound links.
 Avoid buying long, and confusing domain names.

 In the past the domain name itself was a
significant ranking factor but now search engines
have advanced it is not very significant factor
anymore.
 Keep two to three words in your domain name it
will be more memorable.
 Some of the most memorable web sites do a
great job of branding by creating their own word.
 Few examples are eBay, Yahoo!, Wikipedia,
Google...

 You can divide your domain into many sub domains based on your
requirement.
 If you are doing multiple business using the same domain then its worth
to use sub domain for every business.
 Following are examples of sub domains
 You must have seen http://www.google.com as a main domain but
google has created many subdomains based on their business.
 Few of them are as follows:
◦ http://adwords.google.com - This sub domain is being used for Google
Adwords.
◦ http://groups.google.com - This sub domain is being used for Google Groups.
◦ http://images.google.com - This sub domain is being used for Google Images.

 This totally depends on your business and nature of your web site.
 Here is a list of pages that you might want to create for your web site.
◦ Attractive Home Page : Always required for every web site.
◦ List of Product and Services along with complete detail.
◦ Complete Pricing Information.
◦ About your company and nature of business including your achievements.
◦ About your staff and if possible their experience.
◦ Your complete contact information.
◦ Frequently Asked Questions.
◦ Success Stories and Feedback from Customers.

 You should not simply start developing your web site otherwise
you will end up with a bogus web site.
 First you should put a complete plan and your design on a paper
or in an electronic document.
 Here are few points which can help you to design a better web
site:
◦ Consider what technology you are going to use to develop your web
site.
 Adopt one which gives you better flexibility and rapid development
opportunities and then design it accordingly.
◦ Design a generic framework so that in future you can enhance and
modify your web site by putting minimal effort.
◦ Design a site to keep required performance in your mind.
 If you are designing database driven web site then lot of effort has to put to
design good database schemas.

◦ Keep your design as simple as possible so that any new developer
should become familiar with your design as soon as possible.
◦ Identify repeatable components of your web site and then keep
them separate and try to use them wherever possible.
◦ Identify the nature and qualification of your site visitors and give
importance to look and feel accordingly.
◦ Think in a way, if you are a site visitor then what and how would
you like to see this web site? If same site belongs to somebody
else then would you like to spend some time on such site ?
◦ Once again....your presentation should be unique and attractive
otherwise there are lot of web sites available on the Internet and it
will be difficult for your to retain a site visitor for more than a
minute.

 Many statistics shows that if you are able to
retain your site visitors for a long time then
they do bigger shopping and come again and
again.
 So make sure you have done something for
your site visitors to do on your web site.
 Though offering a lot of quality information
can also serve as a great visitor magnet and
will generate more repeat visits.

 Here is a list of interactive tools you can add to
your web site completely FREE and without any
programming skills:
◦ Poll
◦ Forum
◦ Guest book
◦ Chat room
◦ Tell-a-friend about this site

◦ Feedback form
◦ Live customer service
◦ Daily joke or daily cartoon
◦ Daily news headlines
◦ Site Search Engine
◦ Frequently Asked Questions

How to code your web site ?
Or Go to our site
www.4gpackages.com

HTML CSS web engineering slides topics

More Related Content

What's hot

Similar to HTML CSS web engineering slides topics

More from Salman Khan

Recently uploaded

HTML CSS web engineering slides topics