Lecture 2 - Basics - 18 Aug 2011

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




• Procedural

• Non-Procedural

• Object-Oriented

•

Markup• Scripting

Programming Languages




• 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





tells the computer what to do, but not

how to do it.

• Examples

– Structured Query Language (SQL)

Non- Procedural Languages




• Evolution from Procedural Languages

• Objects

–

Properties – Methods

– Events

•

Examples – JavaScript, VBScript, Java, C++, C#

OO Languages





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


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



• 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



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.



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.



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.



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.



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.



Markup Languages

• SOLUTION XML

– Microsoft developed Extensible Markup

Language (XML) to solve many

problems.



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



Structure of HTML/ XHTML



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>



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



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.



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.

Lecture 2 - Basics - 18 Aug 2011

Documents

Transcript of Lecture 2 - Basics - 18 Aug 2011