paginas web

Diapositiva 1

ETAPA EXPLORATORIA

1.Qué es una página Web?Qué es Hipervínculo?Qué es Internet? DESARROLLO1. Es un lugar en internet en el cual puedo encontar informacion que necesite, tambien me da ejemplos videos para tener mas claro el tema buscado2.es un acceso directo a una pag.. web la cual nos ayuda a ahorrar tiempo3.Es el conjunto de redes interconectadas con diversas webs

Diapositiva 2

Consulta guiada

Pasos para crear Páginas web en Word Como se inserta: El Color de fondo, Imágenes, Párrafos, Vídeo, Estilos, Menús, etc; en una páginas web en Word Pasos para crear una página Web en el bloc de notas Escriba las etiquetas en html para insertar: El Color de fondo Imagen Párrafos Video Negrilla Subrayado Estilos 5. Función de las siguientes etiquetas: html head title body <br> <marquee> <img src="URL">

Diapositiva 3

6. HTML básico 7. Diseño de las paginas y Estructura básica de una pagina web 8. Hipervínculos 9. Publicación 10.Generadores de sitios web gratuitos Diseñar y crear diferentes tipos de páginas web para potenciar las habilidades y destrezas computacionales, útiles en posteriores actividades empresariales y comerciales apoyadas en Internet.Puesta en común Socializar lo consultado

Diapositiva 4

pasos para crear una pagina en word

