Codeing websites

Tuesday 22 January 2019

Garaphic User interface

What is garapic user inter face ?

-The learn user interface originated in the engineering in the 1970s,

Virtually everyone who interacted with computer had been an engineer and a programmer , but new kind of user s wee emering the non programming user, , These users often rected more negativity to dealing with a machine , New forms of interaction were needed new interface were required attenion flowed to "the user interface"

with the introduction of the Macintosh in 1984 , Apple computer popularised the users interface as it is know today, Apple's user interface is now commonly referred to as a Graphical user interface or gui , The gui has become associated with a common features set aviable in a number of product offering common features include ,

Secoundary userinterface , usually s pointing device and typically a mouse,
point and shoot functionallu with screen menu that appear or disappear under pointing device control,
Icons the present files directories and other application and system entities
Dialog boxes buttons sliders check boxes and many other graphical metsphors that let the programmer and user tell the computer what to do and how to do it,

Today's GUIs have expanded basic functionalities to support not only graphics but also dimensions color height video and highly dynamic interaction modern user interface can simulate a very realistic view of a real three dimensional world.

Evolution of human and machine interaction

-The primary means communcation with computers carlier had been through command based interface , In command interface user have to learn to large command to get their jobs done, in earlier computer systempaper tapes cards and batch jobs were the primary means of communicating these commands to the computer user later time shareing system allowed to the use of CRT termminals to interat/communication with the computer . These early systems were havily burdened by users trying to share precious computer resources such as cpu and peripherals , The batch systems and time sharing led to command driven user interfaces Users had to memories commands and options or consult a large set of user manual , The carly mainframe and minicomputer sysems required a large set of interaction manuals to haw to use the system , In some system s required a large set of instruction manuals of instruction , meaningful terms were used for command names to help the end user , But in other systems the user had to memories several sequences of keystrokes to accomplish certain tasks ,
Early users of computers were engineers and what we now call expert users, users who had a lot of internet in knowing more about computer system and the technology, Command line interfaces were acceptable to majority of these users, in the 1970s, computers were introduced to a new class of users, secrelaries , managers and non-technical people, These new users were less interested in learning computer technology and more interested in getting their jobs done through the machine, Thecommand -based interface caused many of these new users to develop computer phobia,

Monday 21 January 2019

Discuss various features of GUI

Following are the features of GUI

Secoundary user input devices , usually a pointing device and typically a mouse,
point and shoot functionally with screen menus that appear or disappear under pointing device control,
windows that graphically display what the computer is doing ,
icons that represent files directes and other application and system entities,
Dialog boxes, button slides check boxes and many other graphical metaphores that let the proggramming and user tell the computer what to do and how to do it ,

What is the difference between bitmapped and character based display..?

-Bit-mapped display is made up tiny dots (pixel) that is an independent addressable and has much finer resolution that character display .-bit-mapped display have the advantage over character display .one of the major advantages is of graphic capability....

Sunday 23 December 2018

The Memory System

Q, What is memory hirerarchy? Explain in terms of access time and cost per bit ?

Ans,- A memory systerm is a very simple system yet it exhibites a winde range of technology and type , The basic objective of a memory system is to increase the speed of compution , Likewise the basic objectives of a memory system is to provided fast uninterrupted access by the processor to the memory , Such that the processor can operate at the speed it's expexted to work , But does kind of technology where there is no speed gap beteen processor and memory speed exits ? The answer is yes they do , but unfortunately as the access time (time taken by cpu to access a location in memory) becomes less and less the cost per bit of memory becomes increasingly higher , in additions , normally these things memories requires power supply till the information need to stred . Both these things are not very convenient but on the other hand the memory of other smaller cost have very high access time, which will result in slower operation of the cpu . Thus the cost of vs access time a normally has lead to hierachy of memory where we supplement fast memories with larger cheaper slower memories , These memory units may have very different physical and operational charecteristics therefore, making the memory system very divers in type cost, orgation technology and performance , This memory hierachy will work only if the frequency of access to the slower memories are significantly less than the faster memories --

Boolean Algebra and circuite Fundamental

