Scribd
Upload
34 views21 pages

Unit 3

This document provides an introduction to HTML, including how to create and save a basic web page using a text editor. It outlines the structure of an HTML document, common tags, and their applications, such as web page development and document creation. Additionally, it explains various HTML elements and attributes, including formatting tags, comments, headings, and the body tag with its attributes.

Uploaded by

nehal siddiqui
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
34 views21 pages

Unit 3

This document provides an introduction to HTML, including how to create and save a basic web page using a text editor. It outlines the structure of an HTML document, common tags, and their applications, such as web page development and document creation. Additionally, it explains various HTML elements and attributes, including formatting tags, comments, headings, and the body tag with its attributes.

Uploaded by

nehal siddiqui
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/ 21

BCA I SEM I Subject: Web Page Design

UNIT 3: Introductions to HTML


Editor and browser used for HTML program.
Web pages can be created and modified by using professional HTML editors.
However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit
(Mac).
We believe in that using a simple text editor is a good way to learn HTML.
Follow the steps below to create your first web page with Notepad or TextEdit.
Step 1: Open Notepad (PC)
Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
Windows 7 or earlier:
Open Start> Programs >Accessories >Notepad

Step 2: Write Some HTML


Write or copy the following HTML code into Notepad:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
BCA I SEM I Subject: Web Page Design

Step 3: Save the HTML Page


Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for
HTML files).

Tip: You can use either .htm or .html as file extension. There is no difference, it is up to you.

Step 4: View the HTML Page in Your Browser


Open the saved HTML file in your favorite browser (double click on the file, or right-click - and
choose "Open with"). The browser may be Internet Explorer, Mozila Firefox or Chrome, etc.
The result will look much like this:
BCA I SEM I Subject: Web Page Design

Title bar Min, Max,


Cancel Button

File path
or URL
Browser
window
BCA I SEM I Subject: Web Page Design

1. How to save HTML FILE.


Ans:-Save the HTML Page
Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for
HTML files).
BCA I SEM I Subject: Web Page Design

FIVE APPLICATIONS OF HTML AND EXPLAIN THEM.


Ans:- 1. Web pages development
HTML is heavily used for creating pages that are displayed on the world wide web. Every page
contains a set of HTML tags including hyperlinks which are used for connecting to other pages.
2. Web document Creation
Document creation on the internet is dominated by HTML and its basic concept via tag and
DOM i.e. document object model. HTML tags are inserted before and afterward or phrases to
locate their format and location on the page. A web document consists of three sections: title,
head, and body. Head includes the information to identify the document, including title and any
other important keyword. A title can be seen on the browser’s bar and the body section is the
main portion of the website visible to the viewer.
3. Internet navigation
This is one of the most important uses of HTML which is revolutionary. This navigation is
possible by utilizing the concept of Hypertext. It is basically a text which refers to other web
pages or text and when user click on it, would navigate to referenced text or page. HTML is
heavily used to embed the hyperlink within the web pages.
4. Cutting edge feature
HTML5 with its set of standards and API is being used to introduce some of the latest trends in
website creation business. Like polyfill libraries, which are supported by old browsers equally
well. Browser like Google Chrome is the perfect choice when it comes to implementing an
HTML5 latest set of standards and APIs.
5. Responsive images on web pages
At the elementary level in applications of HTML, queries can be set to utilize the images, which
are responsive in nature. With the src (source) set attribute of img element in HTML, and
combining it with picture elements, a developer can fully control how the user will render an
image.
6. Client-side storage
Earlier, a user could not save the user’s browser data that would persist across sessions. To meet
this requirement, server-side infrastructure has to be built or user’s cookies can be used. But with
HTML5, client-side storage is feasible using localStorage and IndexDB. IndexDB database can
be expanded with the user’s permission.
BCA I SEM I Subject: Web Page Design

2. Write the basic structure of HTML webpage or document using


basic tags.
Ans:-<!DOCTYPE html>
<html>

<head>
<title>This is document title</title>
</head>

<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>

</html>
Output:-This is a heading
Document content goes here.....
HTML is a markup language and makes use of various tags to format the content. These
tags are enclosed within angle braces <Tag Name>. Except few tags, most of the tags have
their corresponding closing tags. For example, <html> has its closing tag </html> and
<body> tag has its closing tag </body> tag etc.
Above example of HTML document uses the following tags –

(i) <!DOCTYPE...>

This tag defines the document type and HTML version. Current version of HTML is 5 and
it makes use of the following declaration −

<!DOCTYPE html>

(ii) HTML – After DOCTYPE tag, the HTML tag is written to start the template. All the code
will be placed into this HTML tag. It works as the container for the whole HTML page elements.
BCA I SEM I Subject: Web Page Design

<html>
<!-- Rest of the html code will come inside it -->
</html>

