lunes, 11 de junio de 2012

Creación de marcos

Para crear un sitio Web que contenga marcos, basta con crear un archivo con la disposición de los marcos. Este archivo HTML es especial ya que usa la etiqueta <FRAMESET> en lugar de la etiqueta <BODY>. <FRAMESET> es la etiqueta que define los tamaños de los marcos por sus dimensiones en píxeles o porcentajes (%).

Estos son tres ejemplos:
2 marcos verticales
2 marcos horizontales
1 marco vertical y 2 horizontales

Ejemplo Nº 1
<FRAMESET COLS="20%, 80%">
       <FRAME SRC="frame1.htm" NAME="left">
       <FRAME SRC="frame2.htm" NAME="right">
</FRAMESET>


Ejemplo Nº 2
<FRAMESET ROWS="20%, 80%">
       <FRAME SRC="frame1.htm" NAME="left">
       <FRAME SRC="frame2.htm" NAME="right">
</FRAMESET>



Ejemplo Nº 3
<FRAMESET COLS="20%, 80%">
       <FRAME SRC="frame1.htm" NAME="left">
<FRAMESET ROWS="50%, 50%">
       <FRAME SRC="frame2.htm" NAME="upper_right">
       <FRAME SRC="frame3.htm" NAME="lower_right">
</FRAMESET>


Atributos de la etiqueta <FRAMESET>

Atributo
Valor
Acción
Rows
porcentaje (entre 1 y 100)
valor en píxeles
Estableciendo uno de los valores y asignando al otro el valor *, el valor se ajusta automáticamente.
Marco horizontal
Cols
porcentaje en píxeles
Estableciendo uno de los valores y asignando al otro el valor *, el valor se ajusta automáticamente.
Marco vertical
Frameborder
YES
NO
Indica si el marco tiene o no un borde
Border=n
n es un valor que define el tamaño del borde
Indica el tamaño del borde
Bordercolor
Nombre del color
Valor hexadecimal del color
Indica el color del borde
Framespacing=n
n es el valor que define el espacio entre los marcos
Indica el espacio entre los marcos

Atributos de la etiqueta <FRAMESET>
La etiqueta <FRAME>se usa para definir uno o varios marcos dentro de la etiqueta <FRAMESET>

Atributo
Valor
Acción
Src
Direcciones URL
Define la ubicación de la página que se debe mostrar en el marco
NAME
"Nombre"
Define un nombre que permitirá mostrar otro documento en el marco mediante el atributo Target
Marginwidth=n
n es un entero que especifica el número de píxeles
Tamaño de los márgenes laterales
Marginheight=n
n es un entero que especifica el número de píxeles
Tamaño de los márgenes superior e inferior
Frameborder
YES
NO
Determina si los marcos tienen o no borde
Border=n
n es un entero que especifica el número de píxeles
N es un entero que especifica el valor en píxeles. Tamaños del espacio entre los marcos (solamente para Netscape)
Noresize
(Ninguna)
Impide que el usuario modifique los marcos (No es el valor predeterminado)
Scrolling
YES
NO
AUTO
Habilita o no las barras de desplazamiento (Auto permite que el navegador decida si es necesario o no habilitarlas)
Publicado por en 1 comentario:

domingo, 20 de mayo de 2012

PRACTICA 8: “CREACION DE FORMULARIOS”

<html>
<head><title>PRACTICA 8: FORMULARIOS </title></head>
<body>

<h1><center><font color="red"> FORMULARIOS </font> </center> </h1>
<hr>

<P> Los formularios mas sencillos se pueden crear utilizando solamente 2 etiquetas FORM e INPUT <br>
La etiqueta FORM encierra todos los contenidos del formulario (botones, cuadros de texto, listas desplegables <br>
entre otros) y la etiqueta INPUT permite definir varios tipos diferentes de elementos como los botones y los cuadros de texto.</p>

<p> <font color="blue"> Formulario sencillo definido con las etiquetas form e input </font></p>

<form action="http://www.librosweb.es/maneja_formulario.php" method="post">
Escribe tu nombre:
<input type="text" name="nombre" value="" />

<br>

<input type="submit" value="Enviar" />
</form>


<h2><center><font color="red"> <u>Elementos de un formulario</u> </font> </center> </h2>
 <hr>

<p> <font color="blue">Ejemplo de la etiqueta input atributo type=TEXT </font><br>
CUADRO DE TEXTO</p>

 Nombre <br>
