Programador web: HTML5 y CSS3 Responsive ¡Fácil y Práctico!

Name: Programador web: HTML5 y CSS3 Responsive ¡Fácil y Práctico!
Rating: 4.6 (99 reviews)

Aprende a diseñar páginas web profesionales y actuales. Desde cero... de forma fácil, dinámica y muy práctica.

Highest Rated

Created byJuan De La Torre Domingo

Last updated 5/2016

Spanish

Spanish [Auto],

What you'll learn

Programar perfectamente en HTML5 todo tipo de páginas web
Utilizar las herramientas de formato de sitios webs que ofrece el CSS3
Diseñar páginas web responsive, acordes a las más recientes tecnologías de diseño web

Course content

18 sections • 128 lectures • 15h 55m total length

Presentación10:17
Vamos a conocer las premisas de las que parten los lenguajes HTML y CSS, en qué se diferencian y para qué usaremos cada uno de ellos.
¿Qué programas necesito?15:41
Manual de la Sección 14:00

Las etiquetas5:24
Si de un edificio se tratase, las etiquetas serían los ladrillos con los que lo contruiríamos. Vamos a empezar a descubrir los elementos que usaremos en la programación web.
Estructura de una página HTML19:05
¿Cómo debe estructurarse una página web? ¿Cuáles son las etiquetas fundamentales que debe definirla?. Vamos a descubrir cuales son las claves para construir una página web correcta e indexable por los buscadores.
Los comentarios4:12
Además de programar correctamente, un buen programador también se distingue por comentar su código de forma clara y precisa. Descubramos cómo insertar comentarios en nuestro código HTML.
Etiquetas importantes en el encabezado (1ª Parte)13:18
El encabezado (<head>) de nuestro sitio web lo define y presenta a buscadores, lectores para discapacitados y permite a los programas navegadores mostrar nuestro sitio web de forma correcta... ¡Fíjate si tiene importancia conocer cómo construirlo correctamente!
Etiquetas importantes en el encabezado (2ª Parte)12:16
Seguimos el video anterior: El encabezado (<head>) de nuestro sitio web lo define y presenta a buscadores, lectores para discapacitados y permite a los programas navegadores mostrar nuestro sitio web de forma correcta... ¡Fíjate si tiene importancia conocer cómo construirlo correctamente!
Manual de la Sección 23:00
Ejercicios de la Sección 22:00

Párrafos8:01
Generalmente el texto es el contenido más importante de nuestra página web. Para empezar, es el principal "alimento" del que se nutren los buscadores a la hora de indexarnos lo mejor posible y enviarnos unas buenas visitas. Vamos a descubrir las principales herramientas que ofrece HTML para insertar textos en nuestros documentos.
Títulos7:26
Definir correctamente los diferentes tipos de títulos de nuestra página web puede facilitarnos mucho las futuras tareas de diseño, y además, ayudará a los buscadores a indexar mejor nuestra página... y cuanto mejor indexada esté, ¡más visitas ganaremos!. Vamos a descubrir en este tema las claves de unos títulos correctos, coherentes y bien programados teniendo en cuenta tanto la estructura de nuestro sitio como claves para el posicionamiento web.
Resaltando el texto11:57
Destacar de forma correcta las expresiones más importantes de nuestros textos facilita la lectura a nuestros visitantes y tiene repercusión en el posicionamiento web. En el siguiente video descubriremos la forma correcta de hacerlo.
Listas18:04
En nuestras páginas web podemos agregar enumeraciones con diversos puntos: Se trata de otro elemento importante a la hora de facilitar su lectura y compresión. Desde las listas más sencillas a las más complejas, vamos a descubrir como usar esta potente y sencilla herramienta.
Manual de la Sección 35:00
Ejercicios de la Sección 39:00

