¡Descarga PROGRAMACIÓN - APRENDE HTML y más Apuntes en PDF de Programación Informática solo en Docsity!
HTML (Lenguaje de Marcado de Hipertexto)
1. Estructura Básica de un Documento HTML
Todo documento HTML tiene una estructura esencial, como esta:
Título de la página
Explicación:
- : Indica que el documento es HTML5.
- : Contiene todo el contenido del documento.
- Atributo lang="es": Define el idioma del contenido.
- : Contiene metadatos (no visibles en la página).
- : Contiene el contenido visible en el navegador.
2. Principales Etiquetas HTML y su Uso
2.1. Encabezados
Los encabezados ( a ) organizan el contenido jerárquicamente. Ejemplo: Este es un título principal Este es un subtítulo Encabezado de tercer nivel
2.2. Texto y Párrafos
●
: Define párrafos. ●
: Salto de línea. ● y : Negrita e itálica semántica. ● : Resaltar texto. ● : Muestra texto como código.
Ejemplo:
Este es un párrafo.
Texto con negrita y cursiva.
Texto resaltado.
console.log('Hola, Mundo');
2.3. Listas
Listas ordenadas ():
Elemento 1 Elemento 2
Listas no ordenadas ():
Elemento A Elemento B
Listas de definición ():
HTML Lenguaje de marcado. CSS Lenguaje de estilos.
2.4. Enlaces
Los enlaces () conectan documentos o recursos. Ejemplo: Visita Example Ir a la sección 2 Descargar PDF
● : Define la tabla. ● , , : Cabecera, cuerpo y pie. ● : Define filas. ● : Define encabezados de columnas. ● : Define celdas.
2.7. Formularios
Los formularios permiten recolectar datos del usuario. Ejemplo básico:
Nombre:
Edad:
Enviar
Atributos importantes: ● action: URL a la que se envían los datos. ● method: Método HTTP (get o post).
2.8. Multimedia
Audio:
Tu navegador no soporta audio.
Video:
Tu navegador no soporta video.
3. Etiquetas HTML Especiales
Metadatos ():
Semánticas de HTML5: ○ : Cabecera de un documento. ○ : Navegación. ○ : Sección del contenido. ○ : Contenido independiente. ○ : Contenido relacionado. ○ : Pie de página. Ejemplo:
Mi Sitio Web
Inicio Contacto
Título del artículo
Contenido del artículo.
© 2024 Mi Sitio Web
etiquetas y atributos para hacerlos más funcionales. con tipos avanzados: HTML5 amplió los tipos de entrada para hacer formularios más dinámicos y semánticos email:
○ Propósito: Para recibir correos electrónicos, con validación automática del formato. tel:
○ Propósito: Para recibir números de teléfono. date:
○ Propósito: Permite seleccionar una fecha desde un calendario. range:
○ Propósito: Para seleccionar valores en un rango (útil para sliders). number:
○ Propósito: Para aceptar solo números. url:
○ Propósito: Acepta URLs con validación automática.
y
5.2. Etiquetas de Estructura HTML5 Avanzada
: Define la cabecera de la página o una sección. Puede contener un logo, barra de navegación, etc.
Bienvenidos a mi sitio web
Inicio Acerca de Contacto
: Define el pie de página de un documento o sección.
© 2024 Mi Sitio Web
Desarrollado por Juan Pérez
: Se utiliza para agrupar contenido temáticamente, puede ser usado para cualquier tipo de contenido (como un artículo o un grupo de elementos relacionados).
Acerca de Nosotros
Somos una empresa líder en tecnología...
: Representa contenido autónomo que puede ser distribuido o reutilizado.
Título del Artículo
Contenido interesante que se puede leer de forma independiente.
: Define contenido relacionado con el contenido principal, pero que no es esencial. Se usa para barras laterales, anuncios o enlaces relacionados.
La API de geolocalización permite acceder a la ubicación del usuario a través del navegador. Ejemplo básico: Obtener mi ubicación
5.5. Almacenamiento Local con HTML5 (LocalStorage y SessionStorage)
LocalStorage: Permite almacenar datos de manera persistente en el navegador, incluso después de cerrar la ventana. Ejemplo básico: Guardar Datos Recuperar Datos
SessionStorage: Almacena datos solo durante la sesión actual del navegador (se borran cuando se cierra la pestaña o el navegador). Ejemplo básico:
Guardar Datos Recuperar Datos
6. Buenas Prácticas en HTML
- Uso correcto de las etiquetas semánticas: Utiliza etiquetas como , , , , etc., para mejorar la accesibilidad y la comprensión del código por parte de otros desarrolladores.
- Atributos alt en imágenes: Siempre proporciona descripciones alternativas (alt) para las imágenes, especialmente para mejorar la accesibilidad.
- Validación del HTML: Usa un validador de HTML (como W3C HTML Validator) para asegurarte de que tu código es válido y sigue las especificaciones.
- Evitar el uso de tablas para diseño: Aunque las tablas se usan para datos tabulares, no se deben utilizar para diseñar la estructura de
