Guia básica html

GUIA BASICA DE CODIGO HTMLARVEY BARAHONA GOMEZ

HTMLGUIA No. 1.

El manejo de Internet es fácil y ameno gracias al entorno gráfico actual, esto es gracias al HTML que significa Lenguaje para marcar hipertexto, HiperTExt Markup Language. El hipertexto es el vínculo o enlace que se realiza en una página, el “saltar” de un lugar a otro. Es la lectura no lineal de un texto.

Crear hipertexto es sencillo. En la actualidad existen numerosos programas que permiten diseñar páginas web rápidamente, pero en ocasiones es necesario digitar código. Esta guía comenzará por manejar el código del html y posteriormente utilizará software para crear las diferentes páginas.

El principio esencial del html es el uso de las etiquetas o marcas, que funcionan de la siguiente manera:

<XXX> Inicio etiqueta</XXX> Fin etiqueta

Las etiquetas se deben inicializar y finalizar y el texto que esta entre el origen y el final se visualizará con estas características.

La primera etiqueta es <HTML> Toda la página </HTML> que indica que dentro de esta etiqueta estará la página.

El documento esta dividido en dos secciones El encabezamiento, comprendido entre las etiquetas <HEAD> </HEAD> El cuerpo, comprendido entre <BODY> </BODY>

En el encabezamiento va información que no se visualizará en la pantalla. La etiqueta <TITLE> TEXTO </TITLE>, permite visualizar el título en el libro de direcciones.

En el cuerpo va la información de la página, imágenes, tablas, etc.

La estructura general de una página es:

<HTML><HEAD><TITLE>Título página</TITLE> </HEAD><BODY> ......... Aquí van las etiquetas de la página.........</BODY>

</HTML>Para crear una página usando código HTML se debe tener en cuenta: El uso de enter para separar líneas no es necesario; el texto se acomoda a la pantalla. El uso de las tildes se debe realizar con código. El documento se debe guardar con extensión .html Algunas etiquetas no se ven en todos los navegadores. Se puede utilizar cualquier procesador de texto, pero es necesario darle la extensión html.

Ejemplo 1.Digitar el siguiente código html en el procesador de texto. Guárdelo con el nombre de pagina1.html.<HTML><HEAD><TITLE>Mi primera página web </TITLE> </HEAD><BODY> Este es mi primer contacto con el maravilloso mundo de Internet. Esta es mi primera página</BODY></HTML>

FORMATO DE TEXTO.

En las páginas en ocasiones es necesario colocar texto con estilos diferentes. Para html, cada estilo y tamaño de fuente es necesario una etiqueta, veremos a continuación una serie de etiquetas que nos ayudarán a cambiarle la cara a nuestras futuras páginas.

Para visualizar texto con formatos fijos, tipo títulos se utiliza las etiquetas<H1> XX</H1> , <H2> XX </H2> , <H3> XX </H3> , <H4> XX </H4> , <H5>XX </H5> y <H6> XX</H6> , donde H1 es el tipo de mayor tamaño

Para centrar información en la página se utiliza <CENTER> XXX </CENTER> Si deseamos varios párrafos se utiliza la etiqueta <P>, sin el respectivo cierre Los separadores verticales se obtienen con la etiqueta <HR>, no utiliza cierre de etiqueta. Si queremos separar los párrafos o cualquier otra cosa sin dejar línea en blanco utilizamos la etiqueta <BR>, sin el respectivo cierre de etiqueta. Para obtener varias líneas en blanco se combinan las etiquetas <BR> y <P> por cada línea a usar. La fuente en negrilla se realiza con <B> XXX </B> La fuente en cursiva se realiza con <I> XXX </I>

2

Ejemplo 2.Digite el siguiente código html en el procesador de texto. Guárdelo con el nombre de pagina2.html.<HTML><HEAD><TITLE>Mi segunda pagina web </TITLE> </HEAD><BODY><CENTER><H1>MI SEGUNDA PAGINA WEB </H1></CENTER> Este es mi primer contacto con el maravilloso mundo de Internet. Esta pagina permite identificar los diferentes formatos de texto que puede tener una pagina web.<BR><H1> Este es el tipo de fuente mas grande que maneja html</H1><H2> Este es tipo dos</H2><H3>Tipo tres </H3><H4>Tipo cuatro </H4><H5>Fuente con tipo cinco</H5><H6>Fuente con tipo cinco</H6><B>Texto en negrita</B> se utiliza un separador de párrafo sin linea <BR><I>Aqui esta un separador con linea y est escrito es cursivo</I> <P> esto es una linea horizontal <HR></BODY></HTML>

