Scribd
Upload
5 views4 pages

Topic 3

The document provides an overview of various HTML attributes, including href, src, width, height, alt, style, lang, and title, explaining their purpose and usage. It includes examples for each attribute to illustrate how they are implemented in HTML code. Additionally, it outlines an activity for users to apply these attributes in their own web pages.

Uploaded by

Jhon Anthony Catinoy
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
5 views4 pages

Topic 3

The document provides an overview of various HTML attributes, including href, src, width, height, alt, style, lang, and title, explaining their purpose and usage. It includes examples for each attribute to illustrate how they are implemented in HTML code. Additionally, it outlines an activity for users to apply these attributes in their own web pages.

Uploaded by

Jhon Anthony Catinoy
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/ 4

Topic 3.

HTML Attributes
 The href attribute  The alt attribute
 The src attribute  The style attribute
 The width and height attributes  The lang attribute
 The title attribute

HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

The href Attribute


HTML links are defined with the <a> tag. The link address is specified in the href attribute:
Example
<a href="https://www.w3schools.com">This is a link</a>
<!DOCTYPE html>
<html>
<body>
<h2>The href Attribute</h2>
<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>
<a href="https://www.w3schools.com">This is a link</a>
</body>
</html>

The src Attribute


HTML images are defined with the <img> tag.
The filename of the image source is specified in the src attribute:
Example
<img src="img_girl.jpg">
<!DOCTYPE html>
<html>
<body>
<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag, and the filename of the image source is specified in the src
attribute:</p>
<img src=" C:\Users\jhon\Desktop\HANDOUTS\PIC.jpg" width="500" height="600">
</body>
</html>

The width and height Attributes


Images in HTML have a set of size attributes, which specifies the width and height of the image:
Example
<img src="img_girl.jpg" width="500" height="600">
The image size is specified in pixels: width="500" means 500 pixels wide.

The alt Attribute


The alt attribute specifies an alternative text to be used, when an image cannot be displayed.
1|Page-JACC
The value of the attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a
blind person, can "hear" the element.
Example
<img src="img_girl.jpg" alt="Girl with a jacket">
The alt attribute is also useful if the image does not exist:
<!DOCTYPE html>
<html>
<body>

<h2>The alt Attribute</h2>


<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding
of what the image contains:</p>

<img src="img_girl.jpg" alt="Arpan Activity" width="500" height="600">

</body>
</html>

The style Attribute


The style attribute is used to specify the styling of an element, like color, font, size etc.
Example
<p style="color:red">I am a paragraph</p>

The lang Attribute


The language of the document can be declared in the <html> tag.
The language is declared with the lang attribute.
Declaring a language is important for accessibility applications (screen readers) and search engines:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
The first two letters specify the language (en). If there is a dialect, use two more letters (US).

The title Attribute


Here, a title attribute is added to the <p> element. The value of the title attribute will be displayed as a tooltip
when you mouse over the paragraph:
Example
<p title="I'm a tooltip">
This is a paragraph.
</p>
Activity 2:
Using your Activity number 2, do the following:
a. Add your personal picture in your pre-created web page (Activity Number 2).
b. Create an HTML link with the name “www.unknownpage.com”.
c. Change the size of the image to 250 pixels wide and 400 pixels tall.
d. If the image (your picture) does not exist. Specify the alternate text to “ The picture is Missing”.
e. Declare English language in your html document.

2|Page-JACC
SATISFACTORILY PARTIALLY UNSATISFACTORILY
CATEGORY
( 5) SATISFACTORILY (3) (1)
Using HTML Codes Used all HTML codes as Skipped one or two Missed a few more
required. HTML codes. HTML codes.
Content The HTML displayed One or two lines of the Few more lines do not
correctly in the web HTML document does display correctly; some
browser. not display properly in areas of the page are
the web browser. distorted in the web
browser.
Following directions Followed all directions Missed one or two Missed three or more
accordingly. directions. directions.

Use of HTML Attributes Used all the required Few of the required Missed three or more
elements correctly. elements were used required elements.
correctly.

3|Page-JACC
4|Page-JACC

You might also like