COMPUTER FUNDAMENTALS: BHART HTML

html

Html-hyper text markap language

History of html--- hyper text markap language is a mathed was ordinary text can be converted into hyper text. It is aset of special code included control the layout an appearance of the text.

Tim berners lee develops html in early 1990 at CERN (council euprpian dela recursh necular). The europian partical physics labouratory janawa, swetjerland.

Introduction of uri---

Uri—universal resorse identifire

The World Wide Web is a network of information resources. The web reliage on three makanism to made these resources readily available to the widest possible audience.

(1) a uniform naming screen for lokating resources and the web(uri)

(2) protocals for accesing resources over the wber(http)

(3) hyper text for easy navigation among the resources(html)

In html, uri are use to----

(1) Link to another document resorce.

(2) Link to an external scap sheet or scritt.

(3) Create an image map.

(4) Submit a form.

(5) Create a frame document.

(6) Create an external reference.

(7) Refer to Meta data conventions describing a document.

Switching between your editor and browser.

(1) Load any editor.

Ex-notepad

(2) create html file and save it, with extection name.htm l

(3) view it any browser

Ex-internet explorer or net scape navigator

Tag or tag element----reverse to html cource that difind the element in an html file, such as headings, images, paragraph and list. there are two kinds of tags.the container tag and empty tag.

container tag—this tags which bracket or contain tags or another tag elements are called container tag. a start tag and an end tag which enclose the tags texts they affect.

empty tag--- these are stand alone and do not bracket or contain text or any other tags elements. an anti tag function is a standalone element with in an html document does not bracket or contain anything else.

starting your page document tag—on html file should include at list these tag.

(1). the html tag

(2). the head tag

(3). the title tag

(4). the body tag

(1) the html tag---this tag definds the top most elements, identifiy it is an html document. it is a container tag. that is a start<html> and end tag </html>and all the other tags and text are nexted within .

start-ex <html>

syntax

</html>

(2) the head tag—this tags contains information about your html file. it may also contain other tags that helps you to identifiy your html file to the outside world. the head tag is nexted within html tag.

ex-<html>

<head>

syntax

</head>

</html>

(3)the title tag—this tag is nexted within the head tag. it identifies your page to the rest of the world. The tag output is display on your browser title bar world does not appear as part of the page.

ex-<html>

<head>

<title>

your title-my first web page

</title>

</head>

</html>

(4)the body tag--- this tag is the compliment of the head tag and contains, all of the tags, or elements that a browser acutely as the body of your html document both the head tag or the body tag are nexted within in html tag.

ex-<html>

<head>

<title>

title-my name is kumar

</title>

</head>

ram is a good boy.

</body>

</html>

structuring your web page: - you can use headings to organise your web page. heading also at seperates in is word processing document. the top labour heading (h1) acutely is title for your page. there are six label of headings

ex-<html>

<head>

<title>

my name is raj kumar

</title>

</head>

<body>

<h1> st.mary’s multipurpose training institute</h1>

<h2> st.mary’s multipurpose training institute</h2>

<h3> st.mary’s multipurpose training institute</h3>

<h4> st.mary’s multipurpose training institute</h4>

<h5> st.mary’s multipurpose training institute</h5>

<h6> st.mary’s multipurpose training institute</h6>

</body>

</html>

paragraph and line break tags:-the p (paragraph) and br (break) tags you insert tags and lines effects on your pages.

the p (paragraph):-the p tag is a container element, but with an employed ending tag. you do not have to include the </p> end tag.

ex-<html>

<head>

<title>

my name is ramesh kumar

</title>

</head>

<h1>

<p>an html document consists of text, which defines the content of the document, and tags, which define the sturcture and appearance of the document. the structure of an html document is simple.</p>

<p>each document has a head and a body, delimited by the head and body tags. the body is where you put the actual contents of the html document.

</p>

</body>

</html>

the br (line break) tag: - the br tag is an empty or stands alone, tag that simply insurts a line break.

ex-<html>

<head>

<title>

my name is satish kumar

</title>

</head>

<body>

<h1>student’s name</h1>

<p>

amit kumar<br>

banti kumar<br>

chandan kumar<br>

raju kumar<br>

soni kumari<br>

moni kumari<br>

satish kumar<br>

