Skip to main content

msl lab

Logo

 

SYEDAMMALARTSANDSCIENCECOLLEGE

 

DEPARTMENTOFINFORMATIONTECHNOLOGY

 

(AffiliatedtoAlagappa University)

 

(NAACAccredited with BGrade)

 

 

 

 

Logo

 

Certified a bonafide record of practical work done on  23BCEAP3 – MARKUP

  AND SCRIPTING LANGUAGE LAB by                                                                

Reg.No.________________   Of  B.Sc.(InformationTechnology) –Iyear during   II Semester  APRIL-2025.

 

 

 

 

 

    Head of the Department                                                                       Staff In-charge

 

 

 

Submitted at the time of B.Sc. Degree practical Examination being held on                                                                                

 

In Syed AmmalArts and ScienceCollege, Koottampuli.

 

 

 

 

 

 

  Internal Examiner                                                                                     External Examiner


 

INDEX

 

 

S.NO

 

DATE

 

PROGRAM NAME

PAGE NO

 

SIGNATURE

1.

 

TEXT FORMATTING

 

 

2

 

NAVIGATION

 

 

3.

 

DIFFERENT STYLE SHEET

 

 

4.

 

IMAGE MAP

 

 

5.

 

SEMANTICS

 

 

6.

 

IMAGE GALLERY

 

 

7.

 

EMLOYEE DETAILS

 

 

8.

 

MULTIMEDIA WEBPAGE

 

 

9.

 

FACTORIAL NUMBER

 

 

10.

 

FIBONACCI SERIES

 

 

11.

 

VALIDATION CONTROL

 

 

12.

 

PRIME NUMBER GENERATION

 

 

13.

 

SUM OF DIGITS

 

 

14.

 

WORD COUNT

 

 

15. 

 

CALCULATOR

 

 

                  EXNO: 1                                                                                                DATE:

TEXT FORMATTING

 

Aim

To design a web page using different text formatting tags

 

Source Code

 

<html>

<head>

<title>Text Formatting</title>

<style> body {

font-family: Arial, sans-serif;

}

</style> </head>

<body>

<h1>Text Formatting</h1>

<p><strong>This text is bold.</strong></p>

<p><em>This text is italic.</em></p>

<p><u>This text is underlined.</u></p>

<p>This is<sub>subscripted</sub>text.</p>

<p>This is<sup>superscripted</sup>text.</p>

<p>This is<mark>highlighted</mark>text.</p>

<p>This is<del>deleted</del> text.</p>

<p>This is<ins>inserted</ins> text.</p>

<p>This text is<abbrtitle="HyperTextMarkup Language">HTML</abbr> abbreviated.</p>

<p>This text is in<code>monospace font</code>.</p>

<p>This text is in<samp>sampleoutput format</samp>.</p>

<p>This is a<kbd>keyboardinput</kbd>example.</p>

<p>This text is in<cite>citationformat</cite>.</p>

<p>This is a<dfn>definition</dfn>ofa term.</p>

<p>This is a<var>variable</var>.</p>

</body>

</html>

Output

 

 

 

 

 

Result

The Above Program has been Successfully Completed Output  was verified EX NO: 2         DATE:

NAVIGATION

 

Aim

To design a web page  with links to different pages and allow navigation between web pages.

 

Source Code

 

 

<html>

<head> 

<title>Welcome</title>

</head>

<body bgcolor="green"><center>

<font face="Timesnewroman" size=12 Color="red"><b><i>

Welcome to our Web Page....</b></i></font><br>

<a href="thank.html" alt=thank> Click Here....</a>

</body>

</html>

 

 

Thank.html

 

<html>

<head>

<title> thank you</title>

</head>

<body bgcolor="pink">

<center>

<font face="Brush Script MT" size=14 color="blue"><b><i>

Thank You..........</b></i>

<br>

<img src="e.jpg" height=200 width=300><br>

</body>

</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Output:

 

 

 

 

 

 

 

 

 

 

 

