Scribd
Upload
12 views27 pages

Internet Tech

The document provides an overview of various HTML tags that fall under the HEAD tag, including Title, Meta, Script, Non-Script, and Base tags, explaining their functions and usage. It also discusses the importance of hyperlinks, website design, content, navigation, SEO, and the differences between TCP and UDP protocols. Additionally, it contrasts HTML and XHTML, highlighting their characteristics and applications.

Uploaded by

Yash agarwal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views27 pages

Internet Tech

The document provides an overview of various HTML tags that fall under the HEAD tag, including Title, Meta, Script, Non-Script, and Base tags, explaining their functions and usage. It also discusses the importance of hyperlinks, website design, content, navigation, SEO, and the differences between TCP and UDP protocols. Additionally, it contrasts HTML and XHTML, highlighting their characteristics and applications.

Uploaded by

Yash agarwal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

Ans 1: these are the list of tag which comes under HEAD tag

which will be explain in present tutorial individually.

 Title tag
 Meta tag
 Script tag
 Non Script tag
 Base tag

Title Tag:
The <title> tag defines the title of the document. Title of
document defines the title in browser toolbar, provides the
title to the page when it loads or when you bookmark any
particular page title appears, following example will clear this
theory.

Meta Tag:
The <meta> tag generally requires the content attributes and
name to be working together to present your web page in a
better way. Meta tags are used to pass the information or
technical data for search engines that will not be seen by the
end user. These invisible modules provide a flag for search
engines to follow search technique or investigate and will then
present that data.

The<meta> tag provides metadata about the HTML document.


Metadata will not be displayed on the page, it will be only
readable by emulator or machine. Page description, keywords,
author of the document, last modified and other metadata is
few terms, which is specified by meta elements. The metadata
can be used by browsers, search engines (keywords), or other
web services.

Script Tag:
This tag is used to include client side script in HTML. Basically script (clients script) is a program that
may bunch up an HTML document .The script runs when it loads on client machine like emulator or
browsers. HTML's support for scripts is independent of the scripting language.
The script element either contains scripting statements (JavaScript/VBscript/CSSscript) or it links to
another script by src attribute. The purpose for adding JavaScript in HTML is image manipulation,
form validation, and dynamic changes of content. Listed example will shows you the correct way of
defining the script tag and a proper script.

Non Script Tag:


There is one more tag falls under head tag like script tag: The NOSCRIPT tag, it defines the content
that is displayed when a browser arise an issue to project preceding script. The NOSCRIPT tag makes
JavaScript and other browser-side scripting languages accessible to user-agents that cannot load
scripts, or have scripting turned off.

For example, If you Google chrome are not supporting script to run. Then it will show you output to
your screen.

Base Element:
the <base> tag specifies the base URL/target for all relative URLs in a document. It provides a method
for defining the base URL for all links and form submissions on a page. It also provides a common
target (in the form of a named window) for all of these links or form submissions. The <base> tag goes
inside the <head> element. Following script will clear the concept

Hyperlink
Updated: 06/16/2017 by Computer Hope

Alternatively referred to as a link,


a hyperlink is an icon, graphic, or text in a document that links to another
file or object. The World Wide Web is comprised of hyperlinks linking trillions
of pages and files to one another. For example, Computer Hope home
page is a hyperlink to the main page of Computer Hope.

In computing, a hyperlink, or simply a link, is a reference to data that the reader can directly follow
either by clicking, tapping, or hovering. A hyperlink points to a whole document or to a specific
element within a document. Hypertext is text with hyperlinks. The text that is linked from is called
anchor text.
The <a> tag defines a hyperlink, which is used to link from one page to another.
The most important attribute of the <a> element is the href attribute, which indicates the link's
destination.

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue


A visited link is underlined and purple
An active link is underlined and red
Adding an image is relatively easy; just follow these steps:

Identify the image you want to use.


Be sure you have permission to use the image on your site.
Modify the image if necessary.
It’s best to resize your images before you use them on the web. You can use commercial
image-manipulation software or free programs such as IrfanView and Gimp.
Choose your image type.
If your image is in a format other than web-friendly .jpg, .gif, or .png, use a tool like IrfanView or Gimp
to change it to one of these formats.
Put your image in the right place.
Put your image file in the same directory as the HTML file. That way, when you post your page to the
server, you can move the image as well.
Build your page as normal.
The image will be placed with a tag embedded into the body.
Use the <img> tag to indicate the image.
Embed this tag inside a <p></p> (paragraph) or <div></div> (division) pair so that the page validates
correctly.
Use the src attribute to indicate the file containing the image.
If the image file is in the same directory as the web page, all you need is the name of the image. If the
image file is elsewhere on the Internet, you can use a complete URL.
Include an alt attribute that describes the image.
An alt tag is important for visitors who cannot see your image — users with visual impairments,
people who have turned off images to increase browsing speed, and search engine bots, which can’t
see the images but read alt tags.
End the image tag with a /.
The img tag is a special one-shot tag that doesn’t require (or allow) an end tag. The slash character at
the end of the tag indicates this.
7 Key Secrets of a Successful Website

WEDNESDAY, SEPTEMBER 28, 2011 WEB DESIGN & UX


Key Success

This is a guest article contributed by Jefferson Hawkins, aimed at those looking for a successful
website.

Many successful companies, it seems, can create anything – except an effective website. I am always
amazed that so many top professional firms – in manufacturing, industry, engineering, sales, and
many other areas – have websites that are poorly designed, hard to navigate, impractical, and
impossible for search engines to find. The same managers, who demand high performance, efficient
design, practicality, and minimal waste, don’t seem to demand the same things from their website.
Here are a few tips:

