4.1 a, etiquetas href

Bueno, aún no olvidamos que estamos preparando un programador de Java de usted, por lo que solo necesita aprender 5 etiquetas.

En primer lugar, esta es la etiqueta más importante que convierte el texto en un enlace de hipertexto . Para crear enlaces en HTML, <a>se utiliza una etiqueta (de ancla, ancla).

El enlace predeterminado se parece a:

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

Donde azul es el texto que ve el usuario, y verde es la dirección (enlace) a la que irá si hace clic en el texto del enlace.

Un documento HTML típico que contiene enlaces tiene este aspecto:


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

No, por lo general se ve así:



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

El mundo no es perfecto.

4.2 etiqueta img y atributo src

<img>Para insertar una imagen en una página HTML, se utiliza una etiqueta (de la palabra imagen). Esta es una etiqueta única, no tiene una etiqueta de cierre. Vista general de la etiqueta:

<img src="image link">

Todo es muy simple. Para mostrar una imagen en su documento HTML, solo necesita conocer el enlace a esa imagen y usar la extensión img. Pruébalo, te gustará.

4.3 El elemento de mesa

Además, una página HTML puede contener una tabla con datos. Pero aquí no puedes arreglártelas con una etiqueta, si lo piensas. Después de todo, una tabla tiene un encabezado, filas, columnas y celdas. A todos se les ocurrió sus propias etiquetas:

  • <table>- la mesa en sí;
  • <tr>( fila de tabla ) – tabla de fila;
  • <th>( encabezado de la tabla h ) – celda del encabezado de la tabla;
  • <td>( datos de la tabla) – celda de la tabla.

Así es como se vería una tabla de 3 por 3 html(con una fila de encabezado adicional)


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

Aunque ahora las tablas rara vez se usan. Lo que pasa es que al ver una página desde un teléfono, puede ser útil mostrar la tabla de otra manera (simplemente no cabe en la pantalla). Pero aún necesita saber cómo están dispuestas las mesas.

4.4 Atributos de id y nombre

Y dos puntos más importantes son los atributos idy name. Estos son atributos, no etiquetas, pero se usan con mucha frecuencia.

El atributo idde etiqueta le permite darle un nombre que es único dentro de todo el documento . Esto es útil si hay algo de JavaScript en el documento HTML que cambia el valor o los parámetros de la etiqueta dada. Luego, con la ayuda de Unique, idpuede referirse con precisión a la etiqueta deseada.

Un atributo namerealiza una función similar, pero su valor no necesita ser único dentro de la página. Es decir, en teoría, puede haber varias etiquetas con los mismos nombres. Esto se hace para facilitar el trabajo con grupos de elementos.

Por ejemplo, en una página hay varias listas en cada una de las cuales puede seleccionar solo un elemento. Luego, al seleccionar un nuevo elemento en la lista, debe restablecer la selección de los elementos restantes de la lista. Pero no toques otras listas. Esto se puede hacer fácilmente si todos los elementos de la misma lista tienen el mismo nombre.

Cualquier etiqueta puede tener atributos idy name. Ejemplo:


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