Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
8 views

html

Uploaded by

jayadeep Veligonda
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
8 views

html

Uploaded by

jayadeep Veligonda
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 10

HTML(UNIT-IV)

1)Structure of HTML:-HTML stands for Hypertext Markup Language. This markup language is used to
create web documents. A web document is viewed in a web browser, like the one you are using to
read this document.

An HTML document has two main parts:

Head:- The head element contains title and meta data of a web document.

Body:- The body element contains the information that you want to display on a web page.

In a web page, the first tag (specifically, <html>) indicates the markup
language that is being used for the document. The <head> tag contains information about the
web page. Lastly, the content appears in the <body> tag. The following illustration provides a
summary.

2)XML:- XML stands for Extensible Markup Language. It is a text-based markup language
derived from Standard Generalized Markup Language (SGML).

XML tags identify the data and are used to store and organize the data, rather than specifying
how to display it like HTML tags, which are used to display the data.

There are three important characteristics of XML that make it useful in a variety of systems
and solutions −
i)XML is extensible:− XML allows you to create your own self-descriptive tags, or
language, that suits your application.

ii)XML carries the data, does not present it:− XML allows you to store the data
irrespective of how it will be presented.

iii)XML is a public standard:− XML was developed by an organization called the World
Wide Web Consortium (W3C) and is available as an open standard.
HTML(UNIT-IV)

3)Formatting Text in HTML:-

i)Bold<b>:- Anything that appears within <b>...</b> element, is displayed in bold.


Ex:- <b>This text is bold</b>

ii) Italic Text:-Anything that appears within <i>...</i> element is displayed in italicized.
Ex:- <i>This text is Italic</i>

iii)Underlined Text:-Anything that appears within <u>...</u> element, is displayed with


underline.
Ex:- <u>This text is Underline</u>

iv)Strike Text:-Anything that appears within <strike>...</strike> element is displayed with


strikethrough, which is a thin line through the text

Ex:-the following word uses a <strike> strike through </strike> typeface.

v) Superscript Text:-The content of a <sup>...</sup> element is written in superscript; the


font size used is the same size as the characters surrounding it but is displayed half a
character's height above the other characters.
Ex:-the following word uses a <sup> Superscript </sup> typeface.

vi)Subscript Text:-The content of a <sub>...</sub> element is written in subscript; the font


size used is the same as the characters surrounding it, but is displayed half a character's
height beneath the other characters.
Ex:-the following word uses a <sub> Subscript </sub> typeface

4)Hyperlinks:-Hyperlinks can take the form of linking to one web page to another web page,
opening an email or FTP client, or call for some other action. They are how we get from point
A to point B on the World Wide Web. A hyperlink can also move you from one point to
another within a single page by using the "#" symbol.

Creating Hyperlinks:-We use <A> element (A stands for anchor) to create hyperlinks in
HTML. The most common form of hyperlink is undoubtedly the text hyperlink, where the
hyperlink itself usually appears underlined and in a different color from the surrounding text
to see it off from that text.

Linking to a Section of a Document:-It is also possible to link to a section of a document


instead of linking to the document as a whole. Anchors can be used. Creating anchors is
another valuable use of the <A> element.
HTML(UNIT-IV)

Example
<HTML>
<HEAD>
<TITLE>
Linking to A Section In A Page
</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>
Linking to A Section In A Page
</H1>
Click here to go to the
<A HREF="#BOTTOM">bottom</A>
of the Page.
<BR>
<BR>
<HR>
<A NAME="BOTTOM">This is the bottom of the page.</A>
</CENTER>
</BODY>
</HTML>

5)Tables:-
<TABLE> element is used to create tables. It encloses elements like <CAPTION>, <TR>,
<TH>, <TD>, <COLSPAN>, <COL>, <THEAD>, <TBODY> etc.
Creating a basic table:-
The basic structure of an HTML table consists of the following tags:

i)Table tags: <TABLE> </TABLE>


ii)Row tags: <TR> </TR>
iii)Cell tags: <TD> </TD>

Constructing an HTML table consists of describing the table between the beginning table tag,
<TABLE>, and the ending table tag,</TABLE>. Between these tags, you then construct
each row and each cell in the row.

To do this, you would first start the row with the beginning row tag, <TR>, and then
build the row by creating each cell with the beginning cell tag, <TD>, adding the data for that
cell, and then closing the cell with the ending cell tag, </TD>. When you finish all of the
cells for a row, you would then close the row with the ending row tag, </TR>.

The following codes generated the border, TABLE TITLE, and Column A and Column B
headings for this table:
<TABLE BORDER="5">
<TR>
<TH COLSPAN="2">
<H3><BR>TABLE TITLE</H3>
</TH>
HTML(UNIT-IV)

</TR>
<TR>
<TH>Column A</TH>
<TH>Column B</TH>
</TR>
<TR>
<TH>Column C</TH>
<TH>Column D</TH>
</TR>

6)List:-Lists let you display information in a compact and tight format. There are three kinds
of lists:
i)Unordered Lists
ii)Ordered Lists
iii) Definition Lists
i)Unordered Lists:-
You can create unordered lists with elements like <UL>. Each item in the list gets its own
element using the <LI> list item tag. Here is an example showing how to create a bulleted
list:
<HTML>
<HEAD>
<TITLE>
An Unordered List
</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>
Creating an Unordered List
</H1>
Here are some items to consider when buying a computer:
<UL>
<LI> Speed
<LI> Cost
<LI> RAM
<LI> Disk Space
<LI> CD ROM Speed
</UL>
</BODY>
</HTML>.
HTML(UNIT-IV)

ii)Ordered Lists:-
While unordered lists display a simple bullet before each list item, ordered lists use a
number system or alphabets to indicate that the items are ordered in some way. For example:
<HTML>
<HEAD>
<TITLE>
An Ordered List
</TITLE>
</HEAD>

<BODY>
<H1 ALIGN=CENTER>
Creating an Ordered List
</H1>
Here are some items to consider when buying a computer:
<OL>
<LI> Speed

<LI> Cost
<LI> RAM
<LI> Disk Space
<LI> CD ROM Speed
</UL>
</BODY>
</HTML>

iii)Definition Lists:-
These lists include both terms and their definitions. <DL> element is used to create these
lists,
<DT> for terms, and <DD> for the definition of each term. For example:
<HTML>
<HEAD>
<TITLE>
A Definition List
</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>
Creating a Definition List
</H1>Here are some items to consider when buying a computer:
<DL>
<DT> Speed <DD> CPU speed in Megahertz.
<DT> Cost <DD> Make sure to keep this down.
<DT> RAM <DD> Amount of memory in the computer.
<DT> Disk Space <DD> Get plenty of Gigabytes.
<DT> CD ROM Speed <DD> Get at least 24X
</DL>
</BODY>
</HTML>
HTML(UNIT-IV)

7)Frames:-
A frame is a web browser window within another web browser window. By using
frames, you can create web pages consisting of multiple windows.
For example, you can set up your web page so that a link in a frame will call up a
page in the same frame, another frame, or the entire browser window.

Creating the frames:-Let's suppose you want to create a web page consisting of two frames.
The frame on the left will contain a list of services. When you select a service, a
corresponding description will then appear in the right frame.

There are two HTML tags used for frames: <FRAMESET> and <FRAME>.

1) The <FRAMESET> tag sets the width of each frame as a percentage of the total
width of the web page.

2) The <FRAME> tag assigns a name to each frame and indicates which file it will
display.

Here is a sample index.html file that creates a web page with two frames. Note that the
<Body> tag normally found in HTML files is not needed.

Example:-

<HTML>
<HEAD>
<TITLE>Computer Services</TITLE>
</HEAD>
<FRAMESET COLS="30%,70%">
<FRAME scrolling=yes SRC="links.html" NAME="left">
<FRAME SRC="intro.html" NAME="right">
</FRAMESET>
</HTML>

The FRAMESET COLS code sets up the frame size starting from left to right. So from this
example, you can see that the left frame will take up 30% of the page's width and the right
frame will take up 70% of the page's width.

In this case, the left frame will automatically contain a scroll bar, indicated by the
FRAME SCROLLING=YES code. This frame will display the file called links.html,
indicated by the source code shown as SRC. Finally, the NAME code indicates that the frame
is appropriately called left.

The right frame will not automatically contain a scroll bar since the SCROLLING
code is not included. This frame will display the file called intro.html and the name of this
frame is right.
HTML(UNIT-IV)

8)Form:-form defines the form and within this tag, if you are using a form for a user to
submit information an action attribute is needed to tell the form where its contents will be
sent.

The method attribute tells the form how the data in it is going to be sent and it can
have the value get, which is default, and latches the form information onto a web address, or
post, which invisibly sends the form’s information.

Form Input Tags:-The input tag is the daddy of the form world. It can take a multitude of
guises, the most common of which are outlined below

i)<input type="text"> or simply <input> is a standard textbox. This can also have a value
attribute, which sets the initial text in the textbox.

ii)<input type="password"> is similar to the textbox, but the characters typed in by the user
will be hidden.

iii)<input type="checkbox"> is a checkbox, which can be toggled on and off by the user. This
can also have a checked attribute .

iv)<input type="radio"> is similar to a checkbox, but the user can only select one radio
button in a group. This can also have a checked attribute.

v)<input type="submit"> is a button that when selected will submit the form. You can control
the text that appears on the submit button with the value attribute.

9)HTML Heading Documents:- The HTML <h1>–<h6> elements represent six levels of
section headings. <h1> is the highest section level and <h6> is the lowest.

Heading Uses:-

i)Heading information may be used by user agents, for example, to construct a table of
contents for a document automatically.

ii) Do not use lower levels to decrease heading font size.

iii) Avoid skipping heading levels: always start from <h1>, next use <h2> and so on.

iv) You should consider avoiding using <h1> more than once on a page.
HTML(UNIT-IV)

10)DHTML:-Dynamic HyerText Markup Language (DHTML) is a combination of Web


development technologies used to create dynamically changing websites. Web pages may
include animation, dynamic menus and text effects. The technologies used include a
combination of HTML, JavaScript or VB Script,
CSS and the document object model (DOM).

Designed to enhance a Web user’s experience, DHTML includes the following features:

 Dynamic content, which allows the user to dynamically change Web page content
 Dynamic positioning of Web page elements
 Dynamic style, which allows the user to change the Web page’s color, font, size or
content

11)Style Sheet:-A Style Sheet is a collection of style rules that that tells a browser how the
various styles are to be applied to the HTML tags to present the document. Rules can be
applied to all the basic HTML elements
Elements of style rule:-A CSS comprises of style rules that are interpreted by the browser
and then applied to the corresponding elements in your document. A style rule is made of
three parts:
Selector:-A selector is an HTML tag at which a style will be applied. This could be
any tag like <h1> or <table> etc.
Property:-A property is a type of attribute of HTML tag. Put simply, all the HTML
attributes are converted into CSS properties. They could be color, border, etc.
Value:-Values are assigned to properties. For example, color property can have
the value either red or #F1F1F1etc.
You can put CSS Style Rule Syntax as follows:
selector
{
property: value
}
Example: You can define a table border as follows:
table
{
border: 1px
solid
#C00; }
Here table is a selector and border is a property and the given value 1px solid #C00
is the value of that property.
HTML(UNIT-IV)

i)Internal style sheet:- Use an internal style sheet when you want an HTML document to
have a unique style. An internal style sheet is defined using the <style> tag and goes in the
head section of an HTML document.

The <style> tag specifies the content type of a style sheet with its type attribute which should
be set to "text/css".

Syntax:-
<style type="text/css">
styles go here
</style>
Example:
<html>
<head>
<style type="text/css">
p {color: green}
</style>
</head>
<body>
<p> The text in this paragraph will be green. </p>
<p> This paragraph too. </p>
</body>
</html>

ii)External Stylesheet:-An external stylesheet is declared in an external file with a .css


extension. It is called by pages whose interface it will affect. External stylesheets are called
using the <link> tag which should be placed in the head section of an HTML document. This
tag takes three attributes.
Attributes of the <link> tag:
 rel - When using an external stylesheet on a webpage, this attribute takes the value
"stylesheet"
 type - When using an external stylesheet on a webpage, this attribute takes the value
"text/css"
 href - Denotes the name and location of the external stylesheet to be used.

Example:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css" />
</head>
<body>
<p> The text in this paragraph will be blue. </p>
</body>
</html>

The code from style1.css:


p {color: blue}
HTML(UNIT-IV)

iii)Inline Style Sheet:-Inline style sheets are declared within individual tags and affect those
tags only. Inline style sheets are declared with the style attribute.
Example:
<p style="color: gray">This text will be gray. </p>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p{
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
</html>

You might also like