HTML LINKS: colors and more

Create Bookmarks using Links

HTML links are used to create bookmarks, this helps readers jump to specific parts of a web page making navigation easy especailly for long web pages. After a is bookmark is created a link is added to it. A bookmark is created using the id attribute.

    •  
<!DOCTYPE html>
<html>    
    <head>     
        <title>BOOKMARK</title>
    </head>     
    <body>
        <h1 id="f3">Paragraph Three </p>     
        <a href = "#f1" >jump to Paragraph One </a>
    </body> 
</html>

    as shown in the example, the link can be added to any page and when clicked on takes you to the first page. when linking from a diffeerent page itis not only the like that is putbut the name of the page: <a href="homepage.htmlf1"<Jump to first page </a> </p>

    HTML Links - The target Attribute

      The target attribute specifies where to open the linked document. The target attribute can have one of the following values:

    • Default- Opens the document in the same window/tab as it was clicked
    • Blank - Opens the document in a new window or tab
    • Parent - Opens the document in the parent frame
    • Top - Opens the document in the full body of the window 
    • <!DOCTYPE html>
<html>    
    <head>     
        <title>target</title>
    </head>     
    <body>
        <a href = "f1"  target="_blank">jump to first page </a>
    </body> 
</html>

    HTML Links - Use an Image as a Link

      To use an image as a link, just put the <img> tag inside the <a> tag

    • <!DOCTYPE html>
<html>    
    <head>     
        <title>image and link</title>
    </head>     
    <body>    
        <a href ="#"><img src="turlip.jpg"> </a>
    </body> 
</html>

    Link to an Email Address

      Use mailto: inside the href attribute to create a link that opens the user's email program (to let them send a new email):

    •  
<!DOCTYPE html >
<html>    
    <head>     
        <title>email as link</title>
    </head>     
    <body>    
        <a href = "mailto:datikvahworld@example.com" >send a mail </a>
    </body> 
</html>

    Button as a Link

      Before button tag can be used a a link, some Javascript functions has to be included JavaScript gives you the option to specify what happens at certain events, such as a click of a button

    •       
<!DOCTYPE html>
<html>    
    <head>     
        <title>button</title>
    </head>     
    <body>
        <button onclick="#">css work page</button>
    </body> 
</html>

    Hint: Learn more about JavaScript

    Link Titles

      The title attribute gives added information about an element.The information is most often shown as a tooltip text when the mouse moves over the element.

    •       
<!DOCTYPE html >
<html>    
    <head>     
        <title>title </title>
    </head>     
    <body>
        < a href="https://www.daktivahworld.com/html/" 
        title="Go to daktivah academia"> HTML Tutorial </a>
        </body>  
</html>

    Popular tags

    HTML Forms HTML Table HTML List HTML Video HTML Image

    Dess App

    DessApp is an Integrated E-learning Education, Interactive and User-friendly features, smarter options and redefining your school costs effectively and efficiently.

    View
    1 1