Programación en internet

MaTI.Jonathan Giovanni Soto Muñoz

3- Lenguaje de Marcado de Hipertexto (HTML).

1 - Tipos de Documentos con HTML/XHTML
2 - Elementos y Atributos
3 - Formato de contenido
4 - Capas
5 - Enlaces
6 - Imágenes
7 - Listas con HTML
8 - Formularios con HTML
9 - Metadatos con HTML
10 - Localizadores de Recursos Uniformes (URLs) con HTML

¿Dudas?

Lenguaje de marcado

Wikipedia el 6 de Agosto del 2007
"Un lenguaje de marcado o lenguaje de marcas es una forma de codificar un documento que, junto con el texto, incorpora etiquetas o marcas que contienen información adicional acerca de la estructura del texto o su presentación."
"El lenguaje de marcas más extendido es el HTML (HyperText Markup Language, lenguaje de marcado de hipertexto), fundamento del World Wide Web (entramado de comunicación de alcance mundial)."

XHTML semántico

HTML Y XHTML no son lo mismo..

XHTML trata de separar totalmente la forma del contenido, por ello ten en cuenta que en XHTML debes utilizar sólo las etiquetas y atributos que sirven para definir qué es cada cosa y no las que sirven para definir cómo se ha de ver cada cosa.

Las etiquetas deben estar bien anidadas

  • Correcto:
    <strong><em>Hola</em></strong>
  • Incorrecto:
    <em><strong>Hola</em></strong>

Todas las etiquetas se cierran

  • Correcto:
    <img> </img> o bien <img/> o bien <img />
  • Incorrecto:
    <br>

Todas las etiquetas y atributos van en minúscula

El lenguaje XML es sensible a mayúsculas y minúsculas, por ello para XML la etiqueta con las letras de su nombre o atributos en mayúsculas es distinta que las que van con ellas en minúsculas. Así pues, en XHTML se ha tomado la convención de escribirlo todo en minúsculas.

No se puede escribir contenido en el BODY sin meterlo en ninguna etiqueta

  • Correcto:
    <body><div>texto</div></body>
  • Incorrecto:
    <body>texto</body>

Todos los valores de los atributos deben ir entre comillas

Es indiferente usar comillas dobles o simples, pero estamos obligados a usarlas en los valores que asignamos a cualquier atributo de las etiquetas.

Todos los atributos deben tener valor

  • Correcto:
    <option selected="selected">loquesea</option>
  • Incorrecto:
    <option selected>loquesea</option>

No se deben insertar elementos block dentro de elementos inline

  • Correcto:
    <p>Pepe dijo: <em>Hola></em></p>
  • Incorrecto:
    <em>Pepe dijo: <p>Hola</p></em>

Los scripts y estilos deben colocarse en bloques CDATA

<script type="text/javascript">
<![CDATA[
//contenido del script sin que XML tenga que preocuparse por lo que haya dentro...
]]>
</script>

Conclusión

Con las anteriores reglas tendrás suficiente para comprobar que las diferencias entre HTML y XHTML son bastante sutiles. Algunas de ellas mínimas, pero no por ello menos importantes.

¿Dudas?

Estructura base de una pagina web

< !DOCTYPE html >
< html >
< head >
< title> </title >
< /head >
< body >
< /body >
< /html >

Elementos HTML

Además de etiquetas y atributos, HTML define el término elemento para referirse a las partes que componen los documentos HTML.

Aunque en ocasiones se habla de forma indistinta de "elementos" y "etiquetas", en realidad un elemento HTML es mucho más que una etiqueta, ya que está formado por:

  • Una etiqueta de apertura.
  • Cero o más atributos.
  • Texto encerrado por la etiqueta.
  • Una etiqueta de cierre.

Por tanto, si una página web tiene dos párrafos de texto, la página contiene dos elementos y cuatro etiquetas (dos etiquetas <p> de apertura y dos etiquetas </p> de cierre). De todas formas, aunque estrictamente no son lo mismo, es habitual intercambiar las palabras "elemento" y "etiqueta".