Hipervínculos externos (1ª Parte)13:06
Los links son el elemento característico de una página web, aquello que las distingue de los medios editoriales clásicos. Gracias a ellos podemos navegar fácilmente dentro de las diferentes secciones de un sitio web o visitar páginas webs ajenas a la nuestra. Vamos a descubrir las claves de la creación de hipervínculos.
Hipervínculos externos (2ª Parte)10:54
Profundizamos en el tema de los hipervínculos externos: Los links son el elemento característico de una página web, aquello que las distingue de los medios editoriales clásicos. Gracias a ellos podemos navegar fácilmente dentro de las diferentes secciones de un sitio web o visitar páginas webs ajenas a la nuestra. Vamos a descubrir las claves de la creación de hipervínculos.
Hipervínculos internos13:26
Los hipervínculos internos son especialmente útiles en páginas webs muy extensas: facilitan la navegación de los usuarios por toda su extensión y moverse de forma sencilla y ágil. Vamos a descubrir en este video en qué consisten y las diversas formas de trabajar con ellos.
Otros tipos de hipervínculos15:21
Los links no sólo sirven para enviarnos a otras páginas HTML. Entre otras cosas, podemos crear links que descarguen archivos o generen correos electrónicos. Vamos a descubrirlo en el siguiente video.
Parámetros de los hipervínculos7:19
Descubriremos como añadir parámetros para personalizar el comportamiento de los hipervínculos.
Manual de la Sección 44:00
Ejercicios de la Sección 49:00

Insertar imágenes14:53
Las imágenes le dan a nuestros documentos un aire más personal, atractivo y permiten ampliar la información contenido en el texto. Aprenderemos desde cero como insertar imágenes en nuestras páginas web con HTML y veremos las diferentes opciones disponibles para configurar su visualización.
Hipervínculos con imágenes2:11
Haz que las imágenes insertadas en un documento enlacen fácilmente con otras páginas o sitios webs.
Etiquetas HTML5 para imágenes: figure y figcaption5:37
Vamos a descubrir las nuevas etiquetas HTML5 que nos permiten definir mejor nuestras imágenes.
Manual de la Sección 53:00
Ejercicios de la Sección 51:00

Introducción3:24
Una vez conocemos las herramientas fundamentales para añadir contenidos a nuestra página web, vamos a pasar a centrarnos en el trabajo de formato, en el estudio del CSS.

CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en cascada.

Las hojas de estilo es una tecnología que nos permite controlar la apariencia de una página web.
Hojas de estilos en un archivo .css7:32
Vamos a descubrir la forma de trabajar con CSS más práctica y más flexible. La idea es que todas las normas de estilo irán guardadas en un archivo aparte con extension css, al que llamaremos desde nuestra página html. Descubriremos en el siguiente video de forma muy práctica como conseguirlo.
CSS en el encabezado6:48
Podemos definir los estilos de nuestra página directamente en la cabecera de ésta. No es recomendable hacerlo si el CSS va a ser un poco extenso, por que enseguida hará más confusa la programación de nuestra web, y además, por que para cada archivo html de nuestro sitio deberíamos incluir estos códigos. Pero puede ser útil en determinados casos: vamos a ver cuando y cómo.
CSS en linea4:05
Insertar CSS en las etiquetas HTML es la forma más fácil pero la menos recomendada para la aplicación de un estilo a una etiqueta HTML. La idea es definir en la propiedad style los estilos para cada etiqueta. Veamos cómo se hace y en qué casos puede ser útil.
Estructura del código CSS3:31
El código CSS tiene una estructura muy sencilla, pero potente. Vamos a descubrir las claves y trucos para trabajar el aspecto de nuestros documentos.
Estilos e Identificadores9:13
Aprendamos a sacarle todo su potencial a las hojas de estilos.
Etiquetas universales7:28
En el siguiente tema aprenderemos en qué momentos usar las etiquetas universales <div> y <span>.
Selectores avanzados4:40
Técnicas, tácticas y trucos que te permitirán trabajar de forma más ágil, sencilla y eficiente con el CSS.
Herencia de las propiedades7:09
Una de las características principales del CSS es la herencia de las propiedades. Cuando establecemos una propiedad CSS en un elemento, sus elementos descendientes heredan de forma automática el valor de esa propiedad. Vamos a ver en el siguiente video cómo se consigue y en qué nos beneficia dominarla.
CSS por el contexto5:53
Puede ser que deseemos aplicar un determinado aspecto a un elemento de nuestro documento, por ejemplo un párrafo, pero solo si está dentro de un contexto, de un ámbito determinado, por ejemplo, que esté en negrita. Veamos cómo se consigue y que ventajas aporta.
Manual de la Sección 68:00
Ejercicios de la Sección 62:00

