pagina web

etapa exploratoria

1. Qué es una página Web?es un documento de un sitio wed y suele contar con enlaces.2. Qué es Hipervínculo?es el enlace de los sitios de Internet. 3. Qué es Internet?un red informática a nivel mundial. 

consulta

1. como crear una pagina wed en word1) 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. 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 paginas favoritas. 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. 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. 

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". 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  En el menú Formato, haga clic en Fondo. En el panel de tareas Fondo, en Aplicar un fondo, haga clic en el color (de la combinación de colores de la publicación) que desee aplicar al fondo. Elija el fondo que desee, haga clic en la flecha situada a su lado y, a continuación, realice uno de estos procedimientos: Para agregar el color o la trama a una sola página, haga clic en Aplicar a la página,  Para agregar el color o la trama a todas las páginas de la publicación, haga clic en Aplicar a todas las páginas. https://support.office.com/es-es/article/Agregar-cambiar-o-eliminar-un-fondo-1606d46c-ab5e-4723-85df-b04a4780193c

imágenes 1) Ubica el punto de inserción en el lugar donde quieres que esté la imagen.2) En la pestaña Insertar, haz clic en el comando Imágenes en línea.

dbae1352-dcbd-4913-9b74-ca2109450a66 (image/png)

3)Se abrirá un cuadro de diálogo. Escribe en la barra de Búsqueda de imágenes de Bing el termino de búsqueda de la imagen que quieres usar, y presiona la tecla Enter para que el programa haga la búsqueda.

bbc3a8d4-2bea-47e6-aa06-6da1bc4ec000 (image/png)

4)Los resultados de la búsqueda aparecerán en el cuadro de diálogo. Selecciona la imagen que quieras usar y haz clic en el botón Insertar.5)La imagen aparecerá en tu documento.https://www.gcfaprendelibre.org/tecnologia/curso/word_2013/guia_basica_de_imagenes_en_word_2013/2.do

3c9313d1-dc5d-4153-aeb8-5ca520ef08b8 (image/png)

textoPara insertar texto de ejemplo localizado que sea compatible con Microsoft Office Word 2003 y versiones anteriores, escriba =rand.old() en el documento en el que desea que aparezca el texto y, a configuración, presione ENTRAR.  El texto de ejemplo que se ha insertado para la versión de Word 2007 o Word 2010 es similar al siguiente:El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja. El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja. El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja. ¶ El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja. El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja. El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja.  El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja. El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja. El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja. 

Tenga en cuenta que el texto de ejemplo en otras versiones de idioma de Word 2007 o Word 2010 no tiene el mismo significado que el texto mencionado anteriormente en esta sección. Por ejemplo, la versión japonesa de Word muestra un texto cuya traducción sería:"Word 2003 es un pionero procesador de textos que permite..."Y la versión de Word en alemán ofrece el texto siguiente:"Franz jagt im komplett verwahrlosten Taxi quer durch Bayern".Puede controlar el número de párrafos y líneas que aparecen agregando números dentro de los paréntesis de la función rand.old(). La función =rand.old() tiene la sintaxis siguiente:=rand.old(p,l) https://support.microsoft.com/es-co/kb/212251

video1)Ubica el punto de inserción en el lugar donde quieras insertar el video.2)En la pestaña Insertar, haz clic en el comando Video en línea.

2df41a77-cefa-479b-9cd1-18e3ede10a87 (image/png)

3)Se abrirá un cuadro de diálogo. Allí tendrás tres opciones para buscar e insertar un vídeo. Búsqueda de videos de Bing: Esta opción te permite buscar el video en internet a través del buscador Bing. Youtube: Te permite buscar vídeos que estén en youtube, que es una plataforma de Google creada para contener, exponer, subir y ver vídeos. Escribe el termino del vídeo en la barra de búsqueda de la opción quieras usar y oprime la tecla Enter para que el programa realice la búsqueda. En este caso, insertaremos uno desde youtube

8d416d0e-cd90-4740-9529-fd0d7dbd93b8 (image/png)

4)Los resultados de la búsqueda apreceran en el cuadro de diálogo. Selecciona el video que quieres usar y haz clic en el botón Insertar.5)El video se insertará en el documento.https://www.gcfaprendelibre.org/tecnologia/curso/word_2013/guia_basica_de_imagenes_en_word_2013/3.do