A Booleam algebra B is a algebric structure which consists of the set X(# ) having two binary operations (denoted by the and or ) one unary operation (denoted by ) and two specially defined element 0 and 1 which satisfy the following rules for all x,y,z

Sunday 25 November 2018

What is menu element code

<!Doctype html>

<html>

<heas>

<title> Using the menu element </title>

</head>

<body>

<h1> Uing the menu element </h1>

<Menu type="Toolbar"> >

<L1> <Menu label="New">

<Button type="button"> Open</button>
<Button type="Button" > Save </button>
</Menu>

</L1>

<L1>

<Menu label=Edit">
<Button type="Button"> Undo </button>

<Button type=" Button" > Redo</Button>
</Menu>
</l1>

</body>

</html>

Saturday 17 November 2018

# Detais and summary html5 code

Details and summary codes

<!DOCTYPE HTML>

<html>

<head>

<title> detais and summary </title>

</head>

<body>

<h1> Using the details and summary element </h1>

<Details>

<summary> details and summary element are newly introducted in the html5 </summary>

</details>

</body>

</html>

Before click figure

after click figure

see change symbol ,

Using the command element

<!doctype html>

<html>
<head>
<body>

< h1> using the command element </h1>

<Menu>
<command onclick ="alert('hello world')"> click here</command>

</menu>
</Body>

</html>

(showing the message box)

<!Doctype html>

<html>

<head>

<body>
<h1> using the command element </h1>

<Menu>

<L1> <command type="radio" radigroup="bgcolor" onclick ="document =.bgcolor=' lightgreen' > light green </command> </L1>

</Menu>

</body>

</html>

What does interactive elements means

What is interactive element ....?

Interactivity is the process of information on web page and allows the user to communicates with that web page , An interactive element , web page allows a user to easily perform the tasked related to the content of the web page, such as retireving the details of an article or executing commands using radio buttons or check boxes , You can display the content on web page by using different web page , Provided by Hypertext mark up language such as Details summary menu , and kbd

The details of summary element

The DETAILS element is used to display the addtional details about a document such as , Publishing date of the document or the name of the other, , Where as the summary element or the used provided the summary element to create the header that can expend

<DETAILS>
<summary> This section contains the summary of the document , </SUmmary>
</DETAIL>

see in the figure

The menu element

The menu element is used to display a list of menu items of the of the list ,

The Attributes of the MENU Element

Attribute Description
Label Specifices a lebel of the menu, which is visible on the web page,
Type Defines the type of the menu such as context menu toolbar or list (details)

Followin is the an example of using the MENU element

<MENU>
<L1> <INPUT TYPE="RADIO" />> Ferrari</l1>
<l2> <input type="radio" /><maruti</l2>
</MENU>

See display menu items

The COMMAND element

The command element is introduce in html5 and is used to define the command button such as - radio button chech box, or button , you can use the command element in conjuction with the MENU element ,

The attribute of the command element
Attribute desciptions
checked Define the selection of the command in case of radio button and checkbox
disabled Disable the command
icon Specific the location of the graphical image that representing the command ,

lebel
radiogroup
type

How to easy create a Form with Multiple steps

Working with form

Main focus on this

Creating a form
Working with the input element
Using with the SELECT and OPTION element
Using the OPTGROUP element
Working with thw Textarea element
Using the FIELDSET AND LEGEND element
Using with the BUtton element
Using with the Datalist element
using with the Keygen element
Using with the output element
using with the PROGRESS element
using with the Meter element
Using with the enctype action and method attributes

IN DEPATH

At times , you need to develop websites that requires users interaction , For example , you need to develop a railway websites that allows uswers to check the arrival department status on the internet , This website user a registration and log in form to collect the user information that submits the information to server for futher processing , These type of form pfovide the medium of interaction between a websites and its users on the internet , A form is a are of a web page

that allowsthe users to provides the information in a varitey of the way ,

Exploring of the input element element

A form is the composed control s, such as text box, drop down list and check box radio button and enable users to enter the information , you can create by using the INPUT ELEMENT To do this , u need to set type of this INPUT ELEMENT

test and serach
tel
url
email
password
datetime-local
datetime, date, month, year, day , week time
number and range
file
hidden
checkbox
radio
submit
reset

Let's start ou discussion with the text and search type .,

Displaying the text and search type

here in include rectangle text box that facilites a userto enter information , It is used to collect single line information ,

Creating a form

Create using the form element a web page

<1doctype html>

<html>

<head>

</head>

<body>

start of form <FORM>

FORM

</FORM>

Ending form

</body>

</html>

see in figure display on form start and end

Working with the input element

<!Doctype html>

<html>

<head>

<title> Input </title>

</head>

<body>

<form>

Enter your name <input>

</Form>

</body>

</html>

output

display web page on form input textarea ,

Using the input element , You can add the following field on a forms,

Text field
Password field
Hidden field
Checkbox field
Radio button
Submit button firld
Reset button field

Now let's start to create all the these field on a web page,

Working with the text field

start text code in html form

<!DOCTYPE HTML>

<HTML>

<HEAD>

</HEAD>

<BODY>

<FORM>

Enter your username :<INPUT TYPE="TEXT" NAME="Username">

</FORM>

</BODY>

</HTML>

Display output usename form

Using the tex value code

include

size
maxlength
vale

Tye code here value text amd size

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> text value </TITLE>

</HEAD>

<BODY>

<FORM>

Enter your two digit code number:<input ype="text" name="username" size="2" maxlength="2" value="00">

</FORM>

</BODY>

</HTML>

Output HeRe WEB PAGE FORM

Display the value text and size

Working with field password

start code very easy to learn and type and create password (ek najar dekh lo easily set ho jaega mind m )

<!doctype html>
<html>

<head>
<title> password </title>
</head>

<body>

<form>

Password:<Input yype="password">

</form>

</body>

</html>

ready password code now see output on web page ,

Display hese,

How to creaate password size code

see here very simple code type

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> PSWSIZE</TITLE>

</HEAD>

<BODY>
<form>

Enter pasword:<input ype="password" name="pw" size="10">

</form>

</body>
</html<

Out put on web page

Looking picture

MAXLENGTH OF PASSWORD

Same code different some and add maxlength

<!DOCTYPE HTML>

<HTML>

<HEAD>
<TITLE> CODE MAXLENGTH </TITLE>

</HEAD>

<BODY>

<FORM>
Enter your password:<input type="password" name="pw" size="10" maxlength ="4">
</form>

</body>

</html>

So guy's looking here password output ,
below

Web form pw

Now start how to make a value of password

simple and easy value password code ,( cool mind and see)

<!Doctype html>

<html>

<head>

<title> value of password </title>

</head>

<body>

<form>

Enter password: <input type="password" name="pw" size="10" maxlength="5" value="dreamtech">

</form>

</body>
</html>

Ready output web page form value of password ,

Display output

Hidden field code type show below:

<!Doctype html>

<html>

<head>

<title> hidden field</title>

</head>

<body>

<form>

User name :<input id ="name="text" /> <br>
<input type="hidden" id="country" value="india"><br>
<input type="submit" onclick="alert('Hellow '+
document.getelementById('name'),value +'from'+
document.getelementById('country').value)" value="submit">

</Form>

</body>

</html>

results here in picture

hidden name submit

Create web page and show out then input name and submit , your name is hidden and show click text box,

Creating a check box field

Check boxees allows you to select one or more number of iteems from the list of items , you can add the checkboxes field on the web page , by specify the type attribute INPUT element to checkbox

Show the checkbox code

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> checkbox </TITLE>

</HEAD>

<BODY>

<FORM>

Select one o the three choices :</br>

<INPUT type="checkbox" name="option1" value="india" > India </BR>
<input type="checkbox" name="option2" value="Pakistan"> Pakistan </br>
<input type="checkbox" name= "option3" value="China"> China </br>
<input type="checkbox" name="option4" value="singapur"> Singapur</br>

</FORM>

</BODY>
</HTML>

se display on picture checkbox

Creating a radio button

, its creating radio button , use tis button in form select gender male nad femel and other , and option select , on web page

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> checkbox </TITLE>

</HEAD>

<BODY>

<FORM>

Select one o the three choices :</br>

<input type="radio" name="group1" value="mobile"> mobile</br>
<input type="radio" name="group2" value="smart mobile"> smart mobile</br>
<input type="radio" name= "group3" value="laptop" > laptop </br>
<input type="radio" name="group4" value="mouse"> mouse</br>

</FORM>

</BODY>
</HTML>

see display readio button on form

Creating a submit button field

The submit button use to submit detail s entered in a form to the server ,Let's create a web page ,

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> checkbox </TITLE>

</HEAD>

<BODY>

<FORM>

Username:<input type="test" name="username" value="dreatech"> </br>
Password:<input type="password" name="password" value="kogent"> </br>
<input type="submit" name="submit" value="click1"></br>

</FORM>

</BODY>
</HTML>

Output :

Creating reset butto and include submit in form

Already disscuss about submit button so reset button clear data and input new username and password , this called reset

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> checkbox </TITLE>

</HEAD>

<BODY>

<FORM>

Username:<input type="test" name="username" value="dreatech"> </br>
Password:<input type="password" name="password" value="kogent"> </br>
<input type="submit" name="submit" value="click1"></br>
<input type="reset " name="reset" value="reset"> </br>

</FORM>

</BODY>
</HTML>

USING SELECT AND OPTION ELEMENT

Nnw disscuss here option value work select any other option as like you have ten things if you want to selec one then use option ,

<!DOCTYPE HTML>
<HTML>

<HEAD>
<TITLE> OPTION ELEMENT</TITLE>
</HEAD>

<BODY>

<FORM>
Select anyone fruites </br>
<SELECT>

<OPTION value="mango" >Mango</option>
<option value="banana"> banana </option>
<option value="apple"> apple</option>
</option value="orange"> orange</option>
</select>

</form>
</body>
</html>

see on figure ,

Select option body color

add one code
(<body bgcolor="yellow">)

There add one code change form background color , very easy option and select coede ,

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> OPTION ELEMENT</TITLE>
</HEAD>
<BODY bgcolor="yellow">
<FORM>
Select anyone fruites </br>
<SELECT>

<OPTION value="mango" >Mango</option>
<option value="banana"> banana </option>
<option value="apple"> apple</option>
</option value="orange"> orange</option>
</select>

</form>
</body>
</html>

see output on picture

SELECT AND OPTION CHANGE ALIGEMENT

Aligement change this option elemnt add aligement code <center, left, right>
below

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> OPTION ELEMENT</TITLE>
</HEAD>
<BODY>
<FORM align="center">
Select anyone fruites </br>
<SELECT>

<OPTION value="mango" >Mango</option>
<option value="banana"> banana </option>
<option value="apple"> apple</option>
</option value="orange"> orange</option>
</select>

</form>
</body>
</html>

see display on form in align

Option and select size

Here code is option element change size this element ,

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> OPTION ELEMENT</TITLE>
</HEAD>
<BODY>
<FORM align="center">
Select anyone fruites </br>
<SELECT size="10">

<OPTION value="mango" >Mango</option>
<option value="banana"> banana </option>
<option value="apple"> apple</option>
</option value="orange"> orange</option>
</select>

</form>
</body>
</html>

output this code

see on picture option element

Using the option group element

The OPTION GROUP element is used to group the list of option and display in the deop down list
Let's create

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> group OPTION ELEMENT</TITLE>
</HEAD>
<BODY>
<FORM align="center">
Select anyone fruites </br>
<SELECT>

<OPTGROUP level="Fruties">
<option value="orange"> orange</option>
<option value=" mango"> mango</option>
<option value="apple"> apple</option>
<option value="grapes ">grapes</ption>
</select>

</form>
</body>
</html>

see output

Working with the text area element

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> TEXTAREA </TITLE>

</HEAD>

<BODY>

<TEXTAREA>

Enter the text here

</TEXTAREA>

</form>

</body>

</html>

OUTPUT textarea

Using the field set and legend element

Fileset elemnt group related control in a single box and the legend elements provide the caption for that box,,

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> Grouping </TITLE>

</HEAD>

<BODY>

<FORM>

<FIELDSET>

<LEGEND> Log in </LEGEND>

<level>

usernae
<input type="text" name="name" value ="Username"></br>
</level>
<br>
<level>
Password<input type="password">
</level>
</BR>
<level>
<input type="Submit" name="Submit" value="Submit">
</level>
</Fieldset>
</legend>

</form>
</body>
</html>

Using the BUTTON ELEMENT

!<DOCTYPE HTML>

<HTML>

<TITLE> Using the butto element </title>

</head>

<body>

<p> simple submit button </p>

<Button type="submit"> submit</button>

<hr>

<p> Changing the font of the button </p>

<Button type="button" style="color:red;font-size:20px;">

<b> Submit</b>

</button>

</body>

</html>

Image button display using back and font button

The BUTTON element allows you to a display the image on the button control , let's create web page

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> Display image button </TITLE>

</head>

<body>

<p> Display image on button </p>

<Button type="Button">

<img src="back.png" width="50" height="50"/>

</button>

<button type="submit">

<img src="next.png" width="50" height="50">

</button>

</body>

</html>

The button element back and next

NEXT

Datalist
keygen element
outputelement
meter

Using the datalist element

You can create a list of predefined options in a field using the DATALIST
Element Let's create a web page

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> dATALIST </title>

</HEAD>

<BODY>

<P>ENTER THE NAME OF YOUR FAVIROUITE CAR :</P>

<INPUT type="text" name="favcar" list="car">

<datalist id="cars">

<option value="BLW">
<option value="porsche">
<option value="audi">
<ption value="ford">
<option value="Ferrari">
<option value="wercedes">

</DATALIST>

</BODY>

</HTML>

display here output on figure,

Keygen element using

The element keygen is need to generated the key pair at the time of submiting the form, let's create web page

<!DOCTYPE HTML>

<html>

<head>

<title> keygen </title>

</head>

<body>

<FORM action ="option.html" methodt="post" enctype="text/plain">

First name:<input type="text" name="name">

</br>

Last name:<input type="text" name="name"></br>

<KEYGEN name="key" challenge="09856413145" keytype="RSA">

<input type="submit" value="submit"/>

</FORM>

</BODY>

</HTML>

Display her output

disply post page ,(option.html>

Using the progress element

As alerdy disscuss about element , you can view the progress of your current task with the help of the PROGRESS.element

<!DOCTYPE HTML>

<html>

<head>

<title> progress element </title>

</head>

<body BGCOLOR="grey">

Current task</BR>

</BR>
<PROGRESS value="200" max="500">

</PROGRESS>

</FORM>

</BODY>

</HTML>

progress element output on thist page

Using the meter element

<!DOCTYPE HTML>

<html>

<head>

<title> METER ELEMENT </title>

</head>

<body>

<Meter value="5" min="0" max="10" style="width:200px"> </METER> Passing score </br>

<METER value="10" min="1" max="20" style="width="300px"> </METER> your score</br>

</BODY>

</HTML>

output in this figure meter element
below:

USING THE ENCTYPE, ACTION, METHOD ATTRIBUTE

The enctype attribute use the specify the format of the form's content at the time of submission ,

<!DOCTYPE HTML>

<HTML>

<HEAD>
<

<TITLE> USING THE ENCTYPE ACTION METHOD </TITLE>
</HEAD>

<BODY>

<FORM action="action.asp" method="get" enctype="text/plain">

Fiest name="<input type="text" name="frame" />

Last name:<input type="text" name="fname" />

<input type="submit" value="submit" />

</form>

</body>

</html>

output below in this picture :

display

then add its code action form and method

How do make hyperlink

REFERENCE PAGE

<!DOCTYPE HTML>

<HTML>

<TITLE> LINK </TITLE>

</HEAD>

<BODY BGCOLOR="GREY">

<H> Referance page </h>

<a href="www.google.com> Google l link </a>

</body>

</html>

Using the target Attribute

As alreadey discussed, the target attribute of the , A element is used to specify the frame or the window in which you want to open the reference page,

Using the id attribute

as already disscused unique identifiyer ,

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> Creating a hyper link with id attribute </TITLE>

</HEAD>

<BODY>

<H1>This is a top</h1>

<A Id ="top"></a>

<a href="#middle"> Go to middle </a>

</br><A href="#bottom"> Go to bottom </a>

<h1> This is top </h1>

</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>

</br></br></br></br>/br></br></br></br>

<h> This is middle </h>

<A href=#top"> Go to bottom </a>

<h> This is middle </h>

</br></br></br></br>/br></br></br></br>

<H> This is bottom</h>

<A HREF="#TOP"> GO TO MIDDLE </A>

</BR>

<A HREF="#MIDDLE"> Go to middle </a>

<h1> This is bottom </h>

</br></br></br></br>/br></br></br></br>

</body>

</html>

Linking to a mail system

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> Linking to mail system </TITLE>

</HEAD>

</BODY>

</HTML>

IMPLEMENTING LINK RELATIONS

The ref attribute of the link element is used to connect the external resource with the current document Foe instance if you want to link your document to external stylesheet,

<!DOCTYPE HTML>

<HTML>

<TIELE> Link relation </TITLE>

<Link ref=stylesheet"href="/example.css"/>

</HEAD>

<BODY>

<H1> This is an example of the link relation </h1>

<p> Here is some text to be displayed as the the body of the web page </p>

</body>

</html>

Using relation link

body {

colr:ff0000;

background-color:pink;

font:family: couter new;

}

h1

}

font-size:18pt
color:pink;

p

}

font-size:12pt
}

Creating tables

Creating a simple table
Adding a title to column
Adding caption to a table
Specify the propertiecs of the column
spaning rows and columns
Using table in the image
Creating advanced table
Nesting tables

In depth

Hypertext markup language is designed to enforce the proper sepration of structure and grphic is a web page , if you html document contain simple then text it is also important , that the content should be structured in a manner that makes it clear and readable , To represent the web page , in an organized manners , headers paragraph and lines brakets are commonly used in a HTML document, Apart from this HTML also provides the table to structure the content in an HTML document ,

A table in an orderly management of data that is stored in the form of rows and columns , web designers use table for multiple purpose , such as positioning image and text or web pages (page layout) displaying large arays data and creating input forms, suppose u need to design a weeb page to display , then you can use table s to display the information in a structure manner, HTML provied the TABLE element to create table and display the respective information in a tabular format, These elements are

Caption
colorgroup
col
thead
tfoot
tr
td
th

Here first learn about table , Next you learn about the TABLE element, FUTHER, you learn about the child elemnt of the TABLE element , including the CAPTION element, the COLGROUP element, the COL element , the BODY element the HEADelementthe TFOOT, element, the TR element the Td element, and the TH element in the immediate solutions section ,

Understing table

Table allow you to organize data such as text image and links in the form of rows the colums , Each tan=ble cointan an associated caption that provied a small description about all content avilable in the table , You can use tables to represent information in an orgnized manner and of format a web page , Table are used on web sites for two major purpose

<TABLE>

-the table element the data

</TABLE>

THE CAPTION ELEMENT

The CAPTION element is used the caption of a table and is used in conjuction with the TABLE element, A table should have only one CAPTION element and it must be placed after starting tag of the TABLE element,

<TABLE>

Here goes the caption of a table

</CAPTION>

</TABLE>

The colgroup element

<TABLE>

<CAPTION>

Here goes the caption of a table ,

</CAPTION>

<Colgroup span="3" style="color:blue">

<Colgroup>

</TBLE>

The COL element

<Table>

</Table>

The TBODY element

<Table>

<THEAD>

<TFOOT>

</TFOOT>

<TBODY>

<TR>

<TD> tHIS IS FIRST CELL OF THE TABLE </td>

<Td> This is the second cell of the table </td>

<tr>

</Table>

see here cell,

Immediate solution

<!Doctype html>

<html>

<head>

<title> a simple table</title>

</head>

<Table>

<tr>

<td>Harish</td>

<td>D-23, vijay nagar txt, delhi </td>

</tr>

<tr>

<td> Deepak pandey </td>

<td> nagar new delhi </td>

</tr>

<td> Rohit </td>

<td>h,no-123, south text , delhi </td>

</tr>

</TABLE>

see sample table

ADDITING A TITLE TO A COLUMN

<!Doctype html>

<html>

<head>

<title> Adding a title to acolumns </TITLE>

</head>

<Table border="1">

<tr>

<Th> Emp</th>

<td>Emp name </td>

<td>dob</td>

<td>doj</td>

<td>Address</td>

<tr>

<th> 001</th>

<td>Harish </td>

<td>31/12/1990</td>

<td>01-01-2009</td>

<td> nodia, sectoe 62, Noida </td>

</tr>

<tr>

<Th> Emp</th>

<td>Emp name </td>

<td>dob</td>

<td>doj</td>

<td>Address</td>

<tr>

<th> 002</th>

<td>Deepanshi </td>

<td>31/12/1990</td>

<td>01-01-2009</td>

<td> nodia, sectoe 62, Gurugram</td>

</tr>

</TABLE>

see , table with the column title

Table body color

<!Doctype html>

<html>

<head>

<title> Adding a title to acolumns </TITLE>

</head>

<tr>

<td>Address</td>

<tr>

<td>Harish </td>

<td> nodia, sectoe 62, Noida </td>

</tr>

<tr>

<td>Address</td>

<tr>

<td>Deepanshi </td>

<td> nodia, sectoe 62, Gurugram</td>

</tr>

</TABLE>

see, body color,

Creating table aligment

<!Doctype html>

<html>

