Descripción

HTML y CSS son los dos pilares sobre los que se asienta cualquier sitio web actual. Además, las últimas versiones de los lenguajes, HTML5 y CSS3 están adaptados a las últimas novedades de la web 2.0, presentando el contenido de los sitios web de una manera más indexable y visualmente efectiva.



HTML5 permite organizar el contenido web de una manera más ordenada y adaptada a los formatos actuales, presentando novedades tanto a nivel estructural, como a nivel semántico, como a nivel visual. Conocer las novedades de HTML5 es vital para entender la nueva generación de criterios SEO.



CSS3 es a nueva versión de las hojas de estilo en cascada. Presentan el contenido HTML de una manera fácil y controlable, aumentando la productividad del diseñador web. Además, CSS3 presenta novedades visuales que permiten generar elaboradores efectos sin necesidad de Flash o JavaScript.



El presente curso dota al alumno de los conocimientos necesarios para crear sitios web correctamente indexable y visualmente impactantes siempre dentro de los estándares.



A través de videotutoriales guiados paso a paso, el alumno aprenderá a desarrollar un sitio web partiendo desde cero hasta las últimas novedades de los lenguajes expuestos.




Ver más

Temario

Unidad 1: HTML
  Subunidad 1: Espacio de trabajo:

  •     Lección 1: Configuracion del espacio de trabajo
  •     Lección 2: Creacion de carpetas de ejercicios y proyecto
  •     Lección 3: Primera prueba


  Subunidad 2: Estructura:

  •     Lección 1: Doctype
  •     Lección 2: Head y Body
  •     Lección 3: Titulo
  •     Lección 4: Cabeceras y paragrafos
  •     Lección 5: Cabeceras, secciones y pie de pagina


  Subunidad 3: Listas:

  •     Lección 1: Listas
  •     Lección 2: Listas anidadas
  •     Lección 3: Segundas anidaciones
  •     Lección 4: Insercion de comentarios
  •     Lección 5: Uso de las listas para crear un menu de navegacion


  Subunidad 4: Metaetiquetas:

  •     Lección 1: Metaetiquetas
  •     Lección 2: Mas metaetiquetas


  Subunidad 5: Hipervinculos:

  •     Lección 1: Creacion de hiperenlaces y preparacion
  •     Lección 2: Enlace de las dos paginas
  •     Lección 3: Enlaces externos
  •     Lección 4: Demostracion CSS y estilizacion de enlaces


  Subunidad 6: Estructura y formato:

  •     Lección 1: Adicion de etiquetas HTML
  •     Lección 2: Etiquetas de formato: negrita e italica
  •     Lección 3: Etiquetas de formato II
  •     Lección 4: Etiqueta semantica Time


  Subunidad 7: Ejercicio practico:

  •     Lección 1: Ejercicio de la unidad: creacion de la estructura de una web


  Subunidad 8: Tablas:

  •     Lección 1: Creacion de una tabla
  •     Lección 2: Estilo de la tabla
  •     Lección 3: Creacion de columnas y filas
  •     Lección 4: Anchura de las tablas
  •     Lección 5: Cabeceras
  •     Lección 6: Tablas anidadas


  Subunidad 9: Ejercicio boletin de noticias:

  •     Lección 1: Estructura principal
  •     Lección 2: Secciones de contenido
  •     Lección 3: Tabla anidada


  Subunidad 10: Contenido multimedia:

  •     Lección 1: Preparacion del material
  •     Lección 2: Insercion de imagenes
  •     Lección 3: Tamaño de las imagenes
  •     Lección 4: Texto alternativo
  •     Lección 5: Añadido de video
  •     Lección 6: Tamaño del video y varias fuentes
  •     Lección 7: Proporciones del video
  •     Lección 8: Audio
  •     Lección 9: Parametros de audio

  Subunidad 11: Divs:

  •     Lección 1: Divs e ID


  Subunidad 12: Formularios:

  •     Lección 1: Form, accion y metodo
  •     Lección 2: Form input
  •     Lección 3: Form contrasena
  •     Lección 4: Boton enviar
  •     Lección 5: Radio
  •     Lección 6: Radio multiple
  •     Lección 7: Checkbox
  •     Lección 8: Select
  •     Lección 9: Textarea
  •  

Unidad 2: CSS
  Subunidad 1: Introduccion:

  •     Lección 1: CSS en linea
  •     Lección 2: CSS interno
  •     Lección 3: CSS externo
  •  

  Subunidad 2: Color:

  •     Lección 1: Color nombrado y RGB
  •     Lección 2: Color con transparencia
  •     Lección 3: Color hexadecimal


  Subunidad 3: Cajas:

  •     Lección 1: Bordes
  •     Lección 2: Radio en los bordes
  •     Lección 3: Comentarios
  •     Lección 4: Color de frente y de fondo
  •     Lección 5: Fondo de imagen
  •     Lección 6: Margenes


  Subunidad 4: Texto:

  •     Lección 1: Etiqueta de estilo
  •     Lección 2: Tamaño de fuente
  •     Lección 3: Familia de fuente
  •     Lección 4: Fuentes personalizadas
  •     Lección 5: Sombra de texto
  •     Lección 6: Alinear y overflow
  •     Lección 7: Estilizar enlaces
  •     Lección 8: Codificacion de los archivos
  •  

Unidad 3: Proyecto del curso
  Subunidad 1: Preparacion:

  •     Lección 1: Copiado de materia de referencia


  Subunidad 2: HTML:

  •     Lección 1: Creacion de index
  •     Lección 2: Titulo
  •     Lección 3: Etiquetas meta
  •     Lección 4: Menu en lista
  •     Lección 5: Insercion de imagenes
  •     Lección 6: Texto en el banner con headings
  •     Lección 7: Creacion de noticias


  Subunidad 3: CSS:

  •     Lección 1: Maquetado del los bloques principales
  •     Lección 2: Desactivado del margen
  •     Lección 3: Maquetacion de las noticias
  •     Lección 4: Rehecho de los margenes


Unidad 4: Edicion de imagenes
  Subunidad 1: GIMP:

  •     Lección 1: Estrucutura de las ventanas
  •     Lección 2: Descarga e instalacion de los programas
  •     Lección 3: Archivo nuevo y pintura
  •     Lección 4: Propiedades del pincel
  •     Lección 5: Goma y lapiz
  •     Lección 6: Relleno y degradado
  •     Lección 7: Direcciones del degradado
  •     Lección 8: Selecciones
  •     Lección 9: Mas selecciones
  •     Lección 10: Transformaciones
  •     Lección 11: Trabajo con capas
  •     Lección 12: Texto
  •     Lección 13: Gurardar
  •     Lección 14: Abrir imagenes
  •     Lección 15: Brillo y contraste
  •     Lección 16: Tono y saturacion
  •     Lección 17: Umbral
  •     Lección 18: Filtros
  •     Lección 19: Ampliar y reducir


  Subunidad 2: Inkscape:

  •     Lección 1: Rectangulos y circulos
  •     Lección 2: Estrellas
  •     Lección 3: Dibujo libre
  •     Lección 4: Relleno y borde
  •     Lección 5: Trazo
  •     Lección 6: Nuevo documento
  •     Lección 7: Circulos
  •  ��  Lección 8: Arcos
  •     Lección 9: Exportacion del resultado

Unidad 5: Contenido extra
  Subunidad 1: Filezilla:

  •     Lección 1: Introduccion a Filezilla

  Subunidad 2: Mapas de Google:

  •     Lección 1: 1
  •     Lección 2: 2

  Subunidad 3: Maquetacion de menus:

  •     Lección 1: 1
  •     Lección 2: 2
  •     Lección 3: 3
  •     Lección 4: 4
  •     Lección 5: 5
  •     Lección 6: 6

  Subunidad 4: Web estilizada:

  •     Lección 1: 1
  •     Lección 2: 2
  •     Lección 3: 3

  Subunidad 5: Transformaciones:

  •     Lección 1: 1

  Subunidad 6: Teansiciones:

  •     Lección 1: 1

  Subunidad 7: Creacion de una polaroid:

  •     Lección 1: 1

Unidad 6: Proyecto del curso
  Subunidad 1: Parte estatica:

  •     Lección 1: Descarga de XAMPP
  •     Lección 2: Instalacion
  •     Lección 3: Creacion de contenido propio
  •     Lección 4: Estructura de la aplicacion
  •     Lección 5: Creacion del cuerpo y la cabecera
  •     Lección 6: Titulos
  •     Lección 7: Formularios - primera parte
  •     Lección 8: Formularios - segunda parte
  •     Lección 9: Formularios - tercera parte
  •     Lección 10: Añadido de CSS
  •     Lección 11: Maquetado del fondo y las fuentes
  •     Lección 12: Textos
  •     Lección 13: Animaciones - primera parte
  •     Lección 14: Animaciones - segunda parte
  •     Lección 15: Formularios y sus transiciones


