What are Web Technologies?

• This is a generic term used to describe a collection of tools that are used to plan, design,
develop and deploy state-of –the-art websites and web applications.
• There are quiet a number of web technologies in use today by professional web
developers.
Some Popular Web Technologies
The following web technologies are very relevant in the development of modern day websites
and web applications.
– HTML
– CSS
– JavaScript
– PHP
– WordPress
– Angular
– Bootstrap
– ReactJS
– Laravel
– MongoDB
– Node.js
SGML
• SGML stands for Standard Generalized Markup Language.
• SGML is a system(ISO standard) used to specify document structure.
• It was originally developed as part of the IBM document-sharing project in 1974 and
became an official ISO standard in 1986.
• Most markup languages such as HTML and XML are derived from SGML.
HTML
• HTML stands for HyperText Markup Language.
• HTML is a language, which makes it possible to present information on the Internet.
• That is, web pages all over the world consist of HTML.
• However, HTML is not a programming language but a markup language.

Cascading Style Sheets (CSS)

• CSS is a style sheets language (style language) introduced by W3C.
• Cascading refers to the process of determining the priority of styling rules.
 • CSS is used to define the presentational semantics of structured documents.
• It provides control over visual as well as aural characteristics of HTML and XHTML
documents and their elements.
JavaScript(JS)
• JavaScript is an object-based client-side scripting language that adds interactivity and
programmability to web pages.
• JS was created by Brendan Eich at Netscape.
• It was introduced in December 1995, and initially named “LiveScript”.
• Licensing issues at the time between Netscape and Microsoft over “LiveScript” and
“JScript”, respectively, led to JavaScript’s standardization as ECMAScript by Ecma
International standards organization in June 1997.
• But JavaScript still remains the preferred name of the language.
Extensible Markup Language (XML)
• Extensible Markup Language (XML) is a universal format for structured documents and
data on the World Wide Web.
• XML, like HTML, is based on the granddaddy of all markup languages, Standard
Generalized Markup Language (SGML).
• In contrast to most computer languages, XML has no fixed, predefined set of tags.
• With XML, individual markup formats can be defined.
AJAX
• AJAX is an acronym for Asynchronous JavaScript and XML.
• It is not a programming language but a group of web development technologies related to
each other, such as HTML, CSS, JavaScript, XML, and XSLT.
• Ajax can be used on the client side to create interactive web applications. Web site
applications empowered with Ajax can send data to and retrieve data from servers
asynchronously
PHP
• PHP stands for PHP: Hypertext Preprocessor and is one of the most popular open
source server-side scripting languages.
• It is a cross-platform, general-purpose language originally created by Rasmus Lerdorf
in 1994 for generating dynamic web pages.
• PHP is a widely used, free, and efficient alternative to competitors such as ASP.net.
What is the Web
• An information-sharing model involving a coordination of Internet servers that support
some specially formatted documents.
• Documents are formatted using HTML standard.
• It uses HTTP as its communication protocol.
 • Documents support links to other documents including graphics, audio and video files.
• The world wide web (web) is a network of information resources.
• The web relies on three mechanisms to make these resources readily available to the
widest possible audience:
• A uniform naming scheme for locating resources on the web (e.g., URLs).
• Protocols, for access to named resources over the web (e.g., HTTP).
• Hypertext, for easy navigation among resources (e.g., HTML).
History of the Web
• The www was invented by Tim Berners-Lee and Robert Cailliau, two researchers
working at CERN, the European Nuclear Research Centre (formerly, Centre European
pour la Recherche Nucleaire), located in Geneva, Switzerland (1989).
• World Wide Web (WWW) project, started in 1990.
• Tim Berners-Lee and others created W3C as an industry consortium dedicated to
building consensus around Web technologies
• Aimed at building a distributed hypermedia system embedded with resources, enabled for
accessing on servers and built over the Internet.
Domain Names
• Web resources can be located by unique IP addresses; however, IP addresses are difficult
to remember.
• Consequently, domain names are used instead in most cases.
• Figure 4-1 shows the relationship between a domain name and a URL;
www.example.com is a subdomain of the node example.com, which is the subdomain of
the com domain.
• The domain name syntax rules are defined by RFC 1035, RFC 1123 and RFC 2181.

Uniform Resource Identifier (URI)

• A Uniform Resource Identifier (URI) is a character string that identifies a name or a
resource on the Internet.
• URIs can be classified as Uniform Resource Locators (URLs) or Uniform Resource
Names (URNs).
• URL provides a method or specifications for finding resources on the Internet (including
protocol and path).
• URNs define a method for referencing an object without declaring the full path to the
object.
Parts of URL
HTTP URL Details

Focus Questions?
• Explain the following:
– Web page
– Index page
– Web site
– Web browser
– Web application
• Briefly describe how you would register for a domain name.
• Write down any 10 web hosting companies you know of
• Provide the full meaning of the following acronyms as applied in web technologies
– ICANN, JSON, AJAX, RSS, URI, XSLT
Web Browsers
• A web browser is an application software for accessing, traversing, retrieving, and
rendering information resources on the world wide web.
• A web browser can also be defined as an application software or program designed to
enable users to access, retrieve and view documents and other resources on the web.
• Although browsers are primarily intended to use the World Wide Web, they can also be
used to access information provided by web servers in private networks or files in file
systems.
• The major web browsers are: Chrome, Firefox, MS Edge, Opera, and Safari.

Browser Architecture
• The web browser architecture consist of eight major subsystems and the relationships that
exist between them:
1. The User Interface lies between the user and the browser engine.
• This includes the address bar, back/forward buttons, bookmarking menu etc.
• Basically every part of the browser display except the main window where you see the
requested page.
2. The Browser Engine: it’s the core software components of every major browser.
• its to transform HTML documents and other resources of the web page into an
interactive visual representation.
• subsystem provides an interface for the rendering engine.
• It is responsible for loading a given URI and supports browsing actions such as forward,
back, refresh/reload.
• It makes querying and manipulation of rendering engine settings possible.
3. The Rendering Engine: Its specifies web pages requested by the user on their screen.
subsystem is responsible for the visual representation of URI inputs.
• It interprets and displays HTML and XML documents, including embedded contents
(e.g. images, videos) if there are any.
• It is responsible for positioning of page elements within the page and sets up the page
layout. It includes the HTML parser.
4. Networking subsystem is where file transfer protocols FTP, SMTP and HTTP are
enforced.
• It resolves MIME(Multipurpose Internet Mail Extensions) types of files.
5. JavaScript Interpreter assesses Java scripts which may be embedded in web pages.
• Some JavaScript functionalities include pop up windows and these may be
blocked/disabled by the browser engine or rendering engine for security purposes.
6. The XML Parser subsystem is one of the most reusable subsystems in the architecture.
 • Almost all browser implementations enforce an existing XML Parser rather than building
