Scribd
Upload
41 views10 pages

Lab 2.

This document provides information about an HTML lab assignment. It discusses HTML elements, attributes, and formatting. The objective is to learn about HTML attributes and formatting elements. The lab tasks involve practicing examples of HTML elements and attributes, and developing a web page about seasonal fruits using various HTML formatting elements and attributes.

Uploaded by

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

Lab 2.

This document provides information about an HTML lab assignment. It discusses HTML elements, attributes, and formatting. The objective is to learn about HTML attributes and formatting elements. The lab tasks involve practicing examples of HTML elements and attributes, and developing a web page about seasonal fruits using various HTML formatting elements and attributes.

Uploaded by

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

The Islamia University of Bahawalpur

Faculty of Engineering

Department of Computer Systems Engineering

Web Engineering

Session(2017-2021)

LAB 2

NAME: Roll no.

Class: Instructor:

Objective:
To learn the attributes and formatting elements of HTML.

Pre Lab:

 All HTML elements can have attributes


 The href attribute of <a> specifies the URL of the page the link goes to
 The src attribute of <img> specifies the path to the image to be displayed
 The width and height attributes of <img> provide size information for images
 The alt attribute of <img> provides an alternate text for an image
 The style attribute is used to add styles to an element, such as color, font, size, and more
 The lang attribute of the <html> tag declares the language of the Web page
 The title attribute defines some extra information about an element

How to View HTML Source?

Have you ever seen a Web page and wondered "Hey! How did they do that?"

View HTML Source Code:

Right-click in an HTML page and select "View Page Source" (in Chrome) or "View Source" (in
Edge), or similar in other browsers. This will open a window containing the HTML source code
of the page.
Inspect an HTML Element:

Right-click on an element (or a blank area), and choose "Inspect" or "Inspect Element" to see
what elements are made up of (you will see both the HTML and the CSS). You can also edit the
HTML or CSS on-the-fly in the Elements or Styles panel that opens.

An HTML element is defined by a start tag, some content, and an end tag.

HTML Elements

The HTML element is everything from the start tag to the end tag:

<tagname>Content goes here...</tagname>

Examples of some HTML elements:

<h1>My First Heading</h1>


<p>My first paragraph.</p>
Nested HTML Elements

HTML elements can be nested (this means that elements can contain other elements).

All HTML documents consist of nested HTML elements.

The following example contains four HTML elements (<html>, <body>, <h1> and <p>):

Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
Empty HTML Elements

HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element without a closing tag:
Example
<p>This is a <br> paragraph with a line break.</p>
HTML is Not Case Sensitive

HTML tags are not case sensitive: <P> means the same as <p>.

HTML Attributes

 All HTML elements can have attributes


 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes
to:

<a href="https://www.google.com">Visit google</a>

The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path
to the image to be displayed:

Example
<img src="img_nature.jpg">

TYPES OF URL

There are two ways to specify the URL in the src attribute:

1. Absolute URL - Links to an external image that is hosted on another website. Example:
src="https://www.w3schools.com/images/img_girl.jpg".

Notes: External images might be under copyright. If you do not get permission to use it, you
may be in violation of copyright laws. In addition, you cannot control external images; it can
suddenly be removed or changed.

2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not
include the domain name. If the URL begins without a slash, it will be relative to the current
page. Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the
domain. Example: src="/images/img_girl.jpg".

The width and height Attributes

The <img> tag should also contain the width and height attributes, which specifies the width and
height of the image (in pixels):

Example
<img src="img_girl.jpg" width="500" height="600">

The alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an image, if the image
for some reason cannot be displayed. This can be due to slow connection, or an error in
the src attribute, or if the user uses a screen reader.

Example
<img src="img_girl.jpg" alt="Girl with a jacket">

Example

See what happens if we try to display an image that does not exist:

<img src="img_typo.jpg" alt="Girl with a jacket">

The style Attribute

The style attribute is used to add styles to an element, such as color, font, size, and more.

Example
<p style="color:red;">This is a red paragraph.</p>

The lang Attribute

You should always include the lang attribute inside the <html> tag, to declare the language of the
Web page. This is meant to assist search engines and browsers.

The following example specifies English as the language:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

Country codes can also be added to the language code in the lang attribute. So, the first two
characters define the language of the HTML page, and the last two characters define the country.

The following example specifies English as the language and United States as the country:

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

You can see all the language codes in our HTML Language Code Reference.

The title Attribute

The title attribute defines some extra information about an element.

The value of the title attribute will be displayed as a tooltip when you mouse over the element:

Example
<p title="I'm a tooltip">This is a paragraph.</p>

Bigger Headings

Each HTML heading has a default size. However, you can specify the size for any heading with
the style attribute, using the CSS font-size property:

Example
<h1 style="font-size:60px;">Heading 1</h1>

HTML Horizontal Rules

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a
horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML page:


Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

The <hr> tag is an empty tag, which means that it has no end tag.

HTML Line Breaks

The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new paragraph:

Example
<p>This is<br>a paragraph<br>with line breaks.</p>

The HTML <pre> Element

The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it
preserves both spaces and line breaks:

Example
<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.


</pre>

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.
Example

I am Red

I am Blue

I am Big
<!DOCTYPE html>

<html>

<body>

<p>I am normal</p>

<p style="color:red;">I am red</p>

<p style="color:blue;">I am blue</p>

<p style="font-size:50px;">I am big</p>

</body>

</html>

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style="property:value;">

The property is a CSS property. The value is a CSS value.

Background Color

The CSS background-color property defines the background color for an HTML element.

Example
Set the background color for a page to powderblue:

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

Example

Set background color for two different elements:

<body>

<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>

</body>

Text Color

The CSS color property defines the text color for an HTML element:

Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

Fonts

The CSS font-family property defines the font to be used for an HTML element:

Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

Text Size

The CSS font-size property defines the text size for an HTML element:

Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Text Alignment

The CSS text-align property defines the horizontal text alignment for an HTML element:

Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

LAB TASK 1: Practice all examples mentioned in this lab, on VS CODE and
paste the output and source code here.

LAB TASK 2: Following are HTML Formatting Elements

Formatting elements were designed to display special types of text:

 <b> - Bold text


 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

Develop a Web page , Which contains the images of any four seasonal
fruits.

Describe the benefits of each fruit in different paragraphs by applying the


formatting elements and various attributes of HTML.

You might also like