4.1 a, znaczniki href

Cóż, nadal nie zapominamy, że przygotowujemy z Ciebie programistę Java, więc musisz nauczyć się tylko 5 tagów.

Po pierwsze, jest to najważniejszy tag zamieniający tekst w hipertekst - link . Aby utworzyć linki w HTML, używany jest tag <a>(z kotwicy, kotwicy).

Domyślny link wygląda następująco:

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

Gdzie niebieski to tekst, który widzi użytkownik, a zielony to adres (link), do którego przejdzie, jeśli kliknie w tekst linku.

Typowy dokument HTML zawierający linki wygląda następująco:


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

Nie, zwykle wygląda to tak:



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

Świat nie jest doskonały.

4.2 tag img i atrybut src

Aby wstawić obraz na stronę HTML, <img>używany jest znacznik (z obrazu słownego). To jest pojedynczy tag, nie ma tagu zamykającego. Ogólny widok tagu:

<img src="image link">

Wszystko jest bardzo proste. Aby wyświetlić obraz w dokumencie HTML, wystarczy znać łącze do tego obrazu i użyć rozszerzenia img. Spróbuj, spodoba ci się.

4.3 Element tabeli

Ponadto strona HTML może zawierać tabelę z danymi. Ale tutaj nie możesz sobie poradzić z jednym tagiem, jeśli się nad tym zastanowić. W końcu tabela ma nagłówek, wiersze, kolumny i komórki. Wszyscy wymyślili własne tagi:

  • <table>- sam stół;
  • <tr>( table r ow ) – tabela wierszy;
  • <th>( nagłówek tabeli ) – komórka nagłówka tabeli;
  • <td>( dane tabeli ) – komórka tabeli.

Oto jak wyglądałaby tabela 3 na 3 html(z dodatkowym wierszem nagłówka)


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

Chociaż teraz stoły są rzadko używane. Chodzi o to, że podczas przeglądania strony z telefonu przydatne może być wyświetlenie tabeli w inny sposób (po prostu nie mieści się na ekranie). Ale nadal musisz wiedzieć, jak ustawione są stoły.

4.4 Atrybuty id i name

A jeszcze dwa ważne punkty to atrybuty idi name. Są to atrybuty, a nie tagi, ale są bardzo często używane.

idAtrybut znacznika pozwala nadać mu nazwę , która jest unikalna w całym dokumencie . Jest to przydatne, jeśli w dokumencie HTML znajduje się jakiś JavaScript, który zmienia wartość lub parametry danego tagu. Następnie, za pomocą unikalnego, idmożesz dokładnie odnieść się do żądanego tagu.

Atrybut namepełni podobną funkcję, ale jego wartość nie musi być unikalna na stronie. Oznacza to, że teoretycznie może istnieć kilka tagów o tych samych nazwach. Ma to na celu ułatwienie pracy z grupami elementów.

Na przykład na stronie znajduje się kilka list, z których na każdej można wybrać tylko jeden element. Następnie wybierając nowy element na liście należy zresetować wybór pozostałych elementów listy. Ale nie dotykaj innych list. Można to łatwo zrobić, jeśli wszystkie elementy tej samej listy mają tę samą nazwę.

Każdy tag może mieć zarówno atrybuty, idjak i name. Przykład:


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