Resumen
tema 2:
Elaboración
de páginas web con lenguajes de marcas:
2.1 Lenguaje HTML. Etiquetas y atributos:
El lenguaje HTML permite la
creación de páginas web. Los documentos HTML son interpretados por visores o
navegadores web. Las ventajas principales son que es compatible con cualquier
plataforma o sistema operativo que disponga de un navegador y que el lenguaje
podemos obtenerlo sin ningún problema el código fuente de cualquier documento
HTML que encontremos en Internet.
2.1.1 Versiones de HTML:
Es importante saber la versión
de HTML que se utilizara en la página. Cada vez que hagamos una página
indicaremos al navegador qué versión de HTML se usa, esto se hará en la primera
línea, donde aparece !DOCTYPE.
Los estándares HTML son: HTML
2.0, HTML 3.2, HTML 4.0 y HTML 4.01. Actualmente se está trabajando en el HTML
5. El HTML ya esta anticuado a favor del XHTML, aunque se sigan utilizando las
versiones del HTML 4.01. Las versiones son las siguientes:
·
HTML 4.01 Strict:
El estricto. Se usan solo las etiquetas de HTML
4.01.
·
HTML 4.01 Transitional: Una mezcla de todos los
HTML, en la que se aceptan las etiquetas obsoletas.
·
HTML 4.01 Frameset: Incluye lo del Transitional
y soporte para frames.
2.1.2 Normas de HTML:
Algunas consideraciones
importantes para la programación y sintaxis en HTML son:
·
Los documentos HTML son
documentos estructurados y organizados.
·
Los nombres de los elementos
o etiquetas no son sensibles a mayúsculas o minúsculas.
<HTML> es lo mismo
que <hTmL> lo mismo que <html>
·
Los nombres de los atributos
no son sensibles a mayúsculas o minúsculas.
<Font SIZE=2>es lo
mismo que <Font size=2> o <Font Size=2>
<H1 ALIGN=CENTER>
es lo mismo que <H1 align=CENTER> o <H1 AlingN=CENTER>
·
Los valores de los atributos
pueden ser sensibles a mayúsculas y minúsculas, especialmente si se refiere a
nombres de archivos.
<IMG
SRC=”nombrearchivo.gif”> Puede que no sea lo mismo que <IMG
SRC=”NOMBREARCHIVO.GIF>
·
Los nombres de las etiquetas
no deben contener espacios en blanco.
<IMG> no es lo
mismo que <I M G>
·
Los valores de los atributos
pueden contener espacios si van encerrados entre comillas.
<IMG
SRC=casa.gif ALT=”Mi casa
particular”>
<IMG
SRC=”Foto1-casa.gif” ALT=”Foto 1. Mi
casa particular”>
·
HTML asume cualquier número
de caracteres en blanco como un único carácter de espacio en blanco.
·
Las etiquetas que encierran
contenido se deben cerrar.
<h1> Contenido de
la cabecera </h1>
·
Las etiquetas pueden
ajuntarse.
<b><i> esto
va en Negrita y cursiva </i></b>
·
Los exploradores omiten
elementos desconocidos, tanto etiquetas como atributos.
2.1.3 Estructura básica de un documento HTML:
Los documentos HTML están
delimitados por las etiquetas <html> y </html>. Dentro del
documento se distinguen dos partes: la cabecera y el cuerpo <head>
</head> y <body> </body>.
La cabecera contiene la
identificación e información sobre el documento. El cuerpo contiene el
contenido del documento que se visualiza en la pantalla: texto, imágenes, etc.
Dentro de la cabecera se pone el titulo de la pagina web (<title>
</title>). Los archivos HTML tienen la extensión .htm o .html.
En el tipo de documento se debe
especificar a qué estándar HTML responde nuestra página. Se muestran a
continuación algunas declaraciones:
·
<!DOCTYPE HTML PUBLIC “-//IETF//DTD HTML//EN”>: Declara el documento para ser HTML 2.0. HTML 2.0 es soportado
extensamente por los navegadores.
·
<DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2 Final//EN”>: Declara el documento para ser HTML 3.2.
·
HTML 4.01, las versiones anteriores no
son recomendables debido a que no son del todo compatibles con las hojas de
estilo. Existen 3 tipos de DTD:
-
Transitional: Este tipo incluye todos
los elementos y cualidades de HTML 4 Strict pero agrega elementos obsoletos o
desaprobados.
<!DOCTYPE HTML
PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
-
Strict: Que indica que el código
es HTML 4.01 o XHTML estricto, sin incluir atributos y etiquetas en desuso.
Este es el modo recomendado por el consorcio W3C ya que es compatible con CSS y
puede ser interpretado correctamente por todos los navegadores.
-
Frameset: Que se utiliza cuando
estamos realizando una declaración de frames o frameset.
<!DOCTYPE HTML
PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
2.1.4 Formateo de texto:
Las siguientes tablas muestran las etiquetas necesarias para
obtener texto mas vistoso con cabecera, párrafos, lineas, acentos, negritas,
subrayado, colores, etc.
Etiquetas de cabeceras
|
Resultado
|
<h1> … </h1>
|
Cabecera de nivel 1
|
<h2> … </h2>
|
Cabecera de nivel 2
|
<h3> … </h3>
|
Cabecera de nivel 3
|
<h4> … </h4>
|
Cabecera de nivel 4
|
<h5> … </h5>
|
Cabecera de nivel 5
|
<h6> … </h6>
|
Cabecera de nivel 6
|
Etiquetas de texto
|
uso
|
<b>texto</b>
|
Para poner en negrita.
|
<i>texto</i>
|
Para poner en cursiva.
|
<tt>texto</tt>
|
Tipo de letra máquina de escribir.
|
<sup>texto</sup>
|
Para poner letra superíndice.
|
<sub>texto</sub>
|
Letra subíndice.
|
<big>texto</big>
|
Incrementa el tamaño del tipo de letra.
|
<small>texto</small>
|
Disminuye el tamaño del tipo de letra.
|
Etiquetas de párrafo
|
Uso
|
<p>párrafo</p>
|
Sirve para delimitar un párrafo.
|
<pre>Texto preformateado </pre
<pre width=”x”>Prefor. con ancho</pre>
|
Permite obtener texto preformateado.
|
<div align=”x”> … </div>
|
Crea una división en la pagina.
|
<address> … </address>
|
Para escribir direcciones de correo postal.
|
<blockquote>..</blockquote>
|
Justifica el texto que aparece entre las etiquetas.
|
<span> … </span>
|
Se usa para las hojas de estilo.
|
Otras Etiquetas
|
uso
|
<hr>
<hr> size=”tamaño”>
|
Inserta una barra horizontal.
|
<br>
|
Salto de línea.
|
<!-- … à
|
Comentarios.
|
align=”left”
|
Alinear texto a la izquierda.
|
align=”center”
|
Alinear texto al centro.
|
align=”right”
|
Alinear texto a la derecha.
|
Color y tamaño de texto-fuente
|
Uso
|
<font color=”código_color”> --- </font>
|
En código_color se escribe el código en hexadecimal o el
nombre.
|
<font size=”tamaño”> -------- </font>
|
Con size se especifica el tamaño.
|
<font face=”nombre_fuente”> --- </font>
|
Nombre de la fuente.
|
Para cambiar el color por defecto del texto de la pagina web se
añade el parámetro text a la etiqueta body: <body text=”Código de
color”>.
Para dar un color al fondo del documento se añade el parámetro
bgcolor a la etiqueta body: <body bgcolor=”Código de color”>.
Para definir el color de los enlaces de la pagina se utiliza
<body link=”Codigo_color”>. Para los enlaces activos <body alink=Codigo_color”>.
2.1.4 Formateo de texto:
Lista no numerada
|
Lista numerada
|
Lista de
definicion
|
<ul>
<li>elemento1
<li>elemento2
….
</ul>
|
<ol>
<li>elemento1
<li>elemento2
….
</ol>
|
Parejas de términos <dt> y sus definiciones <dd>
<dl>
<dt>termino1
<dd>def. del termino1
<dt>termino2
<dd>def. del termino2
…
</dl>
|
2.1.5 Enlaces, links o hipervínculos:
Los enlaces permiten ir a otra pagina web o a otra zona dentro
de la misma pagina web. Para incluir enlaces se utiliza la etiqueta <a>:
<a href=”dirección”>texto del enlace</a> y pueden ser:
·
Una pagina web del directorio donde se encuentran nuestras
paginas: <a href=”actividad2.html”>Actividad 2</a>.
·
O bien, otra zona dentro del mismo documento: <a
href=”#parrafo”>texto-enlace</a>; el párrafo debe aparecer anclado en
el documento <a name=”párrafo”>texto-ancla</a>.
2.1.6 Imágenes:
Para insertar una imagen en la pagina web se utiliza la etiqueta
<img>: <img src = “imagen”>, donde imagen es el nombre del archivo
que contiene la imagen.
Los formatos gráficos mas utilizados en los navegadores son GIF,
PNG y JPEG, que ocupan poco espacio y se cargan rápidamente.
También se puede utilizar una imagen dentro de un enlace, por
ejemplo: <a href= “ejemplo4.html”><img src=”dibujo.png”></a>.
Al hacer clic en la imagen se abre el archivo ejemplo4.html.
La etiqueta img admite los siguientes atributos:
Atributo
|
Uso
|
width=”ancho”
|
Especifica el ancho de la imagen
|
height=”alto”
|
Especifica el alto de la imagen
|
align=”alineación”
|
Especifica la alineación de la imagen, que puede ser: top
(arriba), bottom (abajo), left (izquierda), right (derecha), center
(centrado), etc.
|
alt=”comentario”, o title
|
Define un texto alternativo, que se vera si el ratón pasa por
la imagen o si el navegador no puede cargar la imagen.
|
Border=”tamaño”
|
Especifica el tamaño del borde de la imagen.
|
2.1.6 Tablas
Organiza la información en filas y columnas delimitadas por las
etiquetas: <table>……</table>. Dentro de la tabla cada fila esta
delimitada por: <tr>…</tr> y dentro de cada fila las columnas delimitadas por: <td>…</td>. Dentro de esas columnas de pueden
poner títulos con la etiqueta: <th>…</th>. Tiene los siguientes
atributos:
Atributos
|
Uso
|
Bgcolor=”color”
|
Color de fondo de la tabla, columna fila o celda.
|
Bordercolor=”color”
|
Color de borde de la tabla, fila, columna o celda.
|
Valign=”valor”
|
Alineación del contenido de la celda: top(arriba),
bottom(abajo) y middle(centrada).
|
Align=”left|center|right”
|
Alineación del texto.
|
Background=”imagenfondo”
|
Imagen de fondo de la tabla.
|
Cellpadding=”numero”
|
Espacio en pixeles entre los bordes y el texto de la celda.
|
Cellspacing=”numero”
|
Espacio entre los bordes en pixeles.
|
Height=”numero”
|
Altura d el atabla en porcentaje o pixeles.
|
Width=”numero”
|
Anchura de la tabla en porcentaje o pixeles.
|
Para agrupar varias filas o columnas se debe colocar dentro de
<th> y <td> los atributos:
·
Rowspan=”valor”, indica el numero de filas a combinar.
·
Colspan=”valor”, indica el numero de columnas a combinar.
2.1.8 Frames:
Permiten dividir el documento en varias zonas de forma que cada
una sea un HTML. Usan la etiqueta <frameset> dentro de body. Actualmente
se usa Iframes. Normalmente se usan para publicidad.
Atributos
|
Uso
|
Src=”enlace a abrir”
|
Se indica lo que se puiere abrir
|
Name=”nombre”
|
Nombre del frame
|
Frameborder=”borde”
|
Grosor del frame
|
Scrolling=”yes|no”
|
Barra de desplazamiento
|
Noresize
|
No permite el cambio de tamaño
|
Height=”alto”
|
Altura del marco
|
Width=”ancho”
|
Anchura del marco
|
2.1.9 Formularios:
Los formularios están formados por cajas de texto y los botones que permiten introducir datos,
realizar búsquedas, encuestas.... Los datos introducidos son enviados al correo
electrónico del administrador del formulario
, o bien a un programa que encargado de procesarlo. Usando las etiquetas
<from> y </from> con los siguientes atributos:
· Action="acción a
realizar"--> tipo de acción a llevar a cabo con el formulario.
· method="post" o
"get"-->Forma de enviar el formulario. Generalmente se usa post.
· enctype="text/plain"-->
Forma en la que viajara la información del formulario.
La mayoría de los
controles se crean con INPUT. Usan el atributo común NAME para dar nombre al
control, también es común el atributo ALIGN. Los controles son:
· CAJAS DE TEXTO <input
type="text" name="mitexto">
o
size -->Anchura de la caja de texto. Valor predeterminado 20.
o
maxlength -->Numero máximo de caracteres escritos en la caja
de texto.
o
value -->Texto escrito por defecto antes de escribir nada.
o
title -->bocadillo explicativo cuando el usuario pase el
curso por encima.
·
CAJAS DE TEXTO PARA CLAVES:
Para introducir
información oculta se realiza: type="password" en la etiqueta INPUT.
·
BOTONES DE ELECCION O RADIO BUTTONS:
Permite elegir
solo una opción entre un conjunto de ellas. Con el valor radio de la etiqueta
type <input type="radio"
name="nombre">
Por defecto están
sin marcar, peor si queremos que este marcada una por defecto se usara el atributo
CHECKED en la etiqueta INPUT
Para delimitar
los grupos se debe de incluir en el atributo NAME el mismo valor.
·
CAJAS DE SELECCION O CHECKBOX:
Permite elegir
varias opciones de una lista. Cada uno tiene un valor de name diferente con el
valor checkbox en el atributo type. <input type="checkbox"
name="mitexto">
·
BOTONES DE ENVIO:
Para crearlo
se usa el valor submit del atributo type. <input type="submit" value="enviar" name="enviar">
· BOTON DE BORRADO:
Borra los
datos actuales del formulario y restablece los valores premeditados. Este botón
se usa con type="reset"
·
BOTON GENERICO:
el botón
genérico no tiene función definida, re realiza con type="button"
Las acciones
se pueden indicar con lenguaje script. Para insertar un lenguaje se usa el
atributo onclick. <input type="button" value="texto boton" name="nombre">
·
ETIQUETA
<SELECT>.....</SELECT>
Define una entrada de datos en una lista desplegable con varias opciones
en las que el usuario puede elegir solo una opción.
El atributo name asigna el nombre de identificador al campo. Para
introducir los datos se usa la etiqueta <option> con las siguientes
opciones:
-
value.
fija el valor asociado a name cuando se envía a un formulario, este valor será único
-
selected.
Establece una opción por defecto
<select name="milista">
<option value="uno">Uno
<option value="dos">Dos
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/htm14/loose.dtd">
<option value="uno">Uno
<option value="dos">Dos
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/htm14/loose.dtd">
2. Lenguaje XHML
Es
un lenguaje de marcas más estricto y limpia que HTML. El XML es una reformulación
de HTML. Exige una serie de requisitos básicos en el código. Una estructuración
coherente dentro del documento. El XHML 1 tiene tres opciones:
·
Strict:
El más estricto. No puede contener frames, elementos y atributos en desuso
·
Transitional:
Se utiliza cuando no se describe la presentación de los documentos por
medio de CSS, sino a base de etiquetas
·
Frameset:
Es un DTD idéntico al Transitional, pero que permite utilizar frames en el
diseño
2.1 Principales diferencias entre el XHTML
y HML
·
Todos los
nombres de etiquetas y atributos van en minúsculas.
·
todos los
valores de los atributos van en comillas , incluso los números
·
Todos los
atributos deben tener un valor asignado
·
Todas las
etiquetas deben estar cerradas
·
Cerrar
las etiquetas vacías
·
En los
comentarios, solo habrá guiones dobles al final
