Scribd
Upload
2 views

lab work html

The document outlines a lab work report on Web Technology I, focusing on HTML and CSS, submitted by Hamid Asari. It includes objectives, theoretical background, and practical exercises covering various HTML elements, multimedia embedding, and CSS styling techniques. The conclusion emphasizes the successful understanding and application of foundational web development concepts.

Uploaded by

hamidasari14
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

lab work html

The document outlines a lab work report on Web Technology I, focusing on HTML and CSS, submitted by Hamid Asari. It includes objectives, theoretical background, and practical exercises covering various HTML elements, multimedia embedding, and CSS styling techniques. The conclusion emphasizes the successful understanding and application of foundational web development concepts.

Uploaded by

hamidasari14
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

TRINITY INTERNATIONAL SS & COLLEGE

Dillibazar Height, Kathmandu, Nepal

LAB WORK # 1: Web Technology I - HTML and CSS

(COMPUTER SCIENCE)

SUBMITTED BY: SUBMITTED TO:

NAME: Hamid Asari

GRADE: XI (DF1)

DATE : PRAVEEN KOIRALA

Faculty of Computer Science

KATHMANDU, NEPAL
2024
Table of Contents

S. No. Page No.

1. Acknowledgement I

2. Objectives II

3. Theoretical Background (1-3)

3.1 HTML and CSS

3.1.1 Web Technology I

4. Work Done

4.1 Work Done on Web Technology I

1. HTML page to view following lines in browser.


‘We are learning web page.’
2. To know about meta tags: meta charset, meta name(any three/four)
3. HTML page with body attributes: top margin, bottom margin, bgcolor, text etc.
4. HTML page to set a body background image using attribute background.
5. HTML page to insert any two images using tag <img> with attributes width,
height, alt, title etc.
6. HTML page to play am audio sound using ‘object’ tag.
7. HTML page to play an audio file using tag ‘audio’ and attributes ‘src’,type.
8. HTML page to know about different heading tags( h1,h2,h3,h4,h5 and h6) with
attributes align.
9. HTML page to know about following formatting tags.
B,I, U, sup,sub,strike,del,mark,strong,em,small,big,ins,pre etc
10. HTML page to know about ‘font’ tag with attributes size,font face,color etc.
11. HTML page to be familiar with tag ‘basefont’ and attributes color,size,face etc.
12. HTML page to be familiar with tag ‘p’ and attributes align and values left,right
,center etc. Use ‘br’ tags.
13. HTML PAGE TO COMMENT CERTAIN PART.
14. HTML PAGE TO know about ‘marquee’ tag with attributes behavior, direction,
bgcolor, height, loop, scroll amount, scrolldelay, vspace, width.
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(“ ”)
For nested list(using ol,ul)
16. HTML page to know about ‘address’ tag.
17. HTML page to be familiar with hyperlinks. Also talk about different
types(local/internal, external)
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.
19. To be familiar with form tag with different elements:
input type:
textbox,radio,checkbox,password,file,button,submit,reset,textarea,select.optgroup,fieldse
t,label,email,color etc
20. Working with frameset tag and attributes cols, rows.
Creating different columns, rows and creating links.
Working with iframe tag.
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.]
22.2 short view on elements :<footer>,<section>,<header>,<div> etc.
22. CSS
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.
5. Conclusion
2. Objective

The main objectives of the lab work are as follows:

1. To understand HTML tags to create a skeleton page.

2. To understand HTML tags for Heading.

3. To understand HTML Text Formatting Tags.

4. To understand HTML Fonts attribute.

5. To understand HTML List.

6. To understand HTML image element.

7. To understand HTML Table element.

8. To understand HTML Form Text Input Control.


3. Theoretical Background
4. Work Done

1. Simple Line Output

<p>We are learning web page.</p>

2. Meta Tags

<meta charset="UTF-8">
<meta name="author" content="Krishna">
<meta name="description" content="HTML Practice">
<meta name="keywords" content="HTML, CSS, Web Design">

3. Body Attributes

<body topmargin="20" bottommargin="20" bgcolor="lightblue" text="black">

4. Background Image

<body background="bg.jpg">
5. Insert Images

<img src="image1.jpg" width="200" height="150" alt="First Image" title="Image One">


<img src="image2.jpg" width="200" height="150" alt="Second Image" title="Image
Two">

