Programacion web Aprendices

jueves, 23 de agosto de 2012

etiqueta Img en HTML

esta etiqueta nos permite la inclucion de una imagen a nuestro sitio web o documento html, esta etiqueta maneja atributos como:

Id	name
src	width
height	border
alt	hspace
vspace

las propiedades que se manejan directamente en <img> son src, alt, border, hspace y vspace, sus funciones son :

src: aquí se coloca la dirección q tiene la imagen (C:\Users\JOSMAR\Pictures), este se encarga de llamarlo y mostrarlo,

alt: se coloca una descripción de la imagen, esto se utiliza cuando la imagen es muy pesada y se demore un poquito en cargar entonces antes de visualizar la imagen vera este texto en el campo donde ira la imagen.

hspace: se utiliza para dar espacio horizontal de una imagen. Atención:(este espacio se da adentro de la etiqueta <img>);

vspace: se utiliza para dar espacio vertical de la imagen. . Atención:(este espacio se da adentro de la etiqueta <img>);

border: con esta etiqueta le damos un borde en pixeles a la imagen. Atención:(este borde no es aconsejable colocárselo a una imagen, pero algunos exploradores como IE los colocan por defecto lo mejor es que cada imagen lleve este atributo "border="0" " para que se controle este atributo en todos los exploradores web.).

Iframe en html

Los Iframes en html son muy utilizados para evitar el re direccionamiento a otra pestaña o pantalla (depende el termino del target..), ademas de poder llamar a diferentes documentos html, php u otro ha cierto espacio en nuestra pagina web, a continuación veremos como se utilizan y por que utilizarlos.

Código:

<html>
<head>
<title>Iframes</title>
</head>
<body>
<table>
<tr>
<td><a href="http://programacionwevb.blogspot.com/" target="contenedor">mi blog</a></td>
<td><a href="http://programacionwevb.blogspot.com/2012/08/tablas-en-html.html" target="contenedor">tablas</a></td>
</tr>
<tr>
<td rowspan="2"><iframe name="contenedor" width="900px" height="500px"></frame></td>
</tr>
</table>
</html>

Iframes

mi blog

tablas

en el anterior cogimos una tabla con un iframe incluido, el cual tiene un menu que permite visualizar ambas paginas sin tener que ir a otra venta, esto es posible al atributo name:

<iframe name="contenedor" width="900px" height="500px">

que con el siguiente atributo de la etiqueta <a> los interconectan:

<a href="http://programacionwevb.blogspot.com/" target="contenedor">mi blog</a>

si tenemos el nombre del Iframe usamos el Target de la etiqueta <a> el cual va a cargar nuestra pagina sobre el Iframe que tenga ese nombre.

POR QUE UTILIZARLO?

por que nos ahorramos la recargada, re direccionamiento y todo lo tendríamos en una sola pagina principal, nos ahorrariamos las plantillas y código en estilos CSS.

martes, 21 de agosto de 2012

Div en Html

DIV

Esta etiqueta o Tag es un contenedor, se utiliza mucho para la estructura de una pagina web como para otras utilidades.

<html>
<head>
<title>Div</title>
</head>
<body>
<div align="center">HOLA MUNDO</div>
<div>hola mundo</div>
</body>
</html>

ejemplo:

Documento sin título

HOLA MUNDO

hola mundo

Esta Etiqueta utiliza atributos como:

align: se utiliza para la ubicación en x del elemento, este maneja los siguientes valores: center, left, right y justify.

id: identificador del Div, como cual quier elemento que contenga este atributo se sabe que se puede por este darle estilo atreves de CSS.

dir: dirección del texto, izquierda a derecha o de derecha a izquierda, maneja los siguientes valores: RTL o LTR.

Tablas en html

TABLAS

las tablas en Html son muy necesarias al momento de crear formularios o paginas bien estructuradas, son de muy buena ayuda en la parte de visualización de una pagina, una pagina bien estructurada y q no este sobrecargada de imágenes, colores etc.son muy poco agradables a la vista, uno de los problemas de visualización de toda pagina son su estructura por eso tenemos que manejar las tablas para que quede una pagina bien estructurada.

<html>
<head>
<title>Tablas</title>
</head>
<body>
<table border="1">
<tr><td>hola mundo</td></tr>
<tr><td>estamos utilizando tablas !</td><td>pero para q nos sirven ??</td></tr>
<tr><td>ya lo veremos</td> </tr>
</table>
</body>
</html>

resultado:

Documento sin título

hola mundo
estamos utilizando tablas !	pero para q nos sirven ??
ya lo veremos

etiquetas de la tabla

<table></table> declaración de una tabla

<tr><tr> fila de una tabla

<td><td> columna de una tabla

<hr/> linea transversal

atención: todo lo que se haga en una tabla se tiene q hacer adentro de la etiqueta <td>ejemplo</td>, si esto no se hace no lo mostrara o nos lo mostrara en un lugar diferente al de la tabla.

bordes de tablas y otros estilos

borde de una tabla: <table border="1">

color del borde: <table border="1" bordercolor="#FF6600">

color fondo de una tabla: <table bgcolor="#6699FF">

ancho de la tabla: <table width="300px"> (atencion: el ancho de una tabla se puede dar en px (pixeles) o en porcentajes).

alto de una pagina: : <table height="300px"> (atencion: el alto de una tabla se puede dar en px (pixeles) o en porcentajes).

también se puede utilizar estilos diseñados en CSS.

atributos utilizados en las etiquetas <td>

uno de los problemas q podemos encontrar a la hora de estructurar una pagina web por medio de tablas son los espacios q quedan si no se sabe manejar todos atributos de cada etiqueta, como por ejemplo en la etiqueta <td>.

hola mundo
estamos utilizando tablas !	pero para q nos sirven ??
ya lo veremos

esto pudimos ver en el ejemplo anterior, un espacio en blanco al lado del hola mundo, ¿por q se da este espacio?, pues por que las tablas son tan rígidas que ellas por defecto no se pueden acomodar, esto puede pasar y no es un error de explorador o de editor, es un error netamente de programador, pero hay una cura para eso como lo puede ser el colpans o el rowspan, estas son dos propiedades de la etiqueta <td>, a continuación veremos el mismo ejemplo pero utilizando estas dos propiedades.

<html>
<head>
<title>tablas</title>
</head>
<body>
<TABLE border="1" width="300px">
<tr><td colspan="2">hola mundo</td></tr>
<tr><td rowspan="2">estamos utilizando tablas !</td><td>pero para q nos sirven ??</td></tr>
<tr><td>ya lo veremos</td> </tr>
</TABLE>
</body>
</html>

Documento sin título

hola mundo
estamos utilizando tablas !	pero para q nos sirven ??
	ya lo veremos

ya podemos ver la diferencia entre estos dos ejemplos.

html programación paginas (textos)

etiquetas de texto

en las etiquetas para el manejo de texto podemos encontrar:

<p></p>,<a></a>(también es una etiqueta de funcionamiento), <b></b>,<strong></strong>,etc etc.

estas etiquetas nos ayudan a modificar la apariencia de algunos textos o palabras como también para ingresar textos.

<html>

<head>

<title>prueba</title>

</head>

<body>

<p>Hola mundo</p>

<strong>hola mundo</strong>

<a>hola mundo</a>

</body>

</html>

resultado:

Hola mundo

hola mundo hola mundo

esto es solo un ejemplo de algunas etiquetas para texto, acontinuacion veremos otras etiquetas y su funcionamiento:

FORMATOS DE TEXTOS

<b> </b>	texto en negrita
<strong> </strong>	texto en strong
<em> </em>	texto en em
<i> </i>	texto en i(Italic)
<small> </small>	texto en small

FORMATOS DE SALIDA

<tt> </tt>	`texto en tt(Teletype)`
<code> </code>	`texto en code`
<prev> </prev>	texto en prev
<samp> </samp>	`texto en samp`
<cite> </cite>	texto en cite

primeros pasos en HTML

Tags o etiquetas , son muy necesarias al momento de crear nuestro sitio web, cada etiqueta cumple una función o tarea diferente como :

re-direcciónar a otra pagina, dibujar, tipos de textos, tablas etc etc.

las etiquetas esenciales que nunca pueden faltar en una archivo html son <html></html>, <head></head>,<title></title> y <body></body> estas etiquetas son muy importantes por q son las que dan la estructura o las bases para que reconozca un archivo html.

Ejemplo: