HTML y CSS para principiantes

Cualquiera que quiera crear sitios web, tarde o temprano entrará en contacto con HTML. Por eso conquistaremos juntos el hermoso mundo del HTML en las próximas sesiones de formación en vídeo. Verás paso a paso en qué consiste este lenguaje y cómo se puede utilizar en combinación con hojas de estilo para crear sitios web. Al principio, sin embargo, hay una pregunta: ¿De qué se trata HTML y las hojas de estilo? Al final de esta formación en vídeo, también descubrirá qué software necesita para crear y probar sitios web.

A diferencia de lenguajes de programación como Java, con HTML se obtienen rápidamente los primeros resultados sin necesidad de familiarizarse demasiado. Todo lo que necesita para empezar es un editor y un navegador. En este curso de formación en vídeo, creará su primer documento HTML y obtendrá una salida directa en el navegador. También aprenderá cómo se estructuran los documentos HTML, es decir, los sitios web, y qué estructura básica siguen.

Ya conoces la relación entre los términos elemento, etiqueta y atributo de la primera parte de esta serie. Ahora veremos cómo se pueden utilizar en la práctica en documentos HTML. Al final de esta formación en vídeo, aprenderás a comprobar la corrección sintáctica de tu código HTML.

Sin duda, sus sitios web no sólo constarán de imágenes, sino también de textos. Y los textos deben estructurarse con sentido, aunque sólo sea por el bien de una buena legibilidad. HTML ofrece numerosos elementos para ello. Esta formación en vídeo presenta los elementos de estructuración más importantes para los textos. También aprenderá a enmascarar caracteres HTML y a generar listados de programas.

Un formato adecuado es necesario para una buena legibilidad de los textos. Y esto va más allá de los meros elementos de estructuración, como los títulos y los párrafos de texto. En HTML, por ejemplo, se pueden marcar citas y poner en negrita o cursiva pasajes individuales. Este vídeo de formación proporciona las herramientas necesarias para ello.

Los elementos que encontrará una y otra vez en HTML son las listas. Esto no sólo se aplica a las listas de tareas y datos de contacto, sino también a la definición de menús. Por tanto, las listas desempeñan un papel fundamental en HTML. Razón más que suficiente para estudiarlas en detalle. En este vídeo de formación, conocerás todas las variantes de listas que ofrece HTML. Se trata de las listas con viñetas, las listas numeradas, las listas de definición y las listas de menú. También obtendrá consejos sobre cómo personalizar las listas visualmente si es necesario.

Las tablas siguen desempeñando un papel importante en los sitios web. Sin embargo, esto sólo se aplica a la presentación de datos. Cuando CSS aún no existía o no era realmente compatible con los navegadores, las tablas también cumplían una función completamente distinta: se utilizaban para implementar diseños. Los elementos individuales de la página se colocaban dentro de las celdas de la tabla. Afortunadamente, los monstruos resultantes de las tablas de diseño son cosa del pasado gracias a CSS. Hoy en día, las tablas en el diseño web se utilizan exclusivamente para lo que realmente están pensadas: la presentación clara de los datos.

Las tablas que parecen coherentes no tienen por qué constar necesariamente de un número idéntico de celdas dentro de una fila de tabla. Este vídeo de formación muestra cómo enlazar las celdas de una tabla. En la segunda parte, aprenderá a etiquetar las tablas. Este aspecto es importante, ya que le permite mostrar a los visitantes de qué datos se trata en última instancia. La formación en vídeo concluye con un examen detallado del diseño de tablas en HTML. Y es que en este sector han cambiado muchas cosas con respecto a las versiones anteriores de HTML.

Casi ningún sitio web puede prescindir de los gráficos. Así que no es de extrañar que el tema de los gráficos también desempeñe un papel importante en esta serie. Éste y los siguientes tutoriales en vídeo te mostrarán cómo integrar gráficos en tu sitio web. Al principio, sin embargo, nos centraremos en otro aspecto: ¿qué formatos de imagen son adecuados para su uso en línea? La segunda parte se centrará en cómo se pueden referenciar las rutas de las imágenes.

En la sección anterior se ha explicado cómo referenciar imágenes. Sin embargo, esto no es en absoluto el final de la historia cuando se trata de imágenes. De hecho, las imágenes pueden describirse con más detalle utilizando los atributos correspondientes. Este es el tema de la primera parte de este vídeo. La segunda parte describe cómo pueden implementarse los subtítulos utilizando la sintaxis de HTML5.