their own from scratch.
• The Display Backend subsystem offers drawing and windowing primitives, a set of user
interface widgets, and a set of fonts. May be tied closely to the OS.
• 8. The Data Persistence subsystem stores various data associated with the browsing
session on disk.
• This may be high-level data such as bookmarks or toolbar settings, or it may be low-level
data such as cookies, security certificates, or cache.
Web Servers
• A Web server can refer to either the hardware (the computer) or the software (the
computer application) that helps to deliver web contents that can be accessed through the
Internet.
• The most common use of web servers is to host websites, but there are other uses such as
data storage or running enterprise applications.
• The primary function of a web server is to deliver web pages on the request to clients
using the Hypertext Transfer Protocol (HTTP).
• Some of the major web servers are:
– Apache
– Nginx
(pronounced, "engine-x")
– Apache Tomcat
– IIS
– Jigsaw
– Lighttpd
(pronounced, “lighty”)
– Klone.
– Zeus.
What is Application Server?
The Web Design Process
• Designing a web site goes through a series of steps refer to as the Web design process.
• The exact order in which the process is carried varies from organization to organization,
and developer to developer.
Phases of the Web Design Process
• The phases of the web design process include the following steps.
1. Project Definition
2. Project Scope
3. Site Architecture
4. Visual Design
5. Site Development
6. Site Testing
7. Launching
8. Site Maintenance
Project Definition
• Organizations have a need to communicate to stakeholders their positions on issues and
make audiences aware of their products and services.
• Many times the communication need, such as a web site, is triggered by a change of
strategic direction or a new offering.
• Identifying the reasons of the site’s existence and what it is supposed to achieve are the
first step in the process.
 • The goals and objectives that are established at the outset of the project inform all future
decisions, from site structure and naming conventions used in the navigation to the visual
design of the site.
• The first step in the definition process is interviewing the organization’s stakeholders to
identify the strategic goals of the site, understand key audience needs and identify key
competitors.
• The goal of the definition step is to identify three measurable key outcomes that are
directly related to the strategic goals of the organization.
• The challenge in this step is limiting the number of goals.
• Most organizations will have more goals than they know what to do with, and each
department believes their individual unit’s goals are the most important.
• Being able to bring focus to organizational goals will make developing the site easier and
make the final product more effective.
• Once all the information and assessments gathered from the stakeholder interviews are
completed, they should be collected in a well-formatted project brief.
• The brief contains the following elements.
1. Project summary: Outlines the general overview of the project, organizational
background, the environment the organization exists in, the people the organization
serves and the unique value it provides to its audience.
2. Goals: What are two or three specific measurable goals that the site should achieve?
Clear goals allow the Web team the ability to focus on what will provide the most impact
and move the organization forward.
3. Target audiences: Who will help the organization achieve its stated goals? Most
organizations speak to customers, stakeholders, internal audience, suppliers, partners, or
government institutions.
4. Messages: What are the key messages that attract and motivate key audiences to engage
with the organization? What are the key brand messages that help differentiate the
organization from its peers?
5. Competition: Who are rival organizations that provide similar offerings to your
audience? Include an overview of competitive organizations’ web sites, considering
visual branding, messaging, navigation, calls to action and key differentiators.
Project Scope
• Defining the scope of the project is a critical step.
• One of the most common frustrations with web, and other information system projects is
scope creep.
• By creating a well-defined project scope plan that outlines specific activities and
deliverables, along with specific timelines, you will be able to clearly set expectations for
your clients.
• One of the most common ways of tracking Web projects is through the use of a Gantt
chart.
 • A Gantt chart not only outlines major activities but also the tasks associated with each
activity and start and end dates.
• The Gantt chart provides a visual reference for the team, showing the timeframe of each
step and the dependencies between steps.
• The Gantt chart also creates accountability between the Web team and the client (which
could be an outside client or simply your boss), letting the client and the team know that
the delivery schedule is dependent on everyone hitting their marks; if someone misses a
date by a day, the entire schedule shifts by a day.
Site Architecture
• Site architecture includes the sitemap and wireframes of pages.
• Creating the sitemap ensures that you’ve considered all the key pages in the site, showing
their relationship to each other and defining how the sites overall navigation should be
structured.
• Wireframes provide a detailed view of the content that will appear on each page.
• Although they do not show any actual design elements, the wireframes provide a guide
for defining content hierarchy on the page.
• A good web design requires a solid site architecture based on the site's goals and target
audience established in the project brief.
• The deliverables from this phase are:
• Content Outline
• Site Diagram
• Wireframes / Page Description Diagrams
• These three deliverables need to be completed sequentially.
Site Structure – Content Outline
• Working closely with your clients, create a list of all existing content.
• Brainstorm content that needs to be created for the site.
• Review the list of content, trimming anything that does not match the goals or audience
needs as stated in the project brief.
• Take time to think about the future and how the site content might need to grow.
• Make sure you leave room for growth.
• Next group your content into categories.
• Once your categories are established, create an outline of your content and review it with
your clients for accuracy.
Site Structure – Site Diagram
• Take your final content outline and create a sitemap or site diagram.
• A site diagram is just a visual representation of your content outline and site structure.
• You can use MS Word, Visio or other relevant tools to create your site diagram.
Site Structure - Wireframe
• A wireframe is usually a non-graphical layout of a web page.
• It is a simple drawing of the chunks of information and functionality for each page in
your site. You will want to create a wireframe for the home page, each unique second
level page and any other significantly different page on the site.
• Wireframes include the containers for all the major elements of the page.
• Elements include navigation, images, content, functional elements (like search) and
footer.
Visual Design
• Once the blueprint for the site has been defined through the creation of the sitemap and
wireframes, the next step is to create a visual style.
• The overall visual style will most likely be determined by the visual brand of the
organization; the goal being to connect the Web with all other forms of the organization’s
communications.
• The organization’s brand plays an important role in this part of the process, as designers
will want to visually convey key brand perceptual ideas within the design.
Site Development
• With designs approved, it’s time to flesh out the design of the pages, develop new content
and refine old content, create videos, slideshows, podcasts and other media that will
appear on the site as well as start to build out the HTML and CSS of the site.
Site Testing
• Before the site is launched, it will be placed on a production server where only internal
audiences and anyone who you share the link with can view it.
• Testing of the site is critical as there will inevitably be issues that need to be addressed
before the site goes live.
• There is nothing that erodes a brand more than a site that doesn’t function properly or that
has misspellings or broken design elements.
• At this stage the site will need to be reviewed on multiple browsers (Firefox, Safari,
Internet Explorer) and multiple devices (laptops, tablets, and mobile) to see if and where
breaks occur.
Launching the Site
• Once the site is reviewed and approved by the project stakeholders, then you are ready to
launch and make it known to the world.
• Register a domain
• Find a hosting company
• Upload the website
• But once the site is launched, the project isn’t over.
• Be prepared to address feedback from users adapting to the new site.
 • Expect to make some immediate changes to the site, such as fixing broken links, editing
