HTML 5 Esencial

HTML 5 Esencial

39,00

HTML es la estructura, el armazón de todas las páginas y aplicaciones Web que seguro utilizas cada día. Si quieres dominar el mundo Web, HTML es el primer paso. Una vez aprendas cómo funciona HTML podrás acceder a tecnologías más avanzadas.

En el curso de HTML 5 aprenderás:

  • Las principales características del lenguaje HTML.
  • Todas las novedades de HTML 5.
  • La mejores prácticas para estructurar tu código HTML.
  • Estructurar un proyecto real desde cero, utilizando HTML.

Al finalizar el curso sabrás darle forma, contenido y estructura a cualquier maquetación, layout o diseño Web.

No es necesario que tengas conocimientos previos de desarrollo Web, sólo la actitud correcta, ganas de aprender y 30 minutos al día.

El curso de HTML 5 Esencial va dirigido a cualquier persona que quiera dar el primer paso en la carrera de desarrollo front-end y acceder a nuevas oportunidades profesionales.

Garantía ESAT
SKU: course-33 Categoría: Etiquetas: , ,

Descripción

Introducción

  • ¿Qué es HTML? En la primera lección aprenderemos qué significa HTML a nivel conceptual y cuáles son sus principales características.
  • Texto plano VS jerarquía y estructura. ¿Qué ocurre cuando aplicamos la estructura HTML a un documento que contiene texto plano? Es lo que veremos en esta lección.
  • Comentarios HTML. Los comentarios forman parte de cualquier lenguaje de marcado y programación. HTML no iba a ser diferente. En esta lección aprenderás lo que son y cómo usarlos.

Etiquetas organizativas

  • ¿Qué son? Ya sabes que HTML es lenguaje de marcado a través de etiquetas. En esta lección veremos cuáles son las principales etiquetas de organización de contenido.
  • DOCTYPE. La etiqueta DOCTYPE indica al navegador el tipo de contenido que se va encontrar en el documento y cómo interpretarlo.
  • HTML. HTML es la etiqueta padre de cualquier documento (HTML). El resto de etiquetas organizativas viven dentro de ella.
  • HEAD. Dentro de HEAD tienen cabida todos los metadatos que definen el documento HTML así como recursos externos e internos que sean necesarios.
  • BODY. En el interior de BODY tienen cabida el resto de etiquetas: las de contenido. Dicho de otra forma, todo lo que vive dentro de BODY se visualiza en el navegador.
  • Añadir recursos a HEAD. Para el funcionamiento de cualquier proyecto Web son necesarios una serie de recursos (interno y externos). Estos, por lo general, se definen dentro de HEAD.

Etiquetas de texto y contenedoras

  • ¿Qué son? Vamos a revisar cuáles son las principales etiquetas que permiten definir diferentes tipos texto para cada situación, además de cómo agrupar contenido relacionado.
  • Headlines. Las etiquetas H1-H6 sirven para delimitar qué contenido hace de titular o subtitular del documento HTML.
  • Párrafos. La etiqueta P sirve para crear un párrafo en una composición HTML.
  • Span. En ocasiones es necesario sub-seleccionar partes de un elemento mayor (ej.: una frase dentro de un párrafo). La etiqueta SPAN te permite hacerlo de forma sencilla.
  • Horizontal rule. Con la etiqueta HR puedes insertar una línea horizontal que haga de separador en tu documento HTML.
  • Citas. Con la etiqueta BLOCKQUOTE/Q puedes incorporar citas o contenido de otras fuentes a tu documento HTML.
  • Texto pre-formateado. La etiqueta PRE mantiene los espacios y saltos de línea del contenido de texto a incorporar a tu documento HTML.
  • Listas. No importa la temática de tu documento HTML, casi con toda seguridad te hará falta mostrar contenido en forma de lista gracias a la etiqueta UL/OL.
  • Listas de descripción. Con el conjunto de etiquetas DL/DT/DD puedes componer de forma sencilla listados de términos y sus descripciones y definiciones.
  • Content divisor (div). La etiqueta DIV se usa como agrupador o divisor genérico de contenido en cualquier documento HTML.
  • Tablas. Si necesitas mostrar contenido tabular (en forma de tabla) en tu documento HTML, la etiqueta TABLE es la solución.

Hipervínculos y enlaces

  • Estructura y tipos de hipervínculos. ¿Qué es un hiperenlace y cómo está formado?. Eso es lo que aprenderás en esta lección.
  • Enlaces relativos. Los enlaces a recursos locales (del mismo proyecto) se llaman relativos. Veamos cómo funcionan.
  • Enlaces absolutos. Si enlazas a recursos externos estás, en esencial, creando un enlace absoluto. Así es como funcionan.

