¡Descarga PROGRAMACIÓN - HTML, CSS, JavaScript, Python 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
.mi-clase { font-family: Arial, sans-serif; } Selector de ID: Selecciona un único elemento con un ID específico. #mi-id { background-color: yellow; }
2.2. Selectores Compuestos
Puedes combinar varios selectores para ser más específico: h1, h2, h3 { font-weight: bold; } Esto aplica el estilo a los encabezados , y .
2.3. Selectores de Atributo
Puedes seleccionar elementos basados en el valor de un atributo. a[href^="https"] { color: green; /* Para enlaces que comienzan con "https" */ }
2.4. Selectores de Pseudo-clase
Las pseudo-clases se utilizan para definir el estado de un elemento, como cuando el cursor está sobre él. :hover: Aplica estilo cuando el ratón pasa sobre un elemento. a:hover { color: red; } :focus: Se activa cuando un elemento, como un campo de formulario, recibe el foco. input:focus { border-color: blue; }
2.5. Selectores de Pseudo-elemento
Los pseudo-elementos permiten aplicar estilo a partes específicas de un elemento. ::before: Inserta contenido antes de un elemento. p::before { content: "Nota: "; font-weight: bold; } ::after: Inserta contenido después de un elemento. p::after { content: " (fin)"; }
3. Propiedades de CSS
3.1. Propiedades de Texto
color: Establece el color del texto. p { color: red; } font-size: Define el tamaño de la fuente. p { font-size: 16px; } font-family: Especifica la fuente a usar. p { font-family: 'Arial', sans-serif; } font-weight: Define el grosor de la fuente (normal, bold). p { font-weight: bold; } text-align: Alinea el texto dentro de un elemento.
- padding: Espacio dentro del borde, alrededor del contenido.
- border: El borde que rodea el contenido y el padding.
- margin: Espacio fuera del borde, que separa el elemento de otros elementos. Ejemplo de caja: div { margin: 20px; padding: 10px; border: 1px solid black; width: 200px; height: 100px; }
3.4. Propiedades de Display
display: Define el tipo de visualización de un elemento. block: El elemento ocupa toda la línea disponible. div { display: block; } inline: El elemento ocupa solo el espacio necesario. span { display: inline; } inline-block: Es un híbrido de inline y block. .item { display: inline-block; } visibility: Controla la visibilidad del elemento, pero no su espacio. div { visibility: hidden; /* El div es invisible, pero sigue ocupando espacio */ } position: Define cómo se posiciona un elemento en el flujo del documento. ○ static: Posicionamiento normal (predeterminado). ○ relative: Posiciona un elemento relativo a su posición original. ○ absolute: Posiciona un elemento de manera absoluta respecto a su contenedor más cercano con position: relative. ○ fixed: El elemento se posiciona de forma fija respecto a la ventana del navegador.
○ sticky: El elemento es tratado como relative hasta que se desplaza hasta una posición específica, donde se convierte en fixed. Ejemplo de uso de position: div { position: absolute; top: 10px; left: 20px; }
3.5. Propiedades de Flexbox
Flexbox es un modelo de disposición que permite distribuir los elementos de forma eficiente en un contenedor, incluso cuando su tamaño es desconocido o dinámico. display: flex: Define el contenedor como un contenedor flexible. .contenedor { display: flex; } justify-content: Alinea los elementos a lo largo del eje principal (horizontal, por defecto). .contenedor { justify-content: center; /* Centra los elementos / } align-items: Alinea los elementos a lo largo del eje transversal (vertical, por defecto). .contenedor { align-items: center; / Centra verticalmente los elementos */ } flex-wrap: Permite que los elementos se ajusten en varias líneas. .contenedor { flex-wrap: wrap; }
4. Técnicas Avanzadas de CSS
4.1. Transiciones
Las transiciones permiten que un elemento cambie de un estado a otro de manera suave.
El CSS Grid Layout es una herramienta extremadamente poderosa para crear diseños en dos dimensiones (filas y columnas) de manera muy flexible. A diferencia de Flexbox, que se utiliza principalmente para distribuir elementos en una sola dimensión (horizontal o vertical), Grid permite crear estructuras más complejas y controladas.
6.1. Fundamentos de CSS Grid
Para activar el modo de cuadrícula, se usa display: grid en el contenedor. Después, definimos las columnas y filas con grid-template-columns y grid-template-rows. Ejemplo básico de CSS Grid: .contenedor { display: grid; grid-template-columns: repeat(3, 1fr); /* Tres columnas de igual tamaño / grid-gap: 10px; / Espacio entre los elementos */ } .item { background-color: lightblue; padding: 20px; border: 1px solid #ddd; } HTML:
Elemento 1 Elemento 2 Elemento 3
● grid-template-columns: repeat(3, 1fr): Esto crea tres columnas de igual tamaño utilizando la unidad fr (fracción del espacio disponible). ● grid-gap: Define el espacio entre las celdas de la cuadrícula.
6.2. Propiedades Avanzadas de Grid
grid-template-areas: Permite definir un diseño en cuadrícula mediante nombres de áreas en lugar de especificar filas y columnas manualmente. .contenedor { display: grid; grid-template-areas: "header header header" "main main sidebar"
"footer footer footer"; grid-gap: 10px; } .header { grid-area: header; } .main { grid-area: main; } .sidebar { grid-area: sidebar; } .footer { grid-area: footer; } grid-column y grid-row: Controla cuántas columnas o filas ocupará un elemento dentro de la cuadrícula. .item { grid-column: span 2 ; /* El elemento ocupa dos columnas */ } auto-fill y auto-fit: Usados con grid-template-columns o grid-template-rows para crear columnas o filas que se ajusten automáticamente al espacio disponible. .contenedor { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
6.3. Ejemplo de Layout Complejo con Grid
.contenedor { display: grid; grid-template-columns: 1 fr 3 fr; /* Una columna pequeña y una grande */ grid-template-rows: 100px auto 50px; grid-template-areas: "header header" "sidebar main" "footer footer"; grid-gap: 20px; } .header { grid-area: header; background: #ccc; } .sidebar { grid-area: sidebar; background: #ddd; } .main { grid-area: main; background: #eee; } .footer { grid-area: footer; background: #ccc; }
