Lenguaje HTML al alcance de todos, ¡Se parte del mundo del desarrollo web con HTML! Descubre cómo usar este lenguaje de etiquetas para mejorar tu habilidad en la creación de sitios web profesionales.
¿Quieres aprender a crear increíbles sitios web profesionales? El lenguaje de etiquetas HTML es la herramienta ideal para empezar. Conocerás conceptos básicos sobre estructura, multimedia, tablas y enlaces. Además, ¿Qué es y cómo se usa? y 10 ejemplos de etiquetas más usados.
¿Qué es lenguaje html? 🎯
HTML es un lenguaje de etiquetas o de marcado de hipertexto, que usan todos los desarrolladores web para crear contenido. Estas etiquetas se basan en una variedad de elementos y atributos, utilizados para definir la estructura relativa del contenido incluso antes de agregar el diseño.
Por lo que es muy recomendable, que comiences aprendiendo los conceptos básicos para construir páginas web increíbles.
El lenguaje html en resumen sería:
- HTML significa lenguaje de marcado de hipertexto.
- HTML es el lenguaje de marcado más común y universal, para desarrollar páginas web.
- HTML describe la estructura de una página Web.
- HTML consta de una serie de elementos.
- Los elementos HTML le muestran al robot del navegador, cómo debe mostrar el contenido en la web.
- Los elementos HTML etiquetan partes de un contenido, ejemplo «esto es un header», «esto es un párrafo», «esto es una lista».
¿Cómo y cuando usar etiquetas en HTML?
- Comprender la lógica básica del HTML, es la que a los que recién inician en el mundo de la programación o desarrollo web, les ayuda a desarrollar plenamente las tareas del lenguaje html en cada uno de sus proyectos.
- Es importante comprender los términos básicos y la lógica del HTML para poder crear contenido de alto nivel. Por ejemplo, se necesitan etiquetas de inicio y cierre, como para definir un bloque y separarlo del resto del contenido en la temática que desea trabajar.
- También es útil usar etiquetas semánticas, cuando sea posible para mejorar el resultado global, como asegurarse de que estás incluyendo todos los metadatos relevantes a tu sitio utilizando etiquetas como
Como entender la sintaxis de etiquetas del lenguaje HTML
Las tag o etiquetas como se le conoce en la programación en general, y muy particularmente también lo es en el lenguaje html, son una parte del código que se coloca dentro de un símbolo matemático mayor que (>) y menor que (<) y se vería de la siguiente forma: < etiqueta > </etiqueta>
Al abrir una etiqueta, para que la instrucción del hipertexto se complete debe cerrarse dicha etiqueta con la barra diagonal o slash. Por ende, las etiquetas son un fragmento que representa algo en un sitio web. Por ejemplo: Puede representar un botón, un campo de texto, un párrafo y muchas más.
Ejemplos de sintaxis del lenguaje html
De hecho, cada etiqueta tiene sus diferentes nombres y dentro de la etiqueta existe un contenido o cualquier otra cosa a la que se referencie. <Etiqueta> Contenido </Etiqueta> lo que acabas de ver sirve para entender la sintaxis; Por otro lado, las etiquetas las encontraremos con atributos, y cada atributo tendrá un valor.
- Ejemplo a: <Etiqueta atributo = «valor»> Contenido </Etiqueta> en el ejemplo, se le puede modificar una serie de aspectos al contenido, según sea lo que se coloque en atributos y el valor.
- Ejemplo b: <Etiqueta color = «Rojo»> Contenido </Etiqueta> recuerda que todas las etiquetas tienen un principio y un fin.
- Mira este caso real, ejemplo C: <h1> Titulo Documento </h1>; acá puede ver como h1 es la etiqueta que se encierra entre mayor y menor que <h1> y al cerrar la etiqueta queda con barra diagonal </h1> sin espacios entre ellos. Tal vez, te preguntes para que sirve la etiqueta <h1> </h1> sirve para indicarle al navegador que lo que aparezca entre ellas ser el header 1 o titular del artículo o página web.
10 ejemplos de etiquetas del lenguaje HTML
Una vez que haz visto como se desarrolla la sintaxis de las etiquetas, es hora de que empieces tus primeros pasos conociendo las 10 etiquetas del lenguaje de hipertexto HTML.
1.- Etiquetas para html
Las etiquetas quedan definidas como <html> … </html> son las etiquetas raíz de una estructura de una pagina web; es decir, una etiqueta abre y la otra cierra. Por lo que, su sintaxis puede quedar de la siguiente forma.
Ejemplo de la etiqueta html incluyendo en su estructura, la cabecera y titulares desde el titular 1 hasta el titular 6 y entre cada titulo, se le coloco solo dos párrafos:
<!DOCTYPE html>
<html>
<head>
<title> Hola MUNDO </title>
</head>
<body>
<h1> Titulo Nro. 1</h1>
<p>Párrafo 1</p>
<p>Párrafo 2</p>
<h2> Titulo Nro. 2</h2>
<p>Párrafo 1</p>
<p>Párrafo 2</p>
<h3> Titulo Nro. 3</h3>
<p>Párrafo 1</p>
<p>Párrafo 2</p>
<h4> Titulo Nro. 4</h4>
<p>Párrafo 1</p>
<p>Párrafo 2</p>
<h5> Titulo Nro. 5</h5>
<p>Párrafo 1</p>
<p>Párrafo 2</p>
<h6>Titulo Nro. 6</h6>
<p>Párrafo 1</p>
<p>Párrafo 2</p>
</body>
</html>
2.- Etiquetas para titulares
Son aquellas etiquetas que tienen una apertura y un cierre, incluyendo una letra «h» de header acompañada de un número.
<h1> … </h1>
3.- Etiquetas para textos
En los párrafos tradicionales es donde se nos permite colocar texto, por lo que la etiqueta correcta queda definida como <p> … </p> y donde aparecen los puntos suspensivos es donde se agrega el párrafo.
4.- Etiquetas negritas
Resulta que este tipo de etiqueta es muy usada en los post de las paginas web, se usa con la finalidad de darle un estilo bold o mas robusto comparada con el resto del texto.
Por lo que, en la practica quedaría el código escrito así:
<strong> colocar texto bold </strong>
5.- Etiquetas para crear un articulo
Este tipo de etiqueta es muy usada en los post de las paginas web, se usa con la finalidad de indicar que se va a crear un articulo.
En la practica quedaría el código escrito así:
<article> … </article>
6.- Etiquetas para agregar cita
Este tipo de etiqueta es muy usada en los post de las paginas web, se usa con la finalidad de indicar que un párrafo es una cita textual, cuya idea o concepto, lo ha dicho otro autor con esas palabras exactas.
En la practica quedaría el código escrito así:
<blockquote> … </blockquote>
7.- Etiqueta para crear enlaces
Este tipo de etiqueta es bastante usada en los post de las paginas web, se usa con la finalidad de indicar que una porción de texto o una simple palabra pueden ser vistos en otra pagina de la misma web o de otra cuando se hace referencia externa.
En la practica quedaría el código escrito así:
<a href> … </a>
Un ejemplo real se vera así:
<a style=»color: #333333;» title=»formularios» href=»https://www.lapagina-web.com/es/tutorials/forms.html» target=»_blank» rel=»noopener»>formularios</a>
En la estructura de la etiqueta de enlace se puede ver como se le agregan atributos de color y de relación de dicho enlace
8.- Etiquetas para listas
Este tipo de etiqueta es muy usada en los post de las paginas web, se usa con la finalidad de indicar que se va a usar una serie de párrafos organizados en listas.
Su sintaxis en lenguaje HTML sería: <li> … </li>
- Ahora, un dato muy curioso es que si la lista es enumerada lleva una etiqueta contenedora <ol> … </ol>; pero, si la lista es sin enumerar quedaría en una etiqueta contenedora llamada <ul> … </ul>.
- Aunque no son las únicas que se usan para listar, si son las más comunes.
En la practica quedaría el código escrito así:
- Caso a: listas enumeradas
<ol> <li> … </li> </ol>
- Caso b: listas sin enumerar
<ul> <li> … </li> </ul>
9.- Para crear formularios
Este tipo de etiqueta es bastante usada en los post de las paginas web, se usa con la finalidad de indicar que se están creando formularios.
En la practica quedaría el código en lenguaje HTML escrito así:
<form> … </form>
Cabe destacar que dentro de la etiqueta que abre se le pueden agregar atributos, para que el formulario realmente pueda interactuar, por así decirlo o recoger los datos claves y luego de procesados los datos, se le da una respuesta.
10.- Para crear tablas
Este tipo de etiqueta es bastante usada en los post de las paginas web, se usa con la finalidad de crear tablas de datos que pueden ser textos, imágenes entre otras.
En la practica quedaría el código escrito así:
<table> … </table>
Claramente dentro de estas etiquetas de tablas pueden estar insertas otras mas como por ejemplo <td> que es la etiqueta usada para expandir dentro de la tabla el texto, imágenes u otros archivos.
Muy bien, así llegamos al final de este artículo, espero que el lenguaje html, te sirva de base para tu formación y comprensión sobre lo que es la programación.
Programas de Diseño Gráfico que vale la pena conocer, 5 de Pago y 5 Gratis
