html.5 lab

HTML 5 LABORATORY
1. Create a web page using basic attributes.
Aim:
The aim of this HTML code is to create a basic webpage with a title, a heading, and a
paragraph.
Algorithm:
1. Start by opening an HTML document using the <html> tag.

2. Inside the HTML document, include a <head> section to define metadata about the webpage.
3. Within the <head> section, use the <title> tag to specify the title of the webpage, which in
this case is "Page Title".
4. Close the <head> section with the </head> tag.
5. Open the <body> section to contain the visible content of the webpage.
6. Inside the <body> section, include an <h1> tag to create a level 1 heading (the largest
heading) with the text "There is a Heading".
7. Below the heading, insert a <p> tag to create a paragraph with the text "There is a paragraph."
8. Close the <body> section with the </body> tag.
9. Finally, close the HTML document with the </html> tag.
Program:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is a paragraph.</p>
</body>
</html
Result:
The results is successfully creation of a simple webpage with a title, a heading, and a
paragraph, as specified in the provided HTML code.
2.Create a web page using html elements.
Aim:
The aim of this HTML code is to display a series of headings, each with a different background
color.
Algorithm:
1. Begin by opening an HTML document using the <html> tag.

2. Inside the HTML document, open the <body> section to contain the visible content of the
webpage.
3. Within the <body> section, include a series of <h1> tags, each representing a heading.
4. Assign different background colors to each heading using the style attribute.
 The first <h1> tag has a background color of Tomato.
 The second <h1> tag has a background color of Orange.
 The third <h1> tag has a background color of DodgerBlue.
 The fourth <h1> tag has a background color of MediumSeaGreen.
 The fifth <h1> tag has a background color of Gray.
 The sixth <h1> tag has a background color of SlateBlue.
 The seventh <h1> tag has a background color of Violet.
 The eighth <h1> tag has a background color of LightGray.
5. Close the <body> section with the </body> tag.
6. Finally, close the HTML document with the </html> tag.
Program:
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaG reen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
Result:
The results is successfully creation of a webpage displaying multiple headings, each with a
distinct background color specified using inline CSS styling.
3.PROGRAM:
Aim:
The aim of this program seems to be to create a simple webpage with a title
and a paragraph of text styled with different background colors.
Algorithem
Step 1: Open a text editor or an HTML editor.
Step 2: Begin the HTML document with the <!DOCTYPE html> declaration to specify the document
type
. Step 3: Start the HTML document with the <html> tag.
Step 4: Inside the <html> tag, open the <body> tag.
Step 5: Within the <body> tag, create an <h1> tag for the title.
Step 6: Add the text "Shello World" within the <h1> tag.
Step 7: Set the background color of the <h1> tag to DodgerBlue using inline CSS.
Step 8: Create a <p> tag for the paragraph.
Step 9: Inside the <p> tag, add the text about Deepa.
Step 10: Set the background color of the <p> tag to Tomato using inline CSS.
Step 11: Close the <p> tag.
Step 12: Close the <body> tag.
Step 13: Close the <html> tag.
Step 14: Save the file with an appropriate name and the .html extension.
Step 15: Open the saved file in a web browser to view the webpage.
PROGRAM:
<html>
<body>
<h1 style="background-color:DodgerBlue;">Shello World</h1>
<p style="background-color:Tomato;"> Deepa have more

patience than anyone.
Deepa was good in tolerating and adapting to tshe situations.
Deepa doesn’t worry about her circumstances. She change hercircumstances.

</p>
</body>
</html>
Results:
The result would be a webpage displaying a blue title ("Shello World") and a paragraph with a tomato-
colored background containing the text.
4. PROGRAM:
Aim:
The aim of this program is to create a simple webpage with multiple paragraphs of text, each
styled with different text colors.
Algorithem:
1. Begin by opening a text editor or an HTML editor.

