Scribd
Upload
22 views15 pages

HTML Lab

Uploaded by

sujana
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
22 views15 pages

HTML Lab

Uploaded by

sujana
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/ 15

1.

Create an HTML document with the following formatting options: (a)Bold, font-style: italic;
(b) Italics, (c) Underline, (d) Headings (Using H1 to H6 heading styles), (e) }
Font (Type, Size and Color), (f) Background (Colored background/Image in .bold {
background), (g) Paragraph, (h) Line Break, (i) Horizontal Rule, (j) Pre tag font-weight: bold;
<!DOCTYPE html> }
<html lang="en"> </style>
<head> </head>
<meta charset="UTF-8"> <body>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <div class="container">
<title>Formatted HTML Document</title> <h1>Formatted HTML Document</h1>
<style> <p>This is a sample HTML document demonstrating various formatting
/* CSS for styling */ options:</p>
body {
font-family: Arial, sans-serif; <h2>Headings</h2>
background-color: #f0f0f0; /* Light gray background color */ <h1>Heading 1</h1>
color: #333; /* Dark gray text color */ <h2>Heading 2</h2>
padding: 20px; <h3>Heading 3</h3>
} <h4>Heading 4</h4>
.container { <h5>Heading 5</h5>
max-width: 600px; <h6>Heading 6</h6>
margin: 0 auto;
background-color: #fff; /* White background color for content */ <h2>Text Formatting</h2>
padding: 20px; <p>This text contains <span class="bold">bold</span>, <span
border-radius: 8px; class="italic">italic</span>, and <span class="underline">underlined</span>
box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Soft box shadow */ text.</p>
}
h1 { <h2>Font</h2>
color: #3333cc; /* Dark blue heading color */ <p style="font-family: 'Times New Roman', serif; font-size: 18px; color:
} #006600;">This paragraph is styled with Times New Roman font, 18px size, and
h2 { dark green color.</p>
color: #cc3333; /* Dark red heading color */
} <h2>Background</h2>
p{ <p style="background-color: #ffff99; padding: 10px;">This paragraph has a
line-height: 1.6; light yellow background.</p>
}
.underline { <h2>Paragraph</h2>
text-decoration: underline; <p>This is a regular paragraph.</p>
}
.italic { <h2>Line Break</h2>
<p>This line will<br>break here.</p>
2. Create an HTML document which consists of: (a) Ordered List (b)
<h2>Horizontal Rule</h2> Unordered List (c) Definition List
<hr> <html>
<head>
<h2>Pre tag</h2> <title> list</title>
<pre> </head>
This is <body>
preformatted <ol>
text. <li>BCOM</li>
</pre> <li>BSC</li>
</div> <li>BA</li>
</body> </ol>
</html> <ol type="A">
<li>BCOM</li>
<li>BSC</li>
<li>BA</li>
</ol>
<ol type="X">
<li>BCOM</li>
<li>BSC</li>
<li>BA</li>
</ol>
<ol type="I">
<li>BCOM</li>
<li>BSC</li>
<li>BA</li>
</ol>
<ol type="i">
<li>BCOM</li>
<li>BSC</li>
<li>BA</li>
</ol>
<h1>***************************</h1>
<ul >
<li>BCOM</li>
<li>BSC</li>
<li>BA</li>
</ul>
<ul type="square" > 3. Create a Table with four rows and five columns. Place an image in one
<li>BCOM</li> column.
<li>BSC</li> <html>
<li>BA</li> <head>
</ul> <title>table with images</title>
<ul type="circle" > </head>
<li>BCOM</li> <body>
<li>BSC</li> <table border="1">
<li>BA</li>
</ul> <tr>
**************************** <td><img src="cce.jpg"></img></td>
<DL> <td><img src="cce.jpg"></img></td><td><img
<DT>HTML</DT> src="cce.jpg"></img></td><td><img src="cce.jpg"></img></td>
<DD>HTML IS A HYPER TEXT MARKUP LANGUAGE <td><img src="cce.jpg"></img></td>
></td>
IT IS USED TO CREATE A WEBPAGES</DD> </tr>
</DL> <tr>
</body> <td><img src="cce.jpg"></img></td>
</html> <td><img src="cce.jpg"></img></td><td><img
src="cce.jpg"></img></td><td><img src="cce.jpg"></img></td>
<td><img src="cce.jpg"></img></td>
</tr>

<tr>
<td><img src="cce.jpg"></img></td>
<td><img src="cce.jpg"></img></td><td><img
jpg"></img></td><td><img
src="cce.jpg"></img></td><td><img src="cce.jpg"></img></td>
<td><img src="cce.jpg"></img></td>
</tr>

<tr>
<td><img src="cce.jpg"></img></td>
<td><img src="cce.jpg"></img></td><td><img
src="cce.jpg"></img></td><td><img src="cce.jpg
src="cce.jpg"></img></td>
<td><img src="cce.jpg"></img></td>
</tr>

</table>
</body>
</tr>
<tr>
</html> <td><imgsrc=" p21.jpg" height=120 width=120></td>
<td colspan="2" align="center"><font size="+7"
color="#bc989d"><i>Welcome</i></font></td>
<td><imgsrc=" f3.jpg" height=120 width=120></td>
</tr>
<tr>
<td><imgsrc=" p117.jpg" height=120 width=120></td>
<td><imgsrc=" cute.jpg" height=120 width=120></td>
<td><imgsrc=" heart.jpg" height=120 width=120></td>
<td><imgsrc=" p43.jpg" height=120 width=120></td>
</tr>
</table>
</body>
</html>

4. Using “table” tag, align the images as follows:

<html>
<head>
<title>Table with images</title>
</head>
<body bgcolor="#e6e6fa">
<table align="center" cellspacing="10">
<tr>
<td><imgsrc=" dream.jpg" height=120 width=120></td>
<td><imgsrc=" p4.jpg" height=120 width=120></td>
<td><imgsrc="p87.jpg" height=120 width=120></td>
<td><imgsrc=" p72.jpg" height=120 width=120></td>
5. Create a menu form using html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Menu Form</title>
</head>
<body>
<h1>Restaurant Menu</h1>
<form>
<h2>Appetizers</h2>
<ul>
<li><input type="checkbox" id="appetizer1" name="appetizer"> Spring Rolls
(5pcs)</li>
<li><input type="checkbox" id="appetizer2" name="appetizer">
Edamame</li>
</ul>
<h2>Main Course</h2>
<select name="maincourse"> 6. Style the menu buttons using css.
<option value="">Select Main Course</option> HTML (menu.html):
<option value="chicken">Chicken Fried Rice</option> HTML
<option value="beef">Beef Pad Thai</option> <!DOCTYPE html>
<option value="vegan">Vegetable Curry</option> <html lang="en">
</select> <head>
<br> <meta charset="UTF-8">
<label for="drink">Beverage:</label> <title>Menu Form</title>
<input type="text" id="drink" name="drink"> <link rel="stylesheet" href="style.css"> </head>
<br> <body>
<button type="submit">Submit Order</button> <h1>Restaurant Menu</h1>
</form> <form>
</body> <h2>Appetizers</h2>
</html> <ul>
<li><input type="checkbox" id="appetizer1" name="appetizer"> Spring Rolls
(5pcs)</li>
<li><input type="checkbox" id="appetizer2" name="appetizer">
Edamame</li>
</ul>
<h2>Main Course</h2>
<select name="maincourse">
<option value="">Select Main Course</option>
<option value="chicken">Chicken Fried Rice</option>
<option value="beef">Beef Pad Thai</option>
<option value="vegan">Vegetable Curry</option>
</select>
<br>
<label for="drink">Beverage:</label>
<input type="text" id="drink" name="drink">
<br>
<button type="submit">Submit Order</button>
</form>
</body>
</html>
CSS (style.css):
CSS
/* Style the buttons (including submit button) */
button,
input[type="submit"] {
background-color: #4CAF50; /* Green color */
border: none;
color: white;
padding: 10px 20px; 7. Create a form using HTML which has the following types of controls: (a)
text-align: center; Text Box (b) Option/radio buttons (c) Check boxes (d) Reset and Submit
text-decoration: none; buttons
display: inline-block; <!DOCTYPE html>
font-size: 16px; <html lang="en">
margin: 4px 2px; <head>
cursor: pointer; <meta charset="UTF-8">
border-radius: 4px; /* Rounded corners */ <title>Sample Form</title>
} </head>
<body>
button:hover, <h1>Sample Form</h1>
input[type="submit"]:hover { <form>
background-color: #3e8e41; /* Darker green on hover */ <label for="name">Name:</label>
} <input type="text" id="name" name="name" placeholder="Enter your name">
<br><br>

<h2>Preferred Contact Method:</h2>


<input type="radio" id="email" name="contact" value="email">
<label for="email">Email</label> 8. Embed a calendar object in your web page.
<br> HTML (calendar.html):
<input type="radio" id="phone" name="contact" value="phone"> HTML
<label for="phone">Phone</label> <!DOCTYPE html>
<br><br> <html lang="en">
<head>
<h2>Areas of Interest:</h2> <meta charset="UTF-8">
<input type="checkbox" id="programming" name="interest[]" <title>Sample Calendar</title>
value="programming"> <link rel="stylesheet" href="style.css">
<label for="programming">Programming</label> </head>
<br> <body>
<input type="checkbox" id="design" name="interest[]" value="design"> <h1>Sample Calendar - July 2024</h1>
<label for="design">Design</label> <table>
<br> <thead>
<input type="checkbox" id="marketing" name="interest[]" value="marketing"> <tr>
<label for="marketing">Marketing</label> <th>Sun</th>
<br><br> <th>Mon</th>
<th>Tue</th>
<button type="reset">Clear Form</button> <th>Wed</th>
<button type="submit">Submit</button> <th>Thu</th>
</form> <th>Fri</th>
</body> <th>Sat</th>
</html> </tr>
</thead>
<tbody>
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>

CSS (style.css):
CSS
table {
border-collapse: collapse;
width: 100%;
}

th, td {
text-align: center; // Adjust for weekday offset
padding: 10px; firstDay.setDate(firstDay.getDate() - firstDay.getDay());
border: 1px solid #ddd;
} let currentDate = firstDay;
while (currentDate.getMonth() === month) {
/* Highlight the current day */ const row = createRow(currentDate);
.today { tbody.appendChild(row);
background-color: #F0F0F0; currentDate.setDate(currentDate.getDate() + 7);
} }
}
JavaScript (script.js):
JavaScript
const today = new Date(); // Get the current date
const month = today.getMonth(); // Get the current month (0-indexed)
const year = today.getFullYear();

