Lenguaje de Marcas-HTML

5/13/2018 Lenguaje de Marcas-HTML - slidepdf.com

http://slidepdf.com/reader/full/lenguaje-de-marcas-html 1/24

TEMA 1 - CARACTERÍSTICAS DE LOSLENGUAJES DE MARCAS

Conceptos básicos

Clasificación de los lenguajes de marcasOrigen de los lenguajes de marcasHtmlXmlCaracterísticas de los lenguajes de marcas

El lenguaje de marcas es una forma de codificar un documento. Incluye junto con eltexto etiquetas que contienen información adicional acerca de la estructura del texto o de surepresentación.

Un lenguaje de marcas no es un lenguaje de programación ya que no contienefunciones aritméticas ni variables. El lenguaje de marcas más extendido es html.

El lenguaje de marcas se utilizaba sobre todo para editar libros, que formabanplantillas de una serie de libros. WYSIWYG (What You See Is What You Get lo que ves es lo

que obtienes)Todo lenguaje de marcas contiene dos partes:- Metadatos o anotaciones: es información añadida al documento que no forma

parte del texto en sí mismo.

- Datos: es el texto que queremos publicar.

Por lo tanto, un lenguaje de marcas es un conjunto de reglas que describen cómodeben realizarse anotaciones, bajo qué condiciones se permiten y su significado. Ejemplo:

<Subrayado> Toledo </subrayado> a <cursiva> 30 de Septiembre </cursiva>

M

etadatos

Clasificación de lenguaje de marcas. Hay tres tipos:- De presentación: indica el formato del texto y añade información para el

maquetado.- De procedimientos: el lenguaje indica al software que lo trata los procedimientos

que debe realizar.- Descriptivo o semántico: describe las diferentes partes en las que ese estructura

un documento pero sin especificar cómo deben representarse.Evolución de los lenguajes de marcas.

En los años 60 IMB inventa un lenguaje llamado GML (lenguaje de marcasgeneralizado): con este lenguaje de texto se escribe en términos de párrafo, listas tablas, etc.

liberando al creador del documento de preocupaciones como: especificar el tamaño de lafuente, indicar el espacio entre líneas, etc.

Con este lenguaje se puede ajustar el documento automáticamente para variosdispositivos simplemente especificando qué dispositivo va a utilizar el documento. Antes deGML cada dispositivo utilizaba sus propias marcas.

GML HTML

ISO SGML RTF



ISO es una organización internacional de standerizado: es decir se dedica a hacerestándar algunos productos.

SGML es un metalenguaje1 que permite definir lenguajes de marcado. Especifica lasintaxis para la inclusión de marcas en los textos y la sintaxis del propio documento, yespecifica qué etiquetas están permitidas y dónde.

Ventajas del SGML:- reutilización de los datos

- portabilidad- perdurabilidad

Inconvenientes:

- alta complejidad

HTML (lenguaje de marcado de hipertexto): es un lenguaje de marcado definido apartir de SGML. Es un código de etiquetas que no es estándar y reacciona de distinta formacon unos navegadores u otros. Su origen fue en 1989 en el Laboratorio Europeo de física dePartículas (CERN). Su objetivo inicial fue presentar información estática (que no se actualiza).Es fundamental para el crecimiento de internet. Limitaciones:

-

tratamiento de información dinámica.- No es un metalenguaje, por lo que dispone de un número fijo de etiquetas.- Su vocabulario es muy l imitado.

Ventajas:- Es simple, sencillo de aprender y usar.- No requiere herramientas espaciales.- Está muy difundido.

Inconvenientes:- Carece de chequeo sintáctico (no distingue los errores, no analiza la sintaxis del

código)- Carece de estructura lógica (no tiene un orden predefinido)- Orientado a la representación de datos, no a la estructura ()- Carece de semántica estándar- No es extensible- No permite la reutilización de códigoXML (Extensible Markup Language) surge como respuesta al desorden que supuso el

rápido crecimiento del HTML. Forma restringida de SGML optimizada para su utilización enInternet. Su origen fue en 1996 World Wide Web Consorium (3WC). Los objetivos inicialeseran:

- Crear un lenguaje estructurado, extensible y que se pueda validar.- Permitir la transmisión de información realmente estructurada.

Al tratarse de un metalenguaje tiene un vocabulario extensible:- Puede definir lenguajes de marcado por medio de DTDs (Document Type

Definition) o de XML-Schemas- Sirve para representar datos estructurados en un fichero de texto- Usa etiquetas para delimitar datos, pero deja su interpretación a la aplicación que

lee el código XML.CARACTERÍSTICAS DE LOS LENGUAJES DE MARCAS

Texto plano: archivos compuestos por texto sin formato, sólo caracteres, codificadosen ASCII, Unicode, etc. Puede ser interpretado directamente, no es un archivo binario que

1 Metalenguaje: es un lenguaje que se utiliza para hacer referencia a otros lenguajes. Es un lenguaje

utilizado para describir a otro lenguaje.



necesite software específico. Independientes de la plataforma o sistema operativo. Por estotienen tanta aceptación:

- Compacidad o compactación: las instrucciones de marcado se entremezclan con elpropio contenido en un único archivo o flujo de datos.

- Facilidad de procesamiento: antes, cada organización empleaba un lenguajeespecífico para cada industria concreta.

- Flexibilidad: originariamente eran para texto, pero ya se emplean para gráficos

vectoriales, sindicación web, servicios web, etc. Permiten combinar varioslenguajes de marcasen un archivo.http://sites.google.com/site/ticjulioverne/ldem

UNIDAD 2 HTML

INTRODUCCIÓNEl sistema con el que está construida la web se llama hipertexto y es un entramado de

páginas conectadas con enlaces.Los sistemas de hipertexto se utilizan en otros contextos a parte de la web, como la

ayuda de Windows.Son muy fáciles de utilizar y también es muy fácil encontrar lo que buscamos

rápidamente gracias a que pulsando enlaces vamos accediendo a la información que más nosinteresa.