1. Appearances matter

Brilliant, award-winning design is not the most important thing in a website, but if you fall below a
certain standard of design quality, your potential customers won’t take you seriously. If your website
looks like it was put together by someone’s nephew in his basement, people will assume you’re a
small, unprofessional, fly-by-night operation – no matter how big and successful you really are.

A well-designed website instantly communicates that you are big, stable and successful, and that you
care about quality. And even if you are two guys working out of a garage, you can look as big, stable
and professional as any competitor. Good design doesn’t cost a lot – it just requires dealing with a
designer who knows what they are doing.

2. Content, content, content

Content

Give your potential customers the information they want and need. That requires knowing your
customer. Talk to them. Talk to your sales people. Find out what are the essential things your
customers need to know. Understand how purchasing decisions are made.

Your home page should establish, right away, who you are, what business you are in, what products
or services you provide, and what sets you apart from your competitors. Anyone should be able to
glance at your home page and understand all of these things right away. There should be no question
as to what you do and the benefit you provide.

And keep the text customer oriented. Talk about their problems, their needs, their concerns, and how
you solve them. Forget that company mission statement or the glowing letter from the president.
They don’t care. They want to know what can you do for me?

Have reasons for customers to return to your site. Offer such things as product information,
specifications and operating manuals, professional tips, recipes, and tutorials. Keep this content
ungated (doesn’t require registration). Convert your PDF files to web pages and make the PDF
available as a free download at the bottom of the web page. Give your customers and potential
customers lots of reasons to return to your site again and again.

Photographs and videos are a great way to show your products and demonstrate them in action.

3. Navigation

Navigation

Face it, your business is complex. You may have an extensive product line, many options, many
different types of customers or industries that you serve. Effectively directing the customer and
channeling them to the products and services they need is vital. Before you start or re-do your
website, work out your navigation in advance. Customers should be able to glance at your home page
and see exactly where they need to go.

Consider offering a download of your complete catalog, and making the download button visible on
your home page – “above the fold.” Even better, consider making your catalog available as part of the
website itself, so customers can search it online.

4. Make sure people can find you

SEO

Search Engine Optimization (SEO) is a big subject. Ideally, you should have an SEO specialist work over
your site and make sure that search engines can find it. But even if you can’t afford that right now,
there are some simple things you can do to make your site visible.

One of the most common mistakes is to embed key text and information in graphics or Flash
animation. Search engines cannot read text that is embedded into pictures. You can test this by
attempting to select and copy the text on a website. If you can’t select and copy the text, then search
engines can’t read it.

Include in your informational text key words that people normally use when searching for your type
of product or service. Use the most obvious ones, and any common variations.

Take the time to learn and use title, description and keyword metatags. Or hire someone to handle
these SEO basics for you.

5. Keep it timely

There is nothing worse than an out-of-date website to communicate to your customers that you don’t
care. Outdated offers, announcements for last year’s trade shows, out-of-date staff lists – it all
detracts from your image as an efficient company that will provide great service. Make sure your
website has a user-friendly content management system so you can update frequently and easily.

6. Capture and care for customer leads

Not everyone who visits your website is ready to buy. Provide reasons for them to contact you and
give you their name and e-mail. Include contact forms and “get a free estimate” forms. Offer a
newsletter with industry information, product announcements and tips.

Include “calls to action” such as “Call now to order,” “Click here for a free quote,” and “Download our
product catalog.” A “live chat” or “live assistance” function can be a great lead generator.

7. Use Social Media

Facebook

Facebook and Twitter are not just for teenage girls any more. In fact, more and more businesses are
using these to build an interested online community. Consider starting a blog where you post relevant
articles about your industry, your products, new developments, and upcoming events. Providing a
forum where your customers can interact with you and other customers and share knowledge helps
to build your company’s brand and your positioning as an industry leader.

Post press releases on your website and/or blog, then link to them on Facebook, LinkedIn, and Twitter.
Make sure your website includes “share” buttons so that visitors can easily share your content.

There are many other things you can do to make your website more effective, and truly reflect the
quality and professionalism of your products and services. Take the time and care to make it bright,
attractive, informative, easy to navigate, and easy to find.

UDP
TCP
Acronym for Transmission Control Protocol User Datagram
Protocol or
Universal
Datagram
Protocol

Connection TCP is a connection-oriented UDP is a


protocol. connectionless
protocol.
UDP
TCP
Function As a message makes its way UDP is also a
across the internet from one protocol used in
computer to another. This is message
connection based. transport or
transfer. This is
not connection
based which
means that one
program can
send a load of
packets to
another and that
would be the end
of the
relationship.

Usage TCP is suited for applications that UDP is suitable


require high reliability, and for applications
transmission time is relatively that need fast,
less critical. efficient
transmission,
such as games.
UDP's stateless
nature is also
useful for servers
that answer
small queries
from huge
numbers of
clients.

Use by other protocols HTTP, HTTPs, FTP, SMTP, DNS, DHCP,


Telnet TFTP, SNMP,
RIP, VOIP.

Ordering of data packets TCP rearranges data packets in UDP has no


the order specified. inherent order as
all packets are
independent of
each other. If
ordering is
required, it has
to be managed
by the
application layer.

Speed of transfer The speed for TCP is slower than UDP is faster
UDP
TCP

UDP. because error


recovery is not
attempted. It is a
"best effort"
protocol.

Reliability There is absolute guarantee that There is no


the data transferred remains guarantee that
intact and arrives in the same the messages or
order in which it was sent. packets sent
would reach at
all.

Header Size TCP header size is 20 bytes UDP Header


size is 8 bytes.

Streaming of data Data is read as a byte stream, no Packets are sent


distinguishing indications are individually and
transmitted to signal message are checked for
(segment) boundaries. integrity only if
they arrive.
Packets have
definite
boundaries
which are
honored upon
receipt, meaning
a read operation
at the receiver
socket will yield
an entire
message as it
was originally
sent.

Weight TCP is heavy-weight. TCP UDP is


requires three packets to set up a lightweight.
socket connection, before any There is no
user data can be sent. TCP ordering of
handles reliability and congestion messages, no
control. tracking
connections, etc.
It is a small
transport layer
designed on top
of IP.
UDP
TCP
Data Flow Control TCP does Flow Control. TCP UDP does not
requires three packets to set up a have an option
socket connection, before any for flow control
user data can be sent. TCP
handles reliability and congestion
control.

Error Checking TCP does error checking and UDP does error
error recovery. Erroneous checking but
packets are retransmitted from simply discards
the source to the destination. erroneous
packets. Error
recovery is not
attempted.

Fields 1. Sequence Number, 2. AcK 1. Length, 2.


number, 3. Data offset, 4. Source port, 3.
Reserved, 5. Control bit, 6. Destination port,
Window, 7. Urgent Pointer 8. 4. Check Sum
Options, 9. Padding, 10. Check
Sum, 11. Source port, 12.
Destination port

Acknowledgement Acknowledgement segments No


Acknowledgment

Handshake SYN, SYN-ACK, ACK No handshake


(connectionless
protocol)

HTML XHTML

Introduction HTML or HyperText Markup XHTML (Extensible HyperText


(from Wikipedia) Language is the main markup Markup Language) is a family of
language for creating web pages XML markup languages that
and other information that can be mirror or extend versions of the
displayed in a web browser. widely used Hypertext Markup
Language (HTML), the language
in which web pages are written.

Filename .html, .htm .xhtml, .xht, .xml, .html, .htm


extension

Internet media text/html application/xhtml+xml


type
HTML XHTML

Developed by W3C & WHATWG World Wide Web Consortium

Type of format Document file format Markup language

Extended from SGML XML, HTML

Stands for HyperText Markup Language Extensible HyperText Markup


Language

Application Application of Standard Application of XML


Generalized Markup Language
(SGML).

Function Web pages are written in HTML. Extended version of HTML that is
stricter and XML-based.

Nature Flexible framework requiring Restrictive subset of XML and


lenient HTML specific parser. needs to be parsed with standard
XML parsers.

Origin Proposed by Tim Berners-Lee in World Wide Web Consortium


1987. Recommendation in 2000.

Versions HTML 2, HTML 3.2, HTML 4.0, XHTML 1, XHTML 1.1, XHTML 2,
HTML 5. XHTML 5.

Creating a table
 Use the HTML <table> element to define a table
 Use the HTML <tr> element to define a table row
 Use the HTML <td> element to define a table data
 Use the HTML <th> element to define a table heading
 Use the HTML <caption> element to define a table caption
 Use the CSS border property to define a border
 Use the CSS border-collapse property to collapse cell borders
 Use the CSS padding property to add padding to cells
 Use the CSS text-align property to align cell text
 Use the CSS border-spacing property to set the spacing between
cells
 Use the colspan attribute to make a cell span many columns
 Use the rowspan attribute to make a cell span many rows
 Use the id attribute to uniquely define one table

A "proxy server" is any server that acts as a proxy for some other server or group
of servers. A proxy is an agent (in law, a person, but in computer systems
typically a service or process) that accepts transactions from clients, examines
them, and then sends them on to other servers to be processed (possibly after
modifying them, and often by choosing which of several servers based on the
characteristics of the transaction).

A Web server is a program that uses HTTP (Hypertext Transfer Protocol) to


serve the files that form Web pages to users, in response to their requests,
which are forwarded by their computers' HTTP clients. Dedicated computers
and appliances may be referred to as Web servers as well.The web servers are
the core of the networking. It is between the client and the web server that there
is a proxy server. The web server function is to serve static content to the web
browser of the client by loading the files and documents from disk and serve it
across with network to the user’s web browser. There is exchange is mediated by
the browser as well as web server which do the basic talking through using the
HTTP.
1. SQL INJECTIONS
SQL injection is a type of web application security vulnerability in which an
attacker attempts to use application code to access or corrupt database content.
If successful, this allows the attacker to create, read, update, alter, or delete
data stored in the back-end database. SQL injection is one of the most prevalent
types of web application security vulnerabilities.

2. CROSS SITE SCRIPTING (XSS)


Cross-site scripting (XSS) targets an application's users by injecting code, usually
a client-side script such as JavaScript, into a web application's output. The
concept of XSS is to manipulate client-side scripts of a web application to
execute in the manner desired by the attacker. XSS allows attackers to execute
scripts in the victim's browser which can hijack user sessions, deface websites, or
redirect the user to malicious sites.

3. BROKEN AUTHENTICATION & SESSION MANAGEMENT


Broken authentication and session management encompass several security
issues, all of them having to do with maintaining the identity of a user. If
authentication credentials and session identifiers are not protected at all times
an attacker can hijack an active session and assume the identity of a user.

4. INSECURE DIRECT OBJECT REFERENCES


Insecure direct object reference is when a web application exposes a reference to
an internal implementation object. Internal implementation objects include files,
database records, directories, and database keys. When an application exposes
a reference to one of these objects in a URL hackers can manipulate it to gain
access to a user's personal data.

5. SECURITY MISCONFIGURATION
Security misconfiguration encompasses several types of vulnerabilities all
centered on a lack of maintenance or a lack of attention to the web application
configuration. A secure configuration must be defined and deployed for the
application, frameworks, application server, web server, database server, and
platform. Security misconfiguration gives hackers access to private data or
features and can result in a complete system compromise.

6. CROSS-SITE REQUEST FORGERY (CSRF)


Cross-Site Request Forgery (CSRF) is a malicious attack where a user is tricked
into performing an action he or she didn't intend to do. A third-party website
will send a request to a web application that a user is already authenticated
against (e.g. their bank). The attacker can then access functionality via the
victim's already authenticated browser. Targets include web applications like
social media, in browser email clients, online banking, and web interfaces for
network devices.

Don't get caught with your guard down. Practice safe website security measures
and always be ready to protect yourself, and your company's future, from an
attack that you might never recover from. The best way to tell if your website
or server is vulnerable is to conduct regular security audits.

1. Not Knowing Why

This is the number one problem, all right. I am amazed how many websites are
built simply because some executive told somebody to do it without telling
them what the site should achieve. And no, it is not an acceptable reason
that "everybody else is doing it."
Granted, these days, you need a website simply to be considered a
professionally run organization (not being on the web is like not having a fax
machine: people think you are a fly-by-night). Thus, it is OK to make a
"business-card site" with a small amount of corporate image building,
directions to your various facilities, and the annual report and other investor
information. However, doing so is not the most effective use of the web, and a
site along these lines should only be built as a result of an explicit decision not
to invest in active use of the web for business.
Most companies should start their web design project by finding out ways in
which they can provide true customer value on their site. Give users benefits
from spending time on your site, allow them to do business with you, and their
money will follow.

2. Designing for Your Own VPs

Internally-focused sites cause companies to end up with homepages full of


mission statements, photos of the CEO, and corporate history (all of which do
fit on an "about this company" page; just not on the homepage). Remember
that your company is not the center of the universe for your customers. The
site should be designed with customers' needs in mind and not to promote
grandiose ideas of self-importance.Do not build a site that your top
executives will love: they are not the target audience.

3. Letting the Site Structure Mirror Your Org Chart

Users should not have to care how your company is organized, so they should
not be able to deduce your organizational structure from the structure of your
website. Admittedly, it is easiest to distribute responsibility for the site to
divisions and departments according to already established chains of
command and budget categories, but doing so results in an internally centered
site rather than a customer-focused site.
The site structure should be determined by the tasks users want to perform on
your site, even if that means having a single page for information from two very
different departments. It is often necessary to distribute information from a
single department across two or more parts of the site, and many subsites will
have to be managed in collaboration between multiple departments.
A classic sign of a mismanaged website is when the homepage has a button
for each of the senior vice presidents in the company. Remember, you don't
design for your VPs, so it will be quite common that you can't tell them what
"their" button is on the homepage.

4. Outsourcing to Multiple Agencies

If you outsource every new web project to a new agency, your site will end up
looking like one of those quilts assembled from patches by each of the
participants in a protest march. The problem with using multiple agencies is
that each of them want to put their own stamp on the site: both because they
have different design philosophies and because they will want to use you as a
reference account. It is no fun to say "we designed such-and-such pages" if all
the pages on the site look the same.
Users get very annoyed when they move between pages on a site and find
drastically varying designs at every turn. Consistency is the key to
usable interaction design: when all interface elements look and function the
same, users feel more confident using the site because they can transfer their
learning from one subsite to the next rather than having to learn everything
over again for each new page.
The best way to ensure consistency is to have a single department that is
responsible for the design of the entire site. If this cannot be done, at least
have a central group that oversees all design work and that is chartered to
enforce a single styleguide. Even if the central group does not actually design
any pages themselves, considerable consistency can be achieved if the
various departments can turn to a single source of design advice. Even better:
have the central design group maintain the templates and deliver updated and
revised graphics as needed.

5. Forgetting to Budget for Maintenance

As a rule of thumb, the annual maintenance budget for a website should be


about the same as the initial cost of building the site, with 50% as an absolute
minimum. Obviously, ongoing costs are even higher for news sites and other
projects that depend on daily or real-time updates. If you simply spend the
money to build a glamorous site but do not keep it up to date, your investment
will very rapidly turn out to be wasted.
The web currently changes so rapidly that a major redesign is needed at least
once per year simply to avoid a completely outdated look and to accommodate
changing user expectations. Additional maintenance is needed throughout the
year to bring fresh content online, reorganize and revise old pages, and
avoid linkrot.
If you have established a design styleguide and a set of page templates in
order to avoid the inconsistencies mentioned under Mistake 4, you also have
to budget for maintenance of these design resources. If the styleguide and
templates do not evolve with changing needs, you will rapidly see design
entropy set in and the site will fall apart. The most common example is the
need for new stock graphics, new headerbars, new navigation buttons, or new
icons. If you don't have an art director on standby for this type of requests, then
the page developer who needed the new graphic will outsource it and the site's
look-and-feel will start to diverge.

6. Treating the Web as a Secondary Medium

One rarely gets a gourmet meal by repurposing yesterday's leftovers. Similarly,


even if you repurpose veryvaluable non-web content, you will at best get
a slightly valuable website. The web is a new medium. It's different
from television, it's different from printed newspapers, and it's different from
glossy brochures, so you cannot create a good website out of content
optimized for any of these older media. The old analogy still holds: movies are
not made by filming a play and putting the camera in the best seat of the
theater.
The only way to get great web content is to have your staff develop the
content for the web first. Then, if you still have a need for printed collateral,
transfer the text and images to a desktop publishing application and massage
it into a form that is suited for print. Of course, your print materials will suffer
from this procedure, so if you want great web content and great brochures, you
will have to have two teams develop two sets of content.
Content creators have been trained to develop linear content for traditional
media: they have spent their entire careers doing so. They have to consciously
push themselves to work differently than their natural approach to content, so
unless you force your content developers to produce their material specifically
for the web, you will end up with substandard web content.

7. Wasting Linking Opportunities

The web is a linking medium: the hypertext links are what ties it together and
allow users to discover new and useful sites. Most companies have recognized
this phenomenon to the extent that they religiously include their URLs in all
advertising, TV commercials, press releases, and even in the products
themselves (ever bought underwear with a URL woven into it?). Unfortunately,
most of these URLs are overly generic and do not provide users with any
payoff that is related to the context in which the user found the URL. Do not
link to your homepage in your ads. If a potential customer gets interested in
a new product or a special offer, you should not force the poor schmoe to find
out how to navigate the site from the homepage to the product page. Instead,
link directly to the product page from the ad. Also, seed press releases with
specific URLs that support your message: reporters may follow these links for
additional detail and online publications may use specific links instead of
generic ones to better serve their users.
If you are running a campaign with a certain theme, have it include a URL to a
page that follows up on that theme. The payoff page should not be a copy of
the ad (the customer presumably already read the ad before going to the web),
though a link to an online version of the ad might be appropriate to help users
who go to the page without having seen the ad. Instead, use each medium for
what it's good at. For example, a game company could use TV commercials to
make people think that a game looks good and use the web to allow them to
play a simplified version of the game.

8. Treating Internet and Intranet Sites the Same

Internal intranet websites need to be managed very differently from public


internet sites. The key difference is that each company only has a single
intranet and thus can manage it to a much greater degree of consistency and
predictability than we can hope for on the wild web for many years. (This is
why there are hundreds of separate usability guidelines for intranet design.)
Also, employees use the intranet for corporate productivity, meaning that any
waste of users' time is a direct hit to the bottom line. I am appalled when I hear
of intranet managers who put advertising on their site to pay for their
equipment costs. If, for example, the value of an average employee's time is
$1 per minute and users spend 3 seconds more per page because of the ads,
then each ad costs the company 5 cents in lost employee productivity. Even if
the MIS department makes 2 cents per ad (a typical CPM of $20), the net loss
to the company is 3 cents.
9. Confusing Market Research and Usability Engineering

Thankfully, many sites have embraced the value of customer data for design,
but unfortunately many of them rely solely on traditional market research
like focus groups. Most of these methods relate to creating desire for a product
and getting it sold and do not provide detailed information about how people
operate the product. A web design is an interactive product, and therefore
usability engineering methods are necessary to study what happens during the
user's interaction with the site.
Users are not designers: no matter how many focus groups you run, they
cannot tell you how to design your navigation. Focus groups are great for
getting information about users' current concerns and areas where they would
like help, but they will rarely teach you how to reinvent the fundamental way
you do business. Listening carefully to customers will often reveal frustrations
that can turn into opportunities for improvement, but once you have an idea for
an improvement, you must create a prototype design and try it out with users in
a usability test to see whether it really works for them.
There are endless stories of customers who say in focus groups that they
would love a certain feature, but who never use it once it is launched because
it is too cumbersome, too expensive, or doesn't really meet their needs in real
use. The point is that market research forms the starting point but has to be
supplemented with usability engineering if you want a design that works when
people try to use it.
You may commission a traditional market research firm to question thousands
of customers to measure whether they like your website more or less than your
competition. Once you know that your site scores, say, 5.6 and your worst
competitor scores 5.9, you may know that you need to improve, but you will not
know how to improve. Specific insights into the detailed design of your site and
the parts that must change because they are confusing, slow users down, or
do not match the way users want to work can be derived from watching 4 or 5
users as they actually use your site to perform real tasks. A day or two in
theusability lab and you will have a long list of changes that will improve your
design.
It is less common to find sites that only do user testing and never conduct any
market research, but that would be a mistake too.

10. Underestimating the Strategic Impact of the Web

It is a huge mistake to treat the web as if it were an online brochure and


manage it out of the marcom department. The web should be considered one
of the most important determinants for the way you will do business in the
future.
Ask your CTO and head of marketing what strategic thoughts they have
relating to terms like "disintermediation", "virtual project
teams", and "mobile transactions." If they don't have any thoughts, they had
better start thinking now - before it's too late. The web enables completely new
ways of doing business such as true globalization (for example,
"follow-the-sun", where projects are passed on to teams as the globe turns). If
you don't grasp these new business opportunities you will be toast in a few
years.
The two classic errors in predicting the future of a technology shift are to
overestimate its short-term impact and underestimate its long-term impact.
The web has been hyped to such an extent that people overestimate what it
can do the next year or two: most websites are not going to turn a profit any
time soon. But please don't underestimate what will happen once we reach the
goal of everyone, everywhere;connected. The impact of networks grows by
at least the square of the number of connections, and the true value of the web
will be only be seen after extensive business process reengineering.

1. Not Knowing Why

