20.10.17

Targets Within the Same Document

Sometimes we need t open the webpage which is a part of some web document then there must be some way to specify it.we can mention the target element by including the id attribute which can be used to identify it in an href attribute.

XHTML Document[hyperLinkDemo1.html]

<head>

<title>Use of Hyperlink on the web page</title>

</head>

<body>

<a href="#book">click here to get a book on engineering</a>

</body>

</html>

TXT ALIGN

<html xmlns="http://www.learnhtmeasyl.blogspot.com/2017/xhtml">
<head>
<title>Image along with text</title>
</head
<body>
<img src="cutecat.jpg"align="right">
<h3>
It has a good surface finish, high corrosion resistance, is readily suited to welding and can be easily anodised. Most commonly available as T6 temper, in the T4 condition it has good formability.
</h3>
<i>Nilgiri hill</i>
</body>
</html>

19.10.17

USE OF IMAGE AS A LINK

Similar to a text we can set an image itself as a link.

For Example:Develop a HTML page to use image as a link to another page.

STEP1:Write the XHTML document containing an hyperlink to an image.when we click on the image the html page referred by the <a href>tag must get opened.

XHTML DOCUMENT[Imglink.html]

<html xmlns="http://www.learnhtmeasyl.blogspot.com/2017/xhtml">
<head>
<title>Image Demo</title>
</head>
<body>
<h2>INDIAN HERITAGE</h1>
</p>
<a href="flower.html"target="blank">
<img src="flower.jpg"alt="flower!!"/>
</a>
<br/>Flower Design
<br/>
</body>
</html>

STEP2:Write the XHTML document(flower.html)mentioned by the <a href> tag in step1 as follows.

XHTML DOCUMENT[Flower.html]

<html xmlns="http://www.learnhtmeasyl.blogspot.com/2017/xhtml">
<head>
<title>Image Demo</title>
</head>
<body>
<h2>INDIAN HERITAGE</h1>
<p>
Flowers make a magic world
</br>
Flowers is an</strong>very beautiful</strong>like rose<strong>lilly</strong>
<br/>
It is considered as an example of flower
</p><br/>
</body>
</html>

STEPS FOR HYPERLINK

STEP1:The begining of web link can be specified by the tag
<a href=" ".Inside the double quotes mention the URL of desired link.

STEP2:Write some text that should act as a hyperlink.

STEP3:End the web link </a>

XHTML DOCUMENT[HyperlinkDemo.html]

<html xmlns="http://www.learnhtmeasyl.blogspot.com/2017/xhtml">
<head>
<title>USE OF HYPERLINK ON THE WEBPAGE</title>
</head>
<body>
click here
<a href="http://www.learnhtmeasyl.blogspot.com">html</a>on computer
</body>
</html>

Hyperlink

There is some common practice to specify the weblink in the web page.use of hyperlink in the web pagr allows that page to link logically with other page. We can use hyperlinks by using a tag <a> and by specifying the URL for href.The value assigned to href specifies the target of the link.The <a> means begining of the web link and </a>means end of the web link.

18.10.17

Special Characters

In HTML certain symbols are treated as special.For example -<i.e.less than symbol is considered as special symbol because it is used as the beginning of the tag.Hence we can not directly use certain symbols such as <,>,”and so on.To print these symbols we what is called as reference.This reference always begins with ampersand(&)sign.Such reference is called as entity reference.

Character Meaning Entity Reference

< less than <

> greater than >

& ampersand &

" double quote "

' apostrophes '

Another type of entity reference that is used frequently is &nbps;that is non breaking space character.This entity reference is useful for defining the space between two string and informing browser for not forming the word wrapper between the strings.

FORMAT

The image tag has two attributes.

The src suggests us to give the image file name.If the desired image is not present in the current directory of web page then the complete path where the image is located must be given.
The alt attribute displays the text when it is not possible to display the image.For instance-in above given imagedemo.html script if,the lamp1.jpg is not present.

We can display images as a link.we have to use the <img src=" ">tag for this purpose.within the double quotes image file should be mentioned.Normally .gif or .jpg files are used to display the images on the web browser.Following XHTML script shows how to insert an image in the web page.

XHTML DOCUMENT[imagedemo.html]

<head>

<title>Image Demo</title>

</head>