sapna kumari<br>

</body>

</html>

creating lists: - headings and paragraph text elements are used to more commanly than lists. many web pages are nothing but list of hyper text links. you can create two types of list, order and unorder. an ordered list is a number list and an unoudered list is a bulleted list.

the ol (ordered list):-the ol tag definds a list of items.it is used in conjection with the li (list item) tag. which is use to tag the individual list items and a list.

ex-<html>

<head>

<title>

raju kumar

</title>

</head>

<body>

<ol>

<li>fundamental<br>

<li> windows<br>

<li>ms excel<br>

<li>ms access<br>

<li>power point<br>

<li>foxpro<br>

<li>internet<br>

</ol>

</body>

</html>

the ul (unorder list):- the ul tag definds a bulited list of item. the li tag is nested inside the ul tag and definds each item within the list.

ex-<html>

<head>

<title>

my first web page

</title>

</head>

<body>

<ul>

<li>flow chart<br>

<li>foxpro programming<br>

<li>visual basic<br>

<li>oracle<br>

<li>tally<br>

</ul>

</body>

</html>

nesting lists: - you can nest a list inside another list. the browser automatically nested list labels. you can nest the same or different list.

ex-<html>

<head>

<title>

ramu is a good boy

</title>

<body>

<ul>

<li>software

<ol>

<li> computer concept<br>

<li>ms windows<br>

<li>ms excel<br>

<li>foxpro<br>

</ol>

<li>hardware

<ol>

<li>input divices<br>

<li>output divices<br>

<li>flopy disk<br>

</ol>

</ul>

</body>

</html>

contaroling and ordered list or display:-the type attribute allows you to spacefiy the number type for and ordered list. besides making it possible for you to spacefiy number type for a numbered list. this attribute alows you to create multi label outline.

spacefiy the number type: - you can use the type attribute the number types for an ordered list. the values that you can use with the type attributes are “a”,”a”,”i”,”i” and “1” for spacefiy uper case let us, lower case let us, uper case roman numbr,lower case roman number for arabic number respectively.

ex-<html>

<head>

<title>

my second web page

</title>

</head>

<body>

<li>student’s name

<li>amit kumar<br>

<li>banti kumar<br>

<li>chandan kumar<br>

<li>raju kumar<br>

<li>rani kumari<br>

<li>mohan kumar<br>

<li>santosh kumar<br>

<li>moni kumari<br>

</ol>

</body>

</html>

creating a multilabel outline: - by different number types to different labels of a nested an order list. you can create a multilabel outline.

ex:- <html>

<head>

<title>

internet explorer

</title>

</head>

<body>

<li>bihar<br>

<li>patna<br>

</ol>

<li>ans college<br>

<li>sbr college<br>

<li>sna college<br>

</ol>

<li>raj kumar<br>

<li>soni kumari<br>

<li>moni kumari<br>

</ol>

<li>fundamental<br>

<li>ms windows<br>

</ol>

</body>

</html>

Contaroling the list of unorder list: -- spacefiy a bulet type: -- the type at resued can be use to spacefiy type of bulet for an unorder list. The value you can use with the type attribute is “circle” and “square”. Only net space navigator recognizes this attribute.

Ex-<html>

<Head>

<Title>

Ramu is a good boy.

</title>

</head>

<Body>

<Li>software

<Li>computer concept<br>

<Li>ms windows<br>

<li>ms excel<br>

<li>ms access<br>

<li>foxpro<br>

</ul>

<li>hardware

<li>input devices<br>

<li>output devices<br>

<li>floppy disk<br>

</ul>

</body>

</html>

The align attribute:- most browsers automatically left-justify a new paragraph. the align attribute is used to center align,right align or left align .

ex:- <html>

<head>

<title>

working with text

</title>

</head>

<h1 align=”center”>smmti barh</h1>

<p align=”left”> course type

<ul>

<li>computer<br>

<li>spoken english<br>

<li>competition<br>

<li>typing<br>

<li>library<br>

</ul>

<p align=”right”>fee structure

<p><ol>

<h align=”center”>computer

</ol>

</body>

</html>

setting the font size:-the font tag uses the size of attribute.the change of size using absulite and relative size value. there are seven absulete font sizes, numbered from 1 to 7, that you can set using the size attribute of the font tag.

the changing font color:-the font tag uses the color attribute to change the color of font. a setting the font color using color names. you can use any 1 to 16 color names to spacefiy a font color.

setting the background, text and links color:-you can set the color for the background, text and links by using the attributes of the body tag

(1)bgcolor set by background color.

(2)font the text or forground color

color

(1) black

(2) white

(3) aqua

(4) fuchsia

(5) gray

(6) blue

(7) green

(8) lime

(9) maroon

(10) red

(11) navy

(12) olive

(13) purple

(14) silver

(15) yellow

(16) copper

ex:- <html>

<head>

<title>

my first web page

</title>

</head>

<p>

<font size=1>smmti barh</font><br>

<font size=2>smmti barh</font><br>

<font size=3>smmti barh</font><br>

<font size=4>smmti barh</font><br>

<font size=5>smmti barh</font><br>

<font size=6>smmti barh</font><br>

<font size=7>smmti barh</font><br>

</body>

</html>

marquee tag:-this tag is unique internet explorer it display the contant as moving text.

bgcolor:-color this attribute the color for the ractungler result for the marquee tag.

loop:-number sets the number of time marquee tags test it contains.

direction:-scrool direction spacefiy the scrooling direction of the text. direction can be up, down, left and right.

behaviour:-motion type attributes the motion of the text with in ractungaler set aside for the marquee tag. the values can be alternet, scroll or slide.

scroll delay:-milisecond increasing the scroll delay value slow the scroll speed and discreasing the value may scroll go faster.

ex:-<html>

<head>

<title>

my name is rajesh kumar

</title>

</head>

<p>

<h1 align="center">smmti application form</h1>

<h1 align="center">alakhnath road barh patna</h1>

</marquee>

</font>

</body>

</html>

the hr tag:- the <hr> tag tells the browser to insert a horizontal rule across the display window. like the <br> tag,<hr>forces a simple line break,although unline<br>,<hr> cause the paragraph alignment to reverse to the default.

select:-inside<form>………</form>tag, any number of select tags are permitted freely inter mixed with other html elements and text. this tag allows a user to choose one of the set of alternatives, select element is used for query. the select element is specialized for creating drop-down or scroll lable lists of menus only. select has a partner element, option, to delimit the choices, the user has for selection.

form tag:-a form tag is an html document just like any other element. it has a start tag<form> and an end tag</form>, the form itself regular text, other html elements such as tables and form elements such as check boxes.

option:-this tag only within the select element and is used to represent each choice of the select. the attributes of option.

radio:-collects information where there is one, and only one, possible value from a set of alternatives. the checked attribute can set initial value of this element.

reset:-resets the form to its default values. the value attributes sets the string display to the user for this-element.

submit:-a pushbutton that causes the current form to be submitted into a query url and sent to a remote server.

text:-used for a single line of text. this uses the size and maxiength attributes. for multiple lines, use textarea. this is default.

ex:- <html>

<head>

<title>

my name is manish kumar

</title>

</head>

<h1 align="center">executive form</h1>

<hr>

<p><strong>father's/husband name:</strong><input type="text"

<p><strong>e-mail id:</strong><input type="text"

<input checked type="radio" name="thesex" value="male">male

<input type="radio" name="thesex" value="female">female

<p><strong>educational qualification:</strong>

<option selected>none

<option>graduate

<option>undergraduation

<option>12 from c.b.s.e

<p><strong>which type of job you want:</strong>

<input type="checkbox" name="per">permanent

<input type="checkbox" name="adhoc">adhoc

</form>

<hr>

</font>

</body>

</html>

ex:- <html>

<head>

<title>

application form

</title>

</head>

<h1 align="center">application form</h1>

<hr>

<p><strong>category no:</strong><input type="number"> ::::::::::::::::::::::::::::::::;;::::::::::::::;;;

<p><strong>father’s name</strong><input type="text">:

<strong>mother's name</strong><input type="text"></p>

<p><strong>community</strong><input check type="radio" name="the community" value="ur">ur

<input check type="radio" name="the community" value="sc">sc

<input check type="radio" name="the community" value="obc">obc ::::::::::::::::::::::::::;::::;;;;;