Result:

                    The Above Program has been Successfully Completed.  Output was verified.

 

                   EX NO: 3                                                                                               DATE:

DIFFERENT STYLESHEET TYPES

 

Aim

To design a web page demonstrating all StyleSheet Types

 

SourceCode

<html>

<head> <style>

body{background-color:lavender;

text-align: center;} h2{font-style:italic; font-size: 30px; color: #f08080;} p{font-size: 20px;} .blue{color: blue;}

.red{color:red;}

.green{color:green;}

</style> </head>

<body>

<h3style="color:red; font-style: italic; text-align:center;

font-size: 50px;

padding-top:25px;">LearningHTMLusingInline CSS</h3>

<h2>LearningHTMLwithinternal CSS</h2>

<pclass="blue">Thisisabluecolor paragraph</p>

<pclass="red">Thisisaredcolorparagraph</p>

<pclass="green">Thisis agreen colorparagraph</p>

</body>

</html>

 

Output

 

Result

The above Program has been Successfully Completed  output was Verified

                  EXNO: 4                                                                                                DATE:

IMAGE MAPS Aim

To design a webpage with Image Maps

 

SourceCode

 

<html>

<body>

<h2>ImageMaps</h2>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<imgsrc="workplace.jpg"alt="Workplace"usemap="#workmap"width="400" height="379">

<mapname="workmap">

<areashape="rect"coords="34,44,270,350"alt="Computer"href="https://en.wikipedia.org/wiki/Laptop"> <areashape="rect"coords="290,172,333,250"alt="Phone"href="https://en.wikipedia.org/wiki/Mobile_p hone">

<areashape="circle"coords="337,300,44"alt="Cupofcoffee"href="https://en.wikipedia.org/wiki/Coffee">

</map>

</body>

</html>

 

 

Output

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Result

The above Program has been Successfully Completed output was Verified

                  EXNO: 5                                                                                                DATE:       

SEMANTICS

 

To design a web page demonstrating different Semantics

 

SourceCode

<html>

<body>

<article>

<h2>Today’shighlights</h2>

<p>DepartmentofIT Got3UniversityRanks</p>

<p>SuccessMeet-WarTech 2K24</p>

<p>First Year got Over All Championship</p>

</article>

<h2>My last year memories</h2>

<p>I have visited Paris with my friends last month. This was the memorable journey and I wish to go there again.</p>

<aside>

<h4>Paris</h4>

<p>Paris,France’scapital,isamajorEuropeancityandaglobalcenterforart,fashion, gastronomy and culture</p>


</aside>

<h2>Webdesigning Tutorial</h2>

<section>

<h3>HTML</h3>

<p>HTMLisanacronymwhichstandsforHyperTextMarkupLanguagewhichisused for creating web pages and web applications.</p>

</section>

<section>

<h3>CSS</h3>

<p>CSSstandsforCascadingStyleSheets.Itisastylesheetlanguagewhichisusedtodescribe the look and formatting of a document written in markup language. It provides an additional feature to HTML.</p>

</section>

<nav>

<ahref=”https://www.javatpoint.com/html-tutorial”>HTML</a>|

<ahref=”https://www.javatpoint.com/java-tutorial”>Java</a>|

<ahref=”https://www.javatpoint.com/php-tutorial”>PHP</a>|

<ahref=”https://www.javatpoint.com/css-tutorial”>CSS</a>

</nav>

<header>

<h1>WelcometoInfoTech</h1>

<nav>

<ul>

<li>Home|</li>

<li>Aboutus|</li>

<li>Contactus</li>

</ul>

</nav>

</header>

<footer>

<p>©Copyright2024.Allrightsreserved.</p>

</footer>

</body>

</html>

 

Output

 

 

 

 

 

 

Result

The above Program has been successfully completed Output was verified

                  EXNO: 6                                                                                                DATE:                          

IMAGE GALLERY USING TABLE TAG

 

To design a web page with different Tables

 

Source Code

<html>

<body>

<center>

<table border=2>

<h1>IMAGEGALLERY</h1>

<tr><td><imgsrc="11.jpg"height="300"width="300"></td><td><imgsrc="2.jpg"height="300" width="300"></td><td><imgsrc="3.jpg"height="300" width="300"></td></tr>

<tr><td><imgsrc="10.jpg"height="300"width="300"></td><td><imgsrc="5.jpg"height="300" width="300"></td><td><imgsrc="6.jpg"height="300" width="300"></td></tr>

<tr><td><imgsrc="7.jpg"height="300"width="300"></td><td><imgsrc="8.jpg"height="300" width="300"></td><td><imgsrc="9.jpg"height="300" width="300"></td></tr> <center>

</table>

</body>

</html>

 


Output

 

 

Result

The above Program has been Successfully Completed output was Verified

 

                  EXNO: 7                                                                                                DATE:                                      

EMPLOYEE REGISTRATION FORM

 

To design a web page with a form that uses all types of input controls

 

Source Code

<html>

<head>

<title>Employee Details</title>

</head>

<body>

<table border="2" align="canter">

<tr><td><form>

<h2><center>Employee Details</h2></center>

<p>Firs tName:<input type="text" name="fname"/></p>

<p>Last Name:<input type="text" name="lname" /></p>

<p>Gender:<input type="radio"name="Gender" value="Male">Male<input type="radio" name="Gender" value="FeMale">Female</p> <p>EmployeeID:<inputtype="text"name="ID"/></p>

<p>Designation:<inputtype="text"name="ID"/></p>

<p>PhoneNumber:<inputtype="text"name="phone" /></p>

<p><inputtype="submit"name="submit"value="submit"/></p></td></tr> </table>


</body>

</html> Output

 

Result

 

The above Program has been Successfully Completed output was Verified

                EXNO: 8                                                                                                  DATE:

MULTIMEDIA WEBPAGE

 

To design a web page embedding with multimedia Features

 

Source Code

<html lang="en">

<head>

<title>MultimediaWebpage</title>

<style>

*{ text-align:center; margin:30px ;

} h3{

color:#007bff; }

</style> </head>

<body>

<h1>MyMultimediaWebpage</h1>

 

<h3>Image</h3>

<imgsrc="lilly.jpg"alt="Beautifullandscape"height="400px"width="400px"><br>

 

<h3>Video</h3>

<videocontrols>

<sourcesrc="my-video.mp4"type="video/mp4"> Yourbrowserdoesnotsupport thevideo tag.

</video><br>

 

<h3>Audio</h3>

<audio controls>

<sourcesrc="my-audio.mp3"type="audio/mpeg"> Your browser does not support the audio tag.

</audio><br>

 

<h3>YouTubeVideoEmbed</h3> <iframe width="560" height="315"

src="https://www.youtube.com/embed/lxYikfwyXcQ?si=_T3LUi7hbinfE_m1"title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted- media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

<h3>ExternalWebpage Embed</h3>

<iframesrc="https://copilot.microsoft.com/"width="800"height="600"></iframe> <br>

<h3>Download Option</h3> <ahref="my-document.pdf"downloadalign="center">DownloadPDF</a><br>

 

</body>

</html>

 

Output

 

 

 

 

 

 

Result

The above program has been successfully Completed output was verified

 

                  EXNO: 9                                                                                                DATE:

FACTORIAL NUMBER

 

Aim

To find the factorial value using javascript

 

Source Code

<html>

<body style=”text-align:center;font-size:20px;”>

<h1>Welcome to Department of  Information Technology</h1>

<h1>FACTORIALNUMBER</h1>

Enter the Number:<input id=”num”> <br><br>

<button onclick=”fact()”>Factorial</button>

<pid=”res”></p> <script>functi onfact() { vari,num,f; f=1; num=document.getElementById(“num”).value;

for(i=1;i<=num;i++)

{ f=f*I; } i=i-1;

document.getElementById(“res”).innerHTML=”TheFactorialoftheNumber”+i+”is:”+f;

}

</script>

</body>

</html>

 

Output

 

 

 

 

Result

The above Program has been Successfully Completed output was verified

                  EXNO: 10                                                                                               DATE:   

FIBONACCI SERIES

 

Aim

To Print the Fibonacci Series using Javascript

 

Source Code

<html>

<body>

<script>

Var n1=0,n2=1,next_num,i;

var num=parseInt(prompt("Enter the limit for Fibonacci Series")); document.write("Fibonacci series:"); for(i=1;i<=num;i++)

{

document.write("<br>"+n1); next_num=n1+n2;

n1=n2;

n2=next_num;

}


</script>

</body>

</html>

 

Output

 

 

 

 

 

 

 

Result

The above Program has been Successfully Completed output was Verified

EXNO: 11                                                                                                            DATE:

VALIDATION CONTROL

 

Aim

To design a form and validate all the controls using javascript

 

Source Code html> <body> <script>

function validateform()

{

varname=document.myform.name.value;

varpassword=document.myform.password.value;

 

if(name==null ||name=="")

{

alert("Namecan'tbeblank"); return

false; }

elseif(password.length<6)

{

alert("Passwordmustbeatleast6characterslong."); return false; }

}

</script>

<body>

<formname="myform"method="post"action="https://saasc10.com/"onsubmit="return validateform()">

Name:<inputtype="text"name="name"><br/>

Password:<inputtype="password" name="password"><br/>

<inputtype="submit"value="register">

</form>

</body>

</html>

 

 

 

 

 

 

 

Output

 

 

 

 

 

 

 

 

 

Result

 

The above Program has been Successfully Completed output was verified

 

EXNO: 12                                                                                                        DATE:

PRIMENUMBERGENERATION

 

Aim

To display all the Prime numbers between1 and 100 using javascript

 

Source Code

 

<html>

<body> <script> functionprimecall()

{ varj,b;

varlb=parseInt(prompt("enterthelowerbound:")); varn=parseInt(prompt("entertheupperbound:")); for(i=0;i<=100;i++)

{ b=0;

for(j=1;j<=i;j++)

{ if(i%j==0)

{

b=b+1;

} } if(b==2) {

document.write(i+"<br>");

}

}

}

</script>

<form>

<inputtype="button"value="primenumber"onclick="primecall();">

</form>

<body>

</html>

 

 

 

 

 

 

 

 

 

 

Output:

 

 

 

 

 

 

Result

The above Program has been Successfully Completed output was verified

EXNO: 13                                                                                                      DATE:

SUM OF DIGITS

 

Aim

To accept a number from the user and display the sum of digits using javascript

 

Source Code

 

<html>

<body> <script> functionfind()

{

varsum=0;

varno=parseInt(frm.txt1.value); while(no>0)

{

sum=sum+no%10;

no=Math.floor(no/10);

}

alert("Sumof Digits"+sum);

}

</script>

<formname="frm">

EnteraNumber:<inputtype="text"name="txt1" /><br>

<inputtype="button"name="b1"onclick="find();"value="Display"/>

</form>

</body>

</html>

 

 

Output

 

 

 

 

 

 

 

 

Result

The above Program has been Successfully Completed output was Verified

EXNO: 14                                                                                                      DATE:   

WORD COUNT

 

Aim

To write a javascript  to accept a sentence from the user and display the number of words in it.

 

Source Code

 

<html>

<body> <script>

function countWords(sentence)

 {

  let wordCount = 0;

  let inWord = false;

 

  for (let i = 0; i < sentence.length; i++) {     if (sentence[i] !== ' ' && !inWord) {       wordCount++;        inWord = true;  

}

      else if (sentence[i] === ' ') {       inWord = false;  


    }

  }

 

  return wordCount;

}

 

 

let sentence = prompt("Please enter a sentence:");

 

alert("The number of words in the sentence is: " + countWords(sentence)); </script>

</body>

</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

Output

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Result

The above Program has been Successfully Completed output was verified

                  EXNO: 15                                                                                              DATE:

CALCULATOR Aim

To design a simple calculator using javascript

 

Source Code

<html>

<body> <script> constoperator=prompt(‘Enteroperatortoperformthecalculation(either+, -,*or/):‘); const number1 = parseFloat(prompt (‘Enter the first number: ‘)); constnumber2=parseFloat(prompt(‘Enterthesecondnumber:‘));

 

let result;

 

if(operator== ‘+’)

{

result=number1+ number2;

} elseif(operator==‘-‘)

{

result=number1–number2;

}

elseif(operator==‘*’)

{

result=number1*number2;

} else

{

result=number1/number2;

}

window.alert(“Result is”+result);

</script>

<body>

</html>

 

 

 

 

 

 

 

 

 

Output

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Result

 

The above Program has been Successfully Completed output was verified

 


Comments

Post a Comment

Popular posts from this blog

java lab 2nd semester

SYED AMMAL ARTS AND SCIENCE COLLEGE   (Affiliated to Alagappa University - Karaikudi) NAAC Accredited with “B” Grade Koottampuli, Ramanathapuram - 623513     DEPARTMENT OF INFORMATION TECHNOLOGY                   Reg. No :     Name     :         Academic Year     2024 – 2025     SYED AMMAL ARTS AND SCIENCE COLLEGE   (Affiliated to Alagappa University - Karaikudi) NAAC Accredited with “B” Grade DEPARTMENT OF INFORMATION TECHNOLOGY       Certified a Bonafide record of practical work done on 23BIT2P1-JAVA PROGRAMMING LAB by _______________________________ Reg.No. __________________ of B.Sc. (Information Technology) – I year during II Semester APRIL, 2025.                      ...
Post a Comment
Read more

DBMS LAB

AIM: To write a sql program in ddl commands. PROGRAM: SQL> create table student(stid number, stname varchar(15), staddr varchar(15), stmob number(15)); Table created. SQL> desc student; Name Null? Type ----------------------------- -------- ------------------------ STID NUMBER STNAME VARCHAR2(15) STADDR VARCHAR2(15) STMOB NUMBER(15) SQL> alter table student add stmark number; Table altered. SQL> desc student; Name Null? Type --------------------------------- -------- -------------------- STID NUMBER STNAME VARCHAR2(15) STADDR VARCHAR2(15) STMOB NUMBER(15) STMARK NUMBER SQL> alter table student rename to student_info; Table altered. SQL> desc student; ERROR: ORA-04043: object student does not exist SQL> desc student_info; Name Null? Type -------------------------------- -------- ---------------- STID NUMBER STNAME VARCHAR2(15) STADDR VARCHAR2(15) STMOB NUMBER(15) STMARK NUMBER SQL> drop table student_info; Table dropped. SQL> desc student_info; ERROR: ORA-04...
Post a Comment
Read more

Iwd only 8 pdf 😉(👈 click seiyavum)

 demonstrate the calculator program. Program : <html> <body> <script> const operator = prompt('Enter operator to perfome the calculation(either+,-,* or/):');  const number1 = parseFloat(prompt('Enter the first number:'));  const number2 = parseFloat(prompt('Enter the second number:'));  let result;  if(operator =='+') { result = number1+number2; } else if(operator =='-') { result = number1-number2; } else if(operator =='*') { result = number1*number2; } else { result=number1/number2; } window.alert("Result is"+result); </script> </body> </html> OUTPUT : Result : The given program is executed successfully. Ex no : 2 Date : FACTORIAL Aim: To demonstrate the factorial program. Program : <html> <body style="text align:center;font-size:20px;"> <h1>welcome to department of BCA</h1> <h1>FACTORIAL NUMBER</h1> enter the num...
Post a Comment
Read more