This is the number one problem, all right. I am amazed how many websites are
built simply because some executive told somebody to do it without telling
them what the site should achieve. And no, it is not an acceptable reason
that "everybody else is doing it."
Granted, these days, you need a website simply to be considered a
professionally run organization (not being on the web is like not having a fax
machine: people think you are a fly-by-night). Thus, it is OK to make a
"business-card site" with a small amount of corporate image building,
directions to your various facilities, and the annual report and other investor
information. However, doing so is not the most effective use of the web, and a
site along these lines should only be built as a result of an explicit decision not
to invest in active use of the web for business.
Most companies should start their web design project by finding out ways in
which they can provide true customer value on their site. Give users benefits
from spending time on your site, allow them to do business with you, and their
money will follow.

2. Designing for Your Own VPs

Internally-focused sites cause companies to end up with homepages full of


mission statements, photos of the CEO, and corporate history (all of which do
fit on an "about this company" page; just not on the homepage). Remember
that your company is not the center of the universe for your customers. The
site should be designed with customers' needs in mind and not to promote
grandiose ideas of self-importance.Do not build a site that your top
executives will love: they are not the target audience.

3. Letting the Site Structure Mirror Your Org Chart

Users should not have to care how your company is organized, so they should
not be able to deduce your organizational structure from the structure of your
website. Admittedly, it is easiest to distribute responsibility for the site to
divisions and departments according to already established chains of
command and budget categories, but doing so results in an internally centered
site rather than a customer-focused site.
The site structure should be determined by the tasks users want to perform on
your site, even if that means having a single page for information from two very
different departments. It is often necessary to distribute information from a
single department across two or more parts of the site, and many subsites will
have to be managed in collaboration between multiple departments.
A classic sign of a mismanaged website is when the homepage has a button
for each of the senior vice presidents in the company. Remember, you don't
design for your VPs, so it will be quite common that you can't tell them what
"their" button is on the homepage.

4. Outsourcing to Multiple Agencies

If you outsource every new web project to a new agency, your site will end up
looking like one of those quilts assembled from patches by each of the
participants in a protest march. The problem with using multiple agencies is
that each of them want to put their own stamp on the site: both because they
have different design philosophies and because they will want to use you as a
reference account. It is no fun to say "we designed such-and-such pages" if all
the pages on the site look the same.
Users get very annoyed when they move between pages on a site and find
drastically varying designs at every turn. Consistency is the key to
usable interaction design: when all interface elements look and function the
same, users feel more confident using the site because they can transfer their
learning from one subsite to the next rather than having to learn everything
over again for each new page.
The best way to ensure consistency is to have a single department that is
responsible for the design of the entire site. If this cannot be done, at least
have a central group that oversees all design work and that is chartered to
enforce a single styleguide. Even if the central group does not actually design
any pages themselves, considerable consistency can be achieved if the
various departments can turn to a single source of design advice. Even better:
have the central design group maintain the templates and deliver updated and
revised graphics as needed.

5. Forgetting to Budget for Maintenance

As a rule of thumb, the annual maintenance budget for a website should be


about the same as the initial cost of building the site, with 50% as an absolute
minimum. Obviously, ongoing costs are even higher for news sites and other
projects that depend on daily or real-time updates. If you simply spend the
money to build a glamorous site but do not keep it up to date, your investment
will very rapidly turn out to be wasted.
The web currently changes so rapidly that a major redesign is needed at least
once per year simply to avoid a completely outdated look and to accommodate
changing user expectations. Additional maintenance is needed throughout the
year to bring fresh content online, reorganize and revise old pages, and
avoid linkrot.
If you have established a design styleguide and a set of page templates in
order to avoid the inconsistencies mentioned under Mistake 4, you also have
to budget for maintenance of these design resources. If the styleguide and
templates do not evolve with changing needs, you will rapidly see design
entropy set in and the site will fall apart. The most common example is the
need for new stock graphics, new headerbars, new navigation buttons, or new
icons. If you don't have an art director on standby for this type of requests, then
the page developer who needed the new graphic will outsource it and the site's
look-and-feel will start to diverge.

6. Treating the Web as a Secondary Medium

One rarely gets a gourmet meal by repurposing yesterday's leftovers. Similarly,


even if you repurpose veryvaluable non-web content, you will at best get
a slightly valuable website. The web is a new medium. It's different
from television, it's different from printed newspapers, and it's different from
glossy brochures, so you cannot create a good website out of content
optimized for any of these older media. The old analogy still holds: movies are
not made by filming a play and putting the camera in the best seat of the
theater.
The only way to get great web content is to have your staff develop the
content for the web first. Then, if you still have a need for printed collateral,
transfer the text and images to a desktop publishing application and massage
it into a form that is suited for print. Of course, your print materials will suffer
from this procedure, so if you want great web content and great brochures, you
will have to have two teams develop two sets of content.
Content creators have been trained to develop linear content for traditional
media: they have spent their entire careers doing so. They have to consciously
push themselves to work differently than their natural approach to content, so
unless you force your content developers to produce their material specifically
for the web, you will end up with substandard web content.

7. Wasting Linking Opportunities

The web is a linking medium: the hypertext links are what ties it together and
allow users to discover new and useful sites. Most companies have recognized
this phenomenon to the extent that they religiously include their URLs in all
advertising, TV commercials, press releases, and even in the products
themselves (ever bought underwear with a URL woven into it?). Unfortunately,
most of these URLs are overly generic and do not provide users with any
payoff that is related to the context in which the user found the URL. Do not
link to your homepage in your ads. If a potential customer gets interested in
a new product or a special offer, you should not force the poor schmoe to find
out how to navigate the site from the homepage to the product page. Instead,
link directly to the product page from the ad. Also, seed press releases with
specific URLs that support your message: reporters may follow these links for
additional detail and online publications may use specific links instead of
generic ones to better serve their users.
If you are running a campaign with a certain theme, have it include a URL to a
page that follows up on that theme. The payoff page should not be a copy of
the ad (the customer presumably already read the ad before going to the web),
though a link to an online version of the ad might be appropriate to help users
who go to the page without having seen the ad. Instead, use each medium for
what it's good at. For example, a game company could use TV commercials to
make people think that a game looks good and use the web to allow them to
play a simplified version of the game.

8. Treating Internet and Intranet Sites the Same

Internal intranet websites need to be managed very differently from public


internet sites. The key difference is that each company only has a single
intranet and thus can manage it to a much greater degree of consistency and
predictability than we can hope for on the wild web for many years. (This is
why there are hundreds of separate usability guidelines for intranet design.)
Also, employees use the intranet for corporate productivity, meaning that any
waste of users' time is a direct hit to the bottom line. I am appalled when I hear
of intranet managers who put advertising on their site to pay for their
equipment costs. If, for example, the value of an average employee's time is
$1 per minute and users spend 3 seconds more per page because of the ads,
then each ad costs the company 5 cents in lost employee productivity. Even if
the MIS department makes 2 cents per ad (a typical CPM of $20), the net loss
to the company is 3 cents.

9. Confusing Market Research and Usability Engineering

Thankfully, many sites have embraced the value of customer data for design,
but unfortunately many of them rely solely on traditional market research
like focus groups. Most of these methods relate to creating desire for a product
and getting it sold and do not provide detailed information about how people
operate the product. A web design is an interactive product, and therefore
usability engineering methods are necessary to study what happens during the
user's interaction with the site.
Users are not designers: no matter how many focus groups you run, they
cannot tell you how to design your navigation. Focus groups are great for
getting information about users' current concerns and areas where they would
like help, but they will rarely teach you how to reinvent the fundamental way
you do business. Listening carefully to customers will often reveal frustrations
that can turn into opportunities for improvement, but once you have an idea for
an improvement, you must create a prototype design and try it out with users in
a usability test to see whether it really works for them.
There are endless stories of customers who say in focus groups that they
would love a certain feature, but who never use it once it is launched because
it is too cumbersome, too expensive, or doesn't really meet their needs in real
use. The point is that market research forms the starting point but has to be
supplemented with usability engineering if you want a design that works when
people try to use it.
You may commission a traditional market research firm to question thousands
of customers to measure whether they like your website more or less than your
competition. Once you know that your site scores, say, 5.6 and your worst
competitor scores 5.9, you may know that you need to improve, but you will not
know how to improve. Specific insights into the detailed design of your site and
the parts that must change because they are confusing, slow users down, or
do not match the way users want to work can be derived from watching 4 or 5
users as they actually use your site to perform real tasks. A day or two in
theusability lab and you will have a long list of changes that will improve your
design.
It is less common to find sites that only do user testing and never conduct any
market research, but that would be a mistake too.

10. Underestimating the Strategic Impact of the Web

It is a huge mistake to treat the web as if it were an online brochure and


manage it out of the marcom department. The web should be considered one
of the most important determinants for the way you will do business in the
future.
Ask your CTO and head of marketing what strategic thoughts they have
relating to terms like "disintermediation", "virtual project
teams", and "mobile transactions." If they don't have any thoughts, they had
better start thinking now - before it's too late. The web enables completely new
ways of doing business such as true globalization (for example,
"follow-the-sun", where projects are passed on to teams as the globe turns). If
you don't grasp these new business opportunities you will be toast in a few
years.
The two classic errors in predicting the future of a technology shift are to
overestimate its short-term impact and underestimate its long-term impact.
The web has been hyped to such an extent that people overestimate what it
can do the next year or two: most websites are not going to turn a profit any
time soon. But please don't underestimate what will happen once we reach the
goal of everyone, everywhere;connected. The impact of networks grows by
at least the square of the number of connections, and the true value of the web
will be only be seen after extensive business process reengineering.

The <frame> tag defines one particular window (frame) within a


<frameset>.

Each <frame> in a <frameset> can have different attributes, such as border,


scrolling, the ability to resize, etc.

Note: If you want to validate a page containing frames, be sure


the <!DOCTYPE> is set to either "HTML Frameset DTD" or "XHTML Frameset
DTD".
Unordered HTML 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:

Ordered HTML 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:

Ordered HTML 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:

HTML Formatting Elements


In the previous chapter, you learned about the HTML style attribute.

HTML also defines special elements for defining text with a


special meaning.

HTML uses elements like <b> and <i> for formatting output,
like bold or italic text.

Formatting elements were designed to display special types of text:

 <b> - Bold text


 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Small text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
HTML <b> and <strong> Elements
The HTML <b> element defines bold text, without any extra importanc

DEFINITION
SGML (Standard Generalized Markup Language)

SGML (Standard Generalized Markup Language) is a standard for how to


specify a document markup language or tag set. Such a specification is itself a
document type definition (DTD). SGML is not in itself a document language,
but a description of how to specify one. It is metadata.

Download this free guide


Guide to Agile Development: Culture & Tools
This exclusive report contains vendor reviews and ratings on agile project
management platforms such as CA Agile Central, JIRA, and TeamForge.
Start Download

SGML is based on the idea that documents have structural and other semantic
elements that can be described without reference to how such elements
should be displayed. The actual display of such a document may vary,
depending on the output medium and style preferences. Some advantages of
documents based on SGML are:

They can be created by thinking in terms of document structure rather than


