Lab Report of Web Designing in HTML: Submitted by

Lab Report
of
Web Designing in HTML
Submitted by
Prajita Shrestha
XI "A"
Roll No. 25
Submitted to
Computer Science Department
10+2 Management Section
Motherland Higher Secondary School Masbar,
Pokhara
Chaitra Month,2074Year
Self-Introduction
Name: Prajita Shrestha
Class: XI
Section: A
Shift: Morning
Roll No. :25
Address: Lakeside, Pokhara-17
Email: prajita24@gmail.com
Contents
Objective Date Page Teacher's
No. Sign
1. TO CREATE A SIMPLE WEB PAGE USING BASIC HTML 2074/12/13 1
TAGS
2. TO USE DIFFERENT FORMATTING ELEMENTS IN HTML 2074/12/13 3
3. TO CREATE ORDERED, UNORDERED AND DEFINITION 2074/12/14 5
LISTS IN A WEB PAGE
4. TO INSERT PICTURES IN A WEB PAGE AND APPLY 2074/12/15 8
DIFFERENT FORMATTING.
5. TO CREATE DIFFERENT HYPERLINKS IN A WEB PAGE 2074/12/15 10
PRACTICAL NO.: 1 DATE: 2074/12/13
OBJECTIVE: TO CREATE A SIMPLE WEB PAGE USING BASIC HTML TAGS
THEORY:
HTML stands for Hyper Text Markup Language. It is text markup language used in designing web pages. A
markup is information that is written in the document to specify the document structure or formatting. Markups
are provided as the tags surrounded by the angle brackets (<>) within the web document (web pages). HTML
document contains HTML tags and plain text. The angle brackets distinguish the tags from the text that is
actually displayed in the browser.
In HTML, markups are provided with the markup text inside the angle brackets (<>). These types of markups
in HTML documents are also called HTML tags, or simply tags. Tags are instructions to the browser that are
embedded directly into the text of the HTML document.An attribute is a special text that defines the property
related to the tag. An attribute also has a value.
<html>, <head>, <title> and <body> are basic HTML tags. <html> … </html> tag represents the
beginning and ending of html document. <head> … </head> tag includes the header information like
title, description etc. <title>…</title> tag contains the title of the page that is displayed on the title
bar of the browser window. <body> is the tag which includes all the contents of a web page. <body>
tag can have attributes like bgcolor and text which represent background color and default text color
for the webpage respectively.
PROCEDURE:
1. Create a folder in any location in the computer (e.g. D: drive) and give it a suitable name (e.g.
Web2064_XI)
2. Open Notepad (Start -> All Programs -> Accessories -> Notepad)
3. Write the basic html tags.
4. Add bgcolor and text attributes to <body> tag.
5. Add some text inside <body> … </body> tag.
6. Save the file in the folder Web2074_XI with a name (e.g. basic.html).
7. Go to the folder Web2074_XI and open the file basic.html. It will open in default web browser
(e.g. Mozilla Firefox)
8. Open the source code of the webpage in Notepad, make some changes and save.
9. Open the web page in browser and refresh the page (shortcut key: F5) to see the changes.
1
HTML CODE
<html>
<head>
<title> My First Web Page </title>
</head>
<body bgcolor= #E7FA5B text="red">
Hello!!
<br>
Welcome to my first web page. I created it in HTML.
</body>
</html>
OUTPUT / SCREENSHOT:
Fig. No. 1: Screenshot of basic.html
CONCLUSION
HTML document can be created in simple text editor like notepad with extension .html or .htm.
<html>, <head>, <title> and <body> are the basic tags of HTML.
2
OBJECTIVE: TO USE DIFFERENT FORMATTING ELEMENTS IN HTML
THEORY:
HTML stands for Hyper Text Markup Language. It is text markup language used in designing web
pages. A markup is information that is written in the document to specify the document structure or
formatting. Markups are provided as the tags surrounded by the angle brackets (<>) within the web
document (web pages). HTML document contains HTML tags and plain text. The angle brackets
distinguish the tags from the text that is actually displayed in the browser.
HTML contains several elements that are used to format the text in the HTML page. For instance,
elements exists to markup headlines, paragraphs, bold, italic, underlined text etc. This text looks at
these HTML elements.
Formatting elements were designed to display special types of text:
<b> - Bold text <i> - Italic text
<sub> - Subscript text <sup> - Superscript text
<p> - Paragraph <h1> to <h6>- Heading text
<hr> - horizontal ruler
PROCEDURE:
Web2064_XI)
6. Save the file in the folder Web2074_XI with a name (e.g. formating.html).
7. Go to the folder Web2074_XI and open the file formating.html. It will open in default web
browser (e.g. Mozilla Firefox)
3
4
HTML CODE
<html>
<head>
<title>Formating Element</title>
</head>
<body bgcolor= #7AD5F0 text="red">
<b>Hello!! </b>
<br>
<i>Welcome to my first web page. I created it in HTML. </i>
<h1> Sunday </h1>
<h2> Monday</h2>
<h3> Tuesday </h3>
<h4> Wednesday</h4>
<h5> Thursday </h5>
<p>
a<sup>2</sup>-b<sup>2</sup>= (a+b) (a-b)
</p>
</body>
</html>
Fig. No. 2: Screenshot of formating.html

CONCLUSION
5
Formatting Elements store character formatting such as font name, size, color and paragraph
formatting such as indentation, alignment, vertical spacing .
6
OBJECTIVE: TO CREATE ORDERED, UNORDERED AND DEFINITION
LISTS IN A WEB PAGE
THEORY:
The HTML language is comprised of a number of different element. These individual elements act as
the building blocks of webpages. Look at the HTML markup for any page on the Web and you will
see common elements including paragraphs, headings, images, and links. Another element you are
almost certain see are lists.
There are three types of lists in HTML:
 Ordered Lists: These are sometimes called numbered lists because, by default, the list items
contained in that list have a specific numerical order or ranking. Ordered lists are appropriate
where the exact ordering of items are critically important to the meaning of the content.
 Unordered Lists: These are sometimes called bulleted lists, because the default visual
appearance of an Unordered List is to have small bullet icons in front of the list items. This
type of list is best used are for lists that don't have a required order.
 Definition Lists : These are lists of items that have two parts, a term to be defined and the
definition. They are commonly used to display a definition/description pair, like you would
find in a dictionary, but definition lists can also be used for many other kinds of content.
PROCEDURE:
Web2064_XI)
6. Save the file in the folder Web2074_XI with a name (e.g. list.html).
7. Go to the folder Web2074_XI and open the file list.html. It will open in default web browser
7
HTML CODE
<html>
<head>
<title>Formating Element</title>
</head>
<body>
<h3> Ordered list </h3>
<ol>
<li>Apple</li>
<li>Orange </li>
<li>Mango</li>
</ol>
<h3> Unordered list</h3>
<ul>
<li>Pokhara</li>
<li>Kathmandu</li>
<li>Chitwan</li>
</ul>
<h3> Definition list </h3>
<dl>
<dt>Sunday</dt>
<dd>Monday</dd>
<dt>Tuesday</dt>
<dd>Wednesday</dd>
</dl>
</body>
</html>
8
Fig. No. 1: Screenshot of list.html
CONCLUSION
List provides methods to layout item or elements sequences in a HTML document. HTML provides
unordered, ordered, and definition list types.
9
OBJECTIVE: TO INSERT PICTURES IN A WEB PAGE AND APPLY DIFFERENT

FORMATTING.
THEORY:
The image are used for effective ways of presenting information. Along with the text,
image provides the visual presentation of information. The images are frequently used in the websites
to deliver visual information. The frequently used image formats in the web pages are JPEG,
GIF,PNG etc. Any size and width of the image can be placed in the web pages, however for efficient
usages the images can be optimized for web pages. The optimization can be done in the file size and
format. The image can be included in web page using the <img> tag. The src attribute of the <img>
tag specifies the URL of the image.
PROCEDURE:
Web2064_XI)
6. Save the file in the folder Web2074_XI with a name (e.g.inserting image.html).
7. Go to the folder Web2074_XI and open the file inserting image.html. It will open in default
web browser (e.g. Mozilla Firefox)
10
HTML CODE
<html>
<head>
<title>Inserting imaage</title>
</head>
<body>
<h3> Ordered list </h3>
<img src="everest.jpg" alt="everest" width="500" height="400">
</body>
</html>
Fig. No. 1: Screenshot of inserting image.html
CONCLUSION
<img> tag is used to insert picture on the webpage.
11
OBJECTIVE: TO CREATE DIFFERENT HYPERLINKS IN A WEB PAGE
THEORY:
The hypertext markup language (HTML) documents are composed of text, link and other
multimedia contents. The links are normally called hyperlinks. Through the hyperlinks, any resources
in the world wide web can be accessed by providing URL of those resources. The hyperlinks are
included in the web page with the anchor tag <a>. the link is simply a pointer from the source
document to the destination. The most important attribute of <a> tag is href. The href attribute is used
to specify the URL of the target document or other internet resources.
PROCEDURE:
Web2064_XI)
6. Save the file in the folder Web2074_XI with a name (e.g. link.html).
7. Go to the folder Web2074_XI and open the file link.html. It will open in default web browser
12
HTML CODE
<html>
<head>
<title>Hyperlinks in a web page</title>
</head>
<body>
<h3> Example of Hyperlinks </h3>
Click <a href="www.google.com">here</a> to go to Google.
</body>
</html>
Fig. No. 1: Screenshot of link.html
CONCLUSION
Hyperlink is used to connect to different page or other webpages available on the internet.
13

Lab Report of Web Designing in HTML: Submitted by

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Lab Report of Web Designing in HTML: Submitted by

Загружено:

Авторское право:

Доступные форматы

Lab Report

10+2 Management Section

Motherland Higher Secondary School Masbar,

Name: Prajita Shrestha

Roll No. :25

Address: Lakeside, Pokhara-17

OBJECTIVE: TO CREATE A SIMPLE WEB PAGE USING BASIC HTML TAGS

Fig. No. 1: Screenshot of basic.html

OBJECTIVE: TO USE DIFFERENT FORMATTING ELEMENTS IN HTML

Formatting elements were designed to display special types of text:

<b> - Bold text <i> - Italic text

<sub> - Subscript text <sup> - Superscript text

<p> - Paragraph <h1> to <h6>- Heading text

<hr> - horizontal ruler

Fig. No. 2: Screenshot of formating.html

There are three types of lists in HTML:

Fig. No. 1: Screenshot of list.html

OBJECTIVE: TO INSERT PICTURES IN A WEB PAGE AND APPLY DIFFERENT

Fig. No. 1: Screenshot of inserting image.html

OBJECTIVE: TO CREATE DIFFERENT HYPERLINKS IN A WEB PAGE

Fig. No. 1: Screenshot of link.html

Вам также может понравиться