HTML Theory
HTML Theory
1) WEB STANDARDS
3) Accessibility
Web standard help to make your web page accessible for the wide range of
user including the older users knowledgeable user and poor user/ new user.
Network Interface
Browser Engine
Layout Engine
9) Web Page
Other than static dynamic web page have .PHP, .ASP, .HTML extensions and
this pages content server side code. Which can be changed every time? When the
page is loaded there for a dynamic web page is a live or interactive web page.
3) Web-Site
A web site is a collection of web pages, images, video, or other digital
assets. That is hosted on 1 or several web servers, usually accessible via internets
cell phones, LAN.
1) Home page
It is a main page of web site which gives detail information about the web
site and provides link to all other parts of your web portal and it is the first page
seen by every visitor. It is also known as indexed page as it provides a link and
detailed about all other. Home page is initial page of web site and it is point of
entry to all the information stored in a data server and in web site.
2) Web Server
It is a program which uses client server model and HTTP proto call to serve
the files and feature of engine to the web page and there user.
3) Client
A client is application or a user which communicate with server using web
browser and HTTP proto call to access the required information.
4) Internet Domain
1) Physical Layer
It is a purely H/W based layer. It is available in an every network. It includes
cabals, satellite devices, data cards and every other medium physically connected
in a network.
2) DLL
This layer is responsible for splitting a received data into smaller packets
which can be send over the network using connection media. Once it is send to
network DLL acknowledge network layer for the further action.
3) Network Layer
Takes packets of data from DLL verify it and send it to the correct path for
the further process. It also fixes the most suitable root for the packet in the
network.
4) Transport Layer
After Network layer fixed and show the root to the packet still network
layer is not responsible for the receiving packet on the destination successfully.
IT is responsibility of transport layer to post your packet successfully on
specified IP address. Transport layer also responsible for the acknowledgement of
received packet.
5) Application Layer
It is the layer which content application that the user use to access, send,
receive the data.
6) IP
Is responsible for basic connectivity between source and destination. It is
present in network layer of TCP and it play important role in establishing a
connection in network. It is use IP address of source and destination to establish a
secure connection.
7) FTP
File Transfer Protocol is a set of rule for exchanging files over the internet.
FTP works with TCP/IP protocol and completes your file transfer work successfully
using global internet and FTP server.
8) TELL NET
Tell Net is a network protocol used on the internet or also in local network.
It provides a bidirectional interactive text oriented commands line
communication facility using terminal base connection.
1) <HTML>___</HTML> Tag
It is used to create a web page that means start of web page. It is paired tag
along with also have an end of web page </html>.
2) <HEAD>____</HEAD> Tag
Every web page has an appropriate heading to display web page heading.
Head tag is used. The heading is placed in between head tag will be display in
header area of web page. It is a paired tag so has a closing tag </HEAD>.
3) <BODY>_____</BODY> Tag
This tag is used for web page content we can placed the document ie. Text,
audio, video, etc. in a web page body. It is a paired tag so have a closing.
</BODY>.
2) PHYSICAL STYLE TAG
These tags are used to provide styling to the document.
5) HEADING LEVELS
We can provide multiple heading levels for the text following heading levels
are available in HTML.
1) <H1>_____</H1>
2) <H2>_____</H2>
3) <H3>_____</H3>
4) <H4>_____</H4>
5) <H5>_____</H5>
6) <H6>_____</H6>
<H1> is the biggest heading level and <H6> is the smallest heading level.
Other heading levels in between this 2 respectively.
OPTION
FUNCTION
RIGHT,LEFT,CENTER Use for align table horizontally.
TOP, BOTTOM,
To align data vertically.
MIDDLE.
3.
NUMERICAL
CONSTANT/COLOR
NAME.
BACKGROUND URL/PATH
4.
5.
6.
7.
8.
9.
For ex.
BGCOLOR
HEIGHT
WIDTH
TITLE
ROWSPAN
COLUMNSPAN
NUMERICAL VALUE
NUMERICAL VALUE
USER DEFINED
NUMERICAL VALUE
NUMERICAL VALUE
2
6
7
8
10
<HTML>
<HEAD> <B> <H1> TABLE </H1> </B> </HEAD>
<TITLE> TABLE </TITLE>
<BODY BGCOLOR=SKYBLUE>
<CENTER>
<TABLE BORDER=5 CELLSPACING=2 CELLPADDING=2>
<TR>
<TD ROWSPAN=4> 1 </TD>
<TD COLUMNSPAN=3> 2 </TD>
<TD ROWSPAN=4> 3 </TD>
<TD ROWSPAN=2> 4 </TD>
</TR>
<TR>
3
9
Each one of this rectangle is called as frame since the content of the frame
are independent of each other to. They can also be hyperlink to each other and
frames can be resided depending upon their screen resolution.
<FRAMESET ATTRIBUTES=VALUES>
<FRAME ATTRIBUTE=VALUES/>
</FARAMESET>
For ex.
<HTML>
<TITLE> FRAME </TITLE>
<FRAMESET ROWS=60%, 40% COLS=70%, 30%>
<FRAME SRC=FILE1.HTML/>
<FRAME SRC=FILE2.HTML/>
<FRAME SRC=FILE3.HTML/>
<FRAME SRC=FILE4.HTML/>
</FRAMESET>
</HTML>
8) CREATON OF FRAME
The frameset tag defines the general layout of web page that contents the
various frames.
It creates a table of document in which each rectangle called frame
contains the separate data and different work.
In simple frameset tag defined how many column and row will be there in a
page.
Frame tag always goes inside the frameset tag.
When the user click on the link of a file 1 the browser goes out and retrieve the
file 1 which will appear in the area of frame 1.
1) COLUMN/ROWS
Column/ rows are the attributes of frameset tag which sets the size of the
column and row. In a frameset tag we can use only one row and one column
attribute. The value for each attributes is in a list of sizes in % separate by coma.
SR.NO. ATTRIBUTE
1.
BORDER
OPTION
NUMBERS
2.
BORDERCOLOR
3.
MARGIN WIDTH
HEX
NO/COLOR
NAME
PIXEL
4.
MARGINE HEIGHT
5.
FRAMEBORDER
6.
SCROLLING
7.
FRAME SPACING
8.
NAME
9.
NO-RESIZE
10.
TARGET
DISCRIPTION
Display the border around the hole
frame
To give the color to the frame border.
FRAME
Target will open frame into current window by overwriting all other
frame.
ATTRIBUTE
OPTION
DISCRIPTION
BORDER
NUMBER
2.
BORDER COLOR
3.
MARGIN WIDTH
HEX. NO./COLOR
NAME
PIXEL
4.
5.
6.
7.
SCROLLING
NAME
NO RESIZE
8.
ALIGN
It creates the logical division of your web page. It simply avoids the
mixing of data with data properties with other data outside the division tag.
This division tag most frequently used with the style sheet for applying
that particular CSS to the required block of data.
Syntax:
<DIV> CODE OF PROGRAM </DIV>
2) DHTML
1) INTRODUCTION TO DHTML
<Dynamic Hipper Text Markup Language> DHTML is not a language it is
term for describing the art of making dynamic and interactive web pages. DHTML
combines HTML, JAVA SCRIPT, CSS, and DOM.
Because of DHTML the normal HTML will start support to 4 standards
and reach dynamic content, that are.
1) HTML support JAVA SCRIPT.
2) HTML support DOM.
3) HTML support EVENTS.
4) HTML support CASCADED STYLE SHEET (CSS).
CSS is a web page layout method that has been added in HTML to give
web developers more control over their design their content and the layout of
page.
It is also helpful and necessary component for creating dynamic web
page.
Style sheet are a standard which is approved and recommended by W3C.
Use of CSS allows a designer to create a standard set of commands inside
the same page or outside the page. That set of commands control the design and
the style of support of your web page.
2) CREATING CSS
CSS has 3 types:
1) Inline CSS
2) Internal/ Embedded CSS
3) External CSS
2) INTERNAL CSS
Internal CSS are defined between the head tag <HEAD> _____ < /HEAD>
Of the same HTML page where your HTML code is present.
Internal CSS placed in particular web page using STYLE tag.
<STYLE TYPE=TEXT/CSS>
_____________
</STYLE>
The attribute for designing the page where embedded in style tag
<STYLE> _______</STYLE>. So this CSS is also known as embedded CSS.
These styles can be use only for the web page in which they are
enclosed. There for you would need to update this CSS again and again for each
page. You wish to design for the advanced use of CSS you must take out internal
CSS. Outside the HTML page and use it as External CSS.
SYNTAX:<HEAD>
<STYLE TYPE = TEXT/CSS>
CONTENT, ATTRIBUTE, AND VALUES.
</STYLE>
</HEAD>
FOR EX:<HTML>
<HEAD>
<STYLE TYPE = TEXT/CSS>
H1 {COLOR: ORANGE; TEXT_ALIGN = CENTER; FONT_SIZE = 30 ;}
BODY {BACKGROUND COLOR = SKY BLUE ;}
P { FONT_FAMILY:TIMES NEW ROMAN; FONT_SIZE: 20; FONT_COLOR: RED ;}
</STYLE>
</HEAD>
<BODY>
<H1> THIS MY FIRST CSS PAGE. </H1>
<P> THIS IS LAST TYPE OF CSS. </CSS>
</BODY>
</HTML>
3) EXTERNAL CSS
It is basically a text file which contents the style data and which saved
with .css extension.
For ex. Prog.css
An external style sheet is a separate page or a file which latter linked to
the web page. There for the styles are external to that web page or it resizes out
of the page. So its called as external css.
This will allows you to reuse the styles as many times, simply we would
like to link already created css in the pages to would link to use.
For using the style sheet in required page. We have to link the css using
link attribute of HTML. Thus link must be given within the head tag.
<HEAD>
<LINK REL=STYLE SHEET TYPE=CSS/TEXT HREF=URL/PATH>
</HEAD>
Q) Create an external css for page having 1 paragraph with BGcolor= gray
and some text in paragraph with color green.
STYLE1.CSS =>
P.S {BGCOLOR: GRAY;
TEXT-COLOR: GREEN ;}
PROG.HTML =>
<HTML>
<HEAD>
<LINK REL=STYLE SHEET TYPE= CSS/TEXT HREF=STYLE1.CSS>
</HEAD>
<BODY>\
<P> THE COLLEGE CODE </P>
</BODY>
</HTML>
JAVA SCRIPT
1) INTRODUCTION
In the past HTML was only language and other can use and create web
page.
HTML is not a programming language it is a hipper text markup
language. Which can be by any one easily?
Still HTML has many limitations and as its a Text Markup language it
dont have security to the user data.
HTML can easily position a text and easily manage a graphics on a web
page. But it cannot interact with other pages efficiently as required.
As a time passes many of computer users are become dependent on the
graphical user interface. Ie. They click on button, selects item from list. They can
now see the menu and decides the option. They can insert values into text box
and take result instantly rather than the entering a commands or waiting for a
long time for desire output.
HTML can interact with pages very slowly due to a heavy and lengthy
code. So the web site developers become in need of light weight, easy, faster,
advance graphical and interactive language. From here JAVA script comes in
action.
2) JAVA SCRIPT
Java script was released by net scope navigator and sun micro system in
1995. However java script is not same thing as java.
Java script is not a standalone programming language like c, cpp, and
java. (It needs supports of some other language).
When java script was first developed its name was LIVE SCRIPT and its
developer was net scope only. But latter net scope collaborated. The live script
with sun micro system and rename it as a java script from live script.
But this was not renamed because of the similarity in nature but because
of the popularity of sun micro system. So there is no similarity between java and
java script.
So java script is not stand alone programming language it is a scripting
language and should be used with the HTML or java or any other supporting
elements.
Using java script with any other language can reduce the no of line of
code. And page becomes more light weight and it can work faster. This feature of
java script makes it popular in the developers world.
JAVA
JAVA SCRIPT
1) Numbers
Java script consist
a) Integers,
b) Float.
These two types of numerical data type. Integer numbers can be defined
in java script in the form of binary, octal, decimal and hexadecimal form.
Ex. A=10; b=003; c= 07f;
Integer data types also contain some not 0 numbers values (none) that
has special meaning and special values.
Floating point letters are used to represent the numbers that required
use of decimal points or very large or very small numbers that must be written
using exponential notation.
Floating point number must consist of a number either containing a
decimal point is on integer followed by exponent.
Ex. A=12.6; b= 54.6554; c= 315.3;
2) BOOLEAN
It consists of only two logical values. Have only true and false.
Java script automatically converts Boolean values true and false into 1
and 0. When we are used in numerical expression.
3) STRING
It consist of string values ie. Anything enclosed in a single or double cote
(-----------or ---------------).
Java script provides built in supports for stream.
A stream is sequence of 0 or more character that is enclosed by notation.
A string start with a single cote must be end with single cote only and
similarly for double cote.
Ex. Sagar; 24, bajajnagar; Aurangabad;
4) NULL
It consist of only single value ie. NULL and used for empty or nonexistence reference. Use of NULL value refers the sort of error that occurs from
un-initialized variable.
We cannot convert a NULL value into default or dynamic value while
using in java script.
Ex. A=NULL.
5) TYPE CASTING
In the java script variable are loosely banded and are just implicitly
define best on the programming concept so we can change their data type in the
program dynamically using type cast.
5) CREATING VARIABLE
Variable are created for the handling various types of the data in the
programming environment.
Creating or declaring variable will help to keep the track of that variable
and it also defines the scope of that variable and keep your program code
organized.
SYNTAX:VAR<VARIABLE NAME> = VALUE;
EX.
VAR first name=Sagar;
VAR last-named=Maher;
VAR Phno=123456789;
6) OPERATORS AND EXPRESIONS IN JAVA SCRIPT
Operators are used to transform one or more values into a single
resultant value.
1) ARITHMATIC OPERATORS
OPERATOR
+
*
%
-/
++
DESCRIPTION
USE TO ADD TWO OR MORE NO.
TO MULTIPLY TWO OR MORE NO.
MODULUS.
RETURN THE VALUE THEN DECREMENT.
SUBSTRACTION.
DIVISION.
RETURN THE VALUE THEN INCREMENT.
2) LOGICAL OPERATOR
Is used to perform Boolean operation on Boolean operand. AND, OR,
NOT are the logical operator supported by java script.
OPERATOR
&&
||
!
DESCRIPTION
LOGICAL AND
LOGICAL OR
LOGICAL NOT
EXAMPLE
A && B;
A || B;
!B;
3) COMPARISION OPERATOR
Are used to compare two values.
OPERATOR
==
!=
<
>
===
<=
DESCRIPTION
ITS COMPAIRE TWO VALUES ARE
EQUAL.
ITS COMPAIRE NOT EQUAL.
ONE VALUE IS LESS THAN SECOND.
ONE VALUE IS GREATER THAN SECOND.
STRICTLY EQUAL.
LESS THAN EQUAL.
4) STRING OPERATOR
This operator is used to combine two strings. This means that operands
of this operator are two strings and result of the string operator are
concatenation of two string operator in one string.
Ex. sag+ar; =Sagar.
1) Immediate IF
This is inline conditional expression use to compare the condition with
the 2 expression True or False.
It douse not required IF keyword we can directly define our condition
and 2 expression which of them. Expression 1 is True and expression 2 is False
expression.
Syntax: (Condition)? Expression 1: Expression 2;
Ex.
Var day=Sunday;
(day==Sunday)? (This is weekend): (This is not weekend);
2) Simple IF
It will execute the body of IF statement only and only when the given
condition is True.
Syntax:
IF (Condition)
{
Body of IF;
}
Ex.
Var day=Tuesday;
IF (day==Tuesday)
{
Document.write (the day is right.);
}
3) IF then ELSE
It will execute the body of IF statement only when the condition is True If
the condition is False it will execute the body of ELSE statement.
Syntax:
IF (condition)
{
Body of IF;
}
Else
{
Body of Else;
}
Ex.
Var day=Monday;
IF (day==Monday)
{
Document.write (the current day);
}
Else
{
Document.write (Next Day);
}
Ex.
Var num;
For (num=0; num<10; num++)
{
Document.write (num);
}
2) While loop
This is also providing similar facility like FOR loop but it works on Boolean
operator True or False. It will repeat the block of while statement only when up to
the given condition gets True.
As long as condition get False the repetitions of block is in stop.
Syntax:
While (Condition)
{
Body of while;
}
Ex. Var num=1;
While (num<=10)
{
Document.write (num);
Num++;
}
3) Function
Syntax:
Function (Function name) (List of parameters)
{
Body of Function;
}
Functions are the block of code that perform specific task and also return
a value. If define as to be return.
Function content 0 or more parameters using this parameters we can
pass a values. Function process on this value and return a result to the user. There
are 2 type of function in java script.
1) Inbuilt.
2) User defines.
Function define by user is known as user define function. Function must
be declared in HEAD tag.
Ex.
Function mul (a, b)
{
Parseint (a);
Parseint (b);
Return a*b;
Document.write (mul);
}
This method takes a string as an I/P argument and alert dialog box in the
browser window along with given string only when that specify event occurs.
Alert dialog box show OK button with the string and you can continue to
next process until you click on OK button.
We can show alert dialog box in following condition.
1) When incorrect instruction given by user.
2) Wrong calculation or invalid I/P.
3) Service expiry date warning.
4) Unauthorized activity done.
Syntax:
Alert (Message to be given.);
Ex.
Alert (Welcome in Coding Visions.);
2) prompt
Syntax: prompt (Message,Default);
Ex.
Prompt (Enter login name, CV);
Prompt (Enter the password, Coding);
3) Confirm
Syntax: confirm (Message);
Ex.
Confirm (logout);
3) FORM
Syntax:
<form>
Java script and HTML code;
</form>
1) Methods
HTML form has 2 methods which defines the transaction of data
between the browser to server.
1) Get
When you define method is Get. The form submission values are passed
to the server or any other back end by using the address bar.
Get method is uses the URL from the action tag which is the address of
server to pass the data specified location.
2) Post
When we use method= post.
The specified information or data is send to backend along with program
code using navigator object and it is not visible to the user.
<Input type= text> defines the text field on the user Form which is use
to take the I/P from user in the normal text format and pass into server.
2) Password field
<Input type=password value=password>
<Input type=password> defines the similar text box as text field but
the character is in password field are masked.
3) Radio Button
<Input type=Radio value=male> <br>
<Input type=Radio value=Gmail>
When we define I/P type=Radio. We see the option of define
parameter from the code and we can select only one among them Radio Button
Works on Boolean property.
4) Check Boxes
<Input type=Check Box value=Bsc> <br>
<Input type= Check Box value=BCA>
5) Submit
<Input type=Submit Value=OK>
6) Select
<Input type=Select value=Field>
<Option>BCA</Option>
<Option>BSC</Option>
<Option>BCS</Option>
7) Text Area
<Text Area row=5 Cols=20>
8) Reset
<Input type=Reset value=Clear>
For Ex.
<html>
<head>
<script language="JavaScript">
function che ()
{
if (form1.nm.value=="")
{
</b>
</body>
</html>