INTRODUCTION TO
INFORMATION &
COMMUNICATION
TECHNOLOGY (ICT)
LECTURE 5 : WEEK 5
CSC-111-T
TEXT AND REF. BOOKS
2
Text Book:
Peter Norton (2011), Introduction to Computers, 7 /e, McGraw-Hill
Reference Book:
Gary B (2012), Discovering Computers, 1/e, South Western
Deborah (2013), Understanding Computers, 14/e, Cengage Learning
MOBILE ALERT
Kindly
Switch Off
your Mobile/Cell Phone
OR
Switch it to Silent Mode Please
GOOGLE SITE ADDRESS
FOR LECTURE NOTES AND STUDY MATERIAL
DOWNLOAD, PLEASE VISIT :
https://sites.google.com/site/
shucsc110
/
OR
TYPE “
SHUCSC110
” &
G
O
O
G
L
E
MSc. Telecomm. & Network Management, UK
Masters (CS), Bahria University Khi, Pakistan
Prince2 Project Management (Foundation) Certified
Microsoft Certified Professional (MCP)
Presented by: Flt. Lt. Shujaat H. Butt (R)
INTRODUCTION TO WEB
PROGRAMMING
Learning Outcome
◻ Intro to web programing
◻ Intro to HTML
◻ Intro to XHTML
◻ Intro to DHTML
Web Programming
7
◻ 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
8
HTML:
H
yper
T
ext
M
arkup
L
anguage
◻ 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
Our First Example
◻ If you are running
Windows, start Notepad
◻ Type in the following:
◻ Save the file as “Sample.html”
◻ Open this file using a browser, and you will see…
9
<html> <head>
<title>Title of page</title> </head>
<body>
This is my first homepage. <b>This text is bold</b> </body>
10
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:
11
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>
12
HTML Document Structure
◻ Entire document enclosed within <html> and </html> tags
◻ Two subparts: (http://www.w3schools.com/tags/tag_head.asp)
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
13
Useful References…
◻
HTML Basics:
14
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
15
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)
16
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
17
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
What is DHTML?
Dynamic HTML, or DHTML, is an umbrella term
for a collection of technologies used together to create interactive and animated web sites
It uses a host of different technologies - JavaScript, VBScript, the Document Object Model (DOM), layers, cascading stylesheets - to create HTML that can change even after a page has been loaded into a browser
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
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
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 leading. Cascading Style Sheets is a method to determine precedence and to resolve conflicts when multiple styles are used.
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."
What is Android?
◻ Android is a software
stack for mobile devices that includes an
OHA (Open Handset Alliance)
◻ A business alliance consisting of 47 companies to
Market Share
26
Android S/W Stack - Application
◻ Android provides a set of core applications:
✔ Email Client
✔ SMS Program
✔ Calendar
✔ Maps
✔ Browser
✔ Contacts
✔ Etc
Android S/W Stack – App Framework
◻ Enabling and simplifying the reuse of components
✔ Developers have full access to the same framework APIs used by the core applications.
Android S/W Stack - Libraries
29
◻ Including a set of C/C++ libraries used by
components of the Android system
◻ Exposed to developers through the Android
Android S/W Stack - Runtime
30
◻ 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
Android S/W Stack – Runtime
(Cont)
31
◻ 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.
Android S/W Stack – Runtime
(Cont)
32
◻ Dalvik Virtual Machine (Cont)
✔ Executing the Dalvik Executable (.dex) format
.dex format is optimized for minimal memory footprint. Compilation
✔ Relying on the Linux Kernel for:
Threading
Android S/W Stack – Linux Kernel
33
● Relying on Linux Kernel 2.6 for core system services
✔ Memory and Process Management
✔ Network Stack
✔ Driver Model
✔ Security