2. Start the HTML document with the <!DOCTYPE html> declaration to specify the document type.
3. Open the <html> tag to denote the beginning of the HTML document.
4. Inside the <html> tag, open the <body> tag to start the body of the HTML document.
5. Within the <body> tag, create an <h3> tag for the title.
6. Add the text "Shello World" within the <h3> tag.
7. Set the color of the <h3> tag to Tomato using inline CSS.
8. Create two <p> tags for the paragraphs, add the respective text within each <p> tag, and set the color
of the first paragraph to DodgerBlue and the color of the second paragraph to MediumSeaGreen using
inline CSS.
PROGRAM:
<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Shello World</h3>
<p style="color:DodgerBlue;">Deepa have more patience than anyone.Deepa was

good in tolerating and adapting to tshe situations.
</p>
<p style="color:MediumSeaGreen;">Deepa have more patience thananyone.
Deepa was good in tolerating and adapting to tshe situations.
</p>
</body>
</html>
Result:
The result will be a webpage displaying two paragraphs of text. The first paragraph will have a
red ("Tomato") colored title ("Shello World") and blue ("DodgerBlue") colored text. The second
paragraph will have green ("MediumSeaGreen") colored text.
5.PROGRAM:
Aim:
The aim of this program is to create a simple webpage displaying three titles ("Shello
World"), each with a different colored border.
Algorithm:
5. Create three <h1> tags for the titles.
6. Add the text "Shello World" within each <h1> tag.
7. Apply a border to each <h1> tag with a width of 2 pixels and a different color (Tomato, DodgerBlue, and
Violet) using inline CSS.
8. Close the <body> tag and the <html> tag to end the HTML document.
PROGRAM:
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid Tomato;">Shello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Shello World</h1>
<h1 style="border: 2px solid Violet;">Shello World</h1>
</body>
</html>
Result:
The result will be a webpage with three titles ("Shello World"), each enclosed within a border.
The first title will have a red ("Tomato") border, the second title will have a blue ("DodgerBlue")
border, and the third title will have a violet ("Violet") border.
6.program:
Aim:
The aim of this program is to create a simple webpage with multiple paragraphs of text, each
styled differently using inline CSS.
Algorithm:
5. Create four <p> tags for the paragraphs, adding the respective text within each <p> tag.
6. Apply styling to the paragraphs using inline CSS:
 For the second paragraph, set the color to red.
 For the third paragraph, set the color to blue.
 For the fourth paragraph, set the font size to 50 pixels.
7. Close the <body> tag and the <html> tag to end the HTML document.
PROGRAM:
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p></body>
</html>
Result:
The result will be a webpage displaying four paragraphs of text. The first paragraph will have
default styling ("I am normal"), the second paragraph will have red text ("I am red"), the third
paragraph will have blue text ("I am blue"), and the fourth paragraph will have larger font size
("I am big").
7.PROGRAM:
Aim:
The aim of this program is to create an HTML table displaying test results with styled table
elements using CSS. Specifically, it aims to highlight the top three performers and provide a
summary of the top marked students.
Algorithm:
3. Inside the <head> tag, add a <style> section to define CSS styles for the table elements.
4. Define CSS styles for the table, table header ( th), table data ( td), and alternating row colors ( tr:nth-
child(even/odd)).
5. Within the <body> tag, create a <table> element to start the table.
6. Add a <caption> to provide a title for the table (e.g., "Test Results").
7. Inside the <table> tag, create <thead>, <tfoot> , and <tbody> sections for the table header, footer,
and body, respectively.
Populate the table with appropriate <tr> (table row) and <th> (table header cell) or <td> (table data cell)
elements to display the test results, including the names, login IDs, course names, and marks of the
students.
PROGRAM:
<html>
<head>
<style>
table { border-collapse: collapse; width: 100%; }
th, td { text-align: center; padding: 8px; }
tr:nth-child(even) { background-color: red; }
tr:nth-child(odd) { background-color: blue; color: white; }th

{ background-color: green; color: white; }
</style> </shead>
<body> <table border="1"> <caption> test results</caption>
<tshead>
<tr bgcolor="blue"><th colspan="4" >top three performers</th></tr>
<tr> <th>name</th> <th>login id</th> <th>course name</th>
<th>marks</th> </tr> </tshead>
<tfoot> <tr><td colspan="3">top marked students</td> <td>3</td>
</tr> </tfoot> <tbody>
<tr>
<td>deepa</td> <td>0123</td> <td>python</td> <td>99%</td> </tr>
<tr>
<td>vinisha</td> <td>0123</td> <td>python</td> <td>98%</td> </tr>
<tr> <td>anjali</td> <td>1234</td> <td>python</td> <td>97%</td>
</tr>
<tr> <td>yazhini</td> <td>1234</td> <td>python</td> <td>96%</td>
</tr>
</tbody>
</table>
</body>
</html>
Result:
The result will be an HTML table showing test results. The table will have alternating row colors (blue and red), with
the table header in green. The top three performers will be highlighted within a separate row, and the number of
top marked students will be displayed in the table footer.
8.PROGRAM:
Aim:
The aim of this program is to demonstrate the usage of HTML frames with a specific column
layout, where one frame occupies 10% of the width and the other frame occupies 90% of the
width. Additionally, it applies different border styles to paragraphs using CSS classes.
Algorithm:
3. Inside the <head> tag, add a <style> section to define CSS styles for paragraph elements with different border
styles.
4. Define CSS styles for paragraphs with the classes solid, dotted , and dashed , specifying their respective border
styles ( solid , dotted , and dashed).
5. Within the <body> tag, create a paragraph element with the class solid to apply a solid border style.
6. Create a <frameset> element with the cols attribute set to "10%,90%" to define the column layout for frames.
7. Inside the <frameset> element, define two <frame> elements:
 The first frame with the name attribute set to "top" and the src attribute pointing to "top.html".
 The second frame with the name attribute set to "main" and the src attribute pointing to "target.html".
8. Close the <frameset> element, the paragraph, and the HTML document.
PROGRAM:
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;} p.dasshed {border-
style: dasshed;} p.solid {border-style: solid;}</style>
<title>Example of HTML Frames Using col Attribute</title>
</shead> <p class="solid">
<frameset cols="10%,90%">
<frame name = "top" src = "top.html">
<frame name = "main" src = "target.html" >
</frameset>
</p>
</html>
Result:
The result will be an HTML document containing two frames side by side. The first frame ("top")
will occupy 10% of the width and load the content from "top.html", while the second frame
("main") will occupy 90% of the width and load the content from "target.html". Paragraphs
within the document will have different border styles applied based on their CSS classes.
9.PROGRAM:
Aim:
The aim of this program is to demonstrate the usage of a switch statement in JavaScript to
display a message based on the value of the day variable.
Algorithm:
3. Inside the <body> tag, add a <script> element with the type attribute set to "text/javascript" to
define a JavaScript code block.
4. Declare a variable named day and assign it a value ("5").
5. Use a switch statement to evaluate the value of the day variable:
 Case "1": Display an alert message indicating "Day is Monday".
 Case "2": Display an alert message indicating "Day is Tuesday".
 Case "3": Display an alert message indicating "Day is Wednesday".
 Case "4": Display an alert message indicating "Day is Thursday".
 Case "5": Display an alert message indicating "Day is Friday".
 Case "6": Display an alert message indicating "Day is Saturday".
 Case "7": Display an alert message indicating "Day is Sunday".
 Default: Display an alert message indicating "Not a valid number".
6. Close the switch statement.
7. Close the <script> tag.
8. Close the <body> and <html> tags to end the HTML document.
PROGRAM:
<html>
<body>
<SCRIPT type="text/javascript">var
day="5";
switch(day)
{
case "1":alert("Day is Monday");break;
case "2":alert("Day is Tuesday");break;
case "3":alert("Day is Wednesday");break;
case "4":alert("Day is Thursday");break;
case "5":alert("Day is Friday");break;
case "6":alert("Day is Saturday");break;
case "7":alert("Day is Sunday");break;
default: alert("Not a valid number");break;
}
</SCRIPT>
</body>
</html>
Result:
The result will be an HTML document containing a JavaScript code block. When the
document is loaded, it will execute the JavaScript code inside the <script> tags. Based on
the value assigned to the day variable (5 in this case), an alert message will be displayed
indicating the corresponding day of the week ("Day is Friday").
10.PROGRAM:
Aim:
The aim of this program is to create an HTML form where users can input their first and
last names. Upon clicking the "Submit" button, the form data will be sent to a server-side
script located at "/action_page.php".
Algorithm:
3. Inside the <body> tag, add an <h2> element to display the heading "HTML Forms".
4. Create a <form> element with the action attribute set to "/action_page.php" to define the action
to be taken when the form is submitted.
5. Inside the form, add <input> elements to create fields for first name and last name.
 Use the type attribute set to "text" to create text input fields.
 Set the name attribute to "firstname" and "lastname" for the first name and last name
