Claudia pinto: julio 2013

jueves, 4 de julio de 2013

DISEÑO DE PAGINA WEB

ESTRUCTURA DE UNA TABLA
1) el siguiente nivel corresponde a las etiquetas para formar cada fila (row) de la tabla, que son <TR> y </TR>

<TABLE BORDER>
<TR>
etiquetas de las distintas celdas de la primera fila
</TR>
<TR>
etiquetas de las distintas celdas de la segunda fila
</TR>
</TABLE>

2)
<TABLE BORDER>
<TR>
<TD>fila1-celda1</TD>
<TD>fila1-celda2</TD>
</TR>
<TR>
<TD>fila2-celda1</TD>
<TD>fila2-celda2</TD>
</TR>
</TABLE>

3) crea la siguiente tabla ..
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TD>fila1-celda1</TD>
<TD>fila1-celda2</TD>
<TD>fila1-celda3</TD>
</TR>
<TR>
<TD>fila2-celda1</TD>
<TD>fila2-celda2</TD>
<TD>fila2-celda3</TD>
</TR>

</TABLE>
</BODY>
</HTML>

4) ahora vamos a variar el espesor de los bordes, hacemos poniendo un signo = y un numero en (<TABLE BORDER=5>). el listado ahora debe estar asi
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<CAPTION>titulo de la tabla </CAPTION>
<TR>
<TD>fila1-celda1</TD>
<TD>fila1-celda2</TD>
<TD>fila1-celda3</TD>
</TR>
<TR>
<TD>fila2-celda1</TD>
<TD>fila2-celda2</TD>
<TD>fila2-celda3</TD>
</TR>

</TABLE>
</BODY>
</HTML>

5) para poner un texto ...., para poner una imagen ...., para poner un enlace
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<TD>este texto esta dentro de una celda</A></TD>
para poner una imagen
<TD><IMG SRC="imagen1.jpg"></TD>
para poner un enlace
<TD><A HREF="primera.htm">ir a la primera pagina</a></td>
</TABLE>
</BODY>
</HTML>

6) tabla con color de fondo. el encabezado nos quedara..
<TABLE BORDER=5 WIDTH=60% HEIGHT=200 BGCOLOR="·00FF00">
celda que tenga un color de fondo:
<TD BGCOLOR="·0000FF">fila1-celda1</TD>
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=5 WIDTH=60% HEIGHT=200 BGCOLOR="·00FF00">
<CAPTION>titulo de la tabla </CAPTION>
<TR>
<TH>columna1</TH>
<TH>columna2</TH>
<TH>columna3</TH>
</TR>
<TR>
<TD BGCOLOR="·0000FF">fila1-celda1</TD>
<TD>fila2-celda1</TD>
<TD>fila2-celda2</TD>
<TD>fila2-celda3</TD>
</TR>
</TABLE>
</BODY>
</HTML>

PROGRAMACION HTML

1) la etiqueta <P> separa el texto en diferentes parrafos, < BR> baja un renglon
<HTML>
<HEAD>
<TITLE>
mi pagina de WEB
</TITLE>
</HEAD>
<BODY>
hola soy yo. estoy haciendo una pagina WEB
<P>
aqaui paso a otro parrafo
<BR>
aqui bajo un renglon
</BODY>
</HTML>

2) cabeceras o titulos, comprendidos entre las etiquetas <H1> y </H1>, <H2>, etc. (hasta el numero 6), texto en el centro con <CENTER></CENTER>
<HTML>
<HEAD>
<TITLE>
mi pagina de WEB
</TITLE>
</HEAD>
<BODY>
<H1>titulo mas grandecon H1</HI>
<H2>titulo menos grandecon H2</H2>
<H3>titulo un poco menos grandecon H3</H3>
<H4>titulo en la letra normal con H4</H4>
<H5>titulo en letra chica con H5>/H5>
<H6>titulo en letra bien chica con H6</H6>
hola soy yo. estoy haciendo una pagina WEB
<P>
aqui paso a otro parrafo
<BR>
aqui bajo un renglon
<P>
<CENTER>
este texto esta centrado
</CENTER></BODY></HTML>
3) la etiqueta<HR> ( no existe la correspondiente de cierre) pone una raya horizontal. para que no ocupe toda la pantalla sino una parte indicandole WIDTH=XX%y el ancho con SIZE=X
<HTML>
<HEAD>
<TITLE>
mi pagina de WEB
</TITLE>
</HEAD>
hola soy yo. estoy haciendo una pagina WEB
<P>
aqaui paso a otro parrafo
<BR>
aqui bajo un renglon
<P>
<CENTER>
este texto esta centrado
</CENTER>
<HR width=10% SIZE=1>
<HR width=30% SIZE=4>
<HR width=100% SIZE=8>
</BODY>
</HTML>

4) <BR> y </B> para negrita, <i> y </i> cursiva, <PRE> Y </PRE> para poner texto preformateado, es decir, aparecera tal cuañ uno lo escribe
<HTML>
<HEAD>
<TITLE>
mi pagina de WEB
</TITLE>
</HEAD>
<BODY>
<B>estas palabras estan en negrita</B>
<P>
<i>estas palabras estan en italica</i>
<P>
<PRE>este texto esta preformateado y esto va
luego de 10 espacios en blanco
el texto actual fue escrito despues de dar un
enter</PRE>
</BODY>
</HTML>

5) listas deosrdenadas (UL), listas ordenados (OL)
<HTML>
<HEAD>
<TITLE>
mi pagina de WEB
</TITLE>
</HEAD>
<BODY>
lista desordenada
<UL>
<Li>monitor
<Li>placa de sonido
<Li>teclado
<Li>etc.
</UL>
lista ordenada:
<OL>
<Li>monitor
<Li>placa de sonido
<Li>teclado
<Li>etc.
</OL>

</BODY>
</HTML>

6) listas de definicion (DT), comentarios no visibles en la pantalla:
<HTML>
<HEAD>
<TITLE>
mi pagina de WEB
</TITLE>
</HEAD>
<BODY>
listas de definicion:
<DL>
<DT>monitor
<DD>hardware de la computadora cuya funcion
es destruir ojos
<DT>placa de sonido
<DD>rompe la tranquilidad familiar
<DT>teclado
<DD>destructor de uñas
</DL>

el texto que figura como comentario en este codigo no lo
vemos en pantalla
<P>
<B>estas palabras estan en negrita</B>
<P>
<i>estas palabras estan en italica</i>
</BODY>
</HTML>

Claudia pinto

miércoles, 17 de julio de 2013

PROGRAMACION HTML Y CSS

PROGRAMACION EN HTML Y CSS

jueves, 4 de julio de 2013

DISEÑO DE PAGINA WEB

PROGRAMACION HTML