Continuando Con HTML y Sus Etiquetas

CUERPO DEL DOCUMENTO
TAMAO DE MRGENES DEL ELEMENTO BODY <BODY MARGIN> </BODY>

<body leftmargin="30" topmargin="30" rightmargin="30" bottommargin="30">
<p><b>leftmargin</b> para el margen izquierdo
<br><b>topmargin</b> para el margen superior
<br><b>rightmargin</b> para el margen derecho
<br><b>bottommargin</b> para el margen inferior
<br><b>Nota:</b>Los nmeros que van dentro de "" son los pxeles que se quieren mover
</p>
</body>
PARMETROS DE TEXTO
ALINEACIN DE PRRAFOS <P ALIGN> </P>
<body> <p align=left>Prrafo alineado por defecto </p>
<p align=right> prrafos a la derecha </p>
<p align=center> prrafos al centro </p>
<p align=justify> prrafos justificados</p>
</body>
TAMAO, TIPO Y COLOR DE LETRA <FONT FACE> </FONT>
<body> <font face="Arial" size=7 color="red">Probando texto</font>
<br><font face="Times new roman" size=6 color="cyan" > Probando texto </font>
<br><font face="Courier" size=5 color="teal"> Probando texto </font>
<br><font face="Cooper black" size=4 color="oliva"> Probando texto </font>
<br><font face=" Bradley Hand ITC " size=1 color="magenta"> Probando texto </font>
</body>
ENMARCAR TEXTO <FIELDSET> </FIELDSET>
<body> <fieldset><p align=center><font face="Arial" size=7 color="red">Probando texto</font>
<br><font face=" Bradley Hand ITC " size=1 color="magenta"> Probando texto </font></p>
</fieldset>
</body>
Para poder etiquetar este recuadro usamos <LEGEND> </LEGEND>:
<body>
<fieldset><legend>titulo del recuadro</legend><p align=center><font face="Arial" size=7
color="red">Probando texto</font>
<br><font face=" Bradley Hand ITC " size=1 color="magenta"> Probando texto </font></p>
</fieldset>
</body>
TABLAS <TABLE> </TABLE>

En su interior usaremos los sub elemento:
<TR> para definir una fila (Row) </TR>
<TH> para definir una cabecera (Header) </TH>
<TD> para definir una celda de datos (Data) </TD>
He aqu una tabla-resumen de los elementos utilizados y los atributos que admite cada uno:
TABLE TR TD
TH CAPTION
BORDER (ancho de borde)
x
BORDERCOLOR (color de borde)
x
ROWSPAN (anchura o altura equivalente en una fila)
x
x
COLSPAN (anchura o altura equivalente en una columna)
x
x
ALIGN (alineacin horizontal de los datos. Left, right, center)
x
x
x
x
VALIGN (alineacin vertical de los datos. Top, bottom, middle)
x
WIDTH (ancho de tabla o sus columnas)
x
x
HEIGTH (altura de tablas o sus filas)
x
x
CELLPADDING (separacin del borde y su contenido)
x
CELLSPACING(separacin de una celda a otra)
x
NOWRAP (impide que los textos se trunquen en esp. blancos)
x
EVENTS (*)
x
x
x
x
*EVENTS Para capturar todos los eventos tpicos de los navegadores en cualquiera de las partes de
una tabla, es necesario JavaScript.
Por ejemplo: <TABLE BORDER onMouseOver="javascript:alert('Aviso')"> ... </TABLE>
Recientemente se han implementado al elemento <TABLE> algunos atributos muy interesantes que
permiten definir qu bordes o lneas de la tabla se mostrarn:
Este atributo sirve para definir qu bordes del marco de la tabla sern
visibles: <TABLE FRAME="valor"> ... </TABLE> donde valor puede ser:
void - Ningn lado (por defecto).
above - Slo el borde superior
below - Slo el borde inferior.
hsides - Slo los bordes superior e inferior.
vsides - Slo los lados derecho e izquierdo.
lhs - Slo el lado izquierdo.
rhs - Slo el lado derecho.
box - Los cuatro lados.
border - Los cuatro lados (no es lo mismo que el ya conocido)
Y este otro sirve para definir qu bordes de la tabla sern visibles: <TABLE RULES="valor"> ...
</TABLE> donde valor puede ser:
none - Ninguna lnea de divisin (por defecto).
groups - Slo aparecen lneas de divisin entre grupos de filas y grupos de columnas.
cols - Slo aparecern lneas de divisin entre filas.
rows - Slo aparece lneas de divisin entre columnas.
Ejemplos:
Tabla de 3x2:
<body>
<table border> 
<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>
</body>
Tabla con <ROWSPAN>

<body>
<table border>
<tr>
<td rowspan=2>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
</tr>
</table>
</body>
Tabla con <COLSPAN>

<body>
<table border>
<tr>
<td colspan=2 align=center>Celda 1</td>
<td>Celda 2</td>
</tr>
<tr>
<td>Celda 3</td>
<td>Celda 4</td>
<td>Celda 5</td>
</tr>
</table>
</body>
Tabla con cabecera <TH>

