Introducción a HTML y Desarrollo Web: Conceptos y Elementos Clave

Enviado por Chuletator online y clasificado en Informática y Telecomunicaciones

Escrito el 21 de Diciembre de 2024 en español con un tamaño de 13,76 KB

Conceptos Generales

Internet: Sistema de redes interconectadas que permite el intercambio de información.
Web: Colección de información accesible a través de Internet, basada en hipertexto.
Página Web: Documento que se puede visualizar desde un navegador.
Usabilidad: Mide la facilidad de uso de una página web.
Aplicación Web: Programa accesible desde un navegador y ejecutado en un servidor.

Lenguajes de Marcas Comunes

HTML: Utilizado para crear páginas web.
CSS: Define la presentación visual de los documentos web.
XML: Utilizado para almacenar e intercambiar datos.

Lenguajes de Marcado

Los lenguajes de marcado estructuran y presentan datos mediante marcas que indican la estructura o la presentación del texto. Por ejemplo, etiquetas como <p> para un párrafo o <i> para texto en cursiva.

Características de los Lenguajes de Marcas

Son independientes de la plataforma y se pueden editar con cualquier editor de texto.
Son flexibles y fáciles de crear.

Clasificación de Lenguajes de Marcas

De procedimiento: Como TeX o LaTeX, donde las etiquetas son visibles para el usuario.
De presentación: Ejemplo Microsoft Word, donde las etiquetas no son visibles.
Descriptivos o semánticos: Como HTML y XML, donde las etiquetas describen la estructura del contenido, pero no cómo se presentan.

Anidamiento de Etiquetas

Las etiquetas pueden ser anidadas para indicar que una parte del contenido está dentro de otra. Ejemplo: <persona><nombre>Angel</nombre></persona>. Es importante respetar el orden de anidamiento.

Lenguajes de Marcas vs Lenguajes de Programación

Los lenguajes de marcas no son lenguajes de programación, ya que no realizan cálculos o manipulación de variables, sino que se utilizan para describir la estructura y presentación de los datos.

Historia

En los años 60, IBM desarrolló el GML, que fue la base para el SGML. Después, surgieron HTML y XML, con HTML como estándar para la web.

Herramientas de Edición

Existen tanto herramientas offline como online para crear y editar lenguajes de marcas. Ejemplos incluyen Visual Studio Code, Sublime Text y Notepad++.

HTML: Lenguaje de Marcado de Hipertexto

HTML es el estándar usado para crear páginas web. Se exploran sus evoluciones desde 1990, comenzando con HTML desarrollado por Tim Berners-Lee y pasando por versiones como HTML 2.0, 3.2, HTML 4.0, XHTML, hasta llegar a HTML5. Cada versión introduce mejoras, como el soporte para hojas de estilo CSS, mejor interacción con JavaScript y una estructura semántica más robusta en HTML5.

Estructura de un Documento HTML

Un documento HTML tiene una estructura básica que incluye la declaración del tipo de documento, elementos <html>, <head>, y <body>. El elemento <head> contiene metainformación como el título, scripts, y hojas de estilo, mientras que el <body> es donde se coloca el contenido visible de la página.

Declaración de tipo de documento (DTD)

Cada documento HTML comienza con una declaración DTD que especifica el tipo y la versión de HTML. HTML5 simplifica esta declaración con <!DOCTYPE html>.

Elementos y Atributos

Un elemento HTML consta de una etiqueta de apertura y una de cierre, y puede incluir atributos que proporcionan información adicional, como id, class, y style. Atributos como lang, dir, y title son comunes a muchos elementos. HTML también distingue entre elementos vacíos (como <br>, <hr>, <img>) y aquellos con contenido.

Elementos Comunes del Documento HTML

<head>: Contiene información sobre el documento, como el título, las metaetiquetas, y enlaces a estilos o scripts.
<body>: Contiene el contenido visible de la página. Dentro de este, se usan etiquetas para dar formato al texto, como <h1>, <p>, <b>, <i>, <br>, <hr>, etc.

Etiquetas y Atributos Específicos

<title>: Define el título de la página, visible en la barra del navegador.
<meta>: Define metainformación sobre el documento, como el autor o la codificación de caracteres.
<link>: Enlaza documentos externos, como hojas de estilo CSS.
<base>: Define la URL base para los enlaces relativos en el documento.

Elementos de Formato de Texto

<h1> - <h6>: Define encabezados, con <h1> siendo el más grande.
<p>: Delimita párrafos.
<br>: Inserta saltos de línea.
<hr>: Inserta una línea horizontal.
<b> y <strong>: Para texto en negrita, con <strong> indicando mayor énfasis.
<i> y <em>: Para texto en cursiva, con <em> dando énfasis semántico.
<mark>: Resalta texto como si fuera subrayado.

Cómo Escapar Caracteres HTML

Cuando se necesiten mostrar caracteres especiales en HTML, como las etiquetas < o >, se deben usar códigos de escape como < o > para evitar que se interpreten como código HTML.

Listas de elementos en HTML

Listas no ordenadas (<ul>): Elementos agrupados sin un orden específico, utilizando etiquetas <li> para cada ítem.
Listas ordenadas (<ol>): Elementos agrupados en un orden secuencial. Se puede personalizar el tipo de numeración (números, letras, romanos) y el orden puede ser inverso o empezar desde un número específico.
Listas de definición (<dl>): Se utilizan para términos y sus definiciones, con etiquetas <dt> para el término y <dd> para la definición.

Las listas pueden ser anidadas (listas dentro de listas) y estilizadas con CSS, utilizando propiedades como list-style-type, list-style-image, y list-style-position.

Tablas en HTML

Las tablas presentan datos en filas y columnas. Se definen con la etiqueta <table>, y las filas se crean con <tr>. Las celdas de la tabla se indican con <td>.
Las tablas pueden tener cabeceras (<th>) y títulos (<caption>), y las celdas pueden combinarse usando colspan y rowspan para un formato más complejo.
Se recomienda usar CSS para estilizar las tablas en lugar de atributos HTML antiguos como border.
Se pueden usar etiquetas semánticas como <thead>, <tfoot>, y <tbody> para organizar las partes de la tabla y aplicar estilos diferenciados.

Enlaces en HTML (`<a>`)

Los enlaces permiten vincular una página origen a otra de destino, usando la etiqueta <a>, con el atributo href para especificar la URL de destino.
El atributo target controla dónde se abrirá el enlace (misma ventana, nueva ventana, marco padre, etc.).
Los enlaces tienen un estilo predeterminado que puede modificarse mediante CSS (enlace no visitado, visitado o activo).
URLs: Pueden ser absolutas (completas) o relativas (solo la parte que hace referencia al archivo dentro del mismo sitio).

Enlaces a Marcadores

Los marcadores se utilizan para saltar a secciones específicas dentro de una página larga, mediante el uso de id y enlaces referenciados con #.

Imágenes en HTML (`<img>`)

Las imágenes complementan los textos y se insertan usando la etiqueta <img>, con atributos como src (URL de la imagen) y alt (texto alternativo).
Imágenes como enlaces: Pueden usarse imágenes como elementos clicables en lugar de texto.
Imágenes de fondo: Se pueden establecer imágenes como fondo de la página o de elementos específicos como párrafos usando background-image.
Posicionamiento de imágenes: Para que las imágenes se alineen con el texto, se usa la propiedad CSS float para posicionarlas a la izquierda o derecha.

Marcos (`<iframe>`)

Un marco permite insertar un documento HTML dentro de otro. Se define con la etiqueta <iframe>, utilizando el atributo src para indicar la URL del documento a mostrar.
Los atributos width y height controlan el tamaño del marco. El borde del marco se puede eliminar con CSS (border:none).

Multimedia

HTML5 introduce elementos como <audio> y <video> para incrustar contenido multimedia directamente en las páginas web.
Los formatos multimedia admitidos incluyen:
- Audio: MP3, WAV, Ogg, etc.
- Video: MP4, WebM, Ogg, etc.

Vídeo (`<video>`)

La etiqueta <video> se usa para mostrar videos, con el atributo controls para agregar controles y autoplay para que se reproduzca automáticamente.
El atributo <source> permite especificar múltiples formatos de vídeo para asegurar la compatibilidad con diferentes navegadores.

Vídeos de YouTube

Para insertar un video de YouTube, se usa el elemento <iframe>, especificando la URL del video con parámetros como autoplay=1 (para reproducir automáticamente) y mute=1 (para reproducir sin sonido).

Audio (`<audio>`)

La etiqueta <audio> permite agregar archivos de audio, con los mismos atributos que <video> para controlar la reproducción, como controls y autoplay.
Los navegadores que no soporten estas etiquetas mostrarán el texto entre las etiquetas como mensaje de error.

Otros elementos multimedia

<embed> y <object> son elementos más generales que se pueden usar para insertar recursos externos, pero se recomienda usar etiquetas específicas como <img>, <video>, y <audio> según el tipo de contenido.

Agrupadores de contenido vs Secciones

En versiones anteriores como HTML4, solo se usaba la etiqueta <div> para organizar el contenido, lo que resultaba en código difícil de manejar. HTML5 introduce etiquetas específicas para mejorar la claridad y reutilización del código, como <article>, <section>, <nav>, <aside>, <header>, <footer>, y <main>.

Agrupadores de contenido

<div>: Se mantiene en HTML5, pero se usa principalmente para agrupaciones no específicas. Se emplea con fines decorativos y para aplicar estilos mediante CSS.
<span>: Es un contenedor de línea, usado para aplicar estilos a elementos de línea como texto o enlaces.

Elementos de Sección

<main>: Agrupa el contenido principal de la página. Solo debe haber uno por página y no debe incluirse en otras secciones.
<header>: Agrupa el contenido inicial de la página o de una sección específica. Puede contener elementos como el logo, menú o el título principal.
<nav>: Agrupa enlaces de navegación. Puede haber varios <nav> en una página, organizados para enlaces generales, secciones internas, o enlaces a otros sitios.
<section>: Agrupa apartados del contenido principal de la página, generalmente con un título. Las secciones pueden incluir otras secciones o artículos.
<article>: Agrupa contenido independiente y completo, como un artículo o entrada de blog. Puede incluir otros artículos o secciones.
<aside>: Contenido secundario o relacionado, como anuncios o enlaces externos. Suele situarse en los laterales de la página.
<footer>: Contiene la información final del documento, como el autor, enlaces relacionados, o condiciones de uso.
<address>: Se utiliza para mostrar la información de contacto del autor del contenido, como dirección de correo electrónico o teléfono, usualmente en el pie de página.

Entradas relacionadas:

Etiquetas: