Introducción a HTML5

Intro a HTML5Maximiliano A. Fontana - LinkedIn: @maxfontana90

¿Qué es HTML?

HTML es confundido por muchos, como un lenguaje de programación, cuando en realidad HTML es un lenguaje de marcado. Los lenguajes de marcado, en pocas palabras, se utilizan para estructurar documentos y su información mediante el uso de ETIQUETAS.

Acrónimo de HTML

HTML: HyperText Markup Language

Otros lenguajes de marcado

Existen otros lenguajes de marcado muy conocidos como ser XML y sus derivados (RSS, WSDL, XML-RPC, etc), YAML y otros.

Los programas que interpretan este tipo de lenguajes de marcado se denominan PARSERs.

¿Cuál es su utilidad?

En la actualidad los lenguajes de marcado se utilizan principalmente para definir archivos de configuración de aplicaciones, para realizar intercambios de datos (serialización de objetos, intercambio de información entre aplicaciones que trabajan con distintas tecnologías) y estructurar datos e información.

HTML y sus etiquetas

Los documentos HTML también se denominan páginas web y están compuestos de etiquetas y texto plano.Estas etiquetas describen y estructuran los contenidos del documento y se conforman mediante el uso de palabras claves (nombre de las etiquetas) rodeadas de los símbolos “menor y mayor que”. Ejem: <etiqueta>.Estas etiquetas se presentan usualmente de a pares, denominados etiqueta de apertura y etiqueta de cierre respectivamente. Ejem: <etiqueta>...</etiqueta>.

Etiqueta: Definición.

Dentro de cada etiqueta se define los datos pertinentes de la misma. Por ejemplo, para definir un párrafo y un vínculo se utilizan las etiquetas <p> y <a> respectivamente:<p>Esto es un párrafo</p><a>Esto es un enlace a otra página</a>

Espacio de trabajo

¿Qué herramientas necesito para generar mis propios documentos HTML?Un editor de texto y un navegador web.

¿HTML? ¿Donde?

¿Donde está HTML?

HTTP REQUEST

HTTP RESPONSE

Cliente (Navegador Web)

Servidor Web(Aplicación Web)

Definición de Documentos HTML

Definición HTML

Las etiquetas <!DOCTYPE>, <html>, <head> y <body> se utilizan para definir en forma general un documento HTML.Estas etiquetas son esenciales que todo documento HTML posea para poder ser correctamente interpretados.

<!DOCTYPE <<tipo_doctype>>><html>

<head>...

</head><body>

...</body></html>

Etiqueta <!DOCTYPE>

La etiqueta doctype se utiliza para definir el tipo de documento de marcado y la versión que se utilizará.Para HTML5, el mismo se define de la siguiente manera:

<!DOCTYPE html>

Etiqueta <HTML>

La etiqueta <html> solo se utiliza para definir el comienzo y el fin del documento HTML. Esto le permite al navegador conocer donde comienza y finaliza el mismo.

<html>...

</html>

Comentarios en HTML

Los comentarios en HTML se pueden escribir en cualquier parte de un documento html y se definen de la siguiente manera:

...

...

Cabecera HEAD

Etiqueta <HEAD>

La etiqueta <head> se utiliza para definir metadatos de la página que se le muestra al cliente. Los metadatos se pueden definir como: “datos que describen a los datos”.

<head>...

</head>

Etiqueta <HEAD>

Dentro de la etiqueta head se definen cosas como:● Conjunto de caracteres de codificación.● Título de la página.● Palabras claves.● Descripción.● El autor del documento.● Scripts y estilos externos (recursos externos).● Frecuencia de actualización de la página.

Etiqueta <title>

La etiqueta <title> se utiliza para definir el título de una página web. Dicho título es el que se muestra en la pestaña, el que se almacena en favoritos y el que aparece en los resultados de buscadores como google, yahoo o bing.

<title>Título de la Página</title>

Etiqueta <meta>

La etiqueta <meta> se utiliza para definir varios tipos de metadatos distintos. No obstante, la misma, a diferencia de las demás, no tiene asociada una etiqueta de clausura, por lo que sólo se la usa con una etiqueta de apertura y nada más.

Etiqueta <meta>

El primer uso que vamos a describir es el metadato utilizado para definir el autor del documento html que se visualiza y es:

<meta name=”author” content=”Nombre Autor”>

Etiqueta <meta>

El segundo uso asociado a esta etiqueta que vamos a describir es el metadato utilizado para definir la descripción del documento html que se visualiza y es:

<meta name="description" content="Esta es una pequeña descripción del sitio.">

Etiqueta <meta>

El tercer uso que vamos a describir es el metadato utilizado para definir las palabras claves o tags del documento html que se visualizará y es:

<meta name="keywords" content="HTML, Curso rápido, Introducción a HTML, HTML5,

Etiquetas HTML">

Etiqueta <meta>

Los metadatos descripción y palabras claves son de suma utilidad y es importante hacer un buen uso de los mismos debido a que estos son los que definen en gran parte el éxito o el fracaso del posicionamiento de nuestro sitio en resultados de buscadores como google, yahoo o bing.

Etiqueta <meta>

El cuarto uso es el metadato utilizado para definir el conjunto de caracteres que se utilizaron para codificar el sitio y es:

<meta charset="utf-8"> //Para HTML5<meta http-equiv="content-type"

content="text/html; charset=UTF-8"> //Para HTML 4.01

Etiqueta <meta>

El quinto y último uso es para definir el metadato asociado a la frecuencia de refresco de la página que se lleva a cabo forma automática. Actualmente se encuentra en desuso debido a la aparición de tecnologías como AJAX.

<meta http-equiv="refresh" content="30">

Etiqueta <link>

Esta etiqueta es utilizada para definir recursos externos (definidos en un archivo aparte). Particularmente se lo utiliza para vincular archivos de estilos CSS externos.

<link rel="stylesheet" type="text/css" href="../css/theme.css">

Etiqueta <script>

Esta etiqueta es utilizada para definir un script dentro del documento y/o para definir un script alojado en un archivo externo.<script type=”text/javascript” src=”../js/script.js”></script>

<script type=”text/javascript>”>

alert("Hello JavaScript!");

</script>

Etiqueta <style>

Esta etiqueta es utilizada para definir estilos CSS dentro del mismo documento.

<style>

h1 {color:red;}

p {color:blue;}

</style>

Cuerpo BODY

La etiqueta <body> se utiliza para definir la información que visualizará el usuario en su pantalla. Todo lo que se defina entre estos tags serán mostrados en la página.

<body>...

</body>

Etiqueta <BODY>

Existen una gran variedad de etiquetas en HTML5 que nos permiten representar una gran cantidad de estructuras de datos distintas. Algunas de esas etiquetas son los que se presentarán a continuación.

Etiquetas más importantes

Párrafos: <p>

Hipervínculos: <a>

Imágenes: <img>

Tablas: <table> <tr> <td>

Listas Ordenadas: <ol> <li>

Lista No Ordenadas: <ul> <li>

Formularios: <form>


Botones, Campos de texto, etc: <input>

Saltos de línea: <br/>

Listas de descripción: <dl><dt><dd>

Negrita: <b>, <strong>

Subrayado: <u>

Cursiva: <i>


Para ver la lista completa de etiquetas HTML y HTML5, visitar el siguiente enlace:

http://www.w3schools.com/tags/default.asp

Listado de etiquetas HTML.

http://www.w3schools.com/tags/default.asp

Las etiquetas HTML pueden poseer atributos. Estos atributos proveen de información adicional acerca de estos elementos. Los mismos siempre se especifican en la etiqueta de apertura y se presentan de a pares nombre/valor. Ejem:

<a href=“www.google.com.ar”>Click</a><img src=“assets/img/photo.png”></img>

Atributos de un etiqueta

Otros ejemplos:

<div class=“alert” id=“content”></div><body style=“max-width=960px;”></body><img src=“pic.jpg” width=“800px” height=“460px”></img><input type=“Submit” value=“Enviar”/><form name=“Upload” action=“photo.php” method=“post”>


Para más detalle acerca de la lista de atributos disponibles a todas las etiquetas HTML visitar el siguiente hipervínculo:

http://www.w3schools.com/tags/ref_standardattributes.asp

<div class=“alert” id=“content”></div><body style=“max-width=960px”></body><img src=“pic.jpg” width=“800px” height=“460px”></img><input type=“Submit” value=“Enviar”/><form name=“Upload” action=“photo.php” method=“post”>




A partir de HTML4, se agregaron los denominados eventos al estándar. Los eventos tienen la posibilidad de disparar acciones cuando estos se producen, como por ejemplo, ejecutar un pequeño código Javascript cuando el usuario hace un click sobre un botón.

Eventos de una etiqueta

Ejemplos:

<body onload=“alert(‘Se cargó la página’);”><div onmouseover=“$(this).toogleClass(‘active’)”


Para ver la lista completa de eventos, visitar el siguiente enlace:

http://www.w3schools.com/tags/ref_eventattributes.asp




Links de Utilidad

Links de Utilidad

● http://www.w3schools.com/html/default.asp● http://www.htmlya.com.ar/

http://www.w3schools.com/html/default.asp

http://www.htmlya.com.ar/

Introducción a HTML5

Technology

Transcript of Introducción a HTML5