Education

HTML

HTML stand for Hyper Text Mark up Language. It is the language used for creating webpage. To write the HTML codes we can use any text editor program. E.g. Notepad

Basic HTML Tags

HTML tags are the signals to we browser to display text on screen and to control the structure webpage. Basic HTML tags needed for creating webpage are:

· <HTML>: surrounds entire HTML document

· <HEAD>: contains the information about webpage

· <TITLE>: Displays the title of webpage in title bar

· <BODY>: contains all the text to display on page

Types of tags

There are two types of tags used:

· Paired tag (container tag)

The tag which include both beginning and ending tags. E.g. <B> text </b> (to make text bold)

· Singular tag <Empty tag>

The tag which do not have ending tag. E.g<BR> (to start new line), <HR> (to insert horizontal line), <IMG> (to insert inline image)

Basic structure of HTML

<HTML>

<HEAD>

<Title> title for the webpage </titile>

</HEAD>

</BODY>

Text and other tags

</BODY>

</HTML>

Starting first webpage

Ø Open Notepad

Ø Type the code:

<HTML>

<HEAD>

<TITLE> Tile for the webpage </title>

<BODY>

Text and other tags

</BODY>

</HTML>

Ø Save it with the extension’.HTML’OR’.HTM’

Attributes

Attributes are extra properties of tags. Which provides additional information of tags to browser

BGCOLOR : To give colour on background

BACKGROUND: to use picture on background

TEXT: To give text colour on page.

LEFTMARGIN: to set the left margin on page

RIGHTMARGIN: To set the right margin on page

§ Example:

<BODY>

Note:

Colour in HTML page can be specified using color name or color code.

Code for some Colors:

White: FFFFFF

Black: 000000

Red: FF0000

Green: 00ff00

Blue: 0000FF

Sample HTML document

<HTML>

<HEAD>

</HEAD>

<BODY bgcolor=”green”text=”red”> My Name is BIKEE. I am the computer operator in government of Nepal

</BODY>

</HTML>

Attributes of <P> tag

Align=”left”

=” right”

=” center”

[ aligns the paragraph to left, right and centre respectively]

Character Formatting tags

<I> tag: used for making text italic

<U>tag: used for underlining text

<Sup>tag: used to give superscript <Power>

Effect on text

A<Sup>2</sup>+b<sup>2</sup>

Heading

Heading are defined with the <h1> to <h6>tags.

The smallest heading.

<h1> this is a heading </h1>

<h2> this is a heading </h2>

<h3> this is a heading </h3>

<h4> this is a heading </h4>

<h5> this is a heading </h5>

<h6> this is a heading </h6>

Line Breaks

The <br> tag is used when you want to end a line, but don’t want to start a new paragraph.

The <br> tag force a line break wherever you place it.

<P> this <br> is para <br> graph with line

<FONT> tag

e.g.

Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comment to explain your code, which can help <!—this is a comment-->

List in HTML

Ordered List

Syntax” <OL type=”1”/”A”/”a”/”I”./”I”>

</OL>

Example:

<li>Basic</li>

<li>windows</li>

<li>MS office</li>

</ol>

<li> Graphic Designing</li>

<li>photoshop</li>

<li>pagemaker</li>

<li> indesing</li>

</ol>

Unordered List

Syntax: <UL TYPE=”Circel”/Square”/”Disc”>

</UL>

Example:

<li>Super Computer</li>

<li>Mainframe Computer</li>

<li>Mini Computer</li>

</UL>

HTML Character Entities

Some characters like the <character, have a special meaning in HTML, and therefore cannot be used in the text.

To display a less than sign (<) in HTML, we have to used a character entity.

The Most Common Character Entities:

Result	Description	Entity name	Entity Number
	Non-breaking space	& nbsp;
<	Less than	⁢	&#60
>	Greater than	& gt;	>
&	Ampersand	&	&
“	Quotation mark	& quot;	"
‘	Apostrophe	' (does not work in IE)	& #39;

Some other commonly Used character Entities:

Result	Description	Entity Name	Entity Number
ꞓ	cent	¢	&#162
£	pound	& pound;	&#163
¥	yen	¥	¥
₵	euro	& euro;	¤
§	Section	& sect;	§
©	Copyright	©	©
×	Multiplication	×	×
÷	Division	÷	÷

HTML Links

HTML uses a hyperlink to link to another document on the web.

The Anchor Tag and the <a> (anchor) tag to create a link to another document

External Link

Example

<a href=”smart.html”>click toopen the page of santEdu word</a>

Internal Link

<a href=”#a”>chapter 1 </a>

<a href=”#b”>chapter 2 </a>

<a href=”#a”>chapter 3 </a>

……..

………

<a name=”a”> chapter 1 </a>

………

<a name=”b”>chapter 2 </a>

…….

< a name=”c”>chapter 3 </a>

……

Image in HTML page

<img> tag is used to insert an inline image in html document

Image link

Scrolling text

<marquee tag is used for scrolling text in html page

<marquee behaviour=”scroll/alternate/slide” direction=’left/right/top/down”> smart info tech <br>

A corner of computer Learners.

</marquee>

Image marquee

</marquee>

HTML tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag).and each row is divided into data cells (with the <td> tag). The letters td stands for table

Data”which is the content of a data cell. A data call can contain text, images. Lists, aragraphs, froms, horizontal rules, tables, etc.

< table border=”1”>

<td>row1, cell 1 </td>

<td>row1, cell 2 </td>

</tr>

<tr>

<td>row 2, cell 1 </td>

<td>row 2, cell 2 </td>

</tr>

</table>

How it looks in a browser:

Tables and the border attribute

If you do not specify a border attribute the table will be displayed without any borders, sometimes this can be useful, but most of the time, you want the border to show.

To display a table with borders, you will have to use the border attribute.

< table border=”1”>

<td>row1, cell 1 </td>

<td>row1, cell 2 </td>

</tr>

<tr>

<td>row 2, cell 1 </td>

<td>row 2, cell 2 </td>

</tr>

<tr>

<td>row2, cell 1 </td>

<td>row2, cell 2 </td>

</tr>

</table>

Heading in a table

Headings In a table are defined with the <th> tag.

<tr><th>heading</th>

<th>Another heading</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

How it looks browser.

Empty cells in a table

Table cells with no contents are not display very well in most browser.

< table border=”1”>

<tr> <th> heading </th>

<tr>Another Heading </th>

</tr>

<tr>

<td>row 2, cell 1 </td>

<td></td>

</tr>

</table>

How it looks in a browser.

Noe that borders around the empty table cell ae missing (NB! Mozilla firefox display the border).

To avoid this, add a non-breaking space ( ) to empty data cells, to make the borders visible:

< table border=”1”>

<tr> <th> heading </th>

<tr>Another Heading </th>

</tr>

<tr>

<td>row 1, cell 1 </td>

<td>row 1, cell 2 </td>

</tr>

<tr>

<td>row2, cell 1 </td>

<td>  </td>

</tr>

</table>

How it looks a browser:

COLSPAN and ROWSPAN

Table cells can span across more than one column or row, the attributes COLSPAN (“howmany across”) and ROWSPAN (“how many down”) indicate how many columns rows a cell should take up.

<TABLE BORDER=2 CELLPADDING=4

<TR><TH COLSPAN=2> Computer </TH></TR>

<TR><TD> Basic</TD><TD>2000</TD></TR>

<TR><TD> ADVANCE</TD><TD>2500 </TD></TR>

</TABLE>

Computer

Which give us

ROWSPAN sets how many rows a cell spans. ROWSPAN can get a little confusing because it requires you to think through how the cell affects the rows after the row it starts it’s particularly useful in this situation to add borders to the table during the design process, even if the table won’t ultimately use borders.

The table code creates two header cells which span three rows each:

Cellpadding: distance of text form cell margin

<html>

<head>

<title>

Table with cellpadding

</title>

</head>

<h1><fontface=”Brush script MT” size=”6” style=”texndent:150.opt”><b>USE of cellpadding <B></font></h1>

<body>

<tr>

</tr>

<tr>

Item 1

Item 3

Item 2

</tr>

</table>

Item 4

</body>

Item 5

</html>

Which give us

Cellspacing: space between two cells

<html>

<head>

<title> table with cell spcing </title>

</head>

<h1><font face=”Brush script MT” size=”6”><b> Use of cell spacing<b></font></h1>

<TR>

<TH ROWSPAN=3>Computer</TH>

<TD>Basic</TD><TD>200 0 </TD> </TR>

<TR>

<TD> ADVANCE</TD><TD>2500</TD></TR>

</TABLE>

</body>

</html>

Which creates

Use to cell heading

More on Table

<Html>

<Head>

<Title>more on table </title>

<body bgcolor=”#87CEFA”>

<body>

<table border=5 cellspacing=10 cellpadding=0 bordercolor=”red” bgcolor=”pink’>

<tr>

<td>item 1</td>

<td rowspan=2>item 2</td.

<td>item 3 </td>

</tr>

<tr><td><item4</td><td>item5</td>

</tr>

</table>

</body>

</html>

Item 1

Which create

Item 4

RORM

It is an interface to allow user to enter data website.

<html>

<head><title>santEdu world </title></head>

<body>

REGISTATION FORM </font></center>

<form

Method=”post”smart__it@outlook.com>

Name:<input type=”text”size=25maxleght=25><br>

Address:<textarea cols=20 rows=2></textarea><br>

Course<br>

<input type=”checkbox”name=”choice”>Basic<br>

<input type=” checkbox”name=”choice”> Graphic<br>

<input type=”checkbox”name=”choice”>Accounting<br>

SEX: <input type=”radio” name=”sex” CHECKED> male &nbsp &nbsp&nbsp

<input type=”radio” name=”six”> female<br>

Address: <textarea cols=20rows=2></textarea></br>

Qualifiaction:<select >

<option>inter

<option> SLC

<option>Bechaler

<option>Master

</select><br>type your code<input type=”password”size=15 maxlenght=12><br>

</form>

</body>

</html>

Output of the syntax

Education

Tuesday, November 7, 2023

COMPUTER OPERATOR HELPFUL NOTES HTML NOTES

COMPUTER OPERATOR HELPFUL NOTES HTML NOTES

Education

Followers