content and making adjustments.
• Note that the Web is a fluid medium that changes on a daily, if not hourly basis —
change is inevitable.
Site Maintenance
• Just like any other information system, websites constant care and maintenance.
• Updating content, making changes to the backend and fixing broken links are all in a
day’s work.
• All of these phases are critical to the Web design process.
• A proper maintenance strategy must therefore be put in place for your website projects.
• This will help organizations achieve a goal, move forward, and prosper in a competitive
environment.
Focus Questions
• What are the key functions of web browsers and web servers.
• In your own perspective, describe what you think should constitute the process of
developing a website.
• Outline the steps you would take in hosting your website with a hosting company
• Assume you want to setup your own web hosting company, outline key skillsets, and
resources you may need
Overview of HTML
• HTML stands for HyperText Markup Language.
• The idea behind HTML was born at the European Laboratory for High Energy Physics
(CERN) in Geneva, Switzerland, as early as 1989 .
• A year later, the World Wide Web project was also started there.
• The purpose was to make it easier for scientists at different universities and research
laboratories to gain access to research documents of their colleagues .
• An HTML document is simply a text file(may also contain images, video or audio) that
contains the information you want to publish and the appropriate markup instructions
indicating how the browser should structure or present the document.
• Markup elements are made up of a start tag, such as <p>, and typically, though not
always, an end tag, which is indicated by a forward slash within the tag, such as </p>.
• The tag pair should fully enclose any content to be affected by the element, including text
and other HTML markups.
HTML Elements and Tags
 • An HTML element consists of both the content and its markup.
• A tag consists of the element name(usually an abbreviation of a longer descriptive name)
within angle brackets( < > ).
• The element name appears in the opening or start tag and again in the closing or end tag
preceded by a forward slash(/).
• The tags added around contents are referred to as the markup.
• It is important to note that an element consists of both the content and its markup(the start
and end tags).
• Elements that have content are referred to as Containers. e.g <p>some text</p>
• However, not all elements have content, and these are referred to as Empty elements.
e.g <input type=“text” name=“textbox” />
<input type=“text” name=“textbox”>
Attributes
• Attributes are instructions that clarify or modify an element.
• Attributes allow us to add extra information to an element.
• The img element for example requires the src (short for “source”) attribute to provide the
location of the image via its path or URL.
• The syntax for adding attributes is as follows:
<element name attribute-name=“value”>Content</element name>
 <element name attribute-name=“value” />
<img src=“myphoto.jpg” alt=“This is my photo” />
<h2 style =“text-align: center; color:#FF0000”>
This is a heading content formatted according to the CSS rules specified using the style attribute.
</h2>
HTML Comments
• Just as comments are used in programming to document codes, HTML comments are not
displayed by the browser, but they can help document your HTML.
• With comments you can place notifications and reminders in your HTML document.
• The syntax for HTML comments is given below:
• <!-- Your comment goes here -->
e.g <!-- This is a comment in HTML -->
<!-- Do not display this at the moment
<img src="pic_mountain.jpg" alt="Mountain">
-->
HTML Document Structure
• The way a document is marked up with elements and their attributes is according to a
Document Type Definition(DTD).
• DTD are set of rules that govern the way in which a document can be marked up.
• The authoritative source for information about HTML and the HTML DTD is the World
Wide Web Consortium(W3C) at http://www.w3c.org.
Basic HTML5 Document Structure

<!DOCTYPE html>
<html lang=“en”>
<head>
<title> Title of web page goes here. </title>
<meta name= “viewport” content= “width=device-width, initial-
scale=1.0”>
</head>
<body>
Main content of the web page goes here.
This is what is displayed in the web browser window
</body>
</html>
Detailed HTML5 Document Structure

<!DOCTYPE html>
<html lang=“en”>
The <!DOCTYPE> Tag
• The Document Type , or doctype for short is indicated by the <!DOCTYPE> tag in
HTML documents.
• This specifies the rules for the document language so the browser knows how to
interpret the HTML code and display it properly.
The <html>…</html> Tag
• The <html> </html> tags surround the entire HTML document and its referred to as the
root element.
• The root element is the container element for all other elements in the document
• The opening tag ; <html> tells the browser that, whatever content that comes after it
should be treated as an HTML content until the browser meets the closing tag </html>.
The <head> </head> Tags
• The <head> </head> tags specify the header segment of any HTML document.
• The <title> </title> tags are used within the <head> </head> tags to specify the title of a
given web page.
• Other tags such as <meta>, <link>, <style> and <script> are also used within the
<head> tag of an HTML document.

The <body>…</body> Tag

 • The <body>…</body> tag of a web page play an important role with regards to the
page’s actual content .
• The body element contains information about the page’s background color, the
background image, as well as the text and link colors, and all other items that are
displayed on a web page.
• If the body element is left blank, web browsers will revert to their default settings.
Creating Syntactically Correct Code
• The following six(6) rules are worth following in creating syntactically correct codes:
1. Documents must be well-formed.
2. All tags must nest properly and not overlap. e.g <p><b> bold text</b></p>
3. Use all lowercase for element names. e.g: <p>
4. Always use closing tags. e.g <p>some text</p>
5. Empty elements are marked with a closing forward slash: e.g <br />
6. Attribute values must be contained in quotation marks: e.g <img
src=“myselfie.jpg” />
Color Codes
• Colors are set using color names, HEX, RGB, HSL, RGBA, and HSLA codes.
• There are several resources available on the Internet that chart colors and their
hexadecimal values.
• Check this site for some details:
• https://www.w3schools.com/Html/html_colors.asp

RGB COLOR HEXADECIMAL VALUE

White #FFFFFF

Black #000000

Red #FF0000

Green #00FF00

Blue #0000FF

Magenta #FF00FF

Cyan #00FFFF
 Yellow #FFFF00

Aquamarine #70DB93

Baker’s Chocolate #5C3317

Violet #9F5F9F

Brass #B5A642

Copper #B87333

Pink #FF6EC7

Orange #FF7F00

Specifying Color using RGB Values