e0112b4b-73f7-4718-97ca-dd4a8243bc93 (image/png)

estilos1) seleccione el texto al que desea aplicar un estilo.Por ejemplo, puede seleccionar texto que desea convertir en un título. Si desea cambiar el estilo de todo un párrafo, haga clic en cualquier lugar del párrafo. 2) En la ficha Inicio, dentro del grupo Estilos, haga clic en el estilo que desea usar. Si no encuentra el estilo apropiado, haga clic en el botón Más  para ampliar la galería Estilos rápidos.Por ejemplo, si selecciona texto al que desea aplicar el formato de título, haga clic en el estilo denominado Título en la galería Estilos rápidos.https://support.office.com/es-es/article/Aplicar-un-estilo-f8b96097-4d25-4fac-8200-6139c8093109

3 como crear una pagina web en bloc de notas1Abre 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.

7Ahora, 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 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.1111Lo 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.

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

4 Escriba las etiquetas en html para insertarEl Color de fondoEl atributo BGCOLOR imposta un fondo de un solo color. La sintaxis correcta es: <BODY BGCOLOR="red"> Es posible sustituir el nombre en inglés con valores hexadecimales. Por ejemplo, el color rojo (red) se sustituye de esta manera: <BODY BGCOLOR="#ff0000"> http://soporte.miarroba.es/1364/1354402-color-de-fondo/

http://www.htmlpoint.com/guida/html_09.htm Imagen<IMG>Antes de describir en detalle la marca principal de inserción de imágenes en los hipertextos, es conveniente precisar algunos conceptos de HTML. A diferencia de muchos procesadores de texto (Ms Word, por ejemplo), los hipertextos no se "funden" con las imágenes que les sirven de acompañamiento gráfico, sino que se limitan a invocarlas desde un recorrido específico in situ o en el web. Dicho de otro modo, existe una división muy clara entre archivo .htm e imágenes (y también sonidos, apliques, etc.). Los documentos HTML se limitan a prever dentro de ellos un espacio en el que se insertan las imágenes solicitadas.La marca <IMG> no necesita cierre y su sintaxis correcta es:<IMG SRC="immagine.gif">donce SRC corresponde al inglés Search y es el recorrido del que el navegador saca la imagen (en este caso "immagine.gif"). Como hemos señalado, esta marca es única en el sentido de que NO lleva como cierre el correspondiente </IMG>.http://www.htmlpoint.com/guida/html_09.htm

parafosPara indicarle al navegador que queremos poner ese texto en un párrafo, debemos escribirlo entre las etiquetas <p> y su cierre </p>.Así el texto quedará dentro de un párrafo, separado por un espacio en blanco por encima y uno por abajo.El texto del párrafo lo puedes alinear utilizando la etiqueta align utilizando los parámetros “center” (para alinearlo al centro), “right” (para alinearlo a la derecha), “left” (para alinearlo a la izquierda) y “justify” (para justificar el texto).Un ejemplo de esta etiqueta con sus respectivos parámetros es el siguiente:<p align="center">Este texto se alineará al centro</p><p align="right">Este texto se alineará a la derecha</p><p align="left">Este texto se alineará a la izquierda</p>http://html.hazunaweb.com/105.php

video Etiqueta bgsound La etiqueta bgsound sirve para insertar sonido de fondo en las páginas web. Su principal inconveniente es que sólo funciona con Internet Explorer, por lo que su uso es muy limitado. De todas maneras vamos a ver cuál es su forma y sus principales atributos:<bgsound src="ruta_fichero" loop="numero" balance="b" volume="v"></bgsound>Los valores de los atributos son los siguientes: src="ruta_fichero" : Indica la ruta donde está el archivo de sonido. loop="numero" : indica el número de veces que debe repetirse el fichero. si en lugar de un número escribimos el valor "infinite" el fichero se reproducirá indefinidamente. balance="b" : indica el balance del sonido entre los dos altavoces, es decir, la potencia con que se oirá en cada uno de ellos (derecho e izquierdo). Sus valores pueden estar entre -10,000 y +10,000; siendo el valor 0 un balance equilibrado entre los dos altavoces. volume="v" : indica el volumen al que se oirá el sonido, sus valores pueden variar entre -10,000 (mínimo) y 0 (máximo). Como ya se ha dicho esta etiqueta suele ser muy poco usada ya que tiene las limitaciones de que sólo funciona con Internet Explorer, y además el usuario no puede controlar el sonido desde la página.http://aprende-web.net/html/html10_2.php

