Class 9 | HTML Elements | Website Design Notes

Introduction
HTML element is a component of an HTML document that tells a web browser how to structure and interpret a part of the html document. An HTML element is often- but not always- created by opening and closing HTML tags, which warp around a piece of content.

Headings
A html heading or html h tag can be defined as a title or a subtitle which you want to display on the webpage. There are total 6 types of heading tags, they are given below:
<h1>no.1</h1>
<h2>no.2</h2>
<h3>no.3</h3>
<h4>no.4</h4>
<h5>no.5</h5>
<h6>no.6</h6>

HTML Elements list

If you want to arrange many items to make a group, then you can use list tag.

There are three types of lists in HTML:

Unordered list

It defines one ordered list which make a bullet list of items. <The <LI> defines the list of items. It is also called sub tag.

Example:

<HTML>

<Head>

<title> About list </title>

</Head>

<body>

<UL>

<li> Harry</li>

<li> Roshan</li>

<li>Joseph</li>

</UL>

</body>

</HTML>

ordered list

It defines ordered list which makes a list of items using the number or character the <li> is a sub tag which defines the list of items.

Example:

<HTML>

<Head>

<title> About list </title>

</Head>

<body>

<p> computer subject are given as :</p>

<li> c-programming </li>

<li> computer fundamental </li>

<li> webpage </li>

Output

Computer Engineering subjects are given as:

EE
c-Programming
computer fundamental
webpage

Description list

HTML definition list display element in definition form in dictionary.

The <dl>, <dt>, <dd> tag are used to define description list.

<dl> It defines description list

<dt>It defines the data term

<dd> It defines data definition

Example:

<HTML>

<Head>

<title> About list </title.

</Head>

<body>

<DL>

<DD> Math is the easiest subject </DD>

</DL>

</body>

</HTML>

Output:

Math

Math is the easiest subject.

Heading tags

<h₁> -largest

<h₂>

<h₃>

<h₄>

<h₅>

<h₆> – smallest

There are 6 heading tags they are as above.

All the six heading elements are container tag requires a closing tag.

Tag h1 will print the largest heading and <h6> Will print the smallest heading.

Example:

<HTML>

<Head> <title> Heading tags </title>

</Head>

<body>

<h1> hello world </h1>

<h2> hello world </h2>

<h3> hello world </h3>

<h4> hello world </h4>

<h5> hello world </h5>

<h6> hello world </h6>

</body>

</HTML>

Paragraphs <p>
Html paragraphs or html p tag is used to define a paragraph in a web page.
eg:
<p>
I am going to provide
you a tutorial on HTML and
hope that it will be very beneficial for you
</p>
<p>
look, I put here a lot of spaces but I know, browser will ignore it.
</p>

Break line <Br>

The <Br> helps to display the text in a new line otherwise it comes on the same line even as you write text on the news line in HTML editor. The <Br> has no closing tag.

Example:
Nepal<br> India<br>Bhutan<br>south Korea

Horizontal line <hr.>

The horizontal rule <hr.> hellos to produce a tiny line across the page . The <br> has no end tag .

Attributes

Align= size ,width

Text Formatting:
Text formatting in HTML involves using various tags to structure and style text content. Here are some key HTML tags used for text formatting:

Basic Text Formatting Tags

Bold (`<b>` or `<strong>`):

Makes the text bold.
Example:

<strong>This text is also bold and has a stronger emphasis</strong>

Italic (`<i>` or `<em>`):

Italicizes the text.
Example:

<i>This text is italic</i>

<em>This text is also italic and has emphasis</em>

Underline (<u>):

Underlines the text.

Example:

<u>This text is underlined</u>

Strikethrough (<s> or <del>):

Strikes through the text.

Example:

<s>This text is struck through</s>

<del>This text is deleted and struck through</del>

Subscript (<sub>):

Displays text as subscript.

Example:

H<sub>2</sub>O

Superscript (<sup>):
Displays text as superscript.

Example:

E = mc<sup>2</sup>

Multimedia (image, audio, video)
HTML image
HTML img tag is used to display image on the web page. HTML img tag is an empty tag that contains attributes only, closing tags are not used in html image element.
eg:
<h2> eg</h2>
< img src = “hi_hello.jpg” alt = “hi friends”/>

Here are the key attributes:

src (source):
Specifies the URL of the image to be displayed.

Example: `<img src=”path/to/image.jpg” />`

This is a required attribute. It can be a relative path (relative to the current document) or an absolute URL.

alt (alternative text):

Provides alternative text for the image if it cannot be displayed.

Example: `<img src=”path/to/image.jpg” alt=”Description of the image” />`
This attribute is important for accessibility as it helps screen readers describe the image to visually impaired users. It is also used by search engines to understand the content of the image.

width:

Specifies the width of the image.

Example: `<img src=”path/to/image.jpg” width=”500″ />`

