unit-2 introduction to html prepared by: prof. harish i rathod computer engineering department...

Unit-2 Introduction to HTMLPREPARED BY:

PROF. HARISH I RATHOD

COMPUTER ENGINEERING DEPARTMENT

GUJARAT POWER ENGINEERING & RESEARCH INSTITUTE

WEB APPLICATION DEVELOPMENT (170705)

The Development Process

• A Web site is generally composed of individual pages.

• Each pages are linked together.

• Each page relating to a different aspects(part) of web site,

• Ex: news, links, contact us etc…

GPERI – WAD - UNIT-2 2


• A Web development having following satges:• Requirement.• Design.• Write Code.• Test.• Upload.• Re-iterate.



Requirement:• It is important to understand the requirement of problem(site)

before build it.• It can be seen from the point of view of both graphics design and

functionality.• The best idea is, make some sketches at the start to play with ideas.• Then we can work out which pages should link to each other.



Design:• This stage tries to provide a solution to match the requirements.• It also consider, what is possible with the various technologies that

are available.• Some times hand coding, although more precise, can simply not be

fast enough to meet a deadline!• We may get help from application such as Dreamwear.• Web site can require a large amount of work with art and graphics

as well as code tools.GPERI – WAD - UNIT-2 5


Write Code:• This is the point where we start writing our HTML code.• Hand coding is slow but precise (exact or accurate) and usually

easier to follow.• Generated script and HTML from an application may sometimes

also be non-standard.



Test:• After spending some time working on web site, we want to see

what it looks like.• We load a web page in browser.• Then it is possible to show, what a page look like.



Upload:• When we happy with our page, we may publish it for public

viewing.

Re-Iterate:• It is an instruction to do the above again until we got it right and it

work without bugs.


Basic HTML

• HTML can be considered as the main language of the Web in some respects.

• All browsers understand it because of its simplicity.• Initially we develop static pages;• Means, page can not change depending on user input or

interaction. • The aim of HTML is to format a Web page hopefully (confidently).


Basic HTML

Loading Pages with the Browser:• A page can be loaded into a browser in a couple of way:

• By writing a URL in the address bar,

• By going to the menu and click on ‘file’ then ‘open’.


Basic HTML

A Page on the Web:• How do we start? • If we point a web browser at a document it will do its best to read it.• For ex:• If we use ‘open’ on the file menu of our browser and enter the name

of a local file called hello.txt containing simple text:

Hello

• It will actually read and display it.


Basic HTML

HTML Document Structure:• To make a ‘real’ Web we need to add some elements and rename

the file to either htm or hml. • To create a HTML document:• Open a new blank file in editor and write some code:<html>

A little bit of hypertext

</html>

Basic HTML

HTML Document Structure:• Anything written in triangular brackets is known as tag and it is a

part of the markup language.• Number of tags in web page, • Each tag having some function.• For Ex: <html> tag, identify as HTML.• HTML tags are in lowercase. (recommended) • Tags are not case sensitive.

Basic HTML

HTML Document Structure:• The <html> tag identifies a section of HTML code, • Opening with the <html> and closing with </html>.• Simple text message example:

Basic HTML

HTML Document Structure:<html>

<head>

<title>

The amazing art of web programming

</title>

</head>

<body>

a little bit of hypertext

</body>

</html>

Basic HTML

HTML Document Structure:• The body section contains the main document while,• The head contains the detail such as title.• An HTML element begins with a start tag and ends with a closing tag:• Example:

<title>

The amazing art of web programming

</title>GPERI – WAD - UNIT-2 17

Formatting And Fonts

• We can add more line into body section as text and view it on output:

<body>

a little bit of hypertext 

makes the world go round 

and around 

</body>

• The or break tag makes output start on the next line.• Another way of adding breaks is to define paragraph with the 

tag with a closing at the end of the paragraph.• The tag places a blank line before the line start.• To break a section of a page <hr> tag can be use.• Creates a line or horizontal rule , like tag.• It does not require an ending tag.

Using Types of Emphasis:• Any word encloses by the and will be made italic.• There are many ways of emphasizing.


