cuarto periodo isabella guerra

Slide 1

Etapa exploratoria

Qué es una página Web? RTA: Es una pagina o una red donde puedes publicar o encontrar cosasQué es Internet? RTA: Es una digamos que una red donde puedes buscar lo que necesitasQué es Hipervínculo? RTA: Es como un link o algo donde puedes adjuntar algo.

Slide 2

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 Párrafos Estilos

consulta

Slide 3

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 gratuitosDiseñ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.

Slide 4

solución primer punto

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

Slide 5

solución segundo punto

a)Agregar Fondo con Color En el menú Formato, elija Fondo Haga clic en el color que desee. Haga clic en Más colores para ver otros colores Haga clic en Efectos de relleno para cambiar o agregar efectos especiales como, por ejemplo, degradados, texturas, o tramas Seleccione cualquier otra opción que desee. http://www.monografias.com/trabajos17/manual-word-xp/manual-word-xp.shtml

443f95ea-a0e8-4926-b40e-e66854e8020d.gif (image/gif)

Slide 6

solución tercer punto

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

Slide 7

Ahora, agrega la etiqueta “body” a nuestra página. “<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). 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.

Slide 8

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. http://es.wikihow.com/crear-una-simple-p%C3%A1gina-web-usando-el-Bloc-de-Notas

Slide 9

solución cuarto punto

color de fondo: El primer parámetro que debes conocer es el del color de fondo, el "bgcolor". A través de este parámetro podremos definir el color de fondo que queramos que tenga nuestra página. Un ejemplo muy simple es el siguiente: Si queremos que nuestra página quede con un fondo rojo deberemos escribir:<body bgcolor="#FF0000"></body> http://html.hazunaweb.com/108.php Imagen: Para poner una imágen utilizamos el siguiente código: <img src="imagenHTML.jpg"> Donde "imagenHTML.jpg" es la imagen que vamos a colocar. Deberá estar ubicada en el mismo directorio. Si queremos colocar una imagen con HTML en una página que no está colocada dentro del mismo directorio, podemos usar una ruta absoluta: <img src="folder/imagenHTML.jpg" La etiqueta <img> tiene varias propiedas como son: border, width, height, alt http://www.ejemplode.com/17-html/81-ejemplo_de_como_colocar_imagenes_con_html.h

Slide 10

Parrafos: Para colocar textos en bloques, se utiliza el par de etiquetas <p> y </p>. Esta etiqueta puede incluir cualquiera de los atributos mencionados anteriormente. Los saltos de línea (saltar de una línea a la siguiente) se crean usando la etiqueta <br/>. La etiqueta <hr> se utiliza para insertar una línea horizontal. http://es.ccm.net/contents/244-parrafos-en-html Videos: Para añadir un video (avi, mpg, wmv, ram, rm...) o un archivo de audio (wma, mp3, mid...) puedes utilizar la directiva <embed> con los posibles parámetros: src="fichero" Indica el nombre del fichero autostart="xxx" Puedes usar true para que empieze a reproducir al cargar la página o false para tener que dar al play para empezar. loop="xxx" Usa true para que al acabar vuelva a empezar, y false para que no lo haga. hidden="false" Usa true para ocultar los botones, y false para que se muestren. width="200" Ancho que ocupará (incluyendo controles) http://soporte.miarroba.es/3/3415458-insertar-video-waw-o-wmv-en-pagina-web-k-codigo-es-html-alguien-tiene-el-codigo/ Negrilla: Existen dos etiquetas que harán que nuestro texto se convierta en negrita. La utilización de cualquiera de ellas es indiferente. Puedes usar la que prefieras. La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Aquí va un ejemplo: Este palabra la vamos a poner en <b>negrita</b> y esta otra <strong>también</strong> http://html.hazunaweb.com/103.php

Slide 11

Subrayado: Para que la palabra o el texto quedara subrayado se usó en el pasado el rodearlo con la etiqueta <u> y cerrarlo con su correspondiente etiqueta </u>. Así se subrayaría una frase:<u>Así subrayaríamos una frase importante</u> http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=480:formatos-de-texto-html-negrita-cursiva-tachado-subrayado-superindice-subindice-b-y-strong-cu00713b&catid=69:tutorial-basico-programador-web-html-desde-cero&Itemid=192 Estilo: La etiqueta <style> define hojas de estilo para el documento actual.Esta etiqueta debe ser ubicada en la cabecera del documento.Etiqueta de apertura: <style> Etiqueta de cierre: </style>http://www.virtualnauta.com/html-etiqueta-style

Slide 12

Solucion quinto punto

Funcion de las etiquetas: Html: indica el comienzo del documento HTML. Head: indica que empieza la cabecera de la página. En ella se suele poner el título (<title> de la web, una descripción y otras informaciones relacionadas con el contenido de la página. Body: es el cuerpo de la página, donde va lo que se ve en el navegador al cargar una web. En el body van los textos, las imágenes y todos los contenidos de la web. Br: salto de línea. Marquee: sirve para dar un efecto diferente a los texto de nuestra página Web. img: 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.taringa.net/post/ciencia-educacion/11833897/Etiquetas-basicas-de-html.html

Slide 13

Solución sexto punto

Un documento HTML comienza siempre con la etiqueta <HTML>5, que indica que el documento en cuestión está construido con dicho lenguaje. La mayoría de las etiquetas son pareadas, es decir, <...> corresponde al principio de la acción y </...> indica el fin de dicha acción. Por tanto, una página web estará siempre contenida entre las etiquetas <HTML> y </HTML>. Por otra parte, todo documento HTML consta de dos partes: la cabecera (head) y el cuerpo del documento (body). La cabecera contiene básicamente información destinada al browser (o navegador), que queda oculta al usuario. Su etiqueta (pareada) es <HEAD>. El cuerpo es el documento que ve el usuario. Su etiqueta (pareada) es <BODY>. Ya estamos en condiciones de componer nuestra primera página web. Basta con escribir las siguientes etiquetas en nuestro editor de texto y salvar el resultado con la extensión *.HTML o *.HTM: EJEMPLO 1<HTML> <HEAD> </HEAD> <BODY> </BODY></HTML> http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_1.html

Slide 14

Solucion septimo punto

La estructura básica de una página web es la siguiente:<html><head></head><body></body></html>Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. Todo lo que esté en medio será la página web. Dentro de <html></html> se encuentran 2 partes diferenciadas. La primera <head></head> es la cabecera de la página. Aquí irán cierta información que no es directamente el contenido de la página. Aquí se pone el título de la página, los metadatos, estilos, código javascript (todo esto se estudiará en capítulos venideros). La primera que se suele estudiar es <title></title>, que indica el título de la página (lo que el navegador pone en la parte superior izquierda). http://html.hazunaweb.xn--com%20%20curso%20de%20html-z92p/

Slide 15

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ónicohttp://www.deciencias.net/disenoweb/elaborardw/paginas/hipervinculos.htm

Solución octavo punto

Slide 16

Solución noveno punto

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.La publicación es uno de los actos más importantes de la democracia ya que tiene que ver con la posibilidad de acceder a informaciones y actos que antes quedaban en el ámbito privado de la política y que hoy, por ley, deben darse a conocer.Por otro lado, la publicación puede conocer varios tipos dependiendo del público, las temáticas tratadas, el material, el soporte, etc.http://www.definicionabc.com/general/publicacion.php

Slide 17

Solución décimo punto

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. Ahora mismo tiene 7 millones de clientes.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. Lo usan universidades como Stanford.

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.

Slide 18

465b40c3-7271-47ec-8aea-a570589745ed.gif (image/gif)

Next up