Web.HTML.Etiquetas Básicas.
Títulos y Encabezados de Texto.
Se utilizan para definir el título de texto o un párrafo y se añade con la etiqueta <h>. Existen 6 tipos de encabezados, cual mayor sea el número menor es el tamaño de la letra:
<!DOCTYPE html>
<html>
<body>
<h1>Encabezado1</h1>
<h2>Encabezado2</h2>
<h3>Encabezado3</h3>
<h4>Encabezado4</h4>
<h5>Encabezado5</h5>
<h6>Encabezado6</h6>
</body>
</html>Párrafos.
Son bloques de texto o párrafos que se pueden añadir en una página. Se agrega con la etiqueta <p>:
<!DOCTYPE html>
<html>
<body>
<p>Primer párrafo.</p>
<p>Segundo párrafo.</p>
<p>Tercer párrafo.</p>
</body>
</html>Los párrafos tienen un inconveniente, que escriben hasta el final del margen del navegador y es ahí cuando hacen el salto de línea, es decir, que no respeta ni espacios, ni saltos de lineas ni tabulaciones ni nada, lo muestra en el navegador todo seguido. Un ejemplo:
<!DOCTYPE html>
<html>
<body><p>El párrafo
varios saltos de línea
pero el navegador no hace ni caso.
</p><p>
Este párrafo contiene espacios
pero el navegador no hace caso.
</p></body>
</html>
Los saltos de líneas podrían solucionarse con la etiqueta <br>.
Saltos de Líneas.
Se agrega con la etiqueta <br>. Con ésta etiqueta pasa lo mismo que con <img>, no necesita cerrarse. Un ejemplo:
<!DOCTYPE html>
<html>
<body> <p>Esto es<br>un párrafo<br>en varias líneas</p></body>
</html>
Texto Preformateado.
Cuando se quiera crear texto con espacios, saltos de líneas, tabulaciones… y el navegador lo visualice correctamente, se hace con la etiqueta <pre>. Usando el ejemplo de los párrafos:
<!DOCTYPE html>
<html>
<body><pre>El párrafo
varios saltos de línea
pero el navegador no hace ni caso.
</pre><pre>
Este párrafo contiene espacios
pero el navegador no hace caso.
</pre></body>
</html>
En este caso el navegador lo interpretaría de forma correcta, respectando espacios, saltos de líneas, tabulaciones…etc.
Enlaces.
Son links o enlaces que al hacer clic en éstos, se va a otra página web. Se agrega con la etiqueta <a>:
<!DOCTYPE html>
<html>
<body>
<a href="https://www.google.es">Vete a google</a>
</body>
</html>#La propiedad href="" se utiliza para indicar a que lugar irse cuando se hace clic.
Existen otras propiedades que se pueden usar, por ejemplo target.. Un ejemplo:
<!DOCTYPE html>
<html>
<body><a href="https://www.bing.com/" target="_blank">Visita bing</a></body>
</html>
- blank . Abre el enlace en una nueva pestaña.
- self. Abre el enlace en la misma pestaña o ventana donde se ha hecho clic.
- parent. Abre el enlace en el mismo marco donde se ha hecho clic.
- top . Abre el enlace en la ventana principal del navegador.
Imágenes.
Sirve para insertar imágenes en una página. Se agrega con la etiqueta <img>:
<!DOCTYPE html>
<html>
<body> <img src="imagen.jpg" alt="No puedo mostrar nada" width="104" height="142"></body>
</html>
En las etiquetas que se ha visto hasta ahora se ha tenido la apertura y el cierre, pero existen excepciones, como puede ser <img>. Si se observa el ejemplo, no tiene cierre, simplemente se hace cerrando con el corchete.
A la hora de agregar imágenes, se puede usar unas propiedades que se van a definir a continuación:
- src. De la siglas source, es decir, en mi idioma quiere decir fuentes. Aquí se especifica la imagen que se va utilizar. Se puede usar rutas si se desea.
<img src="/images/imagen.jpg" alt="No puedo mostrar nada" width="104" #Usando rutas absolutas.<img src="imagen/html/imagen.jpg" alt="No puedo mostrar nada" width="104" #Usando rutas relativas.<img src="https://servidor.com/imagen/imagen.jpg" alt="No puedo mostrar nada" width="104" #Usando imágenes en otro servidor.
- alt. Cuando existe algún problema y la imagen no se puede mostrar correctamente, muestra el texto que se ponga en esta propiedad.
- width. Ancho de la imagen en píxeles.
- height. Alto de la imagen en píxeles.
Se pueden mezclar cosas, por ejemplo ¿Como se puede hacer una imagen, que al hacer clic se vaya a un enlace de una página?:
<!DOCTYPE html>
<html>
<body><a href="https://www.bing.com">
<img src="imagen.gif">
</a></body>
</html>
Basta con hacer la etiqueta <a> para crear el enlace y dentro de éste usar una etiqueta <img>, de forma que al hacer clic en la imagen se va a la página.
Dibujar Líneas Horizontales.
Se crea con la etiqueta <hr>. Aquí pasa lo mismo que con <br>, ya que no necesita cierre de etiqueta. Un ejemplo:
<!DOCTYPE html>
<html>
<body> <h1>Encabezado tipo 1.</h1>
<p>Texto de párrafo.</p>
<hr> <h2>Encabezado tipo 2.</h2>
<p>Texto de párrafo.</p>
<hr> <h2>Encabezado tipo 3.</h2>
<p>Texto de párrafo.</p></body>
</html>