La web no sólo se limita a mostrar textos y enlaces, sino que también puede ofrecerimágenes, video, sonido y todo tipo de presentaciones, llegando a ser el servicio más rico enmedios que tiene Internet.

Una página web la vemos en nuestro navegados y parece una sola entidad, pero no esasí, está compuesta por multitud de diferentes ficheros, como son las imágenes, los videos,sonidos

ELEMENTOS DEL DOCUMENTO WEBEn una página web va a ver datos y etiquetas. Mediante las etiquetas crearemos la

estructura lógica del documento, definiendo párrafos, títulos, etc.Además, mediante las etiquetas podremos dar formato a la estructura lógica, por

ejemplo: poniendo párrafos en negrita, subrayando datos, etc.Una etiqueta está formada por una o varias palabras reservadas (palabras que tienten

un significado especial en el lenguaje)Dentro del documento HTML una palabra reservada es aquella que se encuentra

encerrada entre los símbolos < >.Gracias a estas palabras es posible conocer las características o formatos de los

elementos.Tipos de etiquetas:- De inicio o apertura: declararan las características o formatos del elemento

<etiqueta>.- De fin o cierre: indica al navegador que la acción desarrollada por la etiqueta de

inicio se termina.

Ejemplo: escribir algo en negrita <b> Este texto se escribirá en negrita</b>No todas las etiquetas del lenguaje tienen etiquetas de fin, ya que hay diferentes tipos:- Etiquetas de apertura y cierre. Las anteriores que sí tienen de fin.- Etiquetas solo de apertura. El efecto se producirá en un punto determinado- Etiquetas de cierre opcional (siempre cerrarlo): pueden tener cierre o no.Cada etiqueta que nosotros abramos tendrá un ámbito de acción. Si una etiqueta se

abre en un orden determinado, se debe cerrar en el orden inverso para que las primerasengloben a las siguientes. Ejemplo:<e1>



<e2><e3></e3>

</e2></e1>

(puntúa tabulación, minúsculas y que se cierren en orden inverso)ATRIBUTOS

Son parámetros que harán que los efectos que producen las etiquetas varíen, ya seaen colores, alineación, etc. Modifican las etiquetas de inicio.Están formados por el nombre del atributo, que es una palabra reservada, el signo =

y el valor que toma entre comillas.Ejemplo:<e1 atr1=v2 atr2=v1>elemento afectado</e1>A cada atributo solo se le puede asignar un valor en caso contrario el resultado será

imprevisible. Ejemplo: <e1 atr1=v2 atr1=v1>elemento afectado</e1>ESTRUCTURA DE UN DOCUMENTO WEB

<html><head> (inicio de cabecera)Etiquetas y contenidos del encabezadoDatos que no aparecen en nuestra pagina pero que son importantes para

catalogarla: Titulo,palabras clave,...

<title> (obligatoria, establece el título del documento)</title>

</head>

<body>

Etiquetas y contenidos del cuerpoParte del documento que sera mostrada por el navegador: Texto e imagenes</body>

</html>

Dentro de la cabezera tenemos otras etiquetas:<meta> permite introducir en la página web un refresco automático a una determinada

dirección en el número de segundos que se especifique. Una posible utilidad de esta etiquetapodría ser visualizar documentos de forma secuencial. A través de esta etiqueta puedenespecificarse los atributos name y content. El atributo name indica el tipo de información,y el atributo content indica el valor de dicha información.Por ejemplo, el siguiente código indica que el autor de la página es aulaclic, que la página tratasobre un curso de HTML gratuito, y especifica algunas palabras clave a ser consultadas por losbuscadores:

<html> <head> ... <meta name="author" content="aulaclic" > <meta

name="description"

content="Curso de HTML gratuito" >

<meta name="keywords" content="código HTML etiqueta página web gratis curso" > </head> ...

La etiqueta <meta> también se utiliza para indicarle al navegador algunainformación o alguna acción que debe realizar. En este caso se utiliza el atributo http-equiv,en lugar del atributo name.



Por ejemplo, imaginemos que por algún motivo queremos que nuestra página seactualice automáticamente cada 30 segundos. En ese caso, deberíamos utilizar la acciónR efresh (actualizar). Podríamos utilizar el siguiente código: <html> <head> ... <meta http-equiv="Refresh" content="30" > </head> ...

Ahora imaginemos que hemos cambiado la dirección en la que se encuentranuestra página web, y queremos que cuando algún usuario visite la página en ladirección antigua, a los 5 segundos el navegador lo redirija automáticamente a ladirección nueva. En ese caso podríamos insertar el siguiente código en la páginaque se encuentra en la dirección antigua:<html> <head> ... <meta http-equiv="Refresh" content="5; URL=http://www.aulaclic.com/index.htm" > </head>

... De este modo, el navegador realizaría la función de actualizar la página, pero cargando

la que se encontrara en la nueva dirección

<BODY>

text: este atributo sirve para asignar el color del texto de la pagina. Por defecto es el negro.Además del color del texto, tenemos tres atributos para asignar el color de los enlaces de lapágina.

Ya debemos saber que los enlaces deben diferenciarse del resto del texto de la paginapara que los usuarios puedan identificarlos fácilmente. Para ello suelen aparecer subrayados y

con un color más vivo que el texto. Los tres atributos son los siguientes:link: el color de los enlaces que no han sido visitados. (por defecto es azul clarito)vlink: el color de los enlaces visitadnos. La "v" viene justamente de la palabra visitado. Es elcolor que tendrán los enlaces que ya hemos visitado. Por defecto su color es morado. Estecolor debería ser un poco menos vivo que el color de los enlaces normales.alink: es el color de los enlaces activos. Un enlace esta activo en el preciso instante que sepulsa. A veces es difícil darse cuenta cuando un enlace esta activo porque en el momento en elque se activa es porque lo estamos pulsando y en ese caso el navegador abandonara la paginarápidamente y no podremos ver el enlace activo más que por unos instantes mínimos.

Márgenes