Las tildes también tienen un formato especial, aunque, dependiendo del programa donde se cree el navegador las puede tomas.

Letra Códigoá áé éí í Si se desea las tildes en mayúsculas, se coloca

Á etc,ó óú úñ ñÑ Ñ

El símbolo & se obtiene presionando las teclas alt 38 simultáneamente.

Ejercicios1. Realice una página usando los códigos de las tildes.2. Realice una página donde apliquen todos los temas vistos.

3

Los tamaños del texto se pueden variar en HTML, van desde el valor menor que es 1 hasta un tipo de letra grande que es 7. Para esto se utiliza la siguiente línea:

<FONT SIZE =5> xxx texto con tamaño </FONT>

Para realizar una ampliación al separador horizontal hacemos<HR WIDTH =75%>

ocupando el 75% de anchura normal.

<HR WIDTH =300>tiene una anchura de 300 pixeles.

Igualmente se puede alinear:<HR WIDTH =50% ALING = LEFT> (izquierda)<HR WIDTH =50% ALING = RIGHT> (derecha)

Se puede variar su espesor (alto)<HR SIZE = 20>

También se puede hacer que sea una línea sólida:<HR NOSHADE>

Hay otro atributo para cambiar el tipo de fuente empleada. El tipo de fuente estándar es Time New Roman , el usuario puede cambiar a otro tipo de fuente al momento de cargar la página diferente al que está configurado en el navegador. El comando es :

<FONT FACE=”Nombre Fuente” > xxx texto con tipo de fuente </<FONT>

ejemplo:<FONT FACE=”Impac” > Este texto es con tipo de fuente Impac </<FONT>

<FONT FACE=”Impac, Arial” > Este texto es con tipo de fuente Impac o Arial </<FONT>

COLOR DEL TEXTO.Para insertar texto de colores es necesario saber el código de los mismos y la posición:

<color=”#XXYYZZ> en donde:XX es el número indicativo del la cantidad de color rojoYY es el número indicativo del la cantidad de color verdeZZ es el número indicativo del la cantidad de color azul.

4

Los números están en numeración hexadecimal, este tipo de numeración tiene 16 dígitos. Y son:

0 1 2 3 4 5 6 8 9 A B C D E F

El número menor es el 00 y el mayor es el FF. Los colores básicos son:#FF0000 para el Rojo#00FF00 para el Verde#0000FF para el Vzul.

Otros colores:#FFFFFF para el Blanco#000000 para el Negro#FFFF00 para el Amarillo

Para hacer un color más oscuro o más claro se debe reducir o ampliar el número de su componente Ejemplos #CCFFFF Azul claro.

#AA0000 Rojo más oscuro

<FONT COLOR=”# CCFFFF”> Texto de color </FONT><FONT COLOR=”# FF0000”> Texto de color </FONT><FONT COLOR=”# CCFFFF”> Texto de color </FONT>

Para el color del fondo se utiliza la etiqueta background=”#XXYYZZ”. Ejemplo. Para un fondo rojo la etiqueta sería <body bgcolor=”#FF0000”>LISTASExisten 3 tipos de listas para HTML.1. Listas desordenadas (no numeradas)2. Listas ordenadas (numeradas)3. Listas de definición.

Las lista desordenadas (Unordered List) sirven para presentar cosas que, por no tener un orden determinado no necesitan ir precedidas de un número. Su estructura es:

<UL><LI> Una Cosa<LI> Otra cosa<LI> Más cosas</UL>

<LI> Esta etiqueta significa List ItemForma de la viñeta: Type (tipo) que puede ser disk, circle squareEjemplo:

<UL type= square><LI> Barco

5

<LI> Aviones</UL>

Las listas ordenadas (Ordered Lists) permite presentar cosas que en un orden determinado. Su estructura es similar a la anterior, pero van numeradas automáticamente

<OL><LI> Primera Cosa<LI> Segunda cosa<LI> Tercera cosas</OL>

Se pueden anidar listas ordenadas o desordenadas, lo importante es abrir y cerrar bien cada una.Formas para cambias los nùmeros:Type= valor, donde valor puede ser: a,A,i,I,También se puede cambiar el número de iniciación con Stara=número a iniciarEjemplo <OL type I start=3 ><LI> Barco<LI> Aviones</OL>

Las listas de definición permiten definir términos tipo glosario. Toda lista de definiciones debe ir entre las etiquetas <DL> y </DL>. Y cada renglón de la lista tienen dos partes, a) el nombre a definir, utilizando la etiqueta <DT> (definition Term) que indica el termino a definir y b) <DD> (definition definitio) que define el termino.

<DL><DT> Una Cosa a definir<DD> Definición de cosa<DT> Otra cosas para definir<DD> Definición otra cosa</DL>

EjemplosDigite la siguientes líneas en el ejemplo anterior

Lista ordenadaElementos de un computador<OL><LI> CPU, compuesto por <UL> <LI> Disco Duro <LI> Memoria <LI> Microprocesador </UL><LI> Monitor<LI> Teclado <LI> Mouse

6

<OL>

Definición <DL><DT> -Hardware <DD> Componentes fí del computador<DT> Software<DD> Elementos no tangibles del computador</DL>

ENLACES A OTRAS PÁGINAS

Este tipo de enlaces es la esencia de las diferentes páginas en la Web. Estos vínculos permiten unir diferentes documentos repartidos por todo el mundo y es lo que conocemos como hipertexto.

La estructura general de los enlaces es :< A HREF= “xxx”> yyy </A>

Donde:xxx es el destino del enlace yyy es el texto indicativo del enlace en la pantalla, subrayado generalmente de color diferenteExisten cuatro tipos de enlaces:1. Enlaces dentro de la misma página.2. Enlaces con otra página de nuestro sistema ( carpeta)3. Enlaces con una página fuera del sistema4. Enlaces con una dirección de correo electrónico.

1. Enlaces dentro de la misma página.Se utiliza cuando el documento es muy extenso. Permite saltar de una página a otra dentro del mismo documento.Para este caso lo que hemos llamado xxx (el destino del enlace) se sustituye por #marca( palabra puede ser cualquier texto), yyy será el texto que permitirá el enlace y es lo que ven los visitantes de la página:

<A HREF=”#marca”> yyy </A>Y en el sitio exacto donde queremos saltar, debe ir la etiqueta:

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

Ejemplo:Si queremos ir al final de un documento hacemos:

<A HREF=”#final”> Final documento </A>

y en el final del documento se escribe<A NAME=”final”> </A>

7

2. Enlaces con otra página de nuestro sistema ( carpera)Por lo general se tienen varias páginas en una carpeta de HTML, y en ocasiones es necesario saltar a ellas. Para este caso lo que se ha llamado xxx se reemplaza con el nombre del archivo. Ejemplo

<A HREF=”pagina1.html”> Mi primera página en la Web </A>

3. Enlaces con una página fuera del sistemaSi queremos enlazar con una página que se encuentra fuera de nuestro sistemas es necesario conocer su dirección completa o URL (Uniform Resource Locator). En este caso lo que se ha llamado xxx se reemplaza por la dirección completa de la página a enlazar. Ejemplo.Para ir a la página de yahoo hacemos:

<A HREF=”http://espanol.yahoo.com”> Yahoo en Español </A>

4. Enlaces con una dirección de correo electrónico.En este caso, sustituiríamos lo que hemos llamado xxx por mailtoLa estructura es :

<A HREF=”mailto: direccion email”> Texto enlace </A>

Ejemplo

<A HREF=”mailto: cesbarahona@ yahoo.com”> Arvey barahona </A>

Para garantizar que cualquier navegador visualice el enlace se puede mejorar con un mensaje de este tipo:Correo de Arvey Barahona es <A HREF=”mailto: cesbarahona@ yahoo.com”> cesbarahona @yahoo.com </A>

Taller.1. Realice una página que con enlaces a las página que se hayan creado utilizando listas desordenadas. Enlace las páginas que más le interesan utilizando listas ordenadas. Enlace su correo. Utilice lista de definición.

2. Investigue cuales son los tipos de gráficos que se pueden insertar en HTML.

8

IMAGENES

Las imágenes pueden dar colorido a nuestras páginas y hacerlas más atractivas. Las imágenes pueden convertir nuestra página en una maravilla, pero también puede convertirla en una pesadilla (toma pareado). Las imágenes tienen unas cuantas pegas:

1. Hacen muy lenta la carga de las páginas. Por muy artística que nos quede la página, poca gente esperará a que se cargue un gráfico grande. Si la gente espera mucho se aburre mucho y se va a otro sitio. 2. Pueden recargar la página y distraer al usuario del verdadero contenido. 3. Si están mal elegidas pueden complicar la lectura o hacerla imposible. 4. No debemos basar nuestra página en las imágenes; hay gente que tiene navegador de texto (sin imágenes) o el navegador configurado para no ver imágenes (así se cargan las páginas más rápido).

Una pista: una página con muchos gráficos es muy probable que sea pobre de contenidos (a no ser que la página sea una galería de imágenes).

Al principio a todos nos gusta tener una página con muchos gráficos y colores para hacerla más vistosa, pero hay que contenerse. Piensa en los sufridos internautas que tienen una conexión lenta.

NOTA: Cuando un navegador carga una imagen la guarda en la caché (en el disco para entendernos), de tal forma que si pasamos a otra página en nuestro sitio que use la misma imagen no necesita cargarla de nuevo.

Una Imagen como fondo

Un primer efecto bastante bueno lo podemos conseguir poniendo una imagen como fondo. Es muy fácil, basta añadir un par de cosas a la etiqueta body:

<body background="nombre_de_la_imagen">

Lo que hace el navegador es ir colocando la imagen indicada hasta llenar el fondo.

Sin embargo tienes que tener cuidado con el fondo, no escojas una imagen muy grande. Ten cuidado que contraste bien con el texto para que se pueda leer con comodidad.

9

Mostrar imágenes

Para insertar una imagen en nuestra página debemos hacer:

<img src="nombre_de_la_imagen">

src es la abreviatura de SouRCe. La etiqueta img no tiene pareja, no existe una etiqueta <img>.

Esta etiqueta tiene varias opciones:

ALT = "descripción" ALIGN = left / right / top / middle / bottom HEIGHT / WIDTH BORDER HSPACE / VSPACE

ALT :La descripción que se mete en alt es la que se muestra en caso que de la imagen no se pueda cargar por el motivo que sea. Esto es conveniente para que la gente que tiene un navegador de texto o las imágenes desactivadas no se pierda en nuestra página.

Esta descripción también se muestra si ponemos el ratón sobre la imagen y lo dejamos quieto unos segundos. El siguiente ejemplo permite mostrar una imagen y al poner el ratón encima muestra el mensaje "Gráfico que representa un muro":

<center><IMG SRC="fondo-piedra.gif" width="96" height="96" ALT="Gráfico que representa un muro"></center>

ALIGN

Con esta etiqueta podemos alinear el texto con respecto a la imagen. Con unos ejemplos es como mejor se explica:

<img src="fondo-piedra.gif" align=top> Este texto va arriba

Este texto va arriba

10

<img src="fondo-piedra.gif" align=middle> Este texto va en medio

Este texto va en medio

<img src="fondo-piedra.gif" align=bottom> Este texto va abajo

Este texto va abajo

Existen otras dos posibilidades (left y right):

<IMG SRC="fondo-piedra.gif" align=right width="96" height="96" ALT="Gráfico querepresenta un muro"> Bla, bla, bla, ...

Bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,bla, bla, bla, bla, bla, bla, bla, bla.

<IMG SRC="fondo-piedra.gif" align=left width="96" height="96" ALT="Gráfico querepresenta un muro"> Bla, bla, bla, ...

Bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,

bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,

HEIGHT / WIDTH

11

Estas opciones definen el tamaño (heigth=altura, width=anchura) con el que se mostrará la imagen. Si no especificamos nada la imagen se muestra con su tamaño real.

La imagen que venimos usando (el muro) tiene unas dimensiones de 96x96. Si cambiamos estas dimensiones, por ejemplo a 96x48 la imagen quedaría así:

<IMG SRC="fondo-piedra.gif" width="96" height="48" ALT="Imagen reducida">

Pero también podemos agrandarla (196x98):

<IMG SRC="fondo-piedra.gif" width="192" height="96" ALT="Imagen reducida">

NOTA: Es importante poner las dimensiones siempre, aunque sean las originales, para facilitar al navegador la representación de la imagen.

BORDER

Con esta opción podemos poner un borde a la imagen.

<IMG SRC="puppy.jpg" width="192" height="96" ALT="Imagen ampliada" border=0>

<IMG SRC="puppy.jpg" width="192" height="96" ALT="Imagen ampliada" border=6>

HSPACE / VSPACE

Con estas opciones podemos especificar cuántos pixels queremos de separación entre la imagen y el resto del documento. Ejemplo

<IMG SRC="puppy.jpg" vspace=20>

12

Usar imágenes como enlaces

Vimos antes cómo poner enlaces de texto en nuestra página. Ahora vamos a ver cómo se usan las imágenes para que sirvan como enlaces gráficos.

Para poner una imagen como enlace debemos meterla dentro de una etiqueta <a href>: Usamos la imagen cualquiera. Y ponemos un enlace a esa página (Ejemplo imagen de RCN, dirección. www.canalrcn.com

<A HREF="http://www.canalrcn.com"><IMG SRC="logoRCN.gif" width="92" height="39" ALT="Nuestra Tele"></A>

y ya tenemos nuestro enlace gráfico.

Fíjate que aparece un borde alrededor de la imagen. Este borde indica que se trata de un enlace, pero si quieres quitarlo basta con usar la opción border=0.

OPCIONES ADICIONALES

OTROS COLORES

Color del texto Color de fondo Color de los enlaces enlaces no visitados enlaces visitados enlaces activos

Color del texto

Ya hemos visto cómo se cambiaba el color del texto con FONT.Existe otra forma para cambiar el color por defecto del documento, con unas opciones de la etiqueta BODY (igual que hacíamos con la opción background). Con estas opciones podemos cambiar el color del texto, el del fondo y el de los enlaces.

Las posibles opciones son:

text bgcolor

13

link vlink alink

Para cambiar el color del texto debemos escoger la primera opción; text. Se usa igual que la opción color de la etiqueta font (se puede especificar el color por su nombre o por su código hexadecimal).

Si ponemos el siguiente código tendremos el texto de nuestra página de color azul:

<body text=blue>

Color de fondo

También podemos cambiar el color de fondo de nuestro documento simplemente usando la opción bgcolor (igual que text. Para tener un fondo de color azul y texto blanco:

<body text=white bgcolor=blue>

Color de los enlaces

Quizá te hayas fijado que cuando pones un enlace en tu página se muestra de color azul. Si el enlace ya ha sido visitado aparece con otro azul más claro (se usan colores diferentes para que el usuario sepa si ya ha visitado la página o no). Esto lo podemos cambiar a nuestro gusto.

Enlaces no visitados

Para cambiar el color de los enlaces a páginas que aún no han sido visitadas se usa la opción link. Para poner estos enlaces de color amarillo:

<body link=yellow>

Enlaces visitados

El color de los enlaces a páginas ya visitadas se establece con la opción vlink (Visited Link). Si queremos que sea verde:

<body vlink=green>

14

Enlaces activos

En el momento que pinchamos sobre un enlace este cambia de color. Para especificar este color se usa alink (Active Link):

<body alink=red>

Y para ver todo esto junto en un documento veamos un ejemplo:

La etiqueta body de este ejemplo es:<html><body text=yellow bgcolor=blue link=white vlink=red alink=green>

El texto normal aparece de color amarillo.Los enlaces no visitados aparecen de color verde: noexiste.html. Los enlaces visitados aparecen de color rojo: ejemplo11.html. Al pinchar en un enlace se pone de color verde.</body></html>

NOTA: Algunos navegadores permiten al usuario establecer los colores con los que quiere visualizar las páginas. Si tiene esta opción activada no obedecerá a lo que nosotros especifiquemos.

ETIQUETAS

La etiqueta OL tiene varias opciones. La primera, type, sirve para especificar el tipo de numeración que queremos:

1 - Números (1,2,3,4,...) A - Letras mayúsculas (A, B, C, D,...) a - Letras minúsculas (a, b, c, d,...) I - Números romanos en mayúsculas (I, II, III, IV,...) i - Números romanos en minúsculas (i, ii, iii, iv,...)

EJEMPLO i.martillos ii.clavos iii.destornilladores iv.tornillos

15

Que se consigue con:

<ol type=i>

Se puede especificar también el número en el que queremos que empiece la lista con la opción start=n, aunque no lo admiten todos los navegadores.

Listas desordenadas (no numeradas)El símbolo que aparece al principio se puede cambiar con type. Las posibles opciones sondisc (disco) square (cuadrado) y circle (círculo).

Con <ul type=square> queda:

martillos clavos destornilladores tornillos

No es conveniente usar la etiqueta UL para establecer márgenes.

Espacios Adicionales Se utiliza cuando se desea separar palabras y que se visualicen en pantalla. Para este caso se coloca un código representa una letra o un carácter. Por ejemplo el código del espacio en blanco es (Non Breaking SPace). Si escribimos obtendremos un espacio adicional:

Texto sin formatear

Existe una forma de mostrar el texto con saltos de línea y espacios sin tener que usar <br> y . Es el texto preformateado. Cuando ponemos texto en una página el navegador lo formatea, le quita los saltos de línea y los espacios adicionales. Podemos indicarle que no haga esto usando las etiquetas <pre> y </pre>. Cuando rodeamos un texto con estas etiquetas queda preformateado, es decir, queda tal cual:

<html> <head> <title>Tu primera página</title> </head> <body>

<pre>

16

Hola, me llamo PON TU NOMBRE. Esta es mi primera página web. HTML es una cosa muy fácil. </pre>

</body> </html>

Tachado

Para el texto tachado se usa la etiqueta <strike> (strikeout):

<strike>Tachado</strike> -> Tachado

Puede no estar implementada en todos los navegadores.

Teletipo

Se puede mostrar el texto como si fuese escrito por una máquina de escribir usando la etiqueta <tt> (TeleType):

Con esta etiqueta el texto no sale preformateado como con pre, se eliminan los espacios adicionales.

Grande

Con las etiquetas <big> y</big> el texto aparece con un tamaño mayor al normal.

<big>Grande</big> -> Grande

Se pueden encadenar varios <big> pero no se asegura que el texto sea más grande que uno solo.

Se puede usar también las etiquetas <font size="+1"> y </font>.

17

Pequeño

Es lo opuesto a la etiqueta big, con esta tenemos un texto más pequeño de lo normal:

<small>Pequeño</small> -> Pequeño

Al igual que con big, se pueden encadenar varios small.

Parpadeo

Esta etiqueta produce un texto parpadeante. No está implementada en todos losnavegadores (creo que sólo está en el navigator). No se recomienda su uso, es MUY incómodo leer páginas con texto parpadeante. Si en tu navegador no funciona te puedes considerar afortunado:

<blink>Parpadeo</blink> -> Parpadeo

Texto en Movimiento :

Esta etiqueta produce un texto que se desplaza por la pantalla del navegador. No está implementada en todos los navegadores (creo que sólo está en el explorer, konkeror).

<MARQUEE> Texto que se desplaz</MARQUEE> que ocupa todo el ancho de pantalla,

<MARQUEE WIDTH=50% HEIGTH=60%>Esta marquesina ocupa el 50& de ancho de la pantalla y 60% de alto en pixel </MARQUEE>

ALING: Modifica el alineamiento del texto que rodea a la marquesina que puede ser:

TOP : ArribaMIDDLE: en medioBOTTOM: Abajo

BEHAVIOR: Permite definir la manera del desplazamiento, que puede serSCROLL: Valor por defectoSLIDE: Aparece por un lado y se desplaza a otro quedándose allí.ALTERNATE: Se desplaza alternativamente de un lado a otro, siempre dentro del límite de la marquesina

BGCOLOR: Se modifica el color del fondo de la marquesina.

18

DIRECTION: Modifica la dirección estándar( LEFT) <MARQUEE DIRECTION= RIGHT> TEXTO </MARQUEE>

LOOP: Indica las veces que se desea que aparezca el texto. Es indefinido por defecto.

Ejemplo aplicando todas las opciones:

<MARQUEE WIDTH=50% HEIGTH=60% ALING= BOTTOM BEHAVIOR:= ALTERNATE BGCOLOR=”#FF7070” DIRECTION= RIGHT > HOLA MUNDO </MARQUEE>

TABLAS

Definición de una tabla

Las tablas son muy útiles para mostrar la información con un formato flexible y más elegante que una simple lista o que con texto formateado. Se usan mucho para dar formato a la página; es lo que usan las páginas que muestran la información en varias columnas.

En este capítulo vamos a ver una sencilla introducción a las tablas

Para montar una tabla en nuestro documento lo primero es usar las etiquetas <table> y </table>.

Dentro de la tabla sólo podemos meter el título de la tabla (caption) o filas (tr), no puede haber otros elementos dentro de la tabla. Donde sí podemos meter otros elementos es dentro de las filas (encabezamientos ó celdas). Para mostrarlo gráficamente:

TABLE +----Caption +----TR +----TH +----TD

Veamos una tabla ejemplo. El siguiente código:

<table border=1><caption>Tabla Ejemplo</caption><tr>

<th>Columna 1</th><th>Columna 2</th>

<tr><td>10</td><td>20</td>

</tr></table>

19

produce la siguiente tabla:

Tabla Ejemplo

Columna 1 Columna 2

10 20

Ahora vamos a analizar los elementos uno a uno:

Caption

Con este podemos ponerle un título a la tabla. Este título puede ir encima o debajo de la tabla. Para indicar dónde lo queremos usamos la opción align y sus valores posible son top o bottom. Si no especificamos nada se coloca encima de la tabla.

El ejemplo anterior usando <caption align=bottom>:

Columna 1 Columna 2

10 20

Tabla Ejemplo

No es necesario poner un título a la tabla, pero si se pone debe ir justo debajo de la etiqueta <table> y sólo puede haber uno.

TR (table row)

Después de colocar el título colocamos las líneas. <tr> indica el comienzo de una línea y </tr> el final. Dentro de una línea sólo podemos meter elementos td o tr.

Esta etiqueta tiene unas opciones para alinear la etiquetas que contiene horizontalmente y verticalmente.

TH (Table header)

Con las etiquetas <th> y </th> podemos colocar encabezamientos a las columnas. Estos encabezamientos en algunos navegadores aparecen en negrita. Esta etiqueta tiene las misma opciones que la etiqueta td.

Esta etiqueta se suele usar poco.

TD (table data)

Esta etiqueta puede contener cualquier cosa en su interior, desde lista hasta otras tablas. Debe ir dentro del par de etiquetas <tr> </tr>

20

USO DE FRAMES

Los Frames son recuadros o marcos que se utiliza en HTML para dividir la pantalla en dos áreas o zonas actuando en forma independiente una de otra.

Se caracteriza porque al pulsar un vínculo en un frame (índice) se carga en otro (llamado principal). Esto facilita la navegación ya que nunca se sale del menú principal.

Para realizar una página utilizando frames, se deben crear tres archivos html, en el primero se crea el documento de definición, en el segundo se creará el indice y en el tercero será la página princiapal.

Documento de definición.

Primero se debe pensar en cuantas zonas va a tener la página, los frames se pueden distribuir en columnas o filas.

El código inicial para dividir el documento y crear las dos zonas es el siguiente:

<HTML> <HEAD><TITLE> Página utilizando Frames </TITLE></HEAD>

<FRAMESET Cols=”20%, 90%”><FRAME SRC=”indice.html”><FRAME SRC=”principal.htm1” NAME =”principal”></FRAMASET>

<HTML>

Este archivo se guardará como home.html

En el ejemplo anterior vemos las siguientes etiquetas:

FRAMESET permite definir las áreas de trabajo <FRAMESET Cols =”20%,80%”> Se le indica al código HTML que se quiere dividir la pantalla en xx columnas y yy filas. <FRAME SRC=”indice.html”> Para el contenido del Frame de la izquierda, menú. <FRAME SRC=presentación.html” NAME =”principal”> para el contenido del segundo FRAME; la etiqueta NAME indica que todas las páginas se dirigirán allí.

21

Documentos para cada frame.Para el frame de la izquierda que se llamará indice.html se tiene:

<HTML><HEAD><TITLE> Indice</TITLE></HEAD><BODY BGCOLOR=”#FFBB00”><P>< A HREF=”principal.html” TARGET= ”principal”> Presentación </A><P>< A HREF=”pagina1l.html” TARGET= ”principal”> Una página cualquiera </A></BODY></HTML>

El atributo TARGET lanza la página solicitada en el vínculo a la zona principal.

Para el frame de la derecha que tendrá el nombre de presentación.html

<HTML><HEAD><TITLE> Presentación</TITLE></HEAD><BODY BGCOLOR=”#00FF00”> ***********texto pagina *********</BODY></HTML>

22

Guia básica html

Education

Transcript of Guia básica html