Course Модул 3 - Lecture: Популярни HTML тагове

4.1 a, href тагове

Е, все пак не забравяме, че подготвяме Java програмист от вас, така че трябва да научите само 5 тагова.

Първо, това е най-важният таг, който превръща текста в хипертекст - връзка . За създаване на връзки в HTML се използва таг <a>(от anchor, котва).

Връзката по подразбиране изглежда така:

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

Където синьо е текстът, който потребителят вижда, а зелено е addressът (връзката), до който ще отиде, ако кликне върху текста на линка.

Типичен HTML document, съдържащ връзки, изглежда така:


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

Не, обикновено изглежда така:



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

Светът не е идеален.

4.2 img таг и src атрибут

За да вмъкнете изображение в HTML page, се използва таг <img>(от думата изображение). Това е един таг, той няма затварящ таг. Общ изглед на етикета:

<img src="image link">

Всичко е много просто. За да покажете изображение във вашия HTML document, просто трябва да знаете връзката към това изображение и да използвате img. Опитайте, ще ви хареса.

4.3 Елементът table

Освен това една HTML page може да съдържа table с данни. Но тук не можете да минете с един етикет, ако се замислите. В крайна сметка tableта има заглавка, редове, колони и клетки. Всички измислиха свои собствени етикети:

<table>- самата маса;
<tr>( table r row ) – ред table;
<th>( t table h header) – клетка за заглавка на table;
<td>( t table data ) – клетка на table.

Ето How би изглеждала table 3 на 3 html(с допълнителен заглавен ред)


<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>

Въпреки че сега масите се използват рядко. Работата е там, че когато разглеждате page от телефон, може да е полезно tableта да се покаже по различен начин (тя просто не се побира на екрана). Но все пак трябва да знаете How са подредени масите.

4.4 id и name атрибути

И още две важни точки са атрибутите idи name. Това са атрибути, а не тагове, но се използват много често.

Атрибутът на idетикета ви позволява да му дадете име , което е уникално в рамките на целия document . Това е полезно, ако има няHowъв JavaScript в HTML documentа, който променя стойността or параметрите на дадения таг. След това, с помощта на уникален, idможете точно да се обърнете към желания етикет.

Атрибутът nameизпълнява подобна функция, но стойността му не е необходимо да бъде уникална в рамките на pageта. Тоест теоретично може да има няколко етикета с еднакви имена. Това се прави, за да се улесни работата с групи от елементи.

Например, на една page има няколко списъка, във всеки от които можете да изберете само един елемент. След това, когато избирате нов елемент в списъка, трябва да нулирате избора на останалите елементи от списъка. Но не докосвайте други списъци. Това може лесно да се направи, ако всички елементи от един и същ списък имат едно и също име.

Всеки таг може да има Howто атрибути, idтака и name. Пример:


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