Etiquetas y atributos

a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var.

De todas las etiquetas disponibles, las siguientes se consideran obsoletas y no se pueden utilizar
applet, basefont, center, dir, font, isindex, menu, s, strike, u.

Contenedores

¿Dudas?

TEMAS

  • Texto
  • Enlaces
  • Listas
  • Imágenes
  • Tablas
  • Formularios

Texto

La mayor parte del contenido de las páginas HTML habituales está formado por texto, llegando a ser más del 90% del código de la página. Por este motivo, es muy importante conocer los elementos y etiquetas que define HTML para el manejo del texto.

Estructurar

La forma más sencilla de estructurar un texto consiste en separarlo por párrafos. Además, HTML permite incluir títulos que delimitan cada una de las secciones. 

<html>
 
<head>
<title>Ejemplo de texto estructurado con párrafos</title>
</head>
 
<body>
<p>Este es el texto que forma el primer párrafo de la página. 
Los párrafos pueden ocupar varias líneas y el navegador se encarga 
de ajustar su longitud al tamaño de la ventana.</p>
 
<p>El segundo párrafo de la página también se define encerrando 
su texto con la etiqueta p. El navegador también se encarga de 
separar automáticamente cada párrafo.</p>
</body>
 
</html>
<html>
 
<head>
<title>Ejemplo de texto estructurado con secciones</title>
</head>
 
<body>
<h1>Titular de la página</h1>
 
<p>Párrafo de introducción...</p>
 
<h2>La primera sub-sección</h2>
 
<p>Párrafo de contenido...</p>
 
<h2>Otra subsección</h2>
 
<p>Más párrafos de contenido...</p>
</body>
 
</html>

Marcado básico de texto

Una vez estructurado el texto en párrafos y secciones, el siguiente paso es el marcado de los elementos que componen el texto. Los textos habituales están formados por elementos como palabras en negrita o cursiva, anotaciones y correcciones, citas a otros documentos externos, etc. HTML proporciona varias etiquetas para marcar cada uno de los diferentes tipos de texto.

La etiqueta <em> marca un texto indicando que su importancia es mayor que la del resto del texto. La etiqueta <strong> indica que un determinado texto es de la mayor importancia dentro de la página. Ejemplo:

<html>
 
<head>
<title>Ejemplo de etiqueta em y strong</title>
</head>
 
<body>
<p>El lenguaje HTML permite marcar algunos segmentos de texto 
como <em>muy importantes</em> y otros segmentos como <strong>los 
más importantes</strong>.</p>
</body>
 
</html>

¿ Algún parecido ?

Ejercicio 1

Ejercicio 2

<html>
<head><title>Ejemplo de etiqueta ins y del</title></head>
<body>
 
<h3>Ejemplo de etiqueta ins y del</h3>
 
<p>El HTML, acrónimo inglés de Hyper Text Markup Language 
(lenguaje de <del datetime="20091025" 
cite="http://dscuabcs.net/jonathan/Materias/ProgramacionWeb/Clases/ThirdUnit.php"
>marcado de hipertexto</del> <ins datetime="20091026" cite=
"http://dscuabcs.net/jonathan/Materias/ProgramacionWeb/Clases/ThirdUnit.php"
> marcas hipertextuales
</ins>) es un lenguaje de marcación diseñado para estructurar textos
 y presentarlos en forma de hipertexto.<
 /p>
 
</body>
</html>
<html>
<head><title>Ejemplo de etiqueta blockquote</title></head>
 
<body>
<p>Según el W3C, el valor del 
atributo <em>cite</em> en las etiquetas <strong>blockquote</strong> tiene el 
siguiente significado:</p>
 
<blockquote cite="http://www.w3.org/TR/html401/struct/text.html">"El valor de este atributo 
es una dirección URL que indica el documento original de la cita."</blockquote>
</body>
 
</html>

Marcado avanzado de texto

Las páginas y documentos más avanzados suelen incluir otros elementos importantes que se deben marcar de forma adecuada. Por ello, HTML incluye muchas otras etiquetas que permiten marcar más elementos del texto. 

