Web Dev Part I 1

Web Application
Development!
Part I
Trainer: Gul M Chaudhary

Web Application development
Agenda
•Introduction
•Client Side Technologies (Static Web Sites)
•Server Side Technologies (Dynamic Web Sites)
•Basic XHTML
•Structure of Document
•Elements
•Text Level Elements
•Special Characters
•XHTML Rules & Guideline
Introduction
Introduction to Internet
The Internet is simply “network of computers that are connected to each
other”
World Wide Web

The World Wide Web (known affectionately as “the Web”) is just
one of the ways information can be shared over the Internet
Introduction
Server
The computers that make up the Internet. Because they “serve up”
documents upon request, these computers are known as servers. More
accurately, the server is the software (not the computer itself) that
allows the computer to communicate with other computers.
• Apache
• Microsoft Internet Information Server(IIS)
• Domain Name System(DNS)
Introduction
Client
The software that does the requesting is called the client. On the Web,
the browser is the client software that makes requests for documents
• Internet Explorer
• Firefox
• Safari
• Opera
• Netscape
Introduction
Web page
A web page is a data file with the extension .html. And like any other
data file it can be edited, moved around between folders, renamed and
so on. It usually contain text, graphics, multimedia components.
Web Site
A website, then, is a collection of web pages, or several HTML files. A
site will usually (but not always) have a coherent theme, and probably a
consistent visual style.
Introduction
Web page URL(Uniform Resource Locator)

Putting it all together
HTML
• HTML stands for Hyper Text Markup Language
• Hyper Text is the method by which you move around on the web by
clicking on special text called hyperlinks which bring you to the next
page. The fact that it is hyper just means it is not linear i.e. you can
go to any place on the Internet whenever you want by clicking on
links there is no set order to do things in.
• Markup is what HTML tags do to the text inside them. They mark it
as a certain type of text
• HTML is a Language, as it has code-words and syntax like any other
language
• HTML is not a programming language, it is a markup language
• A markup language is a set of markup tags
• HTML uses markup tags to describe web pages
XHTML
• XHTML stands for EXtensible Hyper Text Markup Language
• Supposed to replace HTML
• Nearly identically to HTML 4.01
• XHTML is a stricter and cleaner version of HTML
• XHTML consists of all the elements in HTML 4.01, combined with the
strict syntax of XML.
HTML element
Basic document structure
Attributes
<element attribute-name="value">Content</element>
<element attribute-name="value" />
Attributes
• Attributes go after the element name in the opening tag only, never
in the end tag.
• There may be several attributes applied to an element, separated
by spaces in the opening tag. Their order is not important.
• Attributes take values, which follow an equals sign (=). A value
might be a number, a word, a string of text, a URL, or a
measurement depending on the purpose of the attribute.
• Always put values within quotation marks. Although quotation
marks aren’t required around all values in HTML, they are required
in XHTML.
• Some attributes are required, such as the src and alt attributes in
the img element.
• The attribute names available for each element are defined in the
(X)HTML specifications; in other words, you can’t make up an
attribute for an element.
XHTML Text Element
• Block-level elements for text content
XHTML Text Element
Paragraphs
Paragraphs are the most rudimentary elements of a text document.
You indicate a paragraph with the p element. Simply insert an
opening tag at the beginning of the paragraph and a closing
 tag after it, as shown in this example.
Serif typefaces have small slabs at the ends of letter strokes. In general,
serif fonts can make large amounts of text easier to read.
Sans-serif fonts do not have serif slabs; their strokes are square on the
end. Helvetica and Arial are examples of sans-serif fonts. In general, sans-
serif fonts appear sleeker and more modern.
XHTML Text Element
Headings
XHTML Text Element
Long quotations
If you have a long quotation, a testimonial, or a section of copy from another source, particularly
one that spans four lines or more, you should mark it up as a blockquote element. It is
recommended that content within blockquotes be contained in other elements, such as paragraphs,
headings, or lists, as shown in this example.
Renowned type designer, Matthew Carter, has this to say about his profession:
<blockquote>
Our alphabet hasn't changed in eons; there isn't much latitude in what a designer can do with
the individual letters.
Much like a piece of classical music, the score is written down – it’s not something that is
tampered with – and yet, each conductor interprets that score differently. There is tension in the
interpretation.
</blockquote>
XHTML Text Element
Preformatted text
It is a unique element in that it is displayed exactly as it is

typed including all the carriage returns and multiple
character spaces. By default, preformatted text is also
displayed in a constant-width font
XHTML Text Element
Horizontal Rules
Horizontal rules use to add a divider between sections, you can insert a
horizontal rule (hr) element between blocks of text. When browsers see an
hr element, they insert a shaded horizontal line in its place by default.
Because horizontal rules are block-level
<h3>Times</h3>
Description and history of the Times typeface.
<hr />
<h3>Georgia</h3>
Description and history of the Georgia typeface.
XHTML Text Element
Addresses
The address element that is used to provide contact information for the author or
maintainer of the document. It is generally placed at the beginning or end of a
document or a large section of a document. You shouldn’t use the address
element for all types of addresses, such as mailing addresses, so its use is fairly
limited.
<address>
Contributed by <a href="../authors/robbins/">Jennifer Robbins</a>,
<a href="http://www.w3schools.com/">Basic Learning media</a>
</address>
XHTML Text Element
Lists
There are three main types of lists in (X)HTML:

•Unordered lists. Collections of items that appear in no particular
order.
•Ordered lists. Lists in which the sequence of the items is
important.
•Definition lists. Lists that consist of terms and definitions.
XHTML Text Element
Lists
Unordered lists
<ul>
<li>Serif</li>
<li>Sans-serif</li>
<li>Script</li>
<li>Display</li>
<li>Dingbats</li>
</ul>
XHTML Text Element
Lists
Ordered lists
<ol>
<li>Gutenburg develops moveable type (1450s)</li>
<li>Linotype is introduced (1890s)</li>
<li>Photocomposition catches on (1950s)</li>
<li>Type goes digital (1980s)</li>
</ol>
XHTML Text Element
Lists
Definition lists
<dl>
<dt>Linotype</dt>
<dd>Line-casting allowed type to be selected, used,...</dd>
<dt>Digital type</dt>
<dd>Digital typefaces store the outline of…..
Postscript emerged as a standard due to…..
</dd>
</dl>
XHTML Text Element
Line Breaks

So much depends upon a red wheel barrow

XHTML Text Element
Assignment
XHTML Text Element
• Inline Text Element
• Semantic elements: The semantic elements describe

the meaning of the text
• Presentational elements: The presentational elements

provide descriptions of the element’s typesetting or style
XHTML Text Element
• Semantic Inline elements:

XHTML Text Element
Emphasis
Garamond is a really
popular typeface, but Times is a
really really popular
typeface.
XHTML Text Element
Short quotations
Matthew Carter says, <q>Our alphabet

hasn't changed in eons.</q>
XHTML Text Element
Abbreviations and acronyms
<acronym title="American Type Founders">ATF</acronym>

<abbr title="Points">pts.</abbr>
XHTML Text Element
Citations
Passages of this article were inspired by

<cite>The Complete Manual
of Typography</cite> by James Felici.
XHTML Text Element
Defining terms
<dfn>Script typefaces</dfn> are based on

handwriting.
XHTML Text Element
Program code elements

XHTML Text Element
Inserted and deleted text
Chief Executive Officer:<del title="retired">Peter Pan</del><ins>Pippi

Longstockings</ins>
XHTML Text Element
• Presentational inline elements

XHTML Text Element
• Presentational inline elements

Special Characters
Questions/Suggestions?

Web Dev Part I 1

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Dev Part I 1

Uploaded by

Copyright:

Available Formats

Web Application

Trainer: Gul M Chaudhary

World Wide Web

Web page URL(Uniform Resource Locator)

It is a unique element in that it is displayed exactly as it is

There are three main types of lists in (X)HTML:

• Semantic elements: The semantic elements describe

• Presentational elements: The presentational elements

• Semantic Inline elements:

• Semantic Inline elements:

• Semantic Inline elements:

Matthew Carter says, <q>Our alphabet

• Semantic Inline elements:

Abbreviations and acronyms

<acronym title="American Type Founders">ATF</acronym>

• Semantic Inline elements:

<p>Passages of this article were inspired by

• Semantic Inline elements:

<p><dfn>Script typefaces</dfn> are based on

• Semantic Inline elements:

Program code elements

• Semantic Inline elements:

Inserted and deleted text

Chief Executive Officer:<del title="retired">Peter Pan</del><ins>Pippi

• Presentational inline elements

• Presentational inline elements

You might also like