Propiedades CSS relacionadas con el texto3:49
A lo largo de todo esta sección estudiaremos las diferentes propiedades CSS que permiten modificar el aspecto de los textos insertados en nuestras páginas web. En este primer capítulo te presentamos todas las propiedades que tienes a tu disposición.
Color13:17
A lo largo de este tema veremos las diferentes formas de hacer referencia al color en nuestro documentos: empleando su propio nombre, de forma hexadecimal o por medio de los códigos RGB.
Alineación: Text-align4:45
La propiedad text-align permite definir la alineación de nuestro texto. A lo largo de este capítulo la forma de aplicarla y algunos ejemplos prácticos.
Subrayados: Text-decoration6:41
Con la propiedad text-decoration podemos, entre otras cosas que aparezca subrayado el texto, tachado o una línea en la parte superior. Estudiemos casos prácticos de esta propiedad y como aplicarla a nuestros documentos.
Tamaño: Font-size14:14
Existen varias formas de indicar el tamaño de la fuente. Vamos a descubrir en qué consisten y qué ventajas aporta cada una de ellas. Usar el tamaño de fuente correctamente es el primer paso para que nuestro sitio web sea responsive, es decir, para que se adapte a las dimensiones y características del dispositivo (movil, tablet, ordenador...) con el que se conectan nuestros visitantes.
Destacar texto: Font-style4:18
Font Style permite establecer el estilo con el que se muestran los caracteres, en otras palabras, diversas formas de aplicar cursivas. Veamos como establecer los estilos disponibles: normal (normal), itálico (italic) y oblicuo (oblique).
Destacar texto: Font-weight3:26
La propiedad font-weight permite establecer el grosor con el que se muestran las letras del texto. Normalmente, esta propiedad se emplea para mostrar un texto en negrita. Veamos todas las alternativas que nos ofrece y en qué caso usar cada una de ellas en este video repleto de casos prácticos.
Espaciado: Letter-spacing y Word spacing7:24
Las propiedades letter-spacing y word-spacing establecen la separación entre las letras o palabras del texto. Conozcamos más en detalle el uso correcto, trucos y ejemplos de estas propiedades.
Tabulación: Text-indent2:13
Mayúsculas: Text-transform3:36
Con text-transform podrás transformar el texto en mayusculas, minusculas... de forma fácil y muy dinámica. Vamos a analizar en el siguiente video el uso de esta interesante propiedad, una auténtica desconocida para muchos programadores.
Tipografía: Font-family4:04
Gracias a font-family podemos definir la tipografía, el tipo de letra a aplicar a todo o parte de nuestras páginas webs. En este primer video dedicado a esta propiedad estudiaremos la forma más simple de trabajar con ella, recurriendo a las tipografías predeterminadas.
Incorporando cualquier tipografía a nuestra web19:48
Con CSS3 es posible elegir fuentes a nuestro gusto, al margen de estas. Veremos como elegir las tipografías con total libertad, como descargarlas, instalarlas en nuestra página web y usarlas en nuestros trabajos.
Manual de la Sección 79:00
Ejercicios de la Sección 714:00

Color de fondo4:30
Para especificar un color de fondo a cualquier elemento de nuestra página, usamos la propiedad CSS background-color. Veamos la forma de aplicar fondos a nuestra página o a los objetos insertados en ella de forma sencilla y muy práctica.
Degradados de fondo10:41
Gracias a CSS3 es posible aplicar degradados de fondo en nuestra página o los objetos en ella colocados. Descubramos la forma de conseguirlo desde el principio y algunos trucos para que esa tarea resulte más sencilla de lo que podría parecer.
Imágenes de fondo4:44
También es posible colocar una imagen de fondo, no solo al fondo de nuestra página, si no a cualquiera de los elementos que hay dentro de ella: titulares, párrafos... Veamos en el siguiente video como conseguirlo.
Las propiedades de background-image13:30
Vamos a descubrir algunas de las propiedades avanzadas que permiten personalizar la forma en que se muestran los fondos para conseguir todo tipo de efectos.
Transparencias2:30
CSS3 nos permite aplicar diferentes niveles de transparencia a los elementos de nuestra página. Concretamente, La propiedad opacity permite especificar la opacidad de un elemento. En el siguiente tema la estudiaremos en detalle.
Manual de la Sección 810:00
Ejercicios de la Sección 83:00

