CSC-114
Introduction to Information
and Communication
Technology
Lecture - 10:
HTML & CSS
Dr. Muhammad Tariq Siddique
Department of Computer Sciences
Bahria University, Karachi Campus, Pakistan
[Link]@[Link]
Faculty room 14, 2nd Floor, Iqbal
Block
Topics to be
covered
Looping
1 Web Programming
2 HTML
3 XHTML
4 DHTML
5 CSS
6 Android Programming
8
Web Programming
Section - 1
Web Programming
Web programming refers to the writing, markup and coding
involved in Web development, which includes Web content, Web
client and server scripting and network security.
The most common languages used for Web programming are
XML, (D)HTML, JavaScript and PHP.
© Dr. Tariq 2024 Department of Computer Science | Bahria University 4
HTML: HyperText Markup Language
• HTML documents are simply text documents with a
specific form
• Documents comprised of content and markup tags
• Content: actual information being conveyed
• The markup tags tell the Web browser how to display the
page
• An HTML file must have an htm or html file extension (e.g.
[Link])
• An HTML file can be created using a simple text editor
© Dr. Tariq 2024 Department of Computer Science | Bahria University 5
Our First Example
If you are running Windows,
start Notepad <html>
<head>
Type in the following:
<title>BSCS-1B</title>
Save the file as </head>
“[Link]” <body>
Open this file using a This is my first homepage. <b>This text is bold<
browser, and you will see… </body>
</html>
© Dr. Tariq 2024 Department of Computer Science | Bahria University 6
HTML Tags
• HTML tags are used to mark-up HTML elements
• Surrounded by angle brackets < and >
• HTML tags normally come in pairs, like <tagname> (start tag)
and </tagname> (end tag)
• The text between the start and end tags is the element content
• Not case-sensitive
• Follow the latest web standards:
• Use lowercase tags
© Dr. Tariq 2024 Department of Computer Science | Bahria University 7
Tag Attributes
• Tags can have attributes that provide additional
information to an HTML element
• Attributes always come in name/value pairs like: name=“value”
• Attributes are always specified in the start tag
• Attribute values should always be enclosed in quotes. Double
quotes are most common.
• Also case-insensitive: however, lowercase is recommended
• <tagname a1=“v1” a2=“v2”></tagname>
• For example, <table border=“0”> is a start tag that defines a
table that has no borders
© Dr. Tariq 2024 Department of Computer Science | Bahria University 8
HTML Document Structure
• Entire document enclosed within <html> and </html>
tags
• Two subparts:
([Link]
• Head
• Enclosed within <head> and </head>
• Within the head, more tags can be used to specify title of the page, style,
Link or meta-information, etc.
• Body
• Enclosed within <body> and </body>
• Within the body, content is to be displayed
• Other tags can be embedded in the body
© Dr. Tariq 2024 Department of Computer Science | Bahria University 9
Script Examples
• Adding scripts to HTML pages can make them more
dynamic and interactive
• Common uses for JavaScript are Image Manipulation, Form
Validation, and Dynamic changes of content.
• Examples from W3schools
[Link]
sp
© Dr. Tariq 2024 Department of Computer Science | Bahria University 10
What is XHTML?
• XHTML is a stricter and cleaner version of HTML
• EXtensible HyperText Markup Language
• aimed to replace HTML
• identical to HTML 4.01
• combination of HTML and XML (EXtensible Markup Language)
• W3C Recommendation
© Dr. Tariq 2024 Department of Computer Science | Bahria University 11
Why XHTML?
• Many pages contain “bad” HTML
<html>
<head> <title>This is bad HTML</title>
<body> <h1>Bad HTML </body>
• XML is a markup language where everything has to be
marked up correctly, which results in “well-formed”
documents
• Different browser technologies require “good” markup
language
• XHTML combines the strengths of HTML and XML
© Dr. Tariq 2024 Department of Computer Science | Bahria University 12
Important Differences From HTML
• XHTML DOCTYPE is mandatory
• XHTML elements must be properly nested
• XHTML elements must always be closed
• XHTML elements must be in lowercase
• Examples
• [Link]
© Dr. Tariq 2024 Department of Computer Science | Bahria University 13
XHTML Example
© Dr. Tariq 2024 Department of Computer Science | Bahria University 14
What is DHTML?
DHTML is a TERM describing the art of making dynamic and
interactive web pages.
It uses a host of different technologies - JavaScript, VBScript, the
Document Object Model (DOM), cascading stylesheets - to create
HTML that can change even after a page has been loaded into a
browser
© Dr. Tariq 2024 Department of Computer Science | Bahria University 15
What is DHTML?
It is considered to be made up of
– HTML
– Cascading Style Sheets (CSS)
– Scripting language
All three of these components are linked via Document Object Model (DOM)
DOM is the interface that allows scripting languages to access the content,
style, and structure of the web documents and change them dynamically
© Dr. Tariq 2024 Department of Computer Science | Bahria University 16
Tools of DTHML
HTML and XML
– Partitions and Organizes the content
CSS
– Defines the Presentation of the content
Scripting - JavaScript, JScript, VBScript
– Adds interactivity to the page
DOM- Document Object Model
– Defines what and how elements are exposed for script access
© Dr. Tariq 2024 Department of Computer Science | Bahria University 17
Components of DHTML
DHTML requires four independent components to work: HTML, Cascading
Style Sheets, Scripting and the Document Object Model. The section provides
a brief description of each component.
1. HTML: HTML defines the structure of a Web page, using such basic elements as
headings, forms, tables, paragraphs and links. On December 18, 1997, HTML 4.0
attained "recommended" status at the W3C. Changes and enhancements
introduced in HTML 4.0 made DHTML possible.
2. Cascading Style Sheets (CSS): Similar to a template in a word-processing
document, a style sheet controls the formatting of HTML elements. Like in
traditional desktop publishing, one can use style sheet to specify page margins,
point sizes and heading. Cascading Style Sheets is a method to determine
precedence and to resolve conflicts when multiple styles are used.
© Dr. Tariq 2024 Department of Computer Science | Bahria University 18
Components of DHTML
3. Scripting: Scripting provides the mechanisms to interpret user actions and
produce client-side changes to a page. For example, scripts can interpret mouse
actions (such as the mouse passing over a specified area of a page through the
event model) and respond to the action by using a set of predefined instructions
(such as highlighting the text activated by the mouse action). Although DHTML can
communicate with several scripting languages, JavaScript is the de facto standard
for creating cross-browser DHTML pages.
4. Document Object Model (DOM): The DOM outlines Web page content in a way
that makes it possible for HTML elements, style sheets and scripting languages to
interact with each other. The W3C defines the DOM as "a platform- and language-
neutral interface that will allow programs and scripts to dynamically access and
update the content, structure, and style of documents. The document can be
further processed and the results of that processing can be incorporated back into
the presented stage."
© Dr. Tariq 2024 Department of Computer Science | Bahria University 19
CSS
Section - 2
CSS
CSS stands for:
Cascading
Style
Sheets
Describes the “look and feel” of HTML
elements on a web page.
Helps separate document content (HTML)
from document presentation (CSS).
Structures presentation elements such as
layout, colors, and fonts.
21
© Dr. Tariq 2024 Department of Computer Science | Bahria University 21
CSS
A style sheet contains a list of rules about how elements appear on a
page.
Consists of a selector and a declaration block:
• Selectors tell which markup elements the style applies to.
• A declaration block is a list of property and value pairs that define the
style.
h1 {
Can be embedded
font-family: inside
Verdana, Geneva, the HTML or linked as a separate
sans-serif;
document.
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
color: #C00;
}
22
© Dr. Tariq 2024 Department of Computer Science | Bahria University 22
Android Programming
Section - 3
What is Android?
• Android is a software
stack for mobile devices
that includes an operating
system, middleware and
key applications.
© Dr. Tariq 2024 Department of Computer Science | Bahria University 24
What is Android?
A software platform and operating system for mobile devices
Based on the Linux kernel
Developed by Google and later the Open Handset Alliance
(OHA)
Allows writing code in the Java language
Unveiling of the Android platform was announced on
5 November 2007 with the founding of OHA.
© Dr. Tariq 2024 Department of Computer Science | Bahria University 25
OHA (Open Handset Alliance)
A business alliance consisting of 47 companies to develop open
standards for mobile devices
© Dr. Tariq 2024 Department of Computer Science | Bahria University 26
Versions of Android
© Dr. Tariq 2024 Department of Computer Science | Bahria University 27
History of Android
© Dr. Tariq 2024 Department of Computer Science | Bahria University 28
Android Architecture
© Dr. Tariq 2024 Department of Computer Science | Bahria University 29
Android S/W Stack - Application
Android provides a set of core applications:
Email Client
SMS Program
Calendar
Maps
Browser
Contacts
Etc
All applications are written using the Java language.
© Dr. Tariq 2024 Department of Computer Science | Bahria University 30
Framework
Enabling and simplifying the reuse of components
Developers have full access to the same framework APIs used by the core
applications.
© Dr. Tariq 2024 Department of Computer Science | Bahria University 31
Android S/W Stack - Libraries
Including a set of C/C++ libraries used by components of the Android
system
Exposed to developers through the Android application framework
© Dr. Tariq 2024 Department of Computer Science | Bahria University 32
Android S/W Stack - Runtime
Core Libraries
Providing most of the functionality available in the core libraries of the Java
language
APIs
Data Structures
Utilities
File Access
Network Access
Graphics
Etc
© Dr. Tariq 2024 Department of Computer Science | Bahria University 33
Dalvik Virtual Machine
The Dalvik runtime is optimized for mobile applications
© Dr. Tariq 2024 Department of Computer Science | Bahria University 34
Android S/W Stack – Runtime (Cont)
Dalvik Virtual Machine
Providing environment on which every Android application runs
Each Android application runs in its own process, with its own instance of the
Dalvik VM.
Dalvik has been written such that a device can run multiple VMs efficiently.
Provides Abstraction and Neutral platform to run apps
© Dr. Tariq 2024 Department of Computer Science | Bahria University 35
Android S/W Stack – Runtime (Cont)
Dalvik Virtual Machine (Cont)
Executing the Dalvik Executable (.dex) format
.dex format is optimized for minimal memory footprint.
Compilation
© Dr. Tariq 2024 Department of Computer Science | Bahria University 36
Android S/W Stack – Runtime (Cont)
© Dr. Tariq 2024 Department of Computer Science | Bahria University 37
Android S/W Stack – Linux Kernel
Relying on Linux Kernel 2.6 for core system services
Memory and Process Management
Network Stack
Driver Model
Security
Providing an abstraction layer between the H/W and the rest of the S/W stack
© Dr. Tariq 2024 Department of Computer Science | Bahria University 38
Information and
Communication
Technology
(CSC-101)
Lecture – 10 Thank Any
HTML & CSS Questions ?
You
Dr. Muhammad Tariq Siddique
Department of Computer Sciences
Bahria University, Karachi Campus, Pakistan
[Link]@[Link]
Faculty room 14, 2nd Floor, Iqbal
Block
