Informática

HTML (Hypertext Markup Language)

Compartir 0 Me sirvió 0 No me sirvió

PRIMERA CLASE

HTML: Hypertext Markup Language (Lenguaje de Marcas de Hipertexto)

Es un sistema que se utiliza para estructurar documentos pudiendo ser visualizados en cualquier navegador de red. Es un refinamiento del lenguaje SGML (Structured Generalized Markup Language). No es un lenguaje de programación en sí, sólo nos describe cómo vamos a ver el documento.

Las herramientas básicas para HTML son un editor de textos simple al igual que programas de diseño o retoque gráfico como el Paint Shop Pro o el GIF Construction Set y un navegador de web.

HISTORIA

Versión 1.0: apareció en mayo del 91. El organismo creador fue el CERN. Sólo se podían poner enlaces a otras páginas, nada de gráficos.

Versión 2.0: se implantó en 1995 y apareció como consecuencia del navegador Mosaic. También se añadieron etiquetas, cabeceras, tablas, listas y formularios.

Versión 3.0: apareció en mayo del 96 y sus características fueron tablas con presentaciones estructuradas de elementos, poder variar el tamaño de la letra, distintos colores, la posibilidad de poner subíndices y superíndices y la inclusión de los APPLETS de Java y de lenguajes SCRIPT.

Versión 4.0: apareció en julio del 97. Se le dio el nombre de Cougar y apareció para terminar una guerra de estandarización entre Microsoft y Netscape. La principal novedad es la inclusión del estándar UNICODE que sustituye al LATIN-1 (éste último visualiza 256 caracteres). Unicode permite representar 65536 caracteres distintos.

ESTRUCTURA DE UNA PÁGINA WEB

Las etiquetas (órdenes o directivas) pueden ser abiertas o cerradas. Las cerradas tienen un inicio y un final. Por ejemplo:

<CENTER> Título de mi página </CENTER>

Una etiqueta puede llevar parámetros ya sea abierta o cerrada. Por ejemplo: la etiqueta <BODY BGCOLOR=”#FF00FF”> </BODY> nos indica el color de fondo de nuestra web.

La estructura es la siguiente:

<HTML>

<HEAD> Cabecera de la página

<TITLE> Título </TITLE>

[<META name = ”nombre_pag” contents = “contenido”>] Nombre y contenidos

[<META name = “keywords” content = “palabras_clave”>] Para los buscadores

[<BASE hreaf = “URL”>] Indicamos que busque en otro directorio

</HEAD>

<BODY> Cuerpo de la página. Lo que vemos en el navegador. Posee varios parámetros:

background = “fichero_gráfico” Imagen de fondo

bgcolor = “#color” #xxxxxx. Los dos primeros caracteres indican la cantidad de rojo, los dos siguientes la cantidad de verde y los dos siguientes la de azul. El formato es en hexadecimal

text = “#color” Color de texto de nuestra página que por defecto es negro

link = “color” El color de los hiperenlaces de texto que por defecto es azul

vlink = “color” El color de los enlaces que ya hayamos visitado que por defecto, dependiendo del navegador es azul oscuro o verde

alink = “color” Color del enlace al pulsar sobre él

</HTML>

LISTAS

Pueden ser desordenadas o no numeradas, ordenadas o numeradas o pueden ser listas de definición.

Las listas desordenadas se utilizan para presentar elementos que por no ir en orden no tienen que llevar ningún número delante. El formato de la etiqueta es:

<UL parámetro>

type = tipo La marca que antecede a cada elemento de la lista pudiendo tener tres valores: disk (círculo sin sombrear), circle (círculo sombreado) o square (cuadrado sombreado).

Para añadir elementos se utiliza la etiqueta abierta <LI>. Por ejemplo:

<LI> Música Música

<LI> Cine Cine

<LI> Libros Libros

Las listas ordenadas usan la etiqueta cerrada <OL>.Su formato es el siguiente:

<OL parámetros>

start = número Nos indica el número del primer elemento de la lista

type = tipo Los valores de tipo son: 1, a, A, i, I. Si ponemos “a” van a estar ordenados por letras; si ponemos “A” aparecerán letras mayúsculas; si ponemos “i” aparecerán números romanos en minúsculas y si ponemos “I” aparecerán números romanos en mayúsculas

Por ejemplo:

<OL>

<LI> Música 1 Música

<LI> Cine 2 Cine

<LI> Libros 3 Libros

</OL>

Las listas de definición representan elementos como un diccionario. Primero el término y después su definición. Se utiliza la etiqueta cerrada sin parámetros <DL>. Para insertar elementos:

<DT> Incluir un elemento en la lista

<DD> Definición de ese término

Todas las listas se pueden anidar.

COMENTARIOS

Usamos dos etiquetas <!—Comentario--> con lo cual todo lo que haya entre los signos de mayor y menor no se verá en el navegador.

FORMATOS DE TEXTO

Para cambiar el tamaño de las cabeceras hay seis etiquetas diferentes. Desde <H1> hasta <H6>. Producirá un salto de línea automáticamente.

HTML sólo reconoce un espacio entre palabra y palabra. Para que salga tal y como lo escribimos se usa la etiqueta <PRE>.

Con la etiqueta <BR> se indica un salto de línea y es abierta.

<P> sirve para cambiar de párrafo y deja una línea en blanco. También es una etiqueta abierta.

<HR> Se utiliza para pintar una línea en el navegador. Sus parámetros son:

aling = left, right o center

noshade La línea no va a tener sombra

size = número Refiriéndose al grosor de la línea indicándolo en pixeles

width = número o % Indica el ancho de la línea.

ATRIBUTOS DE TEXTO

Las etiquetas <B> ... </B> y <STRONG> ... </STRONG> visualizan el texto en negrita.
Las etiquetas <I> ... </I> y <CITE> ... </CITE> visualizan el texto en cursiva.
La etiqueta <TT> ... </TT> muestra el tipo de letra como una máquina de escribir, es decir, todas las letras a un tamaño fijo.
La etiqueta <U> ... </U> subraya el texto.
Las etiquetas <S> ... </S> y <STRIKE> ... </STRIKE> visualizan el texto tachado.
La etiqueta <BLINK> ... </BLINK> visualiza el texto parpadeando.
La etiqueta <SUP> ... </SUP> muestra el texto como superíndice.
La etiqueta <SUB> ... </SUB> muestra el texto como subíndice.
La etiqueta <CENTER> ... </CENTER> centra el texto o lo que se le indique.

<FONT parámetros> ... </FONT>

size = valor Da al texto un tamaño en pixeles

size = +/- valor Aumentamos o disminuimos el tamaño de la letra

colour = “color”

INSERCIÓN DE IMÁGENES

<IMG parámetros>

src = “nombre_fichero” Para subir un nivel se escribe ../ o para subir dos se escribe ../../ . Para entrar en un directorio ../directorio o /directorio. Sólo se pueden poner archivos con extensión JPG o GIF

alt = “texto” Nos enseña una cadena de texto cuando el navegador no puede cargar una imagen

align = top, middle, botton Como se alinea el texto en relación a la imagen

border = número Indica el borde la imagen en pixeles cuando esa imagen sea un enlace

height = número o %

width = número o %

hspace = número en pixeles Separación en horizontal de la imagen

vspace = número en pixeles Separación en vertical de la imagen respecto al texto

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

El formato JPG es un formato de compresión de archivos o imágenes que lo disminuye una décima parte de su tamaño real. Estas imágenes pueden llevar un máximo de 16,7 millones de colores.

En el formato GIF, el número máximo de colores es de 256 y comprime menos que el JPG. Podemos hacer sin embargo, que un GIF sea transparente, cosa que no se puede en JPG. También pueden ser GIF´s entrelazados.

PÁGINA EJEMPLO DE LA PRIMERA CLASE

<HTML>

<HEAD>

<TITLE>Ejemplo de listas</TITLE>

</HEAD>

<BODY text="ff0000" bgcolor="ffff08">

<CENTER>

<H1><BLINK>Mis aficiones</BLINK></H1>

</CENTER>

<HR>

<I>Mis <B>aficiones</B> son:</I>

<UL>

<LI><TT>Cine</TT>

<LI><TT>Deporte</TT>

<UL>

<LI>Natación

