Scribd
Upload
33 views

Web Technologies

The document provides code for creating several HTML elements and features: 1. It creates an HTML document with formatting tags such as bold, italics, underline, headings, font, background color, paragraphs, line breaks, horizontal rules, and the pre tag. 2. Another code sample creates an HTML document with ordered lists, unordered lists, nested lists, and definition lists. 3. A third code example inserts an image into a table with four rows and five columns and aligns the image. 4. Additional code samples demonstrate how to create forms, embed calendars, use nested tables, and create help files using frames.

Uploaded by

vcinfotech
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
33 views

Web Technologies

The document provides code for creating several HTML elements and features: 1. It creates an HTML document with formatting tags such as bold, italics, underline, headings, font, background color, paragraphs, line breaks, horizontal rules, and the pre tag. 2. Another code sample creates an HTML document with ordered lists, unordered lists, nested lists, and definition lists. 3. A third code example inserts an image into a table with four rows and five columns and aligns the image. 4. Additional code samples demonstrate how to create forms, embed calendars, use nested tables, and create help files using frames.

Uploaded by

vcinfotech
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/ 21

1.

Create an HTML document with the following formatting options: (a)Bold, (b) Italics, (c)
Underline, (d) Headings (Using H1 to H6 heading styles), (e) Font (Type, Size and Color), (f)
Background (Colored background/Image in background), (g) Paragraph, (h) Line Break, (i)
Horizontal Rule, (j) Pre tag

<html>
<head>
<title>Formatting Tags</title>
</head>
<body bgcolor=pink>
<p align=justify>The<b><i><u> HyperText Markup Language </b></i></u> or HTML is the standard
markup language for documents designed to be displayed in a web browser. It can be assisted by
technologies such as <font type= monotypecorsiva color=green size=+3>Cascading Style Sheets
(CSS)</font> and scripting languages such as JavaScript.<br>
Web browsers receive HTML documents from a web server or from local storage and render the
documents into multimedia web pages. HTML describes the structure of a web page semantically
and originally included cues for the appearance of the document. </p>
<hr>
<pre> <h1>B.Com general, B.Com (C.A), </h1>
<h2>B.Sc statistics,B.Sc Electronics, B.Sc Computers</h2>
<h3>B.B.A</h3>
<h4>H.P.T</h4>
<h5>Biotech</h5>
<h6> H.E.P</h6>
</pre>
</body>
</html>
2. Create an HTML document which consists of: (a) Ordered List (b) Unordered List (c) Nested List
(d)Definiton List

<html>
<head>
<title>Lists</title>
</head>
<body>
<ol type="1">
<li>Food Items
<ul type ="disc">
<li>Rice
<li>Maggy
<li>Wheat
</ul>
<li>cosmetics
<li>stationary
</ol>
<ul type="circle">
<li>chocos
<li>pastry's
<li>cakes
</ul>
</body>
</html>
3. Create a Table with four rows and five columns,place an image in one column. Using “table”
tag, align the images as follows:

ZOO
ANIMALS

<html>
<head>
<title>Tables</title>
</head>
<body>
<table width="47%" height="67" border="1" align="center">
<tr>
<td width="36%"><img src="lion.PNG" width="161" height="122"></td>
<td width="30%" rowspan="2"><p align="center"
class="style1"><strong>ZOO</strong><strong>ANIMALS</strong></p>
</td>
<td width="34%"><img src="cheetah.PNG" width="168" height="126"></td>
</tr>
<tr>
<td><img src="tiger.PNG" width="166" height="127" ></td>
<td><img src="girafee.PNG" width="159" height="127"></td>
</tr>
</table>
</body>
</html>
4. Create a menu form using html and Style the menu buttons using css.

