Insertando Hipervínculos¶
- Los vínculos HTML se definen con la etiqueta
<a>. - El destino del vínculo se define con el atributo
href, el cual se encierra entre comillas. - La etiqueta se cierra usando
</a>.
Creando un hipervínculo:
<a href="http://ejemplo.com">Este es un vínculo</a>
El ejemplo anterior produce un hipervínculo que despliega "Este es un vínculo". Cuando se da click en el vínculo el navegador hace una solicitud al sitio web http://www.ejemplo.com.
Hipervínculos en Rails¶
Cuando usas Ruby on Rails (que se discutirá a detalle posteriormente) puedes incluir código en lenguaje Ruby dentro del marcado HTML. Para incluir Ruby dentro de tu documento HTML debes:
- Darle al nombre del documento una extensión adecuada, como
.html.erb - Poner el código en Ruby entre etiquetas
<%y%> - Usar el signo de igual para desplegar el resultado del código en Ruby dentro de las etiquetas
<%= código a desplegarse %>
- Instalar Ruby on Rails en tu computadora o servidor web para procesar el documento
Por ejemplo:
<%= link_to "Este es un vínculo", "http://www.ejemplo.com" %>
Aquí estamos creando un vínculo que es funcionalmente equivalente al ejemplo anterior con HTML puro. Este vínculo se desplegará en el navegador como "Este es un vínculo". Al darle clic envía una solicitud al servidor que hospeda al sitio web http://www.ejemplo.com. No te preocupes si esto no te hace sentido ahora, lo importante es que entiendas que Ruby - el lenguaje de programación detrás de Ruby on Rails - puede incluirse en un documento HTML.
Estructura de una página HTML¶
Los documentos HTML tienen la siguiente estructura básica:
<html>
<head>
<title>Título de la página</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Tu primer documento HTML</p>
</body>
</html>
Puedes probar este ejemplo en tu computadora copiando y pegando el código de arriba en un editor de texto como el Bloc de Notas en Microsoft Windows y guardándolo como first.html.
Puedes abrir ahora el archivo en tu navegador favorito dando doble clic al documento o desde el menú del navegador.
Descifrando la estructura de una página HTML¶
- Los documentos HTML comienzan con la etiqueta de inicio
<html>y terminan con la etiqueta de fin</html>. - La sección
<head>se usa para almacenar meta-información que literalmente significa información acerca de la información. - El contenido de la etiqueta
<title>se despliega en la barra de título del navegador. - El contenido de la sección
<body>se despliega en la ventana del navegador.
Encabezados HTML¶
- Los encabezados HTML se definen usando las etiquetas
<h1>a<h6>. - El contenido entre una etiqueta de encabezado inicial y una etiqueta de encabezado final se conoce como Contenido del Elemento. En el ejemplo de arriba, la etiqueta
<h1>tag tiene “Hola Mundo” como su Contenido del Elemento. - Las etiquetas de encabezado deben usarse para definir el marcado de una manera semántica. Por ejemplo:
<h1>Encabezado de página</h1>
<h2>Categoría #1</h2>
<h3>Sub Categoría #1</h3>
<h3>Sub Categoría #2</h3>
<h2>Categoría #2</h2>
<h3>Sub Categoría #1</h3>
<h3>Sub Categoría #2</h3>
Párrafos HTML¶
- Los párrafos HTML se definen con la etiqueta
<p>. - Asegúrate de recordar la etiqueta final:
<p>Esto es correcto</p> <p>Esto es incorrecto