Curso de HTML Express
El curso de HTML esencial para el desarrollo web
Material disponible
Básico
58 Clases 13 h
Este curso de HTML te enseñará todo lo que necesitas saber sobre el lenguaje de marcación, en un tiempo reducido, de modo que conozcas lo básico y necesario para abordar, seguidamente, el estudio de cualquier otra tecnología que requiera HTML como conocimiento de base.

Qué aprenderé en el Curso de HTML Express

  • Conceptos y filosofías importantes para aprender HTML
    • Manera correcta de usar el HTML y el CSS
    • Documento básico HTML
    • Etiquetas de bloque y etiquetas de línea
    • Qué es HTML5
    • Etiquetas semanticas
  • Etiquetas HTML
    • Párrafos, negritas, enlaces, imágenes...
      • Elementos compuestos por varias etiquetas
    • Listas, tablas...
      • Etiquetas de cabecera
    • Meta, viewport...
  • Formularios
    • Etiquetas para formularios
    • Validación de formularios HTML5
    • Envío de formularios
  • Conocimientos y Herramientas para desarrollo HTML
    • Colores RGB
    • Juegos de caracteres y caracteres especiales
    • Editores de código
    • Herramientas para desarrollo en los navegadores
    • Validadores de HTML
  • Composición de una página web
    • Estructura de contenido
    • Gestión de archivos externos y rutas
    • Primeros pasos con CSS: creación de un layout
    • Carga de Javascript
  • Extra de contenidos:
    • Dominios de Internet y espacios de hosting
    • Cómo subir archivos a un servidor
    • FTP, GIT
    • Wordpress
    • Ojo en la optimización
    • Siguientes pasos

Objetivos del curso

Nuestro objetivo es cubrir la etapa de aprendizaje de HTML en un tiempo reducido, centrándonos en aquellos conocimientos más relevantes para la mayoría de las personas que desean aprender el lenguaje.

En ese sentido, hemos creado un esquema de contenido que se centra más en explicar los usos correctos del lenguaje, su filosofía y buenas prácticas, que en el abordaje de manera detallada de cada etiqueta, atributo, etc. Paralelamente, debido a la evolución del lenguaje hace que en 2018 sea primordial estudiar las partes de HTML que verdaderamente se usarán en proyectos en la actualidad, dejando de lado las áreas que han caído en desuso.

En resumen, en el curso de HTML Express el estudiante podrá, de una manera práctica, aprender todo lo necesario para acometer cualquier tarea futura, con la garantía que el uso que haga en adelante de HTML será el más adecuado.

Por qué debes aprender Curso de HTML Express

No hace mucho tiempo, aprender HTML era la única vía necesaria para crear un sitio web. Los estudiantes aprendían este lenguaje y tenían todo lo que hacía falta para publicar su propia página, personal o profesional. Estamos hablando de los inicios de la popularización de Internet.

Hoy se puede construir una web sin siquiera conocer HTML, a través de diferentes plataformas online y sin embargo ese hecho no significa que el conocimiento del lenguaje haya perdido valor. Muy al contrario, decenas de profesiones de las más demandadas requieren dominar HTML, como uno de sus primeros pilares de aprendizaje.

En este tiempo, HTML se ha convertido en un medio, para llegar a nuevas parcelas de conocimiento, cuando antes era un fin en sí mismo. Ante esta filosofía hemos elaborado el Curso de HTML Express.

Clases y contenidos

Conceptos y filosofías importantes para aprender HTML

Introducción al Curso de HTML Express Gratis

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

Qué es HTML Gratis
  • 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).
Documento básico HTML

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.
Primeras etiquetas en el cuerpo

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.

Qué es HTML5
  • 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.
Etiquetas semánticas

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.

Preguntas y respuestas sobre el HTML semántico

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

Plan de contenido para el resto del curso Gratis

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í.

Etiquetas HTML

Sintaxis de HTML

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.

Generalidades de etiquetas

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.

Enlaces dentro del mismo documento
  • 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.
Enlaces a otras páginas del mismo sitio y rutas

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.

Enlaces absolutos, a otros sitios web

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

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

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

Ejercicio planetado como práctica

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

Formularios

Campos de formulario input

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

Campos checkbox y radio button

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.

Campos select de formulario

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.

Campos textarea

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 en formularios de HTML5
  • 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 HTML5
  • 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.
Envío de formularios
  • 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í.
Usar un servicio de envío de formularios

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.

Conocimientos y Herramientas para desarrollo HTML

Colores y RGB

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.

Definición de colores con CSS
  • 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.
Juegos de caracteres y UTF-8
  • 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.
Caracteres especiales del 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
  • Editores de código para desarrollar HTML.
  • Tipos de editores, ventajas, inconvenientes, funciones, etc.
Cómo usar la extensión Emmet
  • 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.
Configurar un sistema de Live Reload

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.

Herramientas para desarrolladores
  • 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.
Validadores de HTML
  • 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.
Ejercicios propuestos

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

Composición de una página web

Estructura de carpetas del sitio

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.

Generación del HTML para la práctica de composición

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.

Primeros pasos con CSS
  • 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.
Aplicación CSS para la capa de presentación
  • 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.
Introducción al diseño adaptable (Responsive)
  • 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.
Viewport y otras etiquetas del head
  • 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
Carga de Javascript
  • 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.
Ejercicio propuesto

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.

Contenidos Extra del curso de HTML

Optimización de la página: CSS y Javascript

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.

Optimización de la página: imágenes

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.

Práctica sobre optimización de ficheros gráficos

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.

Más sobre optimización

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.

Git: Crear un repositorio de código y subirlo a GitHub

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.

Clonar un repositorio GIT, remoto a local

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.

Dominios y alojamiento

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.

Subir la web a nuestro hosting con dominio propio por FTP
  • 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.
Usar un servicio de nuestro hosting para envío de formularios

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.

Siguientes pasos

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.

Tablas y Practica Final HTML

Tablas en HTML
  • 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.
Ejercicio de tabla: planetas
  • Soluciona del ejercicio planteado en la clase de "Contenidos extra".
  • Práctica con tablas.
Ejercicio de página de una receta de cocina
  • En este vídeo se soluciona un ejercicio planteado en la clase de "Contenidos extra".
  • Se practica con contenido en general, listas y tablas.
Ejercicio de índice de un libro
  • 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.
Ejercicio tablas anidadas
  • Solución ejercicio.
  • Práctica con tablas.
  • Aprendemos a anidar tablas.
Ejercicio de formulario correctamente maquetado
  • 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.

Valoraciones

Kirby Rodriguez

Bárbara Monrroy

Alberto J. Vílchez

¿Conoces nuestra tarifa plana?

Toda la formación de EscuelaIT, con más de 130 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.

Suscríbete