<input type="text" name="nombre" value="" />

 <hr>
<p> <font color="blue">Ejemplo de la etiqueta input atributo type=PASSWORD </font><br>
CUADRO DE CONTRASEÑA</p>

 Contraseña <br>
<input type="password" name="contrasena" value="" />

<hr>
<p> <font color="blue">Ejemplo de la etiqueta input atributo type=CHECKBOX </font><br>
CASILLAS DE VERIFICACION "CHECKBOX"</p>
Puestos de trabajo buscados <br/>
<input name="puesto_directivo" type="checkbox" value="direccion"/> Dirección <br>
<input name="puesto_tecnico" type="checkbox" value="tecnico"/> Técnico <br>
<input name="puesto_empleado" type="checkbox" value="empleado"/> Empleado <br>

 <hr>
<p> <font color="blue">Ejemplo de la etiqueta input atributo type=RADIO </font><br>
RADIOBUTTON</p>
Sexo <br/>
<input type="radio" name="sexo" value="hombre" checked="checked" /> Hombre
<input type="radio" name="sexo" value="mujer" /> Mujer

<hr>
<p> <font color="blue">Ejemplo de la etiqueta input atributo type=SUBMIT </font><br>
BOTON DE ENVIO DE FORMULARIO</p>
 <input type="submit" name="buscar" value="Buscar" />

 <hr>
<p> <font color="blue">Ejemplo de la etiqueta input atributo type=RESET </font><br>
BOTON DE RESETEO DEL FORMULARIO</p>
<input type="reset" name="limpiar" value="Borrar datos del formulario" />

<hr>
<p> <font color="blue">Ejemplo de la etiqueta input atributo type=FILE </font><br>
FICHEROS ADJUNTOS</p>
Fichero adjunto
<input type="file" name="adjunto" />

<br>
<P>Si se incluye un control para adjuntar archivos, es obligatorio añadir el atributo enctype en la <br>
etiqueta FORM del formulario. El valor del atributo enctype debe ser multipart/form-data, <br>
por lo que la etiqueta FORM de los formularios que permiten adjuntar archivos siempre es:<br>

 form action="..." method="post" enctype="multipart/form-data" <BR>
...

<BR>
/form
</P>

<hr>
<p> <font color="blue">Ejemplo de la etiqueta input atributo type=BUTTON </font><br>
BOTON</p>
<input type="button" name="guardar" value="Guardar Cambios" />

<hr>
<h2> NOTA:</h2>
<p> Recuerde que todos los elementos deben de ir encerrados en la etiqueta FORM respectivamente de apertura y de cierre.</p>

</body>
</html>
Publicado por en No hay comentarios:

PRACTICA 7: “MANEJO DE TABLAS”

<html>
<head> <title> practica 7: TABLAS </title>
</head>
<body>

h2><center> <font color="red"> Tablas </font></center></h2>
<hr>
<p> Las tablas se usan con profusión en las páginas Web, muchas veces debido a que son el único instrumento con el que se cuenta, para asegurarse que las cosas estarán en su sitio.
<br>
<br>Ejemplos:
<br>

<TABLE BORDER=3 CELLPADDING=10>
<TD>
Texto en una celda.
</TD>
</TABLE>

<br>

<TABLE BORDER=2 CELLPADDING=5>
<TD> Celda 1 </TD>
<TD> Celda 2 </TD>
</TABLE>

<br>

<TABLE BORDER=5 CELLPADDING=8>
<TD> Celda 1 </TD>
<TD> Celda 2 </TD>
<TR>
<TD> Celda 3 </TD>
<TD> Celda 4 </TD>
</TABLE>

<br>

<TABLE BORDER=5>
<TH ALIGN=RIGHT>Nombre</TH>
<TH> Significado </TH>
<TR>
<TD> HTML </TD>
<TD> Hyper Text Markup Language </TD>
</TABLE>

<br>

<TABLE BORDER=2>
<TH bgcolor="cyan"> Plataforma </TH>
<TH COLSPAN=2 bgcolor="silver">Navegador</TH>
<TR>
<TD>Unix </TD>
<TD ROWSPAN=2>utilizar</TD>
<TD>Mosaic<BR>Lynx</TD>
</TR>
<TR>
<TD>Windows 95</TD>
<TD>Netscape<BR>
 Explorer</TD>

</body>
</html>


Publicado por en No hay comentarios:

PRACTICA 6: “INSERCION DE IMAGENES”

