Search The Content

Nov 8, 2019

Labsheet of HTML



Make sure that you copy all this code and run on your Computer to get Output:

Create the new txt file in desktop using notepad, copy this code and save it as extension of .html with any file name you want, run it in any browser you have.

Questions:

1.  Create a simple web page using basic structure of HTML

<html>
<head><title>Welcome to my web page</title></head>
<body>
<h1> <font color=red> This is the simple web page</font></h1><br>
<p><u><b><font size=5 > This is the web page. Here different HTML tags are used.
<pre> HTMl programming is fun</pre>
<img src="img.jpg" height=30% width=30%>
<p> Many webpage can be created from html code</p>
<pre> This is one among the many </pre>
</font></b></u></p><br>
</body>
</html>

Output:
Take the screenshot of your output by clicking on the save file with extension .html.

Note: Before running make sure that you have image name "img.jpg" saved in your desktop. (You can simply do it by copying any image and pasting in desktop and just rename it as img.)


2.  Create HTML document using different levels of heading tags

<html>
<head><title>First web page of HTML</title></head>
<body>
<h1>Writing  text in different heading tags</h1>
<h2> Writing the heading at h2 size</h2>
<h3> Writing the heading at h3 size</h3>
<h4> Writing the heading at h4 size</h4>
<h5> Writing the heading at h5 size</h5>
<h6> Writing the heading at h6 size</h6>
</body>
</html>

Output:
Take the screenshot of your output by clicking on the save file with extension .html.

3.  Create a web page using different text formatting tags

<html>
<head><title>Welcome web page</title></head>
<body>
<h1> Different text-formatting tags</h1><br><font size=5>
<b> Bold text</b><br>
or,
<strong> Important text</strong><br>
<i> Italic text</i><br>
<em> Emphasized text</em><br>
<mark> Marked text</mark><br>
<small> Small text</small><br>
<ins> Inserted text</ins><br>
Subscript text: SO<sub>2</sub><br>
Superscript text: a<sup>2</sup>+b<sup>2</sup><br></font>
</body>
</html>

Output:
Take the screenshot of your output by clicking on the save file with extension .html.

4.  Create a web page using font tags with format face, font size and font color

<html>
<head><title>Welcome to my web page</title></head>
<body>
<h1> Different format of font face, font size and font color</h1><br>
<font face=Times new roman size=8 color=red>Times new roman</font><br>
<font face=Calibri size=7 color=blue>Calibri</font><br>
<font face=Aharoni size=6 color=green>Aharoni</font><br>
<font face=Aldhabi size=5 color=yellow>Aldhabi</font><br>
<font face=Andalus size=4 color=tomato>Andalus</font><br>
<font face=Angsana New size=5 color=brown>Angsana New</font><br>
<font face=Arial size=3 color=purple>Arial</font><br>
<font face=Batang size=4 color=orange>Batang</font><br>
</body>
</html>

Output:
Take the screenshot of your output by clicking on the save file with extension .html.


5.  Create a web page using ordered and unordered list

<html>
<body>
<head><title>Welcome web page</title></head>
<h2>An ordered HTML list</h2>
<ol>
<li>Computer</li>
<li>CPU case</li>
<li>Monitor</li>
</ol> 
<h2>An unordered HTML list</h2>
<ul>
<li>Mouse</li>
<li>Keyboard</li>
<li>Speaker</li>
</ul> 
</body>
</html>

Output:
Take the screenshot of your output by clicking on the save file with extension .html.

6.  Create a single HTML document using insert image, audio and video object

<html>
<body>
<head><title>Welcome web page</title></head>
<body>
<strong> Image</strong><br>
<img src=img.jpg width=50% height=35%>
<br>
<big><left> Audio</left> <center>Video</center></big><br>
<embed src="audio.mp3" type="audio/mp3" width=20% height=40%>
<embed src="video.mp4" type="video/mp4" width=40% height=40%>
</body>
</html>

Output:
Take the screenshot of your output by clicking on the save file with extension .html.

Note: Before running make sure that you have image name "img.jpg", audio name "audio.mp3" and video name "video.mp4" saved in your desktop. (You can simply do it by copying any image, audio and video and then pasting in desktop and just rename it as img, audio and video respectively.)

7.  Create a web page using hyperlink as well as external links

