Practical 1 Introduction To HTML. Create A Basic HTML File

PRACTICAL 1
Introduction to HTML. Create a basic HTML file
Hyper Text Markup Language is a set of logical codes (markup) in parentheses that constitute the
appearance of a web document and the information it contains. It is a language for creating static web
pages. It specifies how the contents are to be presented on the web page. HTML is not a case sensitive
language so; HTML and html both are same.
HTML is a text document with formatting codes and this document has the suffix “.html” or “.htm”.
Basic HTML Document

An element called HTML surrounds the whole document. This element contains two sub-elements,
HEAD and BODY. These elements are required to form any HTML document.
<Html>
<Head>
<Title>The First Page</title>
</head>
<Body>
Hello World
</body>
</html>
Just write down above code in the notepad editor and save this file with the extension of .html or
.htm and then double click on that file you will get output on the default web browser.
OUTPUT
1
Following are more sub tags of <Head>
<HTML>
<HEAD> has sub-elements that define header material:
<TITLE> document title. The title of your document is what appears in a web browser’s Favourite
or Bookmark list. Search engines on the Internet use the document’s title for indexing purposes.
</TITLE>
<BASE> can be used to record the document's location in the form of a URL. </BASE>
<ISINDEX> indicates to the browser that the document is an index document. This is used only if
the document is on a server that does indexing.
</ISINDEX>
<LINK> indicates a relationship between this document and some other object on the Web.
</LINK>
<META> provides information such as the page’s keywords and description that appears in HTTP
headers.
</META>
<SCRIPT> contains either JAVA Script or VB Script </SCRIPT>
<STYLE> contains information used by cascading style sheets </STYLE>
</HEAD>
<BODY>
the remaining HTML elements are contained within these tags.
</BODY>
</HTML>
2
PRACTICAL 2
Create a static webpage using table tags of HTML
<html>
<body>
<TABLE BORDER="1" CELLPADDING="2">
<CAPTION ALIGN="Top"><b>Specification Table with Hours
and Marks<CAPTION>
<TR>
<TH ROWSPAN="2">Unit No.</TH>
<TH ROWSPAN="2">Unit Title</TH>
<TH ROWSPAN="2">Teaching Hours</TH>
<TH Colspan="4">Distribution of Theory Marks</TH>
</TR>
<TR>
<TD>R Level </TD>
<TD>U Level </TD>
<TD>A Level </TD>
<TD>Total Marks </TD>
</TR>
<TR>
<TD> <center>I </TD>
<TD>Introduction to Internet Technology</TD>
<TD><center>2</TD>
<TD><center>4</TD>
<TD><center>4</TD>
<TD><center>0</TD>
<TD><center>8</TD>
</TR>
<TR>
<TD> <center>II </TD>
<TD>Basics of HTML & CSS</TD>
<TD><center>6</TD>
<TD><center>0</TD>
<TD><center>2</TD>
<TD><center>6</TD>
<TD><center>8</TD>
</TR>
<TR>
<TD> <center>III </TD>
<TD>Active Server Pages 3.0</TD>
<TD><center>6</TD>
<TD><center>4</TD>
<TD><center>8</TD>
<TD><center>0</TD>
<TD><center>12</TD>
</TR>
<TR>
<TD> <center>IV </TD>
<TD>Server Side Coding with VBScript and XML</TD>
<TD><center>8</TD>
<TD><center>2</TD>
<TD><center>4</TD>
<TD><center>8</TD>
3
<TD><center>14</TD>
</TR>
<TR>
<TD> <center>V </TD>
<TD>ASP Objects & Components</TD>
<TD><center>10</TD>
<TD><center>4</TD>
<TD><center>4</TD>
<TD><center>6</TD>
<TD><center>14</TD>
</TR>
<TR>
<TD> <center>VI </TD>
<TD>Accessing database with ASP & ADO</TD>
<TD><center>10</TD>
<TD><center>4</TD>
<TD><center>4</TD>
<TD><center>6</TD>
<TD><center>14</TD>
</tr>
<TR>
<TD> </TD>
<TD><center><b>Total</TD>
<TD><center><b>42</TD>
</tr>
</TABLE>
</body>
</html>
OUTPUT
4
PRACTICAL 3
Create a static web page which defines all text formatting tags of HTML in tabular format
<html>
<body>
<center>
<table border=1>
<caption align="top"><font size="+2" color="red">Text
Formatting Tags</font> </caption>
<tr>
<th>HTML Tag</th>
<th>Output</th>
</tr>
<tr>
<td>normal text</td>
<td>hello world</td>
</tr>
<tr>
<td>Font & its attributes</td>
<td><FONT SIZE="+2" COLOR="#RRGGBB"> hello world
</FONT></td>
</tr>
<tr>
<td><B></td>
<td><B> Bold </B></td>
</tr>
<tr>
<td><I></td>
<td><I> Italic </I></td>
</tr>
<tr>
<td><U></td>
<td><U> Underline </U></td>
</tr>
<tr>
<td><EM></td>
<td><EM> Emphasis </EM></td>
</tr>
<tr>
<td><STRONG></td>
<td><STRONG> STRONG </STRONG></td>
</tr>
<tr>
<td><TELETYPE></td>
<td><TT> TELETYPE </TT></td>
</tr>
<tr>
<td><CITE></td>
<td><CITE> Citation </CITE></td>
</tr>
<tr>
<td><STRIKE></td>
<td><STRIKE> strike-through text </STRIKE></td>
</tr>
5
<tr>
<td><BIG></td>
<td><BIG> text in a big font </BIG></td>
</tr>
<tr>
<td><SMALL></td>
<td><SMALL> text in a small font <SMALL></td>
</tr>
<tr>
<td><SUB></td>
<td>a<SUB> b </SUB></td>
</tr>
<tr>
<td><SUP></td>
<td>a<SUP> b</SUP></td>
</tr>
</table>
</body>
</html>
OUTPUT
6
PRACTICAL 4
Create webpage using list tags of HTML
<html>
<body>
<b> HTML List: Ordered, Unordered & Definition List</b>
<hr>
Following is the list of proposed student activities like:
<OL type=1>
<li>Develop programs related with unit vice topics in
computer laboratory.</li>
<li>Develop any module of to be useful in real life
application.</li>
<li>Multimedia presentation of module developed by
students.</li>
</OL>
<hr>
List of Software/Learning Websites
<UL>
<li><u>ASP Tutorial - W3Schools</u><br>
<a href=http://www.w3schools.com/asp/>
www.w3schools.com/asp</a></li>
<li><u>Classic ASP Tutorials & Articles - Web Wiz</u><br>
<a href="http://www.webwiz.co.uk">www.webwiz.co.uk -
Knowledgebase</a></li>
<li><u>HTML Tutorial - W3Schools</u><br>
<a href="http://www.w3schools.com/html/">
www.w3schools.com/html</a></li>
<li><u>CSS Tutorial</u><br>
<a href="http://www.csstutorial.net/">
www.csstutorial.net</a></li>
<li><u>VBScript Tutorial - Tutorials Point</u><br>
<a
href="http://www.tutorialspoint.com/vbscript/index.htm">
www.tutorialspoint.com/vbscript/index.htm</a></li>
<li><u>ADO Tutorial - W3Schools</u><br>
<a href="http://www.w3schools.com/ADO/default.asp">
www.w3schools.com/ADO/default.asp</a></li>
</UL>
<hr>
<DL>
<DT>HTML</DT>
<DD>Hyper Text Markup Language</DD>
<DT>XML</DT>
<DD>eXtensible Markup Language</DD>
</DL>
</body>
</html>
7
OUTPUT
8
PRACTICAL 5
Create webpage to include image using HTML tag
<html>
<body background="Desert.jpg">
<center><img src="dns.gif">
</body>
</html>
9
PRACTICAL 6
Create employee registration webpage using HTML form objects
<html>
<body>
<Center>
<img src="employee_icon.png" height=52 width=52>
<Font size="+3" color=red>Employee Registration Form</font>
<form method=post action="prac.html">
<table>
<tr>
<td></td>
<td><input type=radio name=initial checked>Mr.
<input type=radio name=initial>Mrs.
<input type=radio name=initial>Ms.</td>
</tr><tr>
<td>First Name</td>
<td><input type=text name=fn placeholder="First Name"></td>
</tr><tr>
<td>Last Name</td>
<td><input type=text name=ln placeholder="Last Name"></td>
</tr> <tr>
<td>Mail Address1</td>
<td><input type=text name=add1></td>
</tr><tr>
<td>Mail Address2</td>
<td><input type=text name=add2></td>
</tr><tr>
<td>City</td>
<td><input type=text name=ct></td>
</tr><tr>
<td>State</td>
<td><select name=state>
<option value="Gujarat">Gujarat
<option value="Maharastra">Maharastra
<option value="Karnataka">Karnataka
<option value="Delhi">Delhi
</select>
</td>
</tr><tr>
<td>Zip</td>
<td><input type=text name=zp></td>
</tr><tr>
<td>Upload Photo</td>
<td><input type=file name=photo></td>
</tr><tr>
<td>E-Mail</td>
<td><input type=text name=email size=30></td>
</tr><tr>
<td>Mobile</td>
<td><input type=text name=mob placeholder="+91"></td>
</tr><tr>
<td>Languages known</td>
<td><input type=checkbox name=lk value=Gujarati
checked>Gujarati</td>
10
</tr><tr>
<td></td>
<td><input type=checkbox name=lk value=Hindi
checked>Hindi</td>
</tr><tr>
<td></td>
<td><input type=checkbox name=lk value=English
checked>English</td>
</tr><tr>
<td></td>
<td><input type=checkbox name=lk value=Marathi >Marathi</td>
</tr><tr>
<td>Additional Information</td>
<td><textarea name=add rows=3 cols=20 placeholder="Optional"
wrap></textarea></td>
</tr><tr>
<td></td>
<td><input type=submit value=submit> <input type=reset
value=reset></td>
</table>
</form>
</body>
</html>
OUTPUT
11

Practical 1 Introduction To HTML. Create A Basic HTML File

Uploaded by

Copyright:

Available Formats

Practical 1 Introduction To HTML. Create A Basic HTML File

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Practical 1 Introduction To HTML. Create A Basic HTML File

Uploaded by

Copyright:

Available Formats

PRACTICAL 1

Introduction to HTML. Create a basic HTML file

Basic HTML Document

Create a static webpage using table tags of HTML

Create webpage using list tags of HTML

Following is the list of proposed student activities like:

List of Software/Learning Websites

Create webpage to include image using HTML tag

You might also like