<body>
<table border>
<tr>
<th>Varones</th>
<th>Mujeres</th>
</tr>
<tr>
<td>Jose</td>
<td>Maria</td>
</tr>
<tr>
<td>Carlos</td>
<td>Dora</td>
</tr>
</table>
</body>
Tabla con cabeceras laterales

<body>
<table border>
<tr>
<th rowspan=2>Bloque A</th>
<td>Casa 1</td><td>Casa 2</td><td>Casa 3</td>
</tr>
<tr>
</tr>
<tr>
<th>Bloque B</th>
</tr>
</table>
</body>
Tabla con cabeceras superiores y laterales, tabla centrada, contenidos centrados y ttulo al
pie:
<body>
<center>
<table border>
<caption align=bottom>Semestre 2015-I</caption>
<tr>
<th> </th><th>Practica 1</th><th>Practica 2</th><th>Practica
3</th>
</tr>
<tr align=center>
<th>ASENCIOS</th><td>12</td><td>09</td><td>15</td>
</tr>
<tr align=center>
<th>JAMANCA</th><td>13</td><td>11</td><td>16</td>
</tr>
<tr align=center>
<th>MAGUIA</th><td>08</td><td>11</td><td>13</td>
</tr>
</table>
</center>
</body>
Usando cellpadding y cellspacing:

<body>
<table border cellpadding=0 cellspacing=10>
<tr>
<td>1</td> <td>3</td> <td>5</td>
</tr>
<tr>
<td>2</td> <td>4</td> <td>6</td>
</tr>
</table>
</body>
Anidando tablas dentro de otra tabla

<body>
<table border>
<tr>
<td>1</td><td>3</td>
<td>5
<table border>
<tr>
<td>a</td><td>c</td>
</tr>
<tr>
<td>b</td><td>d</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>2</td><td>4</td><td>6</td>
</tr>
</table>
</body>
Par dar color a las tablas y sus bordes:

<table border bgcolor="black">
<tr><td bgcolor="red">tierra</td>
<td bgcolor="orange">fuego</td>
</tr>
<tr><td bgcolor="blue"><font color="white">agua</font></td>
<td bgcolor="cyan">aire</td>
</tr>
</table>
Tambin se puede usar una imagen como fondo de toda la tabla:

<table border background="imagen.jpg">
....
....
</table>
De slo una celda:

<table border>
<tr><td background="imagen.jpg"> texto </td></tr>
</table>
O de toda la fila:
<table border >
<tr background="imagen.jpg"><td> texto </td></tr>
....
</table>
Tabla que solamente muestra los cuatro bordes
<table frame="border" rules="none">
<tr>
<td>a</td> <td>b</td> <td>c</td>
</tr>
<tr>
<td>d</td> <td>e</td> <td>f</td>
</tr>
</table>
Lista de cdigos RGB
Puedes probar los diez primeros para hacerte una idea:
White rgb=#FFFFFF
Red rgb=#FF0000
Green rgb=#00FF00
Blue rgb=#0000FF
Magenta rgb=#FF00FF
Cyan rgb=#00FFFF
Yellow rgb=#FFFF00
Black rgb=#000000
Aquamarine rgb=#70DB93
Baker's Chocolate rgb=#5C3317
Blue Violet rgb=#9F5F9F
Brass rgb=#B5A642
Bright Gold rgb=#D9D919
Brown rgb=#A62A2A
Bronze rgb=#8C7853
Bronze II rgb=#A67D3D
Cadet Blue rgb=#5F9F9F
Cool Copper rgb=#D98719
Copper rgb=#B87333
Coral rgb=#FF7F00
Corn Flower Blue rgb=#42426F
Dark Brown rgb=#5C4033
Dark Green rgb=#2F4F2F
Dark Green Copper rgb=#4A766E
Dark Olive Green rgb=#4F4F2F
Dark Orchid rgb=#9932CD
Dark Purple rgb=#871F78
Dark Slate Blue rgb=#6B238E
Dark Slate Grey rgb=#2F4F4F
Dark Tan rgb=#97694F
Dark Turquoise rgb=#7093DB