• In HTML, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)
• Each parameter (red, green, and blue) defines the intensity of the color between 0 and
255.
• For example, rgb(0, 0, 255) is displayed as blue, because blue is set to its highest value
(255) and the others are set to 0.
• To display the color black, all color parameters must be set to 0, like this: rgb(0, 0, 0).
• To display the color white, all color parameters must be set to 255, like this: rgb(255,
255, 255).
Specifying Color using Hex Values
• In HTML, a color can be specified using a hexadecimal value in the form: #rrggbb
• Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff
(same as decimal 0-255).
• For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and
the others are set to the lowest value (00).
Specifying Color using HSL Values
• In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness)
• Hue is a degree on the color wheel from 0 to 360. e.g. 0 is red, 120 is green, and 240 is
blue.
• Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
 • Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white

Specifying Color using names and Codes

<style>
div{
background-color: #9d00ff;
color: white;
}
span{
background-color: hsl(277, 100%, 50%);
color: rgb(255,255,255);
}
</style>

HTML Entities
• HTML entities define a way of representing reserved HTML characters and special
characters not present on your keyboard.
• For instance if you use the less than (<) or greater than (>) signs in your text, the browser
might mix them with tags.
• Entities in HTML documents are represented as: &entity_name; or &#entity_number ;
• E.g &lt; or &#60; for the less than(<) symbol.

Result Description Entity Name Entity Number

non-breaking space &nbsp; &#160;

< less than &lt; &#60;

> greater than &gt; &#62;

& ampersand &amp; &#38;

¢ cent &cent; &#162;

£ pound &pound; &#163;

 ¥ yen &yen; &#165;

€ euro &euro; &#8364;

© copyright &copy; &#169;

® registered trademark &reg; &#174;

Creating a Web Page using HTML

1. Choose a text editor(e.g notepad, notepad++, sublime Text).

2. Launch the chosen text editor.
3. In the chosen text editor’s working area, type the required elements of a basic HTML document a
below.
<!DOCTYPE html>
<html lang=“en”>
<head>
<title> My First Web Page</title>
<meta name= “viewport” content= “width=device-width, initial-scale=1.0”>
<meta charset=“UTF-8”>
</head>
<body>
</body>
</html>

4. Type a text content of your choice within the <body> </body> tags of the document
structure.
5. From the File menu of your chosen text editor, click on Save As and choose a suitable
location for saving your file.
6. In the File name: text box enter “filename.html” and in the Save as type: combo box,
choose All Files if you used Notepad or Hyper Text Markup Language
file(*.html;*.htm;*.shtml;*.shtm;*.xhtml;*.hta) if you used notepad++.
7. Click on the Save button to return to the window of your chosen text editor.
8. Navigate to the location where you saved your “filename.html” ; it should appear in the
icon of the default web browser on your PC with the name “filename” .
9. Double click on it to preview your page in the browser.
Practice Session
1. Launch a text editor of your choice.
 2. Type the required HTML document structure.
3. Type the text below in the body segment of the document structure produced in step 2.
Hi Pals!. HTML is really easy to learn. All you need is a simple text editor and a web browser
and you are good to go. The most important thing here is to learn and understand the various
tags that are used within the body segment of the entire document structure. Any way, thanks to
my Web Technologies lecturer!
4. Save the file as firstpage.html a folder you created earlier.
5. Double click on the ‘firstpage.html’ to preview it in your default browser.
6. Go back to the file ‘firstpage.html’ and right-click on it and then select edit with…..and
choose the text editor you used.
7. Make changes to the file, save it and preview the edited version in your chosen browser.
Focus Questions
1. Differentiate between HTML tags and HTML elements with examples.
2. Produce a sample HTML page that shows your curriculum vitae using a text editor of
your choice and preview the file in a browser of your choice.
3. Find out and read on the evolution of HTML from HTML 1.1 to HTML5.
4. List and explain the new elements in HTML 5.
Formatting HTML Documents
• Formatting is about modifying the appearance of text and other contents on a web page.
• According to the current trend of web development, formatting web pages is better
handled using CSS.
• The commonly used tags for formatting within HTML documents are:
• <h1> Heading 1</h1>. The heading tags are from <h1> through to <h6>, with <h6>
being the smallest.
• <p>Paragraph</p><pre> Preformatted Text</pre>
HTML Text Formatting Tags

Tag Description

<b> Defines bold text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines smaller text

<strong> Defines important text

 <sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted text

Formatting HTML Documents

• Note: Browsers display <strong> as <b>, and <em> as <i>.
• However, there is a difference in the meaning of these tags: <b>and <i> defines bold and
italic text, but <strong> and <em> means that the text is "important".
HTML Quotation and Citation Tags

Tag Description

<abbr> Defines an abbreviation or acronym

<address> Defines contact information for the author/owner of a

document

<bdo> Defines the text direction

<blockquote> Defines a section that is quoted from another source

<cite> Defines the title of a work

<q> Defines a short inline quotation

The HTML <abbr> Element

• The HTML <abbr> element defines an abbreviation or an acronym.
• Marking abbreviations can give useful information to browsers, translation systems and
search-engines.
• <p>The <abbr title="World Health Organization">WHO</abbr> was founded in
1948.</p>
 The HTML <q> for Short Quotations
• The HTML <q> element defines a short quotation.
<p>Check this out:
<q>Ignore the distractions around you, for in the calmness of your mind , you will experience its
enormous capabilities.</q>
</p>
The HTML <cite> for Work Title
• The HTML <cite> element defines the title of a work.
• Browsers usually display <cite> elements in italic.
• E.g. <p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
The HTML <bdo> Element
• The HTML <bdo> element defines bi-directional override.
• The <bdo> element is used to override the current text direction:
• E.g. <bdo dir="rtl">This text will be written from right to left</bdo> when
previewed in the web browser produces:

Creating Lists in HTML

1. HTML supports ordered, unordered and definition lists.
2. It is also possible to nest one type of list within another in HTML documents.
Ordered List
• An ordered list is a list in which the list items are numbered sequentially.
• Ordered lists are enclosed in the <ol> </ol> tags.
• Each list item is placed within the <ol> </ol> tags using the <li> </li> tags
• Example:
<h3>my favorite reggae icons:</h3>
<ol type=“A” >
<li> Joseph Hill </li>
<li> Burning Spear</li>
<li> Buju Banton </li>
<li> Bob Marley </li>
</ol>

The type attribute of the <ol> tag

• You can display different kinds of ordered list using the type attribute of the <ol> tag .
• The table below is a guide to using the type and style attributes.
 TYPE STYLE DESCRIPTION EXAMPLES

A upper-alpha Uppercase letters A. B. C. D.

a lower-alpha Lowercase letters a. b. c. d.

I upper- Uppercase Roman numerals I. II. II. IV

roman

i lower- Lowercase Roman numerals i. ii. Iii. iv

roman

1 decimal Arabic numerals(default) 1. 2. 3. 4.

Unordered List
• Unordered list is used when the list of items does not have any necessary sequence of
appearance.
• It is also called a bulleted list.
• A bullet is a decorative label assigned to each item in a list.
• Unordered lists are enclosed in the <ul> </ul> tags.
• Each list item is placed within the <ul> </ul> tags using the <li> </li> tags
• The syntax for the unordered list is similar to that of ordered list with the type attribute
set to circle, disc or square.
• You may also use the style attribute to specify your type of bullet
• A style attribute can be added to an unordered list, to define the style of the marker:

Style Description

list-style-type:disc The list items will be marked with bullets (default)

list-style-type:circle The list items will be marked with circles

list-style-type:square The list items will be marked with squares

list-style-type:none The list items will not be marked

<html>
<head>
<title>Unordered List </title>
</head>
<body>
Definition Lists
• This is used to present a term and its definition formatted like a glossary or a dictionary.
• It is the ideal format to present lists of words or phrases with their meanings.
• The tags used are
<dl>
<dt> Definition Term </dt>
<dd> Definition Description </dd>
</dl>

Summary of List Elements

Tag Description

<ul> </ul> Defines an unordered list

<ol> </ol> Defines an ordered list

<li> </li> Defines a list item

<dl> </dl> Defines a description list

<dt> </dt> Defines the term in a description list

<dd> </dd> Defines the description in a definition list

File Paths
• A file path describes the location of a resource in a web site's folder structure.
• File paths are used when locating files and web resources such as:
– Web pages
– Multimedia contents (images, video, and audio)
– Style sheets
– JavaScripts
File Paths – Absolute and Relative
• An absolute file path is the full URL to an internal or external resource:
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
• A relative file path points to a resource relative to the current page.
• In this example, the file path points to a file in the images folder located at the root of the
current web page:
<img src="images/myPicture.jpg" alt="Mountain">

Creating Links-
• A static web page contains no links within the document or to other documents.
• In order to give users some interactivity and control over our web pages, we need to
incorporate links to files or other pages of interest.
• Creating links in HTML documents is an important step in web site development because
it adds the “hyper” to the term hypertext.
• A hypertext document is one that contains elements called LINKS that allow users to
activate a particular part of the screen and perform some action.
• These actions include:
• Moving to another part of the same web page.
• Opening another web page on the same web site.
• Opening a web page on a web site somewhere else in the world.

Types of Links
• There are three main types of links namely:
1. Intra-page links
– These are links to items located within a single document or web page.
2. Intra-system links
– These are links to other pages of the same web site.
 3. Inter-system links
– These are links to web pages or documents located on other web sites or web
servers.

HTML Link Syntax

• The general format for creating links in HTML is given by:
<a href=“URL”>Object to click</a>
• The URL defines the path to the resource to be displayed when one clicks on the “Object
to click”.
• The “Object to click” defines the part to be displayed and it does not have to be always
text.
• It could also be an image or any other HTML element.
• The href (Hypertext Reference) attribute defines the link’s address.
The target Attribute
• The target attribute of the <a> tag defines where the linked document will be opened.
• The code below opens the linked document in a new browser window.
<html>
<head> <title>Setting the target attribute to _blank </title> </head>
<body>
<a href=“http://www.aamusted.edu.gh/” target=“_blank”> Visit AAMUSTED</a>
<p>
If you set the target attribute of the <a> tag to “_blank”, the document will open in a new
browser window. </p>
</body>
</html>

Values for the target Attribute

ATTRIBUTE VALUE DESCRIPTION

_blank Opens the linked document in a new browser

window.

_self Opens the linked document in the same frame

as it was clicked(this is default).
 _parent Opens the linked document in the parent
frameset.

_top Opens the linked document in the full body of

the browser window.

_framename Opens the linked document in a named frame

Links – Creating a Bookmark

• HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
• Bookmarks can be useful if your webpage is very long.
• To make a bookmark, you must first create the bookmark, and then add a link to it.
• When the link is clicked, the page will scroll to the location with the bookmark.
• This is also referred to as named anchor.
• First, create a bookmark with the id attribute:
<h2 id="C4">Chapter 4</h2>
• Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:
<a href="#C4">Jump to Chapter 4</a>
• Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:
• Example
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Some Examples of Links
• Intra-Page Link:
<a href=“#L5”>Lecture Five</a>
• Intra-System Link:
<a href=“contacts.html”>Contact Us</a>
• Inter-System Link:
<a href=“https://www.google.com/”>Google</a>
The URL for intra-page links use named anchors.
The URL for intra-system links is mostly relative.
The URL for inter-system links is absolute
Linking to Email Addresses
• In addition to linking between parts of a single web page, web pages and websites, the
<a> tag allows you to link to email addresses.
• This is the simplest way to enable visitors to your site, to talk back to you via a clickable
link to your email address.
• An HTML link to an email address looks like the following:
<a href=“mailto:[email protected]”>Email me.</a>
Example: <a href=“mailto:[email protected]”>Email us.</a>

Adding Multimedia in HTML

• Without multimedia in HTML documents, a web page is just a collection of text.
• Multimedia is collective name for images, music, sound, video, animations and other
special effects on a web page.
• The support for multimedia is handled in different ways by different browsers.
• Some multimedia elements can be handled inline, and some require an extra helper
program referred to as plug-in.
Common Image Formats

IMAGE DESCRIPTION FILE

FORMAT EXTENSION

GIF Graphics Interchange Format .gif

JPEG Joint Photographers Experts Group .jpg/.jpeg

PNG Portable Network Graphics .png

PDF Portable Document Format .pdf

TIFF Tagged Image File Format .tif/.tiff

BMP Bit Mapped Picture .bmp

Adding Images to Web Pages
• Images are inserted into HTML documents using the the <img /> tag.
• The src attribute is the only required attribute of the <img /> tag.
• This attribute tells the browser where to find the image that is to be inserted into the web
page.
• The alt attribute provides a text-based description of the image.
• Other attributes of the <img /> tag include height, width and align
Example with the <img /> tag
<html>
<head>
<title>Adding Images</title>
</head>
<body style=“background-color:#fff;”> <!-- Background color is set to white -->
<p>Here is a picture of a great reggae icon </p>
<img src=“images/culture.jpg” alt= “Joseph Hill” /> <br>
<p>Actually , this is Joseph Hill (Culture) from Jamaica. </p>
</body>
</html>
Adding Audio Content to Web Pages
• The <audio> tag is used to embed sound content such as music or voice streams in web
pages .
• The <audio> tag contains one or more <source> tags with different audio sources.
• The web browser chooses the first source it supports.
• The text between the <audio> and </audio> tags will be displayed for browsers that do
not support the <audio> element.
• The three highly supported audio formats in HTML are MP3, WAV, and OGG.
Adding Audio Content – Example
<!DOCTYPE html>
<html lang=“en”>
<head>
<title>Audio Element</title>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
</head>
<body>
<h2>Adding Audio Content</h2>
<p>Click on the play button to play a sound:</p>
<audio controls>
<source src=“sounds/coolsound.ogg” type=“audio/ogg”>
<source src=“sounds/coolsound.mp3” type=“audio/mpeg”>
Your browser does not support the audio element, update it.
</audio>
</body>
</html>