<body>
<h1>INDIAN HERITAGE </h1>
<p>CSS- Cascading Style Sheets (CSS) is a style sheet language used for
describing the look and formatting of a document written in a markup
language
</p>
<img src=" " alt=" "/>
<br/>
While most often used to style web pages and interfaces written
in HTML and XHTML, the language can be applied to any kind
of XML document, including plain XML, SVG and XUL.
<br/>
</body>
</html>

XHTML

XHTML Document[SpaceDemo.html]

<head>

<title>Space Demo</title>

</head>

<body>

<h4>method 1:

</h4>

<p>Existing system does not has any facility for book request and sugeestions where as in proposed system after logging in to their accounts student can request books as well as provide suggestions to improve library

</p>

<h2>

method 2:

</h2>

<p>Existing system does not have any facility to generate student reports as well book issue reports whereas proposed system provides librarian with a tool to generate reports

</p>

</body>

</html>

17.10.17

Unrecognized Elements and Attributes

Eventhough web authors type some element or attribute that the browser does not recognize,it does not complaint.This is a unique feature as compared to any programming language.Because if we make any typographical mistakes in a java program then definitely compiler will raise error message.The web browsers simply displays the contents eventhough the element is not surrounded by any tag.

Xhtml document [mistake.html]

Made spelling mistake while defining the tag</title>

<head>

<ttle>Testing</title>

Hence title appears in the client area of web browser just like a normal text.

</head>

<body>

<h2>To error</h2>

</body>

</html>

what is meant byHorizontal rules?

For defining the horizontal rule we use<hr>tag.As an affect of this tag we can see the horizontal line on the web browser.These lines are called horizontal rules.

Here is the demo for<hr>tag.

XHTML Document

<html>

<head>

<title>Demo of Horizontal Rule</title>

</head>

<body>

<h3>Abdul kalam quotes</h3>

</center>

<hr/>

<p>You cannot change your future.but you can change your habits.</p>

<em>A.P.J.Abdul Kalam</em>

</body>

</html>

Bgcolor

Write an HTML script which displays the web page having some specific background color.

solution:

XHTML Document[Bgcolor.html]

<html>

<head>

<title>coloring the background</title>

</head>

<h3>This is document has colored background</h3>

</body>

</html>

In above document we have specified background color using the bgcolor attribute.

The color can be specified by either using the color name in double quotes or using the hex code as given in the above document.The first two digits of Hex code represents the red value then next two digits specify the green value and final two digits specify the blue value.Hence the corresponding output will be as follows.

Note that the background color is specified by the hexadecimal value.Following table shows the hex and corresponding decimal values.

Decimal value-Hexadecimal value

1 - 1

2 - 2

3 - 3

4 - 4

5 - 5

6 - 6

7 - 7

8 - 8

9 - 9

10 - A

11 - B

12 - C

13 - D

14 - E

15 - F

COLORS

Most of the web designers prefer to have their web pages white in color.But there are situations wherein we want to create colourful web pages.First of all we will learn how to display a text colorful on the web page.

XHTML Document[ColorFont.html]

<html>

<head>

<title>coloring the text</title>

</head>

<body>

Green people are simple and<br>

Simple people are great!!!<br>

Green people rule the world

</body>

</html>

Setting The Font

We can set the font,size and color of the text in the web page.The tag <basefont> is used for this purpose which is shown as below

XHTML Document[SetFont.html]

<head>

<title>Setting the Text</title>

</head>

<body>

India is my country<br/>

Failure is a way to success!!<br/>

Dhoni is my favourite hero</br>

Vijay is my favourite actor</br>

</body>

</html>

Text Alignment

We can align the text in at left,right or at the center using a <div>tag.Here is a HTML program which shows the text aligned left,right and center.

Demonstrate the alignment of text using the HTML tag

Sol:

XHTML Document[TextAlign.html]

<head>

<title>Font Style Demo</title>

</head>

<body>

<div align="center">This line is aligned at the center</div>>

<div align="left">This line is aligned at left</div>

<div align="right">This line is aligned at right</div>

</body>

</html>

Setting Font Style

We can set the text in boldface or in italics.Similarly a strike through text can be displayed using various tags.Following XHTML document illustrates the same.

XHTML Document[TextFormat.html]

<head>

</head>

<body>

<p> a lightweight programming language ("scripting language")

used to make web pages interactive

insert dynamic text into HTML (ex: user name)

react to events (ex: page load user click)

get information about a user's computer (ex: browser type)

perform calculations on user's computer (ex: form validation)

</p>

<div>a web standard (but not supported identically by all browsers)

NOT related to Java other than by name and some syntactic similarities

</div>

<div><pre>NOT related to Java other than by name and some syntactic similarities</div>

</pre>

</body>

</html>

15.10.17

Formatting text

-A.P.J.Abdul Kalam

Formatting Text

Following are some commonly used tags for formatting the text.

Tag and Meaning

1.<p> - This tag is should be put at the end of every paragraph.

2. <br> - This tag causes a single link break.generally is kept at the end of every line.if we want more three blank lines to be inserted after some text then we can put <br><br><br>.we get the line break automatically if the text appearing on the web browser is too long.if we donot want such break then <nobr>tag can be used for such text.

3.<pre> - This tag is used to preserve the white spaces and lines in the text.

4.<div> -This tag is used to make division of sections in the XHTML document.

🎯Fix your goal.🚮keep your city clean.🚭🚭🚭🚭Don't smoke.

Basic Text Markup

Basic text markup

Displaying Header

There are header Tags which help to display the text as some header.The header tag is denoted b h1,h2 and so on upto h6.Following XHTML program along with its output is itself self explanatory

Write an HTML script to display text using various header tags.

Solution:

XHTML document[headerDemo.html]

<head>

</head>

<body>

<h1>This is a first header </h1>

<h2>This is a second header </h2>

<h3>This is a third header </h3>

<h4>This is a fourth header </h4>

<h5>This is a fifth header </h5>

<h6>This is a sixth header </h6>

</body>

</html>

Try this program and get output

14.10.17

XHTML Syntax

An XHTML document consists of three main parts:

1.DOCTYPE declaration

2.<head> section

3.<body>section

The basic document structure is:

<!DOCTYPE...>

<html>

<head>

</head>

<body>

..........

</body>

</html>

The DOCTYPE declaration should be as given below

<!DOCTYPE html PUBLIC "-W3C//DTD XHTML 1.0 Transistional//EN"

"http://www.learnhtmeasyl.blogspot.com/TR/xhtml/DTD/xhtml11.dtd">

The DOCTYPE specifies the document type.The document type is specified by the Document Type Definition(DTD).The XHTML syntax rules are specified by the file xhtml11.dtd.file.hence we are specifying the name of this file at the begining.

Three Flavours of XHTML

There are three types of XHTML DTDs and those along with their uses are as given below

1.XHTML 1.0 Strict:when we want a clean markup code then this type of dtd is used.

2.XHTML 1.0 Transistional:when we want to use some html features in the existing XHTML document.

3.XHTML 1.0 Frameset:when want to make use of frames in the XHTML document.

difference between html and html 5

󠅉󠅉󠅉󠄓󠄓󠄓󠄓󠄛󠄛

Difference between HTML and HTML 5

this post will updated soon

HTML 5.0

The HTML 5.0 is the fifth version of HTML standard of world wide consortium(W3C)which is finalized in october 2014.

The earlier version was HTML 4.0 which was released in 1997.

The objective of this markup language version was-1)To provide support for latest multimedia and 2)to make the script readable and consistently understood by the developer.

The HTML5 adds many new syntactic features.It includes the elements such as <video>,<audio> and <canvas> elements.It also has integration of scalable vector graphics(SVG)contents and MathML for mathematical formula.

FEATURES OF HTML 5.0

The XHTML doctype is just impossible to memorize(!DOCTYPE html PUBLIC"..)Hence a new HTML doctype is <!DOCTYPE html>

There a new graphic elements such as <canvas> and<svg> in HTML 5.0

The support for multimedia elements such as <audio> and <video>

It has support for <header>,<footer>,<article>,and<section>

It has support for new form controls such as number,date,time,calendar and range.

It has a rich set of Application Programming Interface(API)for geolocations,HTML Drag and Drop,Local Storage,Application cache and so on.

13.10.17

History and versions of html

History and Versions of HTML

Tim Berners-lee is the person who defined HTML.In 1990, Tim Berners-Lee was working at CERN(European Organization for nuclear research).

He included the elements that could define title,paragraphs,hyperlink,headings,simple lists,address blocks and so on.

But in that version of HTML there was no facility for producing tables or fill-in forms and images within a document.

In 1994 Tim Berners-Lee launched the World Wide Web consortium(w3c)for producing standards for web technologies.W3C is also defined the standards for HTML.

As an outcome of W3C's efforts HTML 2.0 adopted web standard within it.the W3C released its HTML 4 recommendation in december 1997.the current version HTML 4.01 which is now followed for producing web documents.

The meta language used to define the syntax for HTML 4.01 is SGML(Standard Genralized Markup Language).

In 1998, the W3C introduced the Extensible Markup Language(XML)which is a restricted version of SGML.then a new version of HTML came up,which is called XHTML.(eXtensible Hypertext Markup Language).The syntaxes of XHTML are defined using XML,rather than SGML.

The XHTML is syntactically identical to HTML.but XHTML follows certain restrictions.these restrictions are mentioned by following difference.

Difference between HTML and XHTML

HTML XHTML

1)HTML is Hypertext Markup 1)XHTML is Extensible
language. Hypertext Markup Language.

