Course Module 3. Java Professional - Lecture: Popular HTML tags

4.1 a, href tags

Well, we still do not forget that we are preparing a Java programmer out of you, so you only need to learn 5 tags.

Firstly, this is the most important tag that turns text into hypertext - link . To create links in HTML, a tag <a>(from anchor, anchor) is used.

The default link looks like:

<a href="link-address">link text</a>

Where blue is the text that the user sees, and green is the address (link) to which he will go if he clicks on the text of the link.

A typical HTML document containing links looks like this:

<html>
    plain text
        <a href="http://codegym.cc/about">
            Link to something interesting
          </a>
     some other text...
</html>

No, it usually looks like this:

<html>
    plain text  <a href="http://codegym.cc/about">Link to something interesting</a> some other text...
</html>

The world is not perfect.

4.2 img tag and src attribute

To insert an image into an HTML page, a tag <img>(from the word image) is used. This is a single tag, it does not have a closing tag. General view of the tag:

<img src="image link">

Everything is very simple. To display an image in your HTML document, you just need to know the link to that image and use the img. Try it, you'll like it.

4.3 The table element

Also, an HTML page can contain a table with data. But here you can’t get by with one tag, if you think about it. After all, a table has a header, rows, columns, and cells. They all came up with their own tags:

<table>- the table itself;
<tr>( t able r ow) – row table;
<th>( t able h header) – table header cell;
<td>( t able data ) – table cell.

Here's what a 3 by 3 table would look like html(with an extra header row)

<table>
    <tr> <th>Surname</th> <th>Name</th> <th>Surname</th> </tr>
    <tr> <td>Ivanov</td> <td>Ivan</td> <td>Ivanovich</td> </tr>
    <tr> <td>Petrov</td> <td>Peter</td> <td>Peterovich</td> </tr>
    <tr> <td>Sidorov</td> <td>Kolia</td> <td>Sidorenko</td> </tr>
</table>

Although now tables are rarely used. The thing is that when viewing a page from a phone, it can be useful to display the table in a different way (it simply does not fit on the screen). But you still need to know how the tables are arranged.

4.4 id and name attributes

And two more important points are the idand attributes name. These are attributes, not tags, but they are used very often.

idThe tag attribute allows you to give it a name that is unique within the entire document . This is useful if there is some JavaScript in the HTML document that changes the value or parameters of the given tag. Then, with the help of unique, idyou can accurately refer to the desired tag.

An attribute nameperforms a similar function, but its value need not be unique within the page. That is, theoretically, there can be several tags with the same names. This is done to make it easier to work with groups of elements.

For example, on a page there are several lists in each of which you can select only one item. Then, when selecting a new element in the list, you need to reset the selection of the remaining elements of the list. But do not touch other lists. This can be easily done if all elements of the same list have the same name.

Any tag can have both attributes idand name. Example:

<img id="image123" name="avatar" src="link to picture">