(iii) HEAD – <head> tag is the first element inside the <html> tag. It is used to provide
information to the browser about the page and its contents.Search Engine Optimization (SEO)
techniques are written inside this tag. <title>, <meta> tags are written inside these tag.
<head>
<title>This is document title</title>
</head>

(iv) BODY – <body> tags are written after the closing tag of the <head> tag, i.e. after </head>.
Whatever HTML code is written inside these tags will be shown by the browser as website
content.
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
BCA I SEM I Subject: Web Page Design

<P> Tag: paragraph tag with its attribute align.

Ans:-The <p> tag offers a way to structure your text into different paragraphs. Each paragraph
of text should go in between an opening <p> and a closing </p> tag as shown below in the
example −
Example:
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>

This will produce the following result –

Here is a first paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

-An attribute is used to define the characteristics of an HTML element and is placed inside the
element's opening tag. All attributes are made up of two parts − a name and a value

 The name is the property you want to set. For example, the paragraph <p> element in the
example carries an attribute whose name is align, which you can use to indicate the
alignment of paragraph on the page.
 The value is what you want the value of the property to be set and always put within
quotations. The below example shows three possible values of align attribute: left, center
and right.
BCA I SEM I Subject: Web Page Design

 Example:
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<palign="left">This is left aligned</p>
<palign="center">This is center aligned</p>
<palign="right">This is right aligned</p>
</body>
</html>

This will display the following result –

This is left aligned

This is center aligned

This is right aligned


BCA I SEM I Subject: Web Page Design

3. Write a program in html using basic tags and explain it.


Ans:-
<html>
<head>
<title>Sample html </title>
</head>
<body>
<h1> Hello World! </h1>
</body>
</html>

Save this program as demo1.html


Output:-

The program can be opened in any web browser.


(Note: Explain the program.)
BCA I SEM I Subject: Web Page Design

Format text on a web page using HTML tags.(Write any 5 tags)

Ans:- If you use a word processor, you must be familiar with the ability to make text bold,
italicized, or underlined; these are just three of the ten options available to indicate how text can
appear in HTML. Formatting elements were designed to display special types of text. The
HTML formatting tags are as follows:

i. Bold: Anything that appears within <b>...</b> element, is displayed in bold.


Example:<b>This text is bold</b>
Outout: This text is bold

ii. Strong: The HTML <strong> element defines text with strong importance. The
content inside is typically displayed in bold.
Example: <strong>This text is important!</strong>
Output: This text is important!

iii. Italic: Anything that appears within <i>...</i> element is displayed in italicized
Example: <i>italicized</i>
Output: italicized

iv. Underlined Text: Anything that appears within <u>...</u> element, is displayed with
underline.
Example: <u>underlined</u>
Output: underlined

v. Strike Text: Anything that appears within <strike>...</strike> element is displayed


with strikethrough, which is a thin line through the text.
Example: <strike>strikethrough</strike>
Output: strikethrough

vi. Monospaced Font: The content of a <tt>...</tt> element is written in monospaced


font. Most of the fonts are known as variable-width fonts because different letters are
BCA I SEM I Subject: Web Page Design

of different widths (for example, the letter 'm' is wider than the letter 'i'). In a
monospaced font, however, each letter has the same width.

Example: <p>The word uses a <tt>monospaced</tt> typeface.</p>

Output: The word uses a monospaced typeface.

vii. Superscript Text: The content of a <sup>...</sup> element is written in superscript;


the font size used is the same size as the characters surrounding it but is displayed
half a character's height above the other characters.
Example: <p>The following word uses a <sup>superscript</sup> typeface.</p>
Output: The following word uses a superscript typeface.

viii. Subscript Text: The content of a <sub>...</sub> element is written in subscript; the
font size used is the same as the characters surrounding it, but is displayed half a
character's height beneath the other characters.
Example: <p>The following word uses a <sub>subscript</sub> typeface.</p>
Output: The following word uses a subscript typeface.
BCA I SEM I Subject: Web Page Design

Q. WRITE HTML COMMENTS.


Ans:-HTML comments: Comment is a piece of code which is ignored by any web browser. It is
a good practice to add comments into your HTML code, especially in complex documents, to
indicate sections of a document, and any other notes to anyone looking at the code. Comments
help you and others understand your code and increases code readability.
Syntax: HTML comments are placed in between <!-- ... --> tags. So, any content placed with-in
<!-- ... --> tags will be treated as comment and will be completely ignored by the browser.
Example:
<!DOCTYPE html>
<html><!—HTML TAG -->

<head><!-- Document Header Starts -->


<title>This is document title</title>
</head><!-- Document Header Ends -->

<body><!—BODY TAG -->


<p>Document content goes here.....</p>
</body>

</html>

This will produce the following result without displaying the content given as a part of
comments –
Document content goes here.....
BCA I SEM I Subject: Web Page Design

Q. What are different ways of heading writing in html. Explain


align attribute.

