(12 votos, promedio: 4,25 de 5)
Cargando...Si ya eres un usuario avanzado en HTML este post no te será de gran ayuda, pues se trata de una manera básica
En este post vamos a hablar sobre las etiquetas HTML o tags HTML, pilares fundamentales para el diseño de páginas web o diseño de tiendas online dado que todo sítio web, desde el más pequeño hasta el más avanzado hacen uso de ellas.
Desde el principio de Internet se hacen uso de ellas para la construcción de las páginas web, así pues es unos de los primeros lenguajes de programación usados y simplemente usando este lenguaje se puede crear un diseño «supersencillo» pero con una estructura entendible.
La forma de escribir estas etiquetas es bastante fácil, se comienza escribiendo el símbolo «menor que» < , dentro se escribe el comando que se quiera usar y se termina con el símbolo «mayor que» >, y dependiendo del tipo de tag que queramos usar se cierran con la misma etiqueta solo que antes del primer símbolo del cierre se añade una barra /.
Podemos usar las etiquetas HTML para crear párrafos de texto (<p>), insertar imágenes en nuestra pagina web (<img>), crear tablas <table>, construir listas <ul><li>, resaltar palabras o frases en negrita <strong> y un largo etcétera.
Por ejemplo, si queremos escribir un texto y resaltar una palabra en negrita, la codificación resultaría así:
<p>Hola, esto es un texto de ejemplo con una palabra resaltada en <strong>negrita</strong></p>
Y el resultado que interpreta el navegador, sería este:
Hola, esto es un texto de ejemplo con una palabra resaltada en negrita
Vamos a plasmar otro ejemplo, en este caso quiero crear una lista de elementos.
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
Como veis, esta etiqueta tiene un padre <ul></ul> que engloba a los hijos <li></li>, en este caso se trata de una lista de elementos sin numeración (Unordered List) y en el navegador se veria asi.
- Elemento 1
- Elemento 2
- Elemento 3
Si queremos convertir esta lista en una numérica, cambiaríamos las tags padre <ul></ul> por <ol></ol> (Ordered List), y se veria asi.
- Elemento 1
- Elemento 2
- Elemento 3
Esto son ejemplos muy básicos pero que te pueden servir para conocer la estructura de este lenguaje.
Como decíamos más arriba, el lenguaje HTML, se viene utilizando desde los comienzos de Internet, según la Wikipedia fue Tim Berners-Lee, uno de los padres de Internet, el primero el usar este código alla por 1991.
Pinchando aquí puedes ver el primer correo electrónico escrito por él, donde hacia mencion sobre el uso de las etiquetas.
Estas primeras etiquetas que se usaron fueron sobretodo para estructurar los textos. Hacía uso de la etiqueta <title>, que sirve para dar nombre al documento y es lo que aparece en las pestañas de los navegadores y etiquetas de formato <h1> <h2>, que daban un aspecto visual a los títulos de los párrafos.
Muchas de estas etiquetas se siguen usando hoy en día.
Tipos de etiquetas HTML
Podemos dividir las etiquetas en distintos grupos según su función.
Etiquetas básicas HTML
Con estas etiquetas podríamos crear un documento HTML simple.
| <!DOCTYPE> | Sirve para definir el tipo de documento |
| <html></html> | Define un documento HTML |
| <head></head> | Dentro se escribe información sobre el documento |
| <title></title> | Para escribir el título del documento. Se escriben dentro de <head> |
| <body></body> | Justo después de </head>. Es el contenedor del documento |
| <h1></h1>, <h2></h2> hasta <h6></h6> | Para crear títulos de párrafos, de más importante <h1> a menos <h6> |
| <p></p> | Los párrafos de texto de nuestro documento |
| <br> | Un salto de línea simple |
| <hr> | Salto de línea que indica un cambio de temática entre párrafos |
| <a></a> | Podremos escribir enlaces a otras páginas |
Etiquetas de formato HTLM
Son etiquetas que nos permiten dar un formato más útil y claro al contenido de nuestro documento.
| <abbr></abbr> | Define una abreviatura o un acronimo |
| <address></address> | Indica una dirección |
| <b></b> o <strong></strong> | Para resaltar un texto en negrita y darle importancia |
| <blockquote></blockquote> | Cuando quieres escribir una cita de otra persona |
| <code></code> | si quieres escribir un código de programación |
| <del></del> | Lo que escribas dentro aparecerá tachado en el navegador |
| <em></em> | Para escribir en cursiva |
| <sub></sub> y <sup></sup> | Subindicessub <sub> o superindicessup <sup> |
| <time></time> | Fechas y horas |
| <u></u> | Texto subrayado |
Etiquetas HTML para formularios
Estas etiquetas nos valen para crear formularios donde podamos escribir texto, seleccionar algún elemento de una lista desplegable u organizar los campos de una manera legible
| <form></form> | Indica que dentro vamos a incluir un formulario |
| <input></input> | Un campo de nuestro formulario. Pueden ser de texto, selección, numeros, botones, fechas… |
| <textarea></textarea> | Un campo de texto para poder escribir varias líneas |
| <button></button> | Para definir un botón |
| <select></select> | Cuando queremos crear una lista desplegable |
| <option></option> | Se escriben dentro de <select> y son las distintas opciones de selección |
| <label></label> | Para crear el título del campo del formulario |
| <fieldset></fieldset> | Para englobar distintos campos relacionados dentro de un formulario. Por ejemplo, datos personales, aficiones, etc. |
¿Te gustó? Ayudame a escribir más valorando y/o compartiendo. ¡Gracias!
(12 votos, promedio: 4,25 de 5)Cargando...
Y para imagenes??
Hola. Para insertar imágenes sería la etiqueta
Hola, como sería para poner una imagen detrás del título, al igual que no tener el título muy arriba :c
Hola. Para eso ya tendrías que usar estilos asociados CSS. Creando una clase «class=’titulo'» y añadirle estilos, por ejemplo «background».