2)An application of SGML 2)An application of XML.

3)Can have empty/open tags 3)All the unclosed tags must be

eg:<br>,<p> closed.eg:<br/>,<p>,</p>

4)No hard rule on structures 4)Structure of the elements

of the elements eg:<p><b> should be followed e.g <p>

the difference</p></b> <b>the difference</b></p>

5)Attributes have quotes as 5)Attributes have quotes

optional e.g: mandatory eg:

6)Attributes values not 6)Attributes values are

significant. e.g: important.e.g:

<input type="checkbox"checked> <input type="checkbox"

checked="checked">

7)Case Sensitive:The tags and 7)Case Sensitive:The tags and

attributes can be of uppercase attributes must be of

or lowercase as per the lowercase

preference.

8)All the content can be put 8)All the content has to be put

under body element in blocks(p under body

element)

9)HTML is not mandatory 9)XHTML document must

for one root element have one root element.

The relationship between SGML,XML,HTML and XHTML is as given below

------------- superset of --------------

- SGML - ----------------->-XML -

------------- --------------

: :

:derives : Derives

: :

------------- superset of ---------------

-HTML - ------------------>- XHTML-

------------- ---------------

: :

------------- ---------------

| SGML | | XML |

| tool - |<--------------------| tool |

-------------- --------------

11.10.17

html elements

HTML ELEMENTS

In all HTML/XHTML documents the root element is <html>which has two children:head and body.

any text contained within the head element does not appear directly in the client area of web browser.

the <title>element is used to give title to the web page.

note that this title element does not appear in client area.rather it appears at the top of web browser.

the >body>element contains the information which is to be displayed in the client area of the browser.

the body element can contain several fundamental elements such as <p>,<h1>,<div>,<a>,<hr>,<br> and so on.

the elements within the body part is for deciding the layout of your web page.

basic html program:

<html>
<head>
<title>basic html</title>
</head>
<body>
I LOVE MY COUNTRY
</body>
</html>

output:
I LOVE MY COUNTRY

EXPLANATION:

if we give any content in the body part only that content can be display.

10.10.17

Html

Introduction of html

HTML stands for hypertext markup language.

Hypertext is simply a piece of text that works as a link.

Markup language is language of writing layout information within documents.

It contains rich text.

A rich text means text with tags.

Any html program can be written in simple notepad or wordpad.

the extension to this program should be either html or htm.

this program can be opened in some web browser and the corresponding web page can be viewed.

the HTML program should be written within <html> and </html>

any HTML program has two prominent parts:head and body.

the head part acts as a header of a file and contains some information like setting the title of web page.

20.10.17

XHTML Document[hyperLinkDemo1.html]

19.10.17

XHTML DOCUMENT[Flower.html]

XHTML DOCUMENT[HyperlinkDemo.html]

18.10.17

XHTML DOCUMENT[imagedemo.html]

XHTML Document[SpaceDemo.html]

17.10.17

Xhtml document [mistake.html]

XHTML Document

Write an HTML script which displays the web page having some specific background color.

XHTML Document[Bgcolor.html]

COLORS

XHTML Document[ColorFont.html]

Setting The Font

16.10.17

Sol:

Setting Font Style

XHTML Document[TextFormat.html]

15.10.17

Formatting Text

🎯Fix your goal.🚮keep your city clean.🚭🚭🚭🚭Don't smoke.

14.10.17

Three Flavours of XHTML

Difference between HTML and HTML 5

HTML 5.0

FEATURES OF HTML 5.0

13.10.17

History and Versions of HTML

Difference between HTML and XHTML

HTML XHTML

11.10.17

HTML ELEMENTS

EXPLANATION:

10.10.17

Introduction of html

Featured Post