Web Technology

You probably know that computers don't communicate with each other the way that people do. Instead,
computers require codes, or directions. These binary codes and commands allow computers to process
needed information. Every second, billions upon billions of ones and zeros are processed in order to
provide you with the information you need.
So what does that have to do with your ability to post your latest pictures online? Everything.
The methods by which computers communicate with each other through the use of markup languages and
multimedia packages is known as web technology. In the past few decades, web technology has undergone a
dramatic transition, from a few marked up web pages to the ability to do very specific work on a network without
interruption. Let's look at some examples of web technology.
What is Web Technology?
● Web technology” is the set of standards, protocols, and interfaces required to
deliver information reliably and efficiently over the Internet to a user with a web
browser interface.
OR
Web technology refers to the use of hypertext markup languages and multimedia packages, using which
computers communicate with each other
OR
Web technology is an establishment that is responsible for communication and sharing of resources of
computers.

DNS Caching
A DNS cache (sometimes called a DNS resolver cache) is a temporary database, maintained by a
computer's operating system, that contains records of all the recent visits and attempted visits to websites
and other internet domains.(DNS caching is like browser history)
In other words, a DNS cache is just a memory of recent DNS lookups that your computer can quickly
refer to when it's trying to figure out how to load a website.

Benefits
Effective caching aids both content consumers and content providers. Some of the benefits that caching
brings to content delivery are:

● Decreased network costs: Content can be cached at various points in the network path between the
content consumer and content origin. When the content is cached closer to the consumer, requests will not
cause much additional network activity beyond the cache.
● Improved responsiveness: Caching enables content to be retrieved faster because an entire
network round trip is not necessary. Caches maintained close to the user, like the browser cache, can make
this retrieval nearly instantaneous.
● Increased performance on the same hardware: For the server where the content originated, more
performance can be squeezed from the same hardware by allowing aggressive caching. The content owner
can leverage the powerful servers along the delivery path to take the brunt of certain content loads.
● Availability of content during network interruptions: With certain policies, caching can be used
to serve content to end users even when it may be unavailable for short periods of time from the origin
servers.

Locations Where Web Content Is Cached

Content can be cached at many different points throughout the delivery chain:

● Browser cache: Web browsers themselves maintain a small cache. Typically, the browser sets a
policy that dictates the most important items to cache. This may be user-specific content or content
deemed expensive to download and likely to be requested again.
● Intermediary caching proxies: Any server in between the client and your infrastructure can cache
certain content as desired. These caches may be maintained by ISPs or other independent parties.
● Reverse Cache: Your server infrastructure can implement its own cache for backend services. This
way, content can be served from the point-of-contact instead of hitting backend servers on each request.

Caching Headers
● Expires: The Expires header is very straight-forward, although fairly limited in scope.
Basically, it sets a time in the future when the content will expire. At this point, any requests for the same
content will have to go back to the origin server. This header is probably best used only as a fall back.
● Cache-Control: This is the more modern replacement for the Expires header. It is well
supported and implements a much more flexible design. In almost all cases, this is preferable
to Expires, but it may not hurt to set both values. We will discuss the specifics of the options you can
set with Cache-Control a bit later.
● Etag: The Etag header is used with cache validation. The origin can provide a unique Etag for
an item when it initially serves the content. When a cache needs to validate the content it has on-hand
upon expiration, it can send back the Etag it has for the content. The origin will either tell the cache that
the content is the same, or send the updated content (with the new Etag).
● Last-Modified: This header specifies the last time that the item was modified. This may be
used as part of the validation strategy to ensure fresh content.
● Content-Length: While not specifically involved in caching, the Content-Length header is
important to set when defining caching policies. Certain software will refuse to cache content if it does not
know in advanced the size of the content it will need to reserve space for.
● Vary: A cache typically uses the requested host and the path to the resource as the key with which
to store the cache item. The Vary header can be used to tell caches to pay attention to an additional
header when deciding whether a request is for the same item. This is most commonly used to tell caches to
key by the Accept-Encoding header as well, so that the cache will know to differentiate between
compressed and uncompressed content.

DNS PREFETCHING
Enabling prefetching will almost always make your browsing experience faster. Prefetching works by
looking at all the links on a page, and DNS resolving each name to its IP address.

The only reason I can think of why prefetching would yield a worse experience is if your DNS server is
overloaded and slow to respond (super unlikely), and even then, it's probably no worse than not
prefetching.