Unidad 6: Edicion WYSIWYG con BlueGriffon
  Subunidad 1: Instalacion:

  •     Lección 1: Descarga de BlueGriffon
  •     Lección 2: Instalacion de Bluegriffon
  •     Lección 3: Interfaz de usuario


  Subunidad 2: Estilos HTML:

  •     Lección 1: Negrita
  •     Lección 2: Italica
  •     Lección 3: Subrayado
  •     Lección 4: Enfasis
  •     Lección 5: Codigo

  Subunidad 3: Listas:

  •     Lección 1: Listas no ordenadas
  •     Lección 2: Listas ordenadas

  Subunidad 4: Tablas:

  •     Lección 1: 1
  •     Lección 2: 2
  •     Lección 3: 3
  •     Lección 4: 4


  Subunidad 5: Ejercicio resumen:

  •     Lección 1: 1
  •     Lección 2: 2
  •     Lección 3: 3
  •     Lección 4: 4
  •     Lección 5: 5
  •     Lección 6: 6

  Subunidad 6: Diagramas de planificacion:

  •     Lección 1: Descarga e instalacion de Dia
  •     Lección 2: Creacion de nodos en Dia
  •     Lección 3: Union de nodos
  •     Lección 4: Exportacion del diagrama


  Subunidad 7: Organizacion de la informacion:

  •     Lección 1: Investigacion 1


  Subunidad 8: Wireframe:

  •     Lección 1: Descarga de Inkscape
  •     Lección 2: Instalacion de Inkscape
  •     Lección 3: Maquetacion con Inkscape

  Subunidad 9: Conversion a HTML:
  •     Lección 1: Titulo
  •     Lección 2: Cabecera
  •     Lección 3: Cuerpo y pie de pagina

  Subunidad 10: Navegacion:
  •     Lección 1: Enlace absoluto
  •     Lección 2: Enlace de correo
  •     Lección 3: Enlaces relativos
  •     Lección 4: Comprobacion de la navegacion

  Subunidad 11: Etiquetas del head:
  •     Lección 1: Etiquetas del head y metaetiquetas
  •     Lección 2: Propagacion de las metaetiquetas

  Subunidad 12: Multimedia:
  •     Lección 1: Insercion de video
  •     Lección 2: Insercion de audio
  Subunidad 13: Formularios:
  •     Lección 1: Formulario y campos
  •     Lección 2: Barra horizontal
  Subunidad 14: CSS:
  •     Lección 1: Insercion de un DIV
  •     Lección 2: Asignacion de un ID
  •     Lección 3: Color de fondo y de frente
  •     Lección 4: Geometria y margenes
  •     Lección 5: Estructura de CSS
  •     Lección 6: Bordes
  •     Lección 7: Sombras
  •     Lección 8: Transformaciones
  •     Lección 9: Listas
  •     Lección 10: Columnas
  •     Lección 11: Ids multiples
  •     Lección 12: Propiedades de texto
  •     Lección 1: Flotacion 1
  •     Lección 2: Flotacion 2

  Subunidad 15: Maquetacion tradicional:
  •     Lección 1: Wrapper
  •     Lección 2: Cabecera
  •     Lección 3: Margen y padding
  •     Lección 4: Fondos
  •     Lección 5: Plantillas
  •     Lección 6: Seccion
  •     Lección 7: Maquetacion de la seccion
  •     Lección 8: Frames

Unidad 7: Transiciones y animaciones
  Subunidad 1: Instalando editores de texto:
  •     Lección 1: Gedit y notepad
  •     Lección 2: Configurando nuestro espacio de trabajo
  •     Lección 3: Estilo en el texto
  •     Lección 4: Configuracion de Gedit
  •     Lección 5: Hover
  •     Lección 6: Transiciones
  •     Lección 7: Animaciones
  •     Lección 8: Animaciones 2

Unidad 8: Edicion WYSIWYG con BlueGriffon
  Subunidad 1: Maquetacion artistica:
  •     Lección 1: Contenedor
  •     Lección 2: Fondo y frente
  •     Lección 3: Escala y fusion
  •     Lección 4: Formularios
  •     Lección 5: Degradados
  •     Lección 6: Creacion de una nube
  •     Lección 7: Finalizacion y posicion de la nube
  •     Lección 8: Transiciones
Ver más

Competencias para las que te prepara el curso

Al terminar el curso, el alumno podrá desarrollar cualquier sitio web, desde el principio hasta el final, creando webs correctamente estructuradas y aplicando las últimas novedades de HTML5 y CSS3.

Destinatarios

Cualquier persona profesional interesado en aprender a desarrollar sitios web usando las últimas novedades de los lenguajes HTML y CSS.


Metodología

La metodología empleada para impartir este curso principalmente será, mediante formación teórica online a través de tutoriales y video tutoriales guiados. Esta documentación permitirá al alumno ir rea

Duración

40 horas

Objetivos

Al terminar el curso, el alumno podrá desarrollar cualquier sitio web, desde el principio hasta el final, creando webs correctamente estructuradas y aplicando las últimas novedades de HTML5 y CSS3.

Sí, me interesa

conocer todos los detalles, precios, becas, fechas y plazas disponibles

Diseño y desarrollo web con HTML5 y CSS3

Para contactar debes aceptar la política de privacidad
Enviando este formulario acepta recibir información periódica de Educaweb relacionada con estos cursos.
También te recomendamos estos cursos

Diseño y desarrollo web con HTML5 y CSS3