<html>
<head><title>Welcome web page</title></head>
<body>
<h1> Click on the following link to direct to the websites:</h1>
<big>HTML hyperlinks</big>
Visit our facebook page:: <a href="https://www.facebook.com"><strong>Facebook</strong></a>
<br>
Run Google<a href="https://www.google.com"><strong>  Google</strong><br>
<big>HTML Externalinks</big>
Visit our Youtube channel<a href="https://www.youtube.com" target="external"> <strong> Youtube channel</strong></a>
<br>
Run Twitter<a href="https://www.twitter.com" target=external><strong>  Twitter</strong> </a>
</body>
</html>

Output:
Take the screenshot of your output by clicking on the save file with extension .html

8.  Create a table using TABLE tag with tale rows, columns and table attributes


<html>
<head><title>Welcome web page</title>
</head>
<body>
<h1> Table of investment</h1>
<table border=3 cellpadding=8px cellspacing=9px>
<tr>
<th>Month</th>
<th>Investment</th>
</tr>
<tr>
<td>January</td>
<td>$1000</td>
</tr>
<tr>
<td>February</td>
<td>$800</td>
</tr></table> 
</body>
</html>


Output:
Take the screenshot of your output by clicking on the save file with extension .html

9.  Create a web page which has scrolling text


<html>
<head>
<title>Welcome web page</title></head>
<body>
<h1> Scrolling text is here  look down:</h1>
<marquee direction="left">
<big>HTML coding is fun. Here it is scrolling<big>
</marquee><br>
<marquee><img src=img.jpg width=50% height=50%><br>
<marquee >
<big>HTML coding is interesting. Enjoy it.</big
</marquee>
</body>
</html>


Output:
Take the screenshot of your output by clicking on the save file with extension .html
Note: Before running make sure that you have image name "img.jpg" saved in your desktop. (You can simply do it by copying any image and pasting in desktop and just rename it as img.)


10.  Design a HTML document using frame and form tag


<html>
<head>
<title>HTML Frames are Presented Here</title>
</head>
<body>
<frameset cols = "30%,*,45%">
<frame src = "2.html">
<frame src = "3.html">
<frame src = "9.html">
</frameset>
</body>
</html>

Now, next for form tag;
<html>
<head>
<title>HTML Form are Presented Here</title>
</head>
<body>
<form>
<h1> Enter your detail here to continue:</h1>
First name:<input type=name size=30 placeholder="Enter your firstname"><br>
Last name:<input type=name size=30 placeholder="Enter your Lastname"><br>
Mother name: <input type=name size=30 placeholder="Enter your Mother name"><br>
Father name:<input type=name size=30 placeholder="Enter your Father name"><br>
Address: <input type=name size=30 placeholder="Enter your Address"><br>
Contact no.: <input type=name size=30 placeholder="Enter your Contact no."><br>
<input type=checkbox> I agree all the terms and conditions <br>
<input type=submit value=Continue>
</form>
</body>
</html>

Output:
Take the screenshot of your output by clicking on the save file with extension .html

Note: Before running make sure that you have document name 1.html, 2.html, 3.html saved in your desktop. (You can simply use the previous document in place of the this, change the file name according to the name you have saved for previous document) and also there are two document of Q no 10 (i.e 10(1) for frameset and 10(2) for form tag if you download zip format.)

All of this are only code, make sure that you copy this code in your computer and take screenshot then paste all this code in Ms-word with screenshot. Don't forget to make some changes.

Need zip format of codes to download

Click down to download zip format of all the codes




Download following image, audio and video to same folder to run code

Image


Use image of your computer or download this, copy it in desktop folder which you download and rename it as "img".


Audio


Use audio of your computer, copy it in desktop folder which you download and rename it as "audio".

Video


Use video of your computer or download this, copy it in desktop folder which you download and rename it as "video".


All the codes you download from here will be arranged in according to Question number wise (Like 1.html refers to Question no 1 code and so on.). Make sure you copy right code.

Extract the file after download then copy code in ms word and run it after managing all the document. If you download this zip format you don't need to manage the file, audio, video, or image.

No comments:

Post a Comment

About Me

My photo
Well speaking of myself I am a thin guy with lots of hobby and a passionate guy. I am learning some programming languages and trying to have some earning with it. Right now I am a student struggling in the study.

Translate