Scribd
Upload
9 views

html completed

This document outlines a lab work report on Web Technology I focusing on HTML and CSS, submitted by Hamid Asari at Trinity International SS & College. It includes objectives, theoretical background, and practical exercises demonstrating various HTML elements and CSS styling techniques. The conclusion emphasizes the successful understanding of foundational web development concepts and the ability to create structured and styled web pages.

Uploaded by

hamidasari14
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

html completed

This document outlines a lab work report on Web Technology I focusing on HTML and CSS, submitted by Hamid Asari at Trinity International SS & College. It includes objectives, theoretical background, and practical exercises demonstrating various HTML elements and CSS styling techniques. The conclusion emphasizes the successful understanding of foundational web development concepts and the ability to create structured and styled web pages.

Uploaded by

hamidasari14
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

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
1. HTML Basics and Page Skeleton
HTML (HyperText Markup Language) is the standard language for creating web pages. It
structures the content of a web page using various tags. A basic HTML page skeleton
includes the following structure:
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- Page content goes here -->
</body>
</html>
2. HTML Headings
HTML provides six levels of headings: <h1> to <h6>, where <h1> defines the largest and
most important heading and <h6> the smallest.
3. HTML Text Formatting Tags
These tags format text in specific ways:
• <b>, <strong> – Bold text.
• <i>, <em> – Italicized text.
• <u> – Underlined text.
• <sup>, <sub> – Superscript and subscript.
• <strike>, <del> – Strikethrough text.
• <mark> – Highlighted text.
• <ins> – Inserted text.
• <small>, <big> – Smaller or larger text.
• <pre> – Preformatted text.
4. Font and Basefont Tags
• <font> tag allows setting font face, size, and color. (Note: deprecated in HTML5)
• <basefont> sets the default font face, size, and color for all the text on the page.
(Also deprecated)
5. HTML Lists
• Ordered List (<ol>): Numbered lists. Attributes: type, start.
• Unordered List (<ul>): Bulleted lists.
• Definition List (<dl>): Describes terms with <dt> (term) and <dd> (description).
• Nested Lists: Combination of <ol> and <ul>.
6. HTML Image Element
Images are inserted using the <img> tag with attributes like:
• src: Source of image.
• width, height: Size.
• alt: Alternative text.
• title: Tooltip text.
7. HTML Audio and Video
• <audio> and <video> tags embed audio and video content respectively.
• <object>, <embed> tags are also used for embedding media.
• Attributes include src, controls, type, autoplay, etc.
8. HTML Body Attributes
Attributes such as bgcolor, text, background, topmargin, bottommargin set the
appearance of the body content.
9. HTML Paragraphs and Comments
• <p> defines a paragraph. It can have an align attribute: left, right, center.
• <br> tag is used to insert line breaks.
• Comments are added using <!-- comment -->.
10. Marquee Tag
The <marquee> tag creates scrolling text or images. Attributes include:
• behavior, direction, bgcolor, height, width, loop, scrollamount, scrolldelay,
vspace.
11. Address Tag
The <address> tag is used to display contact information, usually in italicized text.
12. Hyperlinks
Hyperlinks are created using the <a> tag:
• Internal links: link to sections within the same page.
• External links: link to other websites or pages.
13. HTML Tables
Tables are defined using:
• <table>, <tr> (row), <td> (cell), <th> (header cell).
• Attributes: border, bgcolor, align, cellpadding, cellspacing, rowspan, colspan,
width, height, bordercolor.
14. HTML Forms
Forms collect user input. Key form elements:
• <input> types: text, radio, checkbox, password, file, submit, reset, email, color,
button.
• Other elements: <textarea>, <select>, <option>, <optgroup>, <fieldset>,
<legend>, <label>.
15. HTML Frames and iFrames
• <frameset> divides the browser window into multiple frames.
• <iframe> embeds another HTML page within the current one.
• Attributes: rows, cols, src, etc.
16. HTML5 Semantic Elements
HTML5 introduced new elements to enhance the structure and readability:
• <header> – Defines header of a document/section.
• <footer> – Defines footer.
• <section> – Groups related content.
• <div> – Generic container for content.
17. HTML5 Media and Graphics
• <audio>, <video>, <embed>, <object>: Multimedia embedding.
• <canvas>: Used to draw graphics using JavaScript.
• <svg>: Scalable Vector Graphics for shapes like circles, rectangles, etc.
18. Meta Tags
Placed inside <head>, they provide metadata about the HTML document:
• meta charset="UTF-8" – Character encoding.
• meta name="author", description, keywords, viewport – SEO and accessibility.
CSS – Cascading Style Sheets
1. Introduction
CSS is used to style HTML elements. It separates content from presentation and
enhances user experience.
2. Methods of Applying CSS
• Inline: Within an element using style attribute.
• Internal: Within <style> tag in the HTML <head>.
• External: In separate .css file linked using <link> tag.
3. CSS Syntax and Selectors
css
CopyEdit
selector {
property: value;
}
Selectors:
• Element selector: targets HTML tags.
• ID selector: uses #id.
• Class selector: uses .class.
• Group selector: targets multiple selectors at once.
• Universal selector: * selects all elements.
CSS Comments: /* comment */
4. Styling HTML with CSS
CSS can be used to style elements using:
• Text: font-size, font-family, text-align, text-decoration.
• Box model: height, width, border, margin, padding.
• Layout: float, display, position.
• Background: background-color, background-image.
• Navigation styling and creating responsive designs.
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