6. Play Audio Using <object>

<object data="sound.mp3" type="audio/mpeg" width="300" height="50"></object>

7. Play Audio Using <audio>

<audio src="sound.mp3" type="audio/mpeg" controls></audio>


8. Heading Tags with Align

<h1 align="left">Heading 1</h1>


<h2 align="center">Heading 2</h2>
<h3 align="right">Heading 3</h3>

9. Formatting Tags

<b>Bold</b> <i>Italic</i> <u>Underline</u> <sup>Superscript</sup>


<sub>Subscript</sub>
<strike>Strike</strike> <del>Deleted</del> <mark>Marked</mark>
<strong>Strong</strong> <em>Emphasized</em>
<small>Small</small> <big>Big</big> <ins>Inserted</ins> <pre>Preformatted</pre>

10. Font Tag

<font size="4" face="Arial" color="blue">This is a font example</font>

11. Basefont Tag

<basefont color="green" size="5" face="Verdana">


12. Paragraph Tag with Alignment

<p align="left">Left paragraph</p>


<p align="center">Center paragraph</p>
<p align="right">Right paragraph</p><br>

13. HTML Comment

<!-- This is a commented section -->

14. Marquee Tag

<marquee behavior="scroll" direction="left" bgcolor="yellow" height="30" loop="3"


scrollamount="5" scrolldelay="100" vspace="10" width="300">Scrolling
Text</marquee>

15. Lists

<dl><dt>HTML</dt><dd>Hyper Text Markup Language</dd></dl>


<ol type="A" start="2"><li>Item 1</li><li>Item 2</li></ol>
<ul><li>Item A</li><li>Item B</li></ul>
<ol><li>Outer<li><ul><li>Inner</li></ul></li></ol>
16. Address Tag

<address>Krishna Chaudhary<br>Janakpur, Nepal<br>Email:


[email protected]</address>

17. Hyperlinks

<a href="#section1">Internal Link</a><br><a href="https://www.google.com"


target="_blank">External Link</a>

18. Tables

<table border="1" cellpadding="5" cellspacing="2" bgcolor="lightgrey" width="50%"


align="center">
<caption>Sample Table</caption>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Krishna</td><td>20</td></tr>
<tr><td colspan="2">Footer Info</td></tr>
</table>
19. Forms

<form>
<input type="text" name="name"><br>
<input type="radio" name="gender" value="male"> Male<br>
<input type="checkbox" name="vehicle1" value="Bike"> Bike<br>
<input type="password" name="pwd"><br>
<input type="file"><br>
<input type="submit"><input type="reset"><br>
<textarea rows="4" cols="30"></textarea><br>
<select><option>Option 1</option><option>Option 2</option></select>
</form>

20. Frames and Iframe

<frameset cols="50%,50%"><frame src="page1.html"><frame


src="page2.html"></frameset>
<iframe src="page.html" width="300" height="200"></iframe>
21. HTML5 Media and Graphics

<video width="320" height="240" controls><source src="movie.mp4"


type="video/mp4"></video>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#000000;"></canvas>
<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-
width="4" fill="yellow" /></svg>
22. Semantic Tags

<header>Header Section</header><section>Section Content</section><footer>Footer


Info</footer><div>Div Element</div>

CSS Introduction and Styling

<style>
body { background-color: lightblue; }
h1 { color: navy; text-align: center; }
p { font-size: 14px; padding: 10px; }
</style>

CSS Methods and Selectors

<style>
/* Inline: <p style="color:red">Text</p> */
/* Internal: In <style> tag */
/* External: Link to .css file */

/* CSS Selectors */
#idSelector { color: blue; }
.classSelector { font-weight: bold; }
p, h1 { margin: 5px; } /* Grouping */
* { box-sizing: border-box; } /* Universal */
</style>
5. Conclusion
Through this lab work on Web Technology I, we have successfully achieved the objectives
of understanding the foundational elements of HTML and CSS. We have learned how to
create the basic structure of a web page using HTML tags, format text and apply styling,
embed multimedia content, and design user forms. Additionally, we explored various
HTML elements such as headings, lists, images, tables, and forms, and learned how to
make our web pages interactive and visually appealing using CSS. The practical
implementation of these concepts has enhanced our ability to build static web pages that
are both structured and styled effectively.

You might also like