Página de Joaquín Pardos

MIS TUTORIALES. HTML

INTRODUCCIÓN

Con estos videotutoriales, pretendo dar toda la información necesaria para que puedan hacerse su propia página web, partiendo desde cero.
Comenzaremos por aprender el lenguaje HTML, siguiendo con CSS, después con JavaScript y por último, la forma de alojar en la web, y todo ello de forma libre y gratuita.
Les mostraré las herramientas necesarias para poder realizar esta programación.
Parto de que no conocen el lenguaje, definiré los medios necesarios, pongo un probador para que pueda colocar su código y pueda probarlo directamente, enseñaré lo necesario para hacerse su propia página.
Iré paso a paso de forma que cuando vean un código no les resulte extraño y cuando deseen hacer algo, tengan los conocimientos para ello o para poder buscar la solución y realizarlo ustedes mismos

Espero que les ayude.


INDICE DE VIDEOTUTORIALES

VIDEO 1.INTRODUCCIÓN. EDITOR DE TEXTOS.
VIDEO 2.EL LENGUAJE HTML. ETIQUETAS.
VIDEO 3.ESTRUCTURA HTML. ETIQUETAS BÁSICAS
VIDEO 4.ESTRUCTURA HTML. FORMATO DE TEXTO
VIDEO 5.ENLACES O LINKS. ANCLAS
VIDEO 6.ATRIBUTOS. IMÁGENES.
VIDEO 7.LISTAS.
VIDEO 8.TABLAS.
VIDEO 9.FORMULARIOS.
VIDEO 10.FRAMES E IFRAMES.
VIDEO 11.COLUMNAS Y MARQUESINAS.
VIDEO 12.DIBUJANDO CON CANVAS.
VIDEO 13.DIBUJANDO CON SVG.


VIDEO 1. INTRODUCCIÓN. EDITOR DE TEXTOS.

En el video 1, explico de qué se trata HTML, y explico un poco el Notepad++,
así como hago referencia a la página http://www.w3c.es/ en donde están definidas las nornmas de HTML,
así como a http://www.w3schools.com/ en donde podemos encontrar tutoriales.

Video Tutorial:



VIDEO 2. EL LENGUAJE HTML. ETIQUETAS.

En el video 2, explico de qué se compone el lenguaje HTML, su gramática y su vocabulario, y explico las etiquetas HTML,

Pulse aquí para mostrar/ocultar texto

  • Lenguaje HTML:
    1. El vocabulario, que se trata de las palabras que lo forman, se basa en etiquetas como <html><head><title><body><h1>...<h6><p><strong><em>
    2. La gramática
      1. Las etiquetas siempre se tienen que cerrar
      2. Los elementos anidados deben tener un correcto orden de apertura/cierre. El último que abrimos es el primero que cerramos.
      3. Debemos siempre escribir las etiquetas en minúsculas, por compatibilidad de todas las versiones HTML
      4. Los valores de los atributos siempre tienen que ir encerrados entre comillas, que pueden ser simples o dobles.
        Ejemplo:

        o bien

      5. Los nombres de los ficheros de las páginas web deben estar construidos:
        • Con las letras del alfabeto inglés: números, guión, guión bajo, AB...Zab...z01...9-_
        • El resto de caracteres pueden dar problemas, como la ñ, Ñ, vocales acentuadas, etc.
      6. La extensión de un archivo para página web debe ser .htm o .html
  • ETIQUETAS
    • HTML es un lenguaje basado en etiquetas (tags) de las que hay más de 100
    • El formato de una etiqueta es:
      • <p>Esto es un párrafo</p>
      • <p class="importante">Esto es un párrafo</p>, en donde:
        • <p...>=inicio de etiqueta
        • class= atributo
        • "importante"= valor
        • Esto es un párrafo= contenido
        • </p>= Final de la etiqueta

Video Tutorial:



VIDEO 3. ESTRUCTURA HTML. ETIQUETAS BÁSICAS.

En el video 3, , presento la definición de la estructura de un archivo HTML, así como algunas etiquetas básicas.
Pongo varios ejemplos HTML.

Pulse aquí para mostrar/ocultar texto

Estructura HTML

Un archivo o documento HTML, tiene una estructura básica, con el objeto de que cualquier navegador lo entienda, ciñéndose a las normas HTML.
Un documento HTML debe comenzar siempre por <!DOCTYPE html>que será su primera línea.
A continuación, todo el documento estará comprendido entre las etiquetas <html lang="es"> y </html>
En la etiqueta de apertura html, le indicamos que el documento está escrito en español, es decir, interpretará los caracteres ñ,Ñ,á,...,ú,Á,...,Ú, etc

Después, el cocumento se divide en dos partes:
  • Cabecera: estará comprendido entre las etiquetas <head> y </head>
  • Cuerpo: estará comprendido entre las etiquetas <body> y </body>
  • En la cabecera <head>, introduciremos la forma o las reglas que ponemos (definiciones propias, etc), de tal manera que no se visualizará su contenido, pudiendo tener elementos tales como
    • meta o metacaracteres, que tendrán varios usos, por ejemplo:
      • Para indicarle el formato de texto en que se ha escrito el documento html
        <meta charset="utf-8">
        Siempre aconsejo guardar el documento en este formato, para compatibilidad de caracteres (trabajando con un ordenador en español)
      • La descripción de la página:
        <meta name="Description" content="descripción de la página" >
        Este tag lo usan los buscadores para dar una descripción del contenido de la página.
      • Para refrescar una página o redirigirla a otra, pasado un tiempo:
        <meta http-equiv="refresh" content="60;URL=./menu.htm";>
        El tipo es http-equiv="refresh", en content le decimos el número de segundos (si indicamos 0 será inmediato) y a continuación indicamos la página a la que debe dirigirse, para ello usamos URL=nombre de la página.
        En este ejemplo, se cargará la página menu.htm que esté en el directorio actual transcurridos 60 segundos.
      • Las palabras clave que los robots usarán en su búsqueda de páginas HTML:
        <meta name="Keywords" content="las palabras separadas por comas" >
        Este tag lo usarán los "robots" enviados por los buscadores y se usará para indicar las palabras claves relacionadas con la página en cuestión.
      • Si los "Robots" deben tener en cuenta esta página o no:
        <meta name="Robots" content="ver los valores" >
        El valor de content puede ser:
        • all para que el robot tenga en cuenta esta página y pueda seguir los links contenidos en la misma (este es el valor predeterminado)
        • index para que la tenga en cuenta
        • noindex lo contrario de index.
        • follow para que pueda seguir los links que haya en la página
        • nofollow lo contrario de follow.
        • none que es lo mismo que noindex, nofollow
      • La fecha en la que expira una página:
        <meta http-equiv="expires" content="fecha en formato GMT" >
        La fecha en la que dicha página expira y por tanto el navegador refrescará el contenido después de esa fecha.
        El formato de la fecha es en el formato: Sat, 18 Jan 2014 16:05:00 GMT, también se puede indicar un 0 para que expire inmediatamente.
        En el caso de que el valor de content sea -1, no se guardará en el caché, lo mismo que si fuese 0.
      Hay más tipos meta, esto son solo ejemplos. Pueden buscar en internet si se desea más documentación de los mismos.
    • <title> Título de la página </title>
      Con esta instrucción, se pone un título a la página.
      Como todo lo que se escribe en el apartado head, no se visualizará en la página.
    • Llamada a definición de estilos CSS en otros ficheros, por ejemplo:
      <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
      En este ejemplo, tenemos definicines css en el fichero "estilo-general.css", tendremos guardados estilos css. Puede haber varios ficheros.
    • Llamada a definicionbes en JavaScript en otros ficheros, por ejemplo:
      <script type="text/javascript" src="../js/cajaayuda.js"></script>
      En este ejemplo, tenemos definicines javascript en el fichero "../js/cajaayuda.js". Puede haber varios ficheros.
    • Definición de estilos CSS en la misma cabecera:
      <style type="text/css"> Definición de estilos CSS </style>
    • Código JavaScript dentro de head:
      <script> Código JavaScript </script>
    • Código PHP dentro de head:
      <?php Código PHP ?>
  • En el cuerpo <body>, introduciremos todo lo que deseemos que se visualice en nuestra página web.
    En el mismo, además de escribir en formato HTML, también podemos hacer uso de bloques CSS, JavaScript, PHP, y otros.
    • Código CSS dentro de body:
      Irá encerrado entre <style> y </style>
    • Código JavaScript dentro de body:
      Irá encerrado entre <script type='text/javascript'> y </script>
    • Código PHP dentro de body:
      Irá encerrado entre <?php y ?>

Etiquetas básicas

Además de las etiquetas que hemos visto de <html>, <head>, <body>, <meta>, <title>, <link>, <script>, <?PHP>, <style>,
hay otras como: <p>, <h1>...<h6>, <b>, <i>, <p>, <hr>, <br />, etc, que estudiaremos más adelante.

Video Tutorial:



VIDEO 4. ESTRUCTURA HTML. FORMATO DE TEXTO.

En este videotutorial, veremos la estructura esquemática explicada en el anterior, y analizamos el formato de texto HTML.

Pulse aquí para mostrar/ocultar texto

Estructura HTML

En el video vemos de forma esquemática la estructura de una página HTML. En el mismo se muestra un ejemplo en donde se encuentra la estructura HTML, con el body dentro; y dentro del body, un título h1, así como dos párrafos; y dentro del segundo párrafo, otros dos párrafos, y vemos cómo lo he construido.

Formato de texto

En HTML, pueden realizarse cualquier tipo de formato de texto existente. El código HTML propiamente dicho, nos permite crear ciertos formatos de texto; cuando con el código no lleguemos, pasaremos a realizarlo con css.
En HTML tenemos los siguientes formatos de texto:
  • Encabezados de h1 a h6:
    • <h1>Esto es un encabezado tipo h1, y es el mayor</h1>
    • <h2>Esto es un encabezado tipo h2</h2>
    • <h3>Esto es un encabezado tipo h3</h3>
    • <h4>Esto es un encabezado tipo h4</h4>
    • <h5>Esto es un encabezado tipo h5</h5>
    • <h6>Esto es un encabezado tipo h6 y es el menor</h6>
  • Tipos de resaltados de texto
    • El texto normal: no necesita ir acompañado de ninguna etiqueta
    • <b>Esto sería un texto en negrita</b>
    • <i>Esto sería un texto en itálica</i>
    • <em>Esto sería un texto enfatizado, o itálica o cursiva</em>
    • <strong>Esto sería un texto fuerte o negrita</strong>
    • <b><i>Esto sería un texto negrita e itálica a la vez (se cierra primero la etiqueta que se ha abierto última)</i><\b>
    • <u>Esto sería un texto subrayado</u>
    • <big>Esto sería un texto grande</big>
    • <small>Esto sería un texto pequeño</small>
    • <cite>Esto sería un texto tipo citation</cite>
    • <code>Esto sería un texto de salida tipo computer o code</code>
    • <sub>Esto sería un texto subíndice</sub>
    • <sup>Esto sería un texto superíndice</sup>
    • <kbd>Esto sería un texto tipo kbd o teclado</kbd>
    • <samp>Esto sería un texto tipo sample</samp>
    • <tt>Esto sería un texto tipo teletipo</tt>
    • <var>Esto sería un texto tipo var</var>
    • <strike>Esto sería un texto tachado</strike>
  • Tamaño de fuentes
    • <font size=1>Esta es la letra más pequeña</font>
    • <font size=3>Esta es la letra de tamaño normal</font>
    • <font size=6>Esto es un tamaño grande</font>
    • <font size="+1">Tamaño relativo, referente al 3. En esta caso sería 4</font>
  • Tipo de fuente
    • <font face="Times New Roman">Esto sería un tipo de fuente "Times New Roman"</font>
    • Georgia
    • Garamond
    • roman
    • Ms Sans Serif
    • Arial
    • Verdana
    • Helvetica
    • Trebuchet
    • Curier
    • Courier New
    • Andele Nomo
    • Cursiva
    • Y combinaciones como <font face="Arial, Verdana" size="5">Esto sería un tipo de fuente combinado tamaño 5</font>
    • <font face="Times New Roman" color=blue>Esto sería un tipo de fuente "Times New Roman" de color azul</font>
  • <hr />Esto se usa para construir una línea horizontal, con sus atributos:
    • align="left / right" Alineación izda dcha. Poor defecto aparece centrada
    • width="66%" Asigna el ancho en %
    • size="3" Asigna el grosor en pixel
    • color="red" Especifica el color
    • Ejemplo: <hr width="50%" align="left" size="6" color="#0f0">

Video Tutorial:



VIDEO 5. ENLACES O LINKS. ANCLAS.

En este videotutorial, veremos los tipos de enlaces que existen en html, cómo construirlos correctamente, y las anclas.

Pulse aquí para mostrar/ocultar texto

Definición de etiquetas y anclas HTML

Llamamos anclas a las etiquetas definidas para poder saltar desde cualquier página hasta las mismas. Se pueden crear de varias formas:
  • <a name="nombre_etiqueta"></a> : tag tipo a, para definir nombre de ancla
  • <h2 id="nombre_etiqueta">Texto</h2> : cualquier tipo de tag con su id (identificador único)
