World Wide Web has had as profound an effect on human communication as the printing press.

One key difference is that the operation of the printing press was limited to a few select tradesmen
but, on the web, everyone has his or her own printing press; everyone can be a publisher of a
website.
A network is a structure in which information and services are shared among devices known as
nodes or hosts.
A host can be any device that can send and/or receiving data electronically.
A host that provides information or a service to other devices on the network is called a server.
The device that receives these services is called a client.
A common network design is the client-server network, in which the clients access information
provided by one or more servers.
Networks are classified based on the range of devices they cover.
A network confined to a small geographic area, such as within a building or department, is referred
to as a local area network or LAN.
A network that covers a wider area, such as several buildings or cities, is called a wide area
network or WAN.
Wide area networks typically consist of two or more interconnected local area networks.
The largest WAN in existence is the Internet.
biggest obstacle to effectively using the Internet is the network's sheer scope and size.
Hypertext is a method of organization in which data sources are interconnected through a series of
links or hyperlinks that users activate to jump from one data source to another. Hypertext is ideally
suited for the Internet because end users don't need to know where a particular document,
information source, or service is located- they only need to know how to activate the link.
A web page is a simple text file written in HTML (Hypertext Markup Language)
A markup language is a language that describes the content and structure of a document by
"marking up” or tagging, different document elements.
Hypertext Markup Language is a language that supports both the tagging of distinct document
elements and connecting documents through hypertext links.

The first line in an HTML file is the document type declaration or doctype, which is a
processing instruction indicating the markup language used in the document.
The fundamental building block in every HTML document is the element tag
The general syntax of a two-sided element tag is <element>content</element> where element
is the name of the element, content is the element's content, ‹element> is the starting tag, and is
the ending tag.
The entire structure of an HTML document can be thought of as a set of nested elements in a
hierarchical tree. At the top of the tree is the html element, which marks the entire document.
Elements will often contain one or more element attributes
The document head contains metadata, which is content that describes the document or provides
information about how the document should be processed by the browser.

The title element is part of the document head because it's not actually displayed as part of the
web page, but rather appears externally within the browser title bar or browser tab.

In this tag, the name attribute defines the type of metadata and the content attribute provides the
data values.
A comment is descriptive text that is added to the HTML file but that does not appear in the
browser window when the page is displayed.
HTML sectioning elements

sectioning elements are grouping elements

Using Text Level Elements

• A style sheet is a set of rules specifying how page elements are displayed.
• Style sheets are written in the Cascading Style Sheets (CSS) language.
• The character set used for the English alphabet is the American Standard Code for
Information Interchange more simply known as ASCII
Most web pages include embedded content, which is content imported from another resource, often
nontextual, such as graphic images, audio soundtracks, video clips, or interactive games.

• CSS is a W3C standard for describing the appearance of HTML Elements. With CSS, we can
assign font properties, colors, sizes, borders, background images and even position elements
on the page.
• CSS language has gone through several versions, the latest of which is CSS Version 3, more
commonly known as CSS3
• Browser styles or use agent styles – These are styles that is built in into the browser itself
• User defined styles – these are the styles defined by the user based on the settings he or
she makes in configuring the browser.
• External styles, which are the styles that the website author creates and place within a CSS
file and links to the page.
• Embedded styles are the styles are the styles added to the head of an HTML document.
• Inline styles are the styles which are added as element attribute within an HTML document
and thus apply to that element alone.
• Embedded styles and inline styles are not considered best practice and their use should be
avoided because they violate the basic tenets of HTML
• selector identifies an element or a group of elements within the document and the property
• The “Cascade” in CSS refers to how conflicting rules are handled. The downward movement of
water down a cascade is meant to be analogous to how a given style rule will continue to take
precedence with child elements.
The CSS uses the following cascading principles to help deal with conflicts:
▪ Inheritance
▪ Specificity
▪ Location
• additional factor on how an element is rendered is that properties are passed from a parent
element to its children in a process known as style inheritance.
• RGB color values are based on classical color theory in which all colors are determined by
adding three primary colors - red, green, and blue - at different levels of intensity
• HSL color values were introduced in CSS3 and are based on a color model in which each color
is determined by its hue, saturation, and lightness.
• Hue is the tint of the color and is usually represented by a direction on the color wheel. Hue
values range from 0° up to 360°, where 0 matches the location of red on the color wheel,
120° matches green, and 240° matches blue.
• Saturation measures the intensity of the chosen color and ranges from 0% (no color) up to
100% (full color).
• Lightness measures the brightness of the color and ranges from 0% (black) up to 100%
(white)
• Contextual selector specifies the context under which a particular page element is matched.
• Context is based on the hierarchical structure of the document, which involves the
relationships between a parent element containing one or more child elements
• A contextual selector relating a parent element to its descendants has the following pattern.
• where parent is a parent element, descendant is a descendant of that parent and styles
are styles applied to the descendant element.
• Selectors also can be defined based on attributes and attribute values within elements. Two
attributes, id and class, are often key in targeting styles to specific elements. The id attribute
is used to identify specific elements within the document.
• A pseudo-element selector is a way to select something that does not exist explicitly as an
element in the HTML document tree but which is still a recognizable selectable object.
• A pseudo selector is used to define the state of an element or to select elements based on
certain conditions, like hovering, focusing, or even selecting the nth-child of a parent element.
• The default font used by most browsers for displaying text is Times New Roman, but you can
specify a different font tor any page element using the following font-family property
• fonts is a comma-separated list, also known as a font stack, of specific or generic font names.
• serif - a typeface in which a small ornamentation appears at the tails end of each character.
• sans-serif – a typeface without any serif ornamentation
• monospace – a typeface in which each character has the same width; often used to display
programming code.
• cursive – a typeface that mimics handwriting with highly stylized elements and flourishes;
best used in small doses for decorative page elements.
• fantasy – a highly ornamental typeface used for page decoration; should never be used as
body text
• There are three relative measurements used to provide scalability : percentages, ems
and rems
• A percentage sets the font-size as percent of the font size used by the containing element
• Another relative unit is the viewport unit in which lengths are expressed as a percentage of
the width or height of the browser window
• Kerning measures the amount of space between characters, while tracking measures the
amount of space between words.
• Leading measures the amount of space between lines of text and is set using the following
line-height property
• where type is normal, italic, or oblique. The italic and oblique styles are similar in appearance,
but might differ subtly depending on the font in use
• weight is the level of bold formatting applied to the text
• CSS box model applies to block boxes, inline boxes only use some of the behavior defined in
the box model.
• Content box - The area where your content is displayed, which can be sized using properties
like width and height
• Padding box - The padding sits around the content as white space; its size can be controlled
using padding and related properties.
• Border box - The border-box wraps the content and any padding. Its size and style can be
controlled using border and related properties.
• Margin box - The margin is the outermost layer, wrapping the content, padding, and border
as whitespace between this box and other elements. Its size can be controlled using margin
and related properties.
• Floating an element takes it out of position and places it along the left or right edge of its
parent element
• Relative positioning is used to nudge an element out of its normal position in the document
flow.
• Absolute positioning works a bit differently and is a more flexible method for accurately
placing items
• The number of rows and columns in the grid are set by the grid-template-rows and grid-
template-columns properties where track-list is a space-separated list of row heights or
column widths
• flexbox was designed as a one-dimensional layout model, and as a method that could offer
space distribution between items in an interface and powerful alignment capabilities
• To cause wrapping behavior add the property flex-wrap with a value of wrap
• flex-grow : determines how items will expand if there is extra space.
• flex shrink : determines how items will shrink if there isn’t enough space in the container.
 • flex-basis property : sets the initial size of the flex-item