Borde estándar6:26
CSS nos permite recurrir a un buen número de opciones a la hora de trazar los bordes de los elementos que incluimos en nuestras páginas. En este tema toca estudiar en profundidad y de forma muy práctica en qué consisten y cómo aplicarlas a nuestros documentos.
Bordes redondeados5:15
Gracias a propiedad border-radius podemos crear esquinas redondeadas sin tener que recurrir a complejos mosaicos de imágenes, como se hacía hasta la llegada de las versiones más recientes de CSS. En el siguiente tema veremos como aplicarla para conseguir documentos con aspecto sofisticado y moderno de forma muy sencilla.
Sombras6:59
La propiedad box-shadow nos permite definir una sombra a un objeto de la página. Otra de las nuevas ventajas de las más recientes versiones de CSS que, por fin, te permitirán darle a tus documentos un toque de diseño sin trabajar casi nada. Veamos cuales son las claves y los trucos para conseguirlo.
Manual de la Sección 94:00
Ejercicios de la Sección 95:00

Hover10:56
Con CSS podemos modificar la apariencia de los elementos de la página web de forma dinámica, es decir, los elementos pueden cambiar de forma una vez que la página se haya cargado si se dan determinadas condiciones.
Active5:25
Con el pseudo formato Active podemos definir un estilo cuando se hace clic en un elemento de la página. En la práctica sólo se utiliza en los enlaces. El enlace mantendrá este aspecto brevemente: el cambio se produce cuando se presiona el botón del ratón. Veamos la forma de aplicarlo de manera rápida y eficaz.
Visited3:21
Los efectos dinámicos permiten modificar la apariencia de los elementos de la página una vez que se haya cargado si se dan determinadas condiciones. En esta ocasión veremos cómo es posible aplicar un estilo a un enlace a una página que ya se ha visto.
Manual de la Sección 103:00
Ejercicios de la Sección 102:00

Requirements

No se requieren conocimientos previos.
Tan sólo necesitas un editor de código HTML-CSS y un programa de FTP para publicar tus páginas. En el curso te explicamos como instalarlos y utilizarlos.

Description

Descubre un curso fácil, claro, completo, práctico y muy didáctico y conviértete en programador y diseñador de páginas web con las más recientes versiones de los lenguajes de programación HTML y CSS.

¿Quieres dedicarte a una de las profesiones con más futuro y proyección pero te parece muy difícil?. ¿O tal vez ya tengas conocimientos básicos de HTML o CSS y quieres profundizar?. En ambos casos, te ofrecemos los mejores recursos para que lo consigas.

Más de 100 vídeos donde te explicamos cada tema de forma amena y dándole más importancia al aspecto práctico. ¡A programar, se aprende programando!.
Un manual escrito para cada capítulo del curso donde podrás repasar los temas tratados en los vídeos, ampliar conocimientos y acceder a más ejemplos prácticos.
Decenas y decenas de ejercicios con sus correspondientes soluciones, para que pongas a prueba lo aprendido en el curso.
Y el soporte y ayuda de tu tutor, para que nunca te sientas perdido.

Y ten presente que este es un curso dinámico. Respondiendo a tus dudas y para estar siempre a la última en programación y diseño web responsive con HTML y CSS iremos ampliando los contenidos de nuestro curso con nuevos temas, trucos y casos prácticos. Recuerda que tienes acceso ilimitado e indefinido. ¡Vuelve cuando quieras, aquí estaremos!

Who this course is for:

Si deseas convertirte en programador web, este es tu curso.
Está orientado a quienes no tienen conocimientos previos de programación.
También es adecuado para aquellos que, teniendo unos conocimientos básicos, desean ampliarlos o actualizarse en HTML5, CSS3 y el diseño web responsive.

Programador web: HTML5 y CSS3 Responsive ¡Fácil y Práctico!

What you'll learn

Explore related topics

Course content

Introducción y principios del HTML53 lectures • 30min

Tu primera página web7 lectures • 59min

La organización del texto6 lectures • 59min

Hipervínculos7 lectures • 1hr 13min

Imágenes5 lectures • 27min

Hojas de Estilos: CSS12 lectures • 1hr 10min

El aspecto del texto14 lectures • 1hr 51min

Definiendo fondos7 lectures • 49min

Bordes y sombreados5 lectures • 28min

Efectos dinámicos5 lectures • 25min

Requirements

Description

Who this course is for: