Lab work/report - (HTML)
Write the code and be familiar with - HTML 5.0 tags - HTML page basic structure. - Html page, how and where to save html page, how to view its output. - How to write html tags in HTML page.
Lab report based questions:1. HTML page to view following lines in browser.
‘We are learning web page.’
<!DOCTYPE html>
<html>
<head>
<title>My first Web Page</title>
</head>
<body>
We are learning web page.
</body>
</html>
2. To know about meta tags: meta charset,meta name(any three/four)
The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.
<meta>tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.
Metadata will not be displayed on the page, but is machine parsable.
Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.
The charset attribute specifies the character encoding for the HTML document.
The HTML5 specification encourages web developers to use the UTF-8 character set, which covers almost all of the characters and symbols in the world!
The name attribute specifies the name for the metadata.
The name attribute specifies a name for the information/value of the content attribute.
3. HTML page with body attributes:top margin,bottom margin,bgcolor,text etc.
<body bgcolor="#0000ff" text="#ffffff" topmargin="100" bottommargin="300">
Hi, this is Sanjip from Trinity College grade XI.
</body>
4. HTML page to set a body background image using attribute background.
<body background="fotoname.jpg">
Hi, this is Sanjip from Trinity College grade XI.
</body>
5. HTML page to insert any two images using tag <img> with attributes width,height,alt,title etc.
<!DOCTYPE html>
<html>
<head>
<title>HTML photo</title>
</head>
<body >
<h1>Two Photo</h1>
<img src="g.jpg" height="400" width="400" alt="ganesh photo" title='Ganesh Photo'>
<img src="h.jpg"height="400" width="400" alt="Hanuman photo" title="Hanuman Photo">
</body>
</html>
6. HTML page to play an audio sound using ‘object’ tag.
<!DOCTYPE html>
<html>
<body>
<p>Click on the play button to play a sound:</p>
<object data="filename.mp3|mp4" height="500" width="1500"> </object>
</body>
</html>
7. HTML page to play an audio file using tag ‘audio’ and attributes ‘src’,type.
<!DOCTYPE html>
<html>
<body>
<p>Click on the play button to play a sound:</p>
<audio controls>
<source src="music_file_name.mp3" type="audio/mpeg">
</audio>
</body>
</html>
8. HTML page to know about different heading tags( h1,h2,h3,h4,h5 and h6) with attributes align.
<!DOCTYPE html>
<html>
<head>
<title> Six Level Heading Tag</title>
</head>
<body>
<h1>Computer Science</h1>
<h2>Computer Science</h2>
<h3>Computer Science</h3>
<h4>Computer Science</h4>
<h5>Computer Science</h5>
<h6>Computer Science</h6>
</body>
</html>
9. HTML page to know about following formatting tags.
B,I, U, sup,sub,strike,del,mark,strong,em,small,big,ins,pre etc
<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Tag</title>
</head>
<body>
<b>Computer Science</b> <br>
<i>Computer Science</i><br>
<u>Computer Science</u><br>
sub tag: H<sub>2</sub>So<sub>4</sub><br>
sup tag : (a+b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup><br>
<strike> strike tag: Computer Science</strike><br>
<del> del tag: Computer Science</del><br>
<mark> mark tag: Computer Science</mark><br>
<strong> Strong tag: Computer Science</strong><br>
<em>em tag: Computer Science</em><br>
<small>Small tag: Computer Science</small><br>
<big>Big tag: Computer Science</big><br>
<ins>ins tag: Computer Science</ins><br>
The pre HTML element represents preformatted text which is to be presented exactly as written in the HTML file
<pre>
Dear PLK computer SIR
Wish you Happy New Year 2080 BS
Grade XI 2079|80 Batch
</pre>
</body>
</html>
10. HTML page to know about ‘font’ tag with attributes size,font face,color etc.
<!DOCTYPE html>
<html>
<head>
<title>HTML font tag with attributes</title>
</head>
<body>
<font face="arial" size="6" color="red">
Computer Science - Grade XI
</font>
</body>
</html>
11. HTML page to be familiar with tag ‘basefont’ and attributes color,size,face etc.
The basefont tag was used in HTML 4 to specify a default text-color, font-size or font-family for all the text in an HTML document.
<!DOCTYPE html>
<html>
<head>
<title>Basefont tag</title>
<basefont color="blue" size="5" face="arial">
</head>
<body>
<h2>Example of Basefont tag</h2>
<p>The basefornt tag is not supported in HTML5 use CSS to style the document</p>
</body>
</html>
12. HTML page to be familiar with tag ‘p’ and attributes align and values left,right ,center etc. Use ‘br’ tags.
<!DOCTYPE html>
<html>
<body>
<p align="left">This is first paragraph.<br>
Welcome</p>
<p align="center">This is second paragraph.</p>
<p align="right">This is third paragraph.</p>
</body>
</html>
13. HTML page to show the way to write comment .
<!DOCTYPE html>
<html>
<head>
<title>HTML Comment example </title>
</head>
<body>
You can add comments in your HTML file using <! -- ... --> tag. So if you will write anything between theses comment tag that will be treated as comment and browser will not read it.
<!-- hi this is xyz and I am from Nepal-->
</body>
</html>
14. HTML page to know about ‘marquee’ tag with attributes behavior, direction, bgcolor, height, loop, scroll amount, scrolldelay, vspace, width.
<!DOCTYPE html>
<html>
<head>
<title>HTML Marquee Tag </title>
</head>
<body>
<marquee width="100%" behavior="scroll" bgcolor="#f2f2f2">
This is an example of a scroll marquee
</marquee>
<marquee width="100%" behavior="slide" bgcolor="#f2f2f2">
This is an example of a slide marquee
</marquee>
<marquee width="100%" behavior="alternate" bgcolor="#f2f2f2">
This is an example of a alternate marquee
</marquee>
<marquee vspace="30" direction="right" bgcolor="#f2f2f2" loop="2">
This is an example of a right direction marquee and after two times this marquee text disappers
</marquee>
</body>
</html>
15. Use following list to create different numbering and bulleting styles.
For definition list
For ordered list(with different attributes start, type)
For unordered list("circel , disc, sqaure")
For nested list(using ol,ul)
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<dl>
<dt>Binary Number System</dt>
<dd>The number system having base two(2) and consists of digits: 0 and 1 is called Binary number system.</dd>
<dt>Octal Number System</dt>
<dd>The number system having base eight(8) and consists of digits: 0,1,2,3,4,5,6, and 7 is called Octal number system.</dd>
</dl>
<ol type="1">
<li>Nepal</li>
<ul type="circle">
<li>Kathmandu</li>
<li>Pokhara</li>
</ul>
<li>USA</li>
<ul type="disc">
<li>New york</li>
<li>California</li>
</ul>
<li>China</li>
<ul type="square">
<li>Wuhan</li>
<li>Beijing</li>
</ul>
</ol>
</body>
</html>
16. HTML page to know about 'address' tag.
<!DOCTYPE html>
<html>
<head>
<title>HTML Address Tag</title>
</head>
<body>
<h1>Example of Address tag</h1>
<address>The html page is created by:<b>Purushottam Lal Karn</b> <br>
You can also visit our blog:
<a href="https://plkcomputersir.blogspot.com/p/welcome.html">PLK computer SIR blog</a>
</address>
</body>
</html>
17. HTML page to be familiar with hyperlinks. Also talk about different types(local/internal, external)
<!DOCTYPE html>
<html>
<head>
<title>HTML Link</title>
</head>
<body>
<b> Example of external link</b> <br>
<a href='https://plkcomputersir.blogspot.com/'>Click here for PLK computer SIR Blog</a>
<br>
<a href="#bottom">Click to go to bottom</a>
<h1> Copy and paste some dummy text up to page bottom</h1>
<p id='bottom'></p>
</body>
</html>
18. HTML page to create tables with different attributes such as align,bgcolor,border,bordercolor,cellpadding,cellspacing,width, height, rowspan,colspan. Also use tags th,tr,td ,caption etc.
<!DOCTYPE html>
<html>
<head>
<title>HTML table</title>
</head>
<body>
<table border="1" width="100%" bordercolor="red">
<tr>
<th bgcolor="f2f2f2" rowspan="2">SN</th>
<th bgcolor="f2f2f2" rowspan="2">Subject Name</th>
<th bgcolor="f2f2f2" colspan="2">Marks Distribution</th>
</tr>
<tr>
<th bgcolor="f2f2f2">Internal</th>
<th bgcolor="f2f2f2">Written</th>
</tr>
<tr>
<td>1</td>
<td>English</td>
<td>25</td>
<td>75</td>
</tr>
<tr>
<td>2</td>
<td>Nepali</td>
<td>25</td>
<td>75</td>
</tr>
<tr>
<td>3</td>
<td>Social | Maths</td>
<td>25</td>
<td>75</td>
</tr>
<tr>
<td>4</td>
<td>Account</td>
<td>25</td>
<td>75</td>
</tr>
<tr>
<td>5</td>
<td>Economics</td>
<td>25</td>
<td>75</td>
</tr>
<tr>
<td>6</td>
<td>Computer</td>
<td>50</td>
<td>50</td>
</tr>
</table>
</body>
</html>
19. To be familiar with form tag with different elements:
input type textbox,radio,checkbox,password,file,button,submit,reset,textarea,select.optgroup,fieldset,label,email,color etc
<html>
<head>
<title>Input Form</title>
</head>
<body>
<h3>Please Enter Your Information</h3>
<form action="test.html" method="get">
Full Name : <input type="text" name="name" size=30> <br> <br>
Address : <input type="text" name="add" size=50><br> <br>
Country: <input type="text" name="country" value="NEPAL" readonly=true>
<br> <br>
E-mail : <input type="text" name="email" size=30 value="abc@gmail.com">
<br> <br>
Marital Status:
<input type="radio" name="c1" checked=true value="married">Married
<input type="radio" name="c1" value="unmarried">Unmarried<br> <br>
Gender:
<input type="radio" name="c2" checked=true value="male"> Male
<input type="radio" name="c2" value="female">Female<br> <br>
Hobbies:
<input type="checkbox" name="c3" checked =true value="movie"> Movie
<input type="checkbox" name="c4" value="music"> Music
<input type="checkbox" name="c5" value="travel"> Travel
<br> <br>
Attach Photo: <input type="file" size=30 maxlength=50 name="photo">
<br> <br>
Password : <input type="password" size=10 maxlength=8 name="password">
<input type="button" value="OK" name="button1"><br> <br>
Submit Form: <input type="submit" value="send" > <br> <br>
Clear Form: <input type="reset" value="clear">
</form>
</body>
</html>
20. Working with frameset tag and attributescols,rows.
Creating different columns, rows and creating links.
Working with iframe tag.
<html>
<head>
<title> Frames</title>
</head>
<frameset rows="20%,*">
<frame src="https://plkcomputersir.blogspot.com/2021/11/lab-index-grade-xi.html#1120">
<frameset cols="50%,*">
<frame src="https://plkcomputersir.blogspot.com/2021/07/xi-ch-6-web-technology-i.html#XI610">
<frame src="https://plkcomputersir.blogspot.com/2022/01/xii-ch-3-web-technology-ii.html">
</frameset>
</frameset>
</html>
21. HTML 5 elements/tags :
21.1 Audio,video,object,embed etc with attributes src, data, type etc
21.2 canvas tag with attributes id,width,height etc.
21.2 'svg' tag with attributes height, width.
[Note: Let's give any two examples of canvas and svg.]
<html>
<head>
<title> Canvas and svg </title>
</head>
<body>
<h1>canvas</h1>
<canvas id="mycanvas" width="200" height="200" style="border:1px solid #ff0000 ;"> </canvas>
<h3>Circle </h3>
<svg width=200 height=200>
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow">
</svg>
<h1>svg</h1>
<h3> Rectangle</h3>
<svg width=200 height=50>
<rect width=200 height=50 stroke="red" stroke-width=10 fill="purple">
</svg>
<h3>Polygon </h3>
<svg width=200 height=200>
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>
21.3 short view on elements :<footer>,<section>,<header>,<div> etc.
<!DOCTYPE html>
<html>
<body>
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>
</article>
<h1>Example of Section element</h1>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
<footer>
<p>Author: Student Name</p>
<p><a href="mailto:yourEmail@gmail.com">mail@gmail.com</a></p>
</footer>
</body>
</html>
22. Cascading Style Sheet
1. CSS introduction
2. CSS working methods (inline, internal and external)
3. CSS syntax with selectors (id, element, class, grouping, universal) ,CSS comments
4. Styling the html page with CSS.
4.1 Use different elements with attributes such as:
→ Height, width, background, text-align, font size, borders, margin, padding, float, navigation, text decoration, inline/block etc.
<!DOCTYPE html>
<html>
<head>
<style>
p.none {border-style: none;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
</style>
<style>
h2,p{
background-color: #b0d4de;
}
</style>
</head>
<body>
<h2>My first CSS page.</h2>
<p>Hello Students. This is an example of CSS background-color.</p>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
Similary you are requested use other css styles given your text book
</body>
</html>
23. Let's teach students to make a simple template in CSS.
Click here to take idea about css template
Case study/project work Grade XI Computer
Make a website on a topic and present to computer department.
Use CSS and HTML both. You may create first template in CSS then put the contents in different pages and link them.
Click here for project reference