What is Prefetching?
There are a variety of ways web developers can help speed up a website. They can bring content closer
to their visitors, optimize their content through compression, set high expiry times so that assets remain
in their browser longer, and more. However, what if we were able to implement a way for content to
already be almost instantaneously available to a visitor uponrequest - in comes prefetching.
Prefetching allows a browser to silently fetch the necessary resources needed to display content that a
user might access in the near future. The browser is able to store these resources in its cache enabling it
to deliver the requested data faster. Therefore, once a web page has finished loading and the idle time
has passed, the browser begins downloading other resources. Once a user clicks on a particular link that
has already been prefetched, they will see the content instantly.

Types of Prefetching
There are 3 main types of prefetching that exist. The most popular and widely used
method is link prefetching. However, DNS prefetching and prerendering are also useful
options and each serves their own purpose.
Jyoujn

Link Prefetching
Link prefetching, as discussed in the previous section, is a mechanism that allows the
browser to fetch resources for content that is assumed the user will request. W3C defines
it as such:
The prefetch link relation type is used to identify a resource that might be required by the next
navigation, and that the user agent SHOULD fetch, such that the user agent can deliver a faster
response once the resource is requested in the future.
The browser will look for prefetch in either an HTML or the HTTP header Link such as:

● HTML: <link rel="prefetch" href="/uploads/images/pic.png">

● HTTP Header: Link: </uploads/images/pic.png>; rel=prefetch

DNS Prefetching#
A DNS or domain name server converts IP addresses in readable website URLs such as
yourwebsite.com. Whenever a user requests an asset being hosted on a particular domain
they must perform a DNS lookup and find which domain name that IP address belongs to.
This process takes time and the most DNS lookups that are required, the longer your
visitors will be waiting for a page to load.
DNS prefetching allows the browser to perform the DNS lookups for links on a page in the
background while the user browses the current page. This minimizes latency as when the
user clicks on a link with DNS prefetch enabled, they do not have to wait for the DNS
lookup to take place as it already has.
DNS prefetch can be added to a specific URL by adding the rel= tag to the link attribute
like so: <link rel="dns-prefetch" href="https://www.keycdn.com">
What is CSS expression?
CSS expressions allow a web author to hook script expressions into the dynamic
nature of HTML elements. The natural events of the page (onresize, onclick,
onmouseover and so on) causing these expressions to be re-evaluated whenever
content could possibly reflow. Once IE encounters the expression construct it binds
the code directly to the object. If you use any fancy DOM work to disable either the
entire stylesheet (stylesheet switching) or just to kill a single element, it won’t work
as the expression is already bound to the actual elements.

Buffering –
The main memory has an area called buffer that is used to store or hold the data
temporarily that is being transmitted either between two devices or between a
device or an application. Buffering is an act of storing data temporarily in the
buffer. It helps in matching the speed of the data stream between the sender and
receiver. If speed of the sender’s transmission is slower than receiver, then a
buffer is created in main memory of the receiver, and it accumulates the bytes
received from the sender and vice versa
OR
A buffer is a temporary holding area for data while it's waiting to be transferred to another
location. It is usually located in the RAM. The concept of the buffer was developed in order to
prevent data congestion from an incoming to an outgoing port of transfer.
There are common uses for the buffer that help improve a device's overall performance. Nearly
all hard disks make use of a buffer to facilitate easy retrieval of data. Any type of memory
handling and data storage service will make use of some sort of buffer as well. Even the CPU's
most basic tasks need to use buffers to operate in the form of registers, where data like
operands and operators are stored before they are processed.

Weblog
A weblog or blog is a listing of text, images, or
other objects that are arranged in
a chronological order that first started appearing
in 1998. Blogs are often maintained and run by a
single individual, updated daily, or contain personal
remarks about a topic, a personal ramble, or an
update on the person's life. Weblogs are like a
personal journal, offering the user a way to publicly
discuss their life. It provides a personal way to
learn more about people, events, places, and
people around the world.
 Some examples of software and services you
can use to create and start personal weblogs
include Blogger, Manila, Movable
type, LiveJournal, Radio
Userland, Typepad, WordPress.

Search engine
A search engine is software, usually accessed on
the Internet, that searches a database of information
according to the user's query. The engine provides a
list of results that best match what the user is trying to
find. Today, there are many different search engines
available on the Internet, each with their own abilities
and features. The first search engine ever developed is
considered Archie, which was used to search
for FTP files and the first text-based search engine is
considered Veronica. Currently, the most popular and
well-known search engine is Google. Other popular
search engines include AOL, Ask.com, Baidu, Bing,
and Yahoo.

