Etiquetas básicas de html que debes conocer
Una vez más regresamos para hablar de HTML, ese lenguaje de etiquetas (no de programación) que nos sirve para construir páginas web. Insisto en que no es un lenguaje de programación porqué aquí hay mucha confusión entre los usuarios y alumnos: HTML únicamente sirve para crear una estructura web en la red o en local. No incluye funcionalidad ni procesos y por si sólo no es capaz de hacer nada que conlleve intercambio de datos o interacción con el usuario (más allá de los hiperenlaces).
Sin embargo, sin él, PHP no tendría como conseguir datos para mandarlos a un servidor, por ejemplo, o JavaScript funcionaría únicamente a través de alertas de pantalla. De manera que nos damos cuenta que sigue siendo una gran herramienta, y esto nos lleva al post de hoy en el que comentaremos algunas de las etiquetas que deberíamos tener muy en cuenta, más allá de las básicas para hacer una estructura sencilla (body, head, etc) y por qué debemos tenerlas en mente.
Tabla de contenidos
Las etiquetas html
Doctype
Antes de nada, recordad que hay un seguido de etiquetas que no debéis olvidaros jamás y son básicas porqué sin ellas el cuerpo de la web estará incompleto. Estas son: html, head y body. Pero hay una aún más importante en la actualidad que va antes, y se trata del Doctype. Esta etiqueta que irá al inicio de nuestro documento indicará al navegador que la siguiente web está hecha pensando en los estándares HTML5 (los más modernos), de manera que gracias a esto, Google u otros buscadores nos van a indexar mejor en los resultados. Hay varios tipos de Doctype, pero nosotros pondremos:
<!DOCTYPE html>
Y será suficiente para que los navegadores web sepan la naturaleza de nuestra web.
Listas
Otras etiquetas que debéis aprender a dominar son las listas. Hay de tres tipos: ordenadas (numeradas), no ordenadas (con el símbolo de viñeta delante de cada opción) y de definiciones (al estilo diccionario). Habitualmente las listas se usan para poder colocar objetos en pantalla, a la hora de crear menús por ejemplo, con el objetivo de que a la larga la maquetación por CSS sea más sencilla, ya que lo tienes todo dentro de un listado en vez de deambular por el espacio libremente. La más común es la no ordenada, y la usaremos del siguiente modo:
<ul> (inicio de la lista)
<li> elemento </li>
</ul> (fin de la lista)
Como veis, los elementos quedan cerrados en una estructura y esto será muy agradecido a la hora de añadir detalles de aspecto mediante las hojas de estilo.
Formularios
Continuamos con los formularios, otra herramienta muy útil para capturar datos del usuario, trabajar con servidor, y otras utilidades que tienen para nuestro servicio. Los formularios está compuestos de distintas propiedades, y son el modo más versátil que tiene PHP de recoger datos para guardarlos en una base de datos para estos. Los formularios son simples de entender: su funcionamiento se reduce a rellenar campos, llamados inputs, ya sean de texto, cajas para marcar (check box) o escoger una opción entre varias propuestas (combo box) y un botón para poder enviar los resultados. Todos los elementos del formulario tienen un identificador asignado (por nosotros), de modo que siempre controlamos a donde van los datos que nuestro usuario haya seleccionado o escrito.
Hiperenlaces
Ya hemos visto varias etiquetas para la construcción de nuestra web. ¿Qué hay de la navegación? Los más que conocidos hiperenlaces están por todos lados, hace unas líneas os he dejado uno. La etiqueta dedicada a ellos también tiene varias opciones a tener en mente a la hora de decidir como vamos a abrir la página destino. Usaremos:
<a href="url">texto a enlazar</a>
Pero podemos añadir un atributo más a esto, llamado target, el cual indicará lo mencionado anteriormente. El target puede ser
- _blank, o página nueva
- _self, o en la misma página
- _parent, o en un marco lateral (actualmente se usa muy poco)
- _top, o te lleva a la parte superior de la web destino
Los enlaces lo son todo en cuanto a navegación, por lo que hay que conocerlos de manera cercana.
Y estas son mis recomendaciones de hoy en cuanto a etiquetas básicas de HTML. Más adelante hablaremos de los estilos y como se pueden combinar con todo esto que he mencionado en el post de hoy. Pensad que la estructura principal se construye en dos pasos:
1.Etiquetado HTML (sin pensar en el aspecto)
2.Maquetación con hojas de estilos CSS
¿Por qué digo que no se piensa en el resultado en el primer paso? Porqué todo eso viene acompañado con las hojas de estilo. Os animo a que seleccionéis la opción “desactivar estilos” o “ver sin estilos” de vuestro navegador (la opción cambia de nombre en función de cual uséis) y podréis comprobar que todas las web se construyen sin tener demasiado en cuenta la estética visual como prioridad.
¿Qué os parecen las etiquetas mencionadas?¿Las conocíais? Como siempre, dejadme vuestras opiniones y experiencias en la caja de comentarios y estaré encantado de leerlas.
Curso relacionado: Curso de Programación con HTML5 y CSS
©2024 Deusto Formación