• justify-content : aligns item on the main axis.
• align-items : aligns item on the cross axis.
• Inline elements are displayed on the same line as the text around them. They do not start
on a new line, and they only take up as much width as their content requires. Inline elements
cannot have a margin or padding on the top or bottom, but they can have margins and
padding on the left and right.
• Block elements are displayed on a new line, and they take up the entire width of their
container. Block elements can have margins and padding on all sides.
• Inline-block elements are a hybrid of inline and block elements. They are displayed on the
same line as the text around them, but they can have a width and height set. Inline-block
elements also respect margins and padding on all side
• JavaScript is the programming language that adds interactivity and custom behaviors to our
website.
• JavaScript is also what is known as a dynamic and loosely typed programming language.
• Embedded script – to embed a script on a page, just add the code as the content
• External script The other method uses the src attribute to point to a script file (with a .js
suffix) by its URL. In this case, the script element has no content.

• Loops allow us to easily deal with huge sets of data.

• alert(), confirm(), and prompt() - These functions trigger browserlevel dialog boxes.
• Date() - Returns the current date and time.
• parseInt(“123”) - This function will, among other things, take a string data type containing
numbers and turn it into a number data type.
• setTimeout(functionName, 5000) - Will execute a function after a delay.
• An event is an action that can be detected with JavaScript, such as when the document loads
or when the user clicks on an element or just mouse over it.
• HTML 4.0 made it possible for a script to be tied to events on the page whether initiated by
the user, the browser itself, or other scripts. This is known as event binding.

three common methods for applying event handlers to items within our pages:
• As an HTML attribute
• As a method attached to the element
• Using addEventListener
• The DOM Document Object Model gives us a way to access and manipulate the contents
of a document. We commonly use it for HTML, but the DOM can be used with any XML
language as well
• The DOM is a programming interface (an API) for HTML and XML pages. It provides a
structured map of the document, as well as a set of methods to interface with the elements
contained therein
• Each element within the page is referred to as a node.

• We can access individual elements by the tags themselves using

document.getElementsByTagName().
• The getElementById() returns a single element based on that element’s id (the value of the
id attribute), which we provide to the method as an argument.
• The querySelectorAll() allows you to access nodes of the DOM based on the CSS-style
selector.
• The getAttribute() allows you to get the value of an attribute attached to an element node.
• The setAttribute() sets the value of the src attribute.
• The innerHTML gives us a simple method for accessing and changing the text and markup
inside an element.
• To create a new element, use the aptly named createElement() method. This function
accepts a single argument: the element to be created
• If we want to enter text into either an element we’ve created or an existing element on the
page, we can call the createTextNode() method.
• the appendChild child method to make the newly created element to make them part of the
document.
• removeChild() to remove a node or an entire branch from the document tree.
• A JavaScript library is a collection of prewritten functions and methods that you can use in
your scripts to accomplish common tasks or simplify complex ones