<LI>Fútbol

</UL>

<LI>Música

</UL>

<B>La música que más me gusta es:</B>

<OL>

<LI>Rock

<LI>Jazz

<LI>Clásica

</OL>

<CENTER><IMG src="fuente4.jpg" height=50% alt="FUENTE DE AGUA"></CENTER>

<CENTER><IMG src="../../Windows/Temporary Internet Files/0DQZS1A3/@TopLeft.gif" alt="@TOPLEFT">

</BODY>

</HTML>

SEGUNDA CLASE

ENLACES (hiperenlaces)

Son elementos que colocamos en la página y que hace que el navegador acceda a otro recurso de cualquier ordenador. Para incluir enlaces se usa la etiqueta cerrada <A>...</A>. El formato completo de esta etiqueta es:

<A HREF = “dirección_enlace” [NAME = “marca”]> ... </A> Indica una marca a la que vamos a acceder dentro de la misma página.

Entre la apertura y el cierre podemos poner sólo texto o una imagen para usar de enlace. Existen cinco tipos diferentes de enlaces dependiendo del recurso al que accedamos:

Enlaces a la misma página. Para ello usamos una marca determinando a qué parte vamos a ir. Por ejemplo:

<A NAME = “marca”> </A>

<A HREF = “#marca”> texto </A>

Enlaces a otra página propia. Para ello se pone:

<A HREF = “nombre.html”> texto </A>

Si queremos acceder sólo a una parte de la página se pone:

<A HREF = “nombre.html # sección”> texto </A>

Enlaces a páginas fuera de nuestro sistema. Para ello debemos conocer su dirección completa, su URL. Por ejemplo:

<A HREF = “http://www.alphacom.es”> texto </A>

Enlaces a una dirección de correo electrónico. Se pone:

<A HREF = “mailto:usuario@sitio.es” > texto </A>

Enlaces a un archivo. Se pone:

<A HREF = “nombre archivo”> texto </A>

TABLAS

Nos permiten visualizar cualquier elemento organizado en filas y columnas, es decir, podemos ordenar los elementos en nuestra página. Para ello usamos:

<TABLE parámetros>

Etiquetas

</TABLE>

Los distintos parámetros son:

Border = número Indica el ancho del borde de la tabla en puntos

Cellspacing = número Indica la separación entre las distintas celdas de la tabla

Witdh = número o % Ancho de la tabla

Height = número o % Alto de la tabla

Bgcolor = “#color” Color de fondo de toda la tabla

Background = “fichero imagen” Imagen de fondo en la tabla

Las etiquetas que se utilizan son:

<TR>

Etiquetas Se declaran las filas de la tabla

</TR>

Para indicar las columnas se usa la etiqueta cerrada <TD> ... </TD>. Esta etiqueta va dentro de la etiqueta <TR>.

Hay otra etiqueta para declarar columnas. <TH> crea una celda de cabecera y es cerrada. Además, el texto aparecerá centrado y en negrita. Tanto <TD> como <TH> tienen unos parámetros:

Align = left, center, right, justify Indica como se coloca el contenido de esa celda

Valign = top, botton, middle Alineación del contenido de la celda

Rowspan = número de filas Indica el número de filas que va a ocupar esa celda. Por defecto es 1.

Colspan = número de columnas Indica el número de columnas que va a ocupar esa celda.

Bgcolor “ “#color” Indica el color de fondo de una celda

Hay otra etiqueta que se refiere al título de una tabla. Es la etiqueta cerrada <CAPTION> texto </CAPTION> situando el texto encima de la tabla. Esta etiqueta tiene que ir antes que la etiqueta <TABLE>.

INSERCIÓN DE ANIMACIONES

Hay varias maneras de hacerlo. Una de ellas es incluirla en el código de la página como por ejemplo los formatos AVI, FLC, MOV. El problema es que el navegador no lo soporta directamente; necesitaría PLUGINS.

Otra manera es usando aplicaciones de JAVA y la tercera opción es incluir imágenes con el formato GIF89a (animación compuesta de varias imágenes). Lo que nos hace falta para hacer esto son dos programas: el PAINT SHOP PRO, por ejemplo y un programa para unir las imágenes, el GIF CONSTRUCTION SET.

