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="[Link] 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="[Link] 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\[Link]" 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 “[Link]”.
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