coding180 icon

Coding180

HTML Element: Same page link <a>

HTML Element: Same page link <a>

Tutorials > HTML > Anchor Elements


Another possibility offered by HTML is to have a reference/link to a particular section on the same page using anchor link <a>.

It is a common practice when we want to scroll within a large page. Hyperlinks to different anchors are provided.

The syntax to define an anchor is:

<a name="anchorname"></a> 

We must not confuse an anchor with a hyperlink, beyond that the same element is used.

For an anchor, we initialize the name property with the name of the anchor.

An anchor is defined in a part of the page that we want the operator to reach from a hyperlink.

Now, the syntax to go to an anchor from a hyperlink is as follows:

<a href="#anchorname">Introduction</a>

We see that in the href property we indicate the name of the anchor.

We will do an example, where we will have a list of hyperlinks that call a series of anchors arranged on the same page:

<!DOCTYPE html>
<html>

<head>
    <title>Same Page Link - coding180.com</title>
    <meta charset="UTF-8">
</head>

<body>
    <h1>MySQL Tutorial</h1>
    <a href="#introduction">Introduction</a><br>
    <a href="#showdatabase">show databases</a><br>
    <a href="#tablecreation">Creating a table and displaying its fields</a><br>
    <a href="#loadrecords">Loading records to a table and retrieving them</a><br>
    <a name="introduction"></a>
    <h2>Introduction</h2>
    <p>
        SQL, Structure Query Language, is a programming language for
        work with relational databases like MySQL, Oracle, etc.<br>
        MySQL is a SQL interpreter, it is a database server.<br>
        MySQL allows you to create databases and tables, insert data,
        modify them, delete them, order them,
        make queries and perform many operations, etc., in short:
        manage databases.<br>
        Entering instructions on the command line or embedded
        in a language like PHP we communicate
        with the server. Each statement must end with a semicolon (;).<br>
        The sensitivity to uppercase and lowercase, that is,
        if it makes a difference between them, depends on the
        operating system, Windows is not sensitive, but Linux is.
        For example, Windows also interprets
        the following statements:<br>
        create database administration;<br>
        Create Database administration;<br>
        But Linux will interpret the second as an error.<br>
        It is recommended to always use lowercase. Moreover, the
        site mysqlya.com.ar is installed on a server
        Linux so all exercises must be case sensitive.
    </p>
    <a name="showdatabase"></a>
    <h2>show databases</h2>
    <p>
        A database is a set of tables.<br>
        A database has a name with which we will access it.<br>
        We are going to work on a database already created on the
        site, called "administration".<br>
        For the server to show us the existing databases,
        we request it by sending the instruction:<br>
        show databases;<br>
        It will show us the names of the databases, it
        should appear in this site "administration".<br>
    </p>
    <a name="tablecreation"></a>
    <h2>Create a table and display its fields</h2>
    <p>
        A database stores its data in tables.<br>
        A table is a data structure that organizes data into
        columns and rows; each column is a field
        (or attribute) and each row, a record. The intersection
        of a column with a row contains a data
        specific, single value.<br>
        Each record contains one data for each column of the table.<br>
        Each field (column) must have a name. The name of the field
        refers to the information that
        will store.<br>
        Each field (column) must also define the type of data it will store.<br>
    </p>
    <a name="loadrecords"></a>
    <h2>Loading records to a table and retrieving them</h2>
    <p>
        We use "insert into". We specify the names of the fields in
        parentheses and separated by commas
        and then the values ​​for each field, also enclosed in parentheses
        and separated by commas.<br>
        It is important to enter the values ​​in the same order in which
        the fields are named, if we enter
        the data in another order, an error message does not appear,
        and the data is saved as
        incorrect.<br>
        Note that the entered data, as they correspond to character
        string fields, are placed
        between single quotes. Single quotes are REQUIRED.
    </p>
</body>

</html>

Each hyperlink refers to an anchor that is on the same page:

<a href="#introduction">Introduction</a><br>
<a href="#showdatabase">show databases</a><br>
<a href="#tablecreation">Creating a table and displaying its fields</a><br>
<a href="#loadrecords">Loading records to a table and retrieving them</a><br>

Then the definition of the anchors are:

<a name="introduction"></a>
<h2>Introduction</h2>

As we can see, the definition of the anchor is made immediately before the title where we want the browser to be located.


user

Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

Skills
  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel