LOL

Slide 1

PAGINAS WEB - ETAPA EXPLORATORIA

Qué es una página Web?Qué es Hipervínculo?Qué es internet?1) Para mi una pagina Web es una pagina de internet en la que podemos encontrar determinada información, ya sea una respuesta a una simple pregunta 2) Un hipervinculo es un "Link" que de cierta forma esta en una pagina para conducirte a otra pagina ya sea por una información extra o simplemente publicidad.3) Internet es un medio por el cual podemos buscar una información prácticamente infinita. en la cual podemos encontrar prácticamente de todo, desde teorías y respuestas a preguntas que eran en un entonces "Paradojas" o imposibles de resolver.

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 5. Función de las siguientes etiquetas: html

head title body <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

CONSULTA

Slide 3

Desarrollo

1) Pasos para crear Páginas web en WordR//1 Carga Word. 2 Teclea "página de Inicio" en la página. 3) Haz clic en Archivo> Guardar como página Web. En Office 2007, haz clic en el Botón de Office> Guardar como> Otros formatos. 4 Guarda la página como index.html. En Office 2007, cambia "Guardar como tipo" a "Página Web". 5 Verás ahora que la página no se ve como un documento de Word normal - ahora está en el modo para dar contorno. 6 Añade un poco de texto adicional, trata de escribir "Esta es mi página de inicio." 7 Guarda tu trabajo frecuentemente (haz clic en el ícono de guardar -. Word recordará que es una página web). 8 Haz lo mismo para hacer las otras páginas (sigue leyendo para hacer un hipervínculo).9 Teclea "Enlace a página de inicio" debajo del texto. 10 Resalta el texto. 11 Haz clic en Insertar > Hipervínculo (Todas las versiones) 12 Encuentra index.html. 13 Cuando lo encuentres, selecciónalo y haz clic en OK. 14 Acabas de crear un hipervínculo. Esto significa que en un navegador puedes hacer clic en ese hipervínculo e ir a otra página en tu sitio web. 15 Puedes agregar un hipervínculo a otro sitio web - en el diálogo "Insertar hipervínculo", en el cuadro de texto de "Dirección", escribe la dirección de la página web. 16 ¡Sigue haciendo esto hasta que tu página web esté terminada!INFORMACIÓN SACADA DE: http://es.wikihow.com/hacer-un-sitio-web-con-word

Slide 4

FONDO: FONDOa)Agregar Fondo con Color. En el menú Formato, elija Fondo (Fig. 48). Haga clic en el color que desee. Haga clic en Más colores para ver otros colores (Fig. 49). Haga clic en Efectos de relleno para cambiar o agregar efectos especiales como, por ejemplo, degradados, texturas, o tramas (Fig. 50). Seleccione cualquier otra opción que desee.

Slide 5

3) Pasos para crear una página Web en el bloc de notasR// 1Abre 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>”. 6Ahora, 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á. 9 Sig diapositiva

Slide 6

9 Otra etiqueta que puedes utilizar dentro de la etiqueta “body” es (etiqueta de párrafo). Así que después de tu encabezado, es posible que tengas el siguiente ejemplo: “Estoy aprendiendo a hacer un sitio web, ¡wikiHow es lo mejor!” Si quieres una nueva línea de párrafo en tu sitio, utiliza la siguiente etiqueta: “ ”. 10 Probablemente no quieras una página web que tenga todo el texto igual. Así que vamos a ponerle cierto formato: “” para poner el texto en negritas, “” en cursiva y “” para subrayarlo “”. 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 ara 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.https://es.wikipedia.org/wiki/HTML

Slide 7

4) etiquetas en html para insertar: El Color de fondo Imagen Párrafos Video Negrilla Subrayado Párrafos Estilos R//

Slide 8

... Pone el texto en negrita. Soy un texto negro como el tizón ... Representa el texto en cursiva. Estoy ladeado ... Para subrayar. Soy importante, estoy subrayado <S>... </S> Para tachar. <TT>... </TT> Permite representar el texto en un tipo de letra de paso fijo. No soy variable ... Letra superíndice. E=mc2 ... Letra subíndice. ai,j=bi,j+1 <BIG>... </BIG> Incrementa el tamaño del tipo de letra. Soy GRANDE ... Disminuye el tamaño del tipo de letra. Creí ver un lindo gatito <BLINK>... </BLINK> Hace parpadear el texto. Resulta molesto. ¿Molesto?

Slide 9

HTML1 es un lenguaje universal, que funciona en cualquier plataforma (Windows, Macintosh, Unix, OS/2, etc.) y con cualquier navegador o browser (Netscape, Internet Explorer, Mozilla Firefox, etc.). El precio que paga por su universalidad es su poca sofisticación, puesto que no es otra cosa que el viejo formato ASCII2 (y con 7 bits en lugar de ocho, por lo que ni tan siquiera tiene acentos ni otros caracteres especiales). Por tanto, para que un documento HTML sea algo más que simples caracteres básicos, debe contener, además de dicho texto, una serie de instrucciones para el browser que lo va a reproducir: estas intrucciones se denominan etiquetas o tags y se distinguen del texto porque van entre guiones (< >)3. Estas etiquetas contienen todo el resto de la información de la página web. Por tanto, si un documento HTML no es más que texto ASCII (parte sin guiones y parte entre guiones: las etiquetas), cualquier documento web, hasta el más sofisticado, puede escribirse directamente desde un sencillo programa básico de texto, como el Cuaderno de Notas (Notepad) de Windows, por ejemplo. Sin embargo, escribir un documento complejo de esta manera exige un conocimiento exhaustivo de las numerosísimas etiquetas existentes y sus normas de utilización; para evitar esta dificultad, hay una serie de programas denominados comúnmente editores de HTML (desde el Composer al Dreamweaver, pasando por tantos otros), que permiten al usuario componer una página (es decir, generar etiquetas HTML) desde un interfaz más o menos parecido al de un procesador de textos. A la hora de crear una página web, y aunque utilicemos un editor de HTML, es casi imprescindible entender la disposición del etiquetado de un documento y manejar siquiera las etiquetas más elementales. Son varias las razones que pueden aducirse para ello: Los editores de HTML no son siempre herramientas perfectas, sobre todo cuando ha habido muchas modificaciones durante el proceso de creación. Con bastante frecuencia se hará necesario consultar el código completo, con las etiquetas HTML (lo que se suele denominar código fuente o código madre) para corregir las disfunciones. Tal vez la mejor manera de aprender a diseñar páginas web es observar las páginas de los demás, cuyos códigos fuente están siempre disponibles para ser imitados (o incluso copiados, técnicamente, al menos). Pero, para ello, es necesario entenderlos. Los mismos editores HTML manejan términos propios del lenguaje HTML (heading, cellspacing, etc.), que es preciso comprender. Es necesario un buen conocimiento de HTML para insertar otros códigos más potentes, como los de Javascript, por ejemplo.

Slide 10

El objetivo de este documento es aprender a componer una sencilla página web desde el más básico de los programas de texto disponibles en Windows: el Cuaderno de Notas.4 De esta manera, seremos capaces de entender y manejar los códigos fuente de las páginas más complejas. https://es.wikipedia.org/wiki/HTML

Slide 11

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). La segunda parte es <body></body>. Aquí va propiamente el contenido de la página: fotos, párrafos, formularios, etc. Por ejemplo, siguiendo con el ejemplo de la página anterior, el siguiente código <html><head><title>Esto es el título de la página.</title></head><body>Hola mundo!

Slide 12

Esto es negrita. Y esto itálica. </body></html> generará el siguiente resultado (abre la página en otra ventana, dale al botón derecho => ver código fuente, y verás así el código HTML de la página): https://es.wikipedia.org/wiki/HTML

Slide 13

Un hipervínculo (también llamado enlace, vínculo, o hiperenlace) es un elemento de un documento electrónico que hace referencia a otro recurso, como por ejemplo otro documento o un punto específico del mismo o de otro documento.

Next up

Description

Resource summary