En la clase de hoy veremos cómo combinar HTML con JavaScript y CSS, y una introducción a estos lenguajes que combinados son el fundamento de la web.
10 – HTML con JavaScript y CSS
Ahora que ya hemos visto los fundamentos del HTML, toca dar un paso más allá y ver lo que hay en el horizonte. Y se trata ni más ni menos que dos lenguajes más: CSS y JavaScript. La combinación de estos 3 lenguajes es ni más ni menos que el fundamento de la web tal como la entendemos hoy en día.
CSS ya lo hemos visto en el curso de CSS. Se encarga de "vestir" nuestro código. Estilo, diseño, colores, estructura. Es la capa de pintura, el vestido de gala. Y JavaScript añade dinamismo, programación, funcionalidades, variables, e incluso programas enteros dentro de nuestras webs. ¿Cómo los integramos con HTML? Veámoslo:
¿Parece mentira todo lo que se puede hacer, verdad? ¿Y lo fácil que es vincular un lenguaje con otro? En CSS sólo mencionando las etiquetas, clases o ids. Y en JavaScript a través de los elementos. ¡Y ya está! A partir de ahora, imaginación al poder :)
En los próximos cursos veremos PHP y JavaScript, los que complementarán a los dos cursos que ya hemos visto. Todo junto hará que podamos hacer la web que nos propongamos. Pero de momento, conformémonos con hacer los siguientes deberes:
- Crear un párrafo con JavaScript.
- Estilizar ese párrafo con CSS
- Crear un "prompt" que te pida tu animal favorito, y un "alert" que lo muestre.
- Crear un par "prompt" que te pida un número, y un "alert" que te devuelva el doble.
- Mostrar la fecha del día en pantalla, y en un alert
Bien, pues con esto damos por finalizada la clase y el curso. Ya sabéis que debajo del vídeo tenéis los enlaces al código usado. Como siempre, si tenéis alguna duda de esta o otra lección, podéis contactar a través de la intranet.
Nos vemos en el curso de PHP. Os encantará. Hasta entonces... ¡A htmlear! ;)
Todos los capítulos de este curso:
- Curso de HTML #1: Teoría base y primera práctica
- Curso de HTML #2: Etiquetas y atributos
- Curso de HTML #3: Formatos de texto
- Curso de HTML #4: Enlaces
- Curso de HTML #5: Listas
- Curso de HTML #6: Imágenes
- Curso de HTML #7: Tablas
- Curso de HTML #8: Formularios
- Curso de HTML #9: Estructura
- Curso de HTML #10: Integración con CSS y JavaScript