Curso de HTML

Bienvenida al Curso de HTML Express, objetivos, enfoques y filosofía del curso.

• Qué es un lenguaje de marcación
• HTML como un estándar abierto para la web
• HTML sirve para especificar el contenido (y CSS para la presentación).

Explicamos el documento básico de HTML, es decir el esqueleto mínimo de etiquetas que forman parte del documento HTML esencial, con lo mínimo necesario.
Se identifican dos partes fundamentales:

• Cabecera, head, con información de control
• Cuerpo, body, con el contenido de la página.

Comenzamos a colocar las primeras etiquetas en el cuerpo de la página, como encabezado y párrafos. Esas etiquetas definen el contenido que se representará en el navegador. Veremos que en el cuerpo del HTML, el body, las etiquetas también se organizan con estructura de árbol.

• HTML5 versus HTML.
• Por qué HTML5 ha tenido tanta repercusión en el mundo del desarrollo en general y del desarrollo para la web en particular.

En este vídeo se explica qué son las etiquetas semánticas, por qué son importantes de usar, con diversos casos representativos.
Se describe el significado de las principales etiquetas semánticas.

Una serie de preguntas y respuestas sobre las etiquetas semánticas de HTML5.

En este vídeo se enumera el resto de contenido que se verá en el curso, a lo largo de las distintas sesiones que lo compone. Se explica la organización del contenido y los motivos por los que se ha diseñado así.

Repasamos asuntos sobre sintaxis del HTML. Añadimos nuevos conocimientos generales de HTML de necesario conocimiento. Etiquetas, etiquetas de cierre, anidación correcta de etiquetas, etc.

Estudiamos algunas características de las etiquetas, que nos permiten clasificarlas en grupos, como etiquetas de bloque y etiquetas de línea, etiquetas que definen un estilo y etiquetas que no, etiquetas semanticas y etiquetas sin significado.

• Vemos una primera introducción a los enlaces, con la etiqueta A.
• Analizamos en profundidad los enlaces cuando se hacen dentro del mismo documento.
• Creamos anclas y hacemos enlaces que se dirigen a esas anclas.

Estudiamos los enlaces que van a otras páginas dentro del mismo sitio. Es el tipo más común de enlaces, que se realizan mediante la especificación de una ruta relativa al archivo desde donde se crea el enlace.

Son enlaces que se dirigen a páginas de otros sitios web, fuera de nuestro dominio.

• Cómo usar imágenes en HTML.
• Tipos de archivos admisibles como imágenes en páginas web y sus usos generales.

Cómo hacer listas de ítems en HTML. Listas ordenadas y listas desordenadas.

Enunciado de un ejercicio práctico a realizar para reforzar el conocimiento.

Comenzamos la clase de formularios. Explicamos los campos input y vemos específicamente los input de type text y los type hidden.

Explicamos dos nuevos tipos de campos input, las casillas de verificación y los botones de radio. Tienen sus particularidades destacadas, que los hace diferentes de otros elementos input, aunque para representarlos se use la misma etiqueta que para campos de texto.

Los campos select son los menús desplegables, que podemos pulsar y expandirlo para ver varias opciones, de las que podemos seleccionar una de ellas.
Explicamos los campos select y además los campos select múltiples.

Explicamos los campos textarea, para poder insertar texto con saltos de línea. Además vemos algunas cosas que habíamos pasado por alto de los campos input, que son comunes también con los campos textarea.

• Mejoras a los formularios introducidas por HTML5:
  • Atributo placeholder, para mostrar un texto hasta que el usuario introduce algo en un campo input text.
  • Nuevos tipos de campos input: Date, url, email, etc.

• Validaciones de HTML5:
  • Campos required
  • Campos con un patrón definido por expresión regular.
• Explicamos además que las validaciones del cliente nunca deben ser tomadas como definitivas.

• Cómo podemos enviar formularios. Examinamos los campos input de tipo submit y reset y luego vemos en detalle la etiqueta form, junto con los atributos disponibles para configurar el formulario.
• Vemos el problema de usar un mailto en el action del form, pues obliga a tener un programa de correo configurado en el ordenador del usuario, y no siempre es así.

