Attributes and Hyperlinks: HTML Class Notes

Updated: Aug 17

Mobiprep has created last-minute notes for all topics of HTML to help you with the revision of concepts for your university examinations. So let’s get started with the lecture notes on HTML.

  1. HTML Introduction

  2. HTML Tags and Elements

  3. Attributes and Hyperlinks

  4. Headings and Lists

  5. Class and id attributes

  6. Semantic Elements

  7. Inline and Block-Level Elements

  8. Div and Span

  9. Img

  10. Tables

  11. Forms

Our team has curated a list of the most important questions asked in universities such as DU, DTU, VIT, SRM, IP, Pune University, Manipal University, and many more. The questions are created from the previous year's question papers of colleges and universities.

  1. HTML

  2. Attributes

  3. Title attribute

  4. Lang attribute

  5. Hyperlink

  6. Absolute vs Relative URL

  7. Style attribute

  8. Color attribute

  9. HEX,RGB,HSL colors

  10. Bookmark

  11. Id attribute

  12. Give a short note on HTML Attributes.

  13. Why do we need Attributes in HTML?

  14. Can attributes be modified dynamically?

  15. Give a short note on the title and lang attributes in HTML.

  16. Define Hyperlinks.


Attributes and Hyperlinks


Question- 1) HTML

Answer: Hyper Text Markup Language in short HTML, is a language used to create web pages.


 

Question- 2) Attributes

Answer: HTML attributes are special words used inside the opening tag to control the element's behavior, providing additional information about HTML elements.

All HTML elements can have attributes. Attributes are always specified in the start tag. All attributes are made up of two parts − a name and a value. The name is the property you want to set and the value is what you want the value of the property to be set and always put within quotations.

They look something like <tag attribute="value">content</tag>.

As attributes define the behavior of the elements, it is necessary in HTML.

For example for the body tag we have the following attributes-

Attribute Description

alink Color of text for selected hyperlinks

background Image to be used a background

bgcolor Background color

link Color of text for unvisited hyperlinks

We can change the attributes dynamically as well!

Here’s an example for changing the color and background-color of heading element using javascript..-

<!DOCTYPE HTML>  
<html>  
<head>  
<title>  
            How to change the background color 
            after clicking the button ? 
</title> 
</head>  
      
 <body style = "text-align:center;"> 
           
  <h1 style = "color:black;" >  
            Rootworks  
   </h1>  
          
  <p id = "GFG_UP" style = 
            "font-size: 16px; font-weight: bold;">      
   </p> 
          
   <button onclick = "gfg_Run()">  
            Click here 
   </button> 
          
   <p id = "GFG_DOWN" style = 
            "color:green; font-size: 20px; font-weight: bold;"> 
   </p> 
          
   <script> 
            var el_up = document.getElementById("GFG_UP"); 
            var el_down = document.getElementById("GFG_DOWN"); 
            var str = "Click on button to change the background color"; 
          
            el_up.innerHTML = str; 
          
            function changeColor(color) { 
                document.body.style.background = color; 
            } 
              
            function gfg_Run() { 
                changeColor('pink'); 
                el_down.innerHTML = "Background Color changed"; 
            }          
</script>  
</body>  
</html>   


example in HTML

Example in HTML

 

Question- 3) Title attribute

Answer: The title attribute specifies extra information about an element.

The information is most often shown as a tooltip text when the mouse moves over the element. The title attribute is part of the Global Attributes, and can be used on any HTML element.

Syntax -

<element title = "text">
Use of title attribute-
<html> 
  
<head> 
<title>title attribute</title> 
<style> 
        body { 
            text-align: center; 
        } 
          
        h1 { 
            color: green; 
        } 
</style> 
</head> 
  
<body> 
<h1>RootWorks</h1> 
<h2>title attribute</h2> 
  
<p title="RootWorks: A computer science  
        portal for learning"> 
      RootWorks 
</p> 
</body> 
  
</html> 
example title attribute in HTML

 

Question- 4) Lang attribute

Answer: The HTML lang attribute is used to identify the language of text content on the web. The lang attribute takes an ISO language code as its value. Typically this is a two letter code such as “en” for English, but it can also be an extended code such as “en-gb” for British English. Common examples are "en" for English, "es" for Spanish, "fr" for French, and so on.

Syntax-

<element lang="language_code">
Use of lang attribute-
<html> 
<head> 
<title>lang attribute</title> 
<style> 
            body { 
                text-align:center; 
            } 
            h1 { 
                color:green; 
            } 
        </style> 
 </head> 
 <body> 
 <h1>RootWorks</h1> 
 <h2>lang attribute</h2> 
          
<p lang = "en">A computer science portal</p> 
</body> 
</html> 

Example Lang attribute in HTML

 

Question- 5) Hyperlink

Answer: A hyperlink is a word, phrase, or image that you can click on to jump to a new document or a new section within the current document. Hyperlinks are found in nearly all Web pages, allowing users to click their way from page to page.

The HTML <a> tag defines a hyperlink. It has the following syntax: <a href="url">link text</a> The most important attribute of the <a> element is the href attribute, which indicates the link's destination. The link text is the part that will be visible to the reader.

To create a hyperlink in HTML use the <a href> tag around the text you would like to link. The href attribute will point to the desired address. When you're building a webpage, you may want to reference another web page or website.

<a> tag-

The <a> tag defines a hyperlink, which is used to link from one page to another.

The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue

A visited link is underlined and purple

An active link is underlined and red

Src attribute-

The purpose of the HTML src attribute is to specify a URI for an external file or resource. HTML src attribute supports frame, iframe, img, input and script elements.

Syntax-

<ElementName src="value" >.....</ElementName>
Example of src attribute-
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of HTML src attribute with img element</title>
</head>
<body> 
<p><img src="D:/media/photos/backgrounds/images.jpeg" alt="alteratee" /></p>
</body>
</html>
Example Hyperlink of HTML

 

Question- 6) Absolute vs Relative URL

Answer: An absolute URL contains all the information necessary to locate a resource. A relative URL locates a resource using an absolute URL as a starting point. In effect, the "complete URL" of the target is specified by concatenating the absolute and relative URLs.

An absolute URL uses the following format: scheme://server/path/resource

A relative URL typically consists only of the path, and optionally, the resource, but no scheme or server.

Target attribute-

The target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

The target attribute defines a name of, or keyword for, a browsing context (e.g. tab, window, or inline frame).

Syntax-

<form target="_blank|_self|_parent|_top|framename">
Use of target attribute-
<form action="/action_page.php" method="get" target="_blank">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

Example of HTML

 

Question- 7) Style attribute

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

etting 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;">

Example-setting bg 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>


example of html

 

Question- 8) Color attribute

Answer: HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

You can set the background color for HTML elements:

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

You can set the color of text:

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

You can set the color of borders:

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>


 

Question- 9) HEX,RGB,HSL colors

Answer: Colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values. Color conversion can be done using the following table-


 

Question- 10) Bookmark

Answer: Bookmarks in HTML, also known as named anchors, will help you direct visitors to specific parts of your Web page. HTML bookmarks are practical if your business website has long pages. HTML links can be used to create bookmarks, so that readers can jump to specific parts of a web page.

 

Question- 11) Id attribute

Answer: The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.

Use of id attribute-

<html>
<body>
 
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
 
<script>
function displayResult() {
    document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
 
</body>
</html>

 

Question- 12) Give a short note on HTML Attributes.

Answer:

  1. HTML attributes are special words which provide additional information about the elements or attributes are the modifier of the HTML element.

  2. Each element or tag can have attributes, which defines the behaviour of that element.

  3. Attributes should always be applied with start tag.

  4. The Attribute should always be applied with its name and value pair.

  5. The Attributes name and values are case sensitive, and it is recommended by W3C that it should be written in Lowercase only.

  6. You can add multiple attributes in one HTML element, but need to give space between two attributes.

Syntax

<element attribute_name="value">content</element>

 

Question- 13) Why do we need Attributes in HTML?

Answer: An attribute is a specification that defines a property of an object, element, or file. It may also refer to or set the specific value for a given instance of such. For clarity,attributes should more correctly be considered metadata.


 

Question- 14) Can attributes be modified dynamically?

Answer: We can modify it by using JavaScript

syntax

document.getElementByTagName("tag name").setAttribute("attribute name", "value");


 

Question- 15) Give a short note on the title and lang attributes in HTML.

Answer: The title attribute is used as text tooltip in most of the browsers. It display its text when user move the cursor over a link or any text. You can use it with any text or link to show the description about that link or text. In our example, we are taking this with paragraph tag and heading tag.


Example

With <h1> tag:
<h1 title="This is heading tag">Example of title attribute</h1>


 

Question- 16) Define Hyperlinks.

Answer: A hyperlink is an element in an HTML document that links to either another portion of the document or to another document altogether. On webpages, hyperlinks are usually colored purple or blue and are sometimes underlined.


The href attribute is the main attribute of <a> anchor tag. This attribute gives the link address which is specified in that link. The href attribute provides the hyperlink, and if it is blank, then it will remain in same page.


Example

With link address:

<a href="https://www.javatpoint.com/html-anchor">This is a link</a>


 





1 view0 comments

Recent Posts

See All