Web Technology

Internet and Web The Internet, which began as four networked computers in 1969, has become
the largest and most popular computer network, spanning the entire globe.
In the early 1990s, Tim Berners-Lee while working at a Swiss research institute named CERN
developed a convenient way for computers to communicate files over the Internet. Berners-Lee named
his creation The World Wide Web, or simply The Web. The Web involves three things:
• Text files, known as HTML files (short for HyperText Markup Language), containing links to
other text files.

• A program, known as a browser, for viewing HTML files.

• A set of rules, known as the HTTP protocol, for transferring HTML files among computers
The Web was originally called the World Wide Web, or WWW for short, because Berners-Lee
envisioned a large collection of globally distributed web pages linking to each other. A web page is
a document that is viewed in a web browser. A collection of related web pages is organized into a
website. A web server is a program that serves web pages to web browsers.

Separation of duties A significant change that occurred over time was a move to separate content,
presentation (how content is displayed in a browser), and web page interaction with the user. Docu-
ment markup was initially used to control both document structure and appearance. Some markup,
such as the tag <b>, was originally used just to control presentation. (Example: <b>elephant</b>
depicts the word elephant on web pages in the boldface font.) Interlacing document structure with
appearance and interaction however complicates having pages work well across the range of technolo-
gies from large screens to small phones to printing devices. That is why nowadays it is considered
good practice to maintain a strict separation between content, presentation, and interaction.
A modern web page is composed of HTML, CSS, and JavaScript.

• HTML defines the structure and content of a web page. (The HTML file may also contain CSS
and JavaScript code, although this can be considered bad practice.)

• CSS specifies the layout and visible appearance.

• JavaScript describes the dynamic behaviors and actions of a web page.

As an analogy, humans have similar components: structure (bones, organs, central nervous system),
identifying attributes (eye color, hair style, height), and behaviors (brushing teeth, slam dunking a
basketball).

HTML and tags HTML is the standard markup language for web documents. Hypertext is text
that has links to other text, and nowadays to images, videos, and more. Document markup consists
of special markings in the document that provide additional information about links, formatting, and
images. HTML also permits adding metadata like search engine keywords, author information, and
language.
HTML files are usually saved with an .html or .htm file extension. Example: index.html. An HTML
file starts with an indication of the document type, then a head part with the page title and other
page information, and finally a body part with the actual page content.
The body of an HTML document is constructed with several tags. A tag has a descriptive name
surrounded by < and > characters that the web browser uses to display content. Example: <p>
specifies a paragraph. An HTML element is everything from a start tag to the corresponding end tag.
Example: <b>pink elephant</b> has opening tag <b> and closing tag </b>, while “pink elephant”

1
is the HTML element. Some tags, such as <img>, which is used to embed an image in a web page, do
not require a closing tag. Example: <img src="https://www.abc.com/flower.png"> includes the
picture flower.png from an external website at the link https://www.abc.com/flower.png.

Links A link on a webpage is a clickable item that usually causes the web browser to open another
webpage when clicked. A button or image can also be a link.
The opening <a> tag uses the ‘href’ attribute to specify the link’s URL target, i.e., a web address
commonly starting with ‘https://’. The link text comes next and is followed by the closing </a> tag.
Example HTML document:

<!DOCTYPE html>
<title>My Favorite Web Page</title>
<body>
<p><a href="https://www.wikipedia.org/">Click Here</a> to visit
my favorite web page.</p>
</body>
</html>

This web page, carrying the title My Favorite Web Page, contains the text “Click Here to visit my
favorite web page”, whereby Click Here is depicted in blue and clicking on this part results in going
to https://www.wikipedia.org.
A picture can be made to be a link by including it within an <a> tag by using the <img> tag.
Example: <a href="https://www.forest.com/"> <img src="https://www.abc.com/tree.png">
</a> offers the picture at https://www.abc.com/tree.png as link, leading to https://www.forest.com/.

CSS and rules A web page without any styling will use the browser’s default styling with white
background and black, standard-sized text. Cascading Style Sheets (CSS) is a textual language for
describing how a web page is styled for visual presentation. CSS controls the look and layout of web
page content.
A CSS rule specifies styling properties for specific HTML elements. CSS rules may be placed
within <style> tags in the HTML file’s head part. Each rule indicates the element to be styled,
like h1 (header1) or p (paragraph), followed by a list in braces { } of property:value items, like
color:blue.
A web developer uses CSS to write a list of rules. A CSS rule consists of a selector followed by a
declaration block between braces { }.

• A CSS selector specifies the HTML elements to which the specific style rule applies.

• A declaration block contains one or more declarations separated by semicolons ;.

• A CSS styling declaration is a CSS property, for example the color or font size, followed by a
colon : and the property value.

CSS can be applied to HTML in three ways:

• An inline style places CSS declarations inside a tag’s style attribute.

• An embedded stylesheet places CSS rules in an HTML document’s head using <style> tags.

• An external stylesheet places CSS rules in a separate file that is imported into an HTML docu-
ment with a <link> tag.

2
 Every browser has a default stylesheet that specifies styling for each HTML element. CSS style
declarations override the default style declarations.
The style declarations from a parent element cascade down and are applied to any child elements,
a concept called inheritance. Each element inherits the style declarations from the element’s parent.
The element’s parent inherits style declarations from the parent’s parent element, and so on, up to
the top-level <body> element.
When two style declarations with identical properties apply to the same element, a conflict occurs.
Two common conflicts include:

• A parent’s style declaration conflicts with a child’s style declaration. Example: The parent
element’s text is blue, but a child element’s style declaration indicates the color should be green.
When a conflict occurs, the child’s declaration overrides the parent’s declaration.

• An embedded or external stylesheet’s style declaration conflicts with an inline style. Example:
An inline style says the element should be blue, but the embedded stylesheet says the element
should be green. When a conflict occurs, an inline style overrides the embedded or external
stylesheet’s declaration.

JavaScript JavaScript is a programming language that runs in a browser, enabling web pages
supporting actions like responding to a button click. JavaScript can be included in a <script> tag in
the HTML file’s head or body parts.
Today, JavaScript is one of the most popular programming languages. JavaScript is supported by ev-
ery major web browser and makes web applications like Gmail and Google Maps possible. (JavaScript
is also popular for other applications than web browsers.)
JavaScript is executed by an interpreter, which executes programming statements directly, without
first compiling the statements into machine language. Modern JavaScript interpreters (also called
JavaScript engines) use so-called just-in-time (JIT) compilation to compile the JavaScript code at
execution time into another format that can be executed quickly.
JavaScript allows web pages to be more interactive. It can execute in response to user interactions
and alter the contents of the web page. Example: A user clicks on a button, and JavaScript executes
and changes the color of the web page.
The Document Object Model (DOM) is a data structure that corresponds to the HTML document
displayed in a web browser. The JavaScript object document represents the entire DOM and is created
from the document’s HTML. Changes made to this object are reflected in the browsers presentation
and behavior.
A DOM tree is a visualization of the DOM data structure. A node is an individual object in the
DOM tree. Nodes are created for each element, the text between an element’s tags, and the element’s
attributes.

• The (unique) root node is the node at the top of the DOM.

• A child node is the node directly under another node. Each node has zero, one, or more child
nodes (children).

• A parent node is the node directly above another node. All nodes, except the root node, have
exactly one parent node.

Web pages add JavaScript code by using the <script> tag. JavaScript code between <script> and
</script> tags is executed by the browser’s JavaScript engine.
Including JavaScript directly within an HTML file is common practice when using small amounts of
JavaScript. However, writing JavaScript directly within the document leads to a number of problems
as a web page or website gets larger. Good practice therefore is to use <script> tags to load JavaScript

3
from external files rather than writing the JavaScript directly within the HTML file. The <script>
tag’s src attribute specifies a JavaScript file to load. Example: <script src="bootstrap.js"></script>
loads the bootstrap.js JavaScript file.
JavaScript running in a web browser has access to the window object, which represents an open
browser window. In a tabbed browser, each tab has a window object. The document object is a
property of the window object and can be accessed as ‘window.document’ or just ‘document’. This
behavior is common to all properties of the window object. Other properties of the window object
include:

• window.location is a location object that contains information about the window’s current
URL. Example: window.location.hostname is the URL’s hostname.

• window.innerHeight and window.innerWidth are the height and width in pixels of the window’s
content area. Example: window.innerWidth returns 600 if the browser’s content area is 600
pixels wide.

The window object defines some useful methods, such as window.open(), which opens a new browser
window. Example: window.open("http://www.twitter.com/") opens a new browser that loads the
Twitter homepage.
JavaScript is commonly used to search the DOM for a specific node or set of nodes and then change
the nodes’ content. Example: In an email application, the user may click a Delete button to delete an
email. JavaScript must then search the DOM for the node containing the email’s contents and change
the contents to ”Email deleted”.
After searching the DOM for an element, JavaScript may be used to examine the element’s attributes
or to change attributes. By modifying attributes, JavaScript programs can perform actions such as:

• Change which image is displayed by modifying an img element’s src attribute.

• Change an element’s CSS styling by modifying an element’s style attribute.