A BOOK TO HELP YOU……(Basic
..Part I )
By Neha Chandel
HTML
Hypertext markup language.
Web pages can be created using Html, also called as the
internet language. Hypertext refers to the content in a web page that including
text, pictures and sound.
WEB
BROWSER à Web browsers are capable of :
Displaying web pages containing text and pictures , playing sound and video files ,
Linking web pages.
Features
of Web Browser
è Different
web sites can be viewed at the same time by opening more than one web browser
window.
è The
frequently browsed web site addresses can be stored in the web browser.
è A web browser has options to move to the
previous and next web pages.
è A
web browser has options to save the web page and to print the web page.
Coding
part……………………
An html document comprise of Html element. Html element are repersented by
html tags. A web browser identifies each element by its tags. Tags are used to
identify each element. Tqages enclose
the name of elements with in angular brackets. Tags are not case sensitive.
Html tags comprise of a left angular bracket or a less than symbol(<) followed
by the name of the element and closed by a right angular bracket or a greater
than symbol(>). For example, the HTML element tag will be written as
<HTML>.
Structure of an HTML document
à Html
àHead
è Body
Html Element :
<html >….<html>
Head element : <head>
<Title
>Introduction to html </Title >
</head>
Body element : <body>…………</body>
=Setting backgrounds for a web page
To change background color =
<body bg color=”blue” >
background color as images =
<body bg color=”blue.jpg” >
Heading element
Html define six level of headings. A heading element can be used to
specift all the font change
The heading sizes ranges from <H1> to <h6>. The codes given
below will display the heading range.
<h1> heading 1</h1>
<h2> heading 2</h2>
<h3> heading 3</h3>
<h4> heading41</h4>
<h5> heading 5</h5>
<h6> heading 6</h6>
The Align Attribute
To align heading in center, left or right, html provide
the align attribute. This attribute is specified with in the heading element
the sample code given below will display the heading in the center
<h1
Align = “Center >” Heading 1 </h1>
The
color
attributeà
< Font color =”Red”> this text is in red </font>
Line Break
Element à <br>
Bold
<b>this is bold text</b>
Underline element à
<u> this is underline text</u>
Italics elementà
<I>HTML </I>
Special effect ---- “<big> Tim burners –lee</big> at
cern “
Subscript element:
H<SUB>2</SUB>o this show
H2O
Superscript element: (power)
2<Sup>2</sup>=4
HORIZONTAL RULE ELEMENT
<hr Size =
5>
<hr width
=45%>
<hr
noshade>
<hr color
=gray>
Comment à <comment> this is a comment
entry and will not be displayed on the screen </comment>
Marquee
<body > <Marquee bgcolor=orange>welcome
</marquee> </body>
<body > <Marquee Direction=left>welcome </marquee>
</body>
<body
> <Marquee Behavior= scroll >welcome </marquee> </body> (slide,alternate )
<body
> <Marquee loop=2 > welcome
</marquee> </body>
<body
> <Marquee scrollamount=5> welcome </marquee> </body>
Creating Lists
Unordered List element :
<ul> OR
<UL type = circle> ( square, fillround)
<Li>papaya
<Li>banana
<Li>apple
</ul>
ordered List element :
<OL> OR
<OL type = 1> ( 1,a,I,i )
<Li>papaya
<Li>banana
<Li>apple
</OL>
Definition
List element :
<DL> <DT> definition topic <DD> this this this and this is
definition</DL>
HYPERTEXT:
<A Href =”My school.doc ”> School </A>
Image’s in web pages
Gif: Graphic Interchange formate.
Jpeg:
joint photographic expert group.
à < Img src = “Globe.gif” align=left
>
à < Img src = “Globe.gif” Border=5
>
Alt
attribute:
The attribute is used for displaying
alternate text that will be displayed in place of the image in case the image
is not available.
à < Img src =
“Globe.gif” ALT = “CANN’T Display” >
Audio in web pages
< Bgsound src
=”barbie girl .mp3” >
< Bgsound src
=”barbie girl .mp3” Loop=3>
< Bgsound src
=”barbie girl .mp3” loop=Infinite>
Table
è Table Header: <TH>……….</th>
è Table row :
<tr>…….</tr>
è Table data : <Td>……</td>
A simple data table codeing :
<.Table >
<tr>
<.Th>Name</th>
<th>class</th>
<th>section<./Th>
</tr>
<tr>
<.Th>neha</th>
<th>iv</th>
<th>a<./Th>
</tr>
<tr>
<.Th>amit</th>
<th>iii</th>
<th>b<./Th>
</tr>
</table>
NAME
|
Class
|
Section
|
Neha
|
iv
|
A
|
amit
|
III
|
B
|
Attributes of the table element :
è Align : <Table
align=Center >(you can align the
table to the left, right or center of the web pages. )
è Height : <Table align=Center Height=165
>
è Width : <Table align=Center Height=165
width =145 >
è BGCOLOR : <Table
bgcolor =gray >
è Bordercolor :
<Table bgcolor =gray border =4 bordercolor=red >
è Bordercolorlight:
<Table bgcolor =gray border =4 bordercolor=red bordercolorlight=pink >
è Bordercolordark : <Table bgcolor =gray border =4
bordercolor=red bordercolordark=pink >
è Background :
<table background =”sky.gif” >
Cellspacing attribute : <Table
border=4 cellspacing=10>
Cellspacing attribute : <Table
border=4 cellpadding=10>
Frames
Frames disply two or more web pages in a single web
browser window. You need to create a frame document to create frames. A frame
document resembles the HTML document except that the body element is replaced
by a frameset container element. The structure of the frameset element is shown
below.
<Html>
<Head>
<Title>this is my web</title>
</head>
<Frameset>……</frameset>
</html>
Frameset element
Rows :
<frameset rows=”25%, 35%, 45%,45%”>….</frameset>
Cols :
<frameset cols =”30%,25%,45%,60%”>….</frameset>
§
SRC – the src attribute accepts the url
of an html document that need to be displayed within the frame.
<Frameset cols=”50%, 40%”>
<Frame src =”1st.html”>
<Frame src =”2st.html”>
</frameset>
§
Scrooling < frame src =”1st.html” scrolling=yes>
§
Noresize : when you want a frame not to
be resized by the user. By default all frames are resizable.
Forms
the form element is a container
element and its attributes are
1)
Action – the action
attribute is a URL that would refer to the program written to process the information
.
2)
Method – the method
attribute is used for specifying how the contents in the form will be sent to
the processing program.
In this we can add
button lable textbox and so many other feature in this to make a beautiful web page.
A small code sample is
as follow where we add a button which take us to a new page.
<FORM
ACTION="http://url.you.want.to.go.to/" METHOD=GET>
<INPUT TYPE=submit VALUE="Text on button" NAME=foo>
</FORM>
The Web designing techniques
A part from HTML there are other techniques used to
cerate Web pages. Many web sites support multimedia content and extensive user
interactions. Elearning, Ecommerce and Egovernance have become common terms as
Email. WEB Pages should be built using more powerful technology especially when
the web sites support financial and commercial tracsactions. There are various
web designing techniques prevalent in today’s Internet- driver world that
effectively cater to multimedia requirements and user interactions.
è Dhtml
è Dreamweaver
è Flash
Web Publishing
The process by which web pages are made as part of the
world wide web is called web publishing it also refers to the process of
setting up a web site which will be a collection of HTML document as web pages.
The web site is a set up on a server. This server is connected to the Internet.
Different companies or organizations that own servers are called web hosts.
Prerequisites
for web publishing
1)
Setting
the objectives
2)
Identifying
the target audience
Web hosting
One
of the most important feature of web hosting company is to provide an address
to the web page of site.
