Curso HTML5 y CSS3: Creación de páginas web

curso HTML5 CSS3

Quieres aprender a crear tus propias páginas web en Internet? Con este curso podrás crear tus páginas web estáticas mediante la última versión de HTML y la gestión de páginas de estilo con CSS.

El curso consta de contenidos teóricos explicativos, prácticas y resolución de problemas, de modo que al finalizar el curso tendrás las herramientas necesarias para defenderte en el mercado laboral del desarrollo de sitios web simples

Formato del cursoLogo-FAGDUT

  • Nivel: Principiante
  • Requisitos:
    • Llevar computadora portatil
    • Manejo básico de editores de texto y navegadores web
    • Conocimientos básicos de Internet
  • Duración: 35hs aprox.
  • Modalidad: Presencial / San Rafael – Mendoza – Argentina

Temario:

Unidad Nº1

  • Páginas Web
  • ¿Qué es una página web? Páginas web estáticas y dinámicas. ¿Que necesito saber para crear una página web? Lenguajes de programación y lenguajes de hipertexto.Lenguajes utilizados para crear una página web. Herramientas de desarrollo y frameworks.
  • Herramientas
  • Herramientas utilizadas en el curso. Instalación y utilización de editores de código. Instalación y utilización de Firebug. Analizadores de código. Navegadores web.
  • Introducción a HTML5
  • ¿Qué es HTML y qué es HTML5? Estructura de una página HTML (Cabecera, cuerpo). Creación de archivos HTML. Visualización de archivos HTML en navegadores. Diferencia entre versiones.

Unidad Nº2

  • Etiquetas
  • ¿Qué son las etiquetas? Etiquetas básicas. Etiquetas de formato. Estilo vs significado semántico.
    Etiquetas con cierre y sin cierre. Creación de una página web utilizando etiquetas básicas.
  • Enlaces
  • Hipertexto. Creación de hipertexto a páginas internas y externas. Apetura de páginas destino en misma pestaña y pestañas diferentes. Anclas. Anclas a páginas internas y externas. Links. Carga de recursos externos utilizando links.

Unidad Nº3

  • Listas
  • Listas ordenadas. Listas no ordenadas. Listas de definiciones. Listas anidadas. Otros elementos HTML cargados dentro de una lista. Listas mixtas.
  • Tablas
  • Creación de una tabla. Partes de una tabla (Cabecera, cuerpo, pie). Fusión de filas y columnas.

Unidad Nº4

  • Imágenes
  • Imágenes con fuente interna y externa. Dimensiones de la imagen. Figure y figure caption, representación semántica de imágenes.
  • Mapa de imágenes
  • Creación de mapas de imágenes. Áreas rectangulares. Áreas circulares. Áreas poligonales.

Unidad Nº5

  • Audio
  • Inserción de audio con HTML5. Formatos de audio. Configuración de reproducción. Reproducción automática. Controles. Reproducción en bucle. Sonido silenciado. Subtítulos.
    Videos
  • Videos en páginas antes de HTML5. Inserción de videos con HTML. Formato de videos. Configuración de reproducción, reproducción automática, controles, reproducción en bucle, silenciar video, imagen por defecto. Dimensiones de video. Carga de subtítulos. Inserción de videos embebidos. Configuración para videos embebidos.

Unidad Nº6

  • Web semántica
  • ¿Qué es la web semántica? Estructura semántica de la página, encabezado, menú de navegación, contenido, pie de página. Artículos, secciones y contenido suplementario.
  • Etiqueta div, utilización para la aplicación de estilo. Metas de la página, configuración de codificación de caracteres, descripción, autor y palabras claves.

Unidad Nº7

  • Introducción a CSS3
  • ¿Qué es CSS? Syntaxis CSS. Ids y clases. Incluir CSS en HTML (En linea, interno y externo). Aplicación de estilo en una página web creada con HTML5.
  • Colores
  • Colores en CSS. Colores hexadecimales. Colores RGB. Colores RGBA. Colores por nombre. Colores HSL. Colores HSLA.

Unidad Nº8

  • Gradientes
  • Gradientes de colores. Gradientes lineares. Cantidad de colores. Ubicación de colores. Dirección del gradiente (Vertical, horizontal, ángulo). Repetición de gradiente.
  • Gradientes radiales. Cantidad de calores. Ubicación de colores. Forma del gradiente (Elipse, círculo). Tamaño del gradiente.

Unidad Nº9

  • Estilos de fondos
  • Estilos para fondo. Colores de fondo. Colores de fondo lisos y gradientes. Imagen de fondo. Repetir imagen de fondo vertical y horizontalmente. Posición horizontal y vertical de la imagen de fondo. Posición en píxeles y porcentaje.
  • Imagen de fondo fija y desplasable. Tamaño de la imagen de fondo (Cubrir espacio, tamaño en píxeles, tamaño en porcentaje, imagen contenida dentro de el elemento). Sintaxis acortada para definir estilo de fondo.

Unidad Nº10

  • Estilos de texto
  • Color de texto solido y gradiente. Alineación de texto. Alineación del texto izquierda, derecha, centrado y justificado. Alineación de la linea de texto.
  • Decoración de texto (subrayado, tachado, linea superior). Transformación de texto a mayúscula y minúscula. Identación del texto. Sombra de texto. Posición de la sombre vertical y horizontal. Difuminado de la sombra. Color de la sombra.
  • Dirección de texto. Espacio entre caracteres. Altura del texto en píxeles y porcentaje.

Unidad Nº11

  • Fuentes del texto
  • Fuentes y familias de fuentes. Combinaciones de fuentes seguras. Estilos de fuentes cursiva y oblicua. Tamaño de la fuente. Grosor de la fuente. Descarga y carga de fuentes. Estilos de fuentes y soporte de fuentes.
  • Modelo de caja
  • Modelos de caja CSS. Partes de las cajas. Características de los márgenes de diferentes elementos. Margenes individuales. Sintaxis abreviada del margen.
  • Características del margen interno de diferentes elementos. Margenes internos individuales. Sintaxis abreviada del margen interno. Tamaño del elemento en píxeles y porcentaje. Tamaño fijo, tamaño mínimo, tamaño máximo. Tipos de caja. Visibilidad de los elementos. Posición del elemento estático, fijo, absoluto y relativo. Solapamiento entre elementos. Desbordamiento de contenido.
  • Elementos flotantes. Medición del tamaño total de los elementos.

Unidad Nº12

  • Estilos de bordes
  • Estilos de lineas de borde. Ancho del borde en píxeles y valores predefinidas.
  • Color de borde. Bordes redondeados. Sombras de borde. Posición de la sombra vertical y horizontal. Difuminado de la sombra. Color de la sombra. Sombra interna. Imagen como borde. Sintaxis abreviada de estilo de borde.
  • Pseudo selectores y pseudo elementos
  • Combinación de diferentes selectores. Selectores dentro de otros selectores.
  • Selectores padres y selectores hijos. Seleccionar elemento por atributo.
  • Selecconar elementos por valor de atributo. Pseudoclases. Selección por estado de un enlace. Selección por estado de un input. Elementos hijos. Numero de elementos hijos. Seleccionar elementos del mismo tipo. Pseudo elementos. Antes y después del contenido. Partes del texto.

Para ver otros cursos puedes visitar la sección de cursos.


¿Preguntas? ¿Comentarios?

Si tenés dudas, o querés dejarnos tus comentarios y consultas, sumate al grupo de Telegram de la comunidad JuncoTIC!
¡Te esperamos!