Blog
En esta segunda sección del curso quiero darte una breve introducción a varios conceptos básicos de las páginas HTML; para así facilitarte todo este proceso de aprendizaje y hacerlo mas entretenido. Cada etiqueta nueva, concepto, o método nuevo que vayas aprendiendo colócalo en práctica para que así aceleres tu proceso de aprendizaje y logres tus metas mas rápido de lo previsto. Ya que así podrás ser un desarrollador web mas rápido de lo que crees y luego que domines el contenido de este curso básico podrás seguir avanzando y evolucionando en tu forma de programar.
Algunos elementos básicos del código HTML
Las páginas desarrolladas en HTML llegan a estar integradas por muchos, variados y distintos elementos; cada cual con una función específica dentro de la maquetación de la página; con ellas podemos organizar nuestra página web de la mejor manera. Aquí te nombro algunos de los elementos básicos que puedes hallar en una página desarrollada en lenguaje de etiquetas HTML; estos son:
- Un encabezado de texto. Los encabezados de texto se denotan con el uso de las etiquetas <h1>, <h2>, <h3>, <h4>, <h5>, y el <h6>. Siendo la etiqueta <h1> la que te brinde un encabezado de mayor tamaño, y la etiqueta <h6> es la que te mostrará en pantalla un encabezado utilizando un texto de menor tamaño. Cada una de estas etiquetas cuenta con su etiqueta de cierre. Por ejemplo:
<h1>Encabezado</h1> <h2>Encabezado</h2> <h3>Encabezado</h3> <h4>Encabezado</h4> <h5>Encabezado</h5> <h6>Encabezado</h6>
- Si queremos introducir un párrafo en nuestra página usando el código HTML utilizamos la etiqueta <p>. Ten en cuenta que esta etiqueta también necesita una etiqueta de cierre luego de que escribas el contenido de dicha etiqueta. Por ejemplo:
- La etiqueta <i> te mostrará un texto con letras cursivas, la etiqueta <b> o <strong> (ambas cumplen la misma función); te mostrarán un texto resaltado en negritas, y la etiqueta <u> te mostrará un texto subrayado. Todas estas etiquetas también tienen su cierre.
Aquí va tu párrafo
- Si deseas darle un salto de línea a tu párrafo utiliza la etiqueta <br>. Esta etiqueta hará que el texto que escribas inmediatamente después de ella se escriba en una línea nueva debajo de la línea de texto anterior.
- Si quieres introducir en tu página web una línea separatoria horizontal utilizas la etiqueta <hr>. Esta etiqueta, a diferencia de las anteriores no necesita una etiqueta de cierre, por lo tanto si escribes solamente esta etiqueta en tu código, te aparecerá una línea separatoria horizontal; esto se debe a que la etiqueta <hr> no puede poseer contenido de ningún tipo dentro de sí.
- Los enlaces, links, o anclas en HTML son fáciles de agregar a tu página web, además de ser una herramienta indispensable para navegar en la web. Estos se denotan utilizando la etiqueta <a href=”aquí irá la dirección url“>. Sin embargo esto se te explicará mejor en el capítulo “Links”, que es el siguiente. Abajo te muestro un ejemplo de un enlace:
<a href="ruta">Texto del enlace</a>
- Las listas también forman parte de las etiquetas básicas de una página desarrollada en HTML; estas pueden ayudarte a ordenar conceptos, nombres, entre otros tipos de elementos con los cuales creas que puedas ordenar usando las listas. Las listas se denotan con las etiquetas <ul> (esta es utilizada para hacer una lista desordenada), la etiqueta <ol> (esta se utiliza para realizar listas ordenadas) y la etiqueta <li> (esta última es para definir cada elemento de la lista), esta etiqueta se utiliza para definir elementos en ambos tipos de lista. Cada una de estas etiquetas tiene su cierre. Todas estas etiquetas se te explicarán mejor en la sección”Listas” de este mismo curso. Sin embargo, abajo te muestro un ejemplo de listas en HTML:
<!DOCTYPE html> <html> <head> <title>Ejercicio</title> <meta charset="utf-8"> </head> <body> <!-- Ejemplo de lista desordenada --> <ul> <li>Primer elemento de la lista</li> <li>Segundo elemento de la lista</li> <li>Tercer elemento de la lista</li> </ul> <!-- Ejemplo de lista ordenada --> <ol> <li>Primer elemento de la lista</li> <li>Segundo elemento de la lista</li> <li>Tercer elemento de la lista</li> </ol> </body> </html>
- Las imágenes son un importante recurso a la hora de mostrar o decorar tu página web, e incluso; te sirven para otra infinidad de propósitos si desarrollas una página web. Las imágenes se pueden incorporar a tu página en HTML usando la etiqueta <img src=”ruta de la imagen“>
- Un divisor es una sección diferente de la página; se denota usando la etiqueta <div>. Este divisor puede ayudarte a dividir tu página de una manera eficiente y ordenada.
- Un lapso de texto, es denotado utilizando la etiqueta <span>
- La etiqueta <section> es utilizada para llevar dentro de sí el código correspondiente a una sección que puede definirse como genérica dentro de un documento o aplicación. Además, cabe destacar que todo el contenido que es englobado dentro de esta etiqueta guarda cierta relación entre sí.
- Con la etiqueta <article> se puede separar cada uno de esos elementos independientes entre sí que se pudieran encontrar dentro de un <section>. Un <article> podría definirse por tanto como cada uno de los elementos en que podemos dividir el contenido de la etiqueta <section>.
- Las etiqueta <header> se encarga de indicar a los navegadores que lo que contienen es la cabecera de la página y que dentro seguramente llevarán lo típico, algún logotipo, el título de la página, quizás una descripción de la misma y quizás un poco más.
- La etiqueta <footer> encierra todo el código tipico de la parte inferior de una página web. Contendrán por lo tanto enlaces a otras webs relacionadas, al mapa de la web, a una página de comentarios sobre el copyright, una política del portal, quizás algo de publicidad, entre otros elementos.
- Otro elemento bastante típico y común en muchas páginas web es la zona de navegación, formada por enlaces a las zonas principales de la web, o por un menú de navegación, etc. Es ahí donde podemos utilizar la etiqueta <nav>
- La etiqueta <aside> es usada para que lleve en su contenido bloques con cierto contenido semántico dentro de una página web.
Los siguientes secciones de este curso te darán una visión general de estos elementos básicos del lenguaje HTML. Así que no te preocupes si no los entendiste en esta primera lección en su totalidad, o sientes que tienes algunas dudas; en los siguientes capítulos saciarás tus dudas gracias al contenido de este entretenido curso online.
Cada elemento o etiqueta de HTML también puede poseer atributos o parámetros. Cada elemento tiene un conjunto diferente de atributos que te servirán en algunos casos para manipular de alguna forma la naturaleza de la etiqueta. Hay muchos atributos, algunos son elementos globales que se usan en la mayoría de las etiquetas, y otros son mas específicos. Aquí te enlisto los parámetros más comunes usados en las etiquetas de HTML:
- Atributo id– El atributo id denota la identificación única de un elemento cualquiera en una página web. Se usa para ubicar elementos mediante el uso de enlaces, JavaScript y más.
- Atributo class– Denota la clase en CSS de un elemento. Este atributo se te explicará mejor en el tutorial básico de CSS el cual conocerás en los próximos capítulos de este curso.
- Atributo style– Indica los estilos CSS para aplicar a un elemento. Este atributo se te explicará mejor en el tutorial básico de CSS.
- data-xatributos: El data-xatributos es un prefijo general para los parámetros que almacenan información sin procesar para fines de programación. Este atributo se te explicará mejor en la sección Atributos de datos .
Encabezados y párrafos de texto
Existen seis tipos diferentes de encabezado de texto que te ofrece HTML, de entre los que puedes elegir. El <h1> es el encabezado más alto con el texto más grande, y <h6> es el encabezado más interno con el texto más pequeño. En general, se debe tener solo una etiqueta <h1> en cada página web que desarrolles, ya que este emcabezado contiene normalmente la descripción principal de la página en HTML.
Como hemos visto en el último ejemplo, un párrafo es un bloque de texto separado del resto del texto que lo rodea.
Veamos un ejemplo de las siguientes etiquetas en acción:<h1><h2><p>
<!DOCTYPE html> <html> <head> <title>Ejemplo</title> <meta charet="utf-8"> </head> <body> <h1>Mi primera página web en HTML</h1> Esta es mi primera página. <h2>Un encabezado secundario</h2> Algo mas de texto. <body> </html>
Líneas separadoras horizontales
La etiqueta <hr> es usada para generar una línea horizontal en tu página web que te ayuda a separar el texto o el contenido de la página. Esta es una línea simple; aunque esta cuenta con parámetros para poder manipularla.
Ejercicio
Realiza una página en HTML donde utilices los 6 encabezados junto con un párrafo cada uno y sepáralos cada uno con un <hr>. Ten en cuenta que cada etiqueta de encabezado necesita una etiqueta de cierre luego de que hayas escrito su contenido. Tenlo en cuenta a la hora de realizar este ejercicio.
<!DOCTYPE html> <html> <head> <title>Ejercicio</title> <meta charset="utf-8"> </head> <body> <!-- Coloca aquí el contenido de la página --> </body> </html>
Solución al ejercicio propuesto:
<!DOCTYPE html> <html> <head> <title>Ejemplo</title> <meta charet="utf-8"> </head> <body> <h1>Encabezado 1</h1> Primer párrafo. <hr> <h2>Encabezado 2</h2> Segundo párrafo. <hr> <h3>Encabezado 3</h3> Tercero párrafo. <hr> <h4>Encabezado 4</h4> Cuarto párrafo. <hr> <h5>Encabezado 5</h5> Quinto párrafo. <hr> <h6>Encabezado 6</h6> Sexto párrafo. </body> </html>
¡Felicidades! Has aprendido los elementos básicos de HTML ¿Quieres aprender más sobre este potente lenguaje de etiquetas? Ingresa a nuestro curso:
[…] Elementos básicos (AprenderHtmlyCss Curso Principiante) […]