<html>
<head>
<title>practica 6: IMAGENES</title>
</head>
<body>

<hr>
<h2><center> <font color="red"> Agregar imágenes </font></center></h2>
<hr>

<p> Para agregar una imagen digite img src="?", remplazando el signo de interrogacion (?) con la ubicacion de la imagen. Los tipos de imágenes más utilizados en la WWW son GIF o JPEG

<br> Ejemplo:</br> </p>
<IMG SRC="C:\bebe.jpg" width="178" height="180">
<br>

<p><img src="C:\mono.jpg" alt="Mono" align="left" border="1" hspace="10" width="250" height="170"></font>

Esta imagen tiene los atributos: <font color="#0000FF">align=left , hspace=10 , width=250 , hight=170 , border=1 , alt=&quot;Mono&quot;</font> y como quiero que después de estos comentarios el texto salte debajo de la imagen escribo:<br>

<font color="#0000FF">&lt;br clear=all&gt;</font><font   size="2"><br>
<br clear="all">
</font>

Como ves, esto está debajo de la foto</p>

<br>
<p><img src="C:\aguila.jpg" alt="Aguila" align="right" border="5" hspace="1" width="250" height="165">Esta otra tiene los atributos: <font color="#0000FF">align=right , hspace=1 , border=5 , alt=&quot; Aguila&quot; width=250 , height=165</font>. También debería de escribir<font color="#0000FF"> &lt;br clear=all &gt;</font> para que el final de página aparezca en su sitio. Como no lo hago queda a la izquierda de la imagen. Fíjate en el borde</p>
<br>

</body>
</html>
Publicado por en No hay comentarios:

PRACTICA 5: “AGRUPAMIENTO DE ELEMENTOS MEDIANTE LISTAS Y MARQUESINAS”

<html>
<head>
<title> PRACTICA 5 </title>
</head>
<body>

<hr>
<h2><center> <font color="red"> Listas </font></center></h2>
<hr>

<p> Una lista es un párrafo estructurado que contiene una serie de elementos. HTML define tres tipos de listas:
<ul>
            <li>Listas ordenadas</li>
            <li>Listas no ordenadas</li>
            <li>Listas de definiciones</li>
</ul>

<dl>
<dt> Listas ordenadas.
<dd> Puede crear una lista ordenada para mostrar itemes en un orden específico, como un conjunto de instrucciones o una tabla de contenidos.
<dt> Listas no ordenadas.
<dd> Puede crear una lista desordenada para mostrar itemes que no siguen un orden particular, como una lista de productos o sitios web.
<dt> Listas de definiciones.
<dd> Puedes crear una lista de definición para mostrar términos y sus significados. Este tipo de lista es ideal para un glosario, como es en este caso.
</dl>

 <p > Un ejemplo de listas ordenadas sería el siguiente.</p>
<hr width="20%" size="5" align="left">
<h4> Tabla de contenidos </h4>

 <ol>
<li> Introducción.
<li> Historial de la compañía
<li> Declaración de intenciones
<li> Productos ofrecidos
<li> Metas futuras
<li> Conclusión
</ol>

<hr width="20%" size="5" align="left">
<hr>


<hr>
<h2><center> <font color="red"> Texto en movimiento </font></center></h2>
<hr>

 <p> Podemos tener texto en movimiento gracias a las marquesinas, mediante la etiqueta marquee. Algunas de las propiedades de la marquesina más destacadas son:
<br>
<br><b>direction </b> - Dirección de la marquesina:

<blockquote>
<br>left - Hacia la izquierda
<br>right - Hacia la derecha
<br>down - Hacia abajo
<br>up - Hacia arriba
</blockquote>
<br><b>behavior</b> - Indica el tipo de marquesina:
<blockquote>
<br>scroll - Se desplaza repetidamente
<br>alternate - Se desplaza de un lado al otro
<br>slide - Se desplaza repetidamente
</blockquote>

<br><b>height </b>- Anchura de la marquesina
<br><b>width </b>- Altura de la marquesina
<br> Ejemplos: </p>

<Marquee> Esto es un texto en marquesina </Marquee>

<Marquee bgcolor=”#808000”>Esto es un texto en marquesina con color de fondo</Marquee>

<Marquee direction=right>Esto es un texto en marquesina de izquierda a derecha</Marquee>

<Marquee behavior=alternate>Esto es un texto en marquesina que se desplaza de un lado a otro</Marquee>

