HTML- Etiquetas Básicas
Puntos a tocar:
1. Etiquetas para dar formato a un texto
2. Etiquetas para dar formato a párrafos
3. Etiquetas para creacion de listas
4. Lineas horizontales separadoras
5. Etiquetas para insertar imagenes
6. Etiquetas para creacion de enlaces
7. Ejemplo
Intro:
En este post voy a colocar las etiquetas básicas, que son usadas en html y que nos sirven para cambiar la forma en que veremos el texto, agregar imagenes, formatear la forma en que se vera un parrafo, entre otros.
1. Etiquetas para dar formato a un texto
Nota:
<font color=”#FFFFFF”> </font> define el color del texto. Ahora para definir que color tendra, se tienen dos formas, se puede colocar el nombre del color, o su codigo hexadecimal. Aqui tienes el enlace a la TABLA DE COLORES DE HTML.
2. Etiquetas para dar formato a párrafos
3. Etiquetas para creacion de listas
Bien existen tres tipos de listas a continuacion describire los tipos de listas, y las etiquetas que son usadas para la creacion de cada una.
- Lista no numerada: Las listas no numeradas tal como lo dice el tipo, no poseen numeros que señalen nada, sino una viñeta. La sintaxis que es usada para crear estas listas es la siguiente. Donde <ul> crea la lista, y <li> sirve para agregar cualquier numero de elementos a la lista.
<ul> abre una lista enumerada
<li>primer elemento de la lista</li>
<li>segundo elemento de la lista</li>
<li>tercer elemento de la lista</li>
</ul> cierra la lista no enumerada - Lista Numerada: La lista numerada se diferencia de la anterior en que no tiene viñetas sino numeros o letras.
<ol> Abre una lista numerada
<li>primer elemento de la lista</li>
<li>segundo elemento de la lista</li>
</ol> cierra la lista. - Lista de definiciones: Esta lista sirve generalmente para realizar glosarios. A continuacion se presenta su estructura, en donde dl define que estamos creando una lista de definiciones, luego abrimos una etiqueta dt, Donde se coloca el nombre o termino a definir, y luedo dd, que sirve para definir el significado que posee el termino.
<dl> Abre una lista de definiciones
<dt>Se coloca el termino a definir</dt>
<dd>aqui va lo que significa el termino</dd>
</dl> cierra la lista.
4. Lineas horizontales separadoras
Las lineas separadoras sirven para dividir contenido en una página, la etiqueta que se utilizada para crearla, es <hr> y como puede notarse no tiene etiqueta de cierre. Además tiene varios atributos que sirven para cambiar la manera en que se vera.
- <hr> línea horizontal.
- <hr width="x%"> anchura de la línea en porcentaje.
- <hr width=x> anchura de la línea en píxeles.
- <hr size=x> altura de la línea en píxeles.
- <hr align=center> línea alineada en el centro.
- <hr align=left> línea alineada a la izquierda.
- <hr align=right> línea alineada a la derecha.
- <hr noshade> línea sin efecto de sombra.
5. Etiquetas para insertar imagenes
La etiqueta usada para insertar imagenes en documentos HTML, es <img>, esta etiqueta tiene varios atrubutos que sirven para definir cual es la ruta de la imagen a insertar, si esa imagen poseera bordes, entre otras que seran colocadas a continuación:
- <img src="rutadelaimagen” "> indica la ruta de la imagen.
- <img border=”X"> coloca un borde de X pixeles en la imagen.
- <img height="XX" width="YY"> height sirve para definir que altura posee la imagen y width sirve para definir la anchura. Es recomendado colocar estos atributos al insertar una imagen, dado que ayuda a que el navegador no tenga que calcular el tamaño de la imagen.
- <img alt="texto explicativo"> se muestra un texto al pasar el cursor sobre la imagen.
- <img ... align="bottom"> alineación inferior del texto respecto de la imagen.
- <img align="middle"> alineación del texto en el medio de la imagen.
- <img align="top"> alineación superior del texto respecto de la imagen.
- <img align="left"> alineación izquierda de la imagen en el párrafo.
- <img align="right"> alineación derecha de la imagen en el párrafo.
- <img hspace=X> espacio horizontal entre la imagen y el texto.
- <img vspace=y> espacio vertical entre la imagen y el texto.
5. Etiquetas para creacion de enlaces
Los enlaces en html sirven para crear lazos entre las paginas, de modo que a traves de un enlace, una persona que esta viendo una pagina puede ir a traves de un enlace(link ) a otra. La etiqueta usada para crear enlaces es <a>, y posee ciertos atributos que serviran para como será el enlace:
- <a href=”rutadelarchivohtml.html”>Nombre del enlace</a>
- <a href=”mailto:dirección de mail”> cuando se coloca en el href=”mailto:direcciónde mail" sirve para que el explorador envie mensajes al email que a sido colocado luego del mailto.
Si por ejemplo se quiere que al clickear un enlace, el explorador no cambie la página actual, se coloca el siguiente atributo target="_blank", y este abrira una nueva ventana en el navegador con la nueva página. Ejemplo: <a href=”rutadelarchivohtml.html” target="_blank">Nombre del enlace</a>
Tambien tenemos un atributo llamado Title el cual nos permite colocar una descripcion sobre el enlace creado, por ejemplo <a href=”rutadelarchivohtml.html” title="Etiqueta al archivo nuevo">Nombre del enlace</a>
6. Ejemplo de Principales Etiquetas:
Por ultimo, he hecho una página de ejemplo, para que veamos todos los conceptos vistos hasta el momento en el navegador:
-