fields, respectively.
 Use the value attribute to pre-fill the fields with "Mickey" and "Mouse" for first name and
last name, respectively.
6. Add a <input> element with the type attribute set to "submit" and the value attribute set to
"Submit" to create the submit button.
7. Close the <form> element.
8. Add a <p> element to provide additional information to users about the action to be taken upon
clicking the "Submit" button.
PROGRAM:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">First
name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>If you click tshe "Submit" button, tshe form-data will be sentto a page called
"/action_page.php".</p>
</body> </html>
Result:
The result will be an HTML document containing a form with fields for first name and last
name. By default, the first name field will be pre-filled with "Mickey" and the last name
field with "Mouse". When the user clicks the "Submit" button, the form data will be sent to
the specified action page ("/action_page.php"). Additionally, there will be a paragraph
informing users about the action to be taken upon clicking the "Submit" button.

html.5 lab

Uploaded by

Document Information

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

html.5 lab

Uploaded by

Copyright:

Available Formats

HTML 5 LABORATORY

1. Create a web page using basic attributes.

1. Start by opening an HTML document using the <html> tag.

1. Begin by opening an HTML document using the <html> tag.

<h1 style="background-color:MediumSeaGreen;">MediumSeaG reen</h1>

Step 1: Open a text editor or an HTML editor.

. Step 3: Start the HTML document with the <html> tag.

Step 4: Inside the <html> tag, open the <body> tag.

Step 8: Create a <p> tag for the paragraph.

Step 12: Close the <body> tag.

Step 13: Close the <html> tag.

<h1 style="background-color:DodgerBlue;">Shello World</h1>

<p style="background-color:Tomato;"> Deepa have more

Deepa doesn’t worry about her circumstances. She change hercircumstances.

1. Begin by opening a text editor or an HTML editor.

<h3 style="color:Tomato;">Shello World</h3>

<p style="color:DodgerBlue;">Deepa have more patience than anyone.Deepa was

Deepa doesn’t worry about her circumstances. She change hercircumstances.

<p style="color:MediumSeaGreen;">Deepa have more patience thananyone.

Deepa was good in tolerating and adapting to tshe situations.

Deepa doesn’t worry about her circumstances. She change hercircumstances.

tr:nth-child(odd) { background-color: blue; color: white; }th

<body> <table border="1"> <caption> test results</caption>

<tr bgcolor="blue"><th colspan="4" >top three performers</th></tr>

<tr> <th>name</th> <th>login id</th> <th>course name</th>

<th>marks</th> </tr> </tshead>

<tfoot> <tr><td colspan="3">top marked students</td> <td>3</td>

</tr> </tfoot> <tbody>

<td>deepa</td> <td>0123</td> <td>python</td> <td>99%</td> </tr>

<tr> <td>anjali</td> <td>1234</td> <td>python</td> <td>97%</td>

<tr> <td>yazhini</td> <td>1234</td> <td>python</td> <td>96%</td>

<title>Example of HTML Frames Using col Attribute</title>

</shead> <p class="solid">

<frame name = "top" src = "top.html">

<frame name = "main" src = "target.html" >

You might also like