¿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

  1. Etiquetas
  2. Atributos
  3. 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

  1. Un espacio entre el atributo y el nombre del atributo
  2. El nombre del atributo seguido de un símbolo de =
  3. 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
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

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 <!-- y -->

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.

  1. Elemento 1
  2. Elemento 2
  3. 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:

  1. Crear el ancla a donde nos queremos enlazar mediante el atributo id
  2. 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>
Hoy es lunes
Hoy es martes

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>
Hoy es lunes
Hoy es martes

Á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

HTML

By Alan

Made with Slides.com

HTML

  • 141

More from Alan