<html>
<head>
<style>
body {
background-color:white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #38444d;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {


background-color: #04AA6D;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<title>Navigation Menus</title>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">About</a>
<div class="dropdown-content">
<a href="#">About1</a>
<a href="#">About 2</a>
<a href="#">About3</a>
</div>
</li>
</ul>
</body>
</html>
5. Create a form using HTML which has the following types of controls: (a) Text Box (b)
Option/radio buttons (c) Check boxes (d) Reset and Submit buttons

<html>
<head>
<title>Forms</title>
</head>
<body>
<h2 align=center>Student Registration </h2>
<form id="form1" name="form1" method="post" action="">
<table width="40%" height="202" border="0" align="left">
<tr>
<td width="36%">Student id </td>
<td width="64%"><label>
<input type="text" name="textfield" />
</label></td>
</tr>
<tr>
<td>Student name </td>
<td><label>
<input type="text" name="textfield2" />
</label></td>
</tr>
<tr>
<td>Gender</td>
<td><label>
<input name="radiobutton" type="radio" value="radiobutton" />
Male
</label>
<label>
<input name="radiobutton" type="radio" value="radiobutton" />
Female</label></td>
</tr>
<tr>
<td>Hobbies</td>
<td><label>
<input type="checkbox" name="checkbox" value="checkbox" />
</label>
Reading
<label>
<input type="checkbox" name="checkbox2" value="checkbox" />
</label>
Playing</td>
</tr>

<tr>
<td><label>
<div align="center">
<input type="reset" name="Reset" value="Reset" />
</div>
</label></td>
<td>
<div align="left">
<input type="submit" name="Submit2" value="Submit" />
</div></td></tr>
</table>
</form>
</body>
</html>
6. Embed a calendar object in your web page.

<html>
<head>
<style>
table
{
border-collapse: collapse;
}
td,
th {
border: 1px solid black;
padding: 3px;
text-align: center;
}
th
{
font-weight: bold;
background-color: #E6E6E6;
}
</style>
</head>
<title>Calendar</title>
<body>
<div id="calendar"></div>
<script>
function createCalendar(elem, year, month)
{
let mon = month - 1; // months in JS are 0..11, not 1..12
let d = new Date(year, mon);
let table =
'<table><tr><th>MO</th><th>TU</th><th>WE</th><th>TH</th><th>FR</th><th>SA</
th><th>SU</th></tr><tr>';
// spaces for the first row
// from Monday till the first day of the month
// * * * 1 2 3 4
for (let i = 0; i < getDay(d); i++)
{
table += '<td></td>';
}
// <td> with actual dates
while (d.getMonth() == mon)
{
table += '<td>' + d.getDate() + '</td>';

if (getDay(d) % 7 == 6)
{ // sunday, last day of week - newline
table += '</tr><tr>';
}
d.setDate(d.getDate() + 1);
}
// add spaces after last days of month for the last row
// 29 30 31 * * * *
if (getDay(d) != 0)
{
for (let i = getDay(d); i < 7; i++)
{
table += '<td></td>';
}
}
// close the table
table += '</tr></table>';
elem.innerHTML = table;
}
function getDay(date)
{ // get day number from 0 (monday) to 6 (sunday)
let day = date.getDay();
if (day == 0) day = 7; // make Sunday (0) the last day
return day - 1;
}
createCalendar(calendar, 2022, 9);
</script>
</body>
</html>
7. Create nested table to store your curriculum.

<html >
<head>
<title>Nested Tables</title>
</head>
<body>
<table width="78%" height="52" border="1" align="center">
<tr>
<td colspan="2"><div align="center" class="style1">
<p><strong>K.Rajesh Kumar
<strong></p> </div></td>
</tr>
<tr>
<td colspan="2"><p align="center" class="style2"><strong>email</strong>: [email protected],
<strong>cell</strong>:9885098850, <strong>address</strong>:1/5/-e, Nest chandan apartments,
Hyd </p>
</td>
</tr>
<tr>
<td width="21%"><table width="37%" border="1">
<tr>
<td><p><strong>HARD SKILLS </strong></p>
<p>HTML5, CSS,Java Script,C,C++,Networking ,RDBMS</p>
<p>&nbsp;</p></td>
</tr>
<tr>
<td><p><strong>LANGUAGES </strong></p>
<p>English, Telugu, Tamil, Hindi</p>
<p>&nbsp;</p></td>
</tr>
<tr>
<td><p><strong>SOFT SKILLS </strong></p>
<p>Communication, Teamwork, Leadership Qualities, Time Management, Adaptability,
Work ethic</p>
<p>&nbsp;</p>
<p>&nbsp;</p></td>
</tr>
</table></td>
<td width="79%"><p><strong>PROFILE </strong></p>
<p>To associate with an organization that gives me an opportunity to show my techno proficient
skills, improve my knowledge with the latest trends and to be a part of the team that works
dynamically towards the growth of the organization. </p>
<p><strong>EDUCATION </strong></p>
<p>B.Tech(CSE) Jun 2007 - Mar 2011 Dr. MGR University, Chennai Aggregate Percentage 85%.
M.Tech (Computer Science) Aug 2014 - Mar 2016 JNTU, Hyderabad Aggregate Percentage 76%.
</p>
<p><strong>EMPLOYMENT </strong></p>
<p>Lecturer in Computer Science Jul 2013 - Present The Adoni Arts and Science College, Adoni
</p>
<p><strong>Subjects handled</strong> : Web Technologies Programming in C, C++ Data
Structures Operating System Database Management Systems E-Commerce &amp; Software
Engineering. </p>
<p><strong>Placement Officer</strong> Mar 2016 - Present The Adoni Arts and Science College,
Adoni Fostering relationships with various placement providers. Providing information and
documentation about placements to students Liaising with students and employers during
placement. Finding placement opportunities for students. </p>
<p><strong>Computer Technology and Software</strong>: Web Design Microsoft Office Suite
Data Visualization Google Suite Adobe Creative Suite Operating system Communication
Platform</p></td>
</tr>
</table>
</body>
</html>
8. Create a help file as follows using frames:

<html>
<head>
<title>Home</title>
</head>
<frameset rows="*">
<frameset cols="*,76%">
<frame name="F1" scrolling=no noresizesrc=" helplist.html">
<frame name="F2" scrolling=yes noresize>
</frameset>
</frameset>
</html>
******
<html>
<head>
<title> helplist </title>
</head>
<body>
<h3 align="center"><u>Contents</u></h3><br>
<ol type="1">
<li><a href="www.html" target="F2">www</a><br>
<li><a href="browsers.html" target="F2">Browsers</a><br>
<li><a href="webcommerce.html" target="F2">Webcommerce</a>
</ol>
</body>
</html>
******
<html>
<head>
<title>www </title>
</head>
<body bgcolor=red><p>The World Wide Web, commonly known as the Web, is an information
system enabling documents and other web resources to be accessed over the Internet.</p>
</body>
</html>
******
<html>
<head>
<title> browsers </title>
</head>
<body bgcolor=orange><p>A web browser is an application for accessing websites. When a user
requests a web page from a particular website, the browser retrieves its files from a web server and
then displays the page on the user's screen.</p>
</body>
</html>
******
<html>
<head>
<title> webcommerce </title>
</head>
<body bgcolor=yellow><p>Webcommerce (E- commerce) is the activity of electronically buying or
selling of products on online services or over the Internet. </p>
</body>
</html>
9. Create a webpage containing your bio data (assume the form and fields).

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Biodata-Form</title>
</head>
<body>
<div align="center" class="style2">Bio-Data</div>
<form id="form1" name="form1" method="post" action="">
<table width="81%" border="0" align="center">
<tr>
<td width="35%"><strong>
<label></label>
First Name:</strong></td>
<td width="65%"><label>
<input type="text" name="textfield" />
</label></td>
</tr>
<tr>
<td><strong>Middle Name: </strong></td>
<td><label>
<input type="text" name="textfield2" />
</label></td>
</tr>
<tr>
<td><strong>Last Name: </strong></td>
<td><label>
<input type="text" name="textfield3" />
</label></td>
</tr>
<tr>
<td><strong>Guardian Name:</strong></td>
<td><label>
<input type="text" name="textfield7" />
</label></td>
</tr>
<tr>
<td><strong>Gender:</strong></td>
<td><label>
<input name="radiobutton" type="radio" value="radiobutton" />
</label>
Male
<label>
<input name="radiobutton" type="radio" value="radiobutton" />
</label>
Female </td>
</tr>
<tr>
<td><strong>Address:</strong></td>
<td><label>
<textarea name="textarea"></textarea>
</label></td>
</tr>
<tr>
<td><strong>Email:</strong></td>
<td><label>
<input type="text" name="textfield4" />
</label></td>
</tr>
<tr>
<td><strong>Phone:</strong></td>
<td><label>
<input type="text" name="textfield5" />
</label></td>
</tr>
<tr>
<td><strong>Education Qualification: </strong></td>
<td><label>
<input type="text" name="textfield6" />
</label></td>
</tr>
<tr>
<td><strong>Hobbies:</strong></td>
<td><label>
<input type="checkbox" name="checkbox" value="checkbox" />
</label>
Cooking
<label>
<input type="checkbox" name="checkbox2" value="checkbox" />
</label>
Playing
<label>
<input type="checkbox" name="checkbox4" value="checkbox" />
Listening Music
<input type="checkbox" name="checkbox5" value="checkbox" />
Travelling </label></td>
</tr>
<tr>
<td><label>
<div align="right"> <br />
<input type="reset" name="Reset" value="Reset" />
</div></label></td>
<td> <label>
<div align="center"> <br />
<input type="submit" name="Submit" value="Submit" />
</div></label></td>
</tr>
</table>
</form>
<p>&nbsp;</p>
</body>
</html>
10. Write a html program including style sheets.

a) Internal b) external c) Inline