Ans:-Any document starts with a heading. You can use different sizes for your headings. HTML
also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and
<h6>. While displaying any heading, browser adds one line before and one line after that
heading.
Example:
<!DOCTYPE html>
<html>

<head>
<title>Heading Example</title>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

This will produce the following result −


BCA I SEM I Subject: Web Page Design

This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6

InHTML <h1> to <h6> align Attribute is used to specify the alignment of the <h> element or
the content present inside the Heading Element.
Syntax:
<h1 align="left | right | center | justify">

<br> line break and horizontal rule with syntax and example.

The <br> tag inserts a single line break. The <br> tag is useful for writing addresses or poems.
The <br> tag is an empty tag which means that it has no end tag. Use the <br> tag to enter line
breaks, not to add space between paragraphs.
Syntax: <br>
Attributes in <HR> Tag:- The HTML <hr> tag is used for creating a horizontal line. This is also
called Horizontal Rule in HTML.
Attribute Value Description

Align left Used to specify the alignment of the horizontal rule.


center
right

Noshade noshade Used to specify the bar without shading effect.

Size Pixels Used to specify the height of the horizontal rule.

Width Pixels Used to specify the width of the horizontal rule.


BCA I SEM I Subject: Web Page Design

Ex:-<HR align=”left” width=”20” noshade>


<hrcolor="red" size=”20”>
BCA I SEM I Subject: Web Page Design

4. Write a program in html using <HR>, <BR>, <P> tag.


Ans:-<!DOCTYPE html>
<html>
<head>
<title>HTML hr tag</title>
</head>
<body>
<p>There is a horizontal rule below this paragraph.</p><br>
<p>This is new line.</p>
<hr>
<p>This is a horizontal rule above this paragraph.</p>
</body>
</html>

Output:-
BCA I SEM I Subject: Web Page Design

5. Explain <BODY> tag with its following attributes. Give syntax


and example:
i. Bgcolor
ii. Link
iii. Alink
iv. Vlink
Ans:-<BODY> Tag:<body> tags are written after the closing tag of the <head> tag, i.e. after
</head>. Whatever HTML code is written inside these tags will be shown by the browser as
website content.The actual program is written inside <body> tag.
Syntax: <body>…….</body>
 bgcolor: The <body>tag has bgcolor attributes which can be used to set different colors .
bgcolor − sets a color for the background of the page.
Example: <body text="blue" bgcolor="green">
<p>Use different color names for for body and table</p>
<table bgcolor="black">
</body>
The above example show that bgcolor attribute can be used with table tag also.
You can set colors of your links, active links and visited links using link, alink and vlink
attributes of <body> tag.
 alink − sets a color for active links or selected links. It can be used with <body> tag.
 link − sets a color for linked text. It can be used with <body> tag.
 vlink − sets a color for visited links − that is, for linked text that you have already clicked
on.
It can be used with <body> tag.
Syntax:-<body alink = " " link = " " vlink = " ">
Example:-<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
BCA I SEM I Subject: Web Page Design

<body alink = "#54A250" link = "#040404" vlink = "#F40633">


<p>Click following link</p>
<a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
</body>
</html>
Output:-
This will produce the following result. Just check color of the link before clicking on it, next
check its color when you activate it and when the link has been visited.

Click following link


HTML Tutorial
BCA I SEM I Subject: Web Page Design

Attribute in html: Explain color attribute with <HR> tag.


Ans:-An attribute is used to define the characteristics of an HTML element and is placed inside
the element's opening tag. All attributes are made up of two parts − a name and a value
 The name is the property you want to set. For example, the paragraph <p> element in the
example carries an attribute whose name is align, which you can use to indicate the
alignment of paragraph on the page.
 The value is what you want the value of the property to be set and always put within
quotations. The below example shows three possible values of align attribute: left, center
and right.
Attribute names and attribute values are case-insensitive. However, the World Wide Web
Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4
recommendation.
Example:
<HR> tag:-It is a tag for Horizontal Rule. The HTML <hr> tag is used for creating a
horizontal line. This is also called Horizontal Rule in HTML.
Attribute Value Description
Align left Used to specify the alignment of the horizontal rule.
center
right
Noshade noshade Used to specify the bar without shading effect.
Size Pixels Used to specify the height of the horizontal rule.
Width Pixels Used to specify the width of the horizontal rule.
It uses color as its attribute.
Ex:-<hrcolor=”red”>

Program:

<!DOCTYPE html>
<html>
<head>
<title>hr tag with attributes</title>
BCA I SEM I Subject: Web Page Design

</head>
<body>
<p>Normal horizontal line.</p>
<hr>
<p>Colour horizontal line.</p>
<hrcolor="red">
<p>Horizontal line with height of 30 pixels</p>
<hr size="30">
<p>Horizontal line with height of 30 pixels And noshade.</p>
<hr size="30" noshade>
<p>Horizontal line with height and colour shade.</p>
<hr size="30" color="fuschia">
</body>
</html>

Output:-

You might also like