Curso de HTML
¿Alguna vez te has preguntado cómo funcionan las webs? ¿Cómo puedes diseñar páginas web? Si es así y todavía no sabes ¡Enhorabuena! ¡Estás en el lugar adecuado!
En este curso de HTML no sólo aprenderás toda la base para poder desarrollar páginas webs, sino que también conocerá la historia y las tecnologías necesarias para desarrollar dichas webs.
Por ejemplo, aprenderemos «qué es realmente HTML» y que las webs no es más que un conjunto de «lenguajes» (de estilos, de etiquetas) que juntos, forman lo que vemos.
También aprenderemos a estructurar el código y a entender cómo los navegadores procesan nuestro código ¡Importantísimo!
Lógicamente, tampoco nos olvidaremos de los buscadores y de las redes sociales y es que hoy en día, tenemos que programar pensando en que nuestra web «se compartirá» y cuando esto suceda ¿Qué pasará? ¿Cómo se verá por ejemplo en Facebook? ¿Cómo podemos controlar qué aparece en la previsualización?
Todo esto y mucho más lo aprenderás en este curso de HTML. Además, si no fuera suficiente, esto no es más que el comienzo… y es que, en esta web encontrarás diferentes cursos para aprender todas las partes de la web, desde el frontend, hasta el backend.
1. Conociendo HTML
¡Enhorabuena por llegar a esta primera clase del curso de HTML! Estamos seguros de que disfrutarás el curso y lo que es más importante, aprenderás mucho.
Antes de ponernos a desarrollar nada, en esta clase aprenderemos la historia de HTML y es que, si no comprendemos sus inicios y su pasado, nos será del todo imposible comprender cómo está desarrollado y el «porqué de las cosas».
Una vez hayamos visto la historia, aprenderemos qué forma tiene HTML, y dónde se ejecuta. Es decir, veremos todas las aplicaciones que necesitamos tener instaladas para realizar esta clase (tranquilo, veréis que con un navegador es suficiente).
Por supuesto, también os recomendaré en esta primera clase un buen editor de código, para que os sea muchísimo más fácil programar.
Por último, una vez lo tengamos todo listo, veremos cómo ejecutar nuestro primer HTML en el navegador.
Para comprender todo mucho mejor ¡Veamos la clase!
Video: https://www.youtube.com/watch?v=gXZyN4qRPE4
¡Perfecto! Ahora que hemos visto la clase, ya comprendemos mucho mejor qué es todo esto del HTML, ahora toca aprender ¡Nos vemos en la próxima clase!
2. La estructura HTML
¡Bienvenido/a a esta segunda clase del curso de HTML!
Tras la primera clase que era más introductoria, en esta segunda clase analizaremos cuál es la estructura que debe de tener nuestras páginas webs.
Y es que, aunque podamos hacer las webs de la forma que más nos guste (en cuanto a colores, posiciones, estructuras), hay una «estructura mínima» del código que debemos de respetar.
Y no se trata de nada «visual», sino, que nos permitirá dividir nuestro código en dos partes.
Por una parte (el) nos permitirá indicarle toda la información «transparente», es decir, datos que no se mostrarán en la web, por ejemplo el título de la web, la codificación, la descripción para los motores de búsquedas, etc.
Aunque mucha gente cree que esta parte no es importante, es casi tan importante como la web visual en si, ya que, como explicaremos en la clase, desde hace unos años (HTML5), se usa esta información para poder compartir nuestras webs en las redes sociales, en buscadores, e incluso en la previsualización del whatsapp.
Por otra parte, tenemos la estructura () donde incorporaremos todo nuestro código visual, las imágenes, textos, etiquetas de estructura de la web, etc.
Como «en texto», todo esto puede parecer un poco abstracto, veamos la clase para comprenderlo mejor.
Video: https://www.youtube.com/watch?v=fZFpMnitROM
Ahora que hemos visto la clase ¿A que no es nada complicado? ¡Pues vamos a por la tercera clase de HTML!
3. Etiquetas para dar formato al texto
¡Bienvenido a esta tercera clase del curso de HTML!
En las clases anteriores hemos aprendido “cómo funciona HTML” y “cómo es la estructura de HTML”, no obstante, todavía no hemos visto casi ninguna etiqueta ¡Hasta ahora!
En esta tercera clase veremos las principales etiquetas que tendremos que conocer para poder dar formato al texto de nuestra web.
Esto quiere decir, que aprenderemos a realizar encabezados (títulos), párrafos, negritas, inclinar la letra (italic), e incluso subrayado.
Pero no sólo eso, también veremos cómo podemos hacer listas de diferentes tipos gracias a un conjunto de etiquetas.
Veamos la clase para aprender todo esto:
Video: https://www.youtube.com/watch?v=6emlaPO3J6w
¡Perfecto! Ahora ya sabemos cómo podemos dar formato al texto de nuestra web.
Pero ¿Qué pasa si deseamos añadir una imagen? ¿O un vídeo? Pues esto lo veremos en la próxima clase ¡Te esperamos!
4. Media: Imágenes, vídeos y audios
Antes que nada ¡Bienvenido a esta cuarta clase del curso de HTML!
Hasta ahora hemos estado viendo un montón de cosas, entre ellas, cómo crear la estructura de HTML y cómo poder «formatear» los textos (dentro de las limitaciones que tenemos al no usar, por ahora, CSS).
No obstante ¿Cómo podemos poner imágenes? ¿O vídeos? ¿Y una canción?
Pues bien, en esta cuarta clase lo analizaremos, no sin antes comprender que aunque las imágenes son «originales del HTML», los vídeos y los audios no lo son y aparecieron en el HTML5.
Por ello, le dedicaremos unos minutos a explicar cómo se hacía y que hacks se utilizaban antes de la aparición de HTML5 para poder reproducir vídeos (como en youtube por ejemplo).
Gracias a esto, podremos aprender cómo se debe de hacer actualmente y no confundirnos con las guías que podamos encontrar por Internet.
¡Veamos la clase!
Video: https://www.youtube.com/watch?v=UpyM9j1zm1A
Como hemos podido observar, añadir una imagen, un vídeo o un audio es realmente sencillo. Sólo tenemos que saber dónde está el fichero ¡Y listo!
5. Tablas en HTML
¡Bienvenido a esta quinta clase!
En esta clase analizaremos una de las etiquetas que más se usó en el pasado y que actualmente inspira amor y odio ¡Las tablas!
Durante esta clase aprenderemos, que durante casi una década, esta etiqueta se usó para crear las estructuras de la web (de hecho, veremos un ejemplo), no obstante, tras la llegada de los smartphones y las tablets, no se pudo utilizar más estas etiquetas, como explicaremos en el vídeo.
Es por ello, que en la actualidad las tablas se utilizan, sobretodo para mostrar datos (filas/columnas), por ejemplo, extractos bancarios, lista de usuarios, etc. Es decir, datos, que sí o sí, se tienen que mostrar en filas y columnas.
Para crear una tabla necesitaremos como mínimo 3 etiquetas, así que… ¡Veamos la clase para aprender a crearlas!
Video: https://www.youtube.com/watch?v=lC2zAQkkh-8
Como hemos podido observar, crear una tabla es extremadamente sencillo, una vez aprenderemos a utilizar las etiquetas correctamente.
Ahora que ya sabemos crear tablas, tenemos que recordar que hay que usarlas de una forma inteligente, no podemos crear webs basadas en tablas.
6. Formularios en HTML
¿Alguna vez te has preguntado cómo funcionan los formularios en las webs? ¿Son imágenes o unas etiquetas mágicas? Pues bien, en esta sexta clase del curso de HTML desvelaremos parte del misterio.
Digo que desvelaremos «parte» del misterio, porque sólo tocaremos la parte que corresponde a HTML, la parte de procesamiento de datos, la veremos con un lenguaje de programación (PHP) en el curso de PHP básico de esta misma web.
Con esta clase, para que quede claro, haremos ¡Que se vea un formulario! Es decir, que podamos rellenarlo, tocarlo y mandar los datos.
De hecho, en esta ocasión, además de las nuevas etiquetas que aprenderemos, veremos que también existe una cosa llamada «atributos» que tendremos que utilizar, para cambiarle el funcionamiento a nuestro formulario. Muy interesante y nada complicado.
¡Veamos la clase!
Video: https://www.youtube.com/watch?v=Af2f_GV2-lo
¡Súper bien! Ahora que ya hemos visto esta clase hemos podido comprender mucho mejor cómo funcionan los formularios, además hemos aprendido que no son nada complicados desarrollarlos.
No obstante, aunque estamos aprendiendo mucho durante estas clases, se nos queda un poco «soso» ya que no tenemos diseño ¿No?
Bueno, por eso mismo, en la próxima clase, introduciremos algo de CSS ¡Vamos a ella!
7. FLEX con DIVs y CSS
Bienvenido a esta séptima clase del curso de HTML.
Durante todo este curso hemos ido aprendiendo las etiquetas más importantes de HTML, no obstante, nos han faltado dos cosas:
Estructurar la web
Hacer una web bonita
Pues bien, en esta clase aprenderemos a estructurar la web y hacerla bonito. Para ello, utilizaremos CSS y una tecnología de CSS3 llamada “flex”.
¡Veamos el vídeo!
Video: https://www.youtube.com/watch?v=2ptJBqjvOsQ
¡Perfecto! Tras ver este vídeo, ya podemos empezar a organizar y estructurar nuestra web de una forma fácil y cómoda.
Gracias a estas 7 clases ya tenemos una “base” para empezar a desarrollar nuestras webs, ahora sin duda sólo nos quedará realizar el curso de CSS para darle vida a nuestras webs ¡Nos vemos en el curso de CSS!