Tag Format

 … Italic

 … Bold

 … Underline

<tt> … </tt> Typewriter effect

 … Emphasis

<blink> … </blink> Blink

 … Superscript

 … Subscript

Preformatted Text:• <pre>…</pre> is a useful formatting element.

• It enables us to embed text that is already formatted,

• So we don’t have to put break tag.

Preformatted Text:• For Example:<pre>

This is already set out in the way I want it

It has some advantages and is quick

You don't have to add line breaks but

I hasn't proportional spacing and is in courier font...!

</pre>

Font Size:• We can change the size of our text.• Possible ways are:• Use … tag or,• Use <h..> … </h..> tag.• <h..> tag can control the size and degree of emphasis for heading.

Font Size:• .


Font size Heading Point size

7 -- 36 pt

6 <h1> 24 pt

5 <h2> 18 pt

<h3> 12 pt

4 <h4> 12 pt bold

3 Body text 12 pt plain

<h5> 10 pt

<h6> 7 pt

2 -- 9 pt

Font Size:• The size of font can also be changed with …. 

tag.• The ending font tag will make the font revert to the previous font

used.• We can align text: left, right or center using .. tag.

(paragraph).

Font Size:<html>

<head><title>the amazing art of web programming </title>

</head>

<body>

 a little bit of hypertext 

Makes the world go around 



</body>

</html>

Introduction to XHTML

XML (Extensible Markup Language):• XML is a meta-language.• It is a language used to describe and define other language.• Like HTML,• it processes:• tags, attribute and values.• Use it to design own custom markup language.• Used to format own document.



XML:• Using tags, identify data and then data available for the use again.• The software that interprets the XML is known as parser.• Case sensitive.• Advantages:• Code written in a new specification, understood by all the browser.• Any one who already some knowledge of HTML could quickly get

used to it.



XHTML:• Several types of XHTML, allows following flexibility:• transitional, allow the use of deprecated (out of date or old) tags,• frameset, allows the use of both deprecated and frames.• strict,• Each flexibility can be combine with CSS.


The Move to XHTML

• XHTML and HTML share a common vocabulary but have a slightly different syntax.

• Both XHTML and HTML 4 demanding in a structure, imply in code.• For example:• For HTML 4

<! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

The Move to XHTML

• For example:• For XHTML : it is an XML application, a page should begin with an

XML declaration

<? Xml version=“1.0“ ?>

• The question marks say that this is an XML declaration.• There must be no space between opening question mark and the

xml,

The Move to XHTML

• The XHTML can also contain the character set encoding as an optional attribute:

<?xml version=“1.0” encoding=“UTF-8” ?>

• The encoding format used is 8-bit Unicode Transformation format• One of the attributes is the actual human language begin used in the

form of code, for example• <html xml:lang=“en”>

• </html>

Document Structure

• The document structure for an XHTML:<!DOCTYPE HTML PUBLIC “-//W3C// DTD XHTML 1.00

Transitional//EN” “https:// transitional.dtd”><html xmlns=“http:// ”>

<head><title>Title </title>

</head>

<body> … </body>

</html>

Document Structure

Difference• The head and body elements are required in XHTML whereas in

HTML they are optional.• Close tags• For example • All XHTML tag and attribute name must be in lowercase, and• All attribute values must be enclosed in quotes.• Nest tags but must be done correctly. (without overlapping tags)

Document Structure

Difference• Must specify a document title.


Document Structure

META TAGS• Metadata is information about information.• Machine understandable information about the Web resources.• Include in both HTML and XHTML to describe the actual.• Metadata is include in the head section of page:


Document Structure

META TAGS

<html><head><title><meta name=“author” content=“Fred Flinstone”/><meta name=“keywords” content=“stone age”/></title>

</head>

</html>

Document Structure

CHARACTER ENTITIES


Character Character entity Description

&nsp; Space

& & Ampresand

“ &quote; Quote

< < Less than

> > Greater than

unit-2 introduction to html prepared by: prof. harish i rathod computer engineering department...

Documents

gperi wad unit

web page

web browser

inheritance unit

development processa

basic htmla page

development processdesign

development processupload