Scribd
Cargar
27 vistas

2.-Tutorial HTML

Este documento proporciona una guía básica sobre la creación de tablas, hipervínculos y listas en HTML. Explica cómo agregar enlaces a páginas web, correos electrónicos y archivos utilizando etiquetas <a> y atributos como href. También describe cómo crear listas ordenadas y desordenadas con etiquetas <ul> y <ol> así como líneas horizontales con <hr>. Finalmente, ofrece instrucciones para diseñar tablas simples y complejas utilizando etiquetas como <table>, <tr>,

Cargado por

itzhnd
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
27 vistas

2.-Tutorial HTML

Este documento proporciona una guía básica sobre la creación de tablas, hipervínculos y listas en HTML. Explica cómo agregar enlaces a páginas web, correos electrónicos y archivos utilizando etiquetas <a> y atributos como href. También describe cómo crear listas ordenadas y desordenadas con etiquetas <ul> y <ol> así como líneas horizontales con <hr>. Finalmente, ofrece instrucciones para diseñar tablas simples y complejas utilizando etiquetas como <table>, <tr>,

Cargado por

itzhnd
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 11

Tutorial Básico de HTML (Segunda Parte)

Hipervínculos
Esta lección tratará sobre los links (vínculos).

Es muy sencillo. Hagámosle un link a "Open Directory Project". Inicia con...

<body bgcolor="#ffffff">
Open Directory Project
</body>

Coloca un par de etiquetas ancla.

<body bgcolor="#ffffff">
Visita <a>Open Directory Project</a>
</body>

Agrega el URL y es todo! "URL" significa Universal Resource Locator (en español varia la
traducción). Para que no te confundas con el nombre técnico dado a URL, sólo recuerda
que es una dirección.

<body bgcolor="#ffffff">
Visita <a href="http://dmoz.org/">Open Directory Project</a>
</body>

Un link más.

<body bgcolor="#ffffff">
¡Visita uth.hn!
</body>

Material facilitado por Ing. Gerardo Josué Portillo ([email protected])


<body bgcolor="#ffffff">
¡Visita <a href="http://www.uth.hn/">Netscape!</a>
</body>

Un link a un e-mail es similar, cambiando la URL por una dirección de correo.

<body bgcolor="#ffffff">
¡Envíame un <a href="mailto:[email protected]">mensaje!</a>
</body>

Se puede usar una imagen como link. En el ejemplo de "¡Visita uth.hn!" substituye la
palabra "uth!" por una etiqueta <IMG>.

<body bgcolor="#ffffff">
¡Visita <a href="http://www.uth.hn/"><img src="uth.gif" width="82" height="68" /></a>
</body>

Lo que daría como resultado:

Algo que origina muchas interrogantes es la forma en que se puede quitar el borde azul que
rodea una imagen cuando se usa como link. Con ésto...

<body bgcolor="#ffffff">
¡Visita <a href="http://www.uth.hn/"><img src="uth.gif" width="82" height="68"
border="0" /></a>
</body>

Los links dentro de las mismas páginas son un poco más difíciles de explicar, pero haré mi
mejor esfuerzo para no confundirte.

Primero localiza el lugar al que quieres que se dirijan al dar clic sobre tu link. Selecciona una
palabra y rodéala con las etiquetas ancla "<a>".

<a>Agrega</a> el URL y es todo!

Ahora asigna un nombre...

Material facilitado por Ing. Gerardo Josué Portillo ([email protected])


<a name="arriba">Agrega</a> el URL y es todo!

Lo que has hecho es marcar ese lugar para poderle hacer referencia...
Ahora establece el link...

¡Aquí hay algo.... <a>Excelente!</a>

Añade el documento de referencia...

¡Aquí hay algo... <a href="leccion4.html">Excelente!</a>

Y, por último, agrega el ancla del NOMBRE (NAME)...

¡Aquí hay algo... <a href="leccion4.html#arriba">Excelente!</a>

Listas

Hay dos tipos de Listas:


1. Ordenadas
2. Desordenadas

Listas Desordenadas
Las listas desordenadas son aquellas que no llevan numeración sino que llevan un caracter
para decorarlas:

<body bgcolor="#ffffff">
Lo que quiero para el día de mi graduación
<ul>
<li>una Cherokee 4x4 negra</li>
<li>una notebook a 9.6 Ghz.</li>
<li>una batería/guitarra</li>
<li>un jetski</li>
<li>a María Sharapova</li>
</ul>
</body>

El resultado sería:

Material facilitado por Ing. Gerardo Josué Portillo ([email protected])


Listas Ordenadas
Para hacer la lista ordenada cambia la etiqueta <ul> por <ol>...

<body bgcolor="#ffffff">
Lo que quiero para el día de mi graduación
<ol>
<li>una Cherokee 4x4 negra</li>
<li>una notebook a 9.6 Ghz</li>
<li>una batería/guitarra</li>
<li>un jetski</li>
<li>a María Sharapova</li>
</ol>
</body>

El resultado sería:

Línea Horizontal

Las líneas horizontales se crean con el tag <HR>

<body bgcolor="#ffffff">
<hr />
</body>

Algunas opciones para la línea horizontal...

<body bgcolor="#ffffff">
<hr width="20%" />
<hr width="50%" />
Material facilitado por Ing. Gerardo Josué Portillo ([email protected])
<hr width="100%" />
<hr width="20" />
<hr width="50" />
<hr width="100" />
</body>

El resultado sería:

Y de esta forma se alinea dentro de la página...

<body bgcolor="#ffffff">
<hr width="60%" align="left" />
<hr width="60%" align="right" />
<hr width="60%" align="center" />
</body>
El resultado sería:

Se puede controlar su grosor...

<body bgcolor="#ffffff">
<hr width="60%" size="1" />
<hr width="60%" size="3" />
<hr width="60%" size="8" />
<hr width="60%" size="15" />
</body>

El resultado sería:

Material facilitado por Ing. Gerardo Josué Portillo ([email protected])


Presentarla con un color sólido:

<body bgcolor="#ffffff">
<hr width="60%" size="1" NOSHADE />
<hr width="60%" size="3" NOSHADE />
<hr width="60%" size="8" NOSHADE />
<hr width="60%" size="15" NOSHADE />
</body>

El resultado sería:

Comentarios

Un comentario puede colocarse donde sea dentro de la página y es ignorado por el


navegador todo lo que se encuentre dentro de su etiqueta. Se pueden colocar mensajes
ocultos, como personales

<body>

<!-- Hola, si deseas conocerme escribeme -->

Mensajes de ayuda a quienes observan el código empleado

<!-- ¡Copia algo de mi y eres historia! -->

</body>

Material facilitado por Ing. Gerardo Josué Portillo ([email protected])


Tablas

Las tablas son una poderosa herramienta a la hora de mostrar y relacionar cierto tipo de
información. Aun cuando muchos sitios son construidos (por su naturaleza) sin usar una
simple tabla, existen algunas ocasiones en que el valor de las tablas se vuelve esencial.

Tabla Sencilla
Una tabla HTML puede ser considerada, de manera simple, como un grupo de filas donde
cada una de ellas contiene un grupo de celdas (y no alrevés). Las tablas, como toda
estructura en los documentos HTML, son definidas usando elementos. Entonces, una tabla
simple puede ser insertada en un documento HTML usando tres elementos: el elemento
HTML table (estructura contenedora principal), el elemento HTML tr (contenedor de fila) y
el elemento HTML td (celda).
<table border=1>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

El resultado es:

TR = Filas
TD = Celdas

Unificación de Celdas (Combinar celdas)


Para algunas tablas puedes necesitar unificar dos o más celdas en una sola que pasará a
ocupar el lugar de aquellas afectadas. Estas unificaciones pueden ser llevadas a cabo con
los atributos "rowspan" (para unificación vertical) y "colspan" (para unificación horizontal),
ambos disponibles para celdas (tag HTML td y tag HTML th).

Material facilitado por Ing. Gerardo Josué Portillo ([email protected])


COLSPAN
<table border=1>
<tr>
<td>Campo 1</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td colspan="2">Campos 4 y 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 7</td>
<td>Campo 8</td>
<td>Campo 9</td>
</tr>
</table>
El resultado es:

ROWSPAN
<table border=1>
<tr>
<td rowspan="3">Campo unificado</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td>Campo 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 8</td>
<td>Campo 9</td>
</tr>
</table>
Material facilitado por Ing. Gerardo Josué Portillo ([email protected])
El resultado es:

Ancho de Columna y Alto de Fila


Para manipular el alto de la fila usamos el atributo HEIGHT en la definición de la fila <TR>
Para manipular el ancho de la celda usamos el atributo WIDTH en la definición de la celda,
el Ancho solo se define una vez en la primea celda que definimos y este se aplica a todas
las celdas debajo de ella.

<table border=1>
<tr height=100>
<td width=50>Celda 1</td>
<td width=90>Celda 2</td>
<td width=80>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

El resultado es:

Material facilitado por Ing. Gerardo Josué Portillo ([email protected])


También podemos usar porcentajes en lugar de números fijos así las celdas se ajustarán de
acuerdo al ancho de la pantalla donde se vea la página WEB:

<table border=1>
<tr>
<td width=20%>Celda 1</td>
<td width=55%>Celda 2</td>
<td width=25%>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

El resultado es:

Borders y Coloreado de Tablas


Los bordes se definen con los atributos border y bordercolor, donde border define el ancho
del borde y bordercolor el color del mismo.
Con el atributo cellspacing determinados la separación entre las celdas y con bgcolor
definimos el color para las celdas de la tabla:

<table border=1 bordercolor=#0000ff cellspacing=0>


<tr>
<td width=20% bgcolor=yellow>Celda 1</td>
<td width=55% bgcolor=green>Celda 2</td>
<td width=25% bgcolor=#ff0000>Celda 3</td>
</tr>
<tr>
<td bgcolor=blue>Celda 4</td>
<td bgcolor=#ccaacc>Celda 5</td>
<td bgcolor=pink>Celda 6</td>
</tr>
</table>
Material facilitado por Ing. Gerardo Josué Portillo ([email protected])
El resultado es:

Material facilitado por Ing. Gerardo Josué Portillo ([email protected])

También podría gustarte