// Function to create and fill a table row with dates


function createRow(startDate) {
const row = document.createElement('tr');
for (let i = 0; i < 7; i++) {
const cell = document.createElement('td');
const date = new Date(startDate.getTime());
date.setDate(startDate.getDate() + i);
cell.textContent = date.getDate(); 9. Create an applet that accepts two numbers and perform all the arithmetic
if (date.getMonth() === month && date.getDate() === today.getDate()) { operations on them
cell.classList.add('today'); index.html:
} HTML
row.appendChild(cell); <!DOCTYPE html>
} <html lang="en">
return row; <head>
} <meta charset="UTF-8">
<title>Arithmetic Calculator</title>
// Function to generate calendar table content </head>
function generateCalendar() { <body>
const tbody = document.querySelector('tbody'); <h1>Arithmetic Calculator</h1>
<label for="num1">Number 1:</label>
// Set the first day of the month <input type="number" id="num1" name="num1" required>
const firstDay = new Date(year, month, 1); <br>
<label for="num2">Number 2:</label>
<input type="number" id="num2" name="num2" required> break;
<br> default:
<button onclick="calculate()">Calculate</button> result = "Invalid operation!";
<p id="result"></p> }

<script src="script.js"></script> resultElement.textContent = "Result: " + result;


</body> }
</html>
script.js:
JavaScript
function calculate() {
const num1 = parseFloat(document.getElementById("num1").value);
const num2 = parseFloat(document.getElementById("num2").value);
const resultElement = document.getElementById("result");

if (isNaN(num1) || isNaN(num2)) {
resultElement.textContent = "Error: Invalid input!";
return;
}

const operation = prompt("Enter operation (+, -, *, /):");

let result;
switch (operation) {
case "+":
result = num1 + num2;
break;
case "-":
result = num1 - num2;
break;
case "*":
result = num1 * num2;
break;
case "/":
if (num2 === 0) {
result = "Error: Division by zero!";
} else {
result = num1 / num2;
}
<td colspan="5"
align="right">Email:[email protected]<br>Mobile:+912345678</td
>
</tr>
</thead>
<tr>
<td>Name</td>
<td colspan="4">M. Smith</td>
</tr>
<tr>
<td>Father's Name</td>
<td colspan="4">M. John</td>
</tr>
<tr>
<td>Date of Birth</td>
<td colspan="4">4 Feb 1991</td>
</tr>
<tr>
<td>Address</td>
<td colspan="4">M. Smith,<br>D.no-1-9-11,<br>Ashok
Nagar<br>Bangalore<br>Pin-560008</td>
</tr>
<tr>
<td rowspan="4" nowrap>Acadamic Profile
10. . Create nested table to store your curriculum. <td bgcolor="#ffffff"><b>Course<td
<html> bgcolor="#ffffff"><b>Tot.Marks<td bgcolor="#ffffff">
<head> <b>Max.Marks<td bgcolor="#ffffff">
<title>Curriculum</title> <b>Percentage
</head> <tr><td>SSC<td>600<td>530<td><b>81.50%
<body> <tr><td>Inter<td>1000<td>800<td><b>80.00%
<h1 align="center">Curriculum</h1> <tr><td>Degree<td>3200<td>2640<td><b>79.50%
<hr align="center" width="25%"> </body>
<table border="1" bordercolor="#ff9999" width="40%" align="center"> </html>
<colgroup width="20%" span="4"></colgroup>
<colgroup span="7">
</colgroup>
<thead>
<tr>
<input type="text" name="MM" maxlength="2" size="2">
<input type="text" name="YYYY" maxlength="4" size="4"><br><br>
<b>Gender</b>
<input type="radio" name="M" CHECKED>Male
<input type="radio" name="M">Female<br><br>
<b>Address:<br> City</b><select name=city size="1">
<option value="C">Chennai</option>
<option value="H">Hydearabad</option>
<option value="B">Bangalore</option>
<option value="D">Delhi</option>
</select>
<br><br><b>Zip code</b><input type="text" name="zip" maxlength="6"
size="6">
<br><br>Mail Terms and Conditions<br>
<textarea name="terms" rows="3" columns="100">Mail service provides you
share
your documents, images, and any files online to your friends, and with others.
11. Create a form that accepts the information from the subscriber of a </textarea><br>
mailing system. <input type="checkbox" value="yes" CHECKED>I Accept<input
<html> type="checkbox">I
<head> don't accept
<title>Email creation</title> <br><br><input type="Submit" value="Submit"><input type="Reset"
</head> value="Cancel">
<body> </form>
<h1 align="center">E-mail Id Registration</h1> </body>
<hr width="50%" color="blue"> </html>
<form>
<b>First Name</b>
<input type="text" name="firstname"><br><br>
<b>Last Name</b>
<input type="text" name="lastname"><br><br>
<b>Desired Login Name</b>
<input type="text" name="login">@mail.com<br><br>
<b>Password</b>
<input type="password" name="password"><br><br>
<b>Re-enter password</b>
<input type="password" name="password"><br><br>
<b>Date of Birth</b>
<input type="text" name="DD" maxlength="2" size="2">
<th>Special Equipment</th>
<th colspan="4">Specification/Performance Data</th>
</tr>
<tr>
<td>Rectangular Protective Armor</td>
<th> Engine type</th>
<td>JEt Turbine</td>
</tr>
<tr>
<td>Weapons System;</td>
<th> Thrust</th>
<td>150ibds@130%ros</td>
</tr>
<tr>
<td>Instrument -aircroft w/on-bord Computer</td>
<th> torque</th>
<td>170ibs [email protected]%ros</td>
</tr>
<tr>
<td rowspan="9"><img sec="a.png"></td>
<th> 0 to 60 mph&gt;</th>
<td>3.7 sec</td>
</tr>
<tr>
<th>Top speed</th>
<td> Unknown</td>
</tr>
<tr>
<th>Brake rating</th>
<td>excellent</td>
12. Design the page as follows: </tr>
<html> <tr>
<head> <th>wheel base</th>
<title>The Bat Mobile</title> <td>14%in </td>
</head> </tr>
<body> <tr>
<h1 align="center"> The Bat Mobile</h1> <th>length</th>
<table align="center"border="1"> <td>260.7in </td>
<tr> </tr>
<tr> Download the latest WordPress package from [wordpress.org/download/].
<th>width</th> Extract the downloaded file.
<td>94.4in </td> 2. Set up Database (Web Server Only):
</tr> You'll need a database to store your website's content. Your web hosting provider
<tr> likely offers a MySQL database.
<th>height</th> Create a database and a database user with permissions to access it.
<td>51.2in </td> 3. Upload Files (Web Server Only):
</tr> Upload the extracted WordPress files to your web server's public directory. This
<tr> directory may be named "public_html" or "htdocs" depending on your hosting
<th>wheels</th> provider.
<td>East Alley,15*6.5 </td> Use an FTP client or your web hosting provider's file manager to upload the files.
</tr> 4. Configure wp-config.php (Web Server Only):
<tr> Locate the wp-config.php file within the uploaded WordPress directory.
<th>Fuel Requirement</th> Edit this file using a text editor. You'll need to enter your database information
<td>high act 97% special </td> (name, user, password) here.
</tr> Save the changes.
</table> 5. Run the Installation Script (Web Server or Local):
</body> Open a web browser and navigate to the URL of your WordPress directory.
</html> For a web server, this might be http://yourdomain.com/ (replace with your actual
domain name).
Locally, it might be http://localhost/your-wordpress-directory/.
You'll be presented with the WordPress installation screens. Follow the on-screen
instructions to provide your site title, username, password, and email address.
Choose whether to allow search engines to index your site.
Click "Install WordPress" to complete the installation.
19. Create a site and add a theme to it.
creating a website and adding a theme with WordPress involves two main steps:
setting up WordPress and applying a theme. Here's a breakdown:
1. Setting Up WordPress:
There are two main approaches to setting up WordPress:
Using a web hosting provider with pre-installed WordPress: Many web hosting
providers offer one-click WordPress installation, streamlining the process. Check
your web hosting provider's control panel or documentation for specific
instructions.
18.Installation and configuration of word press. Manual installation:
Installing and configuring WordPress can be done on a web server or locally on Download the latest WordPress package from [wordpress.org/download/].
your machine. The general steps involve: Upload the extracted files to your web server's public directory (usually named
1. Download and Prepare WordPress: "public_html" or "htdocs").
Create a database and database user on your web server.
Edit the wp-config.php file within the uploaded WordPress directory, providing License: GPLv2 or later
your database information. License URI: http://www.gnu.org/licenses/gpl-2.0.html
Run the installation script by opening your website's URL in a web browser and Text Domain: your-child-theme (Replace with your desired text domain)
following the on-screen instructions. */
2. Adding a Theme: Use code with caution.
WordPress offers a vast theme collection, both free and paid. Here's how to add Enqueue styles: (Optional) If you want your child theme's styles to load after the
one: parent theme's styles, add the following code to your child theme's style.css file:
Login to your WordPress admin panel: Navigate to http://yourdomain.com/wp- CSS
admin (replace yourdomain.com with your actual domain name) and log in using <?php wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css'
your credentials created during installation. ); ?>
Go to Appearance > Themes: This section displays available themes.
Explore themes: Browse the free and premium theme options. You can filter by <?php wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css',
features, popularity, and other criteria. array( 'parent-style' ) ); ?>
Free Themes: Click "Install" on a free theme you like, then "Activate" to apply it. Use code with caution.
Premium Themes: You'll need to purchase a premium theme from a reputable Upload the child theme folder: Upload the entire child theme folder (including the
marketplace like https://themeforest.net/ or directly from the theme developer's style.css file) to your wp-content/themes directory using an FTP client or your
website. Once downloaded, upload the theme file under Appearance > Themes > web hosting provider's file manager.
Add New > Upload Theme. Activate the uploaded theme. 2. Using the Child Theme Configurator plugin:
Create a child theme This plugin simplifies the child theme creation process. Here's how to use it:
There are three main ways to create a child theme in WordPress: Install and activate the Child Theme Configurator plugin from the WordPress
1. Manual creation: admin panel (Plugins > Add New).
This method offers the most control but requires some familiarity with code. Navigate to Tools > Child Themes.
Here's a basic process: Select "Create a new Child Theme" and choose the parent theme from the
Create a folder: Using a file manager or FTP client, create a new folder within dropdown menu.
your wp-content/themes directory. Name the folder following the convention Click "Analyze" to ensure compatibility.
parent-theme-child, where parent-theme is the name of the theme you're creating a Choose a name for your child theme folder and click "Create."
child of (e.g., twentytwentytwo-child). 3. Using the Create Block Theme plugin (for block themes):
Create a stylesheet (style.css): Within the child theme folder, create a new text file If you're using a block theme as your parent theme, you can leverage the Create
and name it style.css. Paste the following code into the file, replacing the Block Theme plugin for a streamlined child theme creation process:
placeholder values: Install and activate the Create Block Theme plugin from the WordPress admin
CSS panel (Plugins > Add New).
/* Navigate to Appearance > Create Block Theme.
Theme Name: Your Child Theme Name Select "Create child of [theme name]", where [theme name] is your parent block
Theme URI: http://yourwebsite.com/ theme.
Author: Your Name Fill out the details for your child theme and click "Create."
Author URI: http://yourwebsite.com/ Once you've created your child theme using any of these methods, you can
Template: parent-theme (Replace with your parent theme's folder name) activate it from the WordPress admin panel (Appearance > Themes) and start
Version: 1.0.0 customizing it without affecting the parent theme's files. Remember, child themes
Description: A child theme of [Parent Theme Name]
are ideal for making modifications without worrying about updates to the parent
theme overwriting your changes.

You might also like