Con otros atributos de la etiqueta <body> se pueden asignan espacios de margen enlas paginas, lo que es muy util para eliminar los márgenes en blanco que aparecen a los lados,arriba y debajo de la pagina. Estos atributos son distintos para Internet Explorer y paraNetscape Navigator, por lo que debemos utilizarlos todos si queremos que todos losnavegadores los interpreten perfectamente.leftmargin: para indicar el margen a los lados de la pagina. Valido para iexplorer.topmargin: para indicar el margen arriba y debajo de la pagina. Para iexplorer.marginwidth: la contrapartida de leftmargin para Netscape. (Margen a los lados)marginheight: igual que topmargin, pero para Netscape. (Margen arriba y abajo)



<MARQ UEE>

Es una de esas etiquetas no estándar de HTML, que soportan los navegadores máscomunes, pero que no están comprendidas dentro de las especificaciones de HTML. Sirve paraanimar elementos dentro de la página. En concreto permite que el contenido que pongamosdentro de la etiqueta, ya sea texto, fotografías, o las dos cosas, se desplace horizontalmentepor la página.

Para utilizar marquee, simplemente colocamos dentro de la etiqueta los contenidos

que queremos que se muevan, ya sean texto, imágenes o cualquier otro tipo de contenido.Algo como esto:

<marquee>texto que se mueve</marquee> Marquee soporta una serie de atributos para modificar su comportamiento o su

aspecto. Son los siguientes:ALIGN

Este atributo nos indicará si el texto dentro de la etiqueta se alineará en la zona altadel marquee ("top"), en el medio ("middle") o en la parte baja ("bottom").WIDTH

Anchura de la marquesina. Si no marcamos altura, se colocará en la siguiente línea,como en un párrafo distinto. Si marcamos una anchura, la marquesina intentará mostrarse enla misma línea donde la hayamos colocado. Si no hay espacio para ella se realizará el

consiguiente salto de línea para mostrarla un poco más abajo.DIRECTION

Hacia donde queremos que se displace el contenido del marquee. Los posibles valoresson "LEFT" y "RIGHT".BEHAVIOR

- SCROLL (el comportamiento por defecto) indica que tiene que hacer el desplazamientosiempre en una misma dirección

- ALTERNATE, que indica que el desplazamiento se hace a un lado y al otro de maneraalternada.

- SLIDE indica que se mueve hacia el final de la página, en el mismo sentido que ladirección, y se detiene

SCROLLDELAY Es el tiempo en milisegundos que tiene que pasar entre cada cambio de la posición de

lo que hay desplazándose. Es decir, cuanto mayor sea el valor, más milisegundos tardará lamarquesina en moverse. El valor por defecto es 85, pero si por ejemplo ponemos un valor 500la marquesina cambiará de estado (desplazará el contenido) cada medio segundo.SCROLLAMOUNT

Es la cantidad de pixel que tiene que desplazarse el contenido de la marquesina cadavez que se mueve. A mayor scrollamount, más se desplazará la marquesina en cadamovimiento y por tanto la animación será más rápida. El valor por defecto es 6. Podemosprobar a colocar un valor mayor y veremos que el movimiento será más "a golpes".LOOP

El número de ciclos que va a moverse el texto o lo que quiera que haya dentro de la

marquee. Este atributo sólo funciona en Internet Explorer. Por defecto es INFINITE, que quieredecir que se desplazará todo el tiempo sin parar. Pero si por ejemplo colocamos un valor como3, querrá decir que la marquesina sólo realizará tres ciclos o movimientos y luego parará.BGCOLOR

El color de fondo de la marquesina. Acepta el nombre de un color HTML o bien unvalor RGB de dicho color.HSPACE y VSPACE

Estos dos atributos sirven para definir el número de píxel que debe aparecer entre lamarquesina y otros contenidos de la página, en horizontal y vertical.



Algunos ejemplos de marquee:

< marquee width=200 direction=right>Marquesina a la derecha y con ancho< /marquee>

< marquee behaviour=alternate scrolldelay=500 bgcolor="#ff8833">texto que se

mueve</marquee>

Inclusión de espacios en blanco: La etiqueta <hr> (no tiene fin) (horizontal rule) nos permite insertar una línea

horizontal, cuyo tamaño podremos determinar a través de sus atributos:- Color=nombre- Align=left/center/right- Size=n (grosor de la línea en píxels)- Width=n/ n% (ancho de la línea en píxesl)

No sirve para hacer líneas horizontales. Para ello: alt Gr + 1 = |La etiqueta <Pre> nos permitirá visualizar el texto tal y como se ha escrito respetando

los saltos de línea, las tabulaciones y espacios en blanco. No es recomendable su uso (no

utilizar)Los recursos básico del lenguaje HTML no me permiten hacer que un fragmento detexto presente a un tamaño de 72 píxeles. Solo es hasta 7.

Respecto a la etiqueta <title>index</title>: el texto index no aparecerá en el cuerpode la página salvo que esté incluido expresamente entre las etiquetas <body></body>Para añadir un comentario que no sale en el navegador <!-± escribe tu comentario -- >El menor que, el símbolo de exclamación y los guiones deben ir juntos (sin espacios), al igualque los guiones finales y el mayor que.

Las cabeceras <h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6> también

tienen el atributo align.

Para pasar de línea <br> </br>(no hace falta cerrar)

<Font color=#ff 00 00 size=n (1-7) ó +/- n face=calibri> escribe texto </Font> (el

tamaño de texto predeterminado siempre es 3)

http://html-color-codes.info/codigos-de-colores-hexadecimales/

http://www.usuarios.sion.com/pauluk/coloreshtml.htm

El enlace se puede hacer hacia:

- documento .html- para poner un enlace desde un documento de una subcarpeta a otro documento de la

carpeta principal: ../doc_carpeta_principal.html



Para establecer un vínculo desde tienda.htm a consultas.htm (ambos en la misma carpeta) laruta relativa será solamente el nombre de archivo: consultas.htm Para establecer un vínculo desde tienda.htm a registro.htm (situada en la subcarpeta llamadaclientes) la ruta relativa será: clientes/registro.htm Cada barra diagonal supone un nivel por debajo en la jerarquía de carpetas.Para establecer un vínculo desde tienda.htm a la página principal index.htm (en la carpetapadre, un nivel por encima de tienda.htm) la ruta relativa será: ../index.htm Cada ../ supone un nivel por encima en la jerarquía de carpetas.Para establecer un vínculo desde tienda.htm a la página principal catalogo.htm (en otrasubcarpeta distinta) la ruta relativa será: ../productos/catalogo.htm ../ sube un nivel, y productos/ baja a la subcarpeta productos.

- una imagen (<a href="url a la que se accede"><img src=url></a>)- otra página web (<a href="http://www.google.es/">Google</a>)- correo electrónico (<a

href="mailto:[email protected]">[email protected]</a>)un atributo de los enlaces es target=_blank que hace que se abra la página en una nuevapestaña: (<a href="url a la que se accede" target=_blank><img src=url></a>)

Anclas, permiten marcar distintas zonas del documento con el objetivo de tener un accesodirecto a las mismas. Bueno para la creación de índices:

1. marcar las distintas secciones del documento. Esto lo haremos con el parámetroname: <a name=identificación de selección(sin ningún carácter especial: espacios,tildes, eñes)></a>. ej: <a name=fundamentoshardware><h3>Fundamentos delHardware</h3></a>

2. colocar en el índice el enlace: <a href="#fundamentoshardware">Ir a Fundamentos delHardware</a>)

ELEMENTOS MULTIMEDIA Añadir imagen a Web: <img src(fuente, lugar donde se encuentra la imagen)=(imagen)> sirvepara poner una imagen en la Web. No necesita ser cerrada. Para modificar sus parámetros:

- height (alto de la imagen)- width (ancho de la imagen)- border (borde de la imagen)- alt (comentario, información que aparece cuando ponemos el cursor encima de la

imagen.)- hspace=margen horizontal- vspace=margen vertical



- align="top/middle/buttom/right/left"añadir sonido a página web: <bgsound src=fichero loop=n/infinite>: c

- con el argumento src especificaremos el archivo a reproducir (.waw o .mid [el archivo.mp3 es complicado de que se reproduzca en todos los navegadores])

- con el argumento loop indicaremos el número que se repite (n). sin indicamosloop=infinite se repite hasta que se cierre la página.

Añadir videos: <img dynsrc=fichero de video loop=n/infinite start=fileopen/mouseover>

- con ella podemos reprodur videos en .avi o .mpg- con el argumento dynsrc especificaremos el fichero a reproducir- el argumento loop dice el número de veces que lo repite o puede ser infinite- el argumento start indicaremos si la secuencia de video empezará al abrir el fichero

(fileopen) o cuando el cursor del ratón esté encima (mouseover)Otra forma de añadir video u otros archivos: <embed src="v arios/cotorra.av i " autostart="false" loop="true" width=(n/n%) height=(n/n%)>

No se cierra la etiqueta.Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.

También podemos añadir sonidos, imágenes, etc.Los videos insertados a través de esta etiqueta se reproducen automáticamente al

cargarse la página, y se reproducen solamente una vez. Esto puede cambiarse a través de los

atributos autostart y loop.- A través del atributo src hay que especificar la ruta y el nombre del archivo de vídeo.- El atributo autostart indica si el archivo se reproducirá automáticamente al cargarse la

página, y puede tomar los valores true o false. Si ponemos false el archivo se puedereproducir a través de los controles.

- El atributo loop indica si el archivo se reproducirá continuamente en un bucle, ytambién puede tomar los valores true o false.

- Los atributos width (anchura) y height (altura) sirven para especificar el tamaño de laconsola de control de vídeo. Estos atributos pueden tomar como valor un número, queindica el tamaño en píxeles. Si no se especifican estos atributos, la consola de controlde vídeo se mostrará con el tamaño más adecuado al tamaño del vídeo.

LISTAS <ol></ol> para listas numeradas.<lh> </lh> para definir el título de la lista.<li></li> Para cada uno de los elementos No hace falta cerrarla

<ol start=n type=tipo de lista><lh>Tí tulo de la lista</lh>

<li>Elemento 1<li>Elemento 2.<li>Elemento n

</ol>

<ol>Start= para definir porque numero empieza la lista, se pone con numero.Type=1=numéricamente (1,2,3..)a=Letras minúsculas (a,b,c,d)A=Letras mayúsculas (A,B,C)

i=Números romanos minúsculas.I=Números romanos mayúsculas.



Listas sin numerarComando ul.<ul type=disc/circlesquare><lh>título de la lista </lh>

<li> Elemento 1<li> Elemento 2.

<li> Elemento n</ul>

Con ul indico que empieza la lista,Con Type disc= un punto relleno

Square=un cuadradoCircle=Circulo sin rellenar

Listas de definición.<dl>

<lh>título de la lista</lh><dt>Término 1

<dd>Definición 1

<dt>Termino <dd>Definición 2

<dt>Término n

<dd>Definición n<dl>

Listas de Menú <menu></menu> y los elementos se anteceden con <li>: el resultadoes una lista sin numerar más compacta, es decir, con menos espacio interlineal entre loselementos, aún así son similares a las listas no numeradas de tipo disc.

Las listas de Directorio utiliza la directiva <dir></dir> y los elementos se anteceden con<li>. Los elementos tienen un límite de 20 caracteres.

TABLAS Para empezar, nada mas sencillo que por el principio: las tablas sondefinidas por las etiquetas <table> y </table>.

(no hace falta cerrar <td> <tr>)Para poner una tabla en medio: <center> ó <p align> (también sirve para

cualquier otro lugar)Las tablas son descritas por líneas de izquierda a derecha. Cada una de

estas líneas es definida por otra etiqueta y su cierre: <tr> y </tr>Asimismo, dentro de cada línea, habrá diferentes celdas. Cada una de estas

celdas será definida por otro par de etiquetas: <td> y </td>. Dentro de estasetiquetas será donde coloquemos nuestro contenido.

<table>

<tr> fila<th>celdas cabezera</th><td>celda normal</td>

</tr></table>



Ejemplo:<table><tr>e<td>Celda 1, linea 1</td><td> Celda 2, linea 1</td></tr><tr><td> Celda 1, linea 2</td>

<td> Celda 2, linea 2</td></tr></table>

El resultado:Celda 1, linea 1 Celda 2, linea 1Celda 1, linea 2 Celda 2, linea 2

<table border=ń´ cellpadding=ń´ cellspacing=ń´ width=ń ó %´ height=ń ó %´ bgcolor=´´ >

align Alinea horizontalmente la tabla con respecto a su entorno.background Nos permite colocar un fondo para la tabla a partir de un enlace a una

imagen.bgcolor Da color de fondo a la tabla.border Define el numero de pixels del borde principal.bordercolor Define el color del borde.cellpadding Define, en pixels, el espacio entre los bordes de la celda y el contenido dela misma.cellspacing Define el espacio entre los bordes (en pixels).height Define la altura de la tabla en pixels o porcentaje.width Define la anchura de la tabla en pixels o porcentaje.

Atributos par a <tr> y <td>

align Justifica el texto de la celda del mismo modo que si fuese el de un párrafo.(left/center/right)valign Podemos elegir si queremos que el texto aparezca arriba (top), en el centro(middle) o abajo (bottom) de la celda.bgcolor Da color a la celda o línea elegida.bordercolor Define el color del borde.



<td> ó <th> Atributo que solo se puede asignar auna celda y no a un conjunto de ellas:

align Justifica el texto de la celda del mismo modo que si fuese el de un párrafo.(left/center/right/justify)background Nos permite colocar un fondo para la celda a partir de un enlace a unaimagen. Background=imagen.jpgheight Define la altura de la celda en pixels o porcentaje.width Define la anchura de la celda en pixels o porcentaje.colspan Expande una celda horizontalmente.rowspan Expande una celda verticalmente.

FORMULARIOS <form action=url del programa que trata el formulario ó dirección de correomethod=post/get name=texto> </form>Action:

y El formulario es enviado a una dirección de correo electrónico <formaction="mailto:[email protected]" ...>

y El formulario es enviado a un programa o script que procesa su contenidoMethod: Este atributo se encarga de especificar la forma en la que el formulario es enviado.

Los dos valores posibles que puede tomar este atributo son post y get. A efectos prácticosy, salvo que se os diga lo contrario, daremos siempre el valor post.

- Post: produce la modificación del documento de destino (como en el caso de enviarpor correo las variables)

- Get: no produce cambios en el documento de destino (con en el caso de una consultaa una base de datos, por ejemplo una página de búsqueda en internet)

[Enctype: Indica la forma en la que viajará la información que se mande por el formulario. En

el caso más corriente, enviar el formulario por correo electrónico, el valor de este atributodebe de ser "text/plain". Así conseguimos que se envíe el contenido del formulario como textoplano dentro del email.Si queremos que el formulario se procese automáticamente por un programa, generalmenteno utilizaremos este atributo, de modo que tome su valor por defecto, es decir, no incluiremos

enctype dentro de la etiqueta <form>]Name: sirve para asignar un nombre al formulario con el podremos referir si utilizamos algunafunción JavaScript que necesite algo de ese formulario (por ejemplo, antes de enviar unformulario, una función que compruebe si los campos necesarios necesarios están rellenos ynotifique un error si falta alguno) dentro de un formulario podemos incluir cualquier texto oinstrucción HTML.

ENTRADA BÁSICA DE DATOS Elementos del formulario o camposINPUT

<input type=text/password/checkbox/radio/hidden/submit/image/reset name=variablevalue=valor inicial>

Name: este name especifica el nombre de la variable que tomará el valor introducido en elcampo. Es como dar un nombre a una variable, cada elemento o campo: ejemplo, el huecodonde esperas que te pongan el apellido le asignamos el nombre de variable apellido.Value: especifica el valor por defecto que tendrá el campo.Type: determinará el tipo de campo de entrada que estamos insertando:

- Text: <input type=text name=variable value=valor de inicializaciónsize=tamaño maxlength=longitud máxima > pone un cuadro de texto donde sepueden añadir los siguientes atributos:

o Size=tamaño (tamaño de la ventana de introducción de texto)



o Maxlength=longitud máxima (nº máximo de caracteres a introducir en elcampo)

o Value=valor de inicialización (nos da una idea que puede ayudar al usuario arellenar el formulario ejemplo: escribe tu comentario)

- Password: <input type=password name=variable value=valor de inicializaciónsize=tamaño maxlength=longitud máxima> indicamos que el campo a introducirserá una palabra clave, por lo que los caracteres que se introduzcan serán sustituidos

por asteriscos en la visualización de la pantalla.- Checkbox: Este tipo de elementos pueden ser activados o desactivados por el visitantepor un simple clic sobre la caja en cuestión (warning! Si hay más cajas: en name ponersiempre el mismo tema, como si fuese una lista, y en value poner qué es cada cosa. EJ:TEMA: AFICCIONES<input type="checkbox" name="aficción1" value=pesca>Pesca<input type="checkbox" name="aficción2" value=caza> Caza<input type="checkbox" name="aficción3" value=No tengo> No tengoLo que al final se envía a nuestro correo es, si clickamos en aficción2: aficción2=caza)La sintaxis utilizada es muy similar a las vistas anteriormente: <input type="checkbox"name="paella">Me gusta la paellaEl efecto:

- Radio: para plantear una elección. Obligamos al internauta a elegir únicamente una delas opciones que se le proponen <input type="radio" name="variable"value="nombre/valor"> (warning! En name hay que poner siempre la mismavariable; en Value poner lo que se va a enviar; lo que nos llega al correo es:estación=ver). Ejemplo:<input type="radio" name="estación" value="prim">Primavera<br><input type="radio" name="estación" value="ver">Verano<br><input type="radio" name="estación" value="ot">Otono<br>

<input type="radio" name="estación" value="inv">InviernoEl Efecto:

Para seleccionar uno por defecto, en el argumento hay que poner checked: <inputtype="radio" name="estacion" value="ver" checked>Verano

- Hidden: (falta) - Submit: con este argumento especificaremos un botón en el que, al pulsar, los datos

serán enviados al programa o dirección de correo encargada de procesar la

información recogida por el formulario. El formato es: <input type="submit"name="mensaje" value="mensaje a mostrar"> Ej:

<input type="submit" name="mensaje" value="Enviar"> - Image: botón gráfico de envío de datos. Con este argumento especificamos un botón

de tipo imagen en el que, al igual que con el botón anterior, si pulsamos en la imagenlos datos serán enviados al programa o dirección de correo encargada de procesar lainformación recogida por el formulario.

o Src=ruta donde está la imagen



o Name=se almacenarán las coordenadas del punto de imagen donde se hayapinchado

o Value=para que salga una etiqueta cuando se está sobre la imagen que indiquelo que diga.

o Width=anchura de imageno Heigth=altura de imagen

Ejemplo:

<input type="image" src="enviar.png" name="enviar" width="100" height="100">

- Reset: botón de borrado de datos. Con este argumento especificamos un botón que alser pulsado borrará el contenido actual de todos los campo, dejándolos con sus

valores por defecto. Warning! Comando type=reset sin comillas <input

type=reset valuetexto del botón>o Value: con este parámetro especificaremos el texto que aparecerá en el botón.

Ejemplo:

<input type=reset value="Borrar">

TEX

TAREA

Es una entrada de datos en múltiples líneas. En un formulario también podemos introducir uncampo de texto que abarque varias líneas:

<textarea> contenido por defecto </textarea>- Name: nombra el objeto- Rows (filas) y Cols(columnas): especificaremos el número de filas y de columnas

LISTA DE OPCIONES <select name=variable multiple size=n>

<option selected value=Valor_1> Primera Opción<option value=valor_2> segunda opción<option value=valor_n> enésima opción

</select>- Selected= se pone antes de value y hace que esa opción se muestre por defecto.- Size= número de opciones visibles en la tabla.- Multiple= si especificamos este argumento se mostrarán todas las opciones en forma

de tabla. Si no lo ponemos aparece una lista desplegable.Lo que aparecerá al enviar el formulario sería, si clickamos en Primera Opción:variable=valor_1



FRAMES Los frames o marcos son una utilizada de HTML que nos permite dividir la ventana del

navegador en diferentes subventanas, que podrán ser manipuladasESTRUCTURA GENERAL:<html>

<head>

</head><frameset rows=Lista de filas: píxeles o % (se separan por comas solo:

30%,70%; si una de las filas la ponemos como * lo que queda de la pantalla será ocupado

por ella) cols=lista de columnas: píxeles o %><frame src=URL de la frame 1 name=nombre de la frame1><frame src=URL de la frame 2 name=nombre de la frame3>

.<frame src=URL de la frame n name=nombre de la frame n>

</frameset></html>Sintaxis Frameset:

Por cada una de las frames que incluyamos en nuestro

ATRIBUTOS

Atributos par a l a etiquet a <fr ame>

<frame src=URL name=nombre marginwidth=n marginheight=nscrolling=yes/no/auto noresize>Src=URL

La subventana mostrará el contenido del documento .html que se indique con dichaURL Name=nombre

Indica el nombre por el que nos referimos a esa subventana. (Fundamental paraexamen ponerlo en todos los frame)

Marginwidth=nCon este argumento establecemos los márgenes izquierdo y derecho del contenido de

la frame en puntos de pantalla.Marginheight=n

Con este argumento establecemos los márgenes superior e inferior del contenido de laframe en puntos por pantalla.scrolling="yes|no|auto"

Sirve para indicar si queremos que haya barras de desplazamiento en los distintosmarcos.

- "yes" siempre saldrán las barras, si indicamos. - "no" no saldrán nunca y si colocamos.

- "auto" saldrán solo si son necesarias. Auto es el valor por defecto. Noresize

Este atributo no tiene valores. En caso de que este presente indica que el frame no sepuede redimensionar. Como hemos podido ver, al colocar el ratón sobre el borde de losmarcos sale un cursor que nos señala que podemos mover dicho borde y redimensionar así losframes. Por defecto, si no colocamos nada, los marcos si se pueden redimensionar.Frameborder="yes|no|0"

Este atributo permite controlar la aparición de los bordes de los frames. Con esteatributo igualado a "0" o "no" los bordes se eliminan. Sin embargo, quedan los feos márgenes



en el borde. Por lo que hemos podido comprobar funciona mejor en Netscape que en InternetExplorer.

Nota: los atributos de frames no funcionan siempre bien en todos los navegadores. Es recomendableque hagamos un test sobre lo que estamos diseñando en varios navegadores para comprobar quenuestros frames se ven bien en todas las plataformas.

Bordercolor="#rrggbb"

Permite especicicar el color del borde del marco.

Atributos par a l a etiquet a <fr ameset>

Ya hemos conocido el atributo cols y rows, que sirven para indicar si la distribución enmarcos se hará horizontalmente o verticalmente. Solo se puede utilizar uno de ellos y se igualaa las dimensiones de cada uno de las divisiones, separadas por comas.Border="número de pixels"

Permite especificar de manera global para todo el frameset el número de pixels que hade tener el borde de los frames.Bordercolor="#rrggbb"

Con este atributo podemos modificar el color del borde de los frames, también demanera global a todo el frameset.Frameborder="yes|no|0"

Sirve para mostrar o no el borde del frame. Sus posibles valores son "yes" (para que sevean los bordes) y "no" o "0" (para que no se vean). En la practica elimina el borde, peropermanece una línea de separación de los frames.Framespacing="número de pixels"

Para determinar la anchura de la línea de separación de los frames. Se puede utilizaren Internet Explorer y junto con el atributo frameborder="0" sirve para eliminar los bordes delos marcos.

DIRIGIR LOS ENL AC E S

La única particularidad en el manejo de frames se trata de que cada uno de los enlacesque colocamos en las páginas, actualizan el frame donde está colocado este enlace. Por

ejemplo, si tenemos enlaces en la parte inferior de la ventana, en el espacio correspondiente altercer marco, actualizaran los contenidos del tercer frame, que es donde están situados losenlaces.

Lo lógico es que al pulsar sobre un enlace de la barra de navegación actualicemos elframe principal, que es donde habíamos planeado colocar los contenidos, en lugar del framedonde colocamos la barra de navegación, que debería mantenerse fija.

Para poder escoger la subventana de destino del hiperenlace se añade un nuevoargumento a la directiva <a href=></a> y darle un nombre al frame que deseamosactualizar:

1. Dicho nombre se indica en la etiqueta <FRAME> de la definición de frames. Para elloutilizamos el atributo name, igualado al nombre que le queremos dar a dicho marco.

Nuestra declaración de frames quedaría de la siguiente manera.

<frameset rows="15%,*,75"><frame src="pagina1.html"><frame src="pagina2.html" name="principal"><frame src="pagina3.html">

</frameset>2. Además, deberíamos colocar el atributo target a los enlaces, tal como sigue.

<a href="pagina2.html" target="principal">Portada</a><a href="productos.html" target="principal">Productos</a><a href="contacto.html" target="principal">Contacto</a>



V alores par a el atributo t arget Como hemos visto, con el atributo target de la etiqueta <A> podemos indicar el

nombre del frame que deseamos que actualice ese enlace. Sin embargo, no es este el únicovalor que podemos aplicarle al atributo. Tenemos algunos valores adicionales que podemosasignar a cualquier enlace en general.<a href=URL target=nombre_ventana.html o url>

Pone la página, a la que nos lleva el hiperenlace, en el frame donde hayamos puesto el

nombre de nombre_ventanaÓ target=[atributo] _blank

Para hacer que ese enlace se abra en una ventana a parte. Nuestros ejemplos en estemanual se suelen abrir en una ventana a parte, colocando este valor en el target de los enlacesque llevan a los ejemplos. _self

Se actualiza el frame donde esta situado el enlace. Es el valor por defecto. _parent

El enlace se actualiza sobre su padre o sobre la ventana que estamos trabajando, si esque no hay un padre. A pantalla completa. _top

La página se carga a pantalla completa, es decir, eliminando todos los frames quepudiera haber.Este atributo es muy importante porque si colocamos en nuestra página con frames un

enlace a una pagina externa, se abriría en uno de los frames y se mantendrían visibles otrosframes de la página, haciendo un efecto que suele ser poco agradable, porque parece queestán evitando que nos escapemos.

La sintaxis de uno de estos valores de atributos colocados en un enlace seria lasiguiente.

<A href="http://www.guiarte.com" target="_top">Acceder a guiarte.com</A>

C ombinación de Fr ames

Para crear estructuras de marcos en las que se mezclen las filas y las columnasdebemos anidar etiquetas <FRAMESET>. Empezando por la partición de frames más general,debemos colocar dentro las particiones de frames mas pequeñas.

En la imagen se puede ver el resultado final acompañada de la representación sobre lamanera de definirlos. En primer lugar definimos una estructura de frames en dos columnas ydentro de la primera columna colocamos otra parición de frames en dos fi las. El códigonecesario es el siguiente.<frameset cols="200,*">

<frameset rows="170,*"><frame src="pagina1.html"><frame src="pagina2.html">

</frameset><frame src="pagina3.html">

</frameset>



<frameset rows="60,*">

<frame src="pagina1.html"><frameset cols="200,*">

<frameset rows="*,150"><frame src="pagina2.html"><frame src="pagina3.html">

</frameset><frameset rows="*,60">

<frame src="pagina4.html"><frame src="pagina5.html">

</frameset>

</frameset></frameset>

Caracteres especiales: (si es minúscula la letra saldrá minúscula)

Etiqueta Estilo

<b> </b> Negrita

<i> </i> Cursiva

<u> </u> Subrayado

<s> </s> Tachado

<sub> </sub> Subíndice

<sup> </sup> Superíndice

<tt> </tt> Tipográfico

<big> </big> Grande

<small> </small> pequeño

<center></center>

centrado

Parpadeo <blink> </blink>

<strong></strong> Texto resaltado

<cite></cite>texto que indica cita =itálica

<strike></strike> Texto tachado



Tabla de ASCII estándar, nombres de entidades HTML, ISO 10646, ISO 8879, ISO 8859-1 alfabeto romanonumero 1Soporte para browsers: todos los browsers

ASCII HTML HTML Dec Hex Símbolo Numero Nombre Descripción

3233343536373839404142

4344454647

202122232425262728292A

2B2C2D2E2F

!"#$%&'()*

+,-./

!"#$%&'()*

+,-./

"

&

espaciosigno de cierre de exclamación / admiracióncomillas doblessigno de númerosigno de dólar signo de porcentajesigno "&" / ampersandcomilla / apóstrofe

paréntesis izquierdo paréntesis derechoasterisco

signo de más / adicióncomasigno de menos / sustracción / guíon / raya

punto barra oblicua - barra de división


484950

515253545556575859606162

63

303132

333435363738393A3B3C3D3E

3F

012

3456789:;<=>

?

012

3456789:;<=>

?

<

>

cerounodos

trescuatrocincoseissieteochonuevedos puntos

punto y comasigno de menor quesigno de igualsigno de mayor que

signo de interrogación - cierre


646566

404142

@AB

@AB

símbolo arroba



676869707172

73747576777879

434445464748

494A4B4C4D4E4F

CDEFGH

IJK L M NO

CDEFGH

IJKLMNO


80

818283848586878889909192

939495

50

5152535455565758595A5B5C

5D5E5F

P

QR ST UVWXYZ[\

]^

_

P

QRSTUVWXYZ[\

]^_

corchete izquierdo barra inversa

corchete derechosigno de intercalación - acento circunflejosigno de subrayado


96979899

100

101102103104105106107108

6061626364

65666768696A6B6C

`a

bcd

ef ghi

jk l

`abcd

efghijkl

acento grave



109110111

6D6E6F

mno

mno


112113114115116117118119120121122

123124125126127

707172737475767778797A