<head>

<title> Adding a title to acolumns </TITLE>

</head>

<body>

<tr>

<td>Address</td>

<tr>

<td>Harish </td>

<td> nodia, sectoe 62, Noida </td>

</tr>

<tr>

<td>Address</td>

<tr>

<td>Deepanshi </td>

<td> nodia, sectoe 62, Gurugram</td>

</tr>

</br>

<tr>

<td>Address</td>

<tr>

<td>Harish </td>

<td> nodia, sectoe 62, Noida </td>

</tr>

</br></br></br>

<tr>

<td>Address</td>

<tr>

<td> nodia, sectoe 17, Gurugram</td>

</tr>

</br></br></br>

<tr>

<td>Address</td>

<tr>

<td>Mark Batiya </td>

<td> nodia, sectoe 50,Noida </td>

</tr>

</br></br></br>

<tr>

<td>Address</td>

<tr>

<td> nodia, sectoe28, Gurugram</td>

</tr>

</TABLE>

Employee details

<!Doctype html>

<html>

<head>

<title> Adding a title to acolumns </TITLE>

</head>

<body>

<Th> Emp details</th>

<th>>Address</th>

<tr>

</br<

<tr>

<td>Harish </td>

<td> nodia, sectoe 62, Noida </td>

</tr>

<tr>

<td>Address</td>

<tr>

<td>Deepanshi </td>

<td> nodia, sectoe 62, Gurugram</td>

</tr>

</br>

<tr>

<td>Address</td>

<tr>

<td>Harish </td>

<td> nodia, sectoe 62, Noida </td>

</tr>

</br></br></br>

<tr>

<td>Address</td>

<tr>

<td> nodia, sectoe 17, Gurugram</td>

</tr>

</br></br></br>

<tr>

<Td> Emp details</td>

<td>Address</td>

<tr>

<td>Mark Batiya </td>

<td> nodia, sectoe 50,Noida </td>

</tr>

</br></br></br>

<tr>

<td>Address</td>

<tr>

<td> nodia, sectoe28, Gurugram</td>

</tr>

</TABLE>

Cell color in table

<!Doctype html>

<html>

<head>

<title> Adding a title to acolumns </TITLE>

</head>

<body>

<b> Here employee details again </b>

</caption>

<tr>

<Th> Emp details</th>

<th>>Address</th>

<tr>

</br<

<tr>

<td>Harish </td>

<td> nodia, sectoe 62, Noida </td>

</tr>

<tr>

<td>Address</td>

<tr>

<td>Deepanshi </td>

<td> nodia, sectoe 62, Gurugram</td>

</tr>

</br>

<tr>

<td>Address</td>

<tr>

<td>Harish </td>

<td> nodia, sectoe 62, Noida </td>

</tr>

</br></br></br>

<tr>

<td>Address</td>

<tr>

<td> nodia, sectoe 17, Gurugram</td>

</tr>

</br></br></br>

<tr>

<Td> Emp details</td>

<td>Address</td>

<tr>

<td>Mark Batiya </td>

<td> nodia, sectoe 50,Noida </td>

</tr>

</br></br></br>

<tr>

<td>Address</td>

<tr>

<td> nodia, sectoe28, Gurugram</td>

</tr>

</TABLE>

see, celcolor

<!Doctype html>

<html>

<head>

<title> Adding a title to acolumns </TITLE>

</head>

<body>

<b> Here employee details again </b>

</caption>

<tr>

<Th> Emp details</th>

<th>>Address</th>

<tr>

</br

<tr>

<td>Harish </td>

<td> nodia, sectoe 62, Noida </td>

</tr>

<tr>

<td>Address</td>

<tr>

<td>Deepanshi </td>

<td> nodia, sectoe 62, Gurugram</td>

</tr>

</br>

<tr>

<td>Address</td>

<tr>

<td>Harish </td>

<td> nodia, sectoe 62, Noida </td>

</tr>

</br></br></br>

<tr>

<td>Address</td>

<tr>

<td> nodia, sectoe 17, Gurugram</td>

</tr>

</TABLE>

Spanning rows and column

When yoe work with table s, it is sometimesrequired to combine one or more adjucement cellsinto one cells. The process of combining one or more adjecementcellsis know spanning , , you can span cells either , vertical or horizentally,

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE>Spaning rows in the table </Title>

</HEAD>

<body>

Student details</b> </caption>

<tr>

<th>Student id </th>

<th>Student name </th>

<th> Date of birth</th>

<th> Address </th>

</tr>

<tr>

<td>Deepak </td>

<td> ssector 26, New Delhi </td>

</tr>

<tr>

<td> Isarland </td>

</tr>

<tr>

<td> America </td>

</tr>

<tr>

<td>Mantex kat </td>

<td> affirca </td>

</tr>

<tr>

<td> Sauthanic </td>

<td> South, america </td>

</tr>

</table>

</body>

</html>

see figure

Image Taable

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> Using is the image in the table </Title>

</Head>

<body>

<Tr>

</tr>

<tr>

</td>

</tr>

</table>

</body>

</html>

see figure, in html

IMAGE ALIGMENT

<!DOCTYPE HTML>

<html>

<head>

<tittle> image </title>

<body>

<p> IMAGE ALL <p>

</br>

</center>

</br>

<right>

</right>

</body>

</html>

Displaying Image by codeing

<!DOCTYPE HTML>

<html>

<head>

<tittle> image </title>

<body>

</br></br>

</body>

/HTML>

see image . figure

Image border

<!DOCTYPE HTML>

<html>

<head>

<tittle> image </title>

<body>

<IMAGE SRC="C:\Users\intel\Downloads\jobs\26.JPG" Width="100" height="100" border="4" > </img>

</body>

</html>

Image - size

<!DOCTYPE HTML>

<html>

<head>

<tittle> image </title>

<body>

<IMAGE SRC="C:\Users\intel\Downloads\jobs\26.JPG" Width="600" height="700"> > </img

</body>

</html>

see here image size ,

Gif

<!DOCTYPE HTML>

<html>

<head>

<body>

</body>

</html>

see gif

Displaying altimae Text for an image

Displaying altermate text for in image , sometimes , you insert image in a web page , which file todisplay due to various reasons , such as internet path or invalid file name , In such as case , you can specify altermate text to an image that is displayed even if the image in not visiual on the web page

<!DOCTYPE HTML>

<html>

<head>

<tittle> alternet text </title>

<body>

<h1> Displaying altermate text for an image </h1>

</img>

</body>

</html>

see figure

Modify the heading size of the image

<!DOCTYPE HTML>

<html>

<head>

<tittle> alternet text </title>

<body>

<h1>Specify size of the image </h1>

<h2> Simple image </h2>

</body>

</html>

Image hyperlink

You can use image hyperlink in hte same way as a hyperlink , You wish to provide information about the image , you can use the hyperlink , in the web page , web can create the hyperlink and them add an image to a hyperlink ,

<!DOCTYPE HTML>

<html>

<head>

<tittle> alternet text </title>

<body>

<h1>Specify size of the image </h1>

</body>

</html>

Using color name

<!DOCTYOE HTML>

<HTML>

<HEAD>

<TITLE> Using color name </TITLE>

</HEAD>

<h2> Welcome to the world of html </h2>

<h3> specify body text color </h3>

</body>

</html>

Display the output bodytext color

Using the hex value

Insted of using the color you can use the Hex value of colors to specify a color on web page ,

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> Using the Hex value </Title>

</HEAD>

WELCOME TO THE WORLD OF HTML

</BODY>

</HTML>

Easy lear coding hml image tage beatiful type , then display web browser

Hyerlink image tage
Target
Progress bar
size
height/ width
border
color
area shpae
map
border

USING THE RGB CONFIGURATION

The RGB color is the set of three dials , Whwere the first dial representes red, second dial represent green , and third dial blue color , create the web page ,

Let's go

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> Using color hex value </TITLE>

</HEAD>

<H2> welcome to the html hex world </H2>

</BODY>

</HTML>

Implemention the CANVAS element

Canvas element used to display 2D shaps and graphical on a web page

Codeing websites

Tuesday 22 January 2019

Garaphic User interface

Monday 21 January 2019

Discuss various features of GUI

Sunday 23 December 2018

The Memory System

Wednesday 19 December 2018

Boolean Algebra and circuite Fundamental

Sunday 25 November 2018

What is menu element code

Saturday 17 November 2018

# Detais and summary html5 code

Friday 16 November 2018

What does interactive elements means

Thursday 1 November 2018

How to easy create a Form with Multiple steps

Monday 29 October 2018

How do make hyperlink

Popular Posts