a) Internal CSS
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

b)External CSS
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
*****
Style.css
body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

C) Inline CSS

<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>
11. Write a html program to layers of information in web page.
12. Write the Installation and configuration steps of word press.

Step 1: Download XAMPP from apachefriends.org


Step 2: Install and configure XAMPP on Your Computer
Step3: Run the Xampp software
Step 4: Download WordPress from wordpress.org
Step 5: Create a Local Database in phpmyadmin of localhost(ex:-aasc)
Step 6: Install wordpress on localhost in the htdocs folder of Xampp
Step 7: Configure the wp-config-sample file as follow:
Define username: aasc
Define password: leave blank
Define host: localhost
Fill the below details:
Step 8: Type http://localhost/wordpress in a browser to install wordpress
Step 9: Select language as English U.S and Fill the details a s follows:
Database name ‒ the name of the database you created in phpMyAdmin(ex:aasc).
Username ‒ enter “root” as the default username.
Password ‒ leave blank.
Database host ‒ keep the default “localhost.”
Table prefix ‒ keep the default “wp_.”
Step 10: Check the Local Site You Built
Step 11: Type http://localhost/foldername/wp-admin in a browser to open
13. Create a site and add a theme to it.

Step1: Go to Word Press dashboard, go to Appearance,Theme


Step2: Add New and search for color mag theme
Step3: Select the install button to install the color mag theme
Step4: Click on activate button to activate the theme.
Step5: Go to Plugins, add new
Step6: search and download the ThemeGrill Demo Importer plugin
Step7: Install and Activate it
Step8: Go to themes and select the colormag theme
Step9: click on import to import the demo content.
Step 10: make necessary changes in the theme such as add/delete/modify pages, posts, categories
etc.
14. Create a simple post with featured image and add an external video link with size 640 X 360.

Step 1: Login to your WordPress Dashboard.


Step 2: Click the Posts link in the navigation menu.
Step 3: Click the Add New button on the Posts page.
Step 4: Enter a title in the available field. This will display on the top of your Post.
Step 5: Enter your page content in the available field. You can use the Editor to format your text.
Step 6: Once you have entered your information in the Post, click the Publish button.
Step7: Click on add media and select the option insert from URL and type the url of the video.
15. a) Create a user and assign a role to him. b) Create a login page to word press using custom
links

a) User account creation

Step 1: Login to your WordPress Dashboard as admin.


Step 2: go to users option in dashboard.
Step 3: select the option add new user to create a user account.
Step 4: Enter username, first name, last name, email address, password
Step 5: select the user role such as admin, editor, author, contributor, subscriber
Step 6: Finally click on add user to create user account.

b) Custom login form creation

Step 1:To Install the WPForms Plugin go to WPForms » Addons.


Select User Registration Addon. Click on the button to install it.
Step 2:To Create a Custom WordPress Login Form Click WPForms » Add New to start. select
the User Login Form template.
Step 3:To Add a Branding Image to Your Login Form
Select the add media button in the editor,and upload the image
Step 4:To Add a Forgot Password Link to Your Custom Login Form
Add description link to the forget password as Forgotten your password? <a
href={url_lost_password} >Click here</a> to reset it.
Finally click save to save the login form
Step 5:To Customize Your Custom Login Form Settings
click Settings , select general tab.
Enter submit button name as login
Step 6: To Make Your WordPress Custom Login Page
Step7: embed your custom login form anywhere on your site,

You might also like