Unit 2 introduction to html
Download
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