Introducción a HTML5

Intro a HTML5
Maximiliano 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.

¿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:
...

...

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).

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>

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.

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_standardatt
ributes.asp

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_eventattrib
utes.asp

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

Introducción a HTML5

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Introducción a HTML5

Similar a Introducción a HTML5 (20)

Último

Último (16)

Introducción a HTML5