UNIVERSIDAD SERGIO
ARBOLEDA
Programación
Nivel Explorador
PREPARACIÓN SEMANA 1
Introducción al uso de etiquetas HTML para texto
Las etiquetas HTML son fundamentales para estructurar y dar formato al texto en una página web. A
continuación, se detallará el uso de las etiquetas más comunes para dar estilo al texto y crear
contenido atractivo.
❖ Etiqueta <h1> para encabezados de nivel 1
❖ Etiqueta <p> para párrafos de texto
❖ Etiqueta <strong> para resaltar texto en negrita
❖ Etiqueta <em> para resaltar texto en cursiva
❖ Etiqueta <a> para enlaces
❖ Etiqueta <ul> para listas desordenadas
❖ Etiqueta <ol> para listas ordenadas
❖ Etiqueta <li> para elementos de lista
❖ Etiqueta <br> para saltos de línea
Etiqueta <h1> para encabezados de nivel 1
❖ Encabezados Impactantes
• La etiqueta <h1> se utiliza para definir el encabezado más importante de una página web, lo
que le otorga un gran impacto visual y jerarquía.
❖ Rango de Prioridad
• El uso adecuado de la etiqueta <h1> ayuda a los motores de búsqueda y a los usuarios a
comprender la importancia y el tema principal de la página.
❖ Clara Estructuración
• Permite una clara estructuración del contenido, lo que facilita la navegación y comprensión
del sitio web por parte de los usuarios.
Etiqueta <p> para párrafos de texto
❖ Contenido Organizado
• La etiqueta <p> se utiliza para definir párrafos de texto, lo que brinda una organización clara y
jerárquica del contenido en un sitio web.
❖ Facilidad de Lectura
• Permite presentar información de manera clara y estructurada, lo que facilita la lectura y
comprensión por parte de los visitantes del sitio web.
❖ Clara Estructuración
• El uso adecuado de la etiqueta <p> contribuye a la optimización para buscadores, lo que
favorece la clasificación de la página en los resultados de búsqueda.
Etiqueta <strong> para resaltar texto en negrita
❖ Énfasis Visual
• La etiqueta <strong> aporta un énfasis visual al texto, ayudando a resaltar información
importante para los lectores.
❖ Jerarquía de Contenido
• Se utiliza para dar peso visual a ciertas palabras o frases, permitiendo una jerarquización clara
del contenido.
❖ Accesibilidad Web
• Contribuye a la accesibilidad web al proporcionar un medio para destacar información crucial
para personas con discapacidad visual.
Etiqueta <em> para resaltar texto en cursiva
❖ Énfasis Sutil
• La etiqueta <em> brinda un énfasis sutil y elegante al texto, permitiendo resaltar de manera
discreta ciertas palabras o frases.
❖ Énfasis en el Significado
• Se utiliza para resaltar el significado de una palabra en el contexto, con un énfasis más en el
sentido semántico que en el visual.
❖ Estilo Eficiente
• Proporciona un estilo de énfasis versátil y eficiente para dar mayor significado a palabras o
frases específicas del texto.
Etiqueta <a> para enlaces
❖ Conexiones Externas
• La etiqueta <a> se utiliza para crear enlaces a otras páginas web, brindando a los usuarios la
capacidad de navegar hacia contenido relevante externo.
❖ Interacción Dinámica
• Facilita la interacción dinámica, permitiendo a los visitantes explorar recursos adicionales que
enriquezcan su experiencia en el sitio web.
❖ SEO y Navegación
• Contribuye al SEO al crear enlaces relevantes, proporcionando una sólida estructura de
navegación interna y externa para el sitio web.
Etiqueta <ul> para listas desordenadas
❖ Organización Visual
• La etiqueta <ul> permite organizar el contenido en listas desordenadas, logrando una
presentación visualmente atractiva y fácil de escanear.
❖ Flexibilidad de Contenido
• Ofrece flexibilidad para listar elementos sin un orden específico, siendo útil para mostrar
información sin requerir una jerarquía estricta.
❖ Estilo Personalizable
• Permite personalizar el estilo y la presentación de la lista, adaptándose al diseño visual y
brindando opciones creativas de visualización.
Etiqueta <ol> para listas ordenadas
❖ Secuenciación Clara
• La etiqueta <ol> se utiliza para crear listas ordenadas con una secuencia numérica clara, lo
que brinda una estructura lógica al contenido.
❖ Organización Jerárquica
• Permite establecer una jerarquía clara en la presentación del contenido, indicando la
importancia y el orden secuencial de los elementos en la lista.
❖ Impacto Visual
• Brinda un impacto visual inmediato al presentar el contenido de manera secuencial, lo que
facilita la comprensión y la asimilación de la información.
Etiqueta <br> para saltos de línea
❖ Características
• Al etiqueta <br> se utiliza principalmente para separar líneas en lugares específicos, como en
direcciones o poesía, donde se necesitan espacios adicionales.
• Facilita la inserción de saltos de línea en el texto, lo que es útil para separar diferentes
secciones y mejorar la legibilidad del contenido.
• Contribuye a la estructuración clara del texto, permitiendo una presentación visual ordenada y
de fácil comprensión para los lectores.
Etiquetas de imágenes en HTML
Las etiquetas de imágenes son fundamentales para la presentación visual en sitios web. La etiqueta
IMG se utiliza para incrustar imágenes en una página. Es importante proporcionar un atributo src con
la ruta de la imagen y un atributo alt con texto descriptivo para accesibilidad.
❖ Uso en el Desarrollo Web
• La etiqueta <img> se utiliza para mostrar imágenes en una página web. Se debe incluir el
atributo src con la URL de la imagen para que se muestre correctamente.
Para incrustar una imagen en HTML, se utiliza la etiqueta <img> con el
atributo src que apunta a la ubicación de la imagen en el servidor.
Código de Ejemplo
Atributos de la etiqueta
❖ src
• Este atributo especifica la URL de la imagen que se va a mostrar.
❖ href
• Este atributo especifica la URL de destino del enlace
❖ target
• Este atributo especifica en dónde abrir el documento vinculado.
¿Preguntas?