¿Qué es HTML? Bueno, HTML es un acrónimo que significa HyperText Markup Language, y la respuesta a esa pregunta está contenida en el nombre..
- HiperTexto: este término se utiliza para describir el texto que enlaza con otros textos (o documentos).
- Marcado: este término hace referencia a las etiquetas de programación de computadoras añadidas al texto para asignar significado a cada parte del texto
- Lenguaje: un lenguaje informático es un conjunto de instrucciones y reglas que se usan para definir el significado del código de la computadora cuando se interpreta por un programa de computación.
Entonces, ¿qué es HTML? Es un lenguaje de computadora que consiste en etiquetas de marcado que asignan significado al texto que está vinculado a otros documentos.
HTML es el lenguaje de programación utilizado para describir el contenido de una página web. Las etiquetas de marcado de HTML le indican al navegador qué es cada bit de texto, identificando encabezados, párrafos, enlaces, imágenes y cualquier otro bit de contenido en un documento HTML. HTML no se muestra a los visitantes del sitio web, sino que es interpretado por un navegador web y se muestra de acuerdo con las instrucciones contenidas en el propio documento HTML y los recursos externos a los que hace referencia el documento HTML.
Historia de HTML
HTML fue creado por Tim Berners-Lee. Usted puede haber oído hablar de Berners-Lee. Él inventó la World Wide Web. Además de la web, Berners-Lee creó una serie de tecnologías complementarias para hacer posible la web, y HTML era una de esas tecnologías complementarias.
La primera versión de HTML se publicó a principios de los 90 y consistió en menos de 20 etiquetas diferente, hoy en día, hay más de 100. El HTML estaba fuertemente influenciado por un lenguaje de marcado anterior, el SGML, y Berners-Lee consideraba que la primera versión de HTML era una implementación SGML extendida solo ligeramente para la aplicación en la web.
Berners-Lee prosiguió con la fundación del World Wide Web Consortium (W3C) como una organización paraguas para gestionar el desarrollo de estándares web como HTML, cuyo desarrollo continuo fue gestionado por el W3C desde 1996. El estándar HTML fue iterado rápidamente y por finales de 1999, HTML ya estaba en la versión 4.0.
Lamentablemente, el desarrollo de HTML se estancó después del lanzamiento de HTML 4.0. Sin embargo, en 2004 se creó el Grupo de trabajo de Tecnología de Aplicaciones de Hipertexto Web (WHATWG) para liderar el desarrollo de HTML5. La especificación oficial de HTML5 fue desarrollada conjuntamente por el WHATWG y el W3C y publicada como una recomendación del W3C en 2014.
En esta guía, acabamos de tocar la historia de HTML. Hay mucho más que aprender, y puede obtener más información sobre la historia de HTML en HiperTexto.
Escribiendo HTML
Necesita dos cosas para empezar a escribir HTML: un editor de texto y un navegador web.
Hay muchos editores de texto adecuados que puede utilizar. Sin embargo, debe evitar utilizar una aplicación de procesamiento de textos como Microsoft Word. En su lugar, busque un editor de texto sin formato.
Las computadoras de Windows incluyen un editor de texto plano llamado Bloc de notas. En MacOS, el TextEdit se puede establecer en modo de texto sin formato. Si desea una actualización, hay opciones gratuitas y de código abierto que puede considerar, como Atom.
En lo que respecta al navegador web, la mayoría de los desarrolladores usan Google Chrome o Mozilla Firefox. Sin embargo, cualquier navegador web moderno funcionará. Una vez que llegue a HTML avanzado, tendrá que tener acceso a varios navegadores para asegurarse de que sus páginas web se vean bien en cada navegador.
Sintaxis HTML
La sintaxis de HTML consiste en etiquetas de marcado que tienen el siguiente aspecto:
<h1>Esto es un poco de texto</h1>
Vamos a diseccionar ese pedacito de código:
- En primer lugar, vemos una etiqueta de apertura que se ve así:
<h1>. La etiqueta de apertura consta de un paréntesis angular de apertura (<), una pequeña parte de texto («h1«), y un paréntesis angular de cierre (>). Los paréntesis angulares identifican esta partecita de código como una etiqueta HTML y el texto especifica el tipo de etiqueta HTML. En este caso, la etiqueta es una etiqueta de encabezado de primer nivel. - En segundo lugar, vemos un poco de texto. Ese texto es lo que el navegador interpretará como el contenido del encabezado de primer nivel.
- En tercer lugar, vemos una etiqueta HTML que se parece a la etiqueta de apertura con la adición de una barra diagonal inversa (
/). Esto se denomina etiqueta de cierre y le dice al navegador que ha terminado el encabezado de primer nivel.
La mayoría de las etiquetas HTML siguen esta misma sintaxis: etiqueta de apertura, contenido, etiqueta de cierre. Sin embargo, hay algunas etiquetas referidas como cierre automático que no requieren una etiqueta de cierre. Las etiquetas de cierre automático se dividen en dos categorías:
- Algunas etiquetas no necesitan estar envueltas alrededor de un pedazo de contenido. Los ejemplos incluyen las etiquetas para agregar imágenes (
<img>)e insertar un salto de línea (<br>), entre otros. - Algunas etiquetas de cierre están implícitas en la siguiente etiqueta de apertura de HTML. Los ejemplos incluyen la etiqueta de párrafo (
<p>) y la etiqueta de elemento de lista (<li>), entre otras.
Las etiquetas que elija utilizar al escribir HTML son muy importantes. Le dicen al navegador algo sobre el significado del texto o el contenido identificado por la etiqueta. Esto se conoce como el significado semántico de HTML.
Es importante siempre elegir las etiquetas HTML basadas en su significado semántico y, a continuación, el estilo de la apariencia de su página web utilizando Cascading Style Sheets (CSS); un tema que tocaremos en un momento.
Atributos de HTML
Todas las etiquetas de HTML también pueden tener atributos. Los atributos de HTML se ven así:
<p class="i-am-an-attribute">En el código anterior asignamos un atributo de clase a un elemento de párrafo. Al atributo de clase se le asignó un valor de "i-am-an-attribute".
En este caso, el atributo solo se agrega para nuestro beneficio y el navegador no hará nada con él a menos que le proporcionemos algún tipo de instrucciones adicionales con CSS o JavaScript. De lo contrario, el navegador no hará nada con este atributo de clase porque no tiene un significado predefinido.
Algunos atributos tienen un significado predefinido y, por lo tanto, son interpretados y aplicados por el navegador. Por ejemplo, si queremos agregar una imagen a un documento HTML, usamos la etiqueta de imagen y el atributo fuente de la siguiente manera:
<img src="image-file.jpg" alt="Un ejemplo de imágen">
El navegador interpreta el atributo src y carga la imagen denominada image-file.jpg. Tenga en cuenta que, en este caso, también hemos proporcionado un atributo alt con un valor de imagen de ejemplo. Ese corto trozo de texto se llama texto alternativo y se mostrará si la imagen no se carga. Además, el texto alternativo es utilizado por las tecnologías de asistencia para los usuarios con problemas de visión.
Se supone que cada imagen tiene un atributo de fuente y de texto alternativo. Sin embargo, hay varios atributos de imagen adicionales que quizás también desee conocer.
Contenido versus presentación
Un concepto importante para entender sobre HTML es que está diseñado para definir el contenido de una página web. No está diseñado para definir la presentación o apariencia de una página web. Hay otras tecnologías, especialmente CSS, diseñadas para diseñar la presentación de páginas web.
Cuando se escribe HTML es fundamental utilizar la etiqueta con el significado semántico adecuado para cada parte de su página web. No seleccione etiquetas basadas en cómo se ven cuando las ve con un navegador, seleccione las etiquetas basándose en lo que significan. A continuación, utilice CSS para que su página web se vea de la forma en que desea que se vea.
Estructura del documento HTML
Hay una estructura básica que cada documento HTML debe seguir. Aquí está:
<!doctype html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
<!-- Agregue el contenido de la página web aquí. -->
</body>
</html>
Cada documento HTML debe comenzar con una declaración de tipo de documento. Esta declaración le dice al navegador que el documento contiene HTML. Todo el HTML en un documento HTML debe estar contenido entre las etiquetas html. Como resultado, una etiqueta html de apertura debe ser la primera etiqueta que aparece después de la declaración de tipo de documento y una etiqueta html de cierre debe ser la última etiqueta en el documento.
Entre las etiquetas de apertura y el cierre de html debe ser un conjunto de etiquetas de encabezado seguidas por un conjunto de etiquetas de cuerpo. El documento de encabezado debe contener el título del sitio y también puede contener metadatos sobre la página web y enlaces a recursos externos de JavaScript y CSS. El cuerpo del documento contiene todo el contenido visible de la página web.
Hay muchas etiquetas adicionales que conocerá a medida que aprenda HTML. Sin embargo, cada documento HTML debe comenzar con esta estructura básica.
Recursos
Hay muchos lugares donde puede aprender HTML. Hemos explorado la web e identificado cinco recursos que puede utilizar para obtener una educación en HTML completa y exhaustiva:
- Introducción a un XHTML: una introducción exhaustiva a HTML que también cubre la sintaxis adecuada de XHTML (piense en XHTML como una versión más estricta de HTML). Este tutorial recorre la historia de HTML, cubre la base, introduce la sintaxis de HTML y la estructura de documentos, cubre las etiquetas de HTML más comunes, y mucho más. Tómese el tiempo para trabajar a través de este tutorial exhaustivo y saldrá preparado para crear documentos HTML complejos.
- Manual de HTML: este manual de HTML le enseñará HTML «de principio a fin». Comienza con una introducción sencilla a HTML que cubre los objetivos del lenguaje y la sintaxis básica. Más de 50 lecciones más tarde, terminará aprendiendo sobre el uso de medios en HTML y las etiquetas añadidas al lenguaje en HTML5. Si está buscando una introducción exhaustiva y exhaustiva a HTML, no busque más. La ha encontrado.
- Ejemplos de HTML: esta lista de etiquetas comunes de HTML puede convertirse en el primer lugar al que va, cuando no puede recordar la etiqueta exacta que desea utilizar. Esta lista incluye todas las etiquetas de HTML más comunes junto con una breve explicación para que pueda identificar rápidamente la etiqueta que está buscando.
- Tutorial de CSS: Comenzando con HTML + CSS: lo que HTML es para el contenido de una página web, CSS es para el estilo de una página web. En este tutorial, aprenderá los conceptos básicos del uso de CSS para diseñar sus páginas web HTML. También aprenderá la sintaxis CSS, cómo agregar CSS a un documento HTML y cómo vincular una hoja de estilo CSS externa a un documento HTML.
- Lenguajes de programación HTML y CSS: esta introducción a HTML y CSS se saltea la historia y la teoría y va directo a la aplicación; perfecta para estudiantes que quieren producir resultados lo más rápido posible. Este tutorial introduce todas las etiquetas HTML más importantes, explica cómo mostrar caracteres especiales, introduce la adición de estilos CSS tanto en línea como externamente y cubre los formularios y tablas en profundidad. Siga toda la guía y que acabará con una sólida comprensión de cómo HTML y CSS se combinan para hacer que las páginas web funcionen.
Conclusión
HTML es el lenguaje de programación utilizado para definir el contenido de una página web. Aprender HTML no es difícil y el desarrollo de una comprensión sólida de la lengua proporcionará una gran cantidad de información sobre cómo funciona la web. La siguiente parte depende de usted. Establezca un horario, elija un tutorial o dos, y empiece a aprender.
Referencia: http://www.whoishostingthis.com/es/recursos/guida-html/
