ERICK HERNANDEZ TORRES 6-1

Tablas

En HTML también podemos incluir arreglos de tablas. Se deben utilizar varias etiquetas:

Etiqueta <table></table>

Señala el inicio y final de una tabla. Sus atributos son:

• Align Establece la alineación de la tabla o texto mediante

ALIGN=LEFT o ALIGN=RIGHT

• Bgcolor Establece el color de fondo de las celdas de la tabla

• Border Determina el ancho del borde en pixeles

• BorderColor Asigna un color al borde

• BorderDark Determina el color de la parte oscura de un borde de 3 dimensiones

• BorderLight Asigna el color de la parte clara de un borde de 3 dimensiones

• Caption Especifica el titulo para la tabla

• Cellpadding Establece la cantidad de espacio libre junto al contenido de

una celda

• Cellspacing Asigna la cantidad de espacio entre las celdas de una tabla

• Width Determina el ancho de la tabla en pixeles o en un porcentaje

Etiqueta <th> </th>

Indica al navegador cliente que exhiba el texto como un encabezado en la primera fila de una

tabla. Atributos principales:

• Colspan especifica el número de celdas que cubre el encabezado

• Align Determina la posición del texto del titilo

Etiqueta <tr> </tr>

Indica al navegador que exhiba el texto dentro de una fila; puede también interpretarse como la

etiqueta que define filas.

• Align Alineación del texto/objetos en toda la fila

Etiqueta <td> </td>

La etiqueta de datos de la tabla, es la que identifica a las columnas o celdas específicas de una

tabla. Atributos principales:

• Align Alineación del texto/objeto de la celda

• Bgcolor Color de fondo de la celda

• Background imagen de fondo de una celda

• Width Ancho de la celda/columna con respecto al ancho de la tabla

Solo precisa definir el ancho en la primera celda de la columna.

Recuerde que dentro de una celda, usted puede insertar desde texto o un gráfico hasta una tabla

entera.

<html>

<head> <title>Curso de HTML</title> </head>

Bienvenidos al curso de HTML</h1></center><br>

<h2>Información General</h2>

Este curso muestra los conceptos básicos del uso de

etiquetas e instrucciones en la elaboración de

documentos <b><i><font color="#000080">HTML</font></i></b>.<br><br>

<br>

Es muy importante saber ubicar los gráficos y combinar

de buena manera los colores para brindar una buena imagen

Una página WEB es muy importante, pues provee a nuestro

trabajo una ventana al mundo.<br>

<tr><th colspan=3>Directorio Telefónico</th></tr>

Nombre

</td>

Teléfono

</td>

E-Mail

</td>

</tr>

<tr>

<td>

José Rodríguez

</td>

<td>

223454

</td>

<td>jose@prueba.com.bo</td>

</tr>

<tr>

<td>

Carolina Nuñez

</td>

<td>

453444

</td>

<td>carolina@prueba.com.bo</td>

</tr>

</table>

</body>

</html>

Numeración y viñetas

En HTML todo es posible, y tal cual en un editor de texto podemos trabajar con numeración y

viñetas, lo podemos hacer acá.

Etiqueta <ul> </ul>

Indica al navegador que cree una lista con viñetas no ordenada.

No solamente usada para fines de numeraciones y viñetas, sino también para fines de sangría u

tabulaciones.

Etiqueta <ol> </ol>

Listas ordenadas, esta etiqueta predeterminada indica al navegador que numera la lista de

elementos comprendidos dentro de las etiquetas <ol>

Etiqueta <li> </li>

Se usa para indicar al navegador que exhiba el texto que le sigue como un elemento de línea en

una lista. Atributos:

• Type Especifica el tipo para listas ordenadas Type=A Usa letras

mayusculas, TYPE=a emplea letras minúsculas, Type=I Usa

números romanos grandes, Type=i usa números romanos pequeños

y Type=1 usa números arábigos.

Type también puede servir para definir la forma de la viñeta en las

listas no ordenadas. Type=DISC, CIRCLE y SQUARE son las

