unit 2 introduction to html
Download
Skip this Video
Download Presentation
Unit-2 Introduction to HTML

Loading in 2 Seconds...

play fullscreen
1 / 39

Unit-2 Introduction to HTML - PowerPoint PPT Presentation


  • 68 Views
  • Uploaded on

Unit-2 Introduction to HTML. Prepared 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 .

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Unit-2 Introduction to HTML' - talon


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
unit 2 introduction to html

Unit-2 Introduction to HTML

Prepared by:

Prof. Harish I Rathod

Computer engineering department

Gujarat power engineering & Research institute

WEB APPLICATION DEVELOPMENT (170705)

the development process
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

the development process1
The Development Process
  • A Web development having following satges:
  • Requirement.
  • Design.
  • Write Code.
  • Test.
  • Upload.
  • Re-iterate.

GPERI – WAD - UNIT-2

the development process2
The Development Process

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.

GPERI – WAD - UNIT-2

the development process3
The Development Process

Design:

  • This stage tries to provide a solution to match the requirements.
  • It also consider, what is possible with the various technologiesthat 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

the development process4
The Development Process

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.

GPERI – WAD - UNIT-2

the development process5
The Development Process

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.

GPERI – WAD - UNIT-2

the development process6
The Development Process

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.

GPERI – WAD - UNIT-2

basic html
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).

GPERI – WAD - UNIT-2

basic html1
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’.

GPERI – WAD - UNIT-2

basic html2
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.

GPERI – WAD - UNIT-2

basic html3
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.

GPERI – WAD - UNIT-2

basic html4
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>

GPERI – WAD - UNIT-2

basic html5
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.

GPERI – WAD - UNIT-2

basic html6
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:

GPERI – WAD - UNIT-2

basic html7
Basic HTML

HTML Document Structure:

<html>

<head>

<title>

The amazing art of web programming

</title>

</head>

<body>

a little bit of hypertext

</body>

</html>

GPERI – WAD - UNIT-2

basic html8
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

formatting and fonts
Formatting And Fonts
  • We can add more line into body section as text and view it on output:

<body>

a little bit of hypertext <br>

makes the world go round<br>

and <i> around </i> <br>

</body>

GPERI – WAD - UNIT-2

formatting and fonts1
Formatting And Fonts
  • The <br> or break tag makes output start on the next line.
  • Another way of adding breaks is to define paragraph with the <p> tag with a closing </p> at the end of the paragraph.
  • The <p> 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 <br> tag.
  • It does not require an ending tag.

GPERI – WAD - UNIT-2

formatting and fonts2
Formatting And Fonts

Using Types of Emphasis:

  • Any word encloses by the <i> and </i> will be made italic.
  • There are many ways of emphasizing.

GPERI – WAD - UNIT-2

formatting and fonts3
Formatting And Fonts

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.

GPERI – WAD - UNIT-2

formatting and fonts4
Formatting And Fonts

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>

GPERI – WAD - UNIT-2

formatting and fonts5
Formatting And Fonts

Font Size:

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

GPERI – WAD - UNIT-2

formatting and fonts6
Formatting And Fonts

Font Size:

  • .

GPERI – WAD - UNIT-2

formatting and fonts7
Formatting And Fonts

Font Size:

  • The size of font can also be changed with <font size = ..> …. </font> tag.
  • The ending font tag will make the font revert to the previous font used.
  • We can align text: left, right or center using <p>..</p> tag. (paragraph).

GPERI – WAD - UNIT-2

formatting and fonts8
Formatting And Fonts

Font Size:

<html>

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

</head>

<body>

<p align=“center”> a little bit of hypertext <br>

Makes the world go <i>around </i>

</p>

</body>

</html>

GPERI – WAD - UNIT-2

introduction to xhtml
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.

GPERI – WAD - UNIT-2

introduction to xhtml1
Introduction to XHTML

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.

GPERI – WAD - UNIT-2

introduction to xhtml2
Introduction to XHTML

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.

GPERI – WAD - UNIT-2

introduction to xhtml3
Introduction to XHTML

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.

GPERI – WAD - UNIT-2

the move to xhtml
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”>

GPERI – WAD - UNIT-2

the move to xhtml1
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,

GPERI – WAD - UNIT-2

the move to xhtml2
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>

GPERI – WAD - UNIT-2

document structure
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>

GPERI – WAD - UNIT-2

document structure1
Document Structure

Difference

  • The head and body elements are required in XHTML whereas in HTML they are optional.
  • Close tags
  • For example <br> <br/>
  • 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)

GPERI – WAD - UNIT-2

document structure2
Document Structure

Difference

  • Must specify a document title.

GPERI – WAD - UNIT-2

document structure3
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:

GPERI – WAD - UNIT-2

document structure4
Document Structure

META TAGS

<html>

<head>

<title>

<meta name=“author” content=“Fred Flinstone”/>

<meta name=“keywords” content=“stone age”/>

</title>

</head>

</html>

GPERI – WAD - UNIT-2

document structure5
Document Structure

CHARACTER ENTITIES

GPERI – WAD - UNIT-2

ad