7/28/2019 Lecture 2 - Basics - 18 Aug 2011
http://slidepdf.com/reader/full/lecture-2-basics-18-aug-2011 1/20
1 © 2011 – Muhammad Waseem Khan - KICSIT
Lecture # 2
WEB DESIGN & DEVELOPMENT
7/28/2019 Lecture 2 - Basics - 18 Aug 2011
http://slidepdf.com/reader/full/lecture-2-basics-18-aug-2011 2/20
2 © 2011 – Muhammad Waseem Khan - KICSIT
• Procedural
• Non-Procedural
• Object-Oriented
•
Markup• Scripting
Programming Languages
7/28/2019 Lecture 2 - Basics - 18 Aug 2011
http://slidepdf.com/reader/full/lecture-2-basics-18-aug-2011 3/20
3 © 2011 – Muhammad Waseem Khan - KICSIT
• Programmer writes a program that
tells the computer what to do and
how to do it.
• Examples
– JavaScript, Java, Visual BASIC, C++,
FORTRAN
Procedural Languages
7/28/2019 Lecture 2 - Basics - 18 Aug 2011
http://slidepdf.com/reader/full/lecture-2-basics-18-aug-2011 4/20
4 © 2011 – Muhammad Waseem Khan - KICSIT
• Programmer writes a program that
tells the computer what to do, but not
how to do it.
• Examples
– Structured Query Language (SQL)
Non- Procedural Languages
7/28/2019 Lecture 2 - Basics - 18 Aug 2011
http://slidepdf.com/reader/full/lecture-2-basics-18-aug-2011 5/20
5 © 2011 – Muhammad Waseem Khan - KICSIT
• Evolution from Procedural Languages
• Objects
–
Properties – Methods
– Events
•
Examples – JavaScript, VBScript, Java, C++, C#
OO Languages
7/28/2019 Lecture 2 - Basics - 18 Aug 2011
http://slidepdf.com/reader/full/lecture-2-basics-18-aug-2011 6/20
6 © 2011 – Muhammad Waseem Khan - KICSIT
• Programmer writes a program that
tells a host application such as a
browser how to present (markup)
content information on a web page.
• Examples
– HTML, XHTML, DHTML, XML
Markup Languages
7/28/2019 Lecture 2 - Basics - 18 Aug 2011
http://slidepdf.com/reader/full/lecture-2-basics-18-aug-2011 7/207 © 2011 – Muhammad Waseem Khan - KICSIT
• Characteristics
– Programmer writes a program that a web browser
executes as it interprets the program.
– Formatting language that tells the browser how to
render or parse the content in a web page.
– Program works within the context of an application such
as a browser – it does not stand on its own.
• Examples
–
JavaScript, VBScript
Scripting Languages
7/28/2019 Lecture 2 - Basics - 18 Aug 2011
http://slidepdf.com/reader/full/lecture-2-basics-18-aug-2011 8/208 © 2011 – Muhammad Waseem Khan - KICSIT
• Markup – Embedded codes in documents
– Codes are called „TAGS‟
– Codes• Describe the structure documents
•
Include instructions for processing• Markup language
– Computer language for describing syntax of tags
– May be used with other tools to specify rendering
– SGML• Standard Generalized Markup Language
–HTML
• Hypertext Markup Language
– XML• Extensible Markup Language
– XHTML• Extensible Hypertext Markup Language
Markup Languages
7/28/2019 Lecture 2 - Basics - 18 Aug 2011
http://slidepdf.com/reader/full/lecture-2-basics-18-aug-2011 9/209 © 2011 – Muhammad Waseem Khan - KICSIT
Markup Languages
• SGML
– Standard published in 1983.
– Defines document structure rather than how it looks.
– Complex and difficult to learn.
• HTML
– First “offspring” of SGML.
– Uses grammar of SGML.
– Standard web page markup language for many years.
– Commands programmers use to create web pages.
– Simple markup language for formatting text.
– Fixed set of tags to define style and structure.
7/28/2019 Lecture 2 - Basics - 18 Aug 2011
http://slidepdf.com/reader/full/lecture-2-basics-18-aug-2011 10/2010 © 2011 – Muhammad Waseem Khan - KICSIT
Markup Languages
• HTML Characteristics
– Defines how information should appear.
– Limited of number of tags.
– HTML commands include tags and content.
– Tags and content makeup an ASCII text file.
– Unstructured format.
– Browsers interpret the markup tags and
display the content on a web page in a
browser.
– Provides no provision for expansion.
7/28/2019 Lecture 2 - Basics - 18 Aug 2011
http://slidepdf.com/reader/full/lecture-2-basics-18-aug-2011 11/2011 © 2011 – Muhammad Waseem Khan - KICSIT
Markup Languages
• XML Characteristics
– Focuses on structure, not how it looks.
– Another “offspring” of SGML.
– Compatible with SGML.
– Defines type of information.
– Structured.
– Extensible.
• Programmer can extend language beyond
its predefined elements.
– Older browser can't read XML documents.
7/28/2019 Lecture 2 - Basics - 18 Aug 2011
http://slidepdf.com/reader/full/lecture-2-basics-18-aug-2011 12/2012 © 2011 – Muhammad Waseem Khan - KICSIT
Markup Languages
• XHTML Characteristics – Reformulation of HTML into an XML application.
– Uses elements of HTML and syntax of SGML.
– Has the structure of XML.
–
Combines advantages of sibling languages (HTML &XML).
– Provides migration path from HTML to XML.
– Current recommended standard of W3C.
• XHTML Advantages – Extensibility
• Programmer can extend language beyond its predefined
elements.
– Portability
•
Makes web documents accessible across platforms.
7/28/2019 Lecture 2 - Basics - 18 Aug 2011
http://slidepdf.com/reader/full/lecture-2-basics-18-aug-2011 13/2013 © 2011 – Muhammad Waseem Khan - KICSIT
Markup Languages
• HTML: Problems – Web is not just for the PC anymore.
– Web accessed by a variety of devices.
• Cell phones
•
Personal Digital Assistants (PDAs)• Pagers
– New devices are not visually oriented.
• Changes are needed to accommodate these devices.
– Browser vendors add proprietary tags to their own
version of language. – Other browsers cannot parse these proprietary tags.
– Web programmers cannot add custom tags.
– HTML programmers write sloppy code – browser
manufacturers write code to handle sloppy HTML code.
7/28/2019 Lecture 2 - Basics - 18 Aug 2011
http://slidepdf.com/reader/full/lecture-2-basics-18-aug-2011 14/2014 © 2011 – Muhammad Waseem Khan - KICSIT
Markup Languages
• SOLUTION XML
– Microsoft developed Extensible Markup
Language (XML) to solve many
problems.
7/28/2019 Lecture 2 - Basics - 18 Aug 2011
http://slidepdf.com/reader/full/lecture-2-basics-18-aug-2011 15/2015 © 2011 – Muhammad Waseem Khan - KICSIT
Structure of HTML/ XHTML
• 3 Parts to an XHTML or HTML
document
– DOCTYPE
• What DTD are you using
– Head
• Meta information
• Only <title> is required
– Body
• Text to render
7/28/2019 Lecture 2 - Basics - 18 Aug 2011
http://slidepdf.com/reader/full/lecture-2-basics-18-aug-2011 16/2016 © 2011 – Muhammad Waseem Khan - KICSIT
Structure of HTML/ XHTML
7/28/2019 Lecture 2 - Basics - 18 Aug 2011
http://slidepdf.com/reader/full/lecture-2-basics-18-aug-2011 17/2017 © 2011 – Muhammad Waseem Khan - KICSIT
Basic Layout
• <HTML>
• The first page structure tag in every HTML page is
the <HTML> tag. It indicates that the content of
this file is in the HTML language.• All the text and HTML commands in your HTML
page should go within the beginning and ending
HTML tags, like this:
• <HTML>
...your page...
</HTML>
7/28/2019 Lecture 2 - Basics - 18 Aug 2011
http://slidepdf.com/reader/full/lecture-2-basics-18-aug-2011 18/2018 © 2011 – Muhammad Waseem Khan - KICSIT
Basic Layout
• Each HTML page needs a title to indicate what the
page describes .
• <TITLE> tags always go inside the page header • <HTML>
<HEAD>
<TITLE>This is My HOMEPAGE!!!</TITLE>
</HEAD>
<BODY>....
</BODY>
</HTML>
•
You can have only one title in the page
7/28/2019 Lecture 2 - Basics - 18 Aug 2011
http://slidepdf.com/reader/full/lecture-2-basics-18-aug-2011 19/2019 © 2011 – Muhammad Waseem Khan - KICSIT
Save and View?
• Saving the File – The filename should have an extension of .html (.htm on
DOS or Windows systems that have only three-character
extensions), for example, filename.html or text.html or
index.htm
– Use small, simple names. Don't include spaces or
special characters (bullets, accented characters)-just
letters and numbers are fine.
• View the Results – Open Microsoft's Internet Explorer.
– Go view menu item
– Select source
– Browse your selected html file
–
Last ,refresh the page.
7/28/2019 Lecture 2 - Basics - 18 Aug 2011
http://slidepdf.com/reader/full/lecture-2-basics-18-aug-2011 20/2020 © 2011 – Muhammad Waseem Khan - KICSIT
Head and Body
• Head Tag – The <HEAD> tag specifies that the lines within the
beginning and ending points of the tag are the
introduction to the rest of the file.
– There generally are only a few tags that go into the
<HEAD> portion of the page (most notably, the pagetitle, described later).
• Body Tag
– The remainder of your HTML page, including
all the text and other content (links, pictures,and so on) is enclosed within a <BODY> tag.
Recommended