<html>
 
<head>
<title>Ejemplo de etiqueta acronym</title>
</head>
 
<body>
<p>El lenguaje <acronym title="HyperText Markup Language">HTML</acronym> es estandarizado 
por el <acronym title="World Wide Web Consortium">W3C</acronym>.</p>
</body>
 
</html>
<dfn>

Con estos síntomas, podría tratarse de un caso de sinestesia

<cite> - <blockquote>
Como dijo Mahatma Gandhi:
Vive como si fueras a morir mañana y aprende como si fueras a vivir para siempre.

Ejercicio 3

Espacios en blanco y nuevas líneas

El aspecto más sorprendente del lenguaje HTML cuando se desarrollan los primeros documentos es el tratamiento especial de los "espacios en blanco" del texto. HTML considera espacio en blanco a los espacios en blanco, los tabuladores, los retornos de carro y el carácter de nueva línea (ENTER o Intro) 

<html>
<head><title>Ejemplo de etiqueta p</title></head>
<body>
<p>Este primer párrafo no contiene saltos de línea ni otro tipo de espaciado.</p>
 
<p>Este segundo párrafo sí que contiene saltos
de
línea
y   otro   tipo   de   espaciado.</p>
</body>
</html>
<html>
 
<head>
<title>Ejemplo de etiqueta br</title>
</head>
 
<body>
<p>Este primer párrafo no contiene saltos de línea ni otro tipo de espaciado.</p>
 
<p>Este segundo párrafo sí que contiene saltos <br/>
de <br/>
línea <br/>
y   otro   tipo   de   espaciado.</p>
</body>
 
</html>
<html>
 
<head>
<title>Ejemplo de entidad &nbsp;</title>
</head>
 
<body>
<p>Este primer párrafo no contiene saltos de línea ni otro tipo de espaciado.</p>
 
<p>Este segundo párrafo sí que contiene saltos <br/>
de <br/>
línea <br/>
y &nbsp;&nbsp; otro &nbsp; tipo &nbsp; de &nbsp; espaciado.</p>
</body>
 
</html>

Ejercicio 4

<html>
<head><title>Ejemplo de etiqueta pre</title></head>
 
<body>
<pre>
        La etiqueta pre
   respeta los espacios en blanco
      y
 muestra el texto
     tal y como
   está escrito
</pre>
 
<p>
        La etiqueta pre
   respeta los espacios en blanco
      y
 muestra el texto
     tal y como
   está escrito
</p>
 
</body>
</html>
<html>
<head><title>Ejemplo de etiqueta code</title></head>
 
<body>
 
<code>
        La etiqueta code
   no respeta los espacios en blanco
</code>
 
<p>La etiqueta <code>code</code> es similar a la 
etiqueta <code>pre</code>, sobre todo en el formato 
del texto.</p>
 
</body>
</html>

Codificación de caracteres

Ejercicio 5

¿Dudas?

Enlaces

La incorporación del hipertexto fue una de las claves del éxito del lenguaje HTML, ya que permitió crear documentos interactivos que proporcionan información adicional cuando se solicita. El elemento principal del hipertexto es el "hiperenlace", también llamado "enlace web" o simplemente "enlace".

URL

Antes de empezar a crear enlaces, es necesario comprender y dominar el concepto de URL. El acrónimo URL (del inglés Uniform Resource Locator) hace referencia al identificador único de cada recurso disponible en Internet. Las URL son esenciales para crear los enlaces, pero también se utilizan en otros elementos HTML como las imágenes y los formularios.

La URL de un recurso tiene dos objetivos principales:

  • Identificar de forma única a ese recurso
  • Permitir localizar de forma eficiente ese recurso

En primer lugar, las URL permiten que cada página HTML publicada en Internet tenga un nombre único que permita diferenciarla de las demás. De esta forma es posible crear enlaces que apunten de forma inequívoca a una determinada página.

Si se accede a la página principal de Google, la dirección que muestra el navegador es:
http://www.google.com