Search Techniques

Keyword searching →is what most people are familiar with. It is what most people do when
they search for something in Google or Bing or even a library catalog. Keyword searching is
basically entering a few important terms into the search box and allowing the search engine to
find all items that contain all of those terms. In a general search engine this will result in millions
of results. The problem is that the most relevant item to you may be number 2,800,000 and
most people don’t look a past the first 2 pages of results. In the library catalog and its search
engine, we use the keywords to get to the most relevant items, but then we will search for
similar items using “subject searching”. It is far more precise and produces more relevant
items, but I will discuss it in the advanced search techniques page. Vhi

Author or title searching→ is fairly straight forward, you enter the name of the author and
some bits of the title in the search box and allow the search engine to do its magic. Unless you
are using the advanced search feature of a search engine, this really is just a keyword
search and the search engine is just looking for a match to all parts of your query that is the
name and title of the book. What most people don’t realize is that in the library catalog the
author’s name should appear in the reverse order, that is, last name first, followed by a comma
and one space and then the first name. So, it should be Shakespeare, William, not William
Shakespeare. The computer will find it, but it might also include people named William that
wrote about Shakespeare and such.
Phrase searching→ is one step better than just keyword searching. This is when you have
an exact phrase that you are looking for. It may just be two words, but they need to appear in
the right order. To perform a phrase search, you just put the entire query into quotation marks.
This will force the search engine to find that exact match. So, if you word your search wrong
you will get bad results. There are problems with phrase searching in that people often have
variations of a quote or got the lyrics wrong to a song. It happens. When the results are wrong,
Isuggest trying the phrase as a keyword search, with all the words in the right order and
hopefully the right results will appear.

Quick Searches
Many search engines now allow you to quickly search for specific types of content, simply by including
a keyword at the beginning of your search. For instance, if you want to find out the weather in Paris,
simply type “weather Paris” and you should get the current forecast for Paris. If you need a definition,
include the word “dictionary” before the word you want to define.

Quick searches work for many types of information, and don’t always require a keyword:

● Entering the tracking code for a package will bring up the shipping details.
● If you enter a mathematical equation, the search engine should give you the answer.
● If you want to figure out how many ounces are in a 3 pounds, type “ounces in 3 pounds.”
● Find out a flight status by searching for the airline and flight number.

Truncation
If you are looking for information on gardening, you could use it as your keyword. However, if your
results are limited in number (though not likely with gardening) and you want to broaden your search,
use a root part of the word and abbreviate it with an asterisk (garden*). The engine will return links to
documents containing gardens, garden, gardener, gardeners, and so on.

Boolean Expressions
Perhaps the most useful feature in defining search criteria, Boolean operators provide you with powerful
control over search engine logic. The Boolean operators AND, OR, NOT (or AND NOT in some
engines), and NEAR allow you to create more specific search results.

Limited Boolean Options

Some engines offer limited Boolean logic with radio buttons or pull-down menu choices such as:
● Documents must include “All terms” (equivalent to using the operator AND between all terms).
● Documents must include “Any terms” (equivalent to using OR between all terms).

Social Media Tags

Many search engines now allow you to search for trending topics in social media, using the @ or #
symbols.

Advanced Search
Some search engines offer an advanced search page, where you can further narrow your search. For
instance, Google’s Advanced Search allows you to use many of the search functions listed above, as
well as several additional parameters. You can restrict results by language, geographical region, or how
recently a page has been updated. You can search within a specific domain. You can also limit results to
a specific part of the page, such as the title or URL. If you need a specific file format or need to find
files that you can share or make changes too (they don’t have any type of licensing restrictions), you can
select those options as well.

What Is SEO?
SEO stands for “search engine
optimization.” It is the process of getting
traffic from the “free,” “organic,”
“editorial” or “natural” search results on
search engines.
Search engine optimization (SEO) is the process of improving the volume or quality of traffic to a web
site or a web page (such as a blog) from search engines via "natural" or un-paid ("organic" or
"algorithmic") search results as opposed to other forms of search engine marketing (SEM) which may
deal with paid inclusion. The theory is that the earlier (or higher) a site appears in the search results list,
the more visitors it will receive from the search engine. SEO may target different kinds of search,
including image search, local search, video search and industry-specific vertical search engines. This
gives a web site web presence.
Search Engine Optimization (SEO) refers to a collection of techniques to improve your site's ranking in
search engines, be it Google, Yahoo, or any of the others

What are header tags

Header tags are nothing but headings in your post.