Formularios

  • Form. HTML dispone de formularios para recibir y procesar el feedback generado por los usuarios/as de tu página Web.
  • Input y label. La etiqueta INPUT hace de contenedor de texto (entre otras funciones) sencillo. Permite que cualquier usuario/a introduzca información en un formulario.
  • Textarea. Cuando necesites la posibilidad de introducir párrafos de texto en un formulario debes utilizar la etiqueta TEXTAREA.
  • Select. La etiqueta SELECT sirve para presentar una serie de opciones y permitir que el usuario/a elija entre ellas.
  • Checkbox. Con CHECKBOX mostramos un listado de opciones que el usuario puede marcar y desmarca.
  • Radio. Los elementos RADIO funcionan de forma similar a CHECKBOX, salvo que permiten elegir una entre varias opciones.
  • Submit. SUBMIT es un tipo de especial de INPUT. Su función es enviar un formulario para su procesamiento.

HTML5

  • Peso semántico. La versión 5 de HTML añade una nueva cualidad al lenguaje: el significado. Veamos qué significa esta novedad tan importante.
  • Section. Con SECTION dispones de un agrupador (como DIV) con peso semántico, el cual delimita contenido relacionado.
  • Article. El elemento ARTICLE sirve para delimitar contenido autónomo (por ejemplo, una noticia) en un documento HTML.
  • Header. El elemento HEADER está definido por su contenido y no por su posición, es decir: puede existir más de un HEADER por documento.
  • Footer. El elemento FOOTER está definido por su contenido y no por su posición, es decir: puede existir más de un FOOTER por documento.
  • Aside. Con ASIDE puedes agrupar contenido que está relacionado de alguna forma con otro contenido. Veamos cómo funciona.
  • Nav. El elemento NAV tiene la función de envolver y agrupar cualquier estructura que tenga la navegación como función en tu documento HTML.
  • Main. El elemento MAIN es el contenedor principal y con mayor peso semántico. Veamos cómo utilizarlo.
  • Nuevos tipos de input. HTML5 incorpora nuevos tipos de INPUT, útiles en muchos escenarios.

Objetos

  • ¿Qué son? Cuando quieres incorporar contenido (más allá del texto) a tu documento HTML, necesitas hacer uso de los OBJETOS.
  • Imágenes. Con el elemento IMG puedes añadir imágenes (locales o externas) a tu documento HTML.
  • Vídeo. Con el elemento VIDEO puedes añadir vídeos (locales o externos) a tu documento HTML.
  • Audio. Con el elemento AUDIO puedes añadir audios (locales o externos) a tu documento HTML.
  • Iframe. Con el elemento IFRAME puedes mostrar el contenido de otro documento HTML (local o externo) en tu documento HTML.

Siguientes pasos

  • Despedida. Ha llegado el final del curso. Ahora tienes los conocimientos esenciales de HTML para seguir avanzando en tu carrera. Veamos cuáles son los siguientes pasos.

No te pierdas ninguno de nuestros cursos online
sobre desarrollo Web y App

Si no quieres perderte todo el material que estamos preparando te recomendamos que te suscribas a nuestra newsletter. Así, además de ayudarnos a conocerte –y por lo tanto a ayudarte– mejor, serás el primero en enterarte de los detalles de todo lo que esté desarrollando.

Preguntas frecuentes

  • No tengo claro si este curso es para mí. Lo entiendo ya que hay muchos cursos sobre HTML, sin embargo no todos están impartidos por especialistas en el mundo Web y que además sigan en activo.
  • No tengo claro si debo invertir en un curso más económico. Siempre hay opciones más económicas. Sin embargo estoy seguro que de coincidirás conmigo en que precisamente en la educación es el último lugar donde escatimar.
  • No sé si dispondré del tiempo suficiente. Sólo necesitas 15 a 30 minutos al día. Si piensas que que no dispones de ellos es que te estás engañando a ti mismo/a.
  • Me da miedo dejar este curso a la mitad, como muchos otros anteriormente. Dudo mucho que te ocurra en este caso ya que he sintetizado todo lo que debes saber sobre HTML en lecciones breves y directas.
  • No me queda por qué este curso es mejor que los demás. No puedo decir que sea mejor que los demás, pero si que puedo asegurarte de que si inviertes en tu futuro profesional y me das la oportunidad, te ayudaré a dar tus primeros pasos en el mundo front-end con confianza.