Scribd
Upload
18 views

HTML

The document provides a comprehensive guide on creating simple web pages using HTML, covering basic elements such as headings, paragraphs, lists, tables, and forms. It includes step-by-step tasks with example code for formatting text, changing background colors, inserting images, and using hyperlinks and forms. Each task is designed to enhance understanding of HTML structure and functionality.

Uploaded by

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

HTML

The document provides a comprehensive guide on creating simple web pages using HTML, covering basic elements such as headings, paragraphs, lists, tables, and forms. It includes step-by-step tasks with example code for formatting text, changing background colors, inserting images, and using hyperlinks and forms. Each task is designed to enhance understanding of HTML structure and functionality.

Uploaded by

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

HTML – LO 7

7.1 Practice HTML


Objectives
1. Design simple web page with basic HTML elements head, title, body, text,
paragraph and line break.
2. Format text, change background colour and insert picture in web page.
3. Design simple web page with table ,list.
4: Use marquee, hyperlinks and mail to link in designing web pages.
5 : Design web page with forms and form controls using HTML tags.

Procedure :
Task1 : Design simple web page with basic HTML elements head, title, body, text,
paragraph and line break.
1. Type the following program.
<HTML>
<HEAD>
<TITLE> PRACTICE HTML </TITLE>
</HEAD>
<BODY>
<H1> This is heading 1 </H1>
<H2> This is heading 1 </H2>
<H3> This is heading 1 </H3>
<H4> This is heading 1 </H4>
<H5> This is heading 1 </H5>
<H6> This is heading 1 </H6>
<br> <br>
<p> HTML stand for Hyper Text Markup Language <br>It describes the
structure of the web page.HTML elements are the building block of HTML
pages.</p>
</BODY>
</HTML>
2. Save it as test1.html.
3. Open the browser Internet Explorer and open the file.
4. The output will be shown as below.

*****output********

2. Format text, change background colour and insert picture in web page.
1. Type the following program.
<HTML>
<HEAD>
<TITLE> FORMAT TEXT </TITLE>
</HEAD>
<BODY BGCOLOR=”AQUA” >
<CENTER> <B><U>FORM CONTROLS </U></B></CENTER><br>
<BIG> Check Box </BIG> <br>
<SMALL> Text Box </SMALL> <br>
<STRONG> Option Button </STRONG> <br>
<I> Command Button </I> <br>
X<SUB> 3 </SUB> <br>
H<SUP> 2 </SUP>O
<br> <br>
<FONT COLOR=”BLUE” SIZE=”20” FACE=”ALGERIAN”>
World Wide Web </FONT>
<br>
<IMG SRC=”D:\COPA\iti.jpg” alt=”ITI Logo” >
</BODY>
</HTML>
2. Save it as test2.html.
3. Open the browser Internet Explorer and open the file.
4. The output will be shown as below.

*****output********

Task 3: Design simple web page with table and list.


<HTML>
<HEAD>
<TITLE> HTML LISTS </TITLE>
</HEAD>
<BODY>
<CENTER> <B><U>ORDERED LIST </U></B></CENTER>
<OL TYPE=”A”>
<LI> FTP </LI>
<LI> SMTP </LI>
<LI> HTTP </LI>
<LI> TCP/IP </LI>
</OL>
<BR> <BR>
<CENTER> <B><U>UNORDERED LIST </U></B></CENTER>
<UL TYPE=”SQUARE”>
<LI> FTP </LI>
<LI> SMTP </LI>
<LI> HTTP </LI>
<LI> TCP/IP </LI>
</UL>
<BR> <BR>
<CENTER> <B><U>DESCRIPTION LIST </U></B></CENTER>
<DL>
<DT> MS WORD </DT>
<DD> Microsoft Word is a word processing application. It is
developed by Microsoft Corporation. It allows users to type
documents and save it.
</DD>
<DT> MS EXCEL </DT>
<DD> Microsoft Word is a word processing application. It is
developed by Microsoft Corporation. It allows users to type
documents and save it.
</DD>
</DL>
<BR> <BR>
<CENTER> <B><U>TABLE </U></B></CENTER>
<TABLE BORDER=”3” BORDERCOLOR=”GREEN” BGCOLOR=”ORANGE”
WIDTH=”65%”>
<TR>
<TH> SL NO </TH>
<TH> NAME </TH>
<TH> SUBJECT </TH>
<TH> MARK </TH>
</TR>
<TR>
<TD> 1. </TD>
<TD> VEENA </TD>
<TD> ENGLISH </TD>
<TD> 85 </TD>
</TR>
<TR>
<TD> 2. </TD>
<TD> AMMU </TD>
<TD> ENGLISH </TD>
<TD> 60 </TD>
</TR>
<TR>
<TD> 3. </TD>
<TD> RMU </TD>
<TD> ENGLISH </TD>
<TD> 70 </TD>
</TR>
</TABLE>
</BODY>
</HTML>
5. Save it as test3.html.
6. Open the browser Internet Explorer and open the file.
7. The output will be shown as below.

Task 4: Use marquee, hyperlinks and mail to link in designing web pages.
<HTML>
<HEAD>
<TITLE> MARQUEE </TITLE>
</HEAD>
<BODY>
<a href=”http://nimi.gov.in/” > Visit to NIMI website </a>
<br> <br>
<marquee behavior=”scroll” direction=”right” scrollamount=”40” bgcolor=”blue”>
Govt. ITI Kattappana
</marquee>
<br> <br>
<a href= “mailto:[email protected] “ target=”_top” > Send Mail </a>
</BODY>
</HTML>

Task 5 : Design web page with forms and form controls using HTML tags.
<html>
<head>
<title>Student Information System</title>
</head>
<body>
<h2>STUDENT INFORMATION SYSTEM</h2>

<form action="#" method="post">


<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>

<label for="father_name">Father's Name:</label>


<input type="text" id="father_name" name="father_name"><br><br>

<label for="mother_name">Mother's Name:</label>


<input type="text" id="mother_name" name="mother_name"><br><br>

<label for="dob">Date of Birth:</label>


<input type="date" id="dob" name="dob"><br><br>

<label>Gender:</label><br>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label><br>

<input type="radio" id="female" name="gender" value="Female">


<label for="female">Female</label><br>

<input type="radio" id="other" name="gender" value="Other">


<label for="other">Other</label><br><br>
<label for="address">Communication Address:</label><br>
<textarea id="address" name="address" rows="4"
cols="40"></textarea><br><br>

<label for="trade">TRADE:</label>
<select id="trade" name="trade">
<option value="FITTER">FITTER</option>
<option value="COPA">COPA</option>
<option value="MRAC">MRAC</option>
<option value="MMV">MMV</option>
</select><br><br>

<label for="languages">Languages you Know:</label><br>


<select id="languages" name="languages" multiple>
<option value="Tamil">Tamil</option>
<option value="Hindi">Hindi</option>
<option value="English">English</option>
<option value="Malayalam">Malayalam</option>
</select><br><br>

<label>Computer Knowledge:</label><br>
<input type="checkbox" id="windows" name="computer_knowledge"
value="Windows OS">
<label for="windows">Windows OS</label><br>

<input type="checkbox" id="office" name="computer_knowledge"


value="Microsoft Office">
<label for="office">Microsoft Office</label><br>

<input type="checkbox" id="html" name="computer_knowledge"


value="HTML">
<label for="html">Hyper Text Markup Language</label><br>
<input type="checkbox" id="css" name="computer_knowledge"
value="CSS">
<label for="css">Cascaded Style Sheet</label><br><br>

<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
</body>
</html>

You might also like