TECNOLOGÍAS WEB 2_HTML

Introducción a HTML y Tecnologías Web

Definición de HTML

• HTML, o Hypertext Markup Language, es un estándar que utiliza un metalenguaje de etiquetas para describir la estructura de las páginas web.

• Consiste en bloques de etiquetas que permiten generar el contenido visualizado en los navegadores.

Estructura Básica de una Página Web

• La estructura inicial incluye etiquetas específicas como DOCTYPE, que indica el tipo de documento y su contenido como HTML.

• Las etiquetas tienen una forma general: una etiqueta de apertura y otra de cierre, donde la segunda se representa con una contrabarra.

Encabezado y Metadatos

• El encabezado contiene metadatos como el título (title), que no se muestra en la página pero sí en la pestaña del navegador.

• Los metadatos pueden incluir información sobre el idioma y referencias a hojas de estilo.

Elementos Visuales en HTML

Renderización en Navegadores

• Se observa cómo se renderiza la página simple en un editor comparado con lo que aparece en el navegador.

• Es importante notar que el título aparece solo en la pestaña del navegador, no dentro del contenido visible.

Etiquetas Comunes

• Existen varias etiquetas importantes para texto, como BR (salto de línea), Strong (negrita), y M (cursiva).

• Las listas utilizan pares de etiquetas: <ol> para listas ordenadas y <ul> para listas desordenadas.

Listas y Elementos Bloque

Listas Ordenadas y Desordenadas

• En listas ordenadas se usa <ol>, mientras que cada elemento se define con <li>.

• Las listas desordenadas utilizan viñetas para representar elementos visualmente diferentes a las numeraciones.

Elementos Bloque vs. Inline

• Los elementos bloque son unidades completas dentro del diseño web, contrastando con elementos inline como Strong o M.

Elementos Básicos de HTML

Encabezados y su Jerarquía

• Los encabezados son elementos bloque típicos en HTML, con diferentes niveles (h1 a h6) que establecen jerarquías. Un encabezado de segundo nivel debe estar siempre por debajo de uno de primer nivel para mantener la estructura adecuada.

• La renderización de los encabezados varía ligeramente entre navegadores, pero generalmente el h1 es más grande que el h2, siguiendo un orden de importancia visual.

Párrafos y Bloques Genéricos

• Los párrafos se definen con la etiqueta <p>, comenzando y terminando con esta misma etiqueta. Se utilizan para bloques de texto dentro del contenido web.

• Los bloques genéricos se pueden crear usando <div>, permitiendo agrupar diferentes elementos. Esto ayuda a destacar áreas específicas en una página web.

Enlaces e Imágenes

• Los enlaces se crean con la etiqueta <a> y requieren un atributo href que define la URL a la que redirigen al hacer clic.

• El texto visible del enlace se coloca entre las etiquetas de apertura y cierre, mostrando lo que el usuario verá en pantalla.

Inserción de Imágenes

• Las imágenes se insertan utilizando la etiqueta <img> junto con el atributo src, que especifica la ubicación del archivo de imagen. También se pueden incluir atributos como alt para descripciones alternativas.

Uso del iFrame

• El elemento <iframe> permite insertar contenido externo, como videos. Se especifican atributos como altura y ancho para definir su tamaño en la página.

• Existen parámetros adicionales para personalizar el comportamiento del iframe, como eliminar bordes o permitir pantalla completa.

Creación de Estructuras Web

Navegación entre Páginas

• Se puede crear una jerarquía dentro del sitio web mediante enlaces internos a otras páginas (por ejemplo, contact.html), facilitando así una navegación fluida entre diferentes contenidos.

Recursos Adicionales

• Se mencionan recursos útiles como plantillas gratuitas disponibles en sitios web como HTML5UP, donde los usuarios pueden ver demos y modificar plantillas según sus necesidades.

Diseño Adaptativo

• Muchas plantillas ofrecen diseño responsivo, permitiendo visualizar cómo se verían en diferentes dispositivos (tabletas y móviles), lo cual es crucial para una buena experiencia del usuario.

¿Cómo ha evolucionado el estándar H2B5?

Evolución y nuevas etiquetas en HTML5

• Se menciona que el estándar H2B5 ha evolucionado, incorporando nuevas etiquetas que añaden información semántica, mejorando la descripción de los elementos definidos.

• Las etiquetas predefinidas permiten generar una estructura más ordenada y semántica en las páginas web, facilitando su comprensión tanto para desarrolladores como para buscadores.

Diferenciación entre etiquetas

• Es importante no confundir las etiquetas header y head; el head contiene metadatos, mientras que header se utiliza para definir encabezados visibles.

• La etiqueta nav se puede utilizar para crear un menú de navegación en la página web, mejorando la usabilidad del sitio.

Estructura de contenido

• Se distingue entre secciones estáticas (contenido descriptivo) y artículos dinámicos (noticias o entradas), donde los artículos pueden repetirse varias veces en una misma página.

• También se pueden usar otros elementos de bloque para describir partes específicas del contenido, como barras laterales comunes en blogs.

Mejora en la indexación por buscadores

• Utilizar correctamente las etiquetas HTML5 es crucial para que los buscadores puedan extraer información relevante de la página web.

• Una buena formación del código HTML influye directamente en cómo aparece una página web en los resultados de búsqueda, lo cual es fundamental para mejorar su visibilidad.