<strong>gender</strong><input check type="radio" name="the gender" value="female">female

<p><strong>religion</strong>

<input check type="radio" name="the religion" value="hindu">hindu

<input check type="radio" name="the religion" value="muslim"> muslim

<input check type="radio" name="the religion" value="other">other</p>

<p><strong>visble mark of identification on body</strong>

<p><strong>mobile no</strong>

<p><strong>educational qualification</strong>

<option selection>none

<option>graduate

<option>under graduation

<option>12 from c.b.s.e

<option>10 from c.b.s.e

<option>non matric

</select></p>

<p><strong>marital status</strong>

<input check type="radio" name="themarital status value="married">married

<input check type="radio" name="themarital status value="unmarried">unmarried</p>

<option selection>none

<option >1

<option >2

<option >3

<option >4

<option >5

<option >6

<option >7

<option >8

<option >9

<option >10

<option >11

<option >12

<option >13

<option >14

<option >15

<option >16

<option >17

<option >18

<option >19

<option >20

<option >21

<option >22

<option >23

<option >24

<option >25

<option >26

<option >27

<option >28

<option >29

<option >30

<option >31

</select>

<strong>month</strong>

<option selection>none

<option>jan

<option>feb

<option>mar

<option>apr

<option>may

<option>jun

<option>jul

<option>aug

<option>sep

<option>oct

<option>nov

<option>dec

</select>

<option selection>none

<option>1980

<option>1981

<option>1982

<option>1983

<option>1984

<option>1985

<option>1986

<option>1987

<option>1988

<option>1989

<option>1990

<option>1991

<option>1992

<option>1993

<option>1994

<option>1995

<option>1996

<option>1997

<option>1998

<option>1999

<option>2000

<option>2001

<option>2002

<option>2003

<option>2004

<option>2005

<option>2006

</select></p>

<p><strong>permanent address</strong>

<strong>name</strong><input type="text">;;;;;;;;;;;;;;;;;

<strong>father's name</strong><input type="text"></p>

<p><strong>village/mo</strong><input type="text">:::::::::::::::::::::

<strong>po</strong><input type="text">:::::::

</form>

<hr>

</font>

</body>

</html>

ex:- <html>

<head>

<title>

my name is raushan kumar

</title>

</head>

<h1 align="center">smmti application form</h1>

<h1 align="center">alakhnath road barh patna</h1>

</marquee>

<hr>

<p><strong>father's name</strong>

<p><strong>mother's name</strong>

<p><strong>nationality</strong>

<p><strong>religion</strong>

<input check type="radio" name="thereligion" value="hindu">hindu

<input check type="radio" name="thereligion" value="muslim">muslim

<input check type="radio" name="thereligion" value="other">other</p>

<p><strong>community</strong>

<input check type="radio" name="thecommunity" value="ur">ur

<input check type="radio" name="thecommunity" value="obc">obc

<input check type="radio" name="thesex" value="male">male

<input check type="radio" name="thesex" value="female">female</p>

<p><strong>caste</strong>

<p><strong>mobile no</strong>

<p><strong>educational qualification</strong>

<option selection>none

<option>graduate

<option>under graduation

<option>12 from c.b.s.e

<option>10 from c.b.s.e

<option>non matric

</select></p>

<p><strong>marital status</strong>

<input check type="radio" name="the marital status value="married">married

<input check type="radio" name="the marital status value="unmarried">unmarried</p>

<option selection>none

<option >1

<option >2

<option >3

<option >4

<option >5

<option >6

<option >7

<option >8

<option >9

<option >10

<option >11

<option >12

<option >13

<option >14

<option >15

<option >16

<option >17

<option >18

<option >19

<option >20

<option >21

<option >22

<option >23

<option >24

<option >25

<option >26

<option >27

<option >28

<option >29

<option >30

<option >31

</select>

<strong>month</strong>

<option selection>none

<option>jan

<option>feb

<option>mar

<option>apr

<option>may

<option>jun

<option>jul

<option>aug

<option>sep

<option>oct

<option>nov

<option>dec

</select>

<option selection>none

<option>1980

<option>1981

<option>1982

<option>1983

<option>1984

<option>1985

<option>1986

<option>1987

<option>1988

<option>1989

<option>1991

<option>1992

