You are on page 1of 8

ESPECIFICAR EFECTOS DEL TEXTO

<efecto> para abrir y </efecto> para cerrar.


<efecto></efecto>
------------------------------------
ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML

<html>Toda la info del documento </html>


el encabezamiento, delimitado por:
<head>datos encabezamiento (son valores válidos en todo el documento)</head>
<Meta> (aca ba informacion sobre pagina web, fecha de caducacion,
palabras clabe para google,info para el servidos, etc)
HTTP-EQUIV significa que el valor tiene una cabecera equivalente
real en el protocolo HTTP.
NAME se refiere a nombres elegidos al azar por el usuario
el valor se asigna en el campo CONTENT CONTENT
Ej: <META HTTP-EQUIV ="Expires" CONTENT="Diciembre 1998">
<META NAME="Autor" CONTENT="Cooperacion+Desarrollo+ONGD">
<body>informacion documentp</body>. (cuerpo del documento, osea todo lo demas)
Titulo de la pagina
<title>titulo de la pag</title> (Va en el encabezamiento)
<h1>Titulo de Mucha importancia</h1> (Enorme)
<h2>Titulo de Menos importancia</h2> (grande)
<h3>Titulo de Mucha menos importancia</h3> (chico)
-----------------------------------
ATRIBUTOS DEL TEXTO
<b>Esto en negrita</b>
<i>esto en cursiva</i>
<u>texto subrayado</u>
<FONT COLOR="4169E1">color azul</font> Color de fuente
En el campo color el color se espesifica
disiendo que saturacion se quiere de cada
color en el sistema rgb,
Color=((0 a 255)(0 a 255)(0 a 255))
rojo verde azul
los valores numericos deben estar en exadesimal
<BODY TEXT="4169E1"> Para estableser en el marcador body el color de
fuente de todo el documento
<tt>letra Máquina de escribir</tt>
<p> para marcar un fin de párrafo
<br> para un único retorno de carro (LA separación de líneas que provoca <p>
es algo mayor que la de <br>)
<center>texto centrado</center>
<pre></pre> para Texto preformateado
Ej:
<pre>
Texto preformateado
---------------------
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
---------------------
</pre>
<blockquote>Texto citado</blockquote> Para hacer una cita textual dentro de nues
tro documento
<address>Dirección: Fulano@Algunservidor.algo.es</address> para las direcciones de
correo electrónico
Caracteres especiales dentro del texto (como escribir <>"& en el texto)
< (Menor que): &lt;
> (Mayor que): &gt;
& (símbolo de and, o ampersand): &amp;
" (comillas dobles): &quot;
á: &aacute;
é: &eacute;
í: &iacute;
ó: &oacute;
ú: &uacute;
Á: &Aacute;
É: &Eacute;
Í: &Iacute;
Ó: &Oacute;
Ú: &Uacute;
ü: &uuml;
Ü: &Uuml;
ñ: &ntilde;
Ñ: &Ntilde;
¿: &#191;
¡: &#161
----------------------------------
<hr> sitúa en el documento una línea horizontal de separación.
<!--comentario --> Para poner un comentario en un documento HTML,
una aclaración que no aparece en la presentación
final del documento.
----------------------------------
LISTAS y GLOSARIOS
Lista no numerada | Esto una lista numerada:
|
<ul type="tipo de marcador"> | <ol TYPE="tipo" START="numero">
<li>Tomates | <li>Miguel Induráin
<li>Zanahorias | <li>Tony Rominger
<li>Puerros | <li>Eugeni Berzin
</ul> | </ol>
|
Marcadores: |Marcadores:
DISC Círculo | z1 Números arábigos.
SQUARE Cuadrado | a Letras minúsculas.
HOLLOW CIRCLE Círculo | A Letras mayúsculas.
vacío. | i Números romanos en minúsculas.
| I Números romanos en mayúsculas.
|START: DESDE QUE NUMERO EMPIEZA
Glosario
<dl>
<dt>Perro (<i>n. masc.</i>)
<dd>Animal de cuatro patas que ladra.
<dt>Gato (<i>n. masc.</i>)
<dd>Animal de cuatro patas que maúlla y se lleva muy mal con el perro.
<dt>Pescadilla (<i>n. fem.</i>)
<dd>Animal que vive en el mar y está recubierto de escamas.
</dl>
Marcador <DL>: define comienzo y final de lista de glosario.
Marcado <DT> : define cada término.
Marcado <DD> : define cada dato.
----------------------------------
Tablas
<TABLE BORDER=10 WIDTH="90%" ALIGN="justify">
<CAPTION> Título de la tabla</CAPTION>
<TH ALIGN="right">Cabecera columna 1</TH>
<TH ALIGN="right">Cabecera columna 2</TH>
<tr>
<TD ALIGN="center">Fila 1, columna 1</TD>
<TD ALIGN="center">Fila 1, columna 2</TD>
</TR>
<TR>
<TD ALIGN="left">Fila 2, columna 1</TD>
<TD ALIGN="left">Fila 2, columna 2</TD>
</TR>
</TABLE>
Marcador <TABLE>: indica que vamos a crear una tabla.
Marcador <TH>: cabecera de la tabla. Aparecen en negrita.
Marcador <TR>: indica el final de una fila.
Marcador <TD>: indica un dato de la tabla, es decir una celda.
Atributo BORDER: presenta líneas de separación de celdas así como su ancho en pixel
s
Atributo CAPTION: título de la tabla.
Atributo WIDTH: anchura de la tabla.
PIXELS Pixeles en pantalla.
RELATIVE Porcentaje de la anchura de página (%)
Atributo ALIGN
en <TABLE>: tipo de alineación
JUSTIFY Ajustar al ancho de la página.
LEFT Izquierda.
RIGHT Derecha.
----------------------------------

Enlaces "Links"
<a href="http://www.Algunapagina.com.es/">Texto a mostrar en el link</a> para ha
cer un link a una pag web
<a href="/la/ruta/que/sea/fichero.html">pulse aquí</a> para ir a un fichero en
el mismo
servidor donde se encuentra la pag web
pueden <a href="ruta/relativa/cosa.html">cosa</a>. El mismo que el anterior pe
ro con
ruta relativa
Anclas:
<A ORDEN="objetivo"> Texto resaltado </A> lleva al usuario a una parte "obj
etivo" de la pag web
<a href="http://www.algo.org">alguna web</a> lleva al usuario a una parte
"objetivo" exterior a
dicha pag
Vinculación de localizadores universales de recursos (enlaces externos):
Nombredelservicio://hostdeinternet:nnumerodepuerto/recurso

Nombre del servicio: servicio que se quiere realizar (http, mail, news, ft
p).
Nombre del host de Internet: lugar donde se encuentra el servicio.
Número de puerto: opcional.
Recurso: archivo, documento, marca, etc.
URL http: acceso a páginas Web de un servidor en la World Wide Web.
Ej: <a href="http://www.ALgo.org/cosa.htm">ALgo</a>
URL ftp: acceso a directorios o archivos de un servidor de ftp
Ej:<a href="http://ftp://nodo50.org">FTP</a>
URL news: acceso a un grupo de noticias .
Ej:<a href="news://noticias.org/noti.algo">notisial de algo</a>
URL mailto: envío de mensajes de correo
Ej:<a href="mailto:fulano@yaho.com.ar">mail de fulano</a>
URL file: acceso a archivos locales en el PC.
<a href="file://pruebas/pagina3.htm">pagina3</a>

----------------------------------
Graficos (solo en formato gif)
<img src="monigote.gif" alt="MONIGOTE" ALIGN:center><p>
Atributo SRC: permite especificar el archivo que contiene la imagen.
Atributo ALT: texto alternativo para cuando no se pueda visualizar la imagen.
Atributo ALIGN: alineación física de la imagen.
MIDDLE Alineación centro.
TOP Alineación superior.
BOTTOM Alineación inferior.
LEFT Alineación izquierda.
RIGHT Alineación derecha.
En scr tambien puede ponerse una url de la imagne
(la direccion completa de una imagen web)
ej:
<img src="http://www.lawebdelmonigote.com.mo\mo1\monigote.gif" alt="MONIGOTE"><p
>
Hacer que una imagen sea un link
<a href="http://www.algo.com/"><img src="imagen.gif" alt="imagen"></a><p>
<BODY BACKGROUND= "fondo.jpg">permite establecer el fondao de la pag
-----------------------------------
Marcos
Estos subdibiden la pantalla del explorador y cargan mas de una pag web en panta
lla
Ej:
<html>
<body>
<FRAMESET COLS="25%,75%/">
<FRAME SRC="web1.htm" NAME="nom">
<FRAME SRC="web2.htm">
</FRAMESET>
</body>
</html>
Marcador <FRAMESET>: define el marco al que llama un documento HTML.
Tiene marcador de terminación.
Atributo COLS y ROWS: especifica el tamaño de los divisores
verticales y horizontales de los marcos.
Podemos especificar en pixels o en porcentajes
suprimiendo las barras inclinadas y especificando
tantos números como divisiones de la ventana.
Marcador <FRAME>: define cada uno de los marcos establecidos
en referencia a una página web cada uno de ellos
Atributo SRC: especificación del URL que define el marco.
Atributo NAME: establece el nombre del marco para posteriores
referencias como la presentación de un vínculo
de un marco en otro marco con un nombre determinado:
es un nombre que se da a un frame o marco y no tiene
porque ser el mismo nombre del fichero a que hace
referencia dicho marco. Al establecer el vínculo se
incluirá el atributo TARGET, indicando el nombre de
marco que debe presentar el URL seleccionado.
-----------------------------------
Creación de formularios y scripts CGI
Formulario
<FORM ACTION="URL" METHOD="método de acceso" ENCTYPE="tipo de codificación">
<INPUT TYPE=TEXT NAME="nom" SIZE=n MAXLENGTH=n VALUE="val">
<INPUT TYPE=PASSWORD NAME="nom" SIZE=n MAXLENGTH=n VALUE="val">
<INPUT TYPE=CHECKBOX NAME="nom" VALUE="val1" CHECKED> texto 1
<INPUT TYPE=CHECKBOX NAME="nom" VALUE="val2"> texto 2
<INPUT TYPE=RADIO NAME="nom""VALUE="val1" CHECKED> texto 1
<INPUT TYPE=RADIO NAME="nom" VALUE="val2"> texto 2
<INPUT TYPE=IMAGE NAME="nom" SRC="mapa.gif">
<INPUT TYPE=HIDDEN NAME="clave" VALUE="val">
<INPUT TYPE=SUBMIT NAME="clave" VALUE="caption">
<INPUT TYPE=RESET NAME="clave" VALUE="caption">
<SELECT NAME="nom">
<OPTION SELECTED>texto 1
<OPTION>texto 2
</SELECT>
<TEXTAREA NAME="nom" ROWS=n COLS=c> texto de varias líneas </TEXTAREA>
</FORM>
donde:
Atributo ACTION: especifica el URL de la acción asociada al formulario.
Si no se especifica, por defecto se asume que el URL
es el BASE del documento.
Atributo METHOD: indica el método de acceso al URL de la acción.
El conjunto de métodos aplicables es función del
esquema del URL. Se pueden emplear los
métodos GET y POST,lo vemos despues.
Atributo ENCTYPE: especifica el tipo de codificación para el transporte
de los pares nombre/valor, excepto en los casos en
los que el protocolo no imponga uno.
MARCADOR <INPUT>: representa cada uno de los campos de entrada de datos
.
Atributo TYPE: establece el tipo de entrada y por tanto el formato d
e
recogida de los datos que serán enviados para que el
sistema los procese.
TEXT Casillas de texto en blanco.
PASSWORD Casillas de texto para claves.
CHECKBOX Casillas de selección.
RADIO Botones de radio.
IMAGE Pixels de una imagen.
HIDDEN Campos oculto
SUBMIT Botón de envío.
RESET Botón de reinicio.

Casillas de texto en blanco:


Atributo NAME: especifica el nombre de la variable que recogerá el
valor del datos y que permitirá su posterior gestión.
Atributo SIZE: especifica la cantidad de espacio reservada para este
campo. El valor por defecto depende del visor.
Atributo MAXLENGTH: limita el máximo número de caracteres que pueden ser
introducidos en el campo. Si el valor es mayor que el
del atributo SIZE, el visor debe permitir el
desplazamiento de la línea. El número de caracteres
por defecto es ilimitado.
Atributo VALUE: indica el valor inicial del campo.
Casillas de texto para claves: mismos atributos que las casillas de tex
to en
blanco solo que el eco en pantalla de los
caracteres tecleados son asteriscos.
Casillas de selección: permite la selección no excluyente de una
serie de opciones y dispone de los atributos
NAME, SIZE y VALUE además de :
Atributo CHECKED: indica que el estado
inicial es seleccionado.
Botones de radio: permite la selección excluyente de una serie de
opciones y dispone de los atributos NAME, SIZE,
VALUE y CHECKED.
Pixels de una imagen: especifica una imagen para que la muestre el viso
r
y permite la entrada de dos campos, las coordenadas
x e y de un pixel seleccionado de la misma.
Los nombres de los campos son iguales al del campo,
añadiendo al final .x e .y. Los atributos NAME y SRC
son necesarios y el campo ALIGN es opcional.
Atributo SRC: indica el archivo que contienen el
mapa imagen.
Atributo ALIGN: tipo de alineación.

Atributo SRC: indica el archivo que contienen el mapa imagen.


Atributo ALIGN: tipo de alineación.
Campos oculto: el usuario no interactúa con él, es el atributo
VALUE el que especifica el valor del campo.
Tanto el atributo NAME como VALUE son obligatorios.
Botón de envío: opción que enviar los datos al URL servidor.
Botón de reinicio: opción que permite iniciar el formulario con
los valores por defecto.
MARCADOR <SELECT>: se emplea para reducir el campo a una lista de valor
es,
es decir incluye en el formulario una lista desplazable.
Atributo NAME: especifica el nombre del campo.
Atributo SIZE: determina el número de ítems visibles.
Si se indica tamaño uno, se suelen
presentar como menús desplegables,
mientras que si el tamaño es mayor
se suelen presentar como lista con
barra de desplazamiento.
Atributo MULTIPLE: indica que se trata de una lista
desplegable
MARCADOR <OPTION>: representa cada uno de los valores. Los atributos de
l
elemento son:

Atributo SELECTED: indica que esta opción está seleccionada inicialme


nte. Si ninguna opción tiene este atributo, el visor presenta la primera seleccion
ada.
Atributo VALUE: indica el valor a retornar si se selecciona la op
ción. Si no se incluye el atributo, se emplea el contenido del elemento.
MARCADOR <TEXTAREA>: representa un campo de texto de múltiples líneas o área
de texto. El contenido del elemento es el valor
inicial del campo. La especificación de filas y
columnas sólo se refiere a la dimensión del área visible,
pero los programas cliente pueden permitir sobrepasar
los límites mediante barras de desplazamiento.
Generalmente se emplea un tipo de letra de caja fija
para mostrar los contenidos del campo.
Atributo COLS: número de columnas visibles del área de
texto, en caracteres.
Atributo NAME: nombre del campo.
Atributo ROWS: número de líneas visibles del área de
texto, en caracteres.

-----------------------------------

You might also like