Menu

Curso gratis de Diseño Web

Lecciones del Curso Gratuito

Presentación del Curso

HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet. Se trata de la siglas que corresponden a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto.

El HTML se creó en un principio con objetivos divulgativos de información con texto y algunas imágenes. No se pensó que llegara a ser utilizado para crear área de ocio y consulta con carácter multimedia (lo que es actualmente la web), de modo que, el HTML se creó sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizarían en un futuro. Sin embargo, pese a esta deficiente planificación, si que se han ido incorporando modificaciones con el tiempo, estos son los estándares del HTML. Numerosos estándares se han presentado ya. El HTML 4.01 es el último estándar a febrero de 2001. Actualización a mayo de 2005, en estos momentos está apunto de presentarse la versión 5 de HTML, de la que ya se tiene un borrador casi definitivo.

Carpetas, archivos y tipos de extensiones de archivos

Una vez conocemos el concepto de HTML nos vamos a adelantar algunas cosas más. Este lenguaje se escribe en un documento de texto, por eso necesitamos un editor de textos para escribir una página web. Así pues, el archivo donde está contenido el código HTML es un archivo de texto, con una peculiaridad, que tiene extensión .html o .htm (es indiferente cuál utilizar). De modo que cuando programemos en HTML lo haremos con un editor de textos, lo más sencillo posible y guardaremos nuestros trabajos con extensión .html, por ejemplo cursoGratis.html

Editor, instalación y configuración

Un editor HTML es un software para editar y crear código HTML que se utiliza para sitios web u otros documentos web.

Los editores HTML basados en texto, el código fuente puede ser editado directamente.

Sin embargo, los editores HTML se diferencian de los puros editores de texto en que están integrados en un entorno de desarrollo u ofrecen numerosas funciones adicionales:

  • Detección automática de etiquetas HTML.
  • Detección de errores de sintaxis.
  • Función de autocompletar.
  • Accesos directos para etiquetas comunes.
  • Edición de código HTML directamente en el diseño de un documento web (editores WYSIWYG).

Introducción a HTML5

HTML5 es un lenguaje markup (de hecho, las siglas de HTML significan Hyper Text Markup Language) usado para estructurar y presentar el contenido para la web. Es uno de los aspectos fundamentales para el funcionamiento de los sitios, pero no es el primero. Es de hecho la quinta revisión del estándar que fue creado en 1990. A fines del año pasado, la W3C la recomendó para transformarse en el estándar a ser usado en el desarrollo de proyectos venideros. Por así decirlo, qué es HTML5 está relacionado también con la entrada en decadencia del viejo estándar HTML 4, que se combinaba con otros lenguajes para producir los sitios que podemos ver hoy en día. Con HTML5, tenemos otras posibilidades para explotar usando menos recursos. Con HTML5, también entra en desuso el formato XHTML, dado que ya no sería necesaria su implementación.

Introducción a CSS

CSS (en inglés Cascading Style Sheets) es lo que se denomina lenguaje de hojas de estilo en cascada y se usa para estilizar elementos escritos en un lenguaje de marcado como HTML. CSS separa el contenido de la representación visual del sitio.

CSS fue desarrollado por W3C (World Wide Web Consortium) en 1996 por una razón muy sencilla. HTML no fue diseñado para tener etiquetas que ayuden a formatear la página. Está hecho solo para escribir el marcado para el sitio.

Modelo de Caja

Este módulo analiza los estilos de cajas, uno de los pasos fundamentales para diseñar una página web. En este módulo recapitulamos el modelo de caja, luego observamos los diseños de caja de control estableciendo márgenes, bordes y relleno, colores de fondo personalizados, imágenes y otras características, y características sofisticadas como sombras y filtros en cajas.

Estructura Semántica y Maquetación con HTML5

Una de las novedades que hemos mencionado anteriormente son las etiquetas que se han introducido en HTML5. Existen más de 30 nuevas etiquetas semánticas que pueden ser utilizadas en nuestras páginas estáticas. Estas nuevas etiquetas se podrían clasificar en dos grupos:

  • Etiquetas que extienden a las actuales, como <video><audio> o <canvas>, y que además añaden nuevas funcionalidades a los documentos HTML, que podemos controlar desde JavaScript y
  • etiquetas que componen la web semántica, es decir, que no proponen nuevas funcionalidades pero sirven para estructurar sitios web, y añadir un significado concreto, más allá de las etiquetas generales como <div>.

Metaetiquetas Útiles en todo Proyecto Web

as metaetiquetasetiquetas meta o elementos meta (también conocidas por su nombre en inglés, metatags o meta tags) son etiquetas HTML que se incorporan en el encabezado de una página web y que resultan invisibles para un visitante normal, pero de gran utilidad para navegadores u otros programas que puedan valerse de esta información.

Su propósito es el de incluir información (metadatos) de referencia sobre la página: autor, título, fecha, palabras clave, descripción, etc.

Bordes, RGBA, fuentes, rems, sombras y gradientes con CSS

Propiedades de texto, tamaño de caja y fondos con CSS

Transformaciones 2D y 3D, transiciones y animaciones