Dark Wood rgb=#855E42
Dim Grey rgb=#545454
Dusty Rose rgb=#856363
Feldspar rgb=#D19275
Firebrick rgb=#8E2323
Forest Green rgb=#238E23
Gold rgb=#CD7F32
Goldenrod rgb=#DBDB70
Grey rgb=#C0C0C0
Green Copper rgb=#527F76
Green Yellow rgb=#93DB70
Hunter Green rgb=#215E21
Indian Red rgb=#4E2F2F
Khaki rgb=#9F9F5F
Light Blue rgb=#C0D9D9
Light Grey rgb=#A8A8A8
Light Steel Blue rgb=#8F8FBD
Light Wood rgb=#E9C2A6
Lime Green rgb=#32CD32
Mandarian Orange rgb=#E47833
Maroon rgb=#8E236B
Medium Aquamarine rgb=#32CD99
Medium Blue rgb=#3232CD
Medium Forest Green rgb=#6B8E23
Medium Goldenrod rgb=#EAEAAE
Medium Orchid rgb=#9370DB
Medium Sea Green rgb=#426F42
Medium Slate Blue rgb=#7F00FF
Medium Spring Green rgb=#7FFF00
Medium Turquoise rgb=#70DBDB
Medium Violet Red rgb=#DB7093
Medium Wood rgb=#A68064
Midnight Blue rgb=#2F2F4F
Navy Blue rgb=#23238E
Neon Blue rgb=#4D4DFF
Neon Pink rgb=#FF6EC7
New Midnight Blue rgb=#00009C
New Tan rgb=#EBC79E
Old Gold rgb=#CFB53B
Orange rgb=#FF7F00
Orange Red rgb=#FF2400
Orchid rgb=#DB70DB
Pale Green rgb=#8FBC8F
Pink rgb=#BC8F8F
Plum rgb=#EAADEA
Quartz rgb=#D9D9F3
Rich Blue rgb=#5959AB

Salmon rgb=#6F4242
Scarlet rgb=#8C1717
Sea Green rgb=#238E68
Semi-Sweet Chocolate rgb=#6B4226
Sienna rgb=#8E6B23
Silver rgb=#E6E8FA
Sky Blue rgb=#3299CC
Slate Blue rgb=#007FFF
Spicy Pink rgb=#FF1CAE
Spring Green rgb=#00FF7F
Steel Blue rgb=#236B8E
Summer Sky rgb=#38B0DE
Tan rgb=#DB9370
Thistle rgb=#D8BFD8
Turquoise rgb=#ADEAEA
Very Dark Brown rgb=#5C4033
Very Light Grey rgb=#CDCDCD
Violet rgb=#4F2F4F
Violet Red rgb=#CC3299
Wheat rgb=#D8D8BF
Yellow Green rgb=#99CC32
LINKS O ENLACES:
Para definir enlaces de hipertexto se usa: <A> de la siguiente manera:
<A HREF="direccion">Texto del enlace</A>
<body>
<a href="http://190.40.3.3/sigaunasam/public">Siga web</a>
</body>
Enlaces a otras zonas de la misma pgina (Enlaces locales)

Enlace:<a href="#nombre">texto del enlace</a>
Enlazado: :<a Name="nombre">.</a>
Como has visto, el punto de enlace se realiza en el texto escrito antes del cierre del elemento </A>,
pero tambin puede hacerse con una imagen cualquiera, que ira en lugar del texto, incluso puedes
poner el texto junto con una imagen. Por ejemplo para hacer un link que nos lleve al ndice desde
una flecha verde, se escribe:
<body >
Siguiente pgina<A HREF="file:///C:/Users/katerine/Desktop/ix.html"><img
src="C:\Users\katerine\Pictures\prueba\FLECHAS.jpg"></A>.
</body>
Y este sera el resultado:
PRACTICA: CREA UN SITIO WEB REAL PONIENDO EN PRACTICA LOS CONOCIMIENTOS ADQUIRIDOS
HASTA AHORA. DEBEMOS INCLUIR, TITULOS IMGENES, PARRAFOS, LINKS, TABLAS
<table width="100%" height="250px" cellspacing="1px" border="1">
<tr height="50px">
<td colspan="2px">
<table title="Banner" border="0" >
<tr>
<td> <font face color="#70DB93" >BANNER</font></td>
</tr>
</table>
</td>
</tr>
<tr height="200px">
<td>
<table title="Menu" border="0" width="100px">
<tr><td align=center><font face color="blue">Men</font></td></tr>
<tr><td align=center><font face color="blue">Vnculo 1</font></td></tr>
</table>
</td>
<td>
<table title="Contenido" border="0" width="400px">
<tr>
<td><font face color="#FF7F00">Ac va el contenido</font></td>
</tr>
</table>
</td>
</tr>
</table>

Continuando Con HTML y Sus Etiquetas

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Continuando Con HTML y Sus Etiquetas

Загружено:

Авторское право:

Доступные форматы

CUERPO DEL DOCUMENTO

TAMAO DE MRGENES DEL ELEMENTO BODY <BODY MARGIN> </BODY>

TABLAS <TABLE> </TABLE>

BORDER (ancho de borde)

Tabla con <ROWSPAN>

Tabla con <COLSPAN>

Tabla con cabecera <TH>

Tabla con cabeceras laterales

Usando cellpadding y cellspacing:

Anidando tablas dentro de otra tabla

Par dar color a las tablas y sus bordes:

Tambin se puede usar una imagen como fondo de toda la tabla:

De slo una celda:

Dark Turquoise rgb=#7093DB

Rich Blue rgb=#5959AB

Enlaces a otras zonas de la misma pgina (Enlaces locales)

Вам также может понравиться