Ciencias de la Computación

Fundamentos del Desarrollo Web

elemento HTML

Historia585Actualizado 7 sept 20265 páginas

Introducción al Lenguaje HTML

Denunciar

Yanira Moya Vega@yxnirx52

Añadir a fuentes de Google

HTML es el lenguaje fundamental que da vida a todas las páginas web que ves cada día. Si alguna vez te has preguntado cómo se crean las webs, HTML es tu punto de partida perfecto.

Lenguaje de marcas HTML – página 1

Inscríbete para ver los apuntes.
¡Es gratis!

Acceso a todos los documentos
Mejora tus notas
Únete a millones de estudiantes

Al registrarte aceptas las Condiciones del servicio y la Política de privacidad.

¿Qué es HTML y por qué es importante?

HTML (HyperText Markup Language) es básicamente el esqueleto de cualquier página web. Piénsalo como los cimientos de una casa: sin él, no hay estructura donde construir nada más.

Este lenguaje de marcado funciona usando etiquetas que le dictan al navegador cómo mostrar el contenido. Es como darle instrucciones específicas: "esto es un título", "esto es un párrafo", "aquí va una imagen".

La estructura básica de cualquier página HTML siempre sigue el mismo patrón: empieza con <html>, luego tiene una cabecera <head> y un cuerpo <body>, y termina con </html>. Esta consistencia hace que sea súper fácil de aprender.

¡Dato curioso! HTML lo controla el W3C (World Wide Web Consortium), que básicamente decide cómo funciona la web. Sin HTML, no existirían las redes sociales, YouTube o cualquier página que uses.

Lenguaje de marcas HTML – página 2

Inscríbete para ver los apuntes.
¡Es gratis!

Acceso a todos los documentos
Mejora tus notas
Únete a millones de estudiantes

Al registrarte aceptas las Condiciones del servicio y la Política de privacidad.

Editores y elementos básicos de HTML

Para empezar a programar en HTML no necesitas software caro. Con el simple Bloc de notas de Windows ya puedes crear tu primera página web. Solo tienes que guardar tu archivo con extensión .html y codificación UTF-8.

Los elementos HTML son los bloques de construcción básicos. Cada uno tiene una función específica: <h1> para títulos principales, <p> para párrafos, <br> para saltos de línea, y <b> para texto en negrita.

Los atributos son como características extras que puedes añadir a los elementos. Por ejemplo, href en los enlaces te dice adónde ir, src en las imágenes indica qué mostrar, y style te permite cambiar colores y tamaños.

Tip práctico: Siempre incluye el atributo alt en las imágenes. No solo ayuda a personas con discapacidad visual, sino que también mejora tu posicionamiento en Google.

Lenguaje de marcas HTML – página 3

Inscríbete para ver los apuntes.
¡Es gratis!

Acceso a todos los documentos
Mejora tus notas
Únete a millones de estudiantes

Al registrarte aceptas las Condiciones del servicio y la Política de privacidad.

Encabezados y párrafos: organizando tu contenido

Los encabezados HTML van del <h1> al <h6>, donde h1 es el más importante (y más grande) y h6 el menos importante. Es como una jerarquía: piensa en h1 como el título de un libro, h2 como capítulos, y h3 como secciones.

Los párrafos se crean con <p> y automáticamente añaden espacio antes y después. Es la forma más natural de organizar texto largo en tu página web.

Para darle más estructura visual, puedes usar <hr> que crea una línea horizontal para separar contenido, y <br> para saltos de línea simples sin empezar un párrafo nuevo. Son como las herramientas básicas de formato.

Consejo de SEO: Google lee los encabezados para entender tu contenido. Usa h1 para tu título principal y estructura el resto de forma lógica. ¡Es como crear un índice perfecto!

Lenguaje de marcas HTML – página 4

Inscríbete para ver los apuntes.
¡Es gratis!

Acceso a todos los documentos
Mejora tus notas
Únete a millones de estudiantes

Al registrarte aceptas las Condiciones del servicio y la Política de privacidad.

Estilos y formato de texto

El atributo style es tu mejor amigo para hacer que tu página se vea genial. Con background-color cambias fondos, con color modificas el texto, y con font-family eliges tipografías que reflejen tu personalidad.

Los elementos de formato te permiten enfatizar contenido de forma inteligente. <strong> y <b> ponen texto en negrita, pero <strong> también le dice a Google que es importante. <em> y <i> hacen cursiva con el mismo principio.

Para citas y referencias, HTML tiene etiquetas específicas: <blockquote> para citas largas, <q> para citas cortas, y <abbr> para abreviaturas. Estas no solo se ven bien, sino que añaden significado semántico.

Dato técnico: Usar las etiquetas correctas (como <strong> en lugar de <b>) no solo es buena práctica, sino que ayuda a los lectores de pantalla y mejora la accesibilidad de tu web.

Lenguaje de marcas HTML – página 5

Inscríbete para ver los apuntes.
¡Es gratis!

Acceso a todos los documentos
Mejora tus notas
Únete a millones de estudiantes

Al registrarte aceptas las Condiciones del servicio y la Política de privacidad.

Comentarios y colores: los toques finales

Los comentarios HTML son invisibles para los usuarios pero esenciales para ti. Con la sintaxis  puedes dejar notas para recordar qué hace cada sección o temporalmente ocultar contenido.

Los colores transforman completamente tu página web. Puedes usar nombres simples como "red" o "blue", pero también tienes opciones avanzadas como valores RGB, HEX o HSL para colores exactos y profesionales.

Los valores de color te dan control total: RGB usa números del 0-255 para rojo, verde y azul; HEX usa códigos como #ff6347; y HSL trabaja con matiz, saturación y luminosidad. Cada sistema tiene sus ventajas según lo que necesites.

Tip de diseño: Los colores HEX son los más populares en diseño web. Herramientas como ColorPicker te ayudan a encontrar códigos exactos y crear paletas que combinen perfectamente.

Pensamos que nunca lo preguntarías...

Nuestro compañero de IA está específicamente adaptado a las necesidades de los estudiantes. Basándonos en los millones de contenidos que tenemos en la plataforma, podemos dar a los estudiantes respuestas realmente significativas y relevantes. Pero no se trata solo de respuestas, el compañero también guía a los estudiantes a través de sus retos de aprendizaje diarios, con planes de aprendizaje personalizados, cuestionarios o contenidos en el chat y una personalización del 100% basada en las habilidades y el desarrollo de los estudiantes.

Puedes descargar la app en Google Play Store y Apple App Store.

Sí, tienes acceso gratuito a los contenidos de la aplicación y a nuestro compañero de IA. Para desbloquear determinadas funciones de la aplicación, puedes adquirir Knowunity Pro.

Contenido similar

Tecnología e ingeniería

Máquinas y mecanismos

Apuntes con organizadores gráficos

Informática y tecnología

expresion y comunicacion tecnica

informacion sobre escalas, perspectivas de un objeto y perspectiva caballera

Homología y Afinidad

H A

Informática y tecnología

EJERCICIOS DE VISTAS

Ejercicios de vistas, a partir de un objeto obtener su alzado, perfil y planta.

Informática y tecnología

Vistas de un objeto_TEC

Apunte resumido de las vistas de un objeto para 2ESO

Informática y tecnología

Mecanismos

Teoría y ejercicios

Contenidos más populares: Historia

Apuntes Historia de España 2bach

Apuntes Historia de España desde el 1.1 hasta el 11.2

2° Bach6672177

HISTORIA DE ESPAÑA.

Contenido 2o Bachillerato Madrid COMPLETO. Historia de España.

HISTORIA DE ESPAÑA

Apuntes 2 de bachillerato

historia de españa

todos los temas que caen en selectividad de historia de españa y documentos no resueltos

Epígrafes, historia 1,2,3 2bach

Paleolítico y neolítico en la península ibérica

Historia de España

del tema 1 y 2. Temas siglo XIX

2° Bach11.768574

Historia 2bach

Epígrafes de historia de españa de segundo de bachillerato del curso 2023/2024

PAU (2° Bach)12.741415

Tema 1 Historia de España; De los orígenes al reino visigodo

Desde la prehistoria de la Península Ibérica con todas las conquistas de los pueblos prerromanos hasta los romanos y visigodos

PAU (2° Bach)84311

Conceptos breves del Antiguo Régimen (tema 1)

Los conceptos breves del antiguo régimen

Contenidos más populares

Carnet Conducir

Apuntes permiso de conducir tipo B

2° Bach9485238

Tips de estudio

Apuntes teorico carnet de conducir ACTUALIZADO

sacate el teorico con estos apuntes!!!

2° Bach5581154

Apuntes examen teórico de coche

Os dejo por aquí apuntes hechos por mi de lo imprescindible para obtener el apto en el examen teórico del permiso b.

PAU (2° Bach)7857197

Apuntes Teorico Permiso B

Examen Teorico del Coche

2° Bach5564118

Resumen completo carnet de conducir B – Esquemas y teoría explicada (40 pág)

Resumen claro, directo y actualizado con todo lo que entra en el examen teórico del carnet B. Incluye definiciones, señales, velocidades, maniobras, luces, ADAS, documentación y trucos para aprobar. Ideal para repasar rápido y entender todo.

2° Bach6852193

Formulación inorgánica 1-2 Bachillerato

Apuntes para Química y PAU

1° Bach3889119

INGLÉS B1 (Cambridge)

Apuntes para preparación B1 (completo)

4° ESO11.5581472

Tiempos verbales en inglés

Están los tiempos verbales desde el presente, el pasado y el futuro

Teórico Coche B 2026

Teoría de el Coche B

Mira lo que dicen nuestros usuarios. Les encanta - y a tí también.

4.6/5App Store

4.7/5Google Play

Pablousuario de iOS

La app es muy fácil de usar y está muy bien diseñada. Hasta ahora he encontrado todo lo que estaba buscando y he podido aprender mucho de las presentaciones. Definitivamente utilizaré la aplicación para un examen de clase. Y, por supuesto, también me sirve mucho de inspiración.

Elenausuaria de Android

Esta app es realmente genial. Hay tantos apuntes de clase y ayuda [...]. Tengo problemas con matemáticas, por ejemplo, y la aplicación tiene muchas opciones de ayuda. Gracias a Knowunity, he mejorado en mates. Se la recomiendo a todo el mundo.

Anausuaria de iOS

Vaya, estoy realmente sorprendida. Acabo de probar la app porque la he visto anunciada muchas veces y me he quedado absolutamente alucinada. Esta app es LA AYUDA que quieres para el insti y, sobre todo, ofrece muchísimas cosas, como ejercicios y hojas informativas, que a mí personalmente me han sido MUY útiles.