negrillaExisten 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

subrayadoSi queremos que la palabra o el texto quede subrayado, deberemos rodearlo con la etiqueta <u> y cerrarlo con su correspondiente etiqueta. O sea, </u>. Así subrayaríamos una frase importante:<u>Así subrayaríamos una frase importante</u>Así subrayaríamos una frase importantehttp://html.hazunaweb.com/103.php

5  Función de las siguientes etiquetashtmles un lenguaje de programación que se utiliza para el desarrollo de páginas de Internet. Se trata de la sigla que corresponde a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto, que podría ser traducido como Lenguaje de Formato de Documentos para Hipertexto.http://definicion.de/html/

head Más que materializar código, la etiqueta <head></head> engloba una serie de sentencias a modo de cabecera como son por ejemplo, el título de la página o los enlaces a archivos externos como hojas de estilo css. También se incluyen en ella las famosas etiquetas <meta> que emplean muchos buscadores para relacionar el tema de la web. Más que una zona de declaración y muestreo se puede decir que es una zona de "globalización de entidades" que representa determinados aspectos del sitio que no están íntimamente relacionados con su contenido.http://www.desarrolloweb.com/faq/544.php

title Una etiqueta a la que a veces no se le presta mucha atención es la que define el título de una página web individual <title></title> La etiqueta title va en la zona del head, como vemos aquí: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-ES" lang="es-ES">  <head>  <title>Direcciones de internet</title>  </head> El navegador lee el title (título) de cada página y lo muestra en la parte superior, en el borde de la pantalla, junto con el icono del programa (Firefox, Explorer, etc. Esto es importante de cara al usuario. http://www.html.com.es/web.php?seccion=etiqueta-title

bodyEl elemento <BODY> se coloca inmediatamente después del cierre de la marca </HEAD> y, en cualquier caso, dentro de los elemenos <HTML></HTML>; tiene una marca de apertura y una de cierre y delimitado por ellas figura el cuerpo del documento. Si el elemento <HEAD> contenía metainformación (es decir, datos no visualizados materialmente por el navegador) la función de la marca <BODY> es la de mostrar los objetos (texto, imágenes, sonidos, apliques, etc.) de la página. La sintaxis correcta del elemento <BODY> es la siguiente: <BODY> Contenido del documento </BODY> La marca <BODY> se utiliza también para proporcionar al navegador información sobre la disposición de los objetos en el documento, así como para impostar varios atributos de visualización para el documento. A continuación veremos cuáles.http://www.htmlpoint.com/guida/html_04.htm

 <br>La etiqueta <br> se utiliza para crear un salto de línea. CódigoEste texto tiene <br>varios saltos de línea<br> para ver su funcio<br>namiento.ResultadoEste texto tiene varios saltos de líneapara ver su funcionamiento.

  6.  HTML básico El HTML es un lenguaje ó código que se utiliza para crear páginas de internet. Este lenguaje ó estos códigos son reconocidos por un editor de texto HTML el cual, de acuerdo a esos códigos, imágenes, textos, tablas y un sin fin de elementos que se colocan dentro del código permiten la creación de una página de internet. Cuando creamos una página de internet debemos incluir el siguiente código.Código:<html><head><title>HTML Básico para aficionados</title></head><body>Bienvenidos a mi página</body></html>Descripción: La propiedad de HTML nos indica el punto de partida del código que creará la página de internet. La propiedad de HEAD nos indica el punto de partida de la cabecera de la página, area que se utiliza para incluir "scripts", códigos y textos invisibles que dan forma a algunos aspectos de la página. La propiedad de TITLE se utiliza para adjudicarle un título a la página que será visto en la barra superior de la página de internet, como el que se muestra en esta página (HTML Básico para aficionados). Y para finalizar tenemos la propiedad de BODY que nos indica el inicio del cuerpo de la página donde se coloca el texto, imágenes y el contenido principal de esta.http://daleclick.blogspot.com.co/2005/02/que-es-html.html