opciones disponibles.

• Value Indica que se inicie la numeración a partir del número especificado.

Creamos una nueva página para el siguiente ejemplo:

Ejemplo:

<html>

<head> <title>Curso de HTML</title> </head>

Bienvenidos al curso de HTML</h1></center><br>

<h2>Debemos a comprar</h2><br>

<ul>

<li>Camisas para José</li>

<li>Loción para Daniel</li>

</ul><br>

<h2>Estudiar para mañana</h2><br>

<ol>

<li type=a>Geometría</li>

<li>ciencias Sociales</li>

</ol><br>

<h2>Actividades de la semana</h2><br>

<ol>

<li type=i>Asistir a la Universidad</li>

<li>Comprar Disco</li>

<li>Llevar el auto al mecánico</li>

</ol><br>

<h1>Objetivos</h1>

<ul>El uso de estas etiquetas también puede ayudar a mover

el texto en base a tabulaciones o sangrías de texto, para

diferenciar parrafos o textos de los encabezamientos.

</ul>

</body>

</html>

Grabamos el nuevo ejemplo con el nombre “pag3.html”. Hasta este punto tenemos 3 páginas

HTML.

Hipervínculos

Un vínculo hipertextual es un texto, botón o imagen que al seleccionar nos lleva a otra dirección

URL, página WEB o recurso.

Etiqueta <A> </A>

La etiqueta <A> que viene de “ancla”, denota el inicio y el final de una instrucción que contiene

alguna forma de vínculo o hipervínculo. Esta etiqueta permite al usuario vincularse a otra

ubicación dentro del mismo documento HTML, a otro sitio WEB, a un servidor FTP, enlace de

correo electrónico, ... Atributos:

• HREF Recurso al cual se hace referencia el hipervínculo

• NAME Especifica el nombre de la posición a donde apuntar

• TARGET Destino del enlace (generalmente para páginas con Frames)

Por ejemplo, desde una nueva página, que llamaremos pag4.html, crearemos enlaces a las 3

páginas anteriores y además otros enlaces importantes.

En este ejemplo, aplicaremos también los atributos para colores de los vínculos de la etiqueta

Body.

Ejemplo:

<html>

<head> <title>Página de enlaces</title> </head>

<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif"

link="#000080" vlink="magenta" alink="black">

Enlaces</h1><br>

<a href="index.html">Página Principal

Página Uno</a><br>

<a href="pag2.html">Página Dos</a><br>

<a href="pag3.html">Página Tres</a><br>

<br>

<a href="http://www.bolivia-internet.com/">Bolivia en Internet</a><br>

<a href="ftp://ftp.microsoft.com/pub/">FTP de Microsoft</a><br>

<a href="mailto:cae@bolivia-internet.com">Envía comentarios

sobre este manual por E-Mail</a><br>

<a href="#tope">De vuelta arriba</a>

</center>

</body>

</html>

Podrá notar que los enlaces de la parte inferior hacen referencia a recursos que se encuentran en

Internet. Reemplazando la dirección E-Mail del ultimo enlace, podrá crear un enlace a su E-Mail.

El último enlace hace referencia a una porción de la misma página, que fue definida al inicio de

la página HTML. Esta parte es útil para accesos a partes diversas de una sola página.

Manual Básico de HTML

Página 21

Frames

Ofrece la posibilidad de utilizar marcos y varias páginas en una sola.

Etiqueta <frameset> </frameset>

Define la disposición gráfica de los marcos en la pantalla.

Atributos:

• Rows Determina el alto de las filas

• Cols Determina el ancho de las columnas.

• Framespacing Espacio entre frames

Etiqueta <frame></frame>

Define un solo marco que forma parte del conjunto de marcos definidos en <frameset>.Sus

atributos son:

• Marginheight Determina que tanto espacio vertical (en pixeles) existe

entre el objeto ubicado en un marco, y los extremos superior

o ingerior de este.

• MarginWidth Determina que tanto espacio horizontal (en pixeles) existe

entre el objeto ubicado en un marco, y los extremos

izquierdo o derecho de éste.

• Name Ofrece la capacidad de Dar nombres a las ventanas

FRAME, de modo que puedan ser utilizados como destino

de los hipervínculos.

• Noresize indica que el usuario no puede redimensionar el marco

• Scrolling Habilita una barra de desplazamiento para un marco.

Existen tres parámetros posibles SCROLLING=YES,

SCROLLING=NO y SCROLLING=AUTO que habilita la

barra solo si es necesario

• SRC indica que exhiba en un marco el contenido de un

documento HTML.

Etiqueta <noframes></noframes>

Etiqueta que es usada para desplegar un texto o una página alternativa cuando un navegador no

es capaz de desplegar los marcos.

Veamos un ejemplo que resume todo esto. Debemos crear un nuevo archivo html, al cual

llamaremos: frames.html.

Ejemplo :

<html>

<head> <title>Página de frames</title> </head>

<frame name="izquierda" src="pag4.html" marginwidth="0"

marginheight="0" scrolling="auto" frameborder="no">

<frame name="superior" src="pag2.html" marginwidth="0"

marginheight="0" scrolling="auto" frameborder="no">

<frame name="principal" src="pag3.html" marginwidth="0"

marginheight="0" scrolling="auto" frameborder="no">

</frameset>

Su navegador no puede desplegar frames.

</center>

</noframes>

</html>

Una vez que cargue la nueva página frames.html podrá ver los marcos que se crearon.

Notará que los enlaces del marco derecho aparecen en el mismo marco, lo que debemos hacer es

redireccionar estos enlaces usando el atributo target en el ejemplo pag4.html que quedaría de

esta manera:

Ejemplo :

<html>

<head> <title>Página de enlaces</title> </head>

<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif"

link="#000080" vlink="magenta" alink="black">

Enlaces</h1><br>

<a href="index.html" target="principal">Página Principal

Página Uno</a><br>

<a href="pag2.html" target="principal">Página Dos</a><br>

<a href="pag3.html" target="principal">Página Tres</a><br>

<br>

<a href="http://www.bolivia-internet.com/" target="principal">Bolivia

en Internet</a><br>

<a href="ftp://ftp.microsoft.com/pub/" target="principal">FTP de

Microsoft</a><br>

<a href="mailto:cae@bolivia-internet.com">Envía comentarios

sobre este manual por E-Mail</a><br>

<a href="#tope">De vuelta arriba</a>

</center>

</body>

</html>

Guarde este archivo con el nombre pag4.html y haga una actualización de la página en su

navegador para notar los cambios.

Otras etiquetas útiles

A continuación algunas etiquetas que pueden ser útiles al momento de elaborar las páginas

HTML. Se detalla el objetivo de cada una de las etiquetas y un ejemplo.

Etiqueta de comentarios 

Se trata de una etiqueta que puede ser introducida en cualquier parte del código y que es utilizada

para realizar acotaciones y/o comentarios.

Sintaxis de Ejemplo:

Etiqueta de comentarios <comment> </comment>

Se trata de una etiqueta que puede ser introducida en cualquier parte del código y que es utilizada

para realizar acotaciones y/o comentarios.

Sintaxis de Ejemplo:

<comment>Los comentarios se introducen de esta manera</comment>

Etiqueta <address></address>

Ofrece una manera de dr formato a un pequeño cuerpo de texto que se asemeje a la rotulación de

una carta convencional.

Sintaxis de ejemplo:

<address>Roberto Rojas<br>

POBOX 2282<br>

La Paz – Bolivia</address>

Etiqueta <cite> </cite>

El texto dentro de la etiqueta <cite> aparece en cursivas para representar una cita

Sintaxis de ejemplo:

<cite>Este texto estará inclinado</cite>

Etiqueta <code> </code>

El texto dentro de la etiqueta <code> aparece en una fuente con caracteres mono espaciados

cuando se visualiza a través de un navegador.

Sintaxis de ejemplo:

<code>Este texto aparece con tipo de letra especial</code>

Etiqueta <credit> </credit>

Esta etiqueta se emplea para indicar los créditos por el material incluido en un documento. A

menudo se asignan créditos para las fuentes e individuos que se citan en forma directa.

Sintaxis de ejemplo:

<credit>Foto usada bajo permiso de Carlos Aníbarro</credit>

Etiqueta <em> </em>

Indica que se debe dar énfasis al texto que se contiene. EL navegador resaltará este texto con

negrillas e inclinación italica.

Sintaxis de ejemplo:

<em>Texto resaltado</em>

Etiqueta <kbd> </kbd>

La etiqueta <kbd> indica al navegador que interprete el texto especificado en una fuente en

negritas de ancho fijo. Por lo regular, esta etiqueta se usa para ejemplificar una entrada del

teclado hecha por el usuario.

Sintaxis de ejemplo:

<kbd>Teclee su mensaje acá:</kbd>

Etiqueta <nobr> </nobr>

La etiqueta <nobr> impide que el navegador inserte un salto de línea, incluso cuando es

adecuado el ajuste de texto. Algunas cadenas de texto no deberían romperse bajo ninguna

circunstancia. Un buen ejemplo de una cadena de texto que debe permanecer sin cortes es un

URL extenso.

Sintaxis de ejemplo:

No deseo que esta dirección URL larga sea cortada:

<nobr>http://www.bolivia-internet.com/irc</nobr>

Etiqueta <p> </p>

La etiqueta <p> o de párrafo, indica el inicio y el final de oraciones a exhibir con un solo párrafo.

Sintaxis de ejemplo:

<p>a partir de ahora definimos párrafos de esta manera.</p>

<p align=”center”>Párrafo en el centro</p>

<p align=”left”>Párrafo a la izquierda</p>

<p align=”right”>Párrafo a la derecha</p>

Etiqueta <pre> </pre>

La etiqueta <pre> significa texto “preformateado” y se usa para conservar espacios y saltos de

línea en cuerpos de texto. Esta etiqueta resulta útil en el formateo de un párrafo completo que el

autor quisiera que el navegador cliente lo exhibiese palabra por palabra.

Sintaxis de ejemplo:

<pre>El texto que usted ve.

Aparecerá tal cual, incluidos los retornos de carro</pre>

Etiqueta <s> </s> o <strike> </strike>

Instruye al navegador que tache el texto incluido entre las etiquetas.

Sintaxis de ejemplo:

<strike>Este texto esta tachado</strike>

Etiqueta <strong> </strong>

Hace que el navegador exhiba el texto en negritas. Algunos navegadores muestran el texto en

cursivas.

Sintaxis de ejemplo:

<strong>Este texto esta sobre saltado</strong>

Etiqueta <sub> </sub>

Instruye al navegador que exhiba el texto especificado como subíndice.

Sintaxis de ejemplo:

Agua: H<sub>2</sub>0

Etiqueta <sup> </sup>

Indica al navegador exhibir el texto especificado como super índice

Sintaxis de ejemplo:

Mate: 2*2 = 2<sup>2</sup>.

Etiqueta <tt> </tt>

Etiqueta teletipo, instruye al navegador que exhiba el texto especificado en una fuente de ancho

fijo.

Sintaxis de ejemplo:

<tt>Este es un tipo de letra de teletipo</tt>

Etiqueta <var> </var>

Indica al navegador que exhiba el texto especificado en una fuente más pequeña, de ancho fijo.

Sintaxis de ejemplo:

<var>Este texto será mas pequeño y de formato especial</var>

Atributo bgproperties=”fixed ” del BODY

Indica a su navegador Internet Explorer que mantenga el fondo constante y no móvil de forma

vertical.

Sintaxis de ejemplo:

<body text=”#FFFFFF” bgcolor=”#000000” background=”fondo.gif”

bgproperties=”fixed”>

ERICK HERNANDEZ TORRES 6-1

jueves, 18 de abril de 2013

No hay comentarios:

Publicar un comentario