La sal en la sopa de Internet es la capacidad de conectar contenidos entre sí mediante hipervínculos. Si no existieran estos hipervínculos, Internet en su forma actual sería impensable. En esta y la próxima sesión de formación en vídeo, descubrirás las variantes que te ofrece HTML en cuanto a definiciones de hipervínculos.

En lo que respecta a los hipervínculos, HTML ofrece muchas más posibilidades que las mostradas en el vídeo de formación anterior. Por ejemplo, puede definir enlaces de correo electrónico y ofrecer archivos para descargar. Estas y otras variantes de hipervínculos se explican en este vídeo de formación.

Para anticiparse a esto: Los formularios han dado un salto cualitativo sobre todo en HTML5. Gracias a numerosos tipos de campo nuevos, se pueden crear formularios muy interesantes. Por supuesto, conocerás estas nuevas posibilidades. Sin embargo, esta formación en vídeo comienza con las herramientas necesarias para definir formularios. Para empezar, veremos cómo crear campos de entrada de una sola línea. Verá cómo se pueden definir, cómo se les pueden preasignar valores y cómo se pueden configurar para que no se puedan escribir. También aprenderá a definir campos de contraseña. Después de todo, este es un tipo de campo que puede utilizar de vez en cuando.

En este vídeo, aprenderás sobre otros tipos de campo que puedes utilizar para personalizar tus formularios. En concreto, se trata de los campos de selección, los botones de radio y las casillas de verificación. Todos ellos son elementos importantes que necesitas una y otra vez en los formularios. Razón suficiente para echar un vistazo más de cerca a estos y otros elementos.

HTML5 ha cambiado mucho, sobre todo en lo que respecta a los formularios. Razón suficiente para echar un vistazo detallado a las numerosas nuevas funciones de formulario que pueden utilizarse ahora. Se acabaron los campos de entrada simples. Por fin se pueden definir deslizadores, campos de fecha, etc., y todo ello sin utilizar JavaScript.

La formación en vídeo anterior ha allanado el camino hacia el mundo de los formularios HTML5. Sin embargo, esto no es en absoluto el final de la historia. De hecho, HTML5 tiene mucho más que ofrecer en este ámbito.

En HTML5, además de los tipos de campo presentados, hay muchos otros aspectos interesantes. Por ejemplo, ahora puede realizar una función de autocompletar para campos de formulario al estilo de Google con muy poco esfuerzo. Esto y otras cosas se muestran en este vídeo de formación.

Cualquiera que trabaje con HTML5 no puede evitar el tema de la semántica. En esta y las próximas sesiones de formación en vídeo, conocerás los elementos más importantes que trae consigo HTML5, con los que podrás estructurar los documentos de forma lógica. De hecho, esta estructura lógica es esencial si quieres que tu sitio web esté preparado para el futuro.

HTML5 introduce numerosos elementos de estructuración nuevos. Ya le hemos mostrado cuáles son en principio en el vídeo de formación anterior. Ahora es el momento de ponerlos en práctica. Al fin y al cabo, son estos elementos los que garantizan la estructuración semántica de los documentos. En esta formación en vídeo, conocerá principalmente los dos elementos artículo y sección. Éstos proporcionan la estructura básica de los documentos HTML. Al final de este vídeo, también veremos las diferencias entre div, article y section.

En HTML5, los documentos no sólo pueden dividirse en artículos y secciones. De hecho, hay muchos elementos adicionales para la estructuración semántica con encabezado, pie de página & co. Merece la pena echarles un vistazo.

En este último vídeo de formación de la serie de elementos semánticos, conocerá más elementos estructurantes. De hecho, HTML5 también ofrece elementos para zonas de navegación, marginales y resúmenes.

En versiones anteriores de HTML, incrustar contenidos multimedia era un horror. Se utilizaba una combinación de objetos y elementos incrustados para introducir vídeos y sonido en el sitio web. Era dudoso que el vídeo incrustado pudiera reproducirse realmente. HTML5 también ha avanzado mucho en este campo.

Ya ha visto cómo se pueden integrar los vídeos. Por supuesto, los vídeos no son lo único que puede presentar a sus visitantes en su sitio web. Por eso, esta formación en vídeo describe las opciones que le ofrece HTML5 para integrar archivos de audio y películas Flash. Porque usted también necesita mostrar estas cosas en su sitio web de vez en cuando.

Los marcos ya no existen en HTML5. Sin embargo, sus homónimos, los iFrames, también han llegado a la nueva era HTML y están a bordo en HTML5. Mientras que los marcos clásicos dividen una página en áreas independientes, los iFrames pueden utilizarse para integrar cualquier recurso en las páginas web.

