Paginas Web

Etapa Exploratoria

• 1.Qué es una página Web?
• Rta: Es una pagina en donde podemos encontrar informacion, juegos, noticias entre otras
• 2.Qué es Hipervínculo?
• Rta: En donde se encuantra un documento electrónico
• 3. Qué es Internet?
• Rta: Es una red en donde podremos encontrar infromacion

Consulta

• 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">
• 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

1.Pasos para crear Páginas web en Word

• 1.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.

Slide 4

• 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
• 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.

Slide 5

• 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.
• 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.
• 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.

Slide 6

• 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.
• 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.
• http://www.taringa.net/post/hazlo-tu-mismo/10304156/Como-hacer-una-pagina-web-en-Word.html

2.Como se inserta: El Color de fondo, Imágenes, Párrafos, Vídeo, Estilos, Menús, etc; en una páginas web en Word

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

• 1. 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.
• 2. HTML (Hypertext Markup Language) 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.
• 3. 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.
• 4. 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.
• 5. 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>”.
• 6.Ahora, cierra la etiqueta </head>, recuerda que tienes que ser cerrar todas las etiquetas.
• 7. 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).
• 8. 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á.

Slide 9

• 9. 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>”.
• 10.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.
• 11. 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.
• 12. 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.
• 13. Para finalizar, es necesario que pongas la etiqueta “body”: </body> y a la página entera: </html>.
• 14. Guarda tu trabajo y abre el archivo .html en tu navegador web favorito.¡Felicidades! Acabas de hacer una página web.
• http://es.wikihow.com/crear-una-simple-p%C3%A1gina-web-usando-el-Bloc-de-Notas

4. Escriba las etiquetas en html para insertar:

• Color de fondo: <body bgcolor="#FF0000"></body>
• http://html.hazunaweb.com/108.php
• Imagen: <body background="URL"> </body>
• http://html.hazunaweb.com/108.php
• Párrafo: <p> y </p>
• http://es.ccm.net/contents/244-parrafos-en-html
• Video: <video src="video/fireworks_reducido.webm"></video>
• http://www.ite.educacion.es/formacion/materiales/182/cd/cinco/insertar_un_vdeo.html
• Negrilla: Este palabra la vamos a poner en <b>negrita</b> y esta otra <strong>también</strong>
• http://html.hazunaweb.com/103.php
• Subrayado: Este palabra la vamos a poner en <i>cursiva</i> y esta otra <em>también</em>
• http://html.hazunaweb.com/103.php
• Estilos:

5. Función de las siguientes etiquetas:

• HTML : El HTML se encarga de desarrollar una descripción sobre los contenidos que aparecen como textos y sobre su estructura, complementando dicho texto con diversos objetos (como fotografías, animaciones, etc).
• http://definicion.de/html/
• HEAD: Define la cabecera del documento HTML; esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario como, por ejemplo, el título de la ventana del navegador.
• https://es.wikipedia.org/wiki/HTML
• TITLE: Define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana.
• https://es.wikipedia.org/wiki/HTML
• BODY: Define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes.
• https://es.wikipedia.org/wiki/HTML

Slide 12

• <br>: salto de línea.
• <marquee>: sirve para dar un efecto diferente a los texto de nuestra página Web. Gracias a ella podemos conseguir texto en movimiento.
• <img src="URL">: indica el fichero de imagen que se incluirá en el documento. Se indicará el camino hasta la imagen en formato URL, el fichero de la imagen deberá tener una extensión apropiada a su formato
• http://www.smfsimple.com/index.php?topic=9112.0
• http://html.hazunaweb.com/116.php
• http://www2.uca.es/manual-html/imagenes.htm

6. HTML básico

7. Diseño y Estructura de una pagina web

• La estructura básica de una página web es la siguiente:
• <html>
• <head></head>
• <body>
• </body>
• </html>
• http://html.hazunaweb.com/102.php

8. Hipervinculos

• Un hipervínculo es un enlace, normalmente entre dos páginas web de un mismo sitio, pero un enlace también puede apuntar a una página de otro sitio web, a un fichero, a una imagen, etc. Para navegar al destino al que apunta el enlace, hemos de hacer clic sobre él. También se conocen como hiperenlaces, enlaces o links.
• Normalmente el destino se puede saber mirando la barra de estado del navegador cuando el ratón esté sobre el hipervínculo.
• Dependiendo de cual sea el destino , hacer clic en un hipervínculo puede hacer que ocurran varias cosas. Si el destino es otra página web, el navegador la cargará y la mostrará, pero si el destino es un documento de Word, el navegador nos dará la posibilidad de abrir una sesión de Word para visualizarlo o de guardar el archivo.
• Por lo tanto, podemos usar los hipervínculos para conducir a los visitantes de nuestro sitio web por donde queramos. Además, si queremos que se pongan en contacto con nosotros, nada mejor que ofrecerles un hipervínculo a nuestro correo electrónico.
• http://www.deciencias.net/disenoweb/elaborardw/paginas/hipervinculos.htm

9. Publicación

• El término publicación se utiliza para hacer referencia al acto mediante el cual se hace público o se da a conocer determinada información, acto, dato, etc. La publicación puede ser en diferentes tipos de soportes que han variado en disponibilidad y en importancia a lo largo de la historia, siendo los más comunes los escritos, impresos o, actualmente, los digitales.
• http://www.definicionabc.com/general/publicacion.php

10. Generadores de sitios web

• 1. Wix. En Wix podemos crear nuestra página web de forma sencilla con un resultado impactante. Wix aloja a más de 26 millones de webs en su plataforma y se registran más de 30.000 usuarios diarios.
• 2. Weebly. Weebly ofrece un poderoso sistema de «drag and drop» en el editor y cien plantillas profesionales para crear una página web. Más de 12 millones de personas usan actualmente Weebly.
• 3. 000webhost. La transparencia es su lema, no hay costes ocultos. Las cuentas gratuitas cuentan con 1.5 GB de espacio en disco, 100 GB de tráfico. Anuncian con orgullo que sus servidores han estado online el 99,9% del tiempo en los últimos 5 años.
• 4. Yola. Permite crear webs con aspecto profesional en cuestión de minutos sin ningún tipo de experiencia técnica.
• 5. EDUBlogs. Pensada para estudiantes y profesores, está reconocido como el servicio más usado para las webs .edu. Ahora mismo tienen 1,6 millones de blogs y 32 GB de espacio gratuito para estudiantes y profesores.
• 6. Freehostia. Este servicio ofrece 250 MB de espacio en disco y 6 GB de tráfico, menos que el resto, su punto fuerte radica en la asistencia 24/7 y su garantía de servicio del 99,9%.7. Webs. Webs.com es un sistema muy sencillo de usar, cientos de plantillas con las que customizar tu web. Como contrapartida del servicio, webs.com instala una pequeña publicidad en tu web. Registrarse lleva 30 segundos y tener la web terminada, un torno a una hora.
• 8. 5GBfree. 20GB de espacio en disco, 3 bases de datos de MySQL, c-panel, y lo más importante, 100% gratis sin publicidad.
• 9. Jimdo. Un servicio básico y rápido, regístrate, escoge un tema y ya está la web funcionando. Tiene, tiene ahora mismo unos 7 millones de portales alojados.
• 10. FreeHosting.com. Tienen múltiples herramientas y servicios sencillos para hacer que tu web quede bien. FreeHosting es un servicio 100% gratuito, sin presiones por comprar ni pagar nada.
• http://www.abc.es/tecnologia/redes/20130219/abci-alojamiento-gratis-201302181850.html