De esta forma, ya está definida, y se puede enlazar con la etiqueta "nombre_etiqueta".
La forma de llamar al enlace es el mismo, sea definido de una u otra forma.

Enlaces o links HTML

Existen los siguientes tipos de enlaces:
  • Enlaces a una etiqueta dentro de la misma página
  • Enlaces a otra página del mismo proyecto
  • Enlaces a una etiqueta que está en otra página del mismo proyecto
  • Enlaces a una página web independiente de la página desde donde se realiza el enlace en la misma ventana
  • Enlaces a una página web independiente de la página desde donde se realiza el enlace abriendo una nueva ventana
  • Enlace a envío de correo electrónico

Enlace dentro de la miama página

Para enlazar con la etiqueta definida, en cualquier otro punto de la página podemos escribir:
<a href="#nombre_etiqueta" title="Salto a nombre_etiqueta">Vamos a nombre_etiqueta</a>
Lo que hemos puesto en title (Salto a nombre_etiqueta) es el texto que se visualiza al pasar por encima del texto mostrado el ratón.
El texto mostrado es en este caso Vamos a nombre_etiqueta
Definición de un Ancla: De la misma forma que se ha definido una etiqueta, puede definirse un ancla, que a efectos de definición hará lo mismo al enlazar con ella.

Enlace a otra página del mismo proyecto

<a href="../tutorial/excel.html" title="Enlace a excel" >Salto al inicio de la página excel.html que se encuentra en ../tutorial/</a>

Enlaces a una etiqueta que está en otra página del mismo proyecto

<a href="../tutorial/excel.html#prueba1" title="Enlace a excel" >Salto a la etiqueta prueba1 de la página excel.html que se encuentra en ../tutorial/</a>

Enlaces a una página web independiente de la página desde donde se realiza el enlace en la misma ventana

Por ejemplo, un enlace directo a mi página web:
<a href="http://www.jpardos.esy.es/" >Visita mi página web en esta misma ventana</a>

Enlaces a una página web independiente de la página desde donde se realiza el enlace abriendo una nueva ventana

Por ejemplo, un enlace directo a mi página web en una nueva ventana:
<a href="http://www.jpardos.esy.es/" target="_blank" >Visita mi página web abriendo una nueva ventana</a>
<a href="http://www.google.es/" title="Buscador Google" target="_blank" >Buscador</a>

Enlace a envío de correo electrónico

Por ejemplo, abrir al pulsar el envío a mi dirección de correo electrónico:
<a href="mailto:joaquinpardosguillen@gmail.com" title="Envío de correo electrónico" >Mándame un e-mail</a>


Video Tutorial:



VIDEO 6. ATRIBUTOS. IMÁGENES.

En este videotutorial, veremos cómo pueden colocarse atributos css (o estilos) en un documento HTML, y hablaremos también sobre imágenes.

Pulse aquí para mostrar/ocultar texto

Definición de atributos HTML

Llamamos atributos a formatos, colores, etc, es decir, a los estilos, que no es propiamente lenguaje HTML, pero que se pueden colocar incrustados en el mismo. Se pueden crear de varias formas, viendo aquí como hacerlo en el propio documento:
Por ejemplo, se puede aplicar un estilo a todo el documento: <body style="background-color:green">. Esto hará que el fondo de la pantalla sea verde.
Ejemplo de poner un color de texto, tipo de fuente y tamaño de texto a un párrafo:
<p style="color:#0ff; font-family:verdana; font-size:20px" > Texto </p>
Ejemplo de poner un color de fondo al siguiente encabezado tipo h3: <h3 style="background-color:red";>Cabecera</h3>

De esta forma, tenemos definidos estilos a cada parte del documento.

Otra forma de definir estilos es en una zona del documento, agruparlos. Normalmente entre las etiquetas de tipo head.
Para ello, debe empezar por: <style type="text/css">
A continuación, se escribirán los estilos que serán comunes a todo el documento, en lugar de a la etiqueta en donde los aplicábamos antes:
<h3 style="background-color:red";>Cabecera</h3>
<p style="color:#0ff; font-family:verdana; font-size:20px" > Texto </p>
body {background-color:yellow;}
Así a todos los h3 del documento se le aplicará el estilo definido aquí (excepto a los h3 en donde se les defina en la propia etiqueta el suyo), y de la misma forma a todos los párrafos p
Y el color de fondo de la pantalla será el amarillo en este caso.
Para terminar, se cierra la definición de estilos con: </style> Dentro de estas etiquetas style, los comentarios son de la forma:
/* comentario */, pues estamos escribiendo en formato css, y no en html.
Esto se puede utilizar así pero no es lo más aconsejable.
En primer lugar, se aconseja no definir estilos en cada etiqueta que se usan, pues se carga de código la página, ocupa más espacio y se hace más lenta, además de que si se desea cambiar de estilos a todas las etiquetas, hay que hacerlo una por una.
Por ello, es mejor definir todos los estilos agrupados entre las etiquetas head. Aunque tampoco es la solución óptima.
Lo mejor es crear una hoja de estilos que además será común para todas las páginas que diseñemos, de forma que realizar un cambio en todas las páginas supone muy poco trabajo.

Imágenes

En HTML, se pueden visualizar imágenes, siguiendo el siguiente ejemplo:
<img src="ruta/imagen.jpg" alt="Texto" title="Título" width="100" height="200" border="3">
En este ejemplo, se mostratía una imagen, "imagen.jgp" que está en la "ruta" respecto a donde está el documento html desde donde se le llama
Cuando se pasa el ratón por encima de la imagen, aparecerá el texto "Título", definido en "title"
Cuando la imagen se esté cargando, aparecerá el texto "Texto", definido en "alt"
La imagen se visualizará con un ancho de "100"(pixel), definido en "width" y con una altura de "200"(pixel), definido en "height"
Estará enmarcada con un borde de "3"pixel, definido en "border"
El borde, si no se le indica, aparecerá sin borde.

Se aconseja definir la anchura y la altura, para que no pierda tiempo a la hora de visualiuzarla para calcular estas.
La imagen se ciñe a estas dimensiones, de forma que puede visualizarse más grande, más pequeña, más ancha o estrecha y más alta o baja, adaptándose la imagen a las dimensiones marcadas.


Una imagen, también puede ser utilizada como enlace o link, que será dentro de la página, a otra página, a una dirección web, a un correo, etc.
Será de la forma como el siguiente ejemplo:
<a href="#enlace"><img src="imagen.jpg" alt="imagen" title="enlace" ></a>


Video Tutorial:



VIDEO 7. LISTAS.

En este videotutorial, veremos cómo se construyen las listas en HTML, y los diferentes tipos de listas que pueden construirse.

Pulse aquí para mostrar/ocultar texto

Tipos de listas HTML

En HTML, podemos realizar listas de tipo:
  • Listas ordenadas
  • Listas no ordenadas
  • Listas definiciones
  • Listas anidadas
Listas ordenadas:
Son aquellas que se numeran de forma automática. La lista ordenada se encuentra entre dos etiquetas <ol>, y cada elemento se encuentra etiquetado con <li>
Ejemplos de lista ordenada:
Código HTML: Visualización:
<ol>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ol>
  1. Uno
  2. Dos
  3. Tres
En lista ordenada, comenzar el índice por un valor:

<ol>
<li value="100">Este será el número 100. </li>
<li>Este será el 101.</li>
<li>Este será el 102.</li>
<li>Y así sucesivamente.</li>
</ol>
En lista ordenada, comenzar el índice por un valor:

  1. Este será el número 100.
  2. Este será el 101.
  3. Este será el 102.
  4. Y así sucesivamente.
Listas ordenadas tipo 1

<ol type=1>
<li>Primer término de la lista</li>
<li>Segundo término</li>
<li>Tercer término</li>
<li>Cuarto término</li>
<li>Quinto término</li>
</ol>
Listas ordenadas tipo 1

  1. Primer término de la lista
  2. Segundo término
  3. Tercer término
  4. Cuarto término
  5. Quinto término
Listas ordenadas tipo a

<ol type=a>
<li>Primer término de la lista</li>
<li>Segundo término</li>
<li>Tercer término</li>
<li>Cuarto término</li>
<li>Quinto término</li>
</ol>
Listas ordenadas tipo a

  1. Primer término de la lista
  2. Segundo término
  3. Tercer término
  4. Cuarto término
  5. Quinto término
Listas ordenadas tipo A

<ol type=A>
<li>Primer término de la lista</li>
<li>Segundo término</li>
<li>Tercer término</li>
<li>Cuarto término</li>
<li>Quinto término</li>
</ol>
Listas ordenadas tipo A

  1. Primer término de la lista
  2. Segundo término
  3. Tercer término
  4. Cuarto término
  5. Quinto término
Listas ordenadas tipo i

<ol type=i>
<li>Primer término de la lista</li>
<li>Segundo término</li>
<li>Tercer término</li>
<li>Cuarto término</li>
<li>Quinto término</li>
</ol>
Listas ordenadas tipo i

  1. Primer término de la lista
  2. Segundo término
  3. Tercer término
  4. Cuarto término
  5. Quinto término
Listas ordenadas tipo I

<ol type=I>
<li>Primer término de la lista</li>
<li>Segundo término</li>
<li>Tercer término</li>
<li>Cuarto término</li>
<li>Quinto término</li>
</ol>
Listas ordenadas tipo I

  1. Primer término de la lista
  2. Segundo término
  3. Tercer término
  4. Cuarto término
  5. Quinto término
Listas no ordenadas:
Son aquellas que no se numeran. La lista no ordenada se encuentra entre dos etiquetas <ul>, y cada elemento se encuentra etiquetado con <li>
Ejemplos de lista no ordenada:
Código HTML: Visualización:
Listas no ordenadas

<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
Listas no ordenadas

  • Uno
  • Dos
  • Tres
Tipos de puntos en una lista no ordenada:

<ul>
<li type="circle">Esto es el tipo de punto circle.</li>
<li type="square">Esto es el tipo de punto square.</li>
<li type="disc">Esto es el tipo de punto disc.</li>
</ul>
Tipos de puntos en una lista no ordenada:

  • Esto es el tipo de punto circle.
  • Esto es el tipo de punto square.
  • Esto es el tipo de punto disc.
Listas definiciones:
La lista de definiciones se encuentra entre dos etiquetas <dl>, con <dt> añadimos un término, y la definición del término se encuentra etiquetado con <dd>
Puede servirnos por ejempl para hacer un diccionario
Ejemplo de definiciones:
Código HTML: Visualización:
<dl>
<dt>Término uno</dt>
<dd>Definición de uno</dd>
<dt>Dos<dt>
<dd>Definición de dos</dd>
<dt>Tres<dt>
<dd>Definición de tres</dd>
</dl>
<dl>
<dt>Término separado del anterior por nueva <dl><dt>
<dd>Y aquí dentro irá su definición.</dd>
</dl>
Término uno
Definición de uno
Dos
Definición de dos
Tres
Definición de tres
Término separado del anterior por nueva <dl>
Y aquí dentro irá su definición.
Listas anidadas:
Cualquier lista se puede convertir en anidada (<ul>, o las <ol>).
Las listas <dl>, pueden anidarse a otras, pero no ser anidadas, debido a que su estructura es en parejas.
Para anidar una lista, solo hay que crear una lista dentro de un argumento <li> de otra.
Cuando se produce un cambio de tabulación y de estilo de marcas.
Ejemplo de lista anidada:
Código HTML: Visualización:
<ul>
<li>Cardinales</li>
<li>
<ol>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ol>
</li>
<li>Ordinales</li>
<li>Números
<ol>
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ol>
</li>
</ul>
  • Cardinales
    1. Uno
    2. Dos
    3. Tres
  • Ordinales
  • Números
    1. Primero
    2. Segundo
    3. Tercero
Otro ejemplo de lista anidada:
<ul>
<li>Café con leche <ul>
<li>Azúcar</li>
<li>Miel</li>
<li>Leche <ul>
<li>De vaca</li>
<li>De cabra</li>
<li>Condensada</li>
</ul>
</li>
</ul>
</li>
</ul>
Otro ejemplo de lista anidada:
  • Café con leche
    • Azúcar
    • Miel
    • Leche
      • De vaca
      • De cabra
      • Condensada

Video Tutorial:



VIDEO 8. TABLAS.

En este videotutorial, veremos cómo se construyen las tablas en HTML, y los diferentes tipos de tablas que pueden construirse.

Pulse aquí para mostrar/ocultar texto

Cómo se crean las tablas HTML

Las tablas se crean con la etiqueta <table>...</table>. La tabla está contenida entre esta etiqueta
Las filas se definen con la etiqueta <tr>...</tr> table row.
Cada etiqueta <tr> contiene celdas que inicialmente coincidirán con el número de columnas, definidas por medio de la etiqueta <td>...</td>
Cada celda de datos puede contener lo que quieras insertar : texto, Imágenes, listas, e incluso otras tablas.

Ejemplo de una tabla de 3 filas por 3 columnas:
Código HTML: Visualización:
<table border="1">
<tr>
<td> celda (1,1)</td>
<td> celda (1,2)</td>
<td> celda (1,3)</td>
</tr>
<tr>
<td> celda (2,1)</td>
<td> celda (2,2)</td>
<td> celda (2,3)</td>
</tr>
<tr>
<td> celda (3,1)</td>
<td> celda (3,2)</td>
<td> celda (3,3)</td>
</tr>
</table>
celda (1,1) celda (1,2) celda (1,3)
celda (2,1) celda (2,2) celda (2,3)
celda (3,1) celda (3,2) celda (3,3)

Atributos de las tablas

border="n": Crea un borde alrededor de la tabla de grosor especificado por el valor "n" (pixel). Teniendo cero como valor por defecto.
Width="n": el valor "n" indica la anchura de la tabla en pixels (100) o porcentaje (10%). También se puede utilizar este atributo con las celdas <td>
Align="right / left / center": Alinea horizontalmente la tabla.
height="n": "n" es la altura de la tabla en pixels (100) o porcentaje (10%).
Backgund="imagen.ext": Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen (jpg,jpeg,gif,png).
bgcolor="#f00": indica el color de fondo de la tabla o celda, en este caso, rojo.
bordercolor="#0f0": define el color del borde, en este caso, verde.
cellpadding="n": define el espacio, en pixels, entre los bordes de la celda y el contenido de la misma. Por defecto, y si no se especifica, tiene un valor de 1.
cellspacing="n": define el espacio ,en pixels, entre el borde cada una de las celdas y el borde de la tabla. Por defecto, tiene un valor de 2.

Ejemplo:
Código HTML: Visualización:
<table border="10" width="100%" bgcolor="#f00" bordercolor="#0f0" cellpadding="10" cellspacing="15">
<tr>
<td bgcolor="#0ff"> celda (1,1)</td>
<td bgcolor="#ff0"> celda (1,2)</td>
<td bgcolor="#ccc"> celda (1,3)</td>
</tr>
<tr>
<td> celda (2,1)</td>
<td> celda (2,2)</td>
<td> celda (2,3)</td>
</tr>
<tr>
<td> celda (3,1)</td>
<td> celda (3,2)</td>
<td> celda (3,3)</td>
</tr>
</table>
celda (1,1) celda (1,2) celda (1,3)
celda (2,1) celda (2,2) celda (2,3)
celda (3,1) celda (3,2) celda (3,3)

Atributos de las celdas

Estos atributos modifican el formato de las filas y/o celdas dependiendo si están en un <tr bgcolor="#00f"> afectaría a toda la fila o se encuentra en <td bgcolor="#0f0"> donde solamente afectaría a la celda.
Estos atributos son:
bgcolor ="blue": Define el color de la celda o fila.
bordercolor="green":Define el color del borde de la celda.
align="top / middle / bottom": Elegimos el lugar en cual el texto es colocado. Top (arriba),middle(centro) y bottom(abajo)
valign="left / center / right": Alineación del texto izquierda (left), centro(center), o derecha (right)

Los siguientes atributos sólo pueden ser aplicados a una celda y no al conjunto de celdas que forman una fila.
colspan="n": Expande el una celda horizontalmente tantas celdas como el valor asignado a n
rowspan="n": Expande una celda verticalmente tanta celdas como el valor asignado a n
width="n": El valor n indica la anchura de la tabla en pixels (200) o porcentaje (20%). Este atributo también se puede aplicar a la celdas <td>.
height ="n": El valor n, define la altura de la celda en pixels o porcentaje.

Ejemplos de tablas

Código HTML: Visualización:
<table width="98%" border="1" align="center" cellpadding="10" cellspacing="5" bgcolor="#ffc" >
<caption align="bottom">Título de la tabla</caption>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2<th>
<th colspan="2">Encabezado 3</th>
</tr>
<tr>
<td rowspan="2" valign="middle" align="left">Este texto está alineado al centro verticalmente y a la izquierda horizontalmente</td>
<td rowspan="2" valign="bottom" align="right">Este texto está alineado abajo verticalmente y a la derecha horizontalmente</td>
<td>Celda</td>
<td bgcolor ="yellow" >Celda</td>
</tr>
<tr>
<td colspan="2" align="center" >Esta celda ocupa 2 columnas</td>
</tr>
</table</tr>
Título de la tabla
Encabezado 1 Encabezado 2 Encabezado 3
Este texto está alineado al centro verticalmente y a la izquierda horizontalmente Este texto está alineado abajo verticalmente y a la derecha horizontalmente Celda Celda
Esta celda ocupa 2 columnas


Código HTML: Visualización:
<table border="1" align="center">
<tr">
<td colspan="3" align="center">Celda 1</td>
</tr>
<tr>
<td>Celda 2</td>
<td>Celda 3</td>
<td>Celda 4</td>
</tr>
</table>
Celda 1
Celda 2 Celda 3 Celda 4

Código HTML: Visualización:
<table border="1" align="center">
<tr>
<td rowspan="3">Celda 1</td>
<td>Celda 2</td>
</tr>
<tr>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
</tr>
</table>
Celda 1 Celda 2
Celda 3
Celda 4

Tablas anidadas

Código HTML: Visualización:
<table border="1">
<caption align="top"> título </caption>
<tr>
<th>Cabecera 1</th>
<th>Cabecera 2</th>
<th>Cabecera 3</th>
</tr>
<tr>
<td align="center">Celda tabla principal (padre)</td>
<td align="center">
<table cellspacing="12" cellpadding="12" border="4">
<tr>
<<td>Tabla anidada, Celda (1,1) </td>
<td>Tabla anidada, Celda (1,2) </td>
</tr>
<tr>
<td> Tabla anidada, Celda (2,1) </td>
<td> Tabla anidada, Celda (2,2) </td>
</tr>
</table>
</td>
<td align="center">Celda final (padre)</td>
</tr>
<tr>
<td>Celda A</td>
<td>Celda B</td>
<td>Celda C</td>
</tr>
</table>
título
Cabecera 1 Cabecera 2 Cabecera 3
Celda tabla principal (padre)
Tabla anidada, Celda (1,1) Tabla anidada, Celda (1,2)
Tabla anidada, Celda (2,1) Tabla anidada, Celda (2,2)
Celda final (padre)
Celda A Celda B Celda C

Tablas más estructuradas

<table>:Agrupa todos los elementos de la tabla
<thead>:Agrupa las filas de la cabecera (una o más filas)
<tbody>:Agrupa las filas de cuerpo (grueso de la tabla)
<tfoot>:Agrupa las filas del pie de la tabla
<tr>:Fila de la tabla
<th>:Celda de la cabecera
<td>:Celda de datos
<caption>:Título de la tabla

Resumen de tablas

Básicas: table, tr, td (tabla, filas, celdas)
Título: caption
Semántica: th (sustituye a td en la cabecera)
Estilo: th, thead, tbody, tfoot, colgroup, col
Atributo:
  • colspan, rowspan (th, td))
  • span (colgroup/col)

Video Tutorial:



VIDEO 9. FORMULARIOS.

En este videotutorial, veremos cómo se construyen los formularios en HTML, y los diferentes tipos de campos que podemos utilizar.

Pulse aquí para mostrar/ocultar texto

Cómo se crean los formularios HTML

El formulario se hace mediante etiquetas. Las más usuales son:
  • form: Define el formulario. Es el único atributo requerido para hacer un formulario.
  • input: Para entrada de datos en un formulario
  • select: Para seleccionar una opción
    • name: Nombre de la selección
    • size: Altura de la caja de opciones
    • multiple: Puede seleccionar más de una opción con control
    • optgroup: Para agrupar opciones relacionadas dentro de una lista
    • option: Cada una de las opciones que se muestran
      • value: Valor que se envía cuando se selecciona la opción
  • textarea: Define área de texto
    • name: Nombre del textarea
    • rows: Número de filas del área de texto
    • cols: Número de columnas del área de texto
  • label: Asigna el nombre a un campo de formulario
  • fieldset: Agrupa campos del formulario
    • legend: Asigna nombre al grupo

Abrir y cerrar un formulario

Las etiquetas para abrir y cerrar formulario son: <form> para abrir, y </form> para cerrar.
Entre las dos debe estar el contenido del formulario (casillas, campos, botones, etc), así como todas las etiquetas de HTML que permitan dar forma al formulario .

Atributos de form

  • action Único atributo requerido para form.
  • method Forma de enviar información
    • get: Por defecto. Datos visibles. Ejemplo formulario de búsqueda. Permite enviar unos 500 bytes
    • post: Datos invisibles. Ejemplo formulario de registro en donde no se ve el password. Permite enviar más información
  • accept charset: Para juego de caracteres. No suele usarse
  • hidden no mostrará el campo en la página web, aunque sí enviará su contenido.
  • novalidate este atributo evita que el formulario sea validado antes del envío.
  • enctype: Tipo de codificación
ejemplo: Formulario que envía un correo
<form action="mailto:joaquinpardosguillen@gmail.com" method="post" enctype="text/plain">
...
</form>

Entrada de texto de una línea

Las etiqueta que permite la entrada de texto de una línea es: <input>. No tiene etiqueta de cierre.
La etiqueta input es de las más utilizadas en un formulario.
Ejemplo: <input name="e-mail" />: campo input cuyo nombre es "e-mail".

Atributos de input

  • name: indica el nombre
  • type: tipos de elementos que nos podemos encontrar en un formulario
    • hidden: Campo oculto.
    • text: Utilizado para introducir un texto
      • maxlegth: Máximo número de caracteres
      • size: Anchura para número de caracteres
      • value: Valor por defecto
    • password: Utilizado para introducir un text enmascarado
    • search: El atributo representa un campo de búsqueda.
    • tel: El atributo representa un control para editar un número de teléfono.
    • url: El atributo representa un control para editar una URL.
    • email: El atributo representa una dirección de correo electrónico.
    • datetime: Sirve para introducir una fecha y una hora, siempre y cuando la zona horaria esté configurada como UTC.
    • date: Nos sirve para introducir una fecha
    • month: Sirve para introducir una fecha formada por el año y el mes, pero sin zona horaria.
    • week: Sirve para introducir una fecha formada por el año y el número de semana, pero sin zona horaria.
    • time: Sirve para introducir un valor de hora formado por las horas, los minutos, los segundos y las fracciones de segundo, pero sin zona horaria.
    • datetime-local: Sirve para introducir una fecha y una hora sin zona horaria.
    • number: Sirve para introducir un número.
    • color: Sirve para elegir un color a través de un control adecuado del color.
    • range: Cuando una entrada de elemento de tipo de atributo está en el rango de estado.
    • checkbox: Casilla de verificación
      • name: Todos los campos que forman el grupo deben tener el mismo nombre
      • checked: Casilla marcada por defecto
      • value: Valor si la casilla está activada
    • radio: Casilla de opción
    • file: Utilizado para subir un fichero
    • submit: Botón de enviar. Envía el formulario
    • image: Imagen con el botón de enviar. N se suele usar.
      • alt: Texto alternativo
      • src: Ruta de la imagen
    • reset: Botón de reset. Reinicia el formulario
    • button: botón sin acción. Para darle acción hay que trabajar con eventos
  • alt: Descripción del control
  • disabledEl control aparece deshabilitado y su valor no se envía al servidor junto con el resto de datos
  • readonly: El contenido no se puede modificar
  • autofocus: Si quieres poner el foco en un campo pones: autofocus y automáticamente el foco de la página estará en ese campo.
  • placeholder: Te permite mostrar un valor por defecto
  • form: Especifica uno o varios formularios a los que pertenece el elemento de entrada.
  • required: Indica que el elemento es obligatorio.
  • autocomplete: Sirve para especificar que el navegador no debe autocompletar o rellenar previamente un campo en base a las entradas anteriores del usuario.
  • pattern: Sirve para validar el valor de un elemento comparándolo con una expresión regular.
  • dirname: Sirve para enviar la direccionalidad del control con el formulario.
  • novalidate: Sirve para inhabilitar la validación de envíos de formularios cuando se especifique en un elemento de formulario.
  • formaction: Sirve para anular el atributo "action" en el elemento de formulario. (compatible con input y button)
  • formenctype: Sirve para anular el atributo "enctype" en el elemento de formulario. (compatible con input y button)
  • formmethod: Sirve para anular el atributo "method" en el elemento de formulario. (compatible con input y button)
  • formnovalidate: Sirve para anular el atributo "novalidate" en el elemento de formulario. (compatible con input y button)
  • formtarget: Sirve para anular el atributo de destino en el elemento de formulario. (compatible con input y button)

Ejemplos de programación y resultados

Código HTML: Visualización:
<form action="mailto:joaquinpardosguillen@gmail.com" method="post" enctype="text/plain" name="misdatos"> No se visualiza nada
<input type="hidden" name="opcion" value="mis pruebas de formulario (este texto es oculto)"> No se visualiza nada a causa del type="hidden"
Nombre: <input type="text" size="50" maxlength="80" name="nombre" value="Su nombre" required> Nombre:
email: <input type="text" size="50" maxlength="80" name="email" placeholder="su correo" required> email:
contraseña: <input type="password" name="contraseña" maxlength="4" size="6" placeholder="++++" required> contraseña:
<label for="phone">Número de teléfono:</label>
<input type="tel" name="Teléfono" id="phone" placeholder="123456789" pattern="[0-9]{9}"> (opcional)

(opcional)
<label for="website">Su página web:<</label>
<input type="url" name="web" id="website" value="http://"> (opcional)

(opcional)
<textarea name="comentarios" rows="10" cols="40">Escribe aquí tus comentarios</textarea>
<fieldset><legend>Sexo</legend>
<input type="radio" name="sexo" value="H"> Hombre
<input type="radio" name="sexo" value="M"> Mujer
</fieldset>
Sexo Hombre
Mujer
<fieldset><legend>Hijo 1</legend>
<input type="radio" name="hijo1" value="Hijo" checked> Hombre
<input type="radio" name="hijo1" value="Hija"> Mujer
</fieldset>
Hijo 1 Hombre
Mujer
Número de hijos:
<select name="num hijos" size="2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
Número de hijos:
<fieldset><legend>Medio de transporte</legend> <input type="checkbox" name="transporte" value="Carretera">Coche
<input type="checkbox" name="transporte" value="Aire" checked>Avión
<input type="checkbox" name="transporte" value="Ferrocarril">Tren

</fieldset>
Medio de transporte Coche
Avión
Tren

Países donde ha trabajado
<select name="paises" size="2" multiple>
<option selected>España</option>
<option>Portugal</option>
<option>Francia</option>
<option>Andorra</option>
<option selected>Italia</option>
<option>Suecia</option>
<option>Suiza</option>
<option>Alemania</option>
<option>Luxemburgo</option>
<option>Inglaterra</option>
</select>
Países donde ha trabajado
Profesión:
</select name="profesion">
<option value="Ingeniero">Ingeniero</option>
<option value="Médico">Médico</option>
<option value="Abogado">Abogado</option>
<option value="Maestro">Maestro</option>
<option value="Cocinero">Cocinero</option>
<option value="Albañil">Albañil</option>
</select>
Profesión:
<label for="tratamiento">Tratamiento: <input type="text" list="midato" name="tratamiento" id="tratamiento" placeholder="Seleccione o introduzca" required>
<datalist id="midato">
<option label="Sr" value="Señor">
<option label="Sra" value="Señora">
<option label="Srta" value="Señorita">
</datalist">
<label for="numeroej">Valor de 1 10 <input type="number" name="numeroej" id="numeroej" min="1" max="10" value="1" required> (1-10) (1-10)
<form onsubmit="return false" oninput="años.value = vedad.valueAsNumber">
<label for="edad">Edad</label>
<input name="vedad" id="edad" type="range" min="0" max="100" value="0">
<output for="edad" name="años">0</output>/100 años
0/100 años
<label for="fecha">Fecha</label>
<input type="date" name="fecha" id="fecha" min="2012-01-16" required> (mínimo 16 Enero 2012)
(mínimo 16 Enero 2012)
<label for="hora">Hora</label>
<input type="time" name="hora" id="hora" step="1800" required> (incrementos de 30 minutos)
(incrementos de 30 minutos)
<label for="colorejemplo">Color</label>
<input type="color" name="colorejemplo" id="colorejemplo" value="#ff0000"> (por defecto rojo)
(por defecto rojo)
<input type="submit" value="Enviar formulario">
<input type="Reset" value="Borrar formulario">

Video Tutorial:



VIDEO 10. FRAMES E IFRAMES.

En este videotutorial, veremos cómo se construyen los frames y los iframes en HTML, y los diferentes tipos de campos que podemos utilizar.

Pulse aquí para mostrar/ocultar texto

¿Para qué sirven los frames?

Los frames se utilizan para poder visualizar varios fragmentos en una misma página web, por ejemplo, para poder visualizar varios archivos html en una misma página.
Los frames lo que hacen es dividir la pantalla como nosotros deseemos hacerlo, de forma que a cada archivo a mostrar le asignamos una zona de pantalla para hacerlo.

Cómo se crean los frames HTML

Lo primero que debemos hacer es plantearnos cómo deseamos distribuir la pantalla.
Un ejemplo de ello, es cómo está distribuida mi página web.
En la pantalla podemos hacer divisiones verticales u horizontales.
Los frames normalmente se declaran en la propia cabecera, es decir, entre las etiquetas <head>, sin ser necesaria la etiqueta <body>. Veamos un ejemplo de lo que explico, en donde ponemos una cabecera, un pie, y en la zona central una parte a la izda y otra a la dcha más ancha:
Código HTML: Visualización:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Frames e Iframes</title>
<frameset rows="18%,76%,6%" frameborder='no'>
<frame src="frame1.html" name="cabecera" scrolling="no">
<frameset cols="12%,88%">
<frame src="frame2.html" name="menu" frameborder="0">
<frame src="frame3.html" name="contenido" MARGINWIDTH="5" MARGINHEIGHT="10" scrolling="auto">
</frameset>
<frame src="frame4.html" name="pie" scrolling="no">
</frameset>
</head>
</html>
      Cabecera                                       
Menú     Zona central                 



   Pie

Iframes

Un Iframe es un cuadro dentro de la página.
Dentro del cuadro puede alojarse una figura, una animación, texto, una página web, bien un documento html, etc..
Se trata como si fuese un documento dentro de nuestra página html
Comienza y termina con una etiqueta <iframe>, y tiene como parámetros más interesantes:
  • align: alineación, que puede ser:
    • left: a la izquierda
    • right: a la derecha
    • top: arriba
    • middle: centrada verticalmente
    • bottom: abajo
  • frameborder: si se visualiza borde (=1) Sin borde(=0)
  • height: alto en pixels
  • width: ancho en pixels
  • marginheight: Margen en altura
  • marginwidth: Margen en anchura
  • src: Fuente, url
  • scrolling: si permite hacer scroll yes o no o auto
Hay navegadores que no soportan iframes, por lo tanto debemos tenerlo en cuenta para indicarlo en dicho caso.
Veamos un ejemplo:
Código HTML: Visualización:
<iframe src="semaforo.html" width="100px" height="350px" align="left">
<p>Su navegador no soporta iframes.</p>
</iframe>


Video Tutorial:



VIDEO 11. COLUMNAS Y MARQUESINAS.

En este videotutorial, veremos cómo se trabaja con columnas en HTML, así como el funcionamiento de las marquesinas.

Pulse aquí para mostrar/ocultar texto

Trabajando con columnas

Para trabajar con columnas, creamos varias clases:
  • El contenedor de las columnas
  • El contenedor de la columna izquierda, o de una columna
  • Un contenedor para cada columna
Por ejemplo: queremos trabajar con tres columnas, por lo que tendremos que hacer lo siguiente:
En primer lugar, declaramos las clases: .footerdemo, que será el contenedor de las columnas,
declaro la clase .footerdivs que será común a las 3 columnas,
declaro la clase .fdizquierda que contendrá la columna izquierda,
declaro la clase .fdderecha que contendrá la columna derecha,
declaro la clase .fdcentro que contendrá la columna del centro,
Quedando declaradas de la siguiente forma:
<style type="text/css">
.footerdemo {
background-color: #ff0;
float: left;
margin: 20px 30px;
width: 95%;
}
.footerdivs {padding: 10px;}
.fdizquierda {float: left; margin: 20px auto; width: 30%; background-color: #f00; }
.fdderecha {float: right; margin: 20px auto; width:30%; background-color: #0f0; }
.fdcentro {margin: 20px auto; width: 30%; background-color: #0ff; }
</style>
Posteriormente, escribiremos en las tres columnas de la siguiente forma:
<div class="footerdemo">
<div class="fdizquierda">
<div class="footerdivs">
....... aquí irá el contenido de la izquierda ....... <p>Párrafo</p>
<p>Párrafo</p>
<p>Párrafo</p>
<p>Párrafo</p>
<p>Párrafo</p>
<p>Párrafo</p>
</div>
</div>
<div class="fdderecha">
<div class="footerdivs">
....... aquí irá el contenido de la derecha ....... <p>Párrafo</p>
<p>Párrafo</p>
<p>Párrafo</p>
<p>Párrafo</p>
<p>Párrafo</p>
<p>Párrafo</p>
</div>
</div>
<div class="fdcentro">
<div class="footerdivs">
....... aquí irá el contenido del centro ....... <p>Párrafo</p>
<p>Párrafo</p>
<p>Párrafo</p>
<p>Párrafo</p>
<p>Párrafo</p>
<p>Párrafo</p>
</div>
</div>
</div>
Esto se visualizará de la siguiente forma:
....... aquí irá el contenido de la izquierda .......

Párrafo

Párrafo

Párrafo

Párrafo

Párrafo

Párrafo

....... aquí irá el contenido de la derecha .......

Párrafo

Párrafo

Párrafo

Párrafo

Párrafo

Párrafo

....... aquí irá el contenido del centro .......

Párrafo

Párrafo

Párrafo

Párrafo

Párrafo

Párrafo

Trabajando con marquesinas

Etiqueta marquee: Empieza con <marquee atributos>. En el interior se coloca el texto imagen, vínculo o tabla a desplazar y termina con </marquee>;.

Atributos

  • width: Anchura
  • height: Altura
  • hspace: Separación horizontal con los bordes de la marquesina
  • vspace: Separación vertical con los bordes de la marquesina
  • bgcolor: Color de fondo
  • direction: Dirección de movimiento del texto. Puede ser: left (el valor por defecto), right, up o down
  • scrolldelay: Tiempo entre cada movimiento expresado en milisegundos
  • loop: Número de veces que aparecerá el texto y por defecto, es infinito.
  • scrollamount: Cantidad de desplazamiento del texto en cada movimiento de avance. Cuanto mayor es el número, más rápido avanza
  • behavior: Define de que manera se va a efectuar el desplazamiento y puede tener los siguientes valores:
    • scroll: (valor por defecto), aparece por un lado, se desplaza hasta el otro, desaparece y vuelve a empezar
    • slide: aparece por un lado, se desplaza y se detiene.
    • alternate: Se desplaza alternativamente hacia un lado y el otro.
  • style: Atributos
Veamos ejemplos de marquesinas
Código HTML: Visualización:

Desplazamiento de texto una sola vez:

<marquee behavior="slide" direction="left">Texto con marquee tipo slide</marquee>
Texto con marquee tipo slide

Continuo desplazamiento de texto:

<marquee behavior="scroll" direction="left">Texto con marquee tipo scrool, con desplazamiento a la izquierda</marquee>
Texto con marquee tipo scrool, con desplazamiento a la izquierda

Texto rebotando:

<marquee behavior="alternate">Texto con marquee tipo alternate</marquee>
Texto con marquee tipo alternate

Texto de desplazamiento hacia arriba y abajo:

<p class="color0" style="height:100px;">
<marquee style="position:absolute;right:10%;height:100px;" behavior="scroll" direction="up">Texto con marquee tipo scrool, con desplazamiento hacia arriba</marquee>
<marquee style="position:absolute;left:10%;height:100px;" behavior="scroll" direction="down">Texto con marquee tipo scrool, con desplazamiento hacia abajo</marquee>
</p>

Texto con marquee tipo scrool, con desplazamiento hacia arriba Texto con marquee tipo scrool, con desplazamiento hacia abajo

Cambie la velocidad de desplazamiento:

<marquee behavior="scroll" direction="left" scrollamount="1">Velocidad 1</marquee>
<marquee behavior="scroll" direction="right" scrollamount="10">Velocidad 10</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Velocidad 20</marquee>
Velocidad 1 Velocidad 10 Velocidad 20

Desplazamiento Imágenes:

<marquee behavior="scroll" direction="left"><img src="../images/ArbolNavidad.gif" width="100" alt="smile" /></marquee>
smile

Imágenes, Texto y Salto a un vínculo (Ambos Desplazamiento):

<marquee behavior="scroll" direction="left">
<img src="../images/ArbolNavidad.gif" width="100" alt="smile" />
<p>Ejemplo de texto con imagen <a href="../images/ArbolNavidad.gif" width="100" height="100" > Ver imagen</a>.</p>
</marquee>
<marquee width="50%" height="60" align="bottom" direction="right" style="background:#ff0;">
Marquee ancho 50%, alto 60, alineación bottom, dirección right
</marquee>
smile

Ejemplo de texto con imagen Ver imagen.

Marquee ancho 50%, alto 60, alineación bottom, dirección right


Video Tutorial:



VIDEO 12. DIBUJANDO CON CANVAS.

VIDEO 12.DIBUJANDO CON CANVAS.










VIDEO 13. DIBUJANDO CON SVG.

VIDEO 13.DIBUJANDO CON SVG.










Probador de su código HTML, CSS, JavaScript, ... simplemente escriba y pulse en "Probar"

PRUEBE SU CÓDIGO HTML.
Introduzca el código a probar en el cuadro de texto inferior y pulse el botón "Probar"
Se abrirá una nueva página web en donde se ejecutará su código escrito.