El HTML sirve para estructurar el contenido. En cuanto se trata de diseñar la página, entran en juego las hojas de estilo en cascada (CSS). Porque es la combinación de CSS y HTML lo que permite crear sitios web atractivos a partir de una estructura HTML simple. Razón más que suficiente para profundizar en las CSS.

Un término que encontrará una y otra vez en relación con CSS es "selectores". Estos selectores se utilizan para definir los elementos que deben formatearse con CSS. En este vídeo de formación conocerás los primeros selectores. Conocerá los selectores element, ID y universal. Tendrás que tratar con ellos a diario cuando diseñes tus sitios web con CSS.

Algunos selectores se presentaron en el vídeo de formación anterior. Por supuesto, CSS también ofrece muchos otros selectores.

En este último vídeo de formación sobre selectores, te presentaré una forma muy especial de selectores. Se trata de las llamadas pseudo-clases y pseudo-elementos. Se trata de selectores que no se refieren a elementos HTML específicos, sino que son generados por el dispositivo de salida.

En éste y en los próximos videotutoriales, te presentaré las propiedades CSS más importantes. Por cierto, el objetivo aquí no es presentarte una referencia de CSS. Más bien, quiero que te hagas una idea de lo que es posible con CSS. Empecemos con el diseño de fuentes. En este vídeo de formación, se presentan todas las cosas que están directamente relacionadas con las llamadas fuentes. Ten en cuenta que hay otras propiedades relacionadas con el diseño de fuentes que se mostrarán en el siguiente vídeo de formación.

Las propiedades CSS presentadas en este vídeo de formación pueden utilizarse para personalizar visualmente textos y caracteres. Por ejemplo, se puede modificar el espaciado entre las distintas letras y alinear los textos. Estas propiedades también ayudan a presentar los textos de forma atractiva.

Por supuesto, CSS también incluye definiciones de color y fondos gráficos. Las propiedades correspondientes se presentan en este vídeo de formación. De hecho, CSS también ofrece numerosas posibilidades en este ámbito. No sólo se pueden definir colores e imágenes. También es posible repetir gráficos de fondo.

Especialmente cuando se trata de la maquetación de sitios web, tendrá que ocuparse de la definición de los márgenes exteriores y el espaciado. En las últimas sesiones de formación en vídeo de esta serie, se realizará un amplio proyecto de ejemplo en el que se demostrará en la práctica el uso de estas y otras propiedades CSS.

CSS tiene algunas propiedades interesantes para los párrafos y bloques de texto que me gustaría compartir contigo. Por ejemplo, puedes alinear los párrafos de texto a la izquierda y a la derecha.

Cuando se habla de marcos, la mayoría de la gente piensa primero en mesas. Y, en efecto, los marcos desempeñan un papel importante en relación con las tablas. Sin embargo, CSS también puede utilizarse para añadir bordes a otros elementos. Y el aspecto final de estos marcos también puede determinarse explícitamente mediante definiciones CSS.

Probablemente ya sepa cómo se definen las listas. Al fin y al cabo, ya se ha explicado con detalle en esta serie. Sin embargo, las listas no son necesariamente elegantes por naturaleza. Para hacerlas visualmente atractivas, existen las correspondientes propiedades CSS. Descubra cuáles son y cómo utilizarlas en este vídeo de formación. La segunda parte trata de los llamados contadores, que también pueden utilizarse para implementar una numeración más compleja.

Cuando se trata de la maquetación de páginas web, el llamado modelo de caja será su compañero constante. Esto se debe a que, en última instancia, determina cómo y dónde se colocan los elementos.

Para poder colocar los elementos de la página web en los lugares deseados, debe utilizar propiedades CSS muy específicas.

En el vídeo de formación anterior ya se abordó brevemente el llamado principio de flotación. Sin embargo, el tema es tan complejo que aquí volveremos a tratarlo en detalle. Esto se debe a que en realidad es un concepto crucial en CSS. Porque sólo si entiendes este tema puedes realmente crear sitios web.

En las sesiones de formación en vídeo anteriores se explicaron los fundamentos del trabajo con HTML y CSS. Ahora, por supuesto, hay que recoger los primeros frutos. Por ello, en las próximas sesiones de formación en vídeo se creará paso a paso un sitio web de ejemplo. En esta formación en vídeo, sin embargo, aprenderá primero sobre las diferentes variantes de diseño. Después de todo, elegir la forma de diseño adecuada debería ser siempre lo primero que se tiene en cuenta a la hora de diseñar un sitio web.

