Scribd
Upload
9 views10 pages

HTML

Uploaded by

nayabkcse2125
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views10 pages

HTML

Uploaded by

nayabkcse2125
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Developement Types

1. Application Developement- The softwares which execute under an operating system are
known as application softwares.
Ex.
Ms-Word, PageMaker, Photoshop etc
Technologies are- C,C++,VB,VB.NET,C#, Java(Swing,AWT,JDBC)

2. Web Development- The Applications which executes under a web server are known as web
applications. During developemnt each technology requires their own web server. These are-
Technology Web Server Name
Sun Java(JSP,Servlet) Apache Tomcat
Microsoft(ASP,ASP.NET)IIS
PHP WAMP
Web Developement
In Developement Pont of View their are two categories of web developement, these are-
1. Client Side Developement- Here we design the interface of website, means it decides
how a web page will look and the client side technlogies are-
HTML,DHTML,JavaScript etc

2. Server Side Developement- The Server Side Technology focus about the functioning of
a website.The Server Side Technologies are - ASP, JSP & Servlet, PHP

HTML-
1. HTML stands for HyperText Markup Language.
2. It is a client side programming languages.
3. The extention of HTML may be .htm or .html
4. It is not a case sensitive language
5. it is a Tag based language, & the tags could be classified into two types
a) single tag (<tag> or <tag/>) ex. <br>,<hr>
b) paired tag (<tag>.....</tag>) ex <html>,<body> etc
6. you can write html program on any editor like notepad, but some specific IDEs are-
a) Dreamweaver
b) FrontPage
7. It executes on a web browser.
Basic HTML Tags-
<html>- indicates starting of a html program
<head>- it is container tag contains <title>,<script>,<style> etc
<title>- sets the title of a page
<body>- specifies the contents of a page
Attributes
1. bgcolor- sets the background color
2. background- sets the background image

Example
<html>
<head>
<title>My First Web Page</title>
</head>
<body bgcolor="pink">
Hello Friends
</body>
</html>

Text Formatting Tags-


<h1>...<h6>- They specifies the heading
<font> - sets the font color & style
Attributes
1. face- sets the font name
2. color- sets the font color
3. size - sets the font size
<hr>- draw the horizontal line, it is a single tag
<br>- change a line, it is also a single tag
<b>- Bold
<i>- Italic
<u>- Ubderline
<big>- Big Text
<small>- Small Text
<pre>- pre formatted Text
<sup> - Superscript
<sub>- Subscript
<p>- Paragraph
Attribute
align- sets the alignment of the paragraph

<strike> - creates a strikethrough text


<div> - divide the page into different indivudual parts
Example
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>About US</h1>
<hr>
Welcome in <b>Sushant IT College</b> it is situated in <i>Naini</i>.After 10<sup>th</sup> you
can joing <big><big><big>Computer Courses</big></big></big>.<br>
<hr>
<font face="impact" color="green" size="6">United College</font>
<br>
It is the <u>Engineering College</u> situated in Naini.
<br>
<h1>Simple C Program</h1>
<pre>
#include &lt stdio.h &gt
#include &lt conio.h &gt
void main()
{
clrscr();
printf("Hello");
getch();
}
</pre>
</body>
</html>

Working with List


Tag Meaning
<ol> Ordered List(1,2,... or a,b,...)
<ul> UnOrdered List( Bullets)
Attribute-
type- specifies the list type
for numbering use (A,a,I,i etc)
for bullets use (sqaure,circle)
<li> List Items
<dl> Definition List
<dt> Definition Term
<dd> Definition
Example
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Student Record</h1>
<hr>
<ol type="I">
<li>Bzar Mohd. Salih</li>
<li>Qamaruddin Shamsi</li>
<li>Dilshad</li>
<li>Wissam</li>
<li>Ali</li>
</ol>
<hr>
<h1>Course Details</h1>
<hr>
<ul type="square">
<li>PHD</li>
<li>MSc</li>
<li>MCA</li>
<li>M.Tech.</li>
</ul>
<hr>
<h1>Important Definitions</h1>
<dl>
<dt>HTML</dt>
<dd>It is a Client Side Scripting Language.It is a Client Side Scripting Language.It is a Client Side
Scripting Language.It is a Client Side Scripting Language.It is a Client Side Scripting Language.It is a Client
Side Scripting Language.It is a Client Side Scripting Language.It is a Client Side Scripting Language.It is a
Client Side Scripting Language.It is a Client Side Scripting Language.It is a Client Side Scripting Language.It
is a Client Side Scripting Language.It is a Client Side Scripting Language.It is a Client Side Scripting
Language.It is a Client Side Scripting Language.It is a Client Side Scripting Language.It is a Client Side
Scripting Language.It is a Client Side Scripting Language.It is a Client Side Scripting Language.It is a Client
Side Scripting Language.It is a Client Side Scripting Language.</dd>
<dt>HTML</dt>
<dd>It is a Client Side Scripting Language.It is a Client Side Scripting Language.It is a Client Side
Scripting Language.It is a Client Side Scripting Language.It is a Client Side Scripting Language.It is a Client
Side Scripting Language.It is a Client Side Scripting Language.It is a Client Side Scripting Language.It is a
Client Side Scripting Language.It is a Client Side Scripting Language.It is a Client Side Scripting Language.It
is a Client Side Scripting Language.It is a Client Side Scripting Language.It is a Client Side Scripting
Language.It is a Client Side Scripting Language.It is a Client Side Scripting Language.It is a Client Side
Scripting Language.It is a Client Side Scripting Language.It is a Client Side Scripting Language.It is a Client
Side Scripting Language.It is a Client Side Scripting Language.</dd>
</dl>
</body>
</html>
Some Special Tags
<img> - sets the image on the page
Attributes
1. src- source of image(image url)
2. width
3. height
4. alt- alternate text
<marquee>- creates a scrolling object
Attributes
1. behavior- it may be scroll or alternate
2. direction- sets the direction may be left,right,top,bottom
3. scrolldelay- sets the scrolling time
<embed> - this tag is used for embedding a vedio of the page
Attributes
1. src
2. width
3. Height

<a> tag- Creates a hyperlik.


Attributes
1. href- sets the navigation url
2. target- sets the target window name
Example
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<marquee direction="right" behavior="alternate">
<h1>Sushant IT College</h1>
</marquee>
<hr>
<embed src="sawan.mp4" width="500" height="400">
<hr>
<img src="Nokia.jpg" width="200" hieght="200" >
<hr>
<a href="http://www.google.com">Search More...</a>
<br>
<a href="C:\Users\Administrator\Desktop\cs\itscript.html">IT Script</a>
</body>
</html>

Working with Table- tables are used for arranging the elements in tabular form as well as designing the
user interface of a page.
Tags Meaning
<table> creates a table
Attributes
1. border
2. align
3. width
4. bgcolor
5. background
6. height
<tr> Table Row
<td> Table Cell Value
Attributes
1. rowspan- merge the rows
2. colspan- merge the columns
<th> Table Cell Heading

Example
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Simple Table</h1>
<hr>
<table border="2" width="500px">
<tr>
<th>Name</th><th>Age</th><th>Address</th>
</tr>
<tr>
<td>Sachin</td><td>29</td><td>Allahabad</td>
</tr>
<tr>
<td>Bzar</td><td>22</td><td>Naini</td>
</tr>
</table>
<h1>Complex Table</h1>
<hr>
<table border="2" width="800px">
<tr>
<th colspan="2" width="400px" >Name</th><th colspan="2" width="400px">Address</th>
</tr>
<tr>
<th>First Name</th><th>Last Name</th><th>City</th><th>State</th>
</tr>
<tr>
<td>Qamar</td><td>Shamsi</td><td>Kabul</td><td>Afghanistan</td>
</tr>
<tr>
<td>Qamar</td><td>Shamsi</td><td>Kabul</td><td>Afghanistan</td>
</tr>
</table>

</body>
</html>

Working with Frame- Frame is used for spliting the window into different individual parts. and each part
you can embed a new html page.
Tags Meaning
<frameset> Creates a frame
Attributes
1. rows - creates horizontal frame
2. cols- create vertical frame
<frame> creates individual window
Attributes
1. src- sets the name of file which will show in the window
2. name- sets the name of window

Example
<frameset cols="40%,30%,30%">
<frame src="demo.html" name="f1">
<frame src="" name="f2">
<frame src="" name="f3">
</frameset>

Nesting of Frame-
<frameset rows="10%,80%,10%"frameborder="no">
<frame src="title.html" name="f1">
<frameset cols="10%,90%">
<frame src="menu.html" name="inf1">
<frame src="home.html" name="main">
</frameset>
<frame src="footer.html" name="f3">
</frameset>

menu.html
<html>
<body>
<a href="home.html" target="main">Home</a><br>
<a href="about.html" target="main">About</a><br>
<a href="contact.html" target="main">Contact</a><br>
<a href="register.html" target="main">Register</a><br>
</body>
</html>

Working with Form-Form is a medium (interface) which provide the facility for input values from the
user end.

Tags Meaning
<Form> Creates a form
Attributes
1. Name
2. action- sets the name of action file(need a server side file like jsp)
3. Method- sets the method of data transimission may be get or post
<input>- Creates an input field
Attributes
1. Type- sets the name of input type field like
a) text- creates a text box
b) password- creates a password field
c) radio - creates a radio button
d) checkbox - creates a checkbox
e) submit- creates a server side button
f) button- creates a client side button
g) reset - creates a reset field
2. Name
3. Size
4. value- sets the input type value
<select>- creates a combo box(drop down list)
<option> - creates the element of combo box
<textarea>- creates a multiline input textbox

Example
<html>
<body>
<form name="f1">
<table width="600" align="center" border="2" bgcolor="pink">
<tr>
<td>Name</td>
<td><input type="text" name="t1" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="t2" /></td>
</tr>
<tr>
<td>Gender</td>
<td><input type="radio" name="r1" checked="checked" />Male
<input type="radio" name="r1" />Female
</td>
</tr>
<tr>
<td>Hobbies</td>
<td>
<input type="checkbox" name="cb1" />Cricket
<input type="checkbox" name="cb2" />Reading
<input type="checkbox" name="cb3" />Travelling
</td>
</tr>
<tr>
<td>City</td>
<td>
<select name="s1">
<option>Allahabad</option>
<option>Agra</option>
<option>Lucknow</option>
<option>Aligarh</option>
</select>
</td>
</tr>
<tr>
<td>Comment</td>
<td><textarea rows="5" cols="20">
</textarea>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Register Me" /></td>
</tr>
</table>
</form>
</body>
</html>

Stylesheet-
1. It is used for formatting the contents of a page,like heading style,font style etc
2. You can control the whole design of a website using css.
3. The extenton of CSS must be .css
Type of CSS- It could be classified into 3 types-
1. inline style
2. <style> tag
3. cascading style sheet(.css)

inline style- it allows you for specifiying the style of the content just inside the tag.Syntax will be-

<tagname style="attribute-name:value;.....">Tag Content</tag>


Inline Example
<body>
<h1 style="font-family:impact; color:green; size:35px;">United College</h1>
<hr style="color:red" />
</body>

<style> tag- It is used for specifying a common style for whole the page.

<Style> Tag Example

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
h1
{
font-family:impact; color:green; size:35px;
}
hr
{
color:red;
}
</style>
</head>

<body>
<h1>United College</h1>
<hr/>
<h1>Sushant IT College</h1>
<hr />
</body>
</html>

You might also like