<marquee direction="up" height="200" width="100%" onmouseout="this.start()" onmouseover="this.stop()"> Texto desplazandose </marquee>

<p> Este ejemplo crea una marquesina vertical que se  para al pasar el mouse por encima, utiliza las funciones marquesina.start() y marquesina.stop() para arrancar y parar la marquesina y los eventos onmouseover y onmouseout para detectar la posición del mouse.</p>

<marquee bgcolor="#006699" behavior="alternate" direction="right"><b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b> </marquee>

<hr>
Publicado por en No hay comentarios:

Practica 4: “VÍNCULOS”

<html>
<head> <title> practica 4: vínculos </title>
</head>
<body>

<hr>
<font color="red" size="10"> <center> VINCULOS </center> </font>
<hr>

 <p> <u> 1. Crear un vínculo externo hacia una dirección de página web  </u></p>
<a href="http://www.google.com"> Ir a google </a>

 <p> <u> 2. Crear un vínculo de imagen </u></p>
<a href="http://www.google.com"> <img src="C:\Users\ANA\Desktop\hola.jpg"> </a>

<p> <u> 3. Crear un vínculo dentro de una misma página </u>
<br> Ejemplo: </p>
<p> Pasos a seguir para construir una casa sencilla para pájaros </p>
 <p> PASO UNO: Preparación.
<br> <a href="#paso2"> PASO DOS: Cortar, taladrar y ensamblar </a></p>
 <p> PASO UNO: Preparación
<br> 1) Decida qué tipo de ave desea tener, considera las dimensiones de la casa.
<br> 2) Compre madera.
<br> 3) Asegúrese de tener las herramientas necesarias.
<p><a name="paso2"> </a> PASO DOS: Cortar, taladrar y ensamblar
<br> 1) Corte las tablas para que tengan las dimensiones correctas.
<br> 2) Seleccione la tabla que será el frente y taladre un orificio.
<br> 3) Con cuidado ensamble las tablas para completar la casa.

 <p> <u> 4. Crear un vínculo de correo electrónico  </u></p>
<a href="mailto:ana.velazquez@chih.conalep.edu.mx"> Envíeme un correo electrónico </a>

</body>
</html>
Publicado por en No hay comentarios:

martes, 24 de abril de 2012

ETIQUETAS EN HTML

Estas son la etiquetas y atributos que hemos visto en las practicas.


NOMBRE
DEFINICIÓN ETIQUETA
ATRIBUTOS
DEFINICIÓN ATRIBUTO
<html></html>
Abre y cierra un documento HTML


<head></head>
Encabezado de la página - aquí se coloca título, metatags, e información para buscadores entre otras cosas. Está información no es visible.


<title></title>
Título de la página web.


<body></body>
Establece el cuerpo del documento html
bgcolor=?
Configura el color de fondo de la página, usando el valor del código de color hexadecimal.
<h1></h1>… <h6>
Establecer tamaño del encabezado (títulos y subtítulos)


<p></p>
Nuevo párrafo
Align=
Right
Left
Justify
center
Permite alinear el párrafo según corresponda.
<br>
Crea otra línea en blanco


<em></em>
Enfatiza o resalta  una(s) palabra(s) en  cursiva


<strong>
</strong>
Enfatiza o resalta una palabra o grupo de palabras en negrita


<ins></ins>
Marca subrayado el texto nuevo agregado.


<del></del>
Marca en tachado texto eliminado.


<blockquote>
</blockquote>
Marca texto citado (sangría izq.)


<cite></cite>
Marca en cursiva el autor de una cita.


<abbr></abbr>
Marca las abreviaturas de un texto, definiéndolas.


<acronym>
</acronym>
Marcar la definición de las siglas o acrónimos del texto


<dfn></dfn>
Definir palabras.


<pre></pre>
Texto pre-formateado, respeta los espacios en blanco.


<code></code>
No respeta los espacios en blanco.


<center>
</center>
Centrar


<b></b>
Negritas


<u></u>
Subrayado


<i></i>
Cursivas


<strike>
</strike>
Tachado.


<tt></tt>
Tipo máquina de escribir


<font>
</font>
Permite establecer el formato al texto como, tipo de letra, tamaño y color.
face="?
size=?
color=?
Tipo de letra.
Tamaño.
Color.
<hr>
Línea horizontal


<Sub></sub>
Subíndice.


<Sup></sup>
Superíndice.






Publicado por en No hay comentarios:
Suscribirse a: Entradas (Atom)