Abrir Word y posteriormente abrir un archivo nuevo. 2.Guardar el documento como: guardar como página web, con el nombre de "index" y guardarlo en una carpeta que este dentro de la carpeta de "mis documentos" (procura crear una carpeta única, para guardar ahí todos los documentos de la página, incluyendo fotos, imágenes, videos, textos, etcétera). 3.Ir a menú formato, fondo, y seleccionar un color o un efecto de color. 4. Crear una tabla con dos columnas y dos líneas, la primera línea (que contiene dos columnas) seleccionarla y convertirla en una sola. 5. De la segunda línea (que contiene dos columnas), poner el puntero del ratón sobre la línea inferior de la tabla, mantener presionado el botón izquierdo del mismo, y arrastra hacia abajo, de tal forma que la segunda línea ocupe el espacio restante de la hoja. 6. Posterior al trabajo de la tabla, escribe el nombre de tu página web en la primera línea de la tabla, este nombre deberá ir en letras mayúsculas, letras negrillas, y con algún color que combine con el fondo (puedes poner algún logotipo que vaya de acuerdo con tu página. Organicación de la barra de navegación 7. De la segunda línea de la tabla, poner el puntero del ratón sobre la línea central vertical, debes mantener presionado el botón izquierdo para arrastra hacia la izquierda la línea de tal forma que una columna quede más delgada que la otra. 8. En la columna delgada, escribe el índice de tu página web, como por ejemplo: * INICIO * MIS FOTOS * MIS PAGINAS FAVORITAS * MIS TAREAS * MIS CHISTES

Diapositiva 5

En la columna delgada, escribe el índice de tu página web, como por ejemplo: * INICIO * MIS FOTOS * MIS PAGINAS FAVORITAS * MIS TAREAS * MIS CHISTES 9. En la columna ancha deberás escribir algún texto que vaya acorde tu página ese texto pertenecerá a la página de inicio de un sitio web. 10. Ir a menú archivo y seleccionar "guardar como página web", cambiar el nombre de la página por el de fotos.html, elegir la carpeta donde se aguarda todo lo que la página web, y presionan a aceptar. 11. Ir a menú archivo y seleccionar "guardar como página web", cambiar el nombre de la página por el de paginasfavoritas.html, y guardarlo en la carpeta, presiona aceptar. 12. Ir a menú archivo y seleccionar "guardar como página web", cambiar el nombre de la página por el de tareas.html, y guardarlo en la carpeta, presiona aceptar. El guardado de documentos 13. Ir a menú archivo y seleccionar "guardar como página web", cambiar el nombre de la página por el de chistes.html, y guardarlo en la carpeta, presiona aceptar. 14. Las indicaciones anteriores, tienen la función de guardar el mismo documento que se hizo en un principio pero con diferente nombre, para así poder editar la información.

Diapositiva 6

15. Cierra el documento que acabas de guardarlo con diferentes nombres y ahora ve al menú archivo, y abre el documento de fotos.html, cómo te das cuenta es exactamente la misma información que la del archivo index.html, ahora tienes que borrar la información de bienvenida al sitio y pon la formación correspondiente a la sección de fotos. 16. Repite el paso anterior, todos los documentos para que la información cambie en cada sección y no sea igual a la del documento index.html 17. Una vez terminada la tarea de cambiar información cierra todos los documentos y abre (desde Word), el archivo index.html. 18. Selecciona la primera palabra del menú que hiciste en la parte izquierda del documento, es decir de la columna delgada, en el caso del ejemplo, tendrás que seleccionar INICIO. Los hipervínculos 19. Ir al menú insertar, elegir hípervínculo, y del cuadro de diálogo que aparece, elegir la opción "archivo o página web existente", luego, "archivo" y finalmente elegir la página index.html. 20. Selecciona la siguiente palabra del menú, y repite la operación paso anterior, recuerda que la palabra seleccionas debes ponerle el hipervículo del archivo del mismo nombre, es decir: "MIS FOTOS" (hipervincular con) "fotos.html". "MIS CHISTES" (hipervincular con) chistes.html". Y así sucesivamente.

Diapositiva 7

21. En una vez que hayas puesto todos los hipervínculos, selecciona todo ese mismo y con el teclado por una CONTROL y C (al mismo tiempo, y que significa copiar) y abre a todos los demás documentos. 22. En todos los documentos, selecciona el menú escribiste y borralo, luego sobrepon el puntero de mouse, y preciona al mismo tiempo en el teclado CONTROL y V (que significa pegar). Si te das cuenta lo que se pega en la columna es una copia exacta del índice que ya tiene los hipervínculos. 23. Realiza la operación anterior con todos los demás documentos, procuarando guardar la información una vez terminada la operación. 24. Una vez que haya terminado con todo el trabajo, cierra todos los documentos y el programa de word, ve la carpeta de "Mis documentos" y haz click en el documento que dice index.html, este deberá abrir como página web y por consiguiente deberá aparecer todo diseño junto con los links. Prueba cada uno de ellos para comprobar si te lleva a la página correcta. Si es así entonces ya habrás hecho tu primera página web.

Diapositiva 8

como se inserta : color de fondo imagenes videos etc

CREAR UN DOCUMENTOAl iniciar Word aparecerá en pantalla un documento nuevo en blanco. Este documento se llamará, por defecto, Documento1.doc.(Fig. 1). Los nombres que Word dará a los nuevos documentos serán sucesivos, Documento2, etc.Diferentes Maneras de Crear un Nuevo Documento Ejecutando el comando Nuevo del menú Archivo. Clic en el botón Nuevo en la barra de herramientas Estándar. Utilizando la combinación de teclas <CTRL + U> Ejecutando la opción Documento en blanco en la sección Nuevo del panel de tareas Nuevo documento. (Fig. 3)

Diapositiva 9

) GuardarSe utiliza para guardar la primera vez o ir guardando los cambios realizados en el documento.Para acceder a esta opción hay 3 formas diferentes, la primera es por medio de menú Archivo, (Fig. 4), la segunda desde la barra de herramientas Estándar pulsando el botón y por ultimo tecleando <CTRL + G>Lo primero que se debe seleccionar es dónde se guarda el documento. Con el menú desplegable de Guardar en: se selecciona la unidad y dentro de ella la carpeta que contendrá el documento.En la ventana que hay debajo del recuadro Guardar en, aparece lo que contiene la unidad o carpeta seleccionada. Si se hace doble clic sobre una carpeta aparecerá su contenido.Una vez seleccionado el lugar en el que se va a almacenar el archivo, habra que establecer el nombre en el recuadro Nombre del archivo.Es muy importante fijarse dónde se guarda el archivo y con qué nombre, si no después resulta imposible encontrarlo.El seleccionador Guardar como tipo: es para establecer algún otro formato, por ejemplo Pagina Web o alguna otra versión deWord.b) Guardar Como...Ejecuta la misma función que Guardar, con la única diferencia de que esta opción nos da oportunidad de guardar el documento: Con otro nombre, para hacer una copia. En otra unidad o en otra carpeta. Como otro tipo de archivo. (ejemplo: Word 97, Plantilla etc.) desde el seleccionador que aparece en la parte inferior de la ventana Fig. 5c

Diapositiva 10

) Guardar como Pagina WebPara acceder a esta modalidad es desde el menú Archivo con la opción: y aparecerá una ventana para personalizar la página Web, como lo es Titulo de la Página en donde al dar clic en el botón Cambiar titulo... lo podemos modificar.Fig. 6C) BUSCAR UN ARCHIVOPuede buscar en títulos, contenidos o propiedades de los archivos. En la barra de herramientas Estándar, haga clic en Buscar y aparecerá en el panel de tareas Búsqueda Básica. Para limitar las ubicaciones en las que realizar una búsqueda, en el cuadro Buscar en, seleccione una o varias unidades, carpetas, sitios Web o buzones de Outlook. Para buscar en todas partes, seleccione En cualquier sitio. Para limitar los tipos de resultados de una búsqueda, en el cuadro Resultados posibles, seleccione los tipos de elementos que desea buscar. Para buscar todos los tipos de archivos, páginas Web y elementos de Outlook, seleccione Cualquier cosa. Haga clic en Buscar. En el panel de tareas Resultado de la búsqueda, puede realizar una o varias acciones sobre los resultados de la búsqueda.

Diapositiva 11

D) MARGENES DE PÁGINALos márgenes (Fig. 8) marcan el espacio que el programa debe dejar entre el borde del papel y donde se empieza a escribir.Se localizan en el Menú Archivo, Configurar Pagina y en la ventana se introducen las medidas en el cuadro correspondiente: superior, inferior, izquierdo, derecho.E) VISTA PRELIMINAREl comando Vista preliminar se encuentra dentro del menú Archivo y es una herramienta que permite comprobar cómo queda el entorno del documento y presenta las páginas tal y como se obtendrán en la impresora.Al ejecutar este comando o el botón Vista preliminar de la barra de herramientas Estándar, aparece en pantalla la ventana del mismo nombre (Fig. 9)Los botones de esta barra permiten ejecutar determinadas operaciones para previsualizar el documento y los más destacables son: Imprimir : Imprime el documento con la configuración activa por omisión. Aumentar : Permite pasar al modo Edición para evitar el texto. También sirve para aplicar el efecto zoom sobre el texto. Una página : Permite ver una página completa en pantalla en el modo Diseño de página. Varias páginas : Permite elegir el número de páginas que se van a ver en pantalla. Zoom : Este cuadro de lista desplegable permite seleccionar el porcentaje de ampliación de una o varias páginas. Ver regla : Permite mostrar y ocultar las reglas. Reducir hasta ajustar: Permite reajustar las líneas de un documento cuando la última página tiene pocas líneas para que quepan en la página anterior. Pantalla completa : Cambio la pantalla y muestra únicamente el documento. Cerrar vista preliminar : Cierra esta ventana y vuelve al documento. Ayuda sensible al contexto : Activa la posibilidad de obtener información sobre el elemento del texto en el que se pulsa.

