Ya llevamos varios aspectos importantes sobre programación web explicados hasta ahora, hemos recorrido ya la teoría de HTML, CSS y Javascript en distintos niveles. Realmente de HTML conocemos solamente la teoría básica, por eso en este tutorial quiero hablarles un poco más sobre este.
1 - XHTML
Hasta ahora hemos escrito bastante código de HTML pero no he explicado que pasaría si escribiera un HTML incorrecto, es decir uno en el que no cierre las etiquetas usadas, confunda el orden de las etiquetas y cierre en orden inverso. Estos errores suelen pasar muchas veces y no nos damos cuenta porque el explorador automáticamente cierra las etiquetas en un orden lógico, que algunas veces es lo que queremos pero otras no. Con poco código en ocasiones es difícil encontrar el error, por esta razón existe XHTML y es HTML expresado como XML válido. Es más estricto a nivel técnico, pero esto permite que posteriormente sea más fácil al hacer cambios o buscar errores.
Tenemos varias ventajas del XHTML sobre el HTML, como por ejemplo un navegador no necesita implementar heurísticas para detectar qué quería hacer el programador, por lo que el parser puede ser mucho más sencillo. Como se trata de XML se puede utilizar fácilmente editores para el procesamiento de documentos XML genéricos.
Las reglas básicas de XHTML son:
HTML ha ido mejorando al pasar de los años, a este se le han agregado nuevas etiquetas y facilidades para nosotros los progamadores. En octubre de 2014 fue finalmente terminado HTML5 y es ahora el estándar en el mundo web. A diferencia de su versión anterior incluye etiquetas como:
Lo primero que debemos colocar en nuestro archivo de HTML es <!DOCTYPE>, esta instrucción le indica la versión del HTML escrito al explorador web.
3 - Video
Para incorporar un archivo de video solo necesitamos colocar la etiqueta video y mediante los atributos de height especificamos el alto del video, width el ancho y con controls incluimos controles. Finalmente para el video anidamos la etiqueta source para especificar el archivo y tipo (con src se especifica la dirección del archivo).
Seguimos teniendo la posibilidad de agregar todavía los atributos id, name, class, entre otros.
4 - IFRAME
Actualmente las páginas web tienen mucha publicidad, videos de otras páginas web como Youtube y páginas dentro de otras, esto se logra gracias a la etiqueta iframe. El atributo que necesitamos en esta etiqueta para especificar la página fuente es src, height para el alto, width el ancho y frameborder para el borde del elemento. Otros atributos los pueden encontrar en esta página.
Para el próximo tutorial haremos uso de la etiqueta canvas, con la cual podremos hacer VIDEOJUEGOS!
Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.
Descarga aquí todos los archivos fuente.
1 - XHTML
Hasta ahora hemos escrito bastante código de HTML pero no he explicado que pasaría si escribiera un HTML incorrecto, es decir uno en el que no cierre las etiquetas usadas, confunda el orden de las etiquetas y cierre en orden inverso. Estos errores suelen pasar muchas veces y no nos damos cuenta porque el explorador automáticamente cierra las etiquetas en un orden lógico, que algunas veces es lo que queremos pero otras no. Con poco código en ocasiones es difícil encontrar el error, por esta razón existe XHTML y es HTML expresado como XML válido. Es más estricto a nivel técnico, pero esto permite que posteriormente sea más fácil al hacer cambios o buscar errores.
Tenemos varias ventajas del XHTML sobre el HTML, como por ejemplo un navegador no necesita implementar heurísticas para detectar qué quería hacer el programador, por lo que el parser puede ser mucho más sencillo. Como se trata de XML se puede utilizar fácilmente editores para el procesamiento de documentos XML genéricos.
Las reglas básicas de XHTML son:
- Todo elemento debe estar dentro de una etiqueta.
- Las etiquetas anidadas deben tener un correcto orden de apertura y cierre.
- Los valores de los atributos deben encerrarse entre comillas.
- Los nombre de las etiquetas se escriben en letra minúscula.
HTML ha ido mejorando al pasar de los años, a este se le han agregado nuevas etiquetas y facilidades para nosotros los progamadores. En octubre de 2014 fue finalmente terminado HTML5 y es ahora el estándar en el mundo web. A diferencia de su versión anterior incluye etiquetas como:
- video: Permite incluir un archivo de video nativo en el HTML.
- audio: Permite incluir un archivo de audio nativo en el HTML.
- canvas: Actualmente muy usada para videojuegos.
- source: Podemos agregar un archivo en la página.
- embed: Útil para coloca contenido interactivo o aplicaciones externas, como por ejemplo Flash.
- header y footer: Encabezado y pie de página que son ya muy común en las páginas.
- Existen muchas otras etiquetas en HTML5 y las pueden consultar aquí.
Lo primero que debemos colocar en nuestro archivo de HTML es <!DOCTYPE>, esta instrucción le indica la versión del HTML escrito al explorador web.
3 - Video
Para incorporar un archivo de video solo necesitamos colocar la etiqueta video y mediante los atributos de height especificamos el alto del video, width el ancho y con controls incluimos controles. Finalmente para el video anidamos la etiqueta source para especificar el archivo y tipo (con src se especifica la dirección del archivo).
Seguimos teniendo la posibilidad de agregar todavía los atributos id, name, class, entre otros.
4 - IFRAME
Actualmente las páginas web tienen mucha publicidad, videos de otras páginas web como Youtube y páginas dentro de otras, esto se logra gracias a la etiqueta iframe. El atributo que necesitamos en esta etiqueta para especificar la página fuente es src, height para el alto, width el ancho y frameborder para el borde del elemento. Otros atributos los pueden encontrar en esta página.
Para el próximo tutorial haremos uso de la etiqueta canvas, con la cual podremos hacer VIDEOJUEGOS!
Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.
Descarga aquí todos los archivos fuente.
No hay comentarios:
Publicar un comentario