<option>1993

<option>1994

<option>1995

<option>1996

<option>1997

<option>1998

<option>1999

<option>2000

<option>2001

<option>2002

<option>2003

<option>2004

<option>2005

<option>2006

</select></p>

<p><strong>permanent address</strong>

<strong>name</strong><input type="text">;;;;;;;;;;;;;;;;;

<strong>father's name</strong><input type="text"></p>

<p><strong>village/mo</strong><input type="text">:::::::::::::::::::::

<strong>po</strong><input type="text">:::::::

<p><strong>email id</strong>

<p><strong>which course of apply</strong>

<option select>none

<option>computer

<option>spoken english

<option>competition

<option>typing

<option>library

</select>

</p>

<p><strong>course type</strong>

<option selection>none

<option>ccsa

<option>dcsa

<option>tally

</select>

</p>

<p><strong>ccsa course</strong>

<li>fundamental<br>

<li>ms excel<br>

<li>ms access<br>

<li>foxpro<br>

<li>internet<br>

</ol></p>

<p><strong>dcsa course</strong>

<ul>

<li>fundamental<br>

<li>ms excel<br>

<li>ms access<br>

<li>foxpro<br>

<li>internet<br>

<li>flow chart<br>

<li>foxpro pro<br>

<li>visual basic<br>

<li>oracle<br>

<li>tally<br>

</ul></p>

</form>

<hr>

</font>

</body>

</html>

tables

creating table:-the table tag needs to bracket your table. all other tags or text included in your table should nest inside the table tag.

creating columns and rows:-the tr(table row) and td(table data) tags are used to create a grid of rows and columns.

ex:-<html>

<head>

<title>

table

</title>

</head>

<body>

<table>

<tr>

<td>kumar</td>

<td>rupas</td>

</tr>

<tr>

<td>kumar</td>

<td>station</td>

</tr>

</table>

</body>

</html>

adding a border:- by default the table does not contains a border to inculde a border to the table, specefiy a border attribute inside the table tag.

adding column heading:-the th(table heading) tag is used to defined a “cell”as a heading cell rather than as on ordinary data cell. to create the heading at the top of the table, first create a row using the tr tag .then use the th tag to define a cell instead of using td tag.

ex:-<html>

<head>

<title>

your table

</title>

</head>

<body>

<tr><th>roll no</th><th>first name</th><th>last name</th><th>fee paid</th></tr>

<tr><td>1</td><td>amit</td><td>kumar</td><td>3000</td></tr>

<tr><td>3</td><td>soni</td><td>kumari</td><td>3200</td></tr>

<tr><td>4</td><td>moni</td><td>kumari</td><td>6500</td></tr>

</table>

</body>

</html>

adding spacing and padding:-the cell spacing attribute space between the two cells, the cell padding attributes at space with in each cell.

setting the table width and height:-the width or height attribute can be used to spacefiy the size of your table.

add row heading:- to create a row heading add the cell inserted of td cell at the start of table row.

align cell contains:- the align attribute is use to align the contains of the td cells by align left, center or right as the align value.

setting column width:- by insearting width attribute in the top cell of a column, you can spacefiy the width of the entire column. to unsure that all of the columns are of equal width, you need to set the same width attribute value.

spanning columns:-the columns span attribute lets you can create cells that spans column.

ex:-colspan=”4” indicates that four cells are merged to become one cell.

spanning rows:- the row span attribute is use to spacefiy the number of rows to span.

assign by background color:- you can assign a background color to an entire table. a row width in table, or a single cell.

ex:- <html>

<head>

<title>

my tables

</title>

</head>

<body>

student report</th>

<th width=”30%”>father’s name</th>

<th width=”40%”>class</th>

<th width=”20%”>address</th></tr>

<tr>

<td>amit kumar</td>

<td>raju prasad</td>

<tr>

<td>banti kumar</td>

<td>manohar prasad</td>

<td>patna</td></tr>

<td>soni kumari</td>

<td>rahul parsad</td>

<td>bihar</td></tr>

<td>vivek kumar</td>

<td>mahendra prasad</td>

</table>

</center>

</body>

</html>

COMPUTER FUNDAMENTALS

Saturday, 28 April 2018

BHART HTML

No comments:

Post a Comment