Parte I: HTML

HTML

Es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet. Se trata de la siglas que corresponden a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto.

Estructura básica de una página HTML:

<html>
  <head>
    <title> titulo de la página</title>     
  </head>
  <body>
     Cuerpo de la página.
  </body>
</html>

 Nota: HTML no es sensible a mayúsculas y minúsculas.

Salto de línea:

<br>

Párrafo:

<html>
<head>
</head>
<body>
  <p>
    La personalidad es el proceso mediante el cual se integran las motivaciones, actividades y conductas del individuo en una organización socio-sico-somática única y unitaria.    
  </p>
  <p>
    Este y el anterior son ejemplos de párrafos en HTML.
  </p> 
</body>
</html>

Títulos (<h1><h2><h3><h4><h5><h6>):

<html>
<head>
</head>
<body>
  <h1>Tipos de datos en MySQL</h1>
  <h2>varchar</h2>
  <p>
    Se usa para almacenar cadenas de caracteres. Una cadena es una secuencia de caracteres. Se coloca entre comillas (simples): 'Hola'.<br> El tipo "varchar" define una cadena de longitud variable en la cual determinamos el máximo de caracteres. Puede guardar hasta 255 caracteres. Para almacenar cadenas de hasta 30 caracteres, definimos un campo de tipo varchar(30).
  </p>
  <h2>int</h2>
  <p>
    Se usa para guardar valores numéricos enteros, de -2000000000 a 2000000000 aproximadamente.<br> Definimos campos de este tipo cuando queremos representar, por ejemplo, cantidades.
  </p>
</body>
</html>

Énfasis (<em><strong>):

<html>
<head>
</head>
<body>
  <em>viene de empathize que significa énfasis.</em><br>
  <strong>viene de strong que significa fuerte.</strong>
</body>
</html>

Hipervínculo a otra página del mismo sitio (<a>):

pagina1.html
<html>
<head>
</head>
<body>
  <h1>Página principal.</h1>
  <a href="pagina2.html">Noticias</a>
</body>
</html>

pagina2.html
<html>
<head>
</head>
<body>
  <h1>Noticias.</h1>
  <a href="pagina1.html">Salir.</a>
</body>
</html>

Hipervínculo a otro sitio de Internet (<a>):

<html>
<head>
</head>
<body>
  <a href="http://www.google.com">Buscador Google</a>
</body>
</html>

Imágenes dentro de una página (<img>):

<html>
<head>
</head>
<body>
  <img src="foto1.jpg" alt="Pintura geométrica">
  <img src="imagenes/foto1.jpg" alt="Pintura geométrica">
  <img src="../foto1.jpg" alt="Pintura geométrica">
  <img src="../foto1.jpg" alt="Pintura geométrica" width=”100” y height=”100”>
</body>
</html>

 Nota: Los formatos clásicos son los archivos con extensiones gif, jpg y png.

Hipervínculo mediante una imagen (<a> y <img>):

<html>
<head>
</head>
<body>
  <h2>Presione alguna de las imagenes para conocer más sobre esa obra.</h2>
  <a href="pagina2.html"><img src="/imagenes/foto1.jpg" alt="Pintura Geométrica"></a>
  <br>
  <a href="pagina2.html"><img src="/imagenes/foto2.jpg" alt="Pintura Geométrica"></a>
</body>
</html>

Hipervínculo a un cliente de correo (<a>):

Ejemplo 1:
<html>
<head>
</head>
<body>
  <h1>Reclamos</h1>
  <a href="mailto:guardialara@gmail.com">Enviar mail.</a>
</body>
</html>

Nota: La sintaxis para disponer un título por defecto y un cuerpo de mensaje es:
<a href="mailto:diegoestevanes@gmail.com?subject=título del mensaje&body=cuerpo del mensaje">Enviar mail.</a>

Ejemplo 2:
<html>
<head>
</head>
<body>
  <h1>Reclamos</h1>
  <a href="mailto:diego1@gmail.com?subject=aquí el título&cc=diego2@gmail.com&bcc=diego3@gmail.com&body=Este es el cuerpo">Enviar mail.</a>
</body>
</html>

Anclas llamadas desde la misma página:

Sintaxis para definir un ancla:
<a name="nombreancla"></a>

Sintaxis para ir a un ancla desde un hipervínculo:
<a href="#nombreancla">Introducción</a>

 Ejemplo:
<html>
<head>
</head>
<body>
  <h1>Tutorial de MySQL</h1>
  <a href="#introduccion">Introducción</a><br>
  <a href="#mostrarbasedatos">show databases</a><br>
  <a href="#creaciontabla">Creación de una tabla y mostrar sus campos</a><br>
  <a href="#cargarregistros">Carga de registros a una tabla y su recuperación</a><br>
  <a name="introduccion"></a>
  <h2>Introducción</h2>
  <p>
    SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc.<br>
  </p>
  <a name="mostrarbasedatos"></a>
  <h2>show databases</h2>
  <p>
    Una base de datos es un conjunto de tablas.<br>
  </p>
  <a name="creaciontabla"></a>
  <h2>Creación de una tabla y mostrar sus campos</h2>
  <p>
    Una base de datos almacena sus datos en tablas.<br>
  </p>
  <a name="cargarregistros"></a>
  <h2>Carga de registros a una tabla y su recuperación</h2>
  <p>
    Usamos "insert into". Especificamos los nombres de los campos entre 
paréntesis y separados por comas y luego los valores para cada campo, también entre paréntesis y separados por comas.<br>
  </p>
</body>
</html>

Anclas llamadas desde otra página:

Sintaxis para la llamada al ancla:
<a href="pagina2.html#introduccion">Introducción</a>

Ejemplo:

pagina1.html
<html>
<head>
</head>
<body>
  <h1>Tutorial de MySQL</h1>
  <a href="pagina2.html#introduccion">Introducción</a><br>
  <a href="pagina2.html#mostrarbasedatos">show databases</a><br>
  <a href="pagina2.html#creaciontabla">Creación de una tabla y mostrar sus campos</a><br>
  <a href="pagina2.html#cargarregistros">Carga de registros a una tabla y su recuperación</a><br> 
</body>
</html>

pagina2.html
<html>
<head>
</head>
<body>
  <h1>Tutorial de MySQL</h1>
  <a href="#introduccion">Introducción</a><br>
  <a href="#mostrarbasedatos">show databases</a><br>
  <a href="#creaciontabla">Creación de una tabla y mostrar sus campos</a><br>
  <a href="#cargarregistros">Carga de registros a una tabla y su recuperación</a><br>
  <a name="introduccion"></a>
  <h2>Introducción</h2>
  <p>
    SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL, Oracle,etc.<br>
  </p>
  <a name="mostrarbasedatos"></a>
  <h2>show databases</h2>
  <p>
    Una base de datos es un conjunto de tablas.<br>
  </p>
  <a name="creaciontabla"></a>
  <h2>Creación de una tabla y mostrar sus campos</h2>
  <p>
    Una base de datos almacena sus datos en tablas.<br>
  </p>
  <a name="cargarregistros"></a>
  <h2>Carga de registros a una tabla y su recuperación</h2>
  <p>
    Usamos "insert into". Especificamos los nombres de los campos entre paréntesis y separados por comas y luego los valores para cada campo, también entre paréntesis y separados por comas.<br>
  </p>
</body>
</html>

Listas ordenadas (<ol>):

<html>
  <body>
    Listas ordenadas
    <ol>
      <li>Rodríguez Pablo</li>
      <li>González Raúl</li>
      <li>López Héctor</li>
    </ol>
  </body>
</html>

Listas no ordenadas (<ul>):

<html>
  <body>
    Algunos lenguajes de programación:
    <ul>
      <li>C</li>
      <li>C++</li>
      <li>Java</li>
      <li>C#</li>
    </ul>
  </body>
</html>

Listas anidadas:

<html>
  <body>
    <ol>
      <li>Argentina
        <ul>
          <li>La Nación</li>
          <li>Clarín</li>
        </ul>
      </li>
      <li>España
        <ul>
          <li>El País Digital</li>
          <li>ABC</li>
        </ul>
      </li>
    </ol>
  </body>
</html>

Tabla (<table><tr><td>):

<html>
<head>
</head>
<body>
  <table border="1">
    <tr>
      <td>China</td>
      <td>1300 millones</td>
    </tr>
    <tr>
      <td>India</td>
      <td>1080 millones</td>
    </tr>
    <tr>
      <td>Estados Unidos</td>
      <td>295 millones</td>
    </tr>
  </table>
</body>
</html>

Nota:
  <table> Es la marca de comienzo de la tabla.
  <tr> Es la marca de comienzo de una fila.
  <td> Es la marca de comienzo de una celda.
  La propiedad border sirve para determinar el contorno de la tabla, un valor de cero no muestra los bordes.

Tabla con encabezado (<th>):

<html>
<head>
</head>
<body>
  <table border="1">
    <tr>
      <th>Paises</th>
      <th>Cantidad de habitantes</th>
    </tr>
    <tr>
      <td>China</td>
      <td>1300 millones</td>
    </tr>
    <tr>
      <td>India</td>
      <td>1080 millones</td>
    </tr>
    <tr>
      <td>Estados Unidos</td>
      <td>295 millones</td>
    </tr>
  </table>
</body>
</html>

Tabla y combinación de celdas:

Lograr que una celda ocupe 3 columna:
<td colspan="3">Facturación de los últimos tres meses</td>

Lograr que una celda ocupe 3 filas:
<td rowspan="3">Secciones</td>

Ejemplo:
<html>
<head>
</head>
<body>
  <table border="1">
    <tr>
      <th rowspan="4">Recursos</th>
      <th colspan="4">Facturación de los últimos tres meses</th>
    </tr>
    <tr>
      <td>Discos Duros</td>
      <td>23000</td>
      <td>27200</td>
      <td>26000</td>
    </tr>
    <tr>
      <td>CPU</td>
      <td>73000</td>
      <td>67300</td>
      <td>51000</td>
    </tr>
    <tr>
      <td>Monitores</td>
      <td>53000</td>
      <td>72000</td>
      <td>88000</td>
    </tr>
  </table>
</body>
</html>

Contenido de la cabecera de la página (<title>):

<html>
<head>
  <title>Título de la primer página</title>
</head>
<body>
  <h1>Prueba del elemento title</h1>
  <a href="pagina2.html">Ir a la segunda página</a>
</body>
</html>

Nota: El elemento title nos permite definir el título que aparecerá en la barra del navegador.

Contenido de la cabecera de la página (<meta>):

Nota: El elemento meta no se visualiza y tiene por objetivo especificar información sobre el propio documento.

Ejemplo 1:
<meta name="nombre de la propiedad" content="valor de la propiedad">

Nota: Name almacena el nombre de la propiedad y content el valor de la propiedad.

Ejemplo 2:
<meta name="keywords" content="html, programación, webmaster">

Nota: Los buscadores tienen en cuenta los metadatos. Si en la página inicializamos la propiedad name del elemento meta con el valor keywords luego buscará en la propiedad content las distintas palabras claves más representativas para dicha página. Esto es muy útil para posicionar nuestra página según el contenido que provee.

Ejemplo 3:
<meta name="description" content="El objetivo es presentar los conceptos básicos de HTML. Es objetivo prioritario respetar los estándares del W3C">

Ejemplo 4:
<meta name="author" content="Diego Rodriguez">
<meta name="copyright" content="Interpolacion inc.">

Comentarios dentro de una página (<!-- -->):

Nota: El navegador ignora todo el contenido que se encuentra dentro de esta marca.

Ejemplo de comentario de una línea:
 <!-- Aquí va el comentario -->

Ejemplo de comentario de varias líneas:
<!--
  comentarios - comentarios - comentarios 
  comentarios - comentarios - comentarios 
 -->

Sintaxis para caracteres especiales:

<    &lt;
>    &gt;
&    &amp;
"    &quot;
     &nbsp;     //Espacio en blanco.
©    &copy;
€    &euro;

Formulario (<form>):

<html>
<head>
  <title>Prueba de formulario</title>
</head>
<body>
  <form action="/registrardatos.php" method="post">
    Ingrese su nombre:<input type="text" name="nombre" size="20"><br>
    <input type="submit" value="enviar">
  </form>
</body>
</html>

Formulario / input type text, password y reset:

<html>
<head>
  <title>Prueba de formulario</title>
</head>
<body>
  <form action="/registrardatos.php" method="post">
    Ingrese su nombre: 
    <input type="text" name="nombre" size="20"><br>
    Ingrese su clave: 
    <input type="password" name="clave" size="12"><br>
    <input type="submit" value="enviar">
    <input type="reset" value="borrar">
  </form>
</body>
</html>

Formulario / textarea:

<html>
<head>
  <title>Prueba de formulario</title>
</head>
<body>
  <form action="/registrardatos.php" method="post">
    Ingrese su nombre:
    <input type="text" name="nombre" size="30"><br>
    Ingrese su mail:
    <input type="text" name="mail" size="50"><br>
    Comentarios:<br>
    <textarea name="comentarios" rows="5" cols="60"></textarea><br>
    <input type="submit" value="Enviar">
  </form>
</body>
</html>

Nota: El elemento de tipo textarea nos permite el ingreso de varias líneas a diferencia del cuadro de texto (input/text). Las propiedades rows y cols indican la cantidad de filas y columnas que se visualizará en el área de texto.

Formulario / input type checkbox:

<html>
<head>
  <title>Prueba de formulario</title>
</head>
<body>
  <form action="/registrardatos.php" method="post">
    Ingrese su nombre:
    <input type="text" name="nombre" size="30"><br>
    Seleccione los lenguajes que conoce:<br>
    <input type="checkbox" name="java">Java<br>
    <input type="checkbox" name="cmasmas">C++<br>
    <input type="checkbox" name="c">C<br>
    <input type="checkbox" name="csharp">C#<br>
    <input type="submit" value="Enviar">
  </form>
</body>
</html>

Formulario / input type radio:

<html>
<head>
  <title>Prueba de formulario</title>
</head>
<body>
  <form action="/registrardatos.php" method="post">
    Ingrese su nombre:
    <input type="text" name="nombre" size="30"><br>
    Seleccione el máximo nivel de estudios que tiene:<br>
    <input type="radio" name="estudios" value="1">Sin estudios<br>
    <input type="radio" name="estudios" value="2">Primario<br>
    <input type="radio" name="estudios" value="3">Secundario<br>
    <input type="radio" name="estudios" value="4">Universitario<br>
    <input type="submit" value="Enviar">
  </form>
</body>
</html>

Formulario / select (cuadro de selección individual):

<html>
<head>
  <title>Prueba de formulario</title>
</head>
<body>
  <form action="/registrardatos.php" method="post">
    Ingrese su nombre:
    <input type="text" name="nombre" size="30"><br>
    Seleccione su pais:
    <select name="pais">
      <option value="1">Argentina</option>
      <option value="2">España</option>
      <option value="3">México</option>
    </select><br>
    <input type="submit" value="Enviar">
  </form>
</body>
</html>

Formulario / select (cuadro de selección múltiple):

<html>
<head>
  <title>Prueba de formulario</title>
</head>
<body>
  <form action="/registrardatos.php" method="post">
    Seleccione uno o varios colores (Presione Ctrl para seleccionar varios colores)<br>
    <select name="colores[]" size="4" multiple>
      <option value="1">Rojo</option>
      <option value="2">Verde</option>
      <option value="3">Azul</option>
    </select><br>
    <input type="submit" value="Enviar">
  </form>
</body>
</html>

Nota: En la propiedad name le agregamos al final los caracteres [] para que desde el servidor podamos identificar que el control retorna posiblemente muchos valores.

Formulario / select (agrupamiento de opciones):

<html>
<head>
  <title>Prueba de formulario</title>
</head>
<body>
  <form action="/registrardatos.php" method="post">
    Agrupar Opciones
    Seleccione una fruta o verdura:
    <select name="articulo">
      <optgroup label="Frutas">
        <option value="1">Naranjas</option>
        <option value="2">Manzanas</option>
      </optgroup>
      <optgroup label="Verduras">
        <option value="3">Lechuga</option>
        <option value="4">Acelga</option>
      </optgroup>
    </select>
  </form>
</body>
</html>

Formulario / button:

Sintaxis del elemento button:
<button type="submit"> Texto a mostrar dentro del botón. </button>

Nota: La propiedad type se puede inicializar con alguno de estos tres valores: "submit", "reset" y "button".

 Ejemplo:
<html>
<head>
  <title>Prueba de formulario</title>
</head>
<body>
  <form action="/htmlya/registrardatos.php" method="post">
    Ingrese su nombre:
    <input type="text" name="nombre" size="20"><br>
    <button type="submit">Enviar<img src="/imagenes/enviar.gif" alt="envio" height="25" width="20"></button>
    <button type="reset">Borrar<img src="/imagenes/borrar.gif" alt="borrado" height="25" width="20"></button>
  </form>
</body>
</html>

Formulario / input type file:

<html>
<head>
  <title>Prueba de formulario</title>
</head>
<body>
  <form action="/registrardatos.php" method="post" enctype="multipart/form-data">
    Ingrese su nombre:
    <input type="text" name="nombre" size="30"><br>
    Seleccione la foto:
    <input type="file" name="foto"><br>
    <input type="submit" value="Enviar">
  </form>
</body>
</html>

Formulario / input type hidden:

<html>
<head>
  <title>Prueba de formulario</title>
</head>
<body>
  <form action="/registrardatos.php" method="post">
    <input type="hidden" value="10:20" name="hora">
    Ingrese su nombre:
    <input type="text" name="nombre" size="30"><br>
    <input type="submit" value="Enviar">
  </form>
</body>
</html>

Formulario / agrupamiento de controles:

<html>
<head>
  <title>Prueba de formulario</title>
</head>
<body>
  <form action="/registrardatos.php" method="post">
    Formulario: Agrupamiento de controles
    <fieldset>
      <legend>Datos personales</legend>
      Apellido y nombre:
      <input type="text" name="nombre" size="30"><br>
    </fieldset>
    <fieldset>
      <legend>Datos Laborales</legend>
      Nombre de la empresa:
      <input type="text" name="nombreempresa" size="30"><br>
    </fieldset>
</form>
</body>
</html>

Formulario / controles con valores iniciales:

Para inicializar un control de tipo text
<input type="text" value="aqui su nombre" name="nombre" size="20">

Para inicializar un control de tipo textarea:
<textarea rows="10" cols="40" name="curriculum">Ingrese aqui su curriculum</textarea>

Para inicializar un control de tipo checkbox:
<input type="checkbox" name="java" checked>Opcion 1<br>

Para inicializar un control de tipo radio:
<input type="radio" name="estudios" value="1" checked>Opción 1<br>

Para inicializar un control de tipo select con selección individual:
<select name="pais">
  <option value="1">Argentina</option>
  <option value="2" selected>España</option>
  <option value="3">México</option>
</select>

Para inicializar un control de tipo select con selección múltiple:
<select name="colores[]" size="4" multiple="multiple">
  <option value="1" selected>Rojo</option>
  <option value="2">Verde</option>
  <option value="3" selected>Azul</option>
  <option value="4">Amarillo</option>
</select>

Ejemplo completo:
<html>
<head>
  <title>Prueba de formulario</title>
</head>
<body>
  <form action="/registrardatos.php" method="post">
    Apellido y nombre:
    <input type="text" name="nombre" size="30"><br>Es mayor de edad?:<br>
    <input type="radio" name="radio1" checked value="si">Si<br>
    <input type="radio" name="radio1" value="no">No<br>
    Telefono:
    <input type="text" value="453-" name="telefono" size="15"><br>
    <textarea name="comentarios" rows="5" cols="40">Ingrese aqui sus comentarios</textarea><br>
    <input type="submit" value="Enviar">
  </form>
</body>
</html>

Formulario / inhabilitar controles:

<html>
<head>
  <title>Prueba de formulario</title>
</head>
<body>
  <form action="/registrardatos.php" method="post">
    Seleccione la sección donde desea ingresar:<br>
    <input type="radio" name="seccion" value="1" disabled>Niños<br>
    <input type="radio" name="seccion" value="2">Adolescentes<br>
    <input type="radio" name="seccion" value="3">Mayores<br>
    <input type="submit" value="Enviar">
  </form>
</body>
</html>

Nota: Los siguientes elementos pueden inhabilitarse: button, input, optgroup, option, select y textarea.

Formulario / controles de solo lectura (readonly):

<html>
<head>
  <title>Prueba de formulario</title>
</head>
<body>
  <form action="/htmlya/registrardatos.php" method="post">
    Ingrese su nombre:
    <input type="text" name="nombre" size="30" value="Interpolacion" readonly><br>
    Contrato:<br>
    <textarea name="comentarios" rows="5" cols="60" readonly>Por la presente ...</textarea><br>
    <input type="submit" value="Enviar">
  </form>
</body>
</html>

Formulario / envío de datos mediante mail:

<html>
<head>
  <title>Prueba de formulario</title>
</head>
<body>
  <h2>Reclamos</h2>
  <form action="mailto:reclamos@gmail.com" method="post" enctype="text/plain">
    Ingrese su nombre: 
    <input type="text" name="nombre" size="20"><br>
    Ingrese su dirección: 
    <input type="text" name="dirección" size="30"><br>
    Informe del problema:<br>
    <textarea rows="5" cols="40" name="problema"></textarea><br>
    <input type="submit" value="enviar">
  </form>
</body>
</html>

Nota: Para que el correo llegue con asunto:
<form action="mailto:reclamos@gmail.com?subject=pedido de reparación" method="post" enctype="text/plain">

Frames:

<html>
<head>
  <title>prueba de frames</title>
</head>
  <frameset cols="20%,80%">
    <frame src="pagina2.html">
    <frame src="pagina3.html">
    <noframes>
      <p>El navegador no soporta frames</p>
    </noframes>
  </frameset>
</html>

Frames / actualización de un frame a partir del enlace de otro frame:

pagina1.html
<html>
<head>
  <title>prueba de frames</title>
</head>
  <frameset cols="20%,80%">
    <frame src="pagina2.html">
    <frame src="pagina3.html" name="ventanadinamica">
    <noframes>
      <p>El navegador no soporta frames</p>
    </noframes>
  </frameset>
</html>

pagina2.html
<html>
<head>
  <title>prueba de frames</title>
</head>
<body>
  <h2>Enlaces.</h2>
  <ul>
    <li><a href="pagina3.html" target="ventanadinamica">Enlace 1</a></li>
    <li><a href="pagina4.html" target="ventanadinamica">Enlace 2</a></li>
  </ul>
</body>
</html>

pagina3.html
<html>
<head>
  <title>prueba de frames</title>
</head>
<body>
  <h1>Página A</h1>
  <h2>Este es el contenido de página del archivo:pagina3.html</h2>
</body>
</html>

pagina4.html
<html>
<head>
  <title>prueba de frames</title>
</head>
<body>
  <h1>Página B</h1>
  <h2>Este es el contenido de página del archivo:pagina4.html</h2>
</body>
</html>

Frames / asignación de medidas en píxeles:

<html>
<head>
  <title>prueba de frames</title>
</head>
  <frameset cols="200,*,200">
    <frame src="pagina2.html">
    <frame src="pagina3.html">
    <frame src="pagina4.html">
    <noframes>
      <p>El navegador no soporta frames</p>
    </noframes>
  </frameset>
</html>

Nota: con esta sintaxis indicamos que la primera columna ocupe siempre 200 píxeles, lo mismo la tercera columna, pero la segunda tendrá un ancho de los píxeles que restan (es decir el ancho de ventana menos 400).

Frames / propiedades del elemento frame:

noresize: Esta propiedad no requiere que se le asigne un valor. Si se encuentra presente el frame no podrá ser redimensionado con el mouse por el visitante del sitio.

frameborder: Esta propiedad puede tomar los valores 1 o 0. Por defecto un frame aparece con borde es decir esta propiedad por defecto tiene el valor 1. Si queremos que el borde no aparezca debemos inicializarla con 0.

scrolling: Los valores posibles de esta propiedad son: "auto","yes","no". Por defecto está inicializada con el valor "auto". El valor auto significa que el navegador decide si se debe mostrar la barra de scroll. La mostrará solo si algún contenido del frame no se ve. Si definimos el valor "yes" estamos indicando que siempre debe estar visible la barra de navegación y por último si asignamos el valor "no" estaremos indicando que nunca debe aparecer la barra de navegación para dicho frame.

Ejemplo:
<html>
<head>
  <title>prueba de frames</title>
</head>
  <frameset cols="200,*">
    <frame src="pagina2.html" frameborder="0" noresize>
    <frame src="pagina3.html" frameborder="0" scrolling="yes" noresize>
    <noframes>
      <p>El navegador no soporta frames</p>
    </noframes>
  </frameset>
</html>

Frames / anidamiento de frameset:

<html>
<head>
  <title>prueba de frames</title>
</head>
  <frameset cols="200,*">
    <frame src="pagina2.html" noresize>
    <frameset rows="70,*">
      <frame src="pagina3.html" noresize>
      <frame src="pagina4.html" noresize>
    </frameset>
    <noframes>
      <p>El navegador no soporta frames</p>
    </noframes>
  </frameset>
</html>

Iframes:

<html>
<head>
  <title>prueba de iframes</title>
</head>
<body>
  <h1>Esto es una prueba de un iframe</h1>
  <iframe src="pagina2.html" width="400" height="200">
    No tiene disponible el navegador la capacidad de iframe
  </iframe>
  <h2>Esto ya está fuera del iframe</h2>
</body>
</html>

Algunas propiedades útiles aplicables a un iframe:
src: Archivo a mostrar dentro del iframe.
width: Ancho en píxeles.
height: Alto en píxeles.
frameborder: Podemos asignarle los valores 1 o 0. Si vale 0 el borde no se muestra.
scrolling: Los valores posibles de esta propiedad son: "auto","yes","no". Por defecto está inicializada con el valor "auto". El valor auto significa que el navegador decide si se debe mostrar la barra de scroll. La mostrará solo si algún contenido del iframe no se ve. Si definimos el valor "yes" estamos indicando que siempre debe estar visible la barra de navegación y por último si asignamos el valor "no" estaremos indicando que nunca debe aparecer la barra de navegación para dicho iframe.
name: Nombre del iframe si queremos acceder desde otra página. Por ejemplo si queremos actualizar su contenido desde un enlace ubicado en otra página.

Agrupación de elementos (<div> y <span>):

<html>
  <head>
    <title>Agrupación de elementos</title>    
  </head>
  <body>
    <!-- Aquí comienza el div -->
    <div id="cabecera" style="border: 1px solid blue;">
      cabecera
    </div>

    <div id="menu" style="float: left; border: 1px solid blue; width: 200px;">
      <div>menu 1</div>
      <div>menu 2</div>
      <div>menu 3</div>
      <div>menu 4</div>
    </div>

    <div id="contenido" style="border: 1px solid blue; margin-left: 225px;">
      contenido1
      contenido2<br />
      <div>contenido3</div>
      <div>contenido4</div>
    </div>

    <div id="menu-derecha" style="float: right;">
      derecha
    </div>

    <div id="pie" style="border: 1px solid blue; clear: both">
      pie
    </div>
  </body>
</html>

Ejemplo anterior utilizando el atributo class:
<html>
  <head>
    <title>Agrupación de elementos</title>
    <link rel="stylesheet" type="text/css" href="estilos.css">
  </head>
  <body>
    <!-- Aquí comienza el div -->
    <div class="cabecera">
      cabecera
    </div>

    <div class="menu">
      <div id="menu1" class="menu">menu 1</div>
      <div> id="menu2" class="menu">menu 2</div>
      <div id="menu3" class="menu">menu 3</div>
      <div id="menu4" class="menu">menu 4</div>
    </div>

    <div class="contenido">
      contenido1
      contenido2<br />
      <div id="contenido3" class="contenido">contenido3</div>
      <div id="contenido4" class="contenido">contenido4</div>
    </div>

    <div class="derecha">
      derecha
    </div>

    <div class="pie">
      pie
    </div>

  </body>
</html>

Nota 1: Se requiere del archivo CSS estilos.css para indicar los estilos de la hoja.

 Nota 2: El elemento <span> trabaja de manera similar al elemento div, la diferencia entre ellos es que el div incluye un salto de párrafo mientras que span aplicará los atributos que estén definidos dentro de él.

<html>
  <head>
    <title>Agrupación de elementos</title>
    <link rel="stylesheet" type="text/css" href="estilos.css">
  </head>
  <body>
    <!-- Aquí comienza el div -->

    <div class="cabecera">
      cabecera
    </div>

    <div class="menu">
      <span id="contenido1" class="contenido">contenido1</span>
      <span id="contenido2" class="contenido">contenido2</span><br />
      <div id="contenido3" class="contenido">contenido3</div>
      <div id="contenido4" class="contenido">contenido4</div>
    </div>

    <div class="contenido">
      contenido1
      contenido2<br />
      <div id="contenido3" class="contenido">contenido3</div>
      <div id="contenido4" class="contenido">contenido4</div>
    </div>

    <div class="derecha">
      derecha
    </div>

    <div class="pie">
      pie
    </div>

  </body>
</html>

Utilizar otros lenguajes dentro de HTML:

Incluir código JavaScript:
<html>
  <head>
    <title>Utilizar otros lenguajes dentro de HTML</title>

    <script type="text/javascript" src="widget/lib/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="widget/lib/jquery.ui.rcarousel.min.js"></script>

    <script type="text/javascript">
      alert("Un mensaje de prueba");
    </script>

    <script type="text/javascript" src="/js/codigo.js"></script>
  </head>
  <body>
  </body>
</html>

Nota: Es indiferente qué forma se utilice para incluir código JavaScript pero por buena práctica de programación es recomendable separar los códigos extensos de otros lenguajes que serán incluidos en el documento HTML para un mejor manejo de los archivos.

 Incluir código PHP: 
<html>
  <head>
    <title>Incluir código PHP</title>
  </head>
  <body>
    <h1> ejemplo Php</h1>
    <?php
      echo "hola PHP";
    ?>
  </body>
</html>

 Nota:  El código PHP a diferencia de los anteriores lo podemos incluir en cualquier sección del documento HTML. Sólo necesitamos los tags de apertura y cierre de PHP para embeberlo en donde sea necesario. Una vez embebido el código PHP dentro del documento HTML debemos guardarlo con la extensión .php y ejecutarlo a través de un servidor web.

HTML 5:

HTML 5 es la próxima versión de HTML (Lenguaje de Marcado de Hipertexto) que es el lenguaje universal de la web. Este incluye una serie de nuevos elementos y atributos que son típicos en los sitios Web modernos. Algunos de ellos reemplazan semánticamente a los elementos <div> y <span>, por ejemplo <nav> (bloque de navegación web) y <footer>. Otros elementos proporcionan una funcionalidad nueva a través de una interfaz estandarizada, como los elementos o etiquetas <audio> y <video>. El objetivo de HTML es guardar contenido y es por eso que algunos elementos obsoletos de HTML 4.01 se han eliminado, incluyendo elementos para la presentación de contenido como <font> y <center>, cuyos efectos se consiguen mediante las Hojas de Estilo en Cascada o CSS.

Nuevos Elementos:
•    section: Puede ser un capítulo, una sección de un capítulo o básicamente cualquier cosa que incluya su propio encabezamiento.
•    header: La cabecera de una página. No confundir con el elemento head.
•    footer: El final de la página.
•    nav: Una colección de links a otras páginas.
•    article: Una entrada independiente en un blog, revista, etc.
•    aside: Es un bloque semántico que representa una nota, un consejo una explicación….
•    figure: Se utilizará para representar una imagen.
•    dialog: Se utilizará para representar una conversación entre varias personas.
•    time: Se utilizará para marcar un momento temporal en una historia.
•    meter: Se utilizará para indicar ciertas medidas dependiendo de los atributos.
•    progress: Representará el estado de cierto proceso.
•    video: Archivo de video.
•    audio: Archivo de audio.
•    details: Más detalles.
•    datagrid: Una tabla, una recopilación de datos formateados.
•    menu: Menu de navegación.

 Nuevos Atributos:
•    media: Para conseguir una mayor consistencia con el link en los elementos <a />.
•    ping: Especificaremos una lista separada por espacios donde produciremos un ping cuando se siga el enlace, para los elementos <area /> y <a />.
•    target: Disponible para mejorar la consistencia con el elemento <a />.
•    autofocus: Destinado para indicar el elemento <input /> (no hidden), <select />, <textarea /> o <button /> que ha de coger el foco al cargar la página.
•    form: Atributo para <input />, <ouput />, <select /> <textarea />, <button /> y <fieldset /> que permite que se asocien con un simple formulario.
•    replace: atributo para <input />; <button /> y <form /> que le afectará cuando el contenido del elemento sufra algún cambio.
•    data: Para <form />, <select /> y <datalist />.
•    required: Para elementos <input /> (Excepto hidden e image) y <textarea />, indica que el campo es obligatorio.
•    inputmode: Atributo para <input /> y <textarea />.
•    disabled: Para <fieldset />, permite desactivar el fieldset completo.
•    autocomplete, min, max, pattern, step: Para elementos <input /> permite delimitar las posibilidades de nuestros elementos de entrada.
•    list: Para elementos <datalist /> y <select />.
•    template: Para <input /> y <button /> podrá usarse para repetir templates.
•    scoped: Para elemento <style />, permitirá usar hojas de estilo "scoped".
•    async: Para el elemento <script /> el ajax hecho atributo.

 Atributos Eliminados:
•    rev y charset en <link />  y <a />.
•    target en <link />.
•    nohref en <area />.
•    profile en <head />.
•    version en <html />.
•    name en <map />.
•    scheme en <meta />.
•    archive, classid, codetype, declare y standby en <object />.
•    valuetype en <param />.
•    charset en <script />.
•    summary en <table />.
•    header, axis y abbr en <td /> y <th />.

 Mejoras en los formularios:
•    <input type="search"> para cajas de búsqueda.
•    <input type="number"> para adicionar o restar números mediante botones.
•    <input type="range"> para seleccionar un valor entre dos valores predeterminados.
•    <input type="color"> seleccionar un color.
•    <input type="tel"> números telefónicos.
•    <input type="url"> direcciones web.
•    <input type="email"> direcciones de email.
•    <input type="date"> para seleccionar un día en un calendario.
•    <input type="month"> para meses.
•    <input type="week"> para semanas.
•    <input type="time"> para fechas.
•    <input type="datetime"> para una fecha exacta, absoluta y tiempo.
•    <input type="datetime-local"> para fechas locales y frecuencia.

 Nota: El elemento input adquiere gran relevancia al ampliarse los elementos que se permitirán en el "type".

Ir a Parte II: HTML5
Ir a Desarrollo Web

No hay comentarios:

Publicar un comentario

Suscribirse a: Comentarios (Atom)