This attribute sets the width of the image in pixels. If both `width` and `height` are specified, the image will be scaled to fit those dimensions, potentially distorting the aspect ratio if they do not match the image’s original dimensions.

height:

Specifies the height of the image.

Example: `<img src=”path/to/image.jpg” height=”300″ />`

This attribute sets the height of the image in pixels. Similar to `width`, if both dimensions are set, the image may be stretched or compressed if the aspect ratio does not match the original.

HTML audio

HTML provides a standard for playing audio file.

The HTML <audio> element specifies a standard way to embed audio in a webpage. To play an audio file in HTML, used the <audio> element.

Example:

</audio>

The control attributes add audio control like play, pause and volume multiple <source> elements can link to different audio file.

HTML Video

HTML <video> element specific the standard way to embed. A video in webpage HTML provide a standard for playing video file. To show a video in HTML, use the <video> element.

</video>

The control attributes adds video controls like play, pause and volume multiple <source> elements can link to difference video files.

To start a video automatically, use the auto play attributes

</video>

Inserting hyper link
A hyperlink is link between two files and it’s defined by anker <a>. The attributes HREF helps to create link between two files. A hyperlink can be created two another HTML file, picture file, e-mail, URL and even phone number.

Syntax:
<! DOCTYPE html>
<html>
<head>
………
</head>
<body>
………
<a href = “url” >text</a>
……..
</body>
</html>

Tables and frames

Tabels:
Table is the collection of row and column. It is defined by using <table> with # sub tag:

table row<tr>, table data<td>, table header<Th>. You can add <caption> tags on table but it’s not compulsory.

Table is useful tool to arrange information on webpage and some of the attributes are listed below:

Example:

<html>

<head>

<title> subject </title>

</head>

<body>

<tr>

<Th> Time table </Th>

</tr>

<tr>

<Th> Monday </Th>

<Th> Tuesday <Th>

<Th>Thursday </Th>

<Th> Friday </Th>

</tr>

<tr>

<td> science </td>

<td> Occupation </td>

<td> Social </td>

<td> Nepali </td>

</tr>

</table>

</body>

</html>

Attributes	Description
1.Border =N	Define the size of the table border
2.Border color=” color or color name”	Define the border of the table
3.Cell spacing=N	Distance between cells
4.Cell padding	Distance between cell contain and cell border
5.Width =N	Define table width
6.Height =N	Define height of table
7.Calcspar =N	No of cell to be merged in arrow
8.Row span=N	No of cell to be merged in column
9.Big colors= “color name or color code “	Defines the background color of table

Example:

Create a table with following table in HTML document.

SN	Name	City
1	Rani and Raja Corner Team club	Kathmandu
2	Three Star football club	Lalitpur
3	Sahara football club	Pokhara

<html>

<head>

</head>

<body>

<h1> details of the club </h1>

<tr>

</tr>

<tr>

<td> Raja and Rani Corner Team club </td>

<td> Kathmandu </td>

</tr>

<tr>

<td> Three-star Football club </td>

<td> Lalitpur </td>

</tr>

<tr>

<td> Shahara football club </td>

<td> Pokhara </td>

</tr>

</table>

</body>

</html>

Frames:
HTML <frames> tag defined the particular area within an HTML file where another HTML web page can be displayed.
syntax:
<frame src = “url”>

Form

Form is a graphical interface on webpage for the users to enter data. /The collection of data.

Form is defined by <form> and the form elements are defined by tag.

<input>

<input> tag

It is the form element to enter text, number, password, radio button, checkbox

Etc.

Text box:

Text box is used to enter the text or number.

E.g.: <input type =”text: size =20

Max length =30>

Radio Button:

It is used for selecting a single option from multiple choice.

E.g.: <input type =” radio “checked =true > Married

<input type =” radio”>Unmarried

Check box:

It allows users to select multiple option from multiple choice.

E.g.:

<input type=” check box” checked =true > movie

<input type =” check box” >music

<input type] =” check box “> travel

Output

movie

music

travel

Password box:

It allow the user to enter password.

E.g.: <input type =” password”

Size =10 max length =5

Name=” password”>

<select> tag

It provides user to select option from given list.

The <select> is used to create a list and the <sub> <option> defines

The items of the list.

E.g.:

Country:<select> size =1>

<option> Nepal </option>

<option> Bhutan </option>

<option> India </option>

</select>

<text area > tag

It allow user to type multiple lines of text on a form.

The <text area> is used to define text area with two attributes row and column.

E.g.:

Comments :<text area rows = 3 cols =20>

You can write comments </text area>

<Button> tag

It allows users to create clickable button.

It is better to use <button> than using <input type =” button”>

E.g.:

Click</button>

Comments

No comments yet. Why don’t you start the discussion?

Class 9 | HTML Elements | Website Design Notes

Comments

Leave a Reply Cancel reply