Adding Video Content to Web Pages

• Video files are collection of images usually with a related sound file.
• The <video> tag is used to embed video content such as a movie clip or other video
streams in web pages .
• The <video> tag contains one or more <source> tags with different video sources.
• The web browser chooses the first source it supports.
• The text between the <video> and </video> tags will be displayed for browsers that do
not support the <video> element.
• The three highly supported video formats in HTML are MP4, WebM, and OGG.

Adding Video Content – Example

<!DOCTYPE html>
<html lang=“en”>
<head>
<title>Video Element</title>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
</head>
<body>
<h2>Adding Video Content</h2>
<p>Click on the play button to play the video:</p>
<video width=“320” height=“240” controls>
<source src=“videos/coolvideo.mp4” type=“video/mp4”>
<source src=“videos/coolvideo.ogg” type=“video/ogg”>
Your browser does not support the video element.
</video>
</body>
</html>

Focus Questions?
1. Create three related web pages and link them together using the <a> </a> tag.
2. Using the <img /> tag, insert your own photograph in one of the pages created above.
3. Using the <audio> and <video> tags insert audio and video contents into the web pages
you created.

Presenting Information in Tables

 Tables provide an excellent way to organize and display information on web pages.
 Tables are defined using the <table> </table> tag pair.
 A table is divided into rows with the <tr> </tr> tag pair, and each row is divided into
data cells using the <td> </td> tag pair.
 The letters td stand for “table data” which is the content of a data cell.
 A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, and
so on.
 The HTML <table> element contains the table information, which consists of table
header elements(<th>), table row elements(<tr>), and individual table data
cells(<td>).
 These are the three elements used most frequently when you are building tables.

HTML Table Elements

Element Description

<table>…..</table> Establishes the table. It contains all other elements

that specify caption, rows, and content

<tr>…..</tr> Table row. It contains the table cells.

 <td>……</td> Table data cell. This contains the actual table data.

<th>……</th> Table header cell: It contains header information for

a column of data.

<caption>….</caption> Provides a short description of the table’s contents.

<thead>…..<thead> Signifies table header.

<tbody>…..<tbody> Signifies table body

<tfoot>……<tfoot> Signifies table footer

Using the border and width Attributes

• The border attribute is used to specify the thickness of the lines that make the table.
• The width attribute specifies how wide the table should be in the browser window or
relative to other layout elements.
• It is a good practice to specify the table width in percentages.
• The example below sets values the border and the width attributes of a table.
<table border=“1” width=“35%”>
Other codes that make up the table go here
</table>

Spanning Columns
• The colspan attribute lets you create cells that span multiple columns of a table.
• Column cells always span to the right.
• The syntax is given as:
<tr>
<td colspan=“number of columns”> Content goes here.</td>
</tr>
• Example:
<tr>
<td colspan=“3”>
This text spans across 3 columns.
</td>
</tr>
Spanning Rows
• The rowspan attribute lets you create cells that span multiple rows of a table.
• Rows always span down.
• The syntax is given as:
<tr>
<td rowspan=“number of rows”> Content goes here.</td>
</tr>
• Example:
<tr>
<td rowspan=“4”> This text spans across 4 rows down.</td>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
</tr>
Organizing HTML Table Contents
• For code organization, rows can be grouped into head, body, and footer sections using the
<thead>, <tbody>, and <tfoot> elements respectively. E.g
• <table>
• <thead>
• <tr><th>Header Cell 1</th> <th>Header Cell 2</th> </tr>
• </thead>
• <tbody>
• <tr> <td>Body Cell 1</td> <td>Body Cell 2</td> </tr>
• <tr><td>Body Cell 3</td> <td>Body Cell 4</td> </tr>
• </tbody>
• <tfoot>
• <tr><td>Footer Cell 1</td> <td>Footer Cell 2</td> </tr>
• </tfoot>
• </table>

Applying Style to the Table

• Styling table elements enhances the appearance of the table and the information presented
in it.
 • This is best achieved using CSS.
• The CSS style rules could be specified within the head section of the HTML file using
the <style> element.
• We provide a CSS style rule code segment that styles any given HTML table.

Common type values for the <input /> tag.

Type Value Description

text Defines a single line text box

file Defines a textbox with a browse button. ( For file uploads)

hidden Defines a hidden text field

checkbox Defines a checkbox.

radio Defines a radio button.

submit Defines a pushbutton.

reset Defines a reset button.

password Defines a password field.

Image Defines an image button

Button Defines a button

Different HTML Input types

<input type=“text” />
<input type=“password” />
<input type=“radio” />
<input type=“range” />
<input type=“reset” />
<input type=“search” />
<input type=“submit” />
<input type=“tel” />
<input type=“time” />
<input type=“url” />
<input type=“week” />
<input type=“button” />
<input type=“checkbox” />
<input type=“color” />
<input type=“date” />
<input type=“datetime-local” />
<input type=“email” />
<input type=“file” />
<input type=“hidden” />
<input type=“image” src=“path to image file” />
<input type=“month” />
<input type=“number” />

Some Common Form Elements

TAG DESCRIPTION

<form> </form> Defines a form for user input

<input /> Defines an input field

<textarea> </textarea> Defines a textarea (a multiline text input

control)

<label> </label> Defines a label to a form control

<fieldset> </fieldset> Defines a fieldset around a number of form

controls

<legend> </legend> Defines a title for a fieldset

<select> </select> Defines a selectable list(a drop-down box)

<option> </option> Defines an option in a drop-down box

Using the <select> Element
• The <select> ..</select> element makes it possible to create a list of items from which
end users make choices.
• The <select> </select> tag pair is used with the <option> </option> tag pair to create
the list of items.
<form action=“display.php” method=“post”>
<p>Select your favourite car:</p>
<select >
<option>Toyota Camry </option>
<option>Lexus EX 350</option>
<option>Nissan Altima </option>
<option>VW Passat </option>
<option>Rang Rover Evoque </option>
<option>Infinity </option>
</select>
</form>

The <textarea> Element

