TASK8
TASK-8
AIM: Basic HTML tags, Introduction to HTML5 and its tags, Introduction to CSS3 and its properties. Preparation of a simple website/ homepage,
Assignment: Develop your home page using HTML Consisting of your photo, name, address and education details as a table and your skill set as a list.
HTML:
HTML is the standard markup language for creating Web pages.
HTML stands for Hyper Text Markup Language
HTML describes the structure of a Webpage
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table", and soon
Browsers do not display the HTML tags, but use them to render the content of the page.
Τags -2 types
1.Container tags/pair tags(opening tag and closing tag)
2.Empty tags/Singleton tags
Creating HTML Page:
The Following steps are needed to create a HTML page
Step 1: Open any text editor like Notepad, Edit, and Word etc.
Step 2: Use the file menu to create a new document (File New) and type the following code
<HTML>
<HEAD>
<TITLE>Example1 </TITLE>
<BODY>
Hello III IT, this is your first web page.- Raju
</BODY>
</HTML>
Step 3: Go to the file menu and choose save as option (File->save as) and give the name of the file as “example1.html” under root directory( C :)( or any valid path)
Step 4: After saving, an internet explorer icon will be displayed as shown below
Step 5: Double click to execute it. The output displayed following
Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
HTML Document Structure
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
This will produce the following result:
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
Paragraph :
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag.
Line Break Tag:
Whenever you use the <br > element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.
Eg:
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment on time.
<br /> Thanks<br />
Mahnaz</p>
</body>
</html>
This will produce the following result −
Hello
You delivered your assignment on time.
Thanks
Mahnaz
Centering Content:
You can use <center> tag to put any content in the center of the page or any table cell.
Example
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
This will produce following result –
This text is not in the center. This text is in the center.
Horizontal Lines:
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly For example, you may want to give a line between two paragraphs as in the given example below − Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
This will produce the following result −
This is paragraph one and should be on top.
This is paragraph two and should be at bottom
Assignment: Develop your home page using HTML Consisting of your photo, name, address and education details as a table and your skill set as a list.
<html>
<body bgcolor="yellow">
<h3 align="center"><i>STUDENT DETAILS</i></h3>
<table align="center" cellpadding = "15"border="1px">
<!First Name>
<tr>
<td >FIRST NAME</td>
<td ><input type="text" name="First_Name" maxlength="10"/> (max 30 characters a-z and A-Z)</td>
<td><img align="center" img src="E:\CRR_IT\Subjects\r20_CEW\Tasks\crr.jpg" alt="index" width="150" height="150"></td>
</tr>
<!Last Name>
<tr>
<td >LAST NAME</td>
<td colspan="2"><input type="text" name="Last_Name" maxlength="30"/> (max 30 characters a-z and A-Z)
</td>
</tr>
<!Email Id>
<tr >
<td >EMAIL ID</td>
<td colspan="2"><input type="text" name="Email_Id" maxlength="100" /></td>
</tr>
<!Mobile Number>
<tr>
<td >MOBILE NUMBER</td>
<td colspan="2">
<input type="text" name="Mobile_Number" maxlength="10" /> (10 digit number)
</td>
</tr>
<!Address>
<tr>
<td >ADDRESS <br /><br /><br /></td>
<td colspan="2"><textarea name="Address" rows="4" cols="30"></textarea></td>
</tr>
<!City>
<tr>
<td >CITY</td>
<td colspan="2"><input type="text" name="City" maxlength="30" /> (max 30 characters a-z and A-Z)</td>
</tr>
<!Pin Code>
<tr>
<td >PIN CODE</td>
<td colspan="2"><input type="text" name="Pin_Code" maxlength="6" /> (6 digit number)
</td>
<!State>
<tr>
<td>STATE</td>
<td colspan="2"><input type="text" name="State" maxlength="30" /> (max 30 characters a-z and A-Z)</td>
</tr>
<!Country>
<tr>
<td >COUNTRY</td>
<td colspan="2"><input type="text" name="Country" value="India" readonly="readonly" /> </td>
</tr>
<!Qualification>
<tr>
<td >QUALIFICATION <br /><br /><br /><br /><br /><br /><br /></td>
<td colspan="2">
<table>
<tr>
<td align="center"><b>Sl.No.</b></td>
<td align="center"><b>Examination</b></td>
<td align="center"><b>Board</b></td>
<td align="center"><b>Percentage</b></td>
<td align="center"><b>Year of Passing</b></td>
<tr>
<td>1</td>
<td>Class X</td>
<td><input type="text" name="ClassX_Board" maxlength="30" /></td>
<td><input type="text" name="ClassX_Percentage" maxlength="30" /></td>
<td><input type="text" name="ClassX_YrOfPassing" maxlength="30" /></td>
</tr>
<tr>
<td>2</td>
<td>Class XII</td>
<td><input type="text" name="ClassXII_Board" maxlength="30" /></td>
<td><input type="text" name="ClassXII_Percentage" maxlength="30" /></td>
<td><input type="text" name="ClassXII_YrOfPassing" maxlength="30" /></td>
</tr>
</table>
</body>
</html>
OUTPUT:
Comments
Post a Comment