Diapositiva 12

) IMPRESIÓNPara imprimir un documento desde Word, existen 3 formas, la primera es desde la barra Estándar con el botón Imprimir , la segunda es desde el menú Archivo, Imprimir... en donde al dar clic aparece una ventana en donde podemos modificar la impresión, o cambiar de impresora en caso de tener más de 1 instalada y la ultima opción de imprimir es con el teclado <CTRL + P>.MENÚ EDICIÓNA) FUNCIONES DE EDICIÓNEstas herramientas se encuentran en el menú Edición o con el Teclado, para hacer uso de ellas se subraya el texto con el Mouse. Cortar Es útil para mover un texto u objeto a otro lugar, se agrega en el portapapeles. Para el teclado se utiliza CTRL + X. Copiar Se utiliza para repetir el texto u objeto en diferentes partes del documento o en otros documentos, también se agrega al portapapeles. Para el teclado se utiliza CTRL + C. Pegar Insertara el elemento del portapapeles en donde se desee. Para el teclado se utiliza CTRL + V. Pegar como Hipervínculo, La función es la misma que pegar, solo que utiliza un vínculo para transportar al usuario al origen del texto u objeto y esta dentro del menú Edición.

Diapositiva 13

B) BUSCAR Y REEMPLAZAR E IR A... Para buscar una palabra en el documento se selecciona el menú Edición, Buscar. Y aparecerá una ventana. (Fig. 11) Dentro del recuadro Buscar se escribe la palabra que se quiera encontrar y se pulsa el botón Buscar Siguiente. El programa buscará esa palabra desde la posición actual hasta el final del documento, la primera coincidencia que encuentre la seleccionará y esperará órdenes sobre el cuadro de diálogo Buscar y Reemplazar. La búsqueda se puede afinar pulsando el botón Más, (Fig. 12) Aparecerán varias opciones aplicables tanto para el texto buscado como para el que debe sustituirlo es posible especificar algunas cuestiones de formato con el menú desplegable Formato. Las opciones Coincidir mayúsculas y minúsculas y Palabras completas sirven para limitar la búsqueda a la localización. La palabra encontrada se puede sustituir automáticamente por otra,para esto se pulsa la pestaña Reemplazar en la ventana (Fig. 13) Aparecerá el recuadro Reemplazar con, dentro de él se escribe el texto por el cuál se quiera sustituir el texto encontrado. Para reemplazar la palabra encontrada se pulsa el botón Reemplazar. Si se quieren Reemplazar todas las palabras que coincidan con los criterios de búsqueda de una sola vez se pulsa el botón Reemplazar Todas.Cuando no se quiera reemplazar la palabra hallada se pulsa Buscar Siguiente. Cuando se termine de buscar o de reemplazar se pulsa el botón Cancelar para cerrar la ventana.

Diapositiva 14

MENÚ VER BARRAS DE HERRAMIENTASPara visualizar las barras de herramientas es necesario activarlas desde el menú Ver, Barra de Herramientas (Fig.) Con esta barra se facilita el modificar el texto, además de contener el Botón de Resaltar (Fig. 16), que se utiliza como marca textos digital, al seleccionar el texto y dar clic al color que se desee el texto se marca automáticamente. Barra de FormatoEn esta barra se unen algunos elementos de los menús archivo y edición (Fig. 17), y contiene el Botón de Copiar Formato , muy útil para copiar el estilo de un texto en otro que se desee, esto se logra al seleccionar el texto a copiar, dar clic en le botón de la barra y seleccionando el texto a modificar. Barra Estándar Barra de Dibujo En esta barra se muestran opciones para insertar autoformas, líneas, flechas, cuadros, círculos, cuadro de texto, wordart, diagramas, además de atribuirle ciertos formatos a las imágenes.

Diapositiva 15

ENCABEZADO Y PIE DE PAGINALa barra de herramientas Encabezado y pie de página (Fig. 19) cuenta con un recuadro para introducir el texto del encabezado que aparecerá en todas las páginas. Para cambiar al pie hay que hacer clic en el botón Cambiar entre encabezado y pie de la barra de herramientas. Cuando se hayan introducido los elementos deseados basta con pulsar el botón Cerrar y esta barra de herramientas desaparecerá.Para conocer mejor las posibilidades de la barra de herramientas Encabezado y pie de página es conveniente conocer los botones que la componen (de izquierda a derecha): Insertar Autotexto: botón desplegable que muestra datos que suelen aparecer en encabezados y pies. Se pueden activar seleccionándolos. Insertar número de página: permite incluir un encabezado o pie de forma que la página quedará numerada. Insertar número de páginas: permite incluir un encabezado o pie con el número total de páginas que tiene el documento. Formato del número de página: abre un cuadro de diálogo que permite elegir el formato de número de página. Insertar fecha: incluye un campo con la fecha actual. Insertar hora: inserta la hora actual. Configurar página: abre el cuadro de diálogo Configurar página. Mostrar u ocultar texto del documento: muestra u oculta el texto del documento cuando se editan el encabezado y pie de página. Igual que el anterior: sustituye el encabezado y pie por el de una sección anterior. Cambiar entre encabezado y pie: sirve para pasar del encabezado al pie y viceversa. Mostrar el anterior: permite situarse en el encabezado o pie de la sección anterior. Mostrar el siguiente: permite situarse en el encabezado o pie de la sección siguiente. Cerrar: cierra la barra de herramientas y permite aplicar los cambios realizados.

Diapositiva 16

MENÚ INSERTARA) SALTO DE PAGINACuando llena una página con texto o gráficos automáticamente se inserta un salto de página y comienza una nueva página.Para forzar un salto de página en un lugar específico, ingrese al menú Insertar, Salto... ), por ejemplo, puede forzar un salto de página para asegurarse de que el título de un capítulo comienza siempre en una nueva página.Si trabaja en documento extensos e inserta saltos de página manuales, a menudo es preciso cambiarlos cuando modifica el documento. Esto se evita estableciendo opciones de paginación para controlar los puntos en los que Word inserta saltos de página automáticos. Por ejemplo, puede evitar que se produzca un salto de página dentro de un párrafo o dentro de una fila de tabla.B) NÚMEROS DE PAGINA En el menú Insertar, haga clic en el comando Números de página. En el cuadro Posición, especifique si desea imprimir los números de página en el encabezado o en el pie de página; es decir, en la parte superior o inferior de la página, respectivamente. En el cuadro Alineación, especifique si desea centrar los números de página, alinearlos a la izquierda o a la derecha con respecto a los márgenes izquierdo o derecho, o al interior o exterior con respecto a los bordes interior o exterior de las páginas que va a encuadernar. Si desea que no aparezca un número en la primera página, desactive la casilla de verificación Número en la primera página. Seleccione las demás opciones que desee dando click en el botón Formato...

Diapositiva 17

C) FECHA Y HORA Haga clic en el lugar en que desee insertar la fecha u hora. En el menú Insertar, haga clic en Fecha y hora. Si desea inserta la fecha o la hora en un formato de idioma diferente, haga clic en el idioma en el cuadro Idioma que contiene una lista de los idiomas de edición habilitados. Dependiendo del idioma que seleccione, podrán aparecer otras opciones de fecha y hora. En el cuadro Formatos disponibles, haga clic en un formato de fecha u hora. Para insertar la fecha y la hora como un campo, de forma que se actualice automáticamente al abrir o imprimir el documento, active la casilla de verificación Actualizar automáticamente. Para conservar la fecha y la hora originales como texto estático, desactive la casilla de verificación actualizar automáticamente. Seleccione si desea que los datos se actualicen automáticamente o se conserven tal como fueron insertados originalmente.

Diapositiva 18

Pasos para crear una página Web en el bloc de notas