7B7C7D7E7F

pqr stuvwxyz

{|}~

pqrstuvwxyz

{|}~

llave de apertura - izquierda barra verticalllave de cierre - derechosigno de equivalencia / tilde(no definido en estándar HTML 4)


160161162

163164165166167168169170171172173174

175

A0A1A2

A3A4A5A6A7A8A9AAABACADAE

AF

¡¢

£¤¥¦§¨© ª«¬

®

¯

¡¢

£¤¥¦§¨©ª«¬®

¯

¡¢

£¤¥¦§¨©ª«¬®

¯

espacio sin separaciónsigno de apertura de exclamación / admiraciónsigno de centavo

signo de Libra Esterlinasigno de divisa generalsigno de yen

barra vertical partidasigno de seccióndiéresis - umlautsigno de derechos de autor - copyrightgénero feminino - indicador ordinal femininocomillas anguladas de aperturasigno de no - símbolo lógicoguión débilsigno de marca registrada

macrón - raya alta


176177178

B0B1B2

°

²

°±²

°±²

signo de gradosigno de más o menossuperíndice dos - cuadrado



179180181182183184

185186187188189190191

B3B4B5B6B7B8

B9BABBBCBDBEBF

³´µ ¶·¸

¹º»¼½¾¿

³´µ¶·¸

¹º»¼½¾¿

³´µ¶·¸

¹º»¼½¾¿

superíndice tres - cúbicoacento agudo - agudo espaciadosigno de microsigno de fin de párrafo

punto medio - coma Georgianacedilla

superíndice unogénero masculino - indicador ordinal masculinocomillas anguladas de cierrefracción un cuartofracción medio - mitadfracción tres cuartossigno de interrogación - apertura


192193194195196197198199200201202203

204205206207

C0C1C2C3C4C5C6C7C8C9CACB

CCCDCECF

ÀÁÂÃÄÅ

ÆÇÈÉÊË

ÌÍÎÏ

ÀÁÂÃÄÅÆÇÈÉÊË

ÌÍÎÏ

& acute;

ÀÁÂÃÄÅÆÇÈÉÊË

ÌÍÎÏ

con acento agudo

A mayúscula con acento graveA mayúscula con acento agudoA mayúscula con acento circunflejoA mayúscula con tildeA mayúscula con diéresisA mayúscula con anillodiptongo AE mayúscula (ligadura)C cedilla mayúsculaE mayúscula con acento graveE mayúscula con acento agudoE mayúscula con acento circunflejoE mayúscula con diéresis

I mayúscula con acento graveI mayúscula con acento agudoI mayúscula con acento circunflejoI mayúscula con diéresis


208209210211

212213214215216217218219

D0D1D2D3

D4D5D6D7D8D9DADB

Ð ÑÒÓ

ÔÕÖ×ØÙÚÛ

ÐÑÒÓ

ÔÕÖ×ØÙÚÛ

ÐÑÒÓ

ÔÕÖ×ØÙÚÛ

ETH islandesa mayúscula N mayúscula con tilde - eñe mayúsculaO mayúscula con acento graveO mayúscula con acento agudo

O mayúscula con acento circunflejoO mayúscula con tildeO mayúscula con diéresissigno de multiplicaciónO mayúscula with slashU mayúscula con acento graveU mayúscula con acento agudoU mayúscula con acento circunflejo



220221222223

DCDDDEDF

ÜÝÞß

ÜÝÞß

ÜÝÞß

U mayúscula con diéresisY mayúscula con acento agudoTHORN islandesa mayúsculas minúscula (alemán) - Beta minúscula


224225226227228229230231232233

234235236237238239

E0E1E2E3E4E5E6E7E8E9

EAEBECEDEEEF

àáâãäåæçèé

êëìíîï


êëìíîï


êëìíîï

a minúscula con acento gravea minúscula con acento agudoa minúscula con acento circunflejoa minúscula con tildea minúscula con diéresisa minúscula con anillodiptongo ae minúscula (ligadura)c cedilla minúsculae minúscula con acento gravee minúscula con acento agudo

e minúscula con acento circunflejoe minúscula con diéresisi minúscula con acento gravei minúscula con acento agudoi minúscula con acento circunflejoi minúscula con diéresis


240241

242243244245246247248249250251252253

254255

F0F1

F2F3F4F5F6F7F8F9FAFBFCFD

FEFF

ðñ

òóôõö÷øùúûüý

þÿ

ðñ


þÿ

ðñ


þÿ

eth islandesa minúsculaeñe minúscula - n minúscula con tilde

o minúscula con acento graveo minúscula con acento agudoo minúscula con acento circunflejoo minúscula con tildeo minúscula con diéresissigno de divisióno barrada minúsculau minúscula con acento graveu minúscula con acento agudou minúscula con acento circunflejou minúscula con diéresisy minúscula con acento agudo

thorn islandesa minúsculay minúscula con diéresis

HTML 4.01, ISO 10646, ISO 8879, alfabeto romano extendido A y B,Soporte para browsers: Internet Explorer > 4, Netscape > 4



HTML HTML Dec Hex Símbolo Numero Nombre Descripción

338339352353376402

152153160161178192

ŒœŠšŸƒ

OE mayúscula (ligadura)oe minúscula (ligadura)S mayúscula con carons minúscula con caron - acento hacek Y mayúscula con diéresisf minúscula itálica - signo de función

HTML HTML Dec Hex Símbolo Numero Nombre Descripción

82118212821682178218

8220822182228224822582268230824083648482

2013201420182019201A

201C201D201E2020202120222026203020AC2122

±

–—‘’‚

“”„†‡•…‰€™ €

raya cortaraya largacomilla izquierda - citacióncomilla derecha - citacióncomilla de citación - baja

comillas de citación - arriba izquierdacomillas de citación - arriba derechacomillas de citación - abajocruzdoble cruzviñeta - bullet

puntos suspensivossigno de pro milsigno de eurosigno de marca registrada - trade mark

Lenguaje de Marcas-HTML

Documents

Transcript of Lenguaje de Marcas-HTML