Catálogo HTML5 de trabajos desde principiante hasta competente
Contenido Parte 1 Conceptos básicos de HTML Capítulo 1 Conceptos básicos de HTML 3 Vídeo didáctico: 22 minutos 1.1 Conceptos básicos de HTML 4 1.2 Historia del desarrollo de HTML 4 1.3 Estructura básica de HTML 5 1.3.1 Cómo escribir archivos HTML 5 1.3 .2 Etiqueta de inicio del archivo<html> 7 1.3.3 Etiqueta del encabezado del archivo<head> 7 1.3.4 Etiqueta del título del archivo<title> 7 1.3.5 Etiqueta del cuerpo del archivo<body> Archivo HTML 8 1.4.1 Cómo escribir archivos HTML 8 1.4.2 Escribir páginas manualmente 9 1.4.3 Usar software de visualización para crear páginas 10 1.4.4 Usar un navegador para explorar archivos HTML 14 1.4.5 Tomorrow Book Network desarrollado usando HTML 14 1.5 Resumen 15 1.6 Ejercicios 16 Capítulo 2 Marcado básico de archivos HTML 17 Vídeo didáctico: 44 minutos 2.1 Marca de encabezado HTML 18 2.2 Marca de título <title> 18 2.3 Marca de metainformación <meta> 2 Establecer descripción de página 20 2.3.3 Establecer herramientas de edición 20 2.3.4 Establecer información del autor 21 2.3.5 Restringir métodos de búsqueda 22 2.3.6 Establecer texto e idioma de la página web 22 2.3.7 Configuraciones Saltos programados de páginas web 23 2.3.8 Establecer período de validez 24 2.3.9 Deshabilitar llamadas desde el caché 24 2.3.10 Eliminar cookies caducadas 25 2.3.11 Forzar la apertura de nuevas ventanas 25 2.3.12 Establecer efectos de transición de páginas web 26 2.4 Etiqueta URL base<base> 29 2.5 Etiqueta del cuerpo de la página< body> 30 2.5.1 Establecer color de texto——texto 31 2.5.2 Atributo de color de fondo——bgcolor 32 2.5.3 Atributo de imagen de fondo——fondo 32 2.5.4 Establecer el atributo de texto del enlace - enlace 35 | margen - margen 37 | 2.6 Marca de comentario en la página 38 | 2.7 Ejercicio de ejemplo: crear una página web HTML básica 38 | 2.8 Resumen 39 | 2.9 Ejercicios 40 | Diseño de contenido de texto de una página web 41 | texto del título 42 3.1.1 Marca del texto del título <h> 42 3.1.2 Alineación del texto del título——alinear 43 3.2 Establecer el formato del texto 44 3.2.1 Establecer la fuente del texto——cara 44 3.2 Establecer el tamaño de la fuente——tamaño. 45 3.2.3 Establecer el color del texto——color 46 3.2.4 Negrita, cursiva, subrayado——fuerte, em, u 46 3.2.5 Superíndice y subíndice——sup, sub 47 3.2 6 Establecer tachado——tachado 48 3.2. .7 Marca de texto de ancho único——código 49 3.2.8 Espacio—— 49 3.2.9 Otros símbolos especiales 50 3.3 Establecer formato de párrafo 51 3.3.1 Marca de párrafo——p 51 3.3.2 Cancelar la marca de salto de línea de texto ——nobr 52 3.3.3 Marca de salto de línea——br 53 3.3.4 Mantener la marca de composición original——pre 53 3.3.5
Marca de alineación central——centro 54 3.3.6 Marca de sangría derecha——cita en bloque 55 3.4 Marca de línea horizontal 56 3.4.1 Agregar línea horizontal——hr 56 3.4.2 Establecer el ancho y alto de la línea horizontal——ancho, alto 57 3.4 .3 Establecer el color de la línea horizontal——color 58 3.4.4 Establecer la alineación de la línea horizontal——alinear 59 3.4.5 Eliminar la sombra de la línea horizontal——noshade 60 3.5 Otras marcas de texto 60 3.5.1 Marca de anotación de texto ——ruby 60 3.5.2 Declarar variables Marcado - var 61 | 3.5.3 Ignorar el marcado HTML - texto plano, Lista mark-ul 66 4.2.2 Tipo de símbolo de lista desordenada——tipo 67 4.3 Usar lista ordenada 69 4.3.1 Lista ordenada mark——ol 69 4.3.2 Atributos de la lista ordenada——tipo 70 4.3 3. El valor inicial de la lista ordenada - inicio 72 4.4 Definir la marca de lista - dl 73 4.5 Marca de lista de menú - menú 74 4.6 Lista de directorio - dir. 75 4.7 Usar listas anidadas 76 4.7.1 Definir anidamiento de listas 77 4.7.2 Anidamiento de listas desordenadas y listas ordenadas 78 4.8 Resumen 79 4.9 Ejercicios 80 Capítulo 5 Hipervínculos 81 Vídeo didáctico: 22 minutos 5.1 Conocimientos básicos de hipervínculos 82 5.1.1 Hipervínculos 82 5.1.2 Rutas absolutas 82 5.1.3 Rutas relativas 82 5.2 Establecimiento de hipervínculos 83 5.2.1 Sintaxis básica de etiquetas de hipervínculo 83 5.2.2 Creación de hipervínculos de texto 83 5.2.3 Configuración de la ventana de destino de los hipervínculos 85 5.3 Enlaces internos 87 5.4 Marcador enlaces 89 5.4.1 Crear marcadores 89 5.4.2 Enlace a favoritos en la misma página 91 5.4.3 Enlace a favoritos en diferentes páginas 92 5.5 Enlaces externos 93 5.5.1 A través del protocolo HTTP 94 5.5.2 A través de FTP 94 5.5.3 Enviar Correo electrónico 95 5.5 .4 Descargar archivo 96 5.6 Otros enlaces 98 5.6.1 Enlace de script 98 5.6.2 Enlace vacío 99 5.7 Resumen 99 5.8 Ejercicios 100 Capítulo 6 Uso de imágenes 101 Vídeo didáctico: 35 minutos 6.1 Formato básico de imágenes 102 6.2 Agregar image - img 102 6.3 Configuración de las propiedades de la imagen 103 6.3.1 Alto de la imagen——alto 103 6.3.2 Ancho de la imagen——ancho 104 6.3.3 Borde de la imagen——borde 105 6.3.4 Espaciado horizontal de la imagen——hspace 107 6.3.5 Imagen espaciado vertical—— —vspace 108 6.3.6 La alineación de la imagen en relación con la línea base del texto——align 108 6.3.7 El texto emergente de la imagen——alt 110 6.4 El hipervínculo de la imagen 111 6.4.1 Configuración del hipervínculo de la imagen 111 6.4.2 Configuración de la imagen Enlace activo 112 6.5 Resumen 116 6.6 Ejercicios 116 Capítulo 7 Aplicación de tablas 118 Video didáctico: 48 minutos 7.1 Creación de tablas 119 7.1.1 La composición básica de las tablas: tabla, tr, td 119 7.1 .2 El título de la tabla - título 120 7.1.3 Encabezado de la tabla——ésimo 121 7.2 Establecer la base de la tabla
Este atributo 123 7.2.1 El ancho de la tabla - ancho 123 7.2.2 La altura de la mesa - altura 125 7.2.3 La alineación de la tabla - alinear 126 7.3 Establecer el borde de la tabla 127 7.3.1 El ancho de el borde de la tabla - borde 127 7.3.2 El color del borde de la tabla——bordercolor 128 7.3.3 El ancho del marco interior de la tabla——cellspacing 130 7.3.4 El espacio entre el texto y el borde de la tabla— —cellpadding 131 7.4 Configurar el fondo de la tabla 132 7.4.1 El color de fondo de la tabla ——bgcolor 132 7.4.2 La imagen de fondo de la tabla ——background 133 7.5 Configurar las propiedades de fila de la tabla 134 7.5.1 Control de altura — —height 134 7.5.2 El color del borde de la fila ——bordercolor 135 7.5.3 El color de fondo de la fila ——bgcolor, background 136 7.5.4 Alineación horizontal del texto de la fila——align 137 7.5.5 Alineación vertical de la línea texto——valign 139 7.5.6 Alineación vertical del título de la tabla——align 140 7.6 Ajustar propiedades de celda 141 7.6.1 Tamaño de celda——ancho, alto 141 7.6.2 Extensión horizontal de celda——colspan 142 7.6.3 Extensión vertical de celda— —rowspan 143 7.6.4 Alineación de celdas——align, valign 144 7.6 5. El color de fondo de la celda 146 7.6.6 El color del borde de la celda - bordercolor 147 7.6.7 El borde brillante de la celda - bordercolorlight 148 7.6 .8 El borde oscuro de la celda - bordercolordark 150 7.6.9 El fondo de la celda Imagen - fondo 151 7.7 Estructura de la tabla 152 7.7.1 Marca del encabezado de la tabla - thead 153 7.7.2 Marca del cuerpo de la tabla - tbody 154 7.7.3 Pie de tabla mark - tfoot 156 7.8 Conjunto de incrustaciones de tablas 157 7.9 Resumen 159 7.10 Ejercicios 159 Capítulo 8 Marcado de capas - div 161 Vídeo didáctico: 33 minutos 8.1 Capa 162 8.1.1 Clasificación de capas 162 8.1.2 Definición de bloques de datos 162 8.2 Etiqueta <div> 163 8.2.1 < Introducción a la etiqueta ;div> 163 8.2.2 Atributos de la etiqueta <div> 164 8.2.3 Etiqueta <span> Introducción a la etiqueta <iframe> 172 8.3.2 Atributos de la etiqueta <iframe>172 8.4 Etiqueta <layer> y <ilayer> <ilayer> tag176 8.5 Usar div para crear una barra de navegación con menú desplegable 176 8.6 Resumen 179 8.7 Ejercicios 179 Capítulo 9 Editar el formulario 181 Video didáctico: 26 minutos 9.1 Usar etiquetas de formulario
——formulario 182 9.1.1 Acción de procesamiento——acción 182 9.1.2 Nombre del formulario——nombre 183 9.1.3 Método de transmisión——método 183 9.1.4 Método de codificación——enctype 184 9.1.5 Método de visualización de destino——objetivo 185 9.2 Agregar controles 185 9.3 Controles de clase de entrada 186 9.3.1 Campo de texto - texto 186 9.3.2 Campo de contraseña - contraseña 187 9.3.3 Botón de radio - radio 188 9.3.4 Casilla de verificación - casilla de verificación 189 5. Botón normal - botón 190 9.3.6 Botón Enviar - enviar 191 9.3.7 Botón Restablecer - restablecer 192 9.3.8 Campo de imagen - imagen 193 9.3.9 Campo oculto - oculto 195 9.3.10 Campo de archivo - —archivo 195 9.4 Marca de lista/menú 197 9.5 Área de texto mark - textarea 198 9.6 id mark 199 9.7 Resumen 200 9.8 Ejercicios 200 Capítulo 10 Página multimedia 202 Explicación en vídeo: 18 minutos 10.1 Configuración del texto en desplazamiento 203 10.1.1 Etiqueta de texto en desplazamiento - —marquee 203 10.1.2 Atributo de dirección de desplazamiento——dirección 203 10.1 .3 Atributo de modo de desplazamiento——comportamiento 204 10.1.4 Atributo de velocidad de desplazamiento——cantidad de desplazamiento 205 10.1.5 Atributo de retardo de desplazamiento——scrolldelay 206 10.1.6 Atributo de ciclo de desplazamiento—— —bucle 207 10.1.7 Atributos de rango de desplazamiento——ancho, altura 208 10.1.8 Desplazar atributos de color de fondo——bgcolor 209 10.1.9 Atributos de espacio de desplazamiento——hspace, vspace 209 10.2 Agregar música de fondo 211 10.2.1 Establecer música de fondo—— —bgsound 211 10.2.2 Establecer el número de reproducciones en bucle ——bucle 212 10.3 Agregar archivos multimedia 213 10.3.1 Agregar etiquetas de archivos multimedia——incrustar 213 10.3.2 Configurar operación automática——inicio automático 214 10.3.3 Configurar reproducción en bucle de archivos multimedia—— —bucle 215 10.3.4 Panel oculto— —oculto 216 10.3.5 Agregar otros tipos de archivos multimedia 217 10.4 Resumen 217 10.5 Ejercicios 218 Parte 2 Aplicaciones avanzadas de HTML 5 Capítulo 11 Nuevas características de HTML 5 221 Explicación en video: 6 minutos 11.1 Quién está desarrollando HTML 5 222 11.2 Nueva comprensión de HTML 5 222 11.2.1 Compatibilidad 222 11.2.2 Practicidad y prioridad del usuario 222 11.2.3 Reducir la complejidad a la simplicidad 223 11.3 Paradigma sin complementos 223 11.4 Nuevas características de HTML 5 224 11.5 Resumen 224 Capítulo 12 La diferencia entre HTML 5 y HTML 4 225 Explicación en vídeo: 51 minutos 12.1 Cambios de sintaxis 226 12.1.1 Cambios de sintaxis en HTML 5 226 12.1.2 Métodos de marcado en HTML 5 226 12.1.3 3 en la sintaxis de HTML 5 Puntos clave 227 12.1.4 Ejemplos de etiquetas 228 12.2 Nuevos y Elementos obsoletos 228 12.2.1 Nuevos elementos estructurales 228 12.2.2 Nuevos elementos semánticos a nivel de bloque 230 12.2.3 Nuevos elementos semánticos en línea 231 12.2.4 Nuevos elementos multimedia integrados y elementos interactivos
231 12.2.5 Tipos de nuevos elementos de entrada232 12.2.6 Elementos obsoletos233 12.3 Nuevos atributos y atributos abolidos234 12.3.1 Nuevos atributos234 12.3.2 Atributos obsoletos236 12.4 Atributos globales237 12.4.1 contenidoAtributo editable 237 12.4.2 diseño. Atributo de modo 238 12.4.3 atributo oculto 239 12.4.4 atributo de corrección ortográfica 239 12.4.5 atributo tabindex 240 12.5 Resumen 240 12.6 Ejercicios 240 Capítulo 13 Estructura de HTML 5 242 Explicación en video: 20 minutos 13.1 Nuevo 13.1.1 elemento de artículo 243 13.2.1 elemento de encabezado 251 13.2.2 elemento hgroup 252 13.2.3 elemento de pie de página 252 13.2.4 elemento de dirección 253 13.3 Resumen 253 13.4 Ejercicios 254 Capítulo 14 Formularios en HTML 5 255 Explicación en vídeo: 50 minutos 14.1 Nuevos elementos de formulario y propiedades 256 14.1.1 Nuevas propiedades 256 14.1.2 Añadido y mejorado tipos de elementos de entrada 259 14.1.3 Adición de elementos de salida 264 14.1.4 Aplicación de nuevos elementos para crear formularios de registro 264 14.2 Validación de formularios 266 14.2.1 Verificación automática 266 14.2.2 Método de verificación explícita checkValidity 267 14.2.3 Evitar la verificación 268 14.2 .4 Usar el método setCustomValidity para personalizar mensajes de error 268 14.3 Elementos de página agregados 269 14.3.1 Nuevo elemento de figura 270 14.3.2 Nuevo elemento de detalles 271 14.3.3 Nuevo elemento de marca 272 14.3.4 Nuevo elemento de progreso 274 14.3.5 Nuevo elemento de medidor 275 14.3.6 Lista ol mejorada 276 14.3.7 Lista dl mejorada 276 14.3.8 Elemento de cita estrictamente restringido 277 14.3.9 Elemento pequeño redefinido 278 14.4 Resumen 278 14.5 Ejercicios 279 Capítulo 15 Archivos y arrastrar y soltar en HTML 5 280 Explicación en video : 40 minutos 15.1 Seleccionar archivos 281 15.1.1 Seleccionar archivos a través del objeto de archivo 281 15.1.2 Usar la interfaz blob para obtener el tipo y tamaño del archivo 282 15.1.3 Filtrar archivos seleccionados por tipo 283 15.2 Usar la interfaz FileReader para leer files 285 15.2.1 Detectar si el navegador admite la interfaz FileReader 285 15.2.2 Métodos de la interfaz FileReader 285 15.2.3 Usar el método readAsDataURL para obtener una vista previa de imágenes 286 15.2.4 Usar el método readAsText para leer archivos de texto 287 15.2.5 Eventos en la interfaz FileReader 288 15.3 API de arrastrar y soltar 290 15.3.1 Pasos para implementar arrastrar y soltar 290 15.3.2 Mediante arrastrar y soltar Mostrar mensaje de bienvenida 291 15.4 par de transferencia de datos
Explicación detallada de la aplicación Elephant 293 15.4.1 Utilice las propiedades effectAllowed y dropEffect para establecer efectos de arrastrar y soltar 293 15.4.2 Utilice el método setDragImage para establecer el icono de arrastrar y soltar 294 15.5 Resumen 295 15.6 Ejercicios 295 Capítulo 16 Reproducción multimedia 296 Explicación en vídeo: 35 minutos 16.1 HTML 5 multimedia Breve descripción 297 16.1.1 La aplicación de multimedia en HTML 4 297 16.1.2 Multimedia en páginas HTML 5 297 16.2 Atributos básicos de elementos multimedia 298 16.3 Métodos comunes de elementos multimedia 302 16.3.1 Métodos durante la reproducción multimedia 302 16.3 .2 método canPlayType(type) 304 16.4 Eventos importantes de elementos multimedia 304 16.4.1 Métodos de procesamiento de eventos 304 16.4.2 Introducción a eventos 305 16.4.3 Ejemplos de eventos 306 16.5 Resumen 308 16.6 Ejercicios 309 Capítulo 17 Dibujar gráficos 310 Explicación en video: 1 hora 32 minutos 17.1 lienzo Conocimientos básicos 311 17.1.1 ¿Qué es el lienzo 311 17.1.2 Colocar el elemento lienzo en la página 311 17.1.3 Dibujar un rectángulo con un borde 312 17.2 Usar rutas en el lienzo 314 17.2.1 Usar el método del arco para dibujar un círculo 314 17.2.2 Usar el trazado MoveTo y lineTo para dibujar figuras de palitos 316 17.2.3 Bézier y curvas cuadráticas 317 17.3 Usar estilos y colores 319 17.3.1 Propiedades fillStyle y StrokeStyle 319 17.3.2 Transparencia globalAlpha 321 17.3.3 Estilos de línea 323 17.4 Dibujar gráficos degradados 325 17.4.1 Dibujar gradientes lineales 325 17.4.2 Dibujar gradientes radiales 326 17.5 Dibujar gráficos deformados 328 17.5.1 Transformación de coordenadas 328 17.5.2 Transformación matricial 330 17.6 Combinar múltiples gráficos 333 17.7 Dibujar sombras para gráficos 335 17.8 Aplicación Imagen 336 17.8.1 Dibujar una imagen 336 17.8.2 Ampliación parcial de una imagen 338 17.8.3 Mosaico de imágenes 339 17.8.4 Recorte de imagen 341 17.8.5 Procesamiento de píxeles 342 17.9 Dibujar texto 344 17.10 Guardar y restaurar estado 345 17.11 Guardar archivos 346 17.12 Animación del dibujo del lienzo 347 17.13 Ejemplo completo: reloj de escritorio 348 17.14 Resumen 350 17.15 Ejercicios 351 Capítulo 18 Almacenamiento de datos 352 Explicación en video: 50 minutos 18.1 Primera introducción al almacenamiento web 353 18.1.1 ¿Qué es el almacenamiento web 353 18.1.2 Uso de la API en Almacenamiento web 353 18.1.3 Instancias de sessionStorage y localStorage - contador 355 18.1.4 Instancia integral de almacenamiento web - libro de visitas 357 18.1.5 Instancia de almacenamiento de objetos JSON - tarjeta de información del usuario 359 18.2 Base de datos local 361 18.2.1 Introducción a la base de datos Web SQL 361 18.2 .2 Uso de la API de base de datos Web SQL 362 18.2.3 Instancia de base de datos local: inicio de sesión de usuario 363 18.3 Resumen 367 18.4 Ejercicios 367 Capítulo 19 Aplicaciones sin conexión 368 Explicación en video: 13 minutos 19.1 HT
Descripción general de las aplicaciones web sin conexión de ML 5 369 19.1.1 Descripción general de las aplicaciones web sin conexión 369 19.1.2 La diferencia entre caché local y caché web del navegador 370 19.2 Creación de aplicaciones HTML 5 sin conexión 370 19.2.1 Manifiesto de caché (manifiesto) 370 19.2.2 Configuración Servidor IIS 372 19.2.3 Explorar la lista de caché 372 19.3 El proceso de interacción entre el navegador y el servidor 373 19.4 Objeto applicationCache 374 19.4.1 Método swapCache 375 19.4.2 Eventos del objeto applicationCache 376 19.5 Resumen 379 19.6 Ejercicios 379 Capítulo 20 Uso Web Worker para manejar subprocesos 380 Explicación en vídeo: 25 minutos 20.1 Descripción general de Web Worker 381 20.1.1 Creación y uso de Worker 381 20.1.2 Ejemplo de operación de suma de aplicación Web Worker 382 20.2 Qué se puede hacer dentro de Worker 383 20.3 Carga y ejecución de múltiples archivos JavaScript 384 20.4 Anidamiento de subprocesos 384 20.4.1 Anidamiento de un solo nivel 385 20.4.2 Interacción de datos en múltiples subprocesos 387 20.5 Resumen 390 20.6 Ejercicios 390 Capítulo 21 API de comunicación 391 Explicación en video: 4 minutos 21.1 Comunicación de mensajes entre documentos 392 21.1.1 Uso de postMessageAPI 392 21.1.2 Transmisión de mensajes entre documentos 392 21.2 Resumen 394 Capítulo 22 Obtención de información de ubicación geográfica 395 Explicación en video: 12 minutos 22.1 Descripción general de la API de geolocalización 396 22.1.1 Uso del método getCurrentPosition para obtener la ubicación geográfica actual 396 22.1.2 Monitoreo continuo Información de ubicación geográfica actual 398 22.1.3 Dejar de obtener la información de ubicación geográfica del usuario actual 398 22.2 Colocar objeto 398 22.3 Mostrar “Estoy aquí” en Google Maps 399 22.4 Resumen 401 22.5 Ejercicios 401 Parte 3 Práctica de proyecto HTML 5 Capítulo 23 Portada de la red de información turística 405 Explicación en vídeo: 20 minutos 23.1 Descripción general 406 23.2 Vista previa del sitio web 406 23.3 Tecnologías clave 410 23.3.1 Diseño de la estructura principal del sitio web 410 23.3.2 Uso de HTML 5 elementos estructurales 410 23.4 Diseño de la parte pública del sitio web 411 23.4. 1 Diseño de sitio web público *** encabezado 411 23.4.2 Diseño de sitio web público *** pie de página 418 23.5 Diseño de página de inicio del sitio web 419 23.5.1 Mostrar introducción del sitio web e imágenes relacionadas 419 23.5.2 Implementación de navegación izquierda en la página de inicio 421 23.6 Dejar huellas Diseño de página 424 23.6.1 Reproducción de música 424 23.6.2 Implementación de la función de agregar mensajes 425 23.7 Resumen 426 Respuestas de referencia a los ejercicios del apéndice 427 HTML 5 desde el nivel inicial hasta el dominio Tabla de contenido X XI