There are basically 6 types of header tags –

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

Use heading tags appropriately to give structure to your page NOT to style the presentation. There are
six sizes of heading tags, beginning with <h1>, the most important, and ending with <h6>, the least
important.  It is NOT likely you will use all six heading tags on a page. You can read more
about heading tags in this article by James Huggins.
Good practices for heading tags include:

● Imagine you're writing an outline.

● Use headings sparingly across the page.
● Use css to style the look of your heading tags.

Search engine optimization for individual web page

Header entries

<H1, H2, H3> Next in importance are heading tags. Engines generally figure
that things in headings tags must be what a page is about, so use the heading
tags to identify the different sections of your articles. Don't try to fool the
engines by putting your whole page in headings tags and then making it
readable with CSS, or sprinkling heading tags gratuitously throughout the
page. Instead, use heading tags where they make sense. Try an H1 tag for the
main title of the page, and H2 and H3 tags for section headings. A heading tag
on its own somewhere, with no real content following it, probably won't count
for much.

Hyperlink and link structure

Internal Links are hyperlinks that point at (target) the same domain as the domain that the link
exists on (source). In layman's terms, an internal link is one that points to another page on the same
website.

Code Sample
<a href="http://www.same-domain.com/" title="Keyword Text">Keyword
Text</a>

Optimal Format
Use descriptive keywords in anchor text that give a sense of the topic or keywords the source page
is trying to target.

What is an Internal Link?

Internal links are links that go from one page on a domain to a different page on the same domain.
They are commonly used in main navigation.

These type of links are useful for three reasons:

● They allow users to navigate a website.

● They help establish information hierarchy for the given website.
● They help spread link juice (ranking power) around websites.
What is URL Structure?
Your website URL works as your address on the web. It’s the most direct way for someone to visit a
page on your website. If you’re not familiar with the term, the URL is the thing that starts with either
www or http.

In the early stages of starting a website, you want to sit down and figure out a standard structure for your
website URLs. (If your website is already established and growing, it’s not too late to do this now, it
just might require more work.)

Your URLs always start with the root domain for your website (e.g. www.yourwebsitename.com), so
what you want to define is what follows for individual pages.

Your URL structure will directly relate to your larger site architecture. You want your URLs to both
reference what’s on the specific page, as well as help situate the website visitor to where this page
belongs on the larger website. For example, the URL for a post on your blog should look something like
this: www.yourwebsitename.com/blog/nameofyourblogpost 

How to optimize your URLs?

1# URLs must be readable by everyone

Both readers and search engines must be capable of reading your URL. Search
engines as readers, read your URLs words to know what the page is going to be
about. That’s why you should not use dynamically generated URLs and
customize them in order to provide full comprehension of your content and
target.
Example: if you are an ecommerce shop selling black leather jacket you should
write the dedicated page URL this way:
http://yourdomain.com/black-leather-jacket and not this way:
http://yourdomain.com/index.php?=5754225=t44=?p=987
2# Organize your content
The way an URL is written bring information on its importance. In fact, search
engines regard web pages in root folder as a top content that should be
prioritized over other ones. That’s why you need to categorize your URLs in order
to clearly determine and show to search engines which URL should get a little
boost in the SERPs.

3# Do not use capital

Capital letter can confuse search engines and readers as it can make it more
difficult to understand.

4# Prefer hyphens to underscores

If you want to optimize your URL then the way you separate words does matter.
Actually, Google robots are set up to read hyphens and not underscores. If you
want to have a chance to get ranked, then you have to apply this rule.

5# Add your mobile URLs to a sitemap

This is a good way to inform search engines which web pages are mobile friendly
and which one are not. Those first ones seems to rank higher in the SERPs since
the Google mobile update. Even if some experts say that responsive URLs do not
not need to be included to a sitemap, it is safer to do so.

6# Include your target keyword

Try your best to include your primary keyword in your URLs. Even if in most cases
it can’t be done on your homepage, focus on integrating your target keyword
related to your product or category pages.

7# Block unsafe URLs with robots.txt

Bad URLs can get you penalized by search engines if they index duplicate URLs
for example or other unoptimized URLs. For instance, you can have features
creating filters on your website generating dynamic and duplicated URLs. You
can thus block those extra URLs using robots.txt.

8# Add a favicon
Even if they do not have a direct SEO impact on your rankings, favicons have a lot
of advantages. This little icon next to your URL in browser helps better recognize
your website brand. It is also easier to your website in bookmarks. It thus will
help to develop your brand visibility