7.   Diseño de las paginas y Estructura básica de una pagina webLa 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).

<html><head><title>Esto es el t&iacute;tulo de la p&aacute;gina.</title></head><body>Hola mundo!<br><b>Esto es negrita.</b><br><i>Y esto it&aacute;lica.</i><br></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):<hr>.

Observad el título en la parte superior izquierda de la página. Además, dentro de <body></body> distinguimos varias etiquetas:<br> => Indica salto de línea. En HTML un salto de línea normal (púlsando la tecla Enter) no produce un salto de línea en el resultado. Es necesario escribir <br> (u otra etiqueta similar).<b></b> => Indica comienzo y fin de negrita.<i></b> => Itálica.También observamos el código &iaacute; => Esto indica que queremos poner una "i" con acento, es decir, "í". Esto se explicará en un capítulo posterior.Es importante mencionar que las etiquetas se pueden escribir indistintamente en mayúsculas o minúsculas, es decir <b>Esto es negrita.</b> y <B>Esto es negrita.</B> produce el mismo resultado. Por otro lado, toda etiqueta que se abre (es decir, se pone la etiqueta sin la barra /) debe cerrarse (es decir, poner su equivalente con el símbolo /), si no, el navegador podría dar resultados inesperados. Excepciones a esto son algunas etiquetas que no lo necesitan, como <br> o <hr>.http://html.hazunaweb.com/102.php

Desde los inicios de la World Wide Web, tanto el diseño de las páginas como de la propia estructura de los hiperdocumentos, ha variado enormemente. Si al principio, los hipertextos en la Web se limitaban a plasmar, sobre este nuevo medio, un texto impreso segmentándolo en pequeños bloques y colocando aquí y allá algunos enlaces, en la actualidad, las páginas web se han convertido en verdaderas obras de diseño gráfico, multimedia e ingeniería informática. Integración de bases de datos, servicios online, inclusión de sofisticadas herramientas de búsqueda y recuperación de información, dinamismo, usabilidad e interactividad, éstas son las claves de las páginas web actuales. Ya no importa sólo el contenido presentado, sino su diseño y, sobre todo, su funcionalidad.En 1997, David Siegel en Técnicas avanzadas para el diseño de páginas web distinguía 3 generaciones en el desarrollo de las interfaces de la WWW:

 Webs de primera generación: estructura lineal eventual inserción de fotografías y líneas de separación baja definición (proyectados para terminales ASCII en blanco y negro)  Webs de segunda generación: iconos en vez de palabras subrayadas con azul menú de opciones fondos coloreados o con imágenes bordes azules alrededor de las figuras interactivas  Webs de tercera generación: hegemonía del diseño sobre la tecnología utilización de metáforas uso de un layout tipográfico y visual para la descripción de una página bidimensional estructura entrada -área central- salida http://www.hipertexto.info/documentos/diseg_web.htm

 8. Hipervínculos¿Qué es un hipervínculo?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.

Tipos de hipervínculos.Existen varios tipos de hipervínculos. Vamos a ver los más usados.Hipervínculo de texto: Un hipervínculo de texto es un enlace que se encuentra asociado a un texto, de forma que si hacemos clic sobre ese texto, navegamos dónde indique el hipervínculo. Por defecto, cuando creamos un hipervínculo de texto, el texto aparece subrayado y en un color distinto al del texto normal, de forma que el visitante sepa que existe ese enlace. Si volvemos a la página después de visitar el enlace, este aparecerá con otro tono también. Aunque es interesante diferenciar el hiperenlace, es posible que no queramos que aparezca así.Hipervínculo de imagen: Un hipervínculo de imagen es un enlace que se encuentra asociado a una imagen, de forma que si hacemos clic sobre esa imagen, navegamos dónde indique el hipervínculo. Por defecto cuando creamos un hipervínculo de imagen, la imagen aparece rodeada de un borde con un color llamativo para que el visitante sepa que existe ese enlace.Por otra parte, los hipervínculos pueden referirse a páginas del mismo sitio web o de otros sitios web.Hipervínculo local o interno: Un hipervínculo local o interno es un vínculo a una página que se encuentra en el mismo sitio web (sitio local). Así, para referirnos a ella tan solo basta con poner la ruta o dirección en el disco duro. Si se encuentra en la misma carpeta, basta con poner su nombre. Por ejemplo, supongamos que tenemos un vínculo desde esta página a otra llamada curso que está en la carpeta access . El vínculo sería: access/curso.htm