• The <textarea> element lets you create a text area for user inputs larger than a simple text
box
• The cols and rows attributes are used to specify the width and height of the text area.
• Using a textarea (a multiline text input control), a user can write an unlimited number of
characters.
<p>Please tell us your story here:</p>
<p>
<textarea name=“story” rows=“8” cols=“45” >
Enter your story here…
</textarea>
</p>
Creating Submit and Reset Buttons
• The submit and reset button input types let the user send form data to be processed or
clear the form and start all over.
• The following code snippet shows addition of submit and reset buttons
<p>
<input type=“submit” name=“btn_submit” value=“Submit Story” />
<input type=“submit” name=“btn_reset” value=“Clear the form” />
</p>
Image can also be used for buttons as shown in the example below:
<input type=“image” name=“btn_image” src=“submit.png”
alt=“Submit button” />
Creating Check Boxes
• Check boxes let users choose more than one option from a given set if they so desire.
• Check boxes are the way to go if users are to provide more than one answer to MCQs.
<p>Choose day(s) that you will be available:</p>
<p>
<input type=“checkbox” name=“day1” value=“Sunday” />Sunday<br />
<input type=“checkbox” name=“day2” value=“Monday” />Monday<br />
<input type=“checkbox” name=“day3” value=“Tuesday” />Tuesday<br />
<input type=“checkbox” name=“day4” value=“Wednesday” />Wednesday<br />
<input type=“checkbox” name=“day5” value=“Thursday” />Thursday<br />
<input type=“checkbox” name=“day6” value=“Friday” />Friday<br />
<input type=“checkbox” name=“day7” value=“Saturday” />Saturday<br />
</p>
Creating Radio Buttons
• Radio buttons let users choose only one option from a given set of options.
• Radio buttons are the way to go if users are to provide only one answer to MCQs.
<p>Choose a day that we can contact you:</p>
<p>
<input type=“radio” name=“day” value=“Sunday” />Sunday<br />
<input type=“radio” name=“day” value=“Monday” />Monday<br />
<input type=“radio” name=“day” value=“Tuesday” />Tuesday<br />
<input type=“radio” name=“day” value=“Wednesday” />Wednesday<br />
<input type=“radio” name=“day” value=“Thursday” />Thursday<br />
<input type=“radio” name=“day” value=“Friday” />Friday<br />
<input type=“radio” name=“day” value=“Saturday” />Saturday<br />
</p>
The action Attribute of the <form> tag
• When a user clicks a Submit button on a form, the content of the form is sent to the
server.
• The form’s action attribute defines the name of the file to send the contents to for further
processing.
• The file defined in the action attribute usually does something with the received input.