appearance characteristics (which may change over time).
They will be more portable because an SGML compiler can interpret any
document by reference to its document type definition (DTD).
Documents originally intended for the print medium can easily be re-adapted
for other media, such as the computer display screen.
The language that this Web browser uses, Hypertext Markup Language
(HTML), is an example of an SGML-based language. There is a document
type definition for HTML (and reading the HTML specification is effectively
reading an expanded version of the document type definition). In today's
distributed networking environment, many documents are being described with
the Extensible Markup Language (XML) which is a data description language
(and a document can be viewed as a collection of data) that uses SGML
principles.
A DTD element is declared with an ELEMENT declaration. When an XML file
is validated by DTD, parser initially checks for the root element and then the
child elements are validated.

Syntax
All DTD element declarations have this general form:

<!ELEMENT elementname (content)>


ELEMENT declaration is used to indicate the parser that you are about to
define an element.

elementname is the element name (also called the generic identifier) that you
are defining.

content defines what content (if any) can go within the element.

Element Content Types


Content of elements declaration in a DTD can be categorized as below:

Empty content

Element content

Mixed content

Any content

Empty Content
This is a special case of element declaration. This element declaration does
not contain any content. These are declared with the keyword EMPTY.

Syntax
Following is the syntax for empty element declaration:

<!ELEMENT elementname EMPTY >


In the above syntax:

ELEMENT is the element declaration of category EMPTY


elementname is the name of empty element.

Example
Following is a simple example demonstrating empty element declaration:

<?xml version="1.0"?>
<!DOCTYPE hr[
<!ELEMENT address EMPTY>
]>
<address />
In this example address is declared as an empty element. The markup for
address element would appear as <address />.

Element Content
In element declaration with element content, the content would be allowable
elements within parentheses. We can also include more than one element.

Syntax
Following is a syntax of element declaration with element content:

<!ELEMENT elementname (child1, child2...)>


ELEMENT is the element declaration tag

elementname is the name of the element.

child1, child2.. are the elements and each element must have its own definition
within the DTD.

Example
Below example demonstrates a simple example for element declaration with
element content:

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>


<!DOCTYPE address [
<!ELEMENT address (name,company,phone)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
]>
<address>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</address>
In the above example, address is the parent element and name, company and
phone_no are its child elements.

List of Operators and Syntax Rules


Below table shows the list of operators and syntax rules which can be applied
in defining child elements:

Operator Syntax Description Example


+ <!ELEMENT element-name (child1+)> It indicates that child element can
occur one or more times inside parent element. <!ELEMENT address
(name+)>
Child element name can occur one or more times inside the element name
address.

* <!ELEMENT element-name (child1*)> It indicates that child element can


occur zero or more times inside parent element. <!ELEMENT address
(name*)>
Child element name can occur zero or more times inside the element name
address.

? <!ELEMENT element-name (child1?)> It indicates that child element can


occur zero or one time inside parent element. <!ELEMENT address
(name?)>
Child element name can occur zero or one time inside the element name
address.

, <!ELEMENT element-name (child1, child2)> It gives sequence of child


elements separated by comma which must be included in the the
element-name. <!ELEMENT address (name, company)>
Sequence of child elements name, company, which must occur in the same
order inside the element name address.

| <!ELEMENT element-name (child1 | child2)> It allows making choices in


the child element. <!ELEMENT address (name | company)>
It allows you to choose either of child elements i.e. name or company, which
must occur in inside the element name address.

Rules
We need to follow certain rules if there is more than one element content:

Sequences - Often the elements within DTD documents must appear in a


distinct order. If this is the case, you define the content using a sequence. For
example:

<!ELEMENT address (name,company,phone)>


The declaration indicates that the <address> element must have exactly three
children - <name>, <company>, and <phone> - and that they must appear in
this order.

Choices: Suppose you need to allow one element or another, but not both. In
such cases you must use the pipe (|) character. The pipe functions as an
exclusive OR. For example:

<!ELEMENT address (mobile | landline)>


Mixed Element Content
This is the combination of (#PCDATA) and children elements. PCDATA stands
for parsed character data, that is, text that is not markup. Within mixed content
models, text can appear by itself or it can be interspersed between elements.
The rules for mixed content models are similar to the element content as
discussed in the previous section.

Syntax
Following is a generic syntax for mixed element content:

<!ELEMENT elementname (#PCDATA|child1|child2)*>


ELEMENT is the element declaration tag.

elementname is the name of the element.

PCDATA is the text that is not markup. #PCDATA must come first in the mixed
content declaration.

child1, child2.. are the elements and each element must have its own definition
within the DTD.
The operator (*) must follow the mixed content declaration if children elements
are included

The (#PCDATA) and children element declarations must be separated by the


(|) operator.

Example
Following is a simple example demonstrating the mixed content element
declaration in a DTD.

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>


<!DOCTYPE address [
<!ELEMENT address (#PCDATA|name)*>
<!ELEMENT name (#PCDATA)>

]>
<address>
Here's a bit of text mixed up with the child element.
<name>Tanmay Patil</name>
</address>
ANY Element Content
You can declare an element using the ANY keyword in the content. It is most
often referred to as mixed category element. ANY is useful when you have yet
to decide the allowable contents of the element.

Syntax
Following is the syntax for declaring elements with ANY content:

<!ELEMENT elementname ANY>


Here, the ANY keyword indicates that text (PCDATA) and/or any elements
declared within the DTD can be used within the content of the <elementname>
element. They can be used in any order any number of times. However, the
ANY keyword does not allow you to include elements that are not declared
within the DTD.

You might also like