HTML significa HyperText Markup Language, y, como su nombre lo indica, se trata de un 'lenguaje' de programacion. Mas espeficamente es el lenguaje que hablan los 'navegadores de Internet', como Firefox, Google Chrome o el Internet Explorer.
En su forma mas simple, html, es un conjunto de instrucciones escritas en un archivo de texto, usando una serie de comandos que el navegador de internet interpretara para luego poder 'dibujar y presentar' la pagina de internet tal cual la ves cuando, por ejemplo, visitas la pagina 'google.com'.
Mi primera pagina web!
En este ejemplo, vamos a 'construir' una simple pagina de Internet usando HTML.
Abran el Notepad y copien y peguen las siguientes lineas de codigo HTML.
<html>
<body>
<h2>Mi Primera Pagina de Internet!</h2>
<img border="0" src="http://farm7.static.flickr.com/6135/5917128900_26a9d4319c_b.jpg" alt="Mi Primera Pagina de Internet" width="304" height="228" />
</body>
</html>
Luego guarden el archivo con el nombre que ustedes deseen, pero asegurense de ponerle .html al final!
Esto es muy importante, ya que esta extension le indica a Windows que el archivo tiene que ser abierto con un Navegador de Internet.
Analizando el lenguage html
En el ejemplo anterior, vemos una serie de palabras entre los simbolos < >. Estas palabras se llaman 'tags' y son los elementos básicos a la hora de crear una pagina web. Estos tags le indican a tu navegador de Internet COMO tiene que 'dibujar' la pagina en la pantalla de tu computadora.
Por ejemplo, <h2> indica el 'titulo' y tamaño de letra de la pagina. El tag <img> se usa para 'cargar' una foto. "Alt" le indica a tu navegador que debe mostrar el texto indicado al poner el puntero sobre la foto.
Todo lo que esta contenido entre los dos tags <html> le indica al navegador de Internet que se trata de un documento html y que debe ser tratado y leido como tal. Los dos tags <body> contienen el 'cuerpo' de la pagina, es decir 'enlaces, fotos, texto, listas, etc.
En el ejemplo anterior, puedes cambiar los valores de todo lo que esta en rojo, guardar el archivo nuevamente con otro nombre y abrirlo luego con un doble click para ver los cambios!
Los tags de HTML son muchos y el tema es bastante complicado. La pagina de Internet W3Schools es un excelente lugar para aprender el funcionamiento del lenguaje HTML. Esta llena de ejemplos que podemos usar y modificar para ver los resultados de inmediato.
Si quieres tener una idea mas completa de lo complejo que pueden llegar a ser el lenguaje HTML usado en cualquier pagina, haz lo siguiente:
- Abre cualquier pagina que te guste.
- Si usas Firefox, ve a Tools/Herramientas, luego a Web Developer y por ultimo haz click en Page Source. Si usas el Internet Explorer, ve a View/Ver y luego haz click en Source/Fuente
- Lo que veras a continuacion es el documento escrito en HTML que tu navegador lee cada vez que abres la pagina!
HTML 5
HTML 5 es basicamente la mas reciente 'version' del lenguaje HTML. Sin embargo, es considerado como uno de los avanzes mas importantes realizados en los ultimos años en relacion a lenguajes de Markup ya que incorpora una serie de 'tags' o elementos nuevos de HTML que potencian y simplifican el diseño de paginas web al permitir la incorporacion de contenido multimedia directamente en el codigo fuente de la pagina, sin necesidad de recurrir a 'addons' o complementos externos como el 'flash player'.
Algunos de los 'tags' mas importantes de la version 5 del HTML son <video>, <audio>
La muerte del Flash Player?
Antes del HTML 5, cada vez que queriamos poner un video en una pagina debiamos recurrir a plugins o addons como el Flash Player, Quicktime, Silverlight, etc para poder mostrar un video en nuestra pagina. HTML simplifica tremendamente las cosas al incorporar un tag que se encarga precisamente de manipular video.
Es por eso que mucha gente piensa que Flash tiene los dias contados y que, cuando HTML se vuelva mas popular, usar Flash Player para mostrar un video en una pagina, sera totalmente innecesario.
Mi primera pagina HTML 5!
Abre el notepad y copia y pega las siguientes lineas de codigo:
<!DOCTYPE HTML>
<html>
<body>
<h2> Mira mama, sin Flash! <h2>
<video controls="controls" autoplay="autoplay">
<source src="movie.mp4" type="video/mp4" />
<source src="http://www.w3schools.com/html5/movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
</body>
</html>
Ahora guarda el archivo, nuevamente, agregando la extension .html al final y abrelo!
Uno de los tags mas importantes de HTML 5 es <!DOCTYPE HTML> y es lo que le indica al browser que la pagina debe ser 'renderizada' (dibujada) usando HTML 5
Dame mejor calidad de video!
Junto con la llegada de HTML, un nuevo formato de video llamado 'WebM' ha comenzado a ganar popularidad. Basicamente se trata de un sistema de compresion de datos aplicado exclusivamente a audio y video, que nos permite crear videos de alta calidad y resolucion y con un tamaño bastante pequeño.
Videos de YouTube sin Flash Player?
Aunque no lo creas, es posible! YouTube tambien tiene, por supuesto, su version HTML 5. Para usar YouTube sin necesidad de usar el Flash Player para ver los videos ve aqui:
http://www.youtube.com/html5
Ve hasta abajo y haz click en 'Join the html 5 trial'. A partir de ahora, si un video esta disponible en formato WebM, este sera cargado en lugar de la habitual version Flash. Cabe aclarar que dicha preferencia de YouTube estara guardada en una cookie en tu computadora, asi es que si por algun motivo borras tus cookies, deberas activar el Html 5 Trial nuevamente si quieres continuar usandolo!
Para determinar si un video esta en formato Flash o WebM, haz click con el boton derecho del raton en el video y observa la informacion del menu de contexto.
Comentarios
Publicar un comentario