Introduction to Scripting
• Scripting is the act of writing little computer programs that can enhance the appearance
and functionality of web page.
• Scripts are executed either at the server-side or at the client-side.
• This leads to two categories of scripting:
– Server-side scripting and
– Client-side scripting.
Server-Side Scripting
• Server-side scripting is a web server technology in which a user's request is fulfilled by
running a script directly on the web server to generate dynamic web pages.
• This is different from client-side scripting where scripts are run by the viewing web
browser.
• It is usually used to provide interactive web sites that interface to databases or other data
stores.
• The primary advantage to server-side scripting is the ability to highly customize the
response based on the user's requirements, access rights, or queries into data stores.
• Some commonly used server-side scripting languages are:
• PHP (*.php)
• ASP/ASP.NET (*.asp/*.aspx)
• Perl (*.pl)
• ColdFusion Markup Language (*.cfm)
• Java via JSP(*.jsp)
• Python (*.py)
• Ruby (*.rb)
Client-Side Scripting
• Client-side scripting is a type of scripting that does all of its processing on the user's own
computer.
• It is commonly used to create pop-up windows, instant-redirect pulldown menus,
shopping-cart calculations, and mouseover effects (i.e., menus or images that change
when the user's mouse passes over them).
 • Javascript is the most popular client-side scripting language
The <script> </script> Tag Pair
• The <script > </script> container is used to enclose the actual elements of the scripting
language.
• The common attributes of this tag are:
src, type and language
• The src attribute is used to specify the URL of an external script into the HTML
document.
• The external source file should contain no HTML codes and must use the appropriate file
extension.
• e.g: <script src=“coolscripts.js”></script>
• The type attribute should always be used with <script> container.
• It is used to specify the scripting language used for a particular script.
E.g
<script type=“text/javascript”>
alert( “Javascripts codes go here!”);
</script>

Scripts in Head Section

• Scripts to be executed when they are called, or when an event is triggered, go in the head
section.
• When you place a script in the head section, you will ensure that the script is loaded
before anyone uses it.
<html>
<head>
<script type="text/javascript">.
alert(“Just saying Hi with JS in the head section!”);
</script>
</head>
</html>

Scripts in Body Section

• Scripts to be executed when the page loads go in the body section.
• When you place a script in the body section it generates the content of the page.
<html>
<head>
</head>
<body>
<script type="text/javascript">
alert(“Just saying Hi with JS in the body section!”);
</script>
</body>
</html>

Scripts in Head and Body Sections

• You can place an unlimited number of scripts in your document, so you can have scripts
in both the body and the head section.
<html>
<head>
<script type="text/javascript">
Javascript Statements
</script>
</head>
<body>
<script type="text/javascript">
Javascript Statements
</script>
</body>
</html>

Using External Scripts

• Sometimes you might want to run the same JavaScript on several pages, without having
to write the same script on every page.
• To simplify this, you write a JavaScript in an external file.
• Save the external JavaScript file with a .js file extension.
• Note: The external script must not contain the <script> tag.
• To use the external script, point to the .js file in the "src" attribute of the <script> tag:
<script type=“text/javascript” src=“externaljsfile.js”></script>
Summary
• HTML tables make it possible for web developers present information on web pages in
an organized manner.
• The <table> </table> tags describe the entire table structure.
• The <tr> </tr> tags define a row in the table.
• The actual information to be presented in the table is surrounded by the <td> </td> tags
which are further placed in the <tr> </tr> tags.
• Web developers use HTML forms to accept inputs from end users of web sites and web
applications.
• The <form> </form> tag pair is used to surround the form controls; which are the real
elements that allow end users to provide their inputs.
• The action and method attributes of the <form> tag are very important to add
interactivity to web sites and web applications.
• Scripting is lightweight programming.
• Scripting brings programmability to markup languages.
• Server-side scripts run on the server and send their result in a form of HTML codes to the
browser for onward display to end users.
• Client-side scripts are interpreted by the scripting parsers of the browser architecture.

Focus Questions/Action
 Visit https://www.w3schools.com and read on the following:
1. HTML Layout
2. HTML Responsive Web Design
3. HTML5 new Elements.
What is a CSS?
 CSS is stands for Cascading Style Sheets.
 CSS is a language that defines style constructs such as fonts, colors and positions which
are used to describe how information on a web page is formatted and displayed.
 CSS is a style language that defines layout and appearance of HTML documents.
 CSS, is the recommended way to control the presentation layer in web document projects
by creating robust style rules.

Overview of CSS
• A style sheet is a grouping of formatting instructions that can control the appearance of
many HTML pages at once.
• CSS enables you to set a great number of formatting characteristics that were never
possible before with any amount of effort.
Benefits of Using CSS
• By externalizing the presentation layer, CSS offers a number of significant benefits:
1. All styling is kept in a limited number of style sheets.
2. There is some saving on bandwidth.
3. The separation of content from presentation makes it easier for site owners to reuse the
content for other purposes.
4. Separate styling rules can be used for different output media.

Types of Style Sheets

 Style sheets are classified according to how they are applied to the HTML documents.
 There are three types of style sheets.
 These are:
 External Styles
 Internal (Embedded) Styles.
 Inline Styles
External Style Sheet
• An external style sheet is ideal when the style is applicable to many pages.
• With an external style sheet, you can change the look of an entire web site by changing
one file.
• Each page must reference the external style sheet using the <link> tag.
• The <link> tag goes inside the <head> section of your HTML page as shown in below:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css“ />
</head>

Internal Style Sheet

• An internal style sheet can be used if one single document has a unique style.
• Internal styles are defined in the <head> section of an HTML page, by using the <style>
tag, like this:
• <head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
Inline Styles
 • An inline style can be used if a unique style is to be applied to one single occurrence of
an element on a web page.
• To use inline styles, use the style attribute in the start tag of the relevant element.
• The style attribute can contain any CSS property value pairs.
• The example below shows how to change the text color and the left margin of a
paragraph:
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

Using the <div> and <span> Elements

 The <div> (division) and the <span> (span of words) elements are designed to be used
with CSS.
 These elements let you specify logical divisions within a document that have their own
names and style properties.
 <div> is a block-level element and <span> is its inline equivalent.

CSS Document Structure

o In order to work in CSS, one must be familiar with some markup languages like HTML
or XHTML so that you can add personalized styles on the markup documents.
o This is because CSS rules are applied to HTML or XHTML elements.

CSS Syntax - Selector

 Selector: the selector is used to 'select' or 'target' the HTML element that you want to
style.
 This is how we tell the web browser to apply a particular style to a particular html
element.
 For instance, let's say you want to style all the paragraphs on your web pages.
 The letter "p" would be our selector name and it targets (selects) all paragraphs.
CSS Rule
 A rule or "rule set" is a statement that tells browsers how to render particular elements on
an HTML page.
 A rule set consists of a selector followed by a declaration block.
 Each declaration consists of a property and a value.
 A CSS declaration always ends with a semicolon.
 Declaration groups are surrounded by curly brackets.

 Declaration Block: is everything between the curly brackets.

  What you see between these curly brackets are referred to as Property: Value pairs.
 This is how we define the formatting properties we want to apply to our web pages.

CSS Selectors
 Rules or Style Declarations begin with CSS Selectors.
 The Selector is very important because it tells the web browser which HTML element to
style.
 The following are the Core CSS Selectors:
 Tag or Element
 Descendant
 Pseudo-Class
 Universal
 Id
 Class

Tag or Element Selectors

 Tag selector is simply the HTML tag you are styling, but without the angular brackets.
 In most CSS the tag selector is combined with other selectors
 Tag selectors can be applied as:

body {margin: 0px; padding: 0px;}

Descendant Selectors
 A descendant selector matches any element that is a descendant of another—in other
words, an element that is nested at any level inside another.
 To create a descendant selector, separate the two selectors by a space, and putting the
descendant (nested) element on the right.
 For example, the following style rule changes the font size of paragraphs nested at any
level inside a <blockquote> tag:
blockquote p { font-size: 13px; }

Pseudo-class Selectors
 Pseudo-classes and pseudo-elements are used to apply styles to elements based on their
state or position in the document.
 Apply a pseudo-class or pseudo-element by appending it to a basic selector.
  For example, a:link applies the :link pseudo-class to the <a> tags.
 The p:first-letter applies the :first-letter pseudo-element to the <p> tags.

Universal Selectors
 Universal Selector is indicated with an asterisk *.
 The purpose of this selector is to make style one time and it will be applied to every
single elements on the web page
 The most common use of the universal selector is to remove, or zero out, all margins and
padding. For example,
* {margin: 0px; padding: 0px;}

Id Selector
 An Id Selector is indicated by preceding its name by the pound # sign.
 Id selectors are used for page elements that appear one time on a web page and require
unique formatting instructions.
 For example, an Id selector could be :
#dare { text-indent: 3em }
 This would be referenced in HTML by the id attribute as shown here:
<p id= “dare” >Text indented 3em</p>

Class Selector
 A class selector’s name is preceded by a full stop (.).
 Unlike Id selectors, a class selector can be applied to several elements on a web page.
 An example would be if you want to give all the paragraphs on your web page the same
styling.
.note {background-color: #013370;
color: white;
font-size: small;
}
 This would be referenced in HTML by the class attribute of the element:
<p class= “note” >This my paragraph</p>

Styling Background
• CSS background properties are used to define the background effects of an element.
• CSS properties used for background effects:
 – background-color
– background-image
– background-repeat
– background-attachment
– background-position

Background Color
• The background-color property specifies the background color of an element.
• The background color of a page is defined in the body selector:
body {background-color:#b0c4de;}
• The background color can be specified by:
– Name - a color name, like "red"
– RGB - an RGB value, like "rgb(255,0,0)"
– Hex - a hex value, like "#ff0000“

Background Image
• The background-image property specifies an image to use as the background of an
element.
• By default, the image is repeated so it covers the entire element.
• The background image for a page can be set like this:
• Example
body {background-image: url(‘path to the image file’);}

Styling Links
 Links can be style with any CSS property such as color, font-family, and background-
color.
 Links can be styled differently depending on what state they are in.
 The four link states and the order of styling them are:
a:link - normal, unvisited link
a:visited – link’s state when the user has visited it
a:hover – link’s state when the user mouses over it
a:active – link’s state the moment it is clicked
 a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
 a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
 When setting the style for several link states, these order rules must be applied:
 a:hover MUST come after a:link and a:visited
 a:active MUST come after a:hover

Focus Questions
Visit https://www.w3schools.com and read on the following:
1. Attribute selectors
2. Combinator selectors,
3. Pseudo-elements selector,
4. The CSS Box Model.