Hipervínculo externo : Un hipervínculo externo es un vínculo a otro sitio web en Internet (sitio externo). Es un vínculo a cualquier otro lugar fuera del sitio actual. Cuando ponemos un vínculo externo, escribimos la dirección completa de la página incluido http://www....Hipervínculo a una dirección de correo electrónico: Un hipervínculo a una dirección de correo electrónico es un vínculo que contiene una dirección de correo. Al pulsar en él, automáticamente se abre el programa de correo que tenga el usuario instalado para poder escribir a esa dirección de correo. Existen diferentes clases de rutas de acceso a la hora de definir los vínculos.Referencia absoluta: Conduce a una ubicación externa al sitio en el que se encuentra el archivo. La ubicación es en Internet, es decir toda la url identificativa del archivo en la red. Los hipervínculos externos siempre deben tener una referencia absoluta. Por ejemplo: "http://www.ecomur.com". Los hipervínculos internos pueden tener referencia absoluta o relativa. Por ejemplo: "http://www.deciencias.net/disenoweb/elaborar/graficos.htm" o "graficos.htm"Referencia relativa (al sitio o al documento): La referencia relativa al sitio conduce a un archivo situado dentro del mismo sitio que el documento actual partiendo del directorio raiz y al documento conduce a un archivo situado dentro del mismo sitio que el archivo actual, pero partiendo del directorio en el que se encuentra el actual.http://www.deciencias.net/disenoweb/elaborardw/paginas/hipervinculos.htm 

Se emplea más por ser menos engorrosa la relativa al documento. Pero hay que tener muy presente la estructura del sitio en carpetas y subcarpetas y los niveles de organización de los archivos: Ejemplo: (al documento): " ../index.htm "; (al sitio): " disenoweb/index.htm"Referencia a una parte de un documento: Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Primero debemos definir un punto de fijación, anclaje o marcador. El punto se define dentro de un documento con el cursor en el lugar exacto a través del menú Insertar , opción Anclaje con nombre (DW) o Marcador (FP). Después colocar el vínculo:" #nombre_anclaje" (misma página)" nombre_documento#nombre_anclaje" (distinta página).  

9. Publicación Paso 1: La selección y adquisición de el o los nombre de dominio para internet. ejm:  [www.savicom.com.co] Paso 2: Configuración del servicio de hosting donde se alojan el sitio web y los buzones de correo electrónico. ejm: www.savicom.com.co - soporte@savicom.com.co Paso 3: Planeación de contenidos y definición del mapa de navegación del sitio web. Durante la ejecución de esta tarea definimos si el sitio web debe ser desarrollado con un gestor de contenidos, como el de WORDPRESS y la utilización de plantillas web pre-diseñadas, como las deTEMPLATEMONSTER;  o si por el contrario, debemos realizar un diseño "A LA MEDIDA de nuestro cliente" utilizando las herramientas de desarrollo de MACROMEDIA y el desarrollo de aplicaciones web en .PHP para bases de datos MySQL. Paso 4: Selección y adquisición de la plantilla prediseñada para el sitio web. Nuestro proveedor de plantillas es www.templatemonster.com. O si la decisión es un diseño "A la medida", realizamos el diseño creativo y la presentación de bocetos en .JPG para que nuestro cliente seleccione el que mas le guste.

Paso 5: Configuración del gestor de contenidos WORDPRESS en el hosting para la administración del sitio web. O si la decisión es diseño " A la medida" realizamos el desarrollo del sitio web en .HTML con la herramienta Dreamweaver de Macromedia. Paso 6: Configuración de la plantilla web a los requerimientos de manejo de contenido definidos en el mapa de navegación del sitio web. Paso 7: Digitación de los contenidos iniciales del sitio web en cada una de las secciones definidas durante la planeación del desarrollo del sitio web. Paso 8: Publicación del sitio web en la internet.http://imagine.com.co/diseno-posicionamiento-web/

    10.Generadores de sitios web gratuitos1.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.http://www.abc.es/tecnologia/redes/20130219/abci-alojamiento-gratis-201302181850.html