¿Que es el HTML?

HTML o Hyper Text Markup Language (lenguaje de marcas de hipertexto).

Es un lenguaje basado en etiquetas que es utilizado para la creación de paginas web.

El World Wide Web Consortium (W3C) es el encargado de mantener el standar de HTML.

La versión actual es la 5.

Sintaxis

Un elemento HTML tiene 3 tipos de componentes

Etiquetas
Atributos
Entidates

Etiquetas

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

Apertura

Cierre

Contenido

La etiqueta de apertura consiste en el nombre del elemento rodeado de paréntesis angulares ("< >"), indica el comienzo de un nuevo elemento.

La etiqueta de cierre es similar a la de apertura solo que se agrega un slash ("/") antes del nombre del elemento, indica donde termina un elemento.

El contenido de un elemento normalmente esta compuesto de texto

Etiquetas anidadas

<p>Lorem ipsum dolor <b>sit amet, consectetur</b> adipiscing elit</p>

Es posible agregar elementos dentro de otros.

Solo se debe asegurar que los elementos sean anidados de manera correcta, esto es, que las etiquetas se abran y cierren en el mismo orden que fueron agregadas

Atributos

<p class="mi-clase">Lorem ipsum dolor sit amet</p>

Atributo

Los atributos contienen información adicional que no debe aparecer dentro del contenido.

Los atributos comúnmente siguen estas reglas

Un espacio entre el atributo y el nombre del atributo
El nombre del atributo seguido de un símbolo de =
El valor del atributo envuelto en comillas " "

Atributos

Existen atributos globales los cuales pueden ser utilizados en cualquier etiqueta.

Atributo	Descripción
class	Especifica un nombre de clase, muy útil para agrupar uso común en estilos.
id	Identificador único del elemento
style	Declara estilos específicos para el elemento
tabindex	Orden del elemento cuando se avanza con tabs
title	Información extra del elemento

Atributos

También existen atributos que ejecutan acciones tras un determinado evento.

Eventos de ventana como el onload que se ejecuta cuando la pagina a terminado de cargar.

Eventos de mouse como el onclick o el ondblclick

Atributos

La lista completa de atributos de evento la pueden consultar en el siguiente enlace

La lista completa de atributos globales la pueden consultar en el siguiente enlace

Entidades

Son códigos que se utilizan cuando queremos desplegar caracteres especiales, por ejemplo ">"

Elemento a mostrar	Entidad equivalente
<	<
>	>
"	"
'	'
&	&

Nota: Las entidades distinguen mayúsculas y minúsculas.

Entidades

Referencia a lista con mas entidades.

https://dev.w3.org/html5/html-author/charref

Anatomía de un documento HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
    <!-- This is a comment -->
  </body>
</html>

El DOCTYPE es el que le indica al navegador que versión de HTML se va utilizar.

Anatomía de un documento HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
    <!-- This is a comment -->
  </body>
</html>

La etiqueta html envuelve a todo el contenido de la pagina.

Anatomía de un documento HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
    <!-- This is a comment -->
  </body>
</html>

La etiqueta head funciona como un contenedor de todo el contenido que quieres incluir en la pagina pero que no quieres que se muestre.

Por ejemplo las hojas de estilo y javascript.

Anatomía de un documento HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
    <!-- This is a comment -->
  </body>
</html>

Este elemento asigna la codificación de caracteres que va manejar el documento.

Anatomía de un documento HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
    <!-- This is a comment -->
  </body>
</html>

La etiqueta title configura el titulo que va aparecer en la pestaña del navegador.

Anatomía de un documento HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
    <!-- This is a comment -->
  </body>
</html>

La etiqueta body es el contenedor de todo lo que se desea mostrar en la pagina.

Anatomía de un documento HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
    <!-- This is a comment -->
  </body>
</html>

Toda sección que se quiera marcar como comentario(invisible para el usuario) deberá ser colocada entre las etiquetas 

Etiquetas basicas

Títulos
Párrafos
Saltos de linea
Divisores
Listas
Tablas
Enlaces
Imágenes
Video
Audio
Formularios
Canvas
SVG

Etiquetas basicas

Referencia completa de las etiquetas de html

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

Titulos

Existen 6 etiquetas de titulo — <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.

El numero nos indica la importancia siendo el mas importante el 1 y el menos importante el 6.

<h1> Titulo 1 </h1>

<h2> Titulo 2 </h2>

Titulos

<h3> Titulo 3 </h3>

<h4> Titulo 4 </h4>

<h1>Titulo 1</h1>
<h2>Titulo 2</h2>
<h3>Titulo 3</h3>
<h4>Titulo 4</h4>
<h5>Titulo 5</h5>
<h6>Titulo 6</h6>

Parrafos

Se utilizan para estructurar el contenido de una pagina y se representan con la etiqueta <p>.

Todo el contenido que se coloque dentro de un parrafo se vera separado por un espacio de los siguientes parrafos

<html>
 <body>
  <p>Parrafo 1</p>
  <p>Parrafo 2</p>
  No es parrafo
  No es parrafo 2
 </body>
</html>

Parrafo 1

Parrafo 2

No es parrafo No es parrafo2

Salto de línea

Cuando se quiere forzar un salto de linea de utiliza la etiqueta <br>

<html>
 <body>
  <p>Este es<br>un parrafo<br>con saltos de linea</p>
 </body>
</html>

Este es
un parrafo
con saltos de linea

Divisores

La etiqueta <div> se utiliza para contener en bloques el codigo HTML.

Por default ocupa todo el ancho de la pantalla, a menos que se cambie mediante CSS.

<html>
    <body>
        <div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 174px; top: 405px; background-color:     white;">
            <p>Esto ya estaba dentro de un div</p>
        </div>
    </body>
</html>

Esto ya estaba dentro de un div

Listas

Existen 2 tipos de listas: Ordenadas y no Ordenadas

<html>
    <body>
        <ul>
            <li>Elemento 1</li>
            <li>Elemento 2</li>
            <li>Elemento 3</li>
        </ul>
    </body>
</html>

Las listas no ordenadas se declaran con la etiqueta <ul> y cada elemento de la lista con la etiqueta <li>

En este tipo de listas no importa el orden de los elementos por lo tanto se marcan con simbolos

Elemento 1
Elemento 2
Elemento 3

Listas

<html>
    <body>
        <ol>
            <li>Elemento 1</li>
            <li>Elemento 2</li>
            <li>Elemento 3</li>
        </ol>
    </body>
</html>

Las listas ordenadas se declaran con la etiqueta <ol> y cada elemento de la lista con la etiqueta <li>

Este tipo de listas se usan cuando queremos marcar un orden a seguir en los elementos de la misma, por lo cual normalmente van enumeradas.

Elemento 1
Elemento 2
Elemento 3

Tablas

La estructura de una tabla se define atraves de varias etiquetas.

La etiqueta <table> crea la tabla

La etiqueta <tr> define una fila

La etiqueta <th> define un encabezado de columna

La etiqueta <td> define una celda en la fila

La etiqueta <thead> es un agrupador de los encabezados de la tabla, su uso es opcional.

La etiqueta <tbody> es un agrupador del contenido de la tabla, su uso es opcional.

Tablas

<table>
 <thead>
  <tr>
     <th>Mes</th>
     <th>Ahorros</th>
  </tr>
 </thead>
 <tbody>
  <tr>
     <td>Enero</td>
     <td>$100</td>
  </tr>
  <tr>
     <td>Febrero</td>
     <td>$80</td>
  </tr>
 </tbody>
</table>

Mes	Ahorros
Enero	100
Febrero	80

Nombre	Matematicas	Quimica	Fisica	Programacion
David	85	87	88	92
Richard	91	80	82	72
Tony	84	86	87	81
Scott	71	79	80	89

Enlaces

Los enlaces son creados para redirigir al usuario a otro sitio, esto se realiza mediante la etiqueta <a> y el atributo href.

Solo se tiene que colocar alrededor del texto (o contenido) que se quiera convertir en enlace.

<p>Enlace a <a href="https://www.google.com.mx/">Google</a></p>

Enlace a Google

Enlaces

Los enlaces también nos pueden dirigir a un elemento especifico en una pagina, para esto se tienen que realizar 2 cosas:

Crear el ancla a donde nos queremos enlazar mediante el atributo id
Creamos en enlace con el valor del id que se busca

<h3 id="comentarios">Lista de comentarios</h3>
...
<a href="#comentarios">Ir a seccion de comentarios</a>

Enlaces

Atributo	Valor	Descripción
href	URL	La url del sitio al que se quiere redirigir
download	filename	Especifica que se va descargar del enlace
target	_blank _self _parent	Se abre el enlace en una nueva ventana o pestaña Se remplaza la pagina actual con la del enlace Se abre el enlace en la ventana padre

Atributos de la etiqueta <a>

Imagenes

Para insertar una imagen en una pagina se utiliza la etiqueta <img>

Imagenes

Atributos de la etiqueta <img>

Atributo	Valor	Descripción
src	URL	Especifica la dirección de la imagen
height	pixeles	Especifica el alto de la imagen
width	pixeles	Especifica el ancho de la imagen
alt	texto	Texto alternativo que se muestra si no se encuentra la imagen

<img width="1366" height="635" src="recursive.png"/>

Videos

Con el HTML5 se añadió una forma nativa de manejar vídeo mediante la etiqueta <video>.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Tu navegador no soporta la etiqueta video.
</video>

Videos

Soporte de formatos de video por navegador

Navegador	MP4	WebM	Ogg
Internet Explorer	✓	✗	✗
Chrome	✓	✓	✓
Firefox	✓	✓	✓
Safari	✓	✗	✗
Opera	✓	✓	✓

Videos

Atributos de la etiqueta <video>

Atributo	Valor	Descripción
autoplay	autoplay	Indica que el video se comienze a reprodución tan pronto este listo
control	controls	Indica que los controles del reporductor deben ser mostrados
src	URL	La dirección url del video
height	pixeles	Ancho del video
width	pixeles	Ancho del video

Audio

La etiqueta <audio> provee una forma estandarizada para la reproducción archivos de audio.

<audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
Tu navegador no soporta el elemento audio
</audio>

Audio

Soporte de formatos de audio por navegador

Navegador	MP3	Wav	Ogg
Internet Explorer	✓	✗	✗
Chrome	✓	✓	✓
Firefox	✓	✓	✓
Safari	✓	✓	✗
Opera	✓	✓	✓

Audio

Algunos atributos de la etiqueta <audio>

Atributo	Valor	Descripción
autoplay	autoplay	Indica que el audio se debe comenzar a reproducir tan pronto este listo
controls	controls	Indica que los controles del reporductor deben ser mostrados
src	URL	La dirección url del audio

Canvas

El elemento <canvas> se utiliza para dibujar gráficos en una pagina web mediante scripting (normalmente javascript).

Para gráficos 3d se recomienda utilizar WebGL

Ejemplo de canvas

SVG

Scalable Vector Graphics(SVG) es un lenguaje de etiquetas basado en el xml para describir gráficos vectorizados bidimensionales.

Se crean mediante la etiqueta <svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 3 32 26">
	<g class="shape-element" fill="#000000">
		<path d="M32 6.076c-1.177 0.522-2.443 0.875-3.771 ... 3.276-3.398z">
		</path>
	</g>
</svg>

Formularios

Las formas en html son el punto principal de interacción entre el usuario y la pagina web.

El contenido que se captura en las formas web normalmente es enviado al servidor para su procesamiento.

Los formularios se componen con diferentes elementos nativos de html

Form

La etiqueta <form> es la que define los formularios.

Es un contenedor de elementos que mediante atributos define el comportamiento del formulario.

La mayoría de los atributos son opcionales, pero hay 2 que se consideran buena practica, estos son:

Action: Define la dirección URL a la que la información de la forma sera enviada.
Method: Define el método http que se va utilizar para el envió de la información (GET,POST).

<form action="Mi URL" method="post">
...
</form>

Campos de texto

Los campos para capturar texto se definen de la siguiente forma.

<input type="text" />

↓

Campos de contraseña

Similar a los campos de texto, solo que ocultan el texto capturado. Se utilizan de la siguiente forma

<input type="password" />

↓

Casilla de verificacion

Se utilizan para selecciones múltiples, donde es posible no seleccionar ninguna hasta seleccionar todas.

Se utiliza de la siguiente forma.

<form>
  <input type="checkbox" name="dia" value="Lunes"> Hoy es lunes<br>
  <input type="checkbox" name="dia" value="Martes"> Hoy es martes
</form>

Botón de selección

Se utilizan para realizar una selección de única entre un numero determinado de opciones.

Se utiliza de la siguiente forma.

<form>
  <input type="radio" name="dia" value="Lunes"> Hoy es lunes<br>
  <input type="radio" name="dia" value="Martes"> Hoy es martes
</form>

Área de texto

Se utilizan para capturar texto con la peculiaridad que permite multiples lineas. Se utiliza de la siguiente forma.

<textarea name="message" rows="10" cols="30">
</textarea>

El atributo cols nos indica el ancho del elemento medido en caracteres.

El atributo rows especifica el alto del elemento medido en lineas de texto.

↓

Lista de selección

Tienen un funcionamiento muy similar a los botones de seleccion, son mas utiles que estos cuando se tienen que desplegar muchas opciones

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Lista de selección multiple

Similar a las listas de selección solo con la peculiaridad que se pueden seleccionar varios elementos a la vez.

<select name="cars" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Botones

Son elementos a los que se les puede dar click.

Estos se pueden crear a partir de dos etiquetas.

<button type="button" onclick="alert('click')">Click</button>
<input type="button" onclick="alert('click')" value="Click">

↓

Botones

La diferencia entre los anteriores es que un elemento <button> puede contener mas elementos html entre la apertura y el cierre(texto, imágenes, etc).

Ademas los elementos <button> son mas sencillos de aplicar estilo, a diferencia de los input que solo se puede especificar texto.

Submit

Son botones que sirve para realizar el envío de un formulario.

<form action="action_page.php">
  Nombre:<br>
  <input type="text" name="firstname"><br>
  Apellido:<br>
  <input type="text" name="lastname"><br>
  <input type="submit" value="Submit">
</form>

HTML 5 Input Types

Con el HTML5 se agregaron nuevos tipos para la etiqueta input.

color
date
datetime
datetime-local
email
month
number

range
search
tel
time
url
week

En el siguiente enlace se puede consultar la referencia de estos elementos: w3schools