Explicamos cómo podemos usar un servicio genérico para el envío de formularios, que no requeriría disponer de un correo configurado en el ordenador del usuario. Veremos un servicio gratuito, que envía de manera automática el email con los datos introducidos, sólo con pulsar el botón de envío.

Cómo se gestiona el color en el desarrollo de páginas web. Cómo podemos definir colores con sus nombres o con códigos de valores RGB. Qué es RGB y cómo componer colores con mezclas de rojo, verde y azul.

• Generación de colores RGB del anterior vídeo.
• Cómo se definirían colores para la página con HTML, práctica no aconsejada.
• Definición de colores por medio de código CSS.

• Cómo definir el juego de caracteres que estamos usando y los motivos por los que se recomienda UTF-8.
• Cómo cambiar el juego de caracteres a un archivo HTML.

• Qué son los caracteres especiales, qué tipos de caracteres especiales existen, dónde encontramos una referencia de los más usados.
• Cuáles caracteres en un documento HTML deberían siempre codificarse como un caracter especial.

• Editores de código para desarrollar HTML.
• Tipos de editores, ventajas, inconvenientes, funciones, etc.

• Emmet es una extensión esencial en cualquier editor. Ya viene instalada en Visual Studio Code con la instalación básica, y en otros editores la tendríamos que instalar de manera independiente.
• Explicamos cómo usar los shortcuts de Emmet más útiles.

En este vídeo respondemos una duda sobre si VSCode incluye un servidor web donde ver las páginas que vamos desarrollando y a partir de esta duda se explica una utilidad muy interesante y potente, que nos ayudará para desarrollar con mayor productividad. Se trata del live reload, que nos permite ver los cambios que estamos haciendo sobre el navegador en tiempo real, o cada vez que guardamos.

• Secciones de las herramientas de desarrolladores que encontramos en el navegador.
• En este vídeo vemos ya más en detalle las funciones fundamentales de las herramientas de desarrolladores que nos sirven para las cosas básicas que vamos aprendiendo en este curso.

• Uso de validadores, que nos pueden ayudar mucho a localizar errores en nuestro marcado.
• El validador más interesante es el de la W3C, que usamos en vivo para comentar los resultados obtenidos.

Se ofrecen 4 ejercicios a completar con los conocimientos adquiridos hasta este momento durante el curso de HTML.

Para una correcta organización del sitio, de modo que facilite el mantenimiento de los archivos del proyecto, crearemos una estructura de carpetas. La idea es poner cada cosa en su sitio: archivos de imágenes, CSS, Javascript, etc.

En este bloque realizamos el HTML completo para el sitio que estamos construyendo. De momento solo nos encargamos de ir colocando cada pieza de contenido, imágenes, logos, titulares, posts, pie de página, navegadores, etc.

• Aprendemos a colocar correctamente el CSS en una página, por medio de un archivo externo que se enlaza con el documento HTML.
• Damos los primeros pasos creando las primeras reglas de estilo y aprendemos los significados de algunos conceptos usados al trabajar con CSS.

• En este vídeo realizamos el CSS de la mayoría de los elementos del sitio, definiendo la capa de presentación.
• En esta primera etapa estamos preparando el diseño del sitio pensando en un tamaño de pantalla pequeño, similar al que tendríamos de anchura en la pantalla un móvil.

• En este vídeo vemos cómo es importante que un diseño se pueda adaptar a diversas pantallas y cómo conseguirlo mediante CSS y mediaqueries.

• Significado de las etiquetas del head de la página que nos habíamos saltado hasta la fecha en el curso. Se trata de las etiquetas:
  • Viewport, para definir el comportamiento de las pantallas de los móviles
  • La etiqueta meta X-UA-Compatible, para definir el motor de renderizado de explorer

• En este bloque se muestra cómo se puede incorporar Javascript en una página web, para definir la capa de funcionalidad.
• Como ejemplo se ve la aplicación de un plugin de jQuery con el que conseguimos un botón que permite mover el scroll a la parte de arriba de la página.

En este vídeo se propone la realización de un ejercicio para continuar con el desarrollo del sitio web realizado en esta sesión.

En este primer bloque de la clase 6 explicamos lo básico sobre optimización de un web. La necesidad de optimizar el desarrollo y en función de qué lo podemos conseguir. Luego explicamos los principales puntos donde podemos optimizar la parte CSS y Javascript de un sitio web.

Cómo podemos optimizar imágenes para la web, vías posibles y comentarios sobre las mismas. Explicamos también los formatos gráficos soportados en la web con sus características.

En este vídeo mostramos cómo podemos optimizar ficheros gráficos usando Photoshop. Da igual que uses Photoshop u otro programa de diseño, o incluso programas específicos para la optimización de archivos gráficos, lo importante de este vídeo son los conceptos y ver de una manera práctica los recursos que tenemos para optimizar imágenes dependiendo de cada formato.

En este vídeo tenemos el bloque final del tema de optimización, en el que comentamos la posibilidad de hacer imágenes responsive, adaptables a las condiciones de pantalla del usuario, o incluso las condiciones de red. Luego se ofrecen referencias de cursos dentro de EscuelaIT en los que se ve con mucho más detalle el tema de la optimización para la web y la automatización de esta optimización.

En este vídeo presentamos Git y realizamos una primera práctica con Git, que consiste básicamente en subir el código que venimos desarrollando en un espacio remoto para el hosting de nuestro código. Usamos GitHub, que es un popular sitio para hosting de repositorios Git.

Ahora vamos a hacer el paso necesario para obtener el código de un repositorio Git que está en GitHub, para lo cual vamos a realizar un clon del repositorio remoto, en nuestro disco duro local. Luego podemos modificar el clon y hacer push de los cambios, para actualizar GitHub.

En este bloque explicamos cómo funciona el sistema de dominios de Internet, qué es un dominio, qué es un subdominio y qué es una IP. Luego explicamos cómo se convierten nombres de dominio en direcciones IP mediante los servidores DNS. Luego vemos qué es lo que necesitamos para poner una web online, básicamente un dominio con un espacio de alojamiento. Vemos ya sobre un proveedor real cómo podemos registrar un dominio con su alojamiento, para poder subir nuestros archivos y publicar la web que se ha desarrollado.

• En este vídeo veremos cómo se sube una web a un espacio de alojamiento, usando un programa de FTP para la transferencia de los archivos.
• Explicamos generalidades de la publicación, como las carpetas donde tendrás que publicar tus archivos, que depende del servicio de hosting que se haya contratado.

Aunque podríamos programar nuestra propia página PHP que envía el contenido del formulario de contacto (dado que nuestro hosting soporta PHP), podemos usar también un servicio ofrecido por el propio hosting, que nos permite enviar el email de una manera sencilla, sin tener que programar nada.

Este vídeo finaliza la clase actual, ofreciendo una serie de pasos siguientes para dar, una vez hemos terminado de aprender HTML. Explicamos varias rutas que podemos seguir, dependiendo del objetivo final que tengamos. En cualquier ruta, el suguiente paso será aprender CSS, pero luego, dependiendo de la actividad que queramos realizar, podemos tener una ruta de cursos diferente. Vemos los perfiles de: Arquitecto CSS o maquetador web, desarrollador frontend (Javascript), desarrollador backend y la creación de sitios con WordPress.

• Qué son las tablas, en qué casos usarlas (información tabulada, datos, nunca posicionamiento, maquetación, composición) y cuáles son sus etiquetas principales.
• Ejemplos sencillos para trabajo con tablas y atributos esenciales que se dedican a la combinación de celdas.

• Soluciona del ejercicio planteado en la clase de "Contenidos extra".
• Práctica con tablas.

• En este vídeo se soluciona un ejercicio planteado en la clase de "Contenidos extra".
• Se practica con contenido en general, listas y tablas.

• En este vídeo se soluciona un ejercicio.
• Practica con listas, listas anidadas y cómo hacer un marcado HTML que luego se pueda editar fácilmente desde CSS.

• Solución ejercicio.
• Práctica con tablas.
• Aprendemos a anidar tablas.

• Ejercicio de la clase "Conocimientos y herramientas para desarrollo web".
• Formulario de donación de Greenpeace, con HTML que se crea para que luego se pueda aplicar fácilmente un CSS. Añadimos el CSS y el Javascript para conseguir un comportamiento dinámico.