Las partes que componen la URL anterior son:

  • Protocolo (http://): el mecanismo que debe utilizar el navegador para acceder a ese recurso. Todas las páginas web utilizan http://. Las páginas web seguras (por ejemplo las de los bancos y las de los servicios de email) utilizan https:// (se añade una letra s).
  • Servidor (www.dscuabcs.net): simplificando mucho su explicación, se trata del ordenador en el que se encuentra guardada la página que se quiere acceder. Los navegadores son capaces de obtener la dirección de cada servidor a partir de su nombre.
  • Ruta (/jonathan/): camino que se debe seguir, una vez que se ha llegado al servidor, para localizar el recurso específico que se quiere acceder.

La mayoría de URL son tan sencillas como la URL mostrada anteriormente. No obstante, existen URL complejas formadas por más partes.

http://www.alistapart.com/comments/webstandards2008?page=5#42

Las cinco partes que forman la URL anterior son:

  • Protocolo (http://)
  • Servidor (www.alistapart.com)
  • Ruta (/comments/webstandards2008)
  • Consulta (?page=5): información adicional necesaria para que el servidor localice correctamente el recurso que se quiere acceder. Siempre comienza con el carácter ? y contiene una sucesión de palabras separadas por = y &
  • ección (#42): permite que el navegador se posicione automáticamente en una sección de la página web. Siempre comienza con el caracter #

ejercicio 6

http://www.ejemplo.com/estaciones/oto%F1o.html

http://www.ejemplo.com/ruta/nombre%20p%E1gina.html

Enlaces básicos

Los enlaces en HTML se crean mediante la etiqueta <a> (su nombre viene del inglés "anchor", literalmente traducido como "ancla").

  • name = "texto" - Permite nombrar al enlace para que se pueda acceder desde otros enlaces
  • href = "url" - Indica la URL del recurso que se quiere enlazar
  • Se emplea para enlazar todo tipo de recursos

El atributo más importante de la etiqueta <a> es href, que se utiliza para indicar la URL a la que apunta el enlace. Cuando el usuario pincha sobre un enlace, el navegador se dirige a la URL del recurso indicado mediante href. Las URL de los enlaces pueden ser absolutas, relativas, internas y externas.

<a href="http://www.google.com">Página principal de Google</a>

Como el atributo href indica una URL, un enlace puede apuntar a cualquier tipo de recurso al que pueda acceder el navegador. El siguiente enlace apunta a una imagen, que se mostrará en el navegador cuando el usuario pinche sobre el enlace:

<a href="http://www.ejemplo.com/fondo_escritorio.jpg"> Imagen interesante para un fondo de escritorio</a>

De la misma forma, los enlaces pueden apuntar directamente a documentos PDF, Word, etc.

El otro atributo básico de la etiqueta es name, que permite definir enlaces dentro de una misma página web. Si una página es muy larga, puede ser útil mostrar enlaces de tipo "Saltar hasta la segunda sección", "Volver al principio de la página", etc. 
<a name="primera_seccion"></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Mauris id ligula eu felis adipiscing ultrices. Duis gravida leo ut lectus. 
 Praesent condimentum mattis ligula.</p>
 
...
 
<a name="segunda_seccion"></a>
<p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia a, 
convallis eu, nonummy et, odio. Aenean urna elit, ultrices id, placerat varius,
 facilisis eget, dolor.</p>
 
...
<!-- Enlace normal a la página -->
<a href="http://www.ejemplo.com/pagina1.html">Enlace a la página 1</a>
 
<!-- Enlace directo a la segunda sección de la página -->
<a href="http://www.ejemplo.com/pagina1.html#segunda_seccion">
Enlace a la sección 2 de la página 1</a>
<a name="inicio"></a>
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Mauris id ligula eu felis adipiscing ultrices. Duis gravida leo ut lectus. 
Praesent condimentum mattis ligula.</p>
<a href="#inicio">Volver al inicio de la página</a>
...
 
<p>Pellentesque malesuada. In in lacus. Phasellus erat erat, 
lacinia a, convallis eu, nonummy et, odio. Aenean urna elit, 
ultrices id, placerat varius, facilisis eget, dolor.</p>
<a href="#inicio">Volver al inicio de la página</a>
...

Ejercicio 7.

Otros tipos de enlaces

HTML define las etiquetas <script> y <link> para enlazar recursos que se deben cargar automáticamente. Cuando el navegador encuentra alguna de estas dos etiquetas, descarga los recursos enlazados y los aplica a la página web.

Imágenes

Las imágenes son uno de los elementos más importantes de las páginas web. De hecho, prácticamente todas las páginas web contienen alguna imagen y la mayoría incluyen decenas de imágenes. Dentro de las imágenes que se pueden incluir en una página HTML se deben distinguir dos tipos: las imágenes de contenido y las imágenes de adorno.

<img>

  • src = "url" - Indica la URL de la imagen que se muestra
  • alt = "texto" - Descripción corta de la imagen
  • longdesc = "url" - Indica una URL en la que puede encontrarse una descripción más detallada de la imagen
  • name = "texto" - Nombre del elemento imagen
  • height = "unidad_de_medida" - Indica la altura con la que se debe mostrar la imagen (no es obligatorio que coincida con la altura original de la imagen)
  • width = "unidad_de_medida" - Indica la anchura con la que se debe mostrar la imagen (no es obligatorio que coincida con la anchura original de la imagen)

Mapas de imagen

Aunque el uso de los mapas de imagen se ha reducido drásticamente en los últimos años, aún se utilizan en algunos sitios especializados. Muchas agencias de viaje y sitios relacionados utilizan mapas geográficos para seleccionar el destino del viaje. La mayoría de mapas se realiza hoy en día mediante FlashHTML5, aunque algunos sitios siguen recurriendo a los mapas de imagen.

Un mapa de imagen permite definir diferentes zonas "pinchables" dentro de una imagen. El usuario puede pinchar sobre cada una de las zonas definidas y cada una de ellas puede apuntar a una URL diferente. Siguiendo el ejemplo anterior, una sola imagen que muestre un mapa de todos los continentes puede definir una zona diferente para cada continente. De esta forma, el usuario puede pinchar sobre la zona correspondiente a cada continente para que el navegador muestre la página que contiene los viajes disponibles a ese destino.

<map> <area>

<img src="mapa_mundo.gif" usemap="#continentes" />
...
<map name="continentes">
  ...
</map>
<img src="imagen.gif" usemap="#mapa_zonas" />
 
<map name="mapa_zonas">
  <área shape="rect" coords="20,25,84,113" href="rectangulo.html" />
  <área shape="polygon" coords="90,25,162,26,163,96,89,25,90,24" href="triangulo.html" />
  <área shape="circle" coords="130,114,29" href="circulo.html" />
  <área shape="rect" coords="19,156,170,211" href="mailto:rectangulo@direccion.com" />
  <área shape="default" nohref="nohref" />
</map>

Listas

En ocasiones, es posible agrupar determinadas palabras o frases en un conjunto de elementos que tienen más significado de forma conjunta. El menú de navegación de un sitio web por ejemplo está formado por un grupo de palabras. Aunque cada palabra por separado tiene sentido, de forma conjunta constituyen el menú de navegación de la página, por lo que su significado conjunto es mayor que por separado.

Listas no ordenadas

Las listas no ordenadas son las más sencillas y las que más se utilizan. Una lista no ordenada es un conjunto de elementos relacionados entre sí pero para los que no se indica un orden o secuencia determinados. La etiqueta <ul> encierra todos los elementos de la lista y la etiqueta <li> cada uno de sus elementos.

<html>
<head><title>Ejemplo de etiqueta UL</title></head>
<body>
 
<h1>Menú</h1>
 
<ul>
  <li>Inicio</li>
  <li>Noticias</li>
  <li>Artículos</li>
  <li>Contacto</li>
</ul>
 
</body>
</html>

Listas ordenadas

Las listas ordenadas son casi idénticas a las listas no ordenadas, salvo que en este caso los elementos relacionados se muestran siguiendo un orden determinado. Cuando se crea por ejemplo una lista con las instrucciones de un producto, es importante el orden en el que se realiza cada paso. Cuando se muestra un índice o tabla de contenidos en un libro, es importante el orden de cada elemento del índice.

<html>
<head><title>Ejemplo de etiqueta OL</title></head>
<body>
 
<h1>Instrucciones</h1>
 
<ol>
  <li>Enchufar correctamente</li>
  <li>Comprobar conexiones</li>
  <li>Encender el aparato</li>
</ol>
 
</body>
</html>

Listas de definición

Las listas de definición apenas se utilizan en la mayoría de páginas HTML. Su funcionamiento es similar al de un diccionario, ya que cada elemento de la lista está formado por términos y definiciones. La etiqueta <dl> crea la lista de definición y las etiquetas <dt> y <dd> definen respectivamente el término y la descripción de cada elemento de la lista.

<html>
<head><title>Ejemplo de etiqueta DL</title></head>
<body>
<h1>Metalenguajes</h1>
 
<dl>
  <dt>SGML</dt>
  <dd>Metalenguaje para la definición de otros lenguajes de marcado</dd>
 
  <dt>XML</dt>
  <dd>Lenguaje basado en SGML y que se emplea para describir datos</dd>
 
  <dt>RSS</dt>
  <dt>GML</dt>
  <dt>XHTML</dt>
  <dt>SVG</dt>
  <dt>XUL</dt>
  <dd>Lenguajes derivados de XML para determinadas aplicaciones</dd>
</dl>
 
</body>
</html>
Ejercicio 8

Formularios

HTML es un lenguaje de marcado cuyo propósito principal consiste en estructurar los contenidos de los documentos y páginas web. Sin embargo, HTML también incluye elementos para crear aplicaciones web. El estándar HTML/XHTML permite crear formularios para que los usuarios interactúen con las aplicaciones web.

Formularios básicos

Los formularios más sencillos se pueden crear utilizando solamente dos etiquetas: <form> y <input>. Si se considera el formulario que muestra la siguiente imagen: 

<html>
<head><title>Ejemplo de formulario sencillo</title></head>
<body>
 
<h3>Formulario muy sencillo</h3>
 
<form action="" method="post">
  Escribe tu nombre:
  <input type="text" name="nombre" value="" />
 
  <br/>
 
  <input type="submit" value="Enviar" />
</form>
 
</body>
</html>
  • enctype = "application/x-www-form-urlencoded o multipart/form-data" - Tipo de codificación empleada al enviar el formulario al servidor (sólo se indica de forma explícita en los formularios que permiten adjuntar archivos)
  • accept = "tipo_de_contenido" - Lista separada por comas de todos los tipos de archivos aceptados por el servidor (sólo para los formularios que permiten adjuntar archivos)

La mayoría de formularios utilizan sólo los atributos action y method. El atributo action indica la URL de la aplicación del servidor que se encarga de procesar los datos introducidos por los usuarios. Esta aplicación también se encarga de generar la respuesta que muestra el navegador.

El atributo method establece la forma en la que se envian los datos del formulario al servidor. Este atributo hace referencia al método HTTP, por lo que no es algo propio de HTML. Los dos valores que se utilizan en los formularios son GET y POST. De esta forma, casi todos los formularios incluyen el atributo method="get" o el atributo method="post".

Al margen de otras diferencias técnicas, el método POST permite el envío de mucha más información que el método GET. En general, el método GET admite como máximo el envío de unos 500 bytes de información. La otra gran limitación del método GET es que no permite el envío de archivos adjuntos con el formulario. Además, los datos enviados mediante GET se ven en la barra de direcciones del navegador (se añaden al final de la URL de la página), mientras que los datos enviados mediante POST no se pueden ver tan fácilmente.

Elementos de formulario

Los elementos de formulario como botones y cuadros de texto también se denominan "campos de formulario" y "controles de formulario". La mayoría de controles se crean con la etiqueta <input>, por lo que su definición formal y su lista de atributos es muy extensa:

  • type = "text | password | checkbox | radio | submit | reset | file | hidden | image | button" - Indica el tipo de control que se incluye en el formulario
  • name = "texto" - Asigna un nombre al control (es imprescindible para que el servidor pueda procesar el formulario)
  • value = "texto" - Valor inicial del control
  • size = "unidad_de_medida" - Tamaño inicial del control (para los campos de texto y de password se refiere al número de caracteres, en el resto de controles se refiere a su tamaño en píxel)
  • maxlength = "numero" - Máximo número de caracteres para los controles de texto y de password
  • checked = "checked" - Para los controles checkbox y radiobutton permite indicar qué opción aparece preseleccionada
  • disabled = "disabled" - El control aparece deshabilitado y su valor no se envía al servidor junto con el resto de datos
  • readonly = "readonly" - El contenido del control no se puede modificar
  • src = "url" - Para el control que permite crear botones con imágenes, indica la URL de la imagen que se emplea como botón de formulario
  • alt = "texto" - Descripción del control

Cuadro de texto

Nombre <br/>
<input type="text" name="nombre" value="" />

name y value

Cuadro de contraseña

Contraseña <br/>
<input type="password" name="contrasena" value="" />

Checkbox

Puestos de trabajo buscados <br/>
<input name="puesto_directivo" type="checkbox" value="direccion"/> Dirección
<input name="puesto_tecnico" type="checkbox" value="técnico"/> Técnico
<input name="puesto_empleado" type="checkbox" value="empleado"/> Empleado
Puestos de trabajo buscados
Dirección Técnico Empleado

Radiobutton

<input type="checkbox" checked="checked" ... /> Checkbox seleccionado por defecto
Sexo
Hombre Mujer

Botón de envío de formulario

<input type="submit" name="buscar" value="Buscar" />

Botón de reseteo del formulario

<input type="reset" name="limpiar" value="Borrar datos del formulario" />

Ficheros adjuntos

<form action="..." method="post" enctype="multipart/form-data">
  ...
</form>

Campos ocultos

<input type="hidden" name="url_previa" value="/articulo/primero.html" />

Botón de imagen

<input type="image" name="enviar" src="accept.png"  />

Botón

<input type="button" name="guardar" value="Guardar Cambios" />
Ejercicio. 9

Formularios avanzados

Utilizando solamente las etiquetas <form> y <input> es posible diseñar la mayoría de formularios de las aplicaciones web. No obstante, HTML define algunos elementos adicionales para mejorar la estructura de los formularios creados.

La etiqueta <fieldset> agrupa campos del formulario y la etiqueta <legend> asigna un nombre a cada grupo.

<form action="maneja_formulario.php" method="post">
  <fieldset>
    <legend>Datos personales</legend>
    Nombre <br/>
    <input type="text" name="nombre" value="" />
    <br/>
    Apellidos <br/>
    <input type="text" name="apellidos" value="" />
    <br/>
    DNI <br/>
    <input type="text" name="dni" value="" size="10" maxlength="9" />
  </fieldset>
 
  <fieldset>
    <legend>Datos de conexión</legend>
    Nombre de usuario<br/>
    <input type="text" name="nombre" value="" maxlength="10" />
    <br/>
    Contraseña<br/>
    <input type="password" name="password" value="" maxlength="10" />
    <br/>
    Repite la contraseña<br/>
    <input type="password" name="password2" value="" maxlength="10" />
  </fieldset>
</form>
  • label
  • for = "id_de_elemento" 
<label for="nombre">Nombre</label> <br/>
<input type="text" id="nombre" name="nombre" value="" />
 
<label for="apellidos">Apellidos</label> <br/>
<input type="text" id="apellidos" name="apellidos" value="" />
 
<label for="dni">DNI</label> <br/>
<input type="text" id="dni" name="dni" value="" size="10" maxlength="9" />

Otros elementos de formulario

La etiqueta <input> permite crear diez tipos diferentes de controles de formulario. Sin embargo, algunas aplicaciones web utilizan otros elementos de formulario que no se pueden crear con <input>. Las listas deplegables y las áreas de texto disponen de sus propias etiquetas (<select> y <textarea> respectivamente).

<form action="insertar_producto.php" method="post">
 
<label for="nombre">Nombre del producto</label> <br/>
<input type="text" id="nombre" name="nombre" value="" />
 
<label for="descripcion">Descripción del producto</label> <br/>
<textarea id="descripcion" name="descripcion" cols="40" rows="5"></textarea>
 
</form>

Textarea

  • rows = "numero" - Número de filas de texto que mostrará el textarea
  • cols = "numero" - Número de caracteres que se muestran en cada fila del textarea
<label for="so">Sistema operativo</label> <br/>
<select id="so" name="so">
  <option value="" selected="selected">- selecciona -</option>
  <option value="windows">Windows</option>
  <option value="mac">Mac</option>
  <option value="linux">Linux</option>
  <option value="otro">Otro</option>
</select>
 
<label for="so2">Sistema operativo</label> <br/>
<select id="so2" name="so2" size="5">
  <option value="windows" selected="selected">Windows</option>
  <option value="mac">Mac</option>
  <option value="linux">Linux</option>
  <option value="otro">Otro</option>
</select>
 
<label for="so3">Sistema operativo</label> <br/>
<select id="so3" name="so3" size="5" multiple="multiple">
  <option value="windows" selected="selected">Windows</option>
  <option value="mac">Mac</option>
  <option value="linux">Linux</option>
  <option value="otro">Otro</option>
</select>

selcet

  • size = "numero" - Número de filas que se muestran de la lista (por defecto sólo se muestra una)
  • multiple = "multiple" - Si se incluye, se permite seleccionar más de un elemento

option

  • selected = "selected" - Indica si el elemento aparece seleccionado por defecto al cargarse la página
  • value = "texto" - El valor que se envía al servidor cuando el usuario elige esa opción
<label for="so">Sistema operativo</label> <br/>
<select id="so" name="so">
  <option value="" selected="selected">- selecciona -</option>
  <option value="windows">Windows</option>
  <option value="mac">Mac</option>
  <option value="linux">Linux</option>
  <option value="otro">Otro</option>
</select>

optgroup

  • label = "texto" - Texto que se muestra como título de la agrupación de opciones

Ejercicio 10

Ejercicio 11

¿Dudas?

Tablas

Desde sus primeras versiones, HTML incluyó el soporte para crear tablas de datos en las páginas web. Además de ser sencillo, el modelo definido por HTML es muy flexible y bastante completo.

Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que los que se utilizan en cualquier otro entorno de publicación de documentos:

Tablas básicas

Las tablas más sencillas de HTML se definen con tres etiquetas: <table> para crear la tabla, <tr> para crear cada fila y <td> para crear cada columna. 

 
<h1>Listado de cursos</h1>
 
<table>
<tr>
  <td><strong>Curso</strong></td>
  <td><strong>Horas</strong></td>
  <td><strong>Horario</strong></td>
</tr>
 
<tr>
  <td>CSS</td>
  <td>20</td>
  <td>16:00 - 20:00</td>
</tr>
 
<tr>
  <td>HTML</td>
  <td>20</td>
  <td>16:00 - 20:00</td>
</tr>
 
<tr>
  <td>Dreamweaver</td>
  <td>60</td>
  <td>16:00 - 20:00</td>
</tr>
</table>
 
 
</html>

La etiqueta <table> encierra todas las filas y columnas de la tabla. Las etiquetas <tr> (del inglés "table row") definen cada fila de la tabla y encierran todas las columnas. Por último, la etiqueta <td> (del inglés "table data cell") define cada una de las columnas de las filas, aunque realmente HTML no define columnas sino celdas de datos.

Ejercicio 12

<table>
<tr>
  <td colspan="2">A</td>
</tr>
 
<tr>
  <td>B</td>
  <td>C</td>
</tr>
</table>

Ejercicio 13