Abre el Bloc de notas. Haz clic en “Archivo” -> “Guardar como”. Guarda el archivo con extensión final .html. Puedes remplazar el archivo con cualquier cosa. Por lo general, la página principal de un sitio web es: index.html. Ahora podrás empezar a programar. No te preocupes, no es tan difícil.HTML hace uso de etiquetas. Las etiquetas son básicamente un texto dentro de corchetes angulares “<” y “>”. Tendrás que usar muchas etiquetas para crear tu página web. También hay etiquetas de cierre que hacen uno de una diagonal “/” seguido del nombre de la etiquetas y se ven así: </text>. Siempre que abras una etiquetas deberás cerrarla.La primera etiqueta de una pagina web suele ser “<html>”. Esta etiqueta debe de ir en la parte superior del archivo de Bloc de notas.La siguiente etiqueta es “<head>”. La siguiente etiqueta, “<title>”, le indica al buscador qué poner en la parte superior de la ventana y la etiqueta opcional “meta tags” le indica a los buscadores como Google de qué trata el sitio.En la línea siguiente, después de la etiqueta “head”, pon la etiqueta “<title>”.Después de la etiqueta “title”, escribe lo que quieras poner en la parte superior de tu página web, normalmente se escribe el título de la página web. Ahora cierra la etiqueta escribiendo “</title>”.Ahora, cierra la etiqueta </head>, recuerda que tienes que ser cerrar todas las etiquetas.Ahora, agrega la etiqueta “body” a nuestra página. Escribe “<body”, ¡pero no cierres la etiqueta! Hay algunas cosas extras que puedes agregar y que te servirán para que tu página se vea mejor. Aquí podrás especificar el color de fondo y el color del texto de tu página web. Si quieres tener un fondo azul con texto naranja, utiliza la siguiente etiqueta: <body bgcolor=“blue” text=“orange”>. Por favor, ten en cuenta que no todos los colores son compatibles con todos los navegadores (por ejemplo, en la mayoría de los navegadores el color gris oscuro no se ve).

Diapositiva 19

Entre las dos etiquetas “body” va el contenido de la página web, lo que el usuario ve. Vamos a empezar con un encabezado. El encabezado es una sección del texto en tamaño grande y se especifica en HTML con <h1> hasta el <h6>. Con <h1> el texto se hará más grande. Así que en la parte superior de tu página web, después de la etiqueta “body”, podrías poner algo así: <h1> ¡Bienvenidos a mi página web! </h1> Asegúrate de cerrar la etiqueta, sino tu página web no funcionará.Otra etiqueta que puedes utilizar dentro de la etiqueta “body” es <p> (etiqueta de párrafo). Así que después de tu encabezado, es posible que tengas el siguiente ejemplo: <p> “Estoy aprendiendo a hacer un sitio web, ¡wikiHow es lo mejor!” </p> Si quieres una nueva línea de párrafo en tu sitio, utiliza la siguiente etiqueta: “<br>”.Probablemente no quieras una página web que tenga todo el texto igual. Así que vamos a ponerle cierto formato: “<b>” para poner el texto en negritas, “<i>” en cursiva y “<u>” para subrayarlo “</u>”. Recuerda poner las etiquetas de cierre.Lo que realmente hace un sitio web interesante son las fotos. Incluso con el formato, nadie quiere ver solo palabras. Usa la etiqueta “<img>” para agregar imágenes. Pero, al igual que la etiqueta “body”, se necesita un poco más de información. Una etiqueta <img> puede verse así: <img width=”200” height=”200” src=”dog.jpg” alt=”dog”>. El “src” (“source” o fuente en inglés) es lo que hace que la imagen aparezca. La anchura y altura están en pixeles.Ya está casi todo hecho. Si quieres que tus visitantes vean más de una sola página, tendrás que crear vínculos con: <a href=”otherpage.html”>Dirección a otra página</a>. El texto en medio de las etiquetas es lo que el usuario verá para hacer clic a la otra página. El uso de esta etiqueta hará que los usuarios se puedan mover más fácilmente por tu sitio web.Para finalizar, es necesario que pongas la etiqueta “body”: </body> y a la página entera: </html>.Guarda tu trabajo y abre el archivo .html en tu navegador web favorito.¡Felicidades! Acabas de hacer una página web.

Diapositiva 20

consejos

Podrás encontrar más etiquetas en la web. Hay muchos sitios buenos que enseñan a las personas a hacer páginas web. W3Schools es una muy buena opción. Recuerda cerrar tus etiquetas. Siempre nombra tus carpetas y archivos web con minúsculas y sin espacios ni signos de puntuación. Si bien Windows te permite usar espacios, muchos proveedores de alojamiento web no lo permiten, por lo que hacerlo te ahorrará problemas.

Diapositiva 21

El Color de fondo

Diapositiva 22

imagen

<IMG>

Diapositiva 23

parrafos

HTML

Siguiente

Descripción

Resumen del Recurso