PÁGINA EJEMPLO DE LA SEGUNDA CLASE

<HTML>

<HEAD>

<TITLE> Ejemplo de tabla </TITLE>

</HEAD>

<BODY bgcolor="ffff08">

<CENTER> <H1> <BLINK> EJEMPLO DE TABLAS </BLINK> </H1> </CENTER>

<BR> <CAPTION> <CENTER> <H4> Ejemplo de cómo se usan las tablas </H4> </CENTER> </CAPTION> </BR>

<CENTER> <TABLE border=8 cellspacing=8 cellpadding=8 width=80%>

<TH> Buscadores

<TH colspan=2> Otros links

<TR>

<TD align=left> <CENTER> Yahoo </CENTER> </TD>

<TD align=left> <A HREF="http://www.microsoft.com"> <CENTER> MICROSOFT </CENTER> </A>

</TD>

<TD align=left> <A HREF="http://www.ibm.com"> <CENTER> IBM </CENTER> </A>

</TD>

</TR>

<TR>

<TD align=left> <CENTER> Altavista </CENTER> </TD>

<TD align=left> <A HREF="http://www.apple.com"> <CENTER> APPLE </CENTER> </A>

</TD>

<TD align=left> <A HREF="http://www.digital.com"> <CENTER> DIGITAL </CENTER> </A>

</TD>

</TR>

</TABLE>

</CENTER>

<BR> <A HREF="mailto:lipe@thunderdome.zzn.com"> ENVIARTE UN EMAIL </A> </BR>

<BR> <A HREF="ejemplo.htm"> IR AL PRIMER EJEMPLO </A> </BR>

</BODY>

</HTML>

TERCERA CLASE

FORMULARIOS (form)

Nos permiten solicitar información al usuario y procesarla. Un formulario está dividido en distintos campos y cada uno de estos campos está asociado a una variable. Una vez introducidos los datos en esas variables se envían a una URL donde tengamos el programa para procesar esas variables. Para poder procesar los datos hace falta un programa externo llamado también programa CGI (Common Gateway Interface) hecho en lenguaje PERL, Visual Basic o Visual C++.

Para crear un formulario:

<FORM parámetros>

Elementos del formulario

</FORM>

Los parámetros son:

Action = “programa”

Method = pos, get Nos indica el método por el cual se van a transmitir los datos. Con post se produce una modificación y con get se envía el valor de la variable sin nombre.

Enctype = “text/plain” Conseguiremos que los datos se envíen como un documento de texto, si no, se enviarían en modo binario.

Para introducir elementos dentro de un formulario:

<INPUT parámetros> Es abierta y los parámetros son obligatorios. Son:

type = tipo Indica el tipo de dato que se va a incluir en el formulario. Puede valer: “text”cuyos parámetros son maxlenght = número (longitud máxima de caracteres en ese campo) y size = número (tamaño en pixeles de la caja de texto); “password” siendo sus parámetros los mismos que el anterior; “checkbox” (casilla de verificación) apareciendo desactivadas y si queremos que aparezcan activadas añadiremos checked; “radio” siendo igual que el anterior sólo que en vez de un cuadrado es un círculo pudiendo añadir también checked aunque sólo podrá haber uno de estos activadas; “image” el cual nos da las coordenadas de una imagen cuando pinchemos sobre ella y su parámetro es src = “fichero imagen”; “hidden” que se utiliza para mostrar algo que el usuario no puede cambiar cuyo parámetro para introducir algo es value = “texto”; “submit” el cual nos crea un botón para que cuando pinchemos nos envíe los datos a donde queramos y su parámetro para incluir lo que pone es el mismo que el anterior; “reset” restablece los valores que tenía por defecto y el último tipo de parámetro es “button” siendo un botón que no hace nada a no ser que se lo indiquemos.
Name = “nombre” Para identificar a ese elemento
Value = “texto”

LISTAS DE SELECCIÓN

Son elementos dentro de los formularios. Su formato es:

<SELECT parámetros>

</SELECT>

Los parámetros son:

Name = “nombre” Nombre de ese objeto

Size = número Número de elementos que podemos ver a la vez. Si queremos seleccionar más de uno pulsando la tecla Control debemos poner MULTIPLE

Para incluir elementos en la lista ponemos la etiqueta abierta <OPTION> y una de ellas debe tener a continuación la palabra SELECTED para que salga seleccionada.

ÁREAS DE TEXTO

<TEXTAREA parámetros>

</TEXTAREA>

Los distintos parámetros son:

Name = “nombre” Nombre del objeto

Rows = número Indica el número de filas de texto visibles

Cols = número Indica el número de columnas visibles

Wrap = virtual, physical Con virtual se envía el texto seguido y con physical se envía cada línea separada.

MAPAS DE IMÁGENES

Consiste en dividir una imagen en zonas y dependiendo de la zona donde pinchemos, el navegador irá a un parte u a otra. Para crear un mapa de imagen nos van a hacer falta dos etiquetas.

<MAP parámetros>

</MAP>

Sólo posee un parámetro y es:

name = “nombre” Define el nombre del mapa

Dentro de esta etiqueta, las distintas zonas se definen con:

<AREA parámetros>

</AREA>

Los parámetros son:

Shape = “rect” (zona en forma de rectángulo) “square” (zona en forma de cuadrado) “circle” (zona en forma de círculo) “plygon” (zona en forma de figura geométrica).

El siguiente parámetro indica las coordenadas de la zona elegida:

Coords = “x1, y1, x2, y2” Si elegimos rect o square

Coords = “x, y, radio” Si elegimos circle

Coords = “x1, y1, x2, y2” Si elegimos polygon colocamos tantas coordenadas como vértices más uno para cerrar el polígono.

Href = “URL” Cualquier tipo de enlace

Nhref Indica que ese área de la imagen no es activa

Para aplicar el mapa a una determinada imagen:

<IMG src = “nombre.gif” usemap = “#mapa”>

Ejemplo:

<MAP name = “casa”>

<AREA shape = “polygon” coords = “2,62,57,62,82,1,2,62” href = “tejado.htm”>

<AREA shape = “rect” coords = “21,101,35,138” href = “puerta.htm”>

</MAP>

<IMG src = “imagen.gif” usemap = “#casa”>

INSERCIÓN DE SONIDO

Una web puede tener sonido de dos maneras diferentes: como fondo o que el usuario indique cuando quiere que suene. Los navegadores soportan extensiones MID, WAV.

Para que el sonido sea de fondo y dependiendo del navegador aunque en la última versión de HTML esto no importa se usa las etiquetas abiertas:

con el Explorer

<BGSOUND parámetros>

src = “fichero sonido”

loop = número o infinito

con el Netscape

<EMBED parámetros>

src = “fichero sonido”

width = “número” Por defecto 140

height = “número” Por defecto 60

autostart = “true” Arrancará de forma automática

loop = “true o false”

hidden = “true” No saldría el reproductor

Ambas etiquetas se pueden poner tanto en la etiqueta <BODY> como en la etiqueta <HEAD>.

En cambio, si queremos que el usuario active el sonido habrá que crear un enlace a ese sonido.

PÁGINAS EJEMPLO DE LA TERCERA CLASE

<HTML>

<HEAD>

<TITLE> Formulario </TITLE>

</HEAD>

<BODY>

<P> <CENTER> <H2> Libro de visitas </H2> </P>

<FORM action="mailto:madrid@alphacom.es" method="post" enctype="text/plain">

Nombre

<BR> <INPUT type="text" name="nombre">

<BR> Apellidos

<BR> <INPUT type="text" name="apellido">

<BR> Contraseña (si posees)

<BR> <INPUT type="password" name="contraseña">

<BR>Dirección

<BR> <INPUT type="text" name="dirección">

<BR> Continente

<BR> <SELECT name="continente" size=1 multiple->

<OPTION SELECTED> Europa

<OPTION> Asia

<OPTION> América del Norte

<OPTION> América del Sur

<OPTION> Oceanía

<OPTION> Antártida

</SELECT>

<BR>

<BR> <B> Modo de pago </B>

<TABLE>

<TR>

<TD align=left> <CENTER> <INPUT type="radio" name="pago" checked>

<TD align=left> Contrarrembolso

<TR>

<TD align=left> <CENTER> <INPUT type="radio" name="pago">

<TD align=left> Con tarjeta

</TABLE>

<P> Escribe tus comentarios

<BR> <TEXTAREA name="comentarios" rows=6 cols=45> </TEXTAREA>

<P> <INPUT type="submit" value="Enviar">

<INPUT type="reset" value="Borrar">

</FORM> </CENTER>

</BODY>

</HTML>

-----------

<HTML>

<HEAD>

<TITLE> Mapas de imágenes </TITLE>

</HEAD>

<BODY>

<MAP name="rodman">

<AREA shape="rect" coords="86,41,136,96" href="ejemplo3.htm">

<AREA shape= "rect" coords="88,147,145,204" href="ejemplo2.htm">

</MAP>

<IMG src="rodman.gif" usemap="#rodman">

<EMBED src="forrest_gump.mid" width=140 height=60 autostart="true" loop="true" hidden="True"

</BODY>

</HTML>

CUARTA CLASE

FRAMES (marcos)

Los frames son una técnica de HTML que nos permite subdividir la pantalla del navegador en distintas subventanas que son totalmente independientes unas de otras. Para hacer esto nos van a hacer falta dos etiquetas:

<FRAMESET parámetros>

<FRAME parámetros>

</FRAMESET>

Con la etiqueta Frameset lo único que indicamos es que vamos a crear una serie de marcos (indicamos las divisiones de la página) pero no los hace. La etiqueta que se ocupa de esto es la etiqueta abierta Frame e identifica a una subventana. En el código de estas páginas se omite la parte Body. Los frames se usan a partir de la versión 2.0 y si por alguna circunstancia nuestro navegador no los soportara se usaría la etiqueta opcional:

<NOFRAMES> texto </NOFRAMES>

Los parámetros de Frameset son:

Rows = “filas” Filas a crear (tamaño en pixeles)

Cols = “columnas” Columnas a crear (tamaño en pixeles)

Frameborder = número Este número va a ser igual a la separación en pixeles de los diferentes marcos. Por defecto son 10 pixeles.

Los parámetros de la etiqueta Frame son:

Name = “nombre” Con el cual referenciamos a esa ventana

Src = “URL” Nos indica el documento o web que va a aparecer al principio en ese marco. (Bienvenida, por ejemplo).

Marginwidth = número Nos indica el margen izquierdo y derecho de esa subventana en pixeles.

Scrolling = yes, no, auto Aparecerá una barra de desplazamiento en el caso de que la página cargada no entre. Con auto, si no es necesaria no aparecerán las barras.

Noresize Si lo ponemos el usuario no va a poder redimensionar ese marco. Recomendable ponerlo

Frameborder = yes, no Se eliminará el borde del marco.

Si lo que queremos es que no salga ningún tipo de borde entre los marcos que haya en la pantalla habrá que poner las siguientes opciones:

<FRAMESET frameborder = 0 framespacing = 0 border = 0 [cols = “ “ rows = “ “]>

<FRAME ... marginheight = 0 marginwidth = 0 frameborder = 0>

Para indicar que el enlace se abrirá en el marco:

<A HREF = “página.html” target = “nombre frame”>

Target puede valer cuatro constantes más:

“_blank” Abre una ventana nueva

“_self” (por defecto). El enlace se abrirá en la misma ventana

“_top” El enlace se abrirá en la misma ventana pero quita los frames (destruye la antigua)

“_parent” Abre la página en el Frameset superior

MARQUESINAS

Es una ventana en la que se desplaza un texto de manera horizontal. La siguiente etiqueta sólo funciona en el Explorer. En el Netscape aparecerá parado el texto; para que funcione hay que aplicar utilidades de Java.

<MARQUEE parámetros> texto que se desplaza </MARQUEE>

Los parámetros son:

Align = top, middle, bottom Con qué parte se alineará el texto; arriba, abajo o en el centro

Bgcolor = “#color”

Direction = left, right En qué sentido se desplazará el texto

Height = número, % Altura de la marquesina

Witdth = número o % Ancho de la marquesina

Loop = número, infinite

Behavior = scroll, slide, alternate

Scrollamount = número Cantidad de desplazamiento entre un movimiento u otro (más número, más rápido)

Scrolldelay = número Cantidad de tiempo en milisegundos que tarda el texto en reescribirse

Hspace = número Separación del texto fuera de la marquesina en horizontal

Vspace = número Separación del texto fuera de la marquesina en vertical

PÁGINAS EJEMPLO DE LA CUARTA CLASE

<HTML>

<HEAD>

<TITLE> Página con frames </TITLE>

</HEAD>

<FRAMESET cols="15%,*" frameborder=0 framebording=0 border=0>

<FRAME name="frame1" src="ejemplo3.htm" scrolling="auto" noresize frameborder=0>

<FRAMESET rows="35%,*" frameborder=0 framebording=0 border=0>

<FRAME name="frame2" src="ejemplo2.htm" scrolling="auto" noresize frameborder=0>

<FRAME name="home" src="ejemplo4.htm" scrolling="auto" noresize frameborder=0>

</FRAMESET>

<NOFRAMES> Tu browser no soporta frames </NOFRAMES>

</HTML>

<HTML>

<HEAD>

<TITLE> Página con frames </TITLE>

</HEAD>

<FRAMESET cols="15%,*">

<FRAME name="frame1" src="enlaces.htm" scrolling="auto" noresize frameborder=0>

<FRAME name="frame2" src="bienvenido.htm" scrolling="auto" noresize frameborder=0>

</FRAMESET>

<NOFRAMES> Tu browser no soporta frames </NOFRAMES>

</HTML>

<HTML>

<HEAD>

<TITLE> página índice de enlaces </TITLE>

</HEAD>

<BODY bgcolor="#f805ff">

<BR> <CENTER> <A href="mailto:lipe@thunderdome.zzn.com"> <B> E-mail </B> </A> <BR>

<BR> <CENTER> <A href= "principal2.htm" target="frame2"> <B> Enlace a principal2 </B> </A> <BR>

<BR> <CENTER> <A href="principal3.htm" target="frame2"> <B> Enlace a principal3 </B> </A> <BR>

<BR> <CENTER> <A href="bienvenido.htm" target="frame2"> <B> Volver a principal </B> </A> <BR>

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE> Página de bienvenida </TITLE>

</HEAD>

<BODY bgcolor="#ffff00">

<CENTER> <H1> <MARQUEE direction=left loop=infinite behavior=scrool scrollamount=10 scrolldelay=10>

BIENVENIDO A MI PÁGINA WEB </H1> </CENTER> </MARQUEE>

<CENTER> <IMG src="miijatovic4.jpg" alt="nos dió la copa"> </CENTER>

</BODY>

</HTML>

QUINTA CLASE

¿CÓMO PUBLICAR LA PÁGINA?

Son necesarias dos cosas: tener acceso a Internet y tener una cuenta e - mail. Podemos poner la página contratando el servicio a un proveedor o hacerlo de una manera gratuita. Para ello utilizaremos un programa FTP para “subir” las páginas creadas hacia el servidor. Por ejemplo: www.geocities.com , www.es.tripod.de , www.xoom.com son sitios donde se pueden poner de forma gratuita páginas nuestras.

¿CÓMO INCLUIRLA EN LOS BUSCADORES?

Altavista.magallanes.net (Añada una página), www.yahoo.es (aquí incluimos dentro de qué categoría ponemos nuestra página: “sugiera su sitio”).

Algunos programas para darte de alta en varios buscadores son: AddWeb Pro, Hurricane WebPromo, Hyperhits 1.1.1, The Spider, Submission Wizard, Submit Wolf Pro.

HOJAS DE ESTILO EN CASCADA (stylesheets)

Nos permiten hacer una programación en HTML más flexible ya que separan por un lado la presentación y por otro lado el contenido. Se pueden aplicar:

Sobre etiquetas independientes: la usaremos cuando queramos cambiar el aspecto sólo en un momento dado. Para ello añadiremos el parámetro style = “características”. Para cambiar un conjunto de etiquetas usaremos la etiqueta cerrada <DIV style = “características”> </DIV>. Si lo queremos aplicar a una palabra o letra se usa la etiqueta <SPAN style = “características”>.

Sobre una página web: lo tenemos que decir entre el cierre de la etiqueta </TITLE> y el cierre de la etiqueta </HEAD>. Para ello incluimos la etiqueta cerrada <STYLE type = “text/css”> indicando al navegador que si no lo soporta ignore lo demás. Aquí se coloca el nombre de la etiqueta que vamos a cambiar con sus características. Por ejemplo: H1 {características}.

Sobre un sitio web: tendremos que crear un documento de texto con la extensión css. Para incluirlo en nuestra página incluimos entre el </TITLE> y </HEAD> la etiqueta: <LINK rel = stylesheet type = “text/css” href = “fichero.css”>. Este archivo lleva el nombre de las etiquetas con sus características.

Todas las etiquetas que tengan la mismas características se pueden agrupar. Por ejemplo: H1 {características} H2 {características} es lo mismo que H1, H2 {características}.

Con las etiquetas se pueden usar clases (diferentes nombres o tipos per con las mismas características). Para ello: <H2 class = “nombre”>

Las características que podemos poner son:

Font - size ! se refiere al tamaño de la fuente que puede ser en puntos, pulgadas, centímetros o pixeles (pt, in, cm, px).

Font - family ! tipo de fuente.

Font - weight ! establece el espesor de la fuente (extra - light, light, demi - light, medium, demi - bold, extra - bold).

Font - style

Line - height ! separación entre líneas que puede ser en puntos, pulgadas, centímetros o pixeles (pt, in, cm, px).

Color ! color del texto (black, silver, gray, white, maroom, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua).

Text - decoration ! nos permite remarcar el texto (underline, line - through, none, italic).

Margin - left ! margen de la página (pt, in, cm, px).

Margin - top ! margen la página (pt, in, cm, px).

Margin - right ! margen de la página (pt, in, cm, px).

Text - align ! justifica los elementos (left, right, center).

Text - indent ! establece los valores de la sangría del texto.

Background ! color o un fichero gráfico entre comillas.

EJEMPLO:

H1 { font - size: 14pt; font - family: Arial; color: blue}

CONTADORES DE VISITAS

Hay que hacer una llamada a un programa CGI externo. Además, hay sitios en Internet que te ofrecen un servicio de contador. Por ejemplo en: www.servicont.com, www.digits.com, demnet2.ubi.pt/contador.

ESTADÍSTICAS DE VISITAS

Se puede conseguir un servicio de estadística sobre tu página en el siguiente sitio web: es.nedstat.net

APPLETS DE JAVA

Son aplicaciones escritas en Java y que para funcionar necesitan estar incrustadas en una página web.

<APPLET parámetros> </APPLET>

Los parámetros son:

Codebase = “directorio” Dónde va a estar el applet de Java

Code = “fichero.class”

Width = número Ancho de la zona activa del applet.

Height = número Alto de la zona activa del applet.

Hay otra etiqueta para pasarle parámetros al applet:

<PARAM parámetros>

name = “nombre” Los nombres pueden ser: text, rate (número de imágenes por segundo), font (tipo de fuente en el applet), font size, text style (estilo de la fuente: plain, bold, italic), speed (velocidad de desplazamiento dentro del applet :1 - 10), direction (dirección inicial de desplazamiento: left, right), background, foreground.

value = “valor”

EJEMPLO:

<APPLET code = “ejemplo.class” width = 300 height = 50>

<PARAM name = “background” value = “#555555”>

<PARAM name = “foreground” value = “#0000ff”>

</APPLET>

NORMAS DE PROGRAMACIÓN EN HTML

Es recomendable no poner enlaces a sitios que estén vacíos.
No hacer las páginas demasiado largas.
Es recomendable que todas las páginas que tengan algo en común tengan el mismo aspecto.
Recomendable poner una página de introducción o bienvenida.
Colocar ayudas visuales.
No usar demasiados separados horizontales.
El color de fondo que tenga relación con la imagen de fondo.
Aconsejable poner la última actualización.

Tal vez te pueda interesar:

Descargar

Enviado por:	Felix Zapata
Idioma:	castellano
País:	España

Palabras clave:

Tablas Formularios Frames Hojas de estilo

Te va a interesar