Qué es HTML? Los diez pasos para crear una página web perfecta
|
|
|
- Celia Blanco Casado
- hace 8 años
- Vistas:
Transcripción
1 Qué es HTML? HTML son las siglas de HyperText Markup Language (Lenguaje de Macado de Hipertexto), esto que significa?, pues bien hipertexto es una palabra o frase en especial que apunta hacia otra página. Cuando hace clic en uno de las ligas de una página, su navegador automáticamente lo lleva a otra página sin preguntar. Debido a que los vínculos de hipertexto son una característica muy importante del World Wide Web, las páginas web con frecuencia son conocidas como documentos de hipertexto. Así que HTML contiene la palabra hipertexto por ser la herramienta que se usa para crear estos documentos. Sobre el marcado, HTML tiene unos cuantos códigos simples para detallar cosas como hacer que el texto aparezca en negritas o cursivas, crear listas con viñetas, insertar imágenes y, por supuesto vínculos de hipertexto. Y la palabra lenguaje que es la que más nos provoca miedo cuando escuchamos de HTML ya que creemos que necesitamos aprender programación para poder construir nuestra página, más bien HTML es un lenguaje en el sentido de que cuenta con una colección de tags para definir estilos, como negritas y cursivas. Los diez pasos para crear una página web perfecta 1.- Cree un nuevo archivo de texto Muchas personas creen que para diseñar sus páginas web es necesario tener un software de diseño de páginas web costoso o un editor de alta calidad para obtener efectos interesantes. No es así, de hecho cualquier programa que le permita generar texto sencillo (plano) es suficiente, un ejemplo de estos editores es el accesorio NotePad que viene incluido con Windows. Así que el primer paso para generar su página web es abrir su editor de texto favorito y crear un archivo nuevo. Para que su navegador reconozca su página debe guardar su archivo con extensión.htm o bien.html. 2.- Comprenda las etiquetas HTML Las páginas web son relativamente sencillas. Solo hay que escribir el texto y luego insertar los marcadores etiquetas o tags- que indican como queremos que se vean las cosas. En general las etiquetas emplean el siguiente formato: <etiqueta>hola mundo</etiqueta> 1
2 La parte etiqueta especifica el tipo de efecto que deseamos. Por ejemplo para poner el texto en negritas usamos la etiqueta <B>, así que si deseamos que el texto Hola mundo aparezca en negritas tenemos que poner: <b>hola mundo</b> Todas las etiquetas HTML deben de tener su etiqueta de inicio y de cierre, la etiqueta de cierre debe de llevar la diagonal (/) que indica que es el fin de esa etiqueta. 3.- Diseñe la estructura básica de la página Los archivos HTML siempre empezarán con la etiqueta <HTML>, que se debe de escribir en la parte superior del archivo, y al final del archivo debe escribir la etiqueta </HTML>, las cuales le indicarán al navegador que se trata de una página web. Al principio nuestra página web tendrá esta apariencia: Las etiquetas que siguen, nos sirven para dividir el documento en dos partes: el encabezado y el cuerpo. La sección de encabezado es una introducción a la página. Para definir el encabezado, debemos agregar la etiqueta <HEAD> inmediatamente después de la etiqueta y cerrar con la etiqueta </HEAD>. Ahora la página se verá así: </head> La sección del cuerpo es donde se pone el texto y todos los demás elementos de nuestra página web. Para definir el cuerpo debemos poner las etiquetas <BODY> y </BODY> después del de la sección de encabezados (debajo de la etiqueta </HEAD>), como se muestra a continuación: 2
3 </head> <body> 4.- Agregue un buen título El título es el nombre general de la página (no hay que confundirlo con el nombre del archivo). Cuando vean su página en un navegador, el título aparecerá en la barra de título del navegador (Fig. 1.1). Para definir el título es necesario usar las etiquetas <TITLE> y </TITLE>. Por ejemplo: <TITLE>Página de prueba</title> El título siempre va en la sección del encabezado, por lo que el documento debe ir así: <title>página de prueba</title> </head> <body> esqueleto.htm Fig Vista de nuestra página en un navegador. 3
4 5.- Ponga textos Ahora que ya tenemos el título de nuestra página es tiempo de pensar en el texto que deseamos poner en nuestra página. Básicamente, todo lo que tiene que hacer es escribir texto entre las etiquetas <BODY> y </BODY>, así: <title>página de prueba</title> </head> <body> Este texto aparecerá en la página. textos.htm Cuando desee poner un nuevo párrafo hay que usar las etiquetas <P> y </P>. Por ejemplo: <title>página de prueba</title> </head> <body> Este texto aparecerá en la página. Segunda línea. <p>nuevo párrafo</p> parrafos.htm Como podemos ver en la Fig. 1.2, las primeras dos líneas aparecerán juntas, a pesar de que se encuentran en líneas diferentes en el texto original. Sin embargo, la tercera línea esta ubicada en su propio párrafo gracias a las etiquetas <p> y </p>. 4
5 Fig Uso de párrafos. 6.- Utilice formatos y encabezados HTML cuenta con una gran cantidad de etiquetas que nos ayudarán a decorar nuestra página. Ya hemos visto que con las etiquetas <B> y </B> podemos poner un texto en negritas. También se puede desplegar texto en cursivas con las etiquetas <I> y </I> y puede hacer que sus palabras aparezcan como si las hubiera introducido con una máquina de escribir insertándolas entre las etiquetas <TI> y </TI>. Al igual que en los capítulos de un libro, muchas páginas web dividen su contenido en varias secciones. Para separarlas, se pueden emplear encabezados, HTML cuenta con una serie de etiquetas de encabezado que despliegan el texto en una fuente más grande y negritas. Existen seis etiquetas de encabezado en total, que van desde la <H1> (fuente más grande) hasta la <H6>, que emplea la fuente más pequeña. Podemos ver un ejemplo en el siguiente código y en la Fig. 1.3: <title>formato de texto y encabezados</title> </head> <body> formato.htm 5
6 Podemos usar <b>negritas</b>. También podemos usar <i>cursiva</i>. Y por qué no? también <tt>texto tipo máquina de escribir.</tt> <p>así como encabezados</p> <h1>encabezado H1</h1> <h2>encabezado H2</h2> <h3>encabezado H3</h3> <h4>encabezado H4</h4> <h5>encabezado H5</h5> <h6>encabezado H6</h6> Fig Formato de texto y encabezados. 7.- Agregue enlaces a otras páginas En HTML existen etiquetas para convertir un bloque de texto en un vínculo (enlace, liga o link), estas etiquetas son <A> y </A> (la A es por anchor, ancla en inglés). Esta etiqueta es un poco más compleja que las demás, así que hay que verla con un poco de calma. Este es el formato general que utiliza: <a href= dirección >Texto del enlace</a> Aquí la parte dirección es la dirección web de la página con la que se quiere hacer un enlace, una dirección web puede ser por ejemplo 6
7 La parte Texto del enlace es la palabra o frase que los visitantes de nuestra página usarán para darle clic e ir hacia la página que ya se especifico en la parte dirección. A continuación veamos un ejemplo: ligas.htm <title>página de prueba</title> </head> <body> Este ejemplo incluye un vínculo a <a href=" página de pecesama.</a> La Fig. 1.4 nos muestra como se verá la página desde un navegador. Fig Uso de enlaces. 8.- Cause impacto con las imágenes Es muy fácil agregar imágenes a nuestra página web. Ya sea el logotipo corporativo, fotos de su artista favorito, dibujos o fotos de su pareja y usted. Existe ciertos aspectos implicados en el empleo de imágenes en nuestra página (como el tipo de formato), eso lo veremos un poco más adelante, por ahora solo veremos como usar la etiqueta <IMG> que le indica al navegador que despliegue una imagen especifica. Este es su formato general: <img src= imagen > 7
8 Aquí, imagen es el nombre del archivo gráfico que desea desplegar. Por ejemplo si el archivo se llama logo.gif, tendrá que usar la siguiente etiqueta para desplegarlo: <img src= logo.gif > 9.- Analice la apariencia de su página con un navegador Antes de poner nuestra página a la vista de todos en Internet es importante que primero la visualice en su computadora para asegurarse que todo esta en perfectas condiciones, no es necesario tener conexión a Internet para verla solo basta con darle doble clic sobre el archivo html que generamos y se abrirá en su navegador favorito Publique su página en Web Cuando este satisfecho y seguro de que su página esta en prefecto estado, entonces si es hora de ponerla en Internet, existen muchas opciones para poder hacer esto, en la actualidad hay varias compañías que nos ofrecen el servicio de forma gratuita, solo con la condición de ponernos un poco de publicidad en nuestra página, por ejemplo puede visitar geocities en el portal Yahoo! y ellos le indicarán los pasos a seguir para poder publicar su página. 8
9 Otras funciones de Formato Combinación de formatos de texto La mayoría de los navegadores nos permiten combinar los estilos de texto. Por ejemplo, si necesitamos poner un texto en negritas y cursivas, podemos hacerlo colocando juntas las etiquetas <I> y <B>, de la siguiente manera: <B><I>Texto en negritas y cursivas</i></b> Caracteres especiales Existen ciertos tipos de caracteres que no podemos desplegar directamente en nuestra página web sin tener problemas con HTML tal es el caso de los caracteres < y >, entre otros, pero existe algo que se llama entidades de carácter el cual nos dice el código necesario para poder ingresar estos caracteres en nuestra página web. En la tabla 2.1 encontramos los más comunes. Símbolo Nombre de entidad < < > > Tabla Entidades de carácter. Ahora veremos como desplegar texto preformateado, insertar saltos de línea y desplegar líneas horizontales. Texto preformateado Los navegadores web ignoran el espacio en blanco (múltiples espacios y tabulaciones) así como los retornos de carro (salto de línea). Bueno esto es cierto en parte, ya que podemos hacer uso de las etiquetas <PRE> y </PRE>. PRE es una abreviatura de preformateado y esta etiqueta se emplea para desplegar texto exactamente como fue escrito, no importa si se uso espacios, tabulaciones o retornos de carro. 9
10 Veremos un ejemplo, en el cual tendremos dos bloques de código, uno sin usar las etiquetas <PRE> y otro usándolas: <title>ejemplo de la etiqueta <PRE></title> <body> <h3>sin la etiqueta <PRE></h3> Ejemplo de texto preformateado para ver el funcionamiento de la etiqueta <PRE> <h3>con la etiqueta <PRE></h3> <pre> Ejemplo de texto preformateado para ver el funcionamiento de la etiqueta <PRE> </pre> pre.htm Fig Uso de la etiqueta <PRE>. 10
11 Como podemos darnos cuenta los navegadores le ponen un tipo de texto mono espaciado cuando usamos la etiqueta <PRE>, es la parte fea de esta etiqueta ya que no se puede cambiar eso. Saltos de línea Como ya vimos, podemos usar la etiqueta <P> para separar textos en párrafos. Cuando el navegador encuentra una etiqueta <P>, comienza una nueva línea e inserta una línea en blanco extra al término del párrafo anterior, pero si nosotros queremos escribir texto en líneas diferentes y no deseamos esa línea en blanco de más?, podríamos usar las etiquetas <PRE>, pero tendríamos esa fea fuente. La mejor solución es usar la etiqueta, esta es la etiqueta de salto de línea, cuando el navegador encuentra esta etiqueta inicia una nueva línea, sin poner una línea en blanco. Veamos un ejemplo (Fig. 2.2): <title>ejemplo de la etiqueta <BR></title> <body> <h3>uso de la etiqueta <BR></h3> Línea 1<br>Línea 2<br>Línea 3 br.htm Fig Uso de la etiqueta. 11
12 Líneas horizontales Si deseamos insertar una línea horizontal en nuestra página web, entonces debemos usar la etiqueta <HR> (que viene de las siglas regla horizontal ), la cual nos dará una manera útil de separar secciones en el documento, las propiedades más comunes podemos usar en la etiqueta <HR> son las siguientes: Atributo <hr width=x> <hr width=x%> <hr size=n> <hr align=left> <hr align=center> <hr align=right> <hr noshade> Lo que hace Fija el ancho de la línea en x píxeles. Fija el ancho de la línea en x por ciento de la pantalla. Fija el grosor de la línea en n unidades. Alinea la línea con el margen izquierdo. Centra la línea. Alinea la línea con el margen derecho. Despliega la línea sin sombra. Tabla Atributos de <HR>. Centrar elementos de una página web Para centrar los elementos de una página web se utilizan las etiquetas <CENTER> y </CENTER>, la cual nos centra encabezados, párrafos, listas, tablas e imágenes. Aparte de la etiqueta <CENTER> también tenemos el atributo ALIGN para las etiquetas por ejemplo: <p align=center>hola</p> La ventaja sobre la etiqueta <CENTER> es que también podemos usar los valores LEFT,RIGHT y JUSTIFY. 12
13 Listas Si deseamos incluir listas en nuestra página web, HTML cuenta con algunas etiquetas que están diseñadas para darle más control sobre la construcción de listas, hay tres estilos de listas: listas numeradas, listas con viñetas y listas de definición. A continuación vamos a ver los puntos básicos de cada tipo de lista y varios ejemplos. Lista numeradas Si deseamos incluir una lista numerada de elementos, no tenemos que agregar los números nosotros, basta con utilizar las listas de orden en HTML. Las listas de orden (Ordered List) emplean dos tipos de etiquetas: La lista inicia con la etiqueta <OL> y termina con </OL> Cada elemento de la lista debe llevar al inicio la etiqueta <LI> (List Item). El formato general es el siguiente (Fig. 3.1): <title>lista numerada</title> </head> <ol> <li>primer elemento <li>segundo elemento <li>tercer elemento <li>cuarto elemento </ol> ol.htm Fig Lista numerada. 13
14 Listas con viñetas Es probable que en lugar de números deseemos utilizar viñetas. Las etiquetas HTML para crear listas con viñetas son muy parecidas a las que se emplean para las listas numeradas. Como antes, cada elemento de la lista lleva la etiqueta <LI>, pero ahora la lista debe ir entre las etiquetas <UL> y </UL>. Por qué UL?, pues esto deriva de lista desordenada (Unordered List). Este es el formato (Fig. 3.2): <title>lista viñetas</title> </head> <ul> <li>primer elemento <li>segundo elemento <li>tercer elemento <li>cuarto elemento </ul> ul.htm Fig Lista con viñetas. Listas de definición El último tipo de listas se conoce como listas de definición. Generalmente se usa para listas tipo diccionario en las que cada elemento se compone de dos partes: un término y su definición. 14
15 Para marcar las dos diferentes partes de cada entrada en estas listas, necesitamos dos etiquetas diferentes. El término lleva la etiqueta <DT> y la definición la etiqueta <DD>. Veamos como podemos formar estas listas (Fig. 3.3): <title>lista definición</title> </head> <dl> <dt>html<dd>lenguaje de Marcado de Hipertexto <dt>xml<dd>lenguaje de Marcado Extendido <dt>soap<dd>simple Access Object Protocol <dt>wsdl<dd>web Service Description Language </dl> dl.htm Fig Lista de definición. Esquema de numeración diferente en listas ordenadas Para cambiar el estilo de la numeración en las listas numeradas necesitamos hacer uso de la propiedad type dentro de la etiqueta <OL>. Así es como funciona: <ol type=tipo> 15
16 Donde tipo es uno de los siguientes caracteres (Tabla 3.1): Tipo Esquema de numeración Ejemplo 1 Numeración estándar 1, 2, 3 a Letras minúsculas a, b, c A Letras mayúsculas A, B, C i Números romanos pequeños i, ii, iii I Números romanos grandes I, II, III Tabla Valores del atributo type. Esquema de viñetas diferente en listas desordenadas Para cambiar el estilo de la viñeta en las listas desordenadas necesitamos hacer uso de la propiedad type dentro de la etiqueta <UL>. Así es como funciona: <ul type=tipo> Donde tipo es uno de los siguientes caracteres (Tabla 3.2): Tipo Esquema de numeración Ejemplo disc Viñeta en forma de disco circle Viñeta en forma de circulo o square Viñeta en forma de cuadrado Tabla Valores del atributo type. 16
17 Imágenes Para insertar imágenes en nuestras páginas web existe la etiqueta <IMG> que le indica al navegador que debe desplegar una imagen. Veamos un ejemplo: <img src= NombreDeArchivo > Donde, SRC es una abreviatura de source (fuente) y NombreDeArchivo es el nombre de la imagen que deseamos desplegar. Por ejemplo si deseamos desplegar una imagen que se llama logo.gif. El código HTML sería: <img src= logo.gif > Las imágenes en nuestra página son muy útiles y necesarias, pero no por eso debemos saturar nuestra página de estas. No olvidemos que muchos de nuestros visitantes ingresarán por medio de una línea telefónica normal, lo cual nos trae un tiempo de carga muy lento si hay demasiadas imágenes y nuestros visitantes se cambiarán de página, la cantidad de imágenes recomendada para una página es que no excedan en tamaño los 30 kb. por el total de imágenes. Como alinear textos e imágenes Si deseamos que el texto que ponemos después de nuestra imagen se ponga en la parte superior de la imagen o en medio, la etiqueta <IMG> cuenta con el atributo ALIGN, que cuenta con los valores: TOP, MIDDLE, BOTTOM, veamos los ejemplos (Fig. 4.1): <title>prueba de IMG</title> <body> <img src=logo.gif align=top>texto parte superior <img src=logo.gif align=middle>texto parte media <img src=logo.gif align=bottom>texto parte baja img.htm 17
18 Fig Imágenes. Para navegadores sin soporte de imágenes Existen algunos navegadores que no soportan imágenes, simplemente despliegan [image] donde debería ir una imagen y ya con eso se lavan las manos, que debemos hacer para nuestros visitantes que cuentan con estos tipos de navegadores?, la etiqueta <IMG> cuenta con un atributo que se llama ALT que se puede usar para proporcionar algo de texto que aparecerá en lugar de la imagen. Este es el formato: <img src NombreDeArchivo alt= Texto alternativo > Donde, Texto alternativo es cualquier mensaje que quiera desplegarle al usuario. ALT nos es útil también en para los usuarios que le desactivan la opción de imágenes a sus navegadores y aparte con los navegadores que si las soportan y no las tienen desactivadas nos servirá como tooltip. 18
19 Enlaces (ligas o links) Los enlaces son las funciones principales de las páginas WWW. Un enlace es una conexión con un recurso externo o propio. A continuación veremos los enlaces a recursos externos y los enlaces a partes de una misma página. Los recursos externos básicos que pueden visualizarse son: o Páginas HTML ( o Gopher (gopher://...) o Servidores FTP (ftp://...) o News (news:...) o Imágenes (...) Todos ellos requieren la etiqueta: <A HREF="URL">Texto a mostrar</a> Donde URL es la dirección del recurso externo. Vemos algunos ejemplos: Clic <A HREF=" para visitar a la Universidad de Colima. Nos mostrará: Clic aquí para acceder a la Universidad de Colima. En el servidor <A HREF="ftp://ftp.univa.mx">FTP de la Universidad del Valle de Atemajac</A> tiene a su disposición programas que le pueden resultar de interés. Nos mostrará: En el servidor FTP de la Universidad del Valle de Atemajac tiene a su disposición programas que le pueden resultar de interés. Los enlaces pueden efectuarse también a través de imágenes. Esto es, una imagen sirve de referencia para enlazar con el recurso, en vez del texto que hemos utilizado en los ejemplos anteriores. 19
20 Veamos el ejemplo (Fig. 5.1). google.htm <title>google</title> <body> Las mejores búsquedas en <A HREF=" SRC="google.gif"></A> Fig Enlaces con imágenes. En el ejemplo anterior, entre <A HREF=...> y </A>, que son los delimitadores entre los que se sitúa la referencia del enlace, se ha introducido una imagen. Esta imagen accederá al recurso cuando se de clic sobre ella. Como observarás, esta rodeada de un cuadro, que indica que es un enlace. Dicho cuadro puede omitirse, modificando la instrucción anterior de la siguiente forma: <A HREF=" "><IMG SRC="google.gif" border=0></a> Donde border=0 indica que la imagen aparecerá sin borde. Enlaces a partes de un mismo documento Para establecer un enlace con una parte de la página visualizada, se utiliza la expresión: <A HREF="#referencia">Texto de enlace</a> 20
21 Donde referencia indica la marca hacia la que hay que enlazar, y texto de enlace, el texto sobre el que se dará clic para establecer el enlace. Para que la orden se ejecute correctamente, deberá existir en alguna parte del documento la expresión <A NAME="referencia">..texto opcional.. </A>, que será el destino del enlace. Por ejemplo, podemos situar al inicio de una página HTML el siguiente código: <A NAME="m0">INDICE</A> <UL> <LI><A HREF="#m1">Introducción</A> <LI><A HREF="#m2">Referencias históricas</a> <LI><A HREF="#m3">Aspectos de interés</a> </UL> Y después desarrollar cada uno de los aparatados: <A NAME="m1>Introducción</A>...texto de la introducción... <A NAME="m2">Referencias históricas</a>...texto de las referencias históricas... <A NAME="m3">Aspectos de interés</a>...texto de los aspectos de interés... <A HREF="#m0">Indice de contenidos</a> Cada vez que se de clic con el ratón el texto de la referencia (HREF), se enlazará con la sección correspondiente (NAME). El enlace se puede realizar también hacia una parte en particular de otra página. De esta manera: <A HREF="index.htm#referencia">...texto...</A> Nos enlazará con la sección referencia de la página index.htm. 21
22 Tablas La información contenida en una tabla estará contenida entre las etiquetas: <TABLE BORDER=n> y </TABLE> Donde BORDER=n indica el grosor del borde de la tabla. Cuando n es 0 la tabla se visualizará sin borde y a medida que dicho número se incremente, el borde será de mayor grosor. Cada vez que se inicie una fila de la tabla, podremos la etiqueta <TR>. Después de la etiqueta <TR>, podemos ponerle título a las columnas con la etiqueta <TH>. Vemos el ejemplo (Fig. 6.1): th.htm <title>tablas 1</title> </head> <body> <TABLE BORDER=1> <TR> <TH>Primer columna<th>segunda columna<th>tercer columna </TABLE> Fig Etiqueta <TH>. 22
23 Podemos introducir una nueva fila (etiqueta <TR>), fijando la información entre las distintas celdas por medio de la etiqueta <TD> (Fig 6.2): <title>tablas 2</title> </head> <body> <TABLE BORDER=1> <TR><TH>Nombre<TH>Apellido <TR><TD>Abigail<TD>Morales <TR><TD>Pedro<TD>Santana </TABLE> th.htm Fig Etiqueta <TD>. Observe como los encabezados de las columnas (TH) aparecen en negrita y centrados, mientras que el texto de las celdas (TD) aparece sin resaltar y alineado a la izquierda. La alineación del texto en las celdas puede especificarse ampliando la etiqueta <TD> según: <TD Align="left center right">texto de la celda</td> De igual forma, los encabezados de las columnas pueden alinearse según: <TH Align="left center right">texto del encabezado 23
24 Formularios Un formulario es una página con cuadros de texto, listas desplegables, botones de comando, etc., para obtener información de los visitantes a nuestra página. Los formularios se crean empleando etiquetas especiales, y es muy fácil configurarlos. Todo formulario comienza con la etiqueta: <FORM ACTION="ArchivoScript" METHOD="post/get"> Con ACTION indicamos el script que va procesar la información que recogemos en el formulario (si deseas conocer algún lenguaje de script que puedas usar puedes visitar o mientras que METHOD nos indica la manera en que se enviarán los datos post o get. La etiqueta </FORM> indica el final del formulario. A partir de la etiqueta <FORM> vienen los campos de entrada de datos que pueden ser: Botón de comando: Cuando se da clic sobre este botón, los datos del formulario son enviados al script especificado por el atributo ACTION de la etiqueta <FORM>. <input type="submit" value="enviar" name="enviar"> Cuadro de texto: Para las entradas de texto sencillas, como el nombre o dirección de una persona, hay que usar cuadros de texto: <input type="text" name="nombre" size="20" value="jose"> Veamos un ejemplo: 24
25 La siguiente página tiene el objetivo de preguntar cual es tu equipo de fútbol favorito (Fig. 7.1). equipo.htm <title>equipo Favorito</title> <body> <form method=post ACTION= > Cual es tu equipo de fútbol favorito? <input name= equipo type TEXT > <br> <br> <input type="submit" value="aceptar"> </form> Fig Botones de comando y caja de texto. Cuadro de texto con barras de desplazamiento: Si necesita que sus visitantes escriban una gran cantidad de texto o entradas de varias líneas, lo mejor es emplear el área de texto en lugar de un cuadro de texto: <textarea rows="5" cols="20">es de color rojo</textarea> 25
26 Veamos un ejemplo (Fig. 7.2): sites.htm <title>web Sites Favoritos</title> <body> <form method=post ACTION= > Mencióname algunos de tus WebSites Favoritos: <br> <textarea name= websites cols= 50 rows= 5 > </textarea> <br> <br> <input type= submit value= Aceptar > </form> Casilla de verificación o checkbox: Fig Área de texto. Los checkboxes son la mejor solución para ofrecer listas de opciones, que se pueden seleccionar o no poniendo una pequeña marca en la casilla correspondiente. Cada uno de los checkbox se comporta de forma independiente a los demás. 26
27 Se insertan con la etiqueta: <input type="checkbox" name="cambiar" value="on"> Ahora veamos un ejemplo, una página que pregunta lo que haces al levantarte (Fig. 7.3). checkboxes.htm <HTML> <HEAD></HEAD> <BODY> <FORM METHOD=POST ACTION= > Qué haces en cuanto te levantas?<br><br> Lavarme la cara<input NAME= sel1 TYPE= Checkbox VALUE= Lavarse la Cara > Asearse la boca<input NAME= sel2 TYPE= Checkbox VALUE= Asearse los dientes > Desayunar<INPUT NAME= sel3 TYPE= Checkbox VALUE= Desayunar > <INPUT TYPE= SUBMIT VALUE= Aceptar > </FORM> </BODY> </HTML> Fig Checkboxes. 27
28 Botón de radio u opción: Los botones de radio también permiten activar o desactivar opciones; sin embargo, a diferencia de los checkboxes, es posible agrupar varios elementos en un grupo de botones radio, de forma que sólo es posible elegir una de todas las opciones disponibles. <input type="radio" value="azul" checked name="color"> Para crear un grupo de botones radio, se insertan tantas etiquetas <INPUT TYPE=radio> como opciones existan. Todas ellas deben llevar un NAME igual, pero un VALUE diferente. La agrupación de los botones se realiza por su nombre; por eso, un grupo de botones puede estar distribuido en cualquier posición de un formulario. Ahora veamos un ejemplo, página que nos presenta una suma, nosotros tenemos que elegir la respuesta entre tres opciones posibles (Fig. 7.4). radio.htm <HTML> <BODY> <FORM METHOD=GET ACTION= > Cuantos son 2 + 2? <INPUT NAME= Resp TYPE= Radio VALUE= 44 >44 <INPUT NAME= Resp TYPE= Radio VALUE= 22 >22 <INPUT NAME= Resp TYPE= Radio VALUE= 4 >4 <INPUT TYPE= SUBMIT VALUE= Aceptar > </FORM> </BODY> 28
29 Fig Botones de radio. Menú desplegable: Permiten seleccionar una o varias opciones de entre una lista desplegable. La etiqueta <SELECT> crea el campo de selección; dentro del mismo se añaden las diferentes opciones disponibles con <OPTION>. El ancho de la ventana de selección se ajusta al ancho de la opción de mayor tamaño que se incluya. El número de opciones visibles simultáneamente se controla con el atributo SIZE. El caso más sencillo es el de selección simple: <select size="1" name="dia"> <option selected value="lunes">lunes</option> <option>martes</option> <option value="miercoles">miercoles</option> </select> Es posible asignar a cada elemento de la selección un número o nombre con el atributo VALUE; este valor sólo tiene interés para la aplicación que procesará el formulario. Para permitir la selección simultánea de varios elementos de una lista, se incluye el atributo MULTIPLE. De esta forma, y combinando el ratón y la tecla Control, es posible activar simultáneamente varias opciones. En este caso, el browser muestra automáticamente una ventana de selección en la que se ven todas las opciones disponibles. 29
30 Ahora veamos un ejemplo más complejo, una página que pregunta opciones para armar una computadora (Fig. 7.5). lista.htm <HTML> <HEAD></HEAD> <BODY> <FORM METHOD=GET ACTION= > Elige la computadora a comprar <SELECT NAME= compu > <OPTION>Pentium</OPTION> <OPTION>Celeron</OPTION> <OPTION>K6</OPTION> <OPTION>MAC</OPTION> </SELECT> Selecciona los dispositivos de la computadora? <SELECT NAME= dispo[] MULTIPLE> <OPTION>KIT MULTIMEDIA</OPTION> <OPTION>QUEMADORA</OPTION> <OPTION>WEB CAM</OPTION> <OPTION>MICROFONO</OPTION> </SELECT> <INPUT TYPE=SUBMIT> </FORM> </BODY> </HTML> 30
31 Fig Listas y menús desplegables. Campo oculto: Los campos HIDDEN se utilizan para adjuntar información dentro de un formulario, que permanece oculta al usuario del browser (salvo que vea el código fuente del documento HTML). De esta forma, se almacenan variables internas que pueden informar de operaciones que el usuario ha realizado previamente. Se emplean, por ejemplo, en el desarrollo de servicios de información interactivos, en los que es necesario conocer la secuencia de pasos que un usuario ha seguido hasta llegar una determinada situación. Como el protocolo HTTP entre los clientes y servidores WWW no guarda ninguna información sobre el estado previo, la inclusión de variables ocultas dentro de un formulario es un posible sistema para conservarlo. <input type="hidden" name="edad" value="55"> Para entender más los formularios realizaremos una página que contenga varios elementos de formulario juntos: Página que pida el Nombre (textbox), el apellido (textbox), la edad (textbox), domicilio (text area), seleccione el rango de sueldo que le gustaría ganar (listbox) y que seleccione como considera así mismo su desempeño laboral (radio button). (Fig. 7.6). 31
32 minicu.htm <HTML><HEAD></HEAD><BODY><B>Minicurriculum </B> <FORM METHOD=POST ACTION=""> Nombres: <INPUT NAME="nombres" TYPE="Text"> Apellidos: <INPUT NAME="apellidos" TYPE="Text"> Edad: <INPUT NAME="edad" TYPE="Text"SIZE="3"> Domicilio: <TEXTAREA NAME="Domicilio" ROWS=4 COLS=40> </TEXTAREA> Que salario deseas ganar? <SELECT NAME="Salario"> <OPTION VALUE=0> Menos de $1000</OPTION> <OPTION VALUE=1000>Entre $1,000 y $3,000</OPTION> <OPTION VALUE=3000>Entre $3,000 y $5,000</OPTION> <OPTION VALUE=5000>mas de $5,000</OPTION> </SELECT> Como consideras tu desempeño? <INPUT NAME="Desempe" TYPE="Radio" VALUE=0>Pesimo <INPUT NAME="Desempe" TYPE="Radio" VALUE=5>Regular <INPUT NAME="Desempe" TYPE="Radio" VALUE=10>Excelente <INPUT TYPE=SUBMIT VALUE="Presione cuando este listo(a)"> <INPUT TYPE=RESET VALUE="Borra todo"> </FORM> </BODY> </HTML> 32
33 Fig Implementación de formularios. Espero que este pequeño manual te haya servido para aprender los conceptos básicos de HTML, y te siga sirviendo como apoyo siempre que te trabes con algo. Los códigos de ejemplo usados durante el curso puedes descargarlos desde Gracias hasta la próxima 27/02/2003@05:48pm Pecesama Copyright (c) 2003 Pedro César Santana Mancilla [ / pecesama@ieee.org ] Este documento es libre. Puede copiarlo, distribuirlo y/o modificarlo bajo los términos de la Licencia GNU, para Documentación Libre, versión 1.1 o cualquier versión posterior publicada por la Free Software Foundation. El texto completo de la Licencia GNU Para Documentación Libre se encuentra en 33
Para crear una lista como la anterior, primero escribe la información, y después selecciona el texto y aplícale el formato de viñetas.
Módulo 3 Herramientas de Cómputo Listas, tabulaciones, columnas y cuadros de texto Listas En muchas ocasiones es necesario que enumeres diferentes elementos en tus documentos. Word no sólo reconoce números
TEMA 9 CREACIÓN DE PÁGINAS WEB
TEMA 9 CREACIÓN DE PÁGINAS WEB OBJETIVOS Conocer las páginas web y sus elementos. Insertar tablas, capas, enlaces en las páginas web. Crear páginas web con NVU. Crear un sitio web. Configurar un sitio
A continuación se confeccionara un formulario para el ingreso de un nombre y un botón para el envío del dato ingresado al servidor:
FORMULARIOS BAJO HTML INTRODUCCION A FORMULARIOS Un formulario permite que el visitante al sitio cargue datos y sean enviados al servidor. Es el medio ideal para registrar comentarios del visitante sobre
para jóvenes programadores
Manual de Kompozer para jóvenes programadores Por Angel Pablo Hinojosa Gutiérrez Para la Oficina de Software Libre de la Universidad de Granada Copyright 2010: Angel Pablo Hinojosa Gutiérrez El Manual
Guía N 1: Fundamentos básicos(i)
1 Guía N 1: Fundamentos básicos(i) Objetivos Generales: Ver una breve descripción de las capacidades más comunes de Excel Objetivos específicos: Descripción de los elementos de un libro: Hojas, iconos,
COMO CREAR UNA PÁGINA WEB 2-INTRODUCCIÓN A DREAWEAVER
2011 2012 COMO CREAR UNA PÁGINA WEB 2-INTRODUCCIÓN A DREAWEAVER WWW.FAUBELL.COM vicente@faubell.com Hasta ahora hemos visto una pequeña introducción a la creación de las páginas web. No te preocupes por
La pestaña Inicio contiene las operaciones más comunes sobre copiar, cortar y pegar, además de las operaciones de Fuente, Párrafo, Estilo y Edición.
Microsoft Word Microsoft Word es actualmente (2009) el procesador de textos líder en el mundo gracias a sus 500 millones de usuarios y sus 25 años de edad. Pero hoy en día, otras soluciones basadas en
MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn
MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn Tegucigalpa M. D. C., Junio de 2009 Que es un CMS Un sistema de administración de contenido (CMS por sus siglas en ingles) es un programa para organizar
Operación Microsoft Access 97
Trabajar con Controles Características de los controles Un control es un objeto gráfico, como por ejemplo un cuadro de texto, un botón de comando o un rectángulo que se coloca en un formulario o informe
GUÍA Nro. 1 TECNOLOGÍA DE INTERNET. TIII PIII
GUÍA Nro. 1 TECNOLOGÍA DE INTERNET. TIII PIII GUIA DISPONIBLE EN: http://preparadorivan.blogspot.com/ - http://preparadormssi.50webs.com/inicio.html La World Wide Web o la Web, es una de las múltiples
Laboratorio 6. Creación de sitios Web - Dreamweaver
UNIVERSIDAD CARLOS III DE MADRID. ESCUELA DE TURISMO. Informática aplicada al sector turístico Laboratorio 6. Creación de sitios Web - Dreamweaver El objetivo de este laboratorio es aprender a crear sitios
Para crear formularios se utiliza la barra de herramientas Formulario, que se activa a través del comando Ver barra de herramientas.
Formularios TEMA: FORMULARIOS. 1. INTRODUCCIÓN. 2. CREACIÓN DE FORMULARIOS. 3. INTRODUCIR DATOS EN UN FORMULARIO. 4. MODIFICAR UN FORMULARIO 5. MANERAS DE GUARDAR UN FORMULARIO. 6. IMPRIMIR FORMULARIOS.
Creando un Sitio Web personal.
Creando un Sitio Web personal. FrontPage Express FrontPage Express de Microsoft es un sencillo editor htm 1 l que venía instalado por defecto con Windows 98 o con el Internet Explorer 4 para Windows 95.
Creando una webquests
Creando una webquests 1. LO PRIMERO EL PROGRAMA Para crear paginas web necesitamos el software apropiado. Hay muchas formas y programas para hacerlo, pero por su facilidad de uso y por ser software libre
Guía de Aprendizaje No. 1
MICROSOFT WORD Fundamentos básicos, ejecutar Word, su ventana y sus barras de herramientas Objetivos de la Guía de Aprendizaje No. 1 Obtener fundamentos básicos sobre Procesador de Texto Microsoft Word
Tutorial 1: Creación de páginas web con Editor HTML de OpenOffice
Tutorial 1: Creación de páginas web con Editor HTML de OpenOffice Nota: el propósito del curso no es aprender a elaborar páginas web complejas. Por eso, únicamente vamos a aprender a manejar ocho procedimientos:
Ejercicio 1. Formato de Fuente y Párrafo.
Ejercicio 1 Formato de Fuente y Párrafo. Para realizar este ejercicio, primero inicie Word. De clic en el Menú Inicio, Todos los programas, Microsoft Office y Seleccionamos Microsoft Word 2003. Se abrirá
Los formularios irán delimitados por las etiquetas <FORM> y </FORM>, la cual tiene dos parámetros:
Formularios en HTML Los formularios nos sirven para solicitar información al usuario y procesarla. El formulario se compondrá de diferentes componentes como campos de texto, botones de opción, listas desplegables,...
Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver
UNIVERSIDAD CARLOS III DE MADRID. ESCUELA DE TURISMO. Informática aplicada al sector turístico Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver En esta práctica guiada vamos a ver
Para iniciarnos en el estudio de este curso necesitamos estar familiarizados con ciertos conceptos generales, entre ellos:
Conceptos básicos de la internet y la web Para iniciarnos en el estudio de este curso necesitamos estar familiarizados con ciertos conceptos generales, entre ellos: Internet: Red mundial de computadoras
La ventana de Microsoft Excel
Actividad N 1 Conceptos básicos de Planilla de Cálculo La ventana del Microsoft Excel y sus partes. Movimiento del cursor. Tipos de datos. Metodología de trabajo con planillas. La ventana de Microsoft
Práctica 6 - Página Web
Práctica 6 - Página Web Teoría. Una Página Web es un recurso de información que esta diseñada para la Word Wide Web (Red Mundial) y puede ser vista por medio un Navegador Web. Esta información se encuentra
Operación de Microsoft Excel
Representación gráfica de datos Generalidades Excel puede crear gráficos a partir de datos previamente seleccionados en una hoja de cálculo. El usuario puede incrustar un gráfico en una hoja de cálculo,
Hacer una página web con Kompozer
Hacer una página web con Kompozer INTRODUCCIÓN Qué es Kompozer? es un editor de páginas web gratuito, con el que podemos crear las mismas de forma intuitiva sin tener que utilizar el lenguaje html (lenguaje
Para poder navegar en Internet debes primeramente elegir el navegador que vas a utilizar, que puede ser:
Módulo 2 Herramientas para la búsqueda virtual en Internet Navegadores Web Para establecer conexiones con los servidores electrónicos y obtener la información y los servicios que éstos prestan, el usuario
5.- Crear páginas web con Nvu
5.- Crear páginas web con Nvu Nvu permite crear y publicar páginas web sin necesidad de tener conocimientos de HTML y de una forma tan sencilla como utilizar un procesador de textos. La barra de herramientas
Presentaciones compartidas con Google Docs (tutorial)
Presentaciones compartidas con Google Docs (tutorial) G oogle Docs es una muy sencilla suite ofimática online que nos permite crear nuevos documentos, planillas de cálculo y presentaciones multimedia,
Tutorial 2: Creación de páginas web con Compozer
Tutorial 2: Creación de páginas web con Compozer Nota: el propósito del curso no es aprender a elaborar páginas web complejas. Por eso, únicamente vamos a aprender a manejar siete procedimientos: Crear
Práctica 3: Introducción a Word
Departament d Enginyeria i Ciència dels Computadors Práctica 3: Introducción a Word B12. Informática I. Curso 2001/2002 Profesores: Julio Pacheco Juanjo Murgui Raul Montoliu Mª Carmen Ortiz Octubre 2001
Profesor: Víctor Cárdenas Schweiger
Profesor: Víctor Cárdenas Schweiger 2014 En primer lugar se debe especificar que el archivo de texto que se esta escribiendo es un documento HTML, para ello usamos las instrucciones de inicio y fin de
TEMA 4: EMPEZANDO A NAVEGAR ESCUELA UNIVERSITARIA DE INFORMÁTICA. Raúl Martín Martín
TEMA 4: EMPEZANDO A ESCUELA UNIVERSITARIA DE INFORMÁTICA NAVEGAR Raúl Martín Martín SERVICIOS DE INTERNET SERVICIOS DE INTERNET Las posibilidades que ofrece Internet se denominan servicios. Hoy en día,
Trabajar con diapositivas
Trabajar con diapositivas INFORMÁTICA 4º ESO POWERPOINT Una vez creada una presentación podemos modificarla insertando, eliminando, copiando diapositivas, Insertar una nueva diapositiva.- Para insertar
La visualización de la ventana de Word tiene las siguientes partes:
TRABAJANDO CON WORD Ventanas de Word La visualización de la ventana de Word tiene las siguientes partes: Visualización de página Barra de título, Barra de Menús, donde se indica el nombre de la aplicación
Diseño de páginas web 2011
Diseño de páginas web 2011 Al finalizar el curso, el alumno será capaz de planificar y diseñar correctamente desde sencillas páginas web hasta completos sitios web. Para ello, se le proporciona primero
Cómo creo las bandejas del Registro de Entrada /Salida y de Gestión de Expedientes?
Preguntas frecuentes Cómo creo las bandejas del Registro de Entrada /Salida y de Gestión de Expedientes? Atención! Esta opción es de configuración y solamente la prodrá realizar el administrador de la
generar columnas de texto y números disponer texto en columnas paralelas (para traducciones por ejemplo) situar imágenes junto a textos.
Módulo 3 Herramientas de Cómputo Tablas y Gráficos Las tablas de Word tienen una función similar a las tabulaciones pero con muchas más opciones de formato permitiendo mejores acabados. Mediante tablas
MICROSOFT WORD 2007 AVANZADO. Unidad Didáctica Nº 1
MICROSOFT WORD 2007 AVANZADO Unidad Didáctica Nº 1 I Tablas A) Explicación conceptual y de uso de una tabla B) Creación de tablas C) Trabajo con tablas D) Formato de las tablas Ejercicio de Repaso Portal
1.- MENU DE CONTROL O MENU VENTANA: permite cerrar la ventana cambiarla de tamaño y pasar a otra ventana
EXCEL PRÓLOGO Microsoft Excel es una hoja de cálculo de gran capacidad y fácil uso. Excel no solo es una hoja de calculo, sino también tiene capacidad para diseñar bases de datos (listas) de forma totalmente
REGISTRAR LOS SITIOS WEB MÁS INTERESANTES
REGISTRAR LOS SITIOS WEB MÁS INTERESANTES La forma más fácil de volver a páginas Web que visitamos con frecuencia es almacenándolas en una lista. En Internet Explorer estas páginas se denominan sitios
Plataforma e-ducativa Aragonesa. Manual de Administración. Bitácora
Plataforma e-ducativa Aragonesa Manual de Administración Bitácora ÍNDICE Acceso a la administración de la Bitácora...3 Interfaz Gráfica...3 Publicaciones...4 Cómo Agregar una Publicación...4 Cómo Modificar
Apuntes para hacer páginas Web con FrontPage
1 ASIGNATURA: USOS MATEMÁTICOS DE INTERNET PARA SECUNDARIA Y BACHILLERATO CURSO: Cursos y acciones de postgrado, 2004-2005 PROFESORA: Inés M. Gómez-Chacón CARÁCTER/CRÉDITOS: 3 DEPARTAMENTO: ÁLGEBRA FACULTAD
CapÍtulo 3: Manejo de Forms.
CapÍtulo 3: Manejo de Forms. El mecanismo básico de interacción entre el usuario y un web-site esta dado por el uso de formularios html, el server envía un formulario que el browser muestra en pantalla
Partes del formulario
Partes del formulario Etiqueta La etiqueta presenta los siguientes atributos: Comando ACTION METHOD ENCTYPE Descripción El valor de este parámetro es la URL del programa o script en el Servidor
... Formas alternativas de escribir un texto. Columnas. anfora CAPÍTULO 4
CAPÍTULO 4. Formas alternativas de escribir un texto........ Columnas Para fijar columnas se posiciona el Punto de Inserción donde se desee que comiencen las columnas, o bien se selecciona el texto que
Word XP (Continuación) Salto de página vs. Salto de Sección
Word XP (Continuación) Salto de página vs. Salto de Sección 1 Salto. Salto de página Cuando se llena una página con texto o gráficos, Microsoft Word inserta un salto de página automático y comienza una
El módulo de texto plano es un sencillo editor. Al seleccionarlo en la caja de módulos, el área central adoptará al siguiente aspecto:
Plantilla de texto plano El módulo de texto plano es un sencillo editor. Al seleccionarlo en la caja de módulos, el área central adoptará al siguiente aspecto: Título: Es el título que aparecerá identificando
Manual de NVU Capítulo 4: Los enlaces
Manual de NVU Capítulo 4: Los enlaces Pág. 1 Manual de NVU Capítulo 4: Los enlaces Reconocimiento-NoComercial-CompartirIgual 2.5 España Realizado por: Julio Ruiz Palmero (Universidad de Málaga) julioruiz@uma.es
A25. Informática aplicada a la gestión Curso 2005/2006 Word Tema 3. Formato de sección.
DEPARTAMENTO DE LENGUAJES Y SISTEMAS INFORMÁTICOS ESCUELA SUPERIOR DE TECNOLOGÍA Y CIENCIAS EXPERIMENTALES A.D.E.M. Segundo Curso A25. Informática aplicada a la gestión Curso 2005/2006 Word Tema 3. Formato
Elaborando WebQuest usando Power Point
Módulo WebQuest Elaborando WebQuest usando Power Point 2.1.- Creación de WebQuest usando el Miscrosoft Power Point En el Power Point le colocamos un Estilo a nuestra Diapositiva para iniciar nuestra Creación
Capítulo 1 Documentos HTML5
Capítulo 1 Documentos HTML5 1.1 Componentes básicos HTML5 provee básicamente tres características: estructura, estilo y funcionalidad. Nunca fue declarado oficialmente pero, incluso cuando algunas APIs
MS ACCESS BÁSICO 6 LOS INFORMES
2010 MS ACCESS BÁSICO 6 LOS INFORMES 93 LOS INFORMES Los informes son una herramienta de Access para elaborar información, sobre los datos que deseemos, preparada para ser impresa. A partir de una base
Ministerio de Educación. Base de datos en la Enseñanza. Open Office. Módulo 5: Report Builder
Ministerio de Educación Base de datos en la Enseñanza. Open Office Módulo 5: Report Builder Instituto de Tecnologías Educativas 2011 Informes con Oracle Report Builder En su configuración original, OpenOffice
Guía para la Automatización de Documentos en. Microsoft Word
UNIVERSIDAD SAN CARLOS DE GUATEMALA CENTRO UNIVERSITARIO DE SAN MARCOS USAC-CUSAM Guía para la Automatización de Documentos en Microsoft Word ID Y ENSEÑAD A TODOS 2015 PRESENTACIÓN El Instituto de Investigaciones
UNIVERSIDAD DE MEDELLÍN NUEVO PORTAL WEB MANUAL DE USUARIO GESTOR DE CONTENIDOS
UNIVERSIDAD DE MEDELLÍN MANUAL DE USUARIO GESTOR DE CONTENIDOS NUEVO PORTAL WEB TABLA DE CONTENIDO Tabla de Contenido 2 Consideraciones Iniciales 3 Ingreso al Sistema 4 Opciones de Gestor de contenidos
UNIDAD I PROCESADOR DE TEXTOS
UNIDAD I PROCESADOR DE TEXTOS 1. Entorno de Microsoft Word 2007 Lic. Silvia Mireya Hernández Hermosillo 1.1 INTRODUCCIÓN 1.1.1 Generalidades de Microsoft Word 2007 Microsoft Word 2007 es un procesador
Diseño de formularios
Universidad Complutense de Madrid CURSOS DE FORMACIÓN EN INFORMÁTICA Diseño de formularios Introducción a las bases de datos Tema 5 El aspecto de los formularios Se puede modificar a voluntad el aspecto
4.- Composer: Formato de párrafos, títulos y listas
4.- Composer: Formato de párrafos, títulos y listas 4.1 Antes de empezar Vamos a configurar el composer antes de empezar a trabajar con él, para ello nos vamos al menú Editar/Preferencias y seleccionamos
Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape
Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape Introducción y objetivos De modo muy resumido Internet es una red que interconecta redes de ordenadores. Conectándose
TEMA 20 EXP. WINDOWS PROC. DE TEXTOS (1ª PARTE)
1. Introducción. TEMA 20 EXP. WINDOWS PROC. DE TEXTOS (1ª PARTE) El Explorador es una herramienta indispensable en un Sistema Operativo ya que con ella se puede organizar y controlar los contenidos (archivos
Apuntes de ACCESS. Apuntes de Access. Campos de Búsqueda:
Apuntes de ACCESS Campos de Búsqueda: Los campos de búsqueda permiten seleccionar el valor de un campo de una lista desplegable en lugar de tener que escribirlos. El usuario sólo tiene que elegir un valor
HIPERVÍNCULOS. Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen
HIPERVÍNCULOS Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo. Es posible asignar un vínculo a un texto, a una
BASES DE DATOS - Microsoft ACCESS 2007-
BASES DE DATOS - Microsoft ACCESS 2007- Una base de datos es un archivo estructurado de datos que nos permite almacenarlos, modificarlos, ordenarlos, generar informes etc., de manera rápida. Un listín
Colegio de Ingenieros de Caminos, Canales y Puertos. Manual de Gestión de correo electrónico y SMS
Colegio de Ingenieros de Caminos, Canales y Puertos. Manual de Gestión de correo electrónico y SMS Versión 2.0 3/05/2010 Manual de Gestión de correo electrónico y SMS (v 2.0) 1 GESTOR DE CORREO ELECTRÓNICO
Introducción a la plataforma Moodle Aníbal de la Torre 2006. Plataforma Moodle. Accediendo a los contenidos
Plataforma Moodle Accediendo a los contenidos Formatos ----------------------------------------------------------------------- 2 Glosarios -----------------------------------------------------------------------
Web. Microsoft Excel: Capítulo 1 Creación de páginas web con Dreamweaver
Web Microsoft Excel: Capítulo 1 Creación de páginas web con Dreamweaver Álvarez, S., Bravo, S., Departamento de Informática y automática Universidad de Salamanca Sumario 1. Qué es Dreamweaver? 2. El entorno
Escribiendo el HTML. Un formulario se declara entre estos dos tags:
Formularios Un formulario HTML sirve como principal punto de interacción con el usuario: mediante ellas, podemos hacer posible la interacción de nuestra página Web para con el usuario que visita nuestro
2_trabajar con calc I
Al igual que en las Tablas vistas en el procesador de texto, la interseccción de una columna y una fila se denomina Celda. Dentro de una celda, podemos encontrar diferentes tipos de datos: textos, números,
Nos identificamos con nuestro nombre de usuario y la contraseña y llegamos a esta página
ADMINISTRACIÓN DEL SITIO WEB Todos los jefes de Departamento, coordinadores de proyectos y directivos del Centro somos administradores de la página web. Cada uno tendrá la responsabilidad de administrar
TEMA 2 WINDOWS XP Lección 4 BLOC DE NOTAS
TEMA 2 WINDOWS XP Lección 4 BLOC DE NOTAS 1) EL PEQUEÑO EDITOR El Bloc de notas de Windows XP es un básico editor de texto con el que podemos escribir anotaciones, de hasta 1024 caracteres por línea y
PowerPoint 2010 Modificar el diseño de las diapositivas
PowerPoint 2010 Modificar el diseño de las diapositivas Contenido CONTENIDO... 1 MODIFICAR EL DISEÑO DE LAS DIAPOSITIVAS... 2 DISEÑO DE DIAPOSITIVAS EN POWERPOINT WEB APP... 13 1 Modificar el diseño de
SPIP (v.1.8) Manual para redactores Alfredo Sánchez Alberca (asalber@ceu.es)
SPIP (v.1.8) Manual para redactores Alfredo Sánchez Alberca (asalber@ceu.es) 1. Arquitectura de SPIP SPIP es un sistema para la publicación digital de documentos en un sitio web. Tanto la creación de nuevos
Sesión No. 4. Contextualización INFORMÁTICA 1. Nombre: Procesador de Texto
INFORMÁTICA INFORMÁTICA 1 Sesión No. 4 Nombre: Procesador de Texto Contextualización La semana anterior revisamos los comandos que ofrece Word para el formato del texto, la configuración de la página,
Operación de Microsoft Word
Trabajar con tablas Las tablas permiten organizar la información y crear atractivos diseños de página con columnas paralelas de texto y gráficos. Las tablas pueden utilizarse para alinear números en columnas
Crear una página Html con el Editor.
Crear una página Html con el Editor. El Editor de Páginas HTML de RODAS permite a los usuarios crear, cargar y editar una serie de páginas web HTML que se almacenará en Mis Objetos o en una colección durante
Módulo I - Word. Iniciar Word... 2. Finalizar Word... 3. Definición de elementos de pantalla... 4. Escribir texto en un documento... 5. El cursor...
Módulo I - Word Índice Iniciar Word... 2 Finalizar Word... 3 Definición de elementos de pantalla... 4 Escribir texto en un documento... 5 El cursor... 5 Control de párrafos... 5 Nuevos párrafos... 5 Abrir
15 CORREO WEB CORREO WEB
CORREO WEB Anteriormente Hemos visto cómo funciona el correo electrónico, y cómo necesitábamos tener un programa cliente (Outlook Express) para gestionar los mensajes de correo electrónico. Sin embargo,
Editor de textos para Drupal: TinyMCE
Editor de textos para Drupal: TinyMCE Cuando vayamos a editar el texto de una página, normalmente nos encontraremos con un editor de textos, similar a Word, pero para la web. Donde podamos usarlo encontraremos
F O R M U L A R I O S FORMULARIOS
F O R M U L A R I O S FORMULARIOS Los controles de formulario nos ayudan a hacer más ágil y sencillo el manejo de una hoja de cálculo. Estos controles nos permiten conseguir que el aspecto visual de la
Prácticas H T M L U.A.C.M COMPUTACIÓN II
Prácticas H T M L U.A.C.M COMPUTACIÓN II M a r c o s Práctica VI HTML Básico El primer objetivo de esta práctica es familiarizarse con el uso de los marcos y posteriormente ubicar la forma de como podemos
Uso de Visual C++ Pre-Practica No. 3
Pre-Practica No. 3 Uso de Visual C++ Microsoft Visual C++ 2010 es una versión de Visual Studio específica para el lenguaje de programación C++. Es un entorno de desarrollo muy completo y profesional. Por
CURSO DE INTRODUCCIÓN AL WORD
CURSO DE INTRODUCCIÓN AL WORD 1. INTRODUCCIÓN 2. PRIMER DOCUMENTO 3. UN EJEMPLO 4. TABLAS 5. FORMATO DE PAGINAS Y COLUMNAS 6. ORTOGRAFÍA, GRAMÁTICA Y SINÓNIMOS 7. WORDART 8. IMPRIMIR UN DOCUMENTO INTRODUCCIÓN
MOODLE 1.9 EDITOR DE TEXTO HTML
MOODLE 1.9 EDITOR DE TEXTO HTML Unitat de Suport Tecnicopedagògic - CAMPUS EXTENS Universitat de les Illes Balears. Edifici Aulari. Ctra. de Valldemossa Km. 7.5. 07122 Palma (Illes Balears) Primera edición:
Conciliación bancaria en CheqPAQ Cargado de estado de cuenta
Conciliación bancaria en CheqPAQ Cargado de estado de cuenta Introducción Con la finalidad de mantenerte informado respecto a todos los cambios y mejoras de los productos de CONTPAQ i, ponemos a tu disposición
Manual de OpenOffice Impress
Manual de OpenOffice Impress. Capítulo 4. Trabajando con gráficos, esquemas y plantillas 1 Manual de OpenOffice Impress Capítulo 4: Trabajando con gráficos, esquemas y plantillas Este material es una adaptación
Plantilla de texto plano
Plantilla de texto plano Esta es la plantilla seleccionada por defecto al crear una nueva página. Título: Es el título que aparecerá identificando a la página, así como en la cabecera del documento en
Manual de Microsoft Power Point 2007 Parte 2 Universidad Politécnica de San Luis Potosí
Contenido: Manual de Microsoft Power Point 2007 Parte 2 1. Insertar y dar formato a los cuadros de texto.... 2 2. Insertar cuadros de texto.... 2 3. Estilos de forma - Contornos y colores.... 3 4. Estilos
Formularios. Formularios Diapositiva 1
Formularios Crear un formulario utilizando el Asistente para formularios Modificación en vista Diseño Adición de Controles a un Formulario Adición de un Subformulario a un formulario Formularios Diapositiva
Proceso de cifrado. La fortaleza de los algoritmos es que son públicos, es decir, se conocen todas las transformaciones que se aplican al documento
Qué es AT-Encrypt nos permitirá dotar de contraseña a cualquier documento o carpeta. Este documento o carpeta sólo será legible por aquel que conozca la contraseña El funcionamiento del cifrado (o encriptación)
Una guía rápida para. Crear Boletines de Noticias
Una guía rápida para Crear Boletines de Noticias En esta guía Aprende a crear mensajes atractivos, con lenguaje HTML y con texto sin formato para involucrar a tus contactos. Conoce sus preferencias para
HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto)
HTML HyperText Markup Language (Lenguaje de Marcas de Hipertexto) Introducción Un lenguaje de marcas es una forma de codificar junto con el texto, incorporando etiquetas que contienen información adicional
COMO CREAR UNA PÁGINA WEB 3-VÍNCULOS. IMÁGENES. FORMULARIOS.
2011 2012 COMO CREAR UNA PÁGINA WEB 3-VÍNCULOS. IMÁGENES. FORMULARIOS. WWW.FAUBELL.COM vicente@faubell.com VÍNCULOS: Antes de proseguir hemos de repasar el concepto vínculo ya que vamos a utilizarlo mucho
Módulo 3 CREANDO MI SITIO WEB. Centro Zonal Sur
Módulo 3 CREANDO MI SITIO WEB Centro Zonal Sur 53 3.1 Sitios Web utilizando Word Cree una carpeta con su nombre en el escritorio de Windows. Para ello siga los pasos indicados: a) Botón derecho del mouse
Páginas web ::: Tablas Diseño de materiales multimedia. Web 2.0. 1.6 Tablas
42 1.6 Tablas 43 1.6 Tablas 1.6.1 Introducción Las tablas están formadas por filas (horizontales) y columnas (verticales), y el espacio en que intersectan se denominan celdas. Aunque es una práctica muy
RELACIÓN DE PRÁCTICAS DEL TEMA 2
RELACIÓN DE PRÁCTICAS DEL TEMA 2 PRÁCTICA S.O. (I): Crear un fichero con Wordpad con tus datos personales y guardarlo en c:/temp Crear una carpeta con tu nombre en c:/temp (ej. C:/temp/pepita) Copiar el
TUTORIAL SOBRE CÓMO CREAR Y GESTIONAR UN BLOG CON BLOGGER
TUTORIAL SOBRE CÓMO CREAR Y GESTIONAR UN BLOG CON BLOGGER Existen muchos proveedores de servicios para crear un blog. En nuestro caso se ha decidido crear uno en Blogger, que es, a su vez, donde muchas
Formularios HTML. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014
Formularios HTML Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014 Declaración de un formulario Elemento clave para el desarrollo de aplicaciones
Manual de Administración Solución ADSL Profesional
Manual de Administración Solución ADSL Índice 1 Introducción... 2 2 Dominios... 3 3 Página web de Empresa... 5 3.1 Creación de Página Web de Empresa con plantilla... 6 3.1.1 Cabecera de la página... 7
Prácticas de Word XP 1
Prácticas de Word XP 1 1. Haciendo clic en el botón derecho del ratón, crea una carpeta en Documentos con vuestros nombres. En ella guardaréis todas las prácticas que se van a realizar. 2. Abre Microsoft
MANUAL DE AYUDA. SAT Móvil (Movilidad del Servicio Técnico)
MANUAL DE AYUDA SAT Móvil (Movilidad del Servicio Técnico) Fecha última revisión: Abril 2015 INDICE DE CONTENIDOS INTRODUCCION SAT Móvil... 3 CONFIGURACIONES PREVIAS EN GOTELGEST.NET... 4 1. INSTALACIÓN