Una página HyperText Markup Language o HTML es un documento de texto con marcas. Forma parte del lenguaje utilizado para la elaboración de sitios web y hace referencia a los enlaces que conectan páginas web entre sí, dentro de un único sitio o varios.
Las marcas utilizadas en HTML sirven para etiquetar diferentes elementos dentro de un página web: imágenes, texto, videos, entre otros. Seguro ya has visto de qué te hablamos, pero te mostramos algunos ejemplos de etiquetas:
<head>
<title>
<body>
<section>
<video>
Otro ejemplo más claro del uso de etiquetas es el siguiente:
<h1>Cómo hacer una página web en HTML</h1>
Aquí, la etiqueta <h1> indica que se trata de un título.
Las etiquetas son vitales en la creación de páginas web en HTML, pues con ellas se aplicarán las pautas de diseño web que las conformarán, para darles un orden jerárquico. Con las etiquetas pueden realizarse diferentes indicaciones como el tipo de fuente, su tamaño y color, entre otros atributos.
1. Conoce los conceptos básicos de las páginas HTML
Antes de realizar tu página con códigos HTML, veamos algunos conceptos fundamentales, pues seguramente los aplicarás. No te preocupes, en este enlace encontrarás esos elementos explicados a detalle, para que los utilices durante todo tu proceso de programación.
Lo más relevante que debes conocer para comprender la estructura del HTML es lo siguiente:
• Las etiquetas deben tener apertura y cierre (<h1> texto </h1>). De lo contrario, el código no será reconocido por el sitio y los cambios que realices no se visualizarán. Siempre es importante revisar este aspecto, antes de poner un nuevo código, para evitar una posterior revisión exhaustiva en busca de un error.
•La estructura básica de una página web se compone por las etiquetas <html>, <head> y <body>. La primera indica el comienzo de la página; la segunda es la cabecera y contiene información descriptiva del sitio; y la tercera es la que abarca todos los elementos visibles dentro de la página.
•Los niveles de títulos pueden variar desde la etiqueta h1 hasta la h6.
•La etiqueta <p> corresponde a los párrafos.
•La etiqueta <a> representa los enlaces.
•Los metadatos contienen información sobre la página, como: estilos, buscadores, scripts, por mencionar algunos. Estos se conforman por las etiquetas <base>, <head>, <link>, <meta>, <style> y <title>.
Se calcula que hay alrededor de 142 etiquetas HTML; sin embargo, muchas de ellas ya han caído en desuso, sobre todo con la aparición de HTML5, la versión más reciente del código que incluye valiosas funciones nuevas.
2. Abre el editor de texto y comienza con una estructura básica
Si tienes una computadora Windows, podrás encontrar el editor de texto como «Bloc de notas»; en una computadora Mac puedes utilizar «TextEdit». Después de abrirlo, escribe una estructura base de HTML como la que te mostramos en la siguiente imagen:
Puedes utilizar esta estructura para personalizar el título principal de tu página, la descripción del contenido y codificar de una manera sencilla todo el sitio.
Como principiante, también puedes usar los editores WYSIWYG, del inglés «what you see is what you get», los cuales sirven para visualizar directamente cómo se muestra la página conforme se va escribiendo el código HTML. Entre algunos programas de este tipo están:
Sublime Text: este editor de texto web está habilitado tanto para código HTML como CSS personalizado. Es fácil de usar y resalta las líneas de código en la sintaxis.
Notepad ++: un programa gratuito para redactar varios lenguajes como el HTML, CSS, JavaScript o PHP. Es nativo de Microsoft y es el básico de los programadores.
Visual Studio Code: disponible para todos los sistemas operativos, ofrece una versión gratuita y funciones de desarrollo personalizado.
Atom: un editor de código abierto para HTML, JavaScript, CSS y Node.js. Cuenta con auto completado inteligente y permite la instalación de paquetes.
Coda: exclusivo del sistema macOS, soporta múltiples lenguajes de programación; es sencillo de manejar y su sistema te permite guardar fragmentos de código.
3. Trabaja el texto en HTML
Trabajar el texto en HTML es uno de los pasos más sencillos. Aquí podrás utilizar las etiquetas de título que te mencionamos anteriormente (h1, h2, h3, h4, h5, h6). Su uso dependerá de la jerarquización que desees darle a cada título o subtítulo.
La etiqueta <p> marca los párrafos. Con ambos elementos ya puedes comenzar a codificar el texto de tu página.
4. Cambia el color del texto
Para cambiar el color del texto, escribe la etiqueta correspondiente escribiendo el color que prefieras entre comillas. Por ejemplo:
También con el código HTML puedes indicar los colores de fondo de tu sitio web; existen más de 16 millones de opciones con los sistemas RGB y HEX.
5. Da formato al texto
Para dar formato solo escribe el código como en el siguiente ejemplo:
Texto en negrita usa la etiqueta <b>texto</b>
Texto subrayado <u>texto</u>
Texto en cursivas o itálicas <i>texto</i>
6. Incluye un enlace a otra página
Si en el texto quieres incluir un enlace a otra página, debs utilizar la etiqueta:
Aquí debes añadir el URL que deseas enlazar. El atributo «blank» se utiliza para que el enlace que agregues se pueda abrir en una nueva pestaña o página. En caso de que quieras que la liga se abra en la misma página, escribe «self».
7. Agrega contenido multimedia
Imágenes
Un elemento vital en una página web son las imágenes. Para añadirlas en HTML debes usar la etiqueta <img>:
El atributo «src» es para abrir un URL para la imagen que quieres mostrar. El apartado «alt» permite visualizar un texto alterno descriptivo, en caso de que, por error de carga del sitio, la imagen no pueda verse. El texto en la imagen también sirve como posicionamiento en buscadores, como Google.
Los atributos «height» y «width» corresponden a las dimensiones que desees que tenga cada imagen, a lo alto y ancho.
Video
Hoy en día los videos son uno de los contenidos más cotizados de las páginas web. Para insertarlos en tu sitio coloca este código:
<video width="320" height=240" controls>
<source src="animación.mp4" type="video/mp4">
Tu navegador no soporta este formato de video
</video>
Donde «height» y «width» establecen el tamaño del video, «source» es la clave del video, «src» indica la URL del video o la ubicación del archivo y «type» sirve para señalar el formato de video. En caso de no poder reproducirlo, aparecerá la leyenda «Tu navegador no soporta este formato de video». También puedes insertar un video de YouTube con el código de inserción que ya te ofrece la plataforma.
Audio
Respecto a los audios o canciones, puedes agregar este código:
<audio controls>
<source src="cancion.mp3" type="audio/mp3">
Tu navegador no soporta este formato de audio
</audio>
En este caso «src» describe el nombre o ubicación del archivo y «type» sirve para indicar el formato del audio. Si no es posible reproducirlo aparecerá la frase «Tu navegador no soporta este formato de audio».
8. Cerciórate de que todas las etiquetas estén cerradas
Antes de guardar el documento y ver los resultados, es muy importante que cierres todas las etiquetas en la parte inferior del documento para que puedan visualizarse correctamente todos los códigos que utilizaste. Estos se cierran de la siguiente forma:
Verifica que las etiquetas de todos los códigos estén abiertas y cerradas y que todo esté escrito correctamente.
9. Guarda tu documento HTML
Para guardar el texto que creaste, recuerda cambiar el formato «.txt» por «.html». Para abrirlo y ver los resultados, da clic derecho sobre el archivo y selecciona el navegador de tu preferencia. Si percibes errores en el diseño de la página, deberás regresar al editor de texto o bloc de notas para revisar a detalle en dónde está el error.
¡Listo! Ahora ya sabes cómo crear una página web en HTML. Si utilizas esto, en conjunto con el código CSS, puedes optimizar la parte visual y con el lenguaje JavaScript puedes agregar elementos dinámicos para crear páginas interactivas para tus visitantes.
No hay comentarios:
Publicar un comentario