Para nuestro proyecto práctico parto de la base de un diseño de columnas típico. Sin embargo, antes de presentar este proyecto en vivo y en color, me gustaría mostrarte específicamente cómo puedes implementar diseños de columnas tú mismo. Me centraré en los diseños de dos y tres columnas, ya que siguen siendo la base de la mayoría de los sitios web.

En los siguientes videotutoriales, te mostraré cómo implementar el diseño de un sitio web paso a paso. Existen enfoques muy diferentes al respecto. Los diseños suelen crearse en Photoshop. A continuación, se recortan los elementos individuales de la página y se vuelven a montar como un sitio web utilizando CSS y HTML. Así es exactamente como se hace aquí. Sin embargo, yo utilizo GIMP, que está disponible gratuitamente, en lugar de Photoshop. Sin embargo, los pasos descritos también se pueden reproducir en Photoshop.

Los primeros pasos hacia su propia maquetación se dieron en el vídeo de formación anterior. Por supuesto, aún faltan numerosos elementos. Se añadirán en este vídeo de formación. Una vez completado el diseño, el siguiente paso es recortarlo, lo que se conoce como corte. Este es, en última instancia, el paso que permite implementar en la práctica el diseño creado utilizando HTML y CSS.

Ya ha creado el diseño. Ahora es el momento de ponerlo en práctica. En este vídeo de formación, crearemos juntos la estructura HTML básica del sitio web.

La estructura básica de la página ya existe, pero sigue siendo bastante espartana. En este vídeo de formación, se ampliará el contenido de la página. En primer lugar, la atención se centra en el menú de la parte superior de la página. A continuación, los menús derecho e inferior.

Un aspecto decisivo para que un sitio web sea visualmente atractivo es, por supuesto, su tipografía. En el transcurso de esta serie, ya has conocido las posibilidades que ofrecen HTML y CSS en cuanto al diseño tipográfico. En este vídeo de formación, las utilizaremos para dar vida a la página. Por cierto, no sólo nos centraremos en las variantes clásicas. La palabra mágica para el uso de fuentes "exóticas" es @font-face.

Normalmente, debe ofrecer a sus visitantes la posibilidad de ponerse en contacto con usted. La forma más fácil de hacerlo es anotar un número de teléfono y/o su dirección de correo electrónico. Usted puede hacer esto, pero no es particularmente conveniente para los visitantes. Por lo tanto, en este vídeo de formación crearemos un formulario que los visitantes podrán utilizar para ponerse en contacto con nosotros muy fácilmente. Y, por supuesto, utilizaremos las posibilidades que ofrecen HTML5 y CSS3.

Ya se han definido y ultimado la estructura básica y el diseño fundamental del formulario. Y el formulario ya tiene un aspecto bastante atractivo. Sin embargo, gracias a CSS3, aún queda mucho por hacer para mejorar el aspecto del formulario. En este vídeo de formación, el formulario se diseña un poco más.

A estas alturas, seguro que ya ha invertido mucho tiempo y esfuerzo en el desarrollo de su sitio web. Desde la concepción y el diseño de la maqueta hasta su realización en HTML y CSS. Razón más que suficiente para presentar finalmente su sitio web al mundo. Eso es exactamente de lo que trata este vídeo de formación. Le mostraré cómo poner su sitio web en línea. En primer lugar, aprenderá a encontrar el proveedor y el paquete de espacio web adecuados. Luego se suben los datos al servidor utilizando el muy popular FileZilla. Y entonces, bueno, entonces el sitio web está realmente en línea.

En este vídeo de formación, me gustaría darte una pequeña idea del entorno de desarrollo adecuado para crear sitios web. Si ya has escrito sitios web completos o páginas individuales más pequeñas, normalmente ya tienes estos editores y puedes saltarte este vídeo.

Se muestran:
Dreamweaver
Panic Coda
Panic Transmit: http: //panic.com/transmit/
Filezilla: http: //filezilla.de/

HTML5 boilerplate es una potente plantilla para sitios web HTML5 y CSS3; hace que HTML5 sea lo más compatible posible con distintos navegadores y contiene algunas plantillas de código muy buenas en las áreas de JavaScript, CSS3 y, por supuesto, HTML.

En este vídeo de formación me gustaría presentarte estas funciones. Actualmente no existe una plantilla mejor para iniciarse en HTML5 y CSS3.

En este vídeo de formación me gustaría presentarte algunas herramientas muy útiles que puedes utilizar para desarrollar HTML5 y CSS3.

Entre ellas se incluyen
html5css3box.com
kuler.adobe.com (ahora https://color.adobe.com/de/create/color-wheel)
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com