SlideShare uma empresa Scribd logo
1 de 28
Creacion de una
pagina web con
el bloc de notas
   Castro perez daniel antonio
01. Cómo crear página
           inicio!
• ¿Es necesario que el archivo de mi página principal se
  llame "index.html"?.
• Sí. Para que aparezca su página principal cuando visite
  la URL, debe tener un archivo de nombre index.html.
  Puede modificar esa página, o, cargar una nueva, pero
  en ambos casos debe llamarse index.html. ¡Atención!:
  en los nombres de archivo se diferencian mayúsculas y
  minúsculas, así "index.html" no es igual que "Index.html" o
  "INDEX.HTML". Además, ".htm" es distinto de ".html". De
  esta forma, cuando un navegante teclee la dirección
  de su web: http://pepito, o juanito.com/nombre El
  servidor le estará mostrando de forma automática la
  dirección: http://juanito, o
  pepito.com/nombre/index.html Por tanto, es necesario
  que su página principal tenga exactamente el nombre
  index.html.
¿Cómo empieza el código
         HTML de una página?
•   A continuación, se detalla el formato básico para una página en HTML:
•
•
•   <HTML>
•
•   <HEAD>
•
•   <TITLE>Título</TITLE>
•
•   </HEAD>
•
•   <BODY>
•
•   Aquí se introducen las tablas, las fotos, enlaces, etcétera.
•
•   </BODY>
•
•   </HTML>
•
•   Las páginas empiezan con la etiqueta <HTML>, seguida por las etiquetas <HEAD>. Encontrará las etiquetas para
    introducir el nombre de la página en las etiquetas
•
•   <TITLE>. Se trata del título que aparece en la esquina izquierda superior de su navegador al acceder a la página.
    Note que se cierran las etiquetas TITLE y HEAD antes de introducir el contenido en sí de la página dentro de las
    etiquetas <BODY>.
•
03. Como crear párrafos!
•    Párrafos, saltos de línea y espacios
•
•
•   Para crear un nuevo párrafo sólo tiene que añadir una etiqueta <P> delante del
    texto. Así se crea una línea en blanco antes de empezar el párrafo.
•
•   Los saltos de línea se crean con la etiqueta <BR>, que hace que el texto comience
    una línea por debajo de la anterior, pero sin insertar ninguna línea en blanco.
•
•   También observará que puede usar la barra espaciadora del teclado mientras
    modifica textos HTML, aunque el navegador convertirá todos esos espacios a un
    espacio como máximo.
•    Para crear más de un espacio debe usar la etiqueta & nbsp; (por favor, no incluya
    el espacio en blanco que figura entre & ynbsp;).
•
•   Al insertar esta etiqueta en el texto está indicando al navegador que desea
    insertar espacios en la línea…
04. Como agregar texto!
•
     ¿Cuánto texto se puede agregar?
•
•
• Existe un número límite de caracteres que se pueden escribir
  en los cuadros de texto. Una vez que se alcanza ese límite, no
  se puede escribir más texto.
•
• Si corta y pega texto que supere ese límite, se cortará a partir
  de la longitud máxima permitida.
•
• Nota: la cantidad de texto que escriba afectará a la
  distribución de la página. En ocasiones puede ser necesario
  modificar la longitud del texto para mejorar
• el aspecto de la página…
05. Cómo se utilizan las
            fuentes!
•   ¿Cómo se utilizan las fuentes?
•
•
•   Puede usar la etiqueta FONT para mejorar aún más el aspecto del texto. Por ejemplo, puede
    definir el tipo, tamaño y color de la tipografía, todo ello con la etiqueta FONT.
•   Por ejemplo:
•
•   <FONT FACE="Arial" SIZE="2" COLOR="#0000FF">¡HOLA!</FONT>
•
•   El ejemplo anterior hará que aparezca la palabra:
•    ¡HOLA! en la fuente ARIAL, tamaño 2 y color azul: ¡HOLA!
•
•
•   Los diseñadores de páginas Web tienen que prestar atención a la selección de fuentes ya qué,
    esto es importante, las fuentes que se usan en una página, sólo aparecerán correctamente si el
    visitante tiene las mismas fuentes instaladas en su equipo. La solución a este problema consiste
    en usar fuentes que están normalmente instaladas en la mayoría de los sistemas, por
    ejemplo: Arial, Times New Roman, Helvetica. Si realmente tiene mucho interés en añadir
    algunas fuentes especiales a su página, puede guardarlas como imágenes e incluirlas en la
    página…
•
•
             06. Como_crear_listas!
    ¿Se pueden crear listas?
•
•
•   Sí, y es bastante simple.
•    Puede usar etiquetas HTML para crear listas ordenadas (numeradas), no ordenadas (con viñetas) y listas de definición (con sangría) fácilmente y con rapidez.
•
•   Lista ordenada:
•
•   Puede crear listas numeradas, u ordenadas, con la etiqueta <OL> (lista ordenada).
•    El formato es el siguiente:
•
•   <OL>
•
•   <LI>elemento uno
•
•   <LI>elemento dos
•
•   <LI>elemento tres
•
•   </OL>
•
•   La lista tendrá este aspecto:
•
•   Lista con 3 elementos
•
•   1. elemento uno
•
•   2. elemento dos
•
•   3. elemento tres
•
•   fin de lista
•
•   Lista no ordenada:
•
•   Para crear listas con viñetas, o no ordenadas, se usa la etiqueta <UL> (lista no ordenada). El formato es el siguiente:
•
•   <UL>
•
•   <LI>elemento uno
•
•   <LI>elemento dos
•
•
•
            06. Como_crear_listas!
    <LI>elemento tres

•   <UL>
•
•   La lista tendrá este aspecto:
•
•   Lista con 3 elementos
•
•   • elemento uno
•
•   • elemento dos
•
•   • elemento tres
•
•   fin de lista
•
•   Lista de definición:
•
•   La lista de definición es distinta y puede usarse para aplicar sangrías automáticamente a determinadas partes del texto. La mejor manera de explicar qué es una lista de definición es mostrar una:
•
•   Definida lista con 2 elementos
•
•   Naranjas = Una fruta de color amarillo-rojizo y del tamaño de una manzana. Pertenece a la familia de los frutos cítricos. En España, las naranjas se crían principalmente en la región levantina.
•
•   Manzanas = La manzana es un fruto de tamaño similar al de las naranjas y con distintos colores resultantes de combinar rojo, amarillo y verde. En España, las manzanas se crían principalmente en las regiones
    del norte.
•
•   fin de lista
•
•   Ésta es la misma lista con las etiquetas visibles:
•
•   <DL>
•
•   <DT> Naranjas
•
•   <DD> Una fruta de color amarillo-rojizo y del tamaño de una manzana. Pertenece a la familia de los frutos cítricos. En España, las naranjas se crían principalmente en la región levantina.
•
•   <DT> Manzanas
•
•   <DD> La manzana es un fruto de tamaño similar al de las naranjas y con distintos colores resultantes de combinar rojo, amarillo y verde. En España, las manzanas se crían principalmente en las regiones del
    norte.
•
•   </DL>
07. Cómo se alinea el texto
      en la página!
•   ¿Cómo se alinea el texto?
•
•
•   Puede usar estas etiquetas de párrafo para cambiar la alineación del texto en la página:
•
•   ALIGN LEFT
•
•   <p align="left">Escriba el texto aquí
•
•   aparecerá como:
•
•   Escriba el texto aquí
•
•   ALIGN RIGHT
•
•   <p align="right">Escriba el texto aquí
•
•   aparecerá como:
•
•   Escriba el texto aquí
•
•   CENTER
•
•   <p align="center">Escriba el texto aquí
•
•   o bien
•
•   <CENTER>Escriba el texto aquí</CENTER>
•
•   aparecerá como:
•
•   Escriba el texto aquí…
08. Cómo se da formato al
•
             texto!
    ¿Cómo se da formato al texto?
•
•
•   Ya ha aprendido que debe comenzar a escribir el texto entre las etiquetas BODY. Puede dar distintos formatos al texto:
•
•   Lista con 3 elementos
•
•   1. Negrita, cursiva y subrayado
•
•   Puede hacer que el texto que usa aparezca en negrita, cursiva o subrayado. Para ello sólo tiene que ponerlo entre las etiquetas correspondientes a esos atributos.
•
•   <b>Texto cualquiera en negrita</b>
•
•   aparecerá como: Texto cualquiera en negrita
•
•
•   <i>Texto en cursiva</i>
•
•   aparecerá como: Texto en cursiva
•
•
•   <u>Texto subrayado</u>
•
•   aparecerá como: Texto subrayado
•
•
•    También puede combinar estos atributos para obtener el que desee. Por ejemplo:
•
•   <b><i>Texto en negrita y cursiva</i></b>
•
•   aparecerá como: Texto en negrita y cursiva
•
•   NOTA: es importante que las etiquetas de cierre aparezcan en el mismo orden que las de inicio. En otras palabras, en el último ejemplo es importante que la etiqueta de cursiva se cierre antes que la de
    negrita (ponga la </i> antes de la </b>).
•
•
•   2. Uso de los tamaños de los encabezados
•
•   Los navegadores reconocen seis niveles distintos de encabezados.
•
•   <h1>Encabezado de nivel uno </h1>
08. Cómo se da formato al
•
             texto!
•   <h2>Encabezado de nivel dos</h2>
•
•   <h3>Encabezado de nivel tres</h3>
•
•   <h4>Encabezado de nivel cuatro</h4>
•
•   <h5>Encabezado de nivel cinco</h5>
•
•   <h6>Encabezado de nivel seis</h6>
•
•
•   Los encabezados tendrán este aspecto:
•
•   Encabezado de nivel uno
•
•   Encabezado de nivel dos
•
•   Encabezado de nivel tres
•
•   Encabezado de nivel cuatro
•
•   Encabezado de nivel cinco
•
•   Encabezado de nivel seis
•
•
•   3. Centrar texto
•
•   De forma predeterminada, los navegadores alinean el texto a la izquierda. Puede alinear el texto en el centro si lo pone entre dos etiquetas <center>.
•
•   El texto:
•
•     <center>Ésta es una prueba</center>
•
•   aparecerá como:
•
•   Ésta es una prueba
•
•   Si hay más de una línea de texto entre las etiquetas, todas ellas aparecerán centradas…
09. Cómo se insertan
          líneas horizontales!
•   ¿Cómo se insertan líneas horizontales?
•
•
•   Use la etiqueta <HR> para insertar una línea (o regla) horizontal en la
    página, como ésta:
•
•   Puede personalizar la regla horizontal, cambiando por ejemplo su
    anchura y el color. Por ejemplo, con este código: <HR WIDTH="50%"> se
    obtiene el siguiente resultado:
•
•   También puede cambiar el color añadiendo el atributo COLOR="RED",
    aunque sólo tiene efecto con los navegadores Microsoft Internet
    Explorer.
•   Si ve este ejemplo con IE debe aparecer una regla horizontal en color
    rojo:
•
•   El código es simplemente: <HR WIDTH="50%" COLOR="RED">
10. Cómo poner color en
       página web!
• Para darle colores a una página, debes darle la
  órden luego de la etiqueta .Ahora los colores se
  nombran ya sea en su nombre correspondiente en
  Inglés, o también en sus códigos respectivos en
  números.
  Ejemplo 1:
• < body bgcolor="black" text="white" >
10. Cómo poner color en
        página web!
• Ejemplo 2:
• < body bgcolor="#000000" text="#FFFFFF" >
• Esto hará que tu página sea con un fondo de color
  negro y el texto blanco.
11. Cómo cambiar los colores
    del texto y del fondo!
•   ¿Se pueden cambiar los colores del texto y del fondo?
•
•
•   La etiqueta <BODY> controla los colores, las imágenes de fondo y algunas otras características.
•
•   Puede controlar el color del fondo, texto y enlaces de la página principal por medio de la etiqueta <BODY>.
•
•   Para establecer el color del fondo, texto, enlace, enlace visitado o enlace activo, sustituya el valor de un color modificando los seis caracteres que
    aparecen tras el símbolo "#" como en el siguiente ejemplo.
•
•   No haga que todos ellos tengan el mismo color, ya que de hacerlo no vería nada en la página (porque tanto el fondo como el texto tendrían el mismo
    color).
•
•   Puede incluir cualquiera de los siguientes elementos (BGCOLOR, TEXT, LINK, VLINK o ALINK), o no incluir ninguno de ellos.
•
•   <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#="#0000FF" VLINK="#="#009900" ALINK="#FF0000">
•
•   Éstos son algunos colores que puede usar:
•
•   Blanco
•
•   Amarillo
•
•   Rojo
•
•   Gris
•
•   Azul
•
•   Verde
•
11. Cómo cambiar los colores
    del texto y del fondo!
•   Negro
•
•   Morado
•
•   Azul claro
•
•   #FFFFFF
•
•   #FFFF66
•
•   #FF0000
•
•   #CC9999
•
•   #0000FF
•
•   #00FF00
•
•   #000000
•
•   #CC33FF
•
•   #00CCFF
•
•   Estos valores hexadecimales representan la combinación de Rojo, Verde y Azul (RGB) que produce el color en cuestión. Examine este atractivo
•
•   cuadro de colores
•
•   (en inglés) que muestra de forma gráfica los códigos de color hexadecimales…
12. Cómo añado una
•
                           tabla!
        ¿Cómo añado una tabla?
•
•
•   A continuación detallamos el código para añadir una tabla sencilla a su página:
•
•   <TABLE>
•
•   <TR>
•
•   <TD>1</TD>
•
•   <TD>2</TD>
•
•   </TR>
•
•   </TABLE>
•
•   Cada etiqueta tiene un propósito específico. Por ejemplo:
•
•   Lista con 3 elementos
•
•   • Cada tabla tiene que abrirse con esta etiqueta <TABLE> y cerrarse con ésta </TABLE>.
•
•   • Cada fila de la tabla (table row en inglés) debe abrirse con esta etiqueta <TR> y cerrarse con ésta </TR>.
•
•   Para una tabla de tres filas:
•
•   1
•
•   2
•
•   3
•
•   • Cada fila contiene una celda de datos o más (table data cell en inglés). Cada celda debe abrirse con la siguiente etiqueta <TD> y cerrarse con ésta</TD>.
•
12. Cómo añado una
                          tabla!
•   Aquí se incluye un ejemplo de una tabla con una fila y tres celdas:
•
•   1
•
•   2
•
•   3
•
•   fin de lista
•
•   Entonces, si añade el siguiente código a su página:
•
•   <TABLE border=1 width=70%>
•
•   <TR>
•
•   <TD>hola</TD>
•
•   <TD>chao</TD>
•
•   <TD>guay</TD>
•
•   </TR>
•
•   </TABLE>
•
•   La tabla tendrá el siguiente aspecto (una fila con dos celdas):
•
•   hola
•
•   chao
•
•   guay
•
•   Nota: "Border" sirve para ponerle un borde a la tabla; cuanto más alto sea el número, más grueso será. "Width" (anchura) indica qué porcentage de la
    página ocupará la tabla; aunque también se puede expresar en número de píxels. En este caso, ocupa el 70%.
13. Cómo crear enlaces
                links!
•   ¿Cómo se crean los enlaces (links)?
•
•
•    En la página puede crear enlaces que señalen a:
•
•   1. Una página o archivo del directorio
•
•   2. Una página o archivo de un subdirectorio
•
•   3. Una ubicación externa (en Internet)
•
•   fin de lista
•
•   Para crear un enlace a una página o archivo del mismo directorio que el de la página que se modifica, basta con usar la ruta de acceso relativa, con lo
    que el enlace sólo incluirá el nombre del archivo:
•
•   <a href="pagina.html">Página siguiente</a>
•
•   En la página aparecerá el texto "Página siguiente", y al hacer clic en él aparecerá la página cuyo archivo se denomina pagina.html.
•    Si desea cambiar el texto del enlace sustituya "Página siguiente" por el que desee usar. Además, si desea que el enlace señale a otra página, bastará
    con que sustituya "pagina.html"
•
•   por el nombre de ese archivo.
•
•   Cuando el enlace sea a un subdirectorio, debe usar este formato:
•
•   <a href="subdirectorio/pagina.html">Página siguiente</a>
•
•   Al crear un enlace a una página externa al directorio, o en Internet, basta con usar la dirección completa (denominada ruta de acceso absoluta) en
    lugar de la ruta de acceso relativa:
•
•   <a href="http://servidor.com.. ó, .es">Ir a Mi página!</a>
•
•   El código anterior, crea un enlace que permite ir a la página "seleccionada!".
14. Cómo se añade un
         enlace a una imagen!
•   ¿Cómo se añade un enlace a una imagen?
•
•
•   Para crear un enlace en una imagen, puede usar el código de ejemplo siguiente:
•
•   <a href="pagina.html"><img src="imagen.gif"></a>
•
•   La imagen de nombre "imagen.gif" aparece en la página, y al hacer clic en él, el navegador irá a la página denominada
    pagina.html (sustituya esos nombres por los de sus archivos).
•   También puede añadir un atributo BORDER dentro de la etiqueta IMG SRC para personalizar el borde del enlace que
    aparece alrededor de la imagen. El código de ejemplo anterior no incluye el atributo BORDER, por lo que el resultado será
    el siguiente:
•
•   my/top7
•
•   Aquí tiene de nuevo el mismo ejemplo, la diferencia es que ahora se ha añadido el atributo BORDER="0" en la etiqueta IMG
    SRC para quitar el borde. Éste es el código:
•
•   <A HREF="http://servidor.com, ó. es"><IMG SRC="http://us.yimg.com/i/es/my/top7.gif" BORDER="0"></A>
•
•   my/top7
•
•   La imagen servidor! del ejemplo anterior incluye un enlace para ir a la página seleccionada! También se ha añadido el
    atributo BORDER="0" para quitar el borde
•
•   de enlace de alrededor de la imagen.
•
•   Tenga en cuenta que: en los enlaces se distinguen mayúsculas y minúsculas, recuerde que index.html NO es igual que
    INDEX.html…
15. Cómo se crean enlaces
•
         a delimitadores!
    ¿Cómo se crean enlaces a delimitadores?
•
•
•   Los enlaces a delimitadores pueden ser muy útiles para facilitar a los visitantes su desplazamiento por páginas de gran tamaño. Pueden crearse mediante dos conjuntos distintos de códigos. ambos situados
    dentro de etiquetas <A> </A>. Éstos son los pasos que se deben seguir:
•
•   En primer lugar debe decidir el nombre del delimitador. En este ejemplo vamos a usar "delimitador". En este caso, basta con usar el código <A NAME="delimitador"> para definir el punto en que desea colocar
    el delimitador, de forma que cuando se establezca un enlace con este delimitador, se vaya directamente a ese
•
•   punto. Recuerde que es más lógico incluir delimitadores si desea que se pueda tener acceso a las distintas secciones de la página. Esta posibilidad es más útil en el caso de páginas de gran tamaño en las
    que no es posible ver toda la información a la vez en la ventana del navegador. Para este ejemplo, se ha situado el código del delimitador inmediatamente antes del final de la página a modo de ejemplo.
•   ¿Cómo se establece un enlace a ese delimitador?
•
•   Basta con usar:
•
•   <A HREF="#nombre del delimitador">PARTE 1</A>
•
•   Observe el símbolo "#" que aparece antes del nombre del delimitador. ¡Es muy importante! Este código hace que aparezca el texto "PARTE 1" en la página,
•
•   y al hacer clic en él se pasará directamente al punto de esa misma página en el que se haya colocado el delimitador.
•
•   En el ejemplo siguiente, el código que se usa para crear el enlace al delimitador es el siguiente: Se han añadido varias líneas de "texto de ejemplo" para que el ejemplo de salto al delimitador del final de la
    página sea más clarificador:
•
•   <a href="#delimitador">PARTE 1</a>
•
•   <p>texto de ejemplo
•
•   <p>texto de ejemplo
•
•   <p>texto de ejemplo
•
•   <p>texto de ejemplo
•
•   <p>texto de ejemplo
•
•   <p>texto de ejemplo
•
•   <p>texto de ejemplo
•
•   <p>texto de ejemplo
•
•   <p>texto de ejemplo
•
•   <p>texto de ejemplo
•
•   <p>texto de ejemplo
•
15. Cómo se crean enlaces
•
•
         a delimitadores!
    <p>texto de ejemplo

•   <p>texto de ejemplo
•
•   <p>texto de ejemplo
•
•   <p><a name="delimitador">Debe quedar en este punto</a>
•
•   Éste es el aspecto que debe tener en la página. A seguir, haga clic en el enlace.
•
•   PARTE 1
•
•   texto de ejemplo
•
•   texto de ejemplo
•
•   texto de ejemplo
•
•   texto de ejemplo
•
•   texto de ejemplo
•
•   texto de ejemplo
•
•   texto de ejemplo
•
•   texto de ejemplo
•
•   texto de ejemplo
•
•   texto de ejemplo
•
•   texto de ejemplo
•
•   texto de ejemplo
•
•   texto de ejemplo
•
•   texto de ejemplo
•
•   Debe quedar en este punto
•
•   También es útil tener delimitadores que permitan volver al principio de la página, de forma que los visitantes puedan hacer clic en ellos si desean regresar al principio. Basta con usar un nombre distinto para el
    delimitador y colocarlo al principio de la página…
16. Cómo se crean gráficos
      en miniatura!
•   ¿Cómo se crean gráficos en miniatura?
•
•
•   La página puede incluir gráficos en miniatura enlazados a las versiones en tamaño completo de las imágenes
    (también llamados "thumbnails"), para ello debe
•   tener dos versiones distintas de la imagen: una en miniatura y la otra de tamaño completo.
•
•   Para ello debe crear al menos dos páginas, una para la imagen en tamaño completo y otra con los gráficos en
    miniatura.
•
•   Supongamos que el nombre de la imagen es "imagen.gif" y la página en la que desea incluir esta imagen se
    llama "pagina1.html". En ese página debe incluir
•   este código:
•
•   <img src="imagen.gif">
•
•   En la página de los gráficos en miniatura debe crear enlaces a la página "pagina1.html".
•
•   <a href="pagina1.html"><img src="miniatura.gif"></a>
•
•   miniatura.gif es la versión pequeña de la imagen e incluye un enlace a la pagina1.html, que es la que tiene la
    imagen en tamaño completo.
•
•   Para cambiar correctamente el tamaño de las imágenes debe usar un programa de edición de imágenes….
17. Cómo se puede incluir
         música de fondo!
•   ¿Cómo se puede incluir música de fondo?
•
•
•   Hay dos juegos de códigos diferentes cuyo uso se recomienda para hacer que suene una música de fondo
    cuando alguien visite la página. Microsoft Internet
•   Explorer usa la etiqueta <BGSOUND SRC>, mientras que Netscape Navigator usa <EMBED>. Incluya el código
    siguiente (dentro de la etiqueta HEAD) para que
•
•   la página tenga una música de fondo:
•
•   <EMBED SRC="musica.mid" AUTOSTART=TRUEHIDDEN=TRUE><NOEMBED><BGSOUND
    SRC="musica.mid"></NOEMBED>
•
•   Sustituya "musica.mid" por el nombre actual del archivo que desea usar.
•    También puede hacer que la música de fondo suene ininterrumpidamente, hasta que
•   el visitante haga clic en el botón "DETENER" del navegador, o vaya a otra página. Éste es el mismo código del
    ejemplo anterior, pero con reproducción continua:
•
•   <EMBED SRC="musica.mid" AUTOSTART="TRUE" HIDDEN="TRUE" LOOP="TRUE"><NOEMBED><BGSOUND
    SRC="musica.mid" LOOP="INFINITE"></NOEMBED>
•
•   Atención: tenga en consideración que el archivo de sonido que utilice como música de fondo debe estar entre
    los archivos de su página (como las imágenes)
•
•   y que deberá cargarlo utilizando la herramienta de Carga Fácil (desde el Administrador de archivos) o un
    programa de FTP…
18. Cómo crear enlace
          correo electrónico!
•   ¿Puedo crear un enlace que permita a las visitas enviarme un correo-e?
•
•
•   Claro que sí. Ese enlace se denomina "mail-to" ya que ése es el formato del código:
•
•   <A HREF="mailto:nombre@servidor.es">enviar un mensaje de correo</A>
•
•   El código anterior hace que aparezca en la página el texto "enviar un mensaje de correo", al
    hacer clic en ese texto se abre una nueva ventana del programa
•   de correo predeterminado con la dirección de correo-e ya escrita en el campo "PARA:". Este
    enlace sólo funciona correctamente cuando el visitante usa un
•   programa de correo-e para enviar correo electrónico.
•
•   Otra posibilidad que funciona en cualquier caso consiste en usar la opción "¡Envíeme un
    correo-e!" en el Cajetín Publicitario. Si tiene incluido dicho Cajetín
•   en su página principal (situado en la esquina superior derecha), puede activar el enlace
    "¡Envíeme un correo-e!". Cuando un visitante haga clic en él,
•
•   pasará a una página Web donde puede escribirle un mensaje. Ese mensaje se enviará a la
    dirección de correo que elija al personalizar el Cajetín Publicitario…
19. Cómo crear enlace
    descarga fichero música!
•   ¿Se pueden incluir solamente enlaces a los archivos de música para que
    se puedan descargar?
•
•
•   Sí. En lugar de usar los códigos de música de fondo, puede emplear
    simplemente un código de hiperenlace. Este ejemplo de código
    pregunta a los usuarios
•   si desean descargar un archivo WAV.
•
•   <A HREF="cancion.wav">Descargar esta canción</A>
•
•   El código del ejemplo anterior hace que aparezcan las palabras
    "Descargar esta canción" en la página Web, al hacer clic en ellas
    aparece un cuadro de diálogo
•   en el que se le pregunta al usuario si desea guardar el archivo o
    reproducirlo, siempre que para ello tenga correctamente instalada la
    aplicación necesaria…
20. Cómo crear imágen
          fondo página!
•   ¿Se puede usar una imagen como fondo de la página?
•
•
•   Claro que sí. Al añadir el atributo BACKGROUND a la etiqueta BODY puede hacer
    que un mosaico de imágenes cubra completamente el fondo. Recuerde que la
    imagen
•
•   se muestra en forma de mosaico, por eso puede usar una imagen pequeña y
    cubrir totalmente la página. Es aconsejable usar imágenes pequeñas para que la
    página se cargue con mayor rapidez. Utilice el código siguiente para incluir una
    imagen como fondo.
•
•    <BODY BACKGROUND="imagen.jpg">
•
•   Sustituya "imagen.jpg" por el nombre real del archivo de imagen.
•
•   Nota importante: si ya ha creado la página y ésta ya incluye una etiqueta BODY,
    debe añadir dentro de esa etiqueta el atributo BACKGROUND. No cree una nueva
    etiqueta BODY…
21. Cómo corregir errores
         al cargar página!
•    He guardado la página, la he modificado en línea y la vuelto a
    cargar. Ahora aparecen errores al ver la página. ¿Cómo puedo
    corregir el problema?
•
•
•   Si ha guardado la página con el comando "Guardar como" del
    navegador, puede que haya guardado con ella partes de
    código dinámico (como por ejemplo, el Cajetín
•
•   Publicitario). Tiene que eliminar todo el código que haya
    guardado involuntariamente junto con la página, sólo así se
    puede corregir el problema. El código
•   del Cajetín Publicitario se inserta automáticamente DETRÁS de la
    etiqueta de cierre </HTML>, por eso puede quitar todo el código
    que encuentre detrás de
•
•   la etiqueta antes de volver a cargar la página…

Mais conteúdo relacionado

Mais procurados

Elementos básicos y estructura de una página web
Elementos básicos y estructura de una página webElementos básicos y estructura de una página web
Elementos básicos y estructura de una página webadri9610
 
Ejemplos de HTML
Ejemplos de HTMLEjemplos de HTML
Ejemplos de HTMLeduardodf47
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas htmldanneszm
 
Etiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlEtiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlDoraliza Hugo Vera
 
Etiquetas básicas de HTML
Etiquetas básicas de HTMLEtiquetas básicas de HTML
Etiquetas básicas de HTMLMartinez_M1
 
Producto 3
Producto 3Producto 3
Producto 3LaloWR11
 
Listado de etiquetas y atributos html
Listado de etiquetas y atributos htmlListado de etiquetas y atributos html
Listado de etiquetas y atributos htmljulyovalle
 
Instituto tecnologico del no1 meery
Instituto tecnologico del no1 meeryInstituto tecnologico del no1 meery
Instituto tecnologico del no1 meeryMeeryGarcia97
 

Mais procurados (17)

Elementos básicos y estructura de una página web
Elementos básicos y estructura de una página webElementos básicos y estructura de una página web
Elementos básicos y estructura de una página web
 
Taller de HTML
Taller de HTMLTaller de HTML
Taller de HTML
 
Etiquetas de html
Etiquetas de htmlEtiquetas de html
Etiquetas de html
 
Ejemplos de HTML
Ejemplos de HTMLEjemplos de HTML
Ejemplos de HTML
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Etiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlEtiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje html
 
HTML
HTMLHTML
HTML
 
Producto 3
Producto 3Producto 3
Producto 3
 
Etiquetas básicas de HTML
Etiquetas básicas de HTMLEtiquetas básicas de HTML
Etiquetas básicas de HTML
 
Producto 3
Producto 3Producto 3
Producto 3
 
HTML
HTMLHTML
HTML
 
Listado de etiquetas y atributos html
Listado de etiquetas y atributos htmlListado de etiquetas y atributos html
Listado de etiquetas y atributos html
 
Tema02 html
Tema02 htmlTema02 html
Tema02 html
 
Directivas en html
Directivas en htmlDirectivas en html
Directivas en html
 
comandos de pagina web
comandos de pagina webcomandos de pagina web
comandos de pagina web
 
Html Exposicion
Html ExposicionHtml Exposicion
Html Exposicion
 
Instituto tecnologico del no1 meery
Instituto tecnologico del no1 meeryInstituto tecnologico del no1 meery
Instituto tecnologico del no1 meery
 

Semelhante a Creacion de una pagina web con el bloc

Semelhante a Creacion de una pagina web con el bloc (20)

Códigos HTML Sede magdalena ortega de Nariño
Códigos HTML Sede magdalena ortega  de NariñoCódigos HTML Sede magdalena ortega  de Nariño
Códigos HTML Sede magdalena ortega de Nariño
 
Diversas características generales
Diversas características generalesDiversas características generales
Diversas características generales
 
Introhtml
IntrohtmlIntrohtml
Introhtml
 
Semana 5 html
Semana 5  htmlSemana 5  html
Semana 5 html
 
Programacion en html
Programacion en htmlProgramacion en html
Programacion en html
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
 
manual de html
manual de htmlmanual de html
manual de html
 
Manual de html
Manual de htmlManual de html
Manual de html
 
Manual de html
Manual de htmlManual de html
Manual de html
 
Pasos de dreamweaver
Pasos de dreamweaverPasos de dreamweaver
Pasos de dreamweaver
 
Conceptos básicos y etiquetas
Conceptos básicos y etiquetasConceptos básicos y etiquetas
Conceptos básicos y etiquetas
 
Conceptos Etiquetas de HTML
Conceptos Etiquetas de HTMLConceptos Etiquetas de HTML
Conceptos Etiquetas de HTML
 
Tema 02 trabajando con texto en html
Tema 02 trabajando con texto en htmlTema 02 trabajando con texto en html
Tema 02 trabajando con texto en html
 
Codigos HTML...paginas web
Codigos HTML...paginas webCodigos HTML...paginas web
Codigos HTML...paginas web
 
Introducción html5
Introducción html5Introducción html5
Introducción html5
 
Como crear una pagina web
Como crear una pagina webComo crear una pagina web
Como crear una pagina web
 
Codigo html
Codigo htmlCodigo html
Codigo html
 
Html
HtmlHtml
Html
 
Guia de repaso html11
Guia de repaso html11Guia de repaso html11
Guia de repaso html11
 
Tutorial 2 Usando html
Tutorial 2   Usando htmlTutorial 2   Usando html
Tutorial 2 Usando html
 

Mais de danielinformaticacandas

Mais de danielinformaticacandas (6)

Sistema de archivos
Sistema de archivosSistema de archivos
Sistema de archivos
 
Qué es una presentación
Qué es una presentaciónQué es una presentación
Qué es una presentación
 
Qué es power point
Qué es power pointQué es power point
Qué es power point
 
Cambiar iconos en windows 7
Cambiar iconos en windows 7Cambiar iconos en windows 7
Cambiar iconos en windows 7
 
Historia de los sistemas operativos
Historia de los sistemas operativosHistoria de los sistemas operativos
Historia de los sistemas operativos
 
Cambiar iconos en windows 7
Cambiar iconos en windows 7Cambiar iconos en windows 7
Cambiar iconos en windows 7
 

Creacion de una pagina web con el bloc

  • 1. Creacion de una pagina web con el bloc de notas Castro perez daniel antonio
  • 2. 01. Cómo crear página inicio! • ¿Es necesario que el archivo de mi página principal se llame "index.html"?. • Sí. Para que aparezca su página principal cuando visite la URL, debe tener un archivo de nombre index.html. Puede modificar esa página, o, cargar una nueva, pero en ambos casos debe llamarse index.html. ¡Atención!: en los nombres de archivo se diferencian mayúsculas y minúsculas, así "index.html" no es igual que "Index.html" o "INDEX.HTML". Además, ".htm" es distinto de ".html". De esta forma, cuando un navegante teclee la dirección de su web: http://pepito, o juanito.com/nombre El servidor le estará mostrando de forma automática la dirección: http://juanito, o pepito.com/nombre/index.html Por tanto, es necesario que su página principal tenga exactamente el nombre index.html.
  • 3. ¿Cómo empieza el código HTML de una página? • A continuación, se detalla el formato básico para una página en HTML: • • • <HTML> • • <HEAD> • • <TITLE>Título</TITLE> • • </HEAD> • • <BODY> • • Aquí se introducen las tablas, las fotos, enlaces, etcétera. • • </BODY> • • </HTML> • • Las páginas empiezan con la etiqueta <HTML>, seguida por las etiquetas <HEAD>. Encontrará las etiquetas para introducir el nombre de la página en las etiquetas • • <TITLE>. Se trata del título que aparece en la esquina izquierda superior de su navegador al acceder a la página. Note que se cierran las etiquetas TITLE y HEAD antes de introducir el contenido en sí de la página dentro de las etiquetas <BODY>. •
  • 4. 03. Como crear párrafos! • Párrafos, saltos de línea y espacios • • • Para crear un nuevo párrafo sólo tiene que añadir una etiqueta <P> delante del texto. Así se crea una línea en blanco antes de empezar el párrafo. • • Los saltos de línea se crean con la etiqueta <BR>, que hace que el texto comience una línea por debajo de la anterior, pero sin insertar ninguna línea en blanco. • • También observará que puede usar la barra espaciadora del teclado mientras modifica textos HTML, aunque el navegador convertirá todos esos espacios a un espacio como máximo. • Para crear más de un espacio debe usar la etiqueta & nbsp; (por favor, no incluya el espacio en blanco que figura entre & ynbsp;). • • Al insertar esta etiqueta en el texto está indicando al navegador que desea insertar espacios en la línea…
  • 5. 04. Como agregar texto! • ¿Cuánto texto se puede agregar? • • • Existe un número límite de caracteres que se pueden escribir en los cuadros de texto. Una vez que se alcanza ese límite, no se puede escribir más texto. • • Si corta y pega texto que supere ese límite, se cortará a partir de la longitud máxima permitida. • • Nota: la cantidad de texto que escriba afectará a la distribución de la página. En ocasiones puede ser necesario modificar la longitud del texto para mejorar • el aspecto de la página…
  • 6. 05. Cómo se utilizan las fuentes! • ¿Cómo se utilizan las fuentes? • • • Puede usar la etiqueta FONT para mejorar aún más el aspecto del texto. Por ejemplo, puede definir el tipo, tamaño y color de la tipografía, todo ello con la etiqueta FONT. • Por ejemplo: • • <FONT FACE="Arial" SIZE="2" COLOR="#0000FF">¡HOLA!</FONT> • • El ejemplo anterior hará que aparezca la palabra: • ¡HOLA! en la fuente ARIAL, tamaño 2 y color azul: ¡HOLA! • • • Los diseñadores de páginas Web tienen que prestar atención a la selección de fuentes ya qué, esto es importante, las fuentes que se usan en una página, sólo aparecerán correctamente si el visitante tiene las mismas fuentes instaladas en su equipo. La solución a este problema consiste en usar fuentes que están normalmente instaladas en la mayoría de los sistemas, por ejemplo: Arial, Times New Roman, Helvetica. Si realmente tiene mucho interés en añadir algunas fuentes especiales a su página, puede guardarlas como imágenes e incluirlas en la página… •
  • 7. 06. Como_crear_listas! ¿Se pueden crear listas? • • • Sí, y es bastante simple. • Puede usar etiquetas HTML para crear listas ordenadas (numeradas), no ordenadas (con viñetas) y listas de definición (con sangría) fácilmente y con rapidez. • • Lista ordenada: • • Puede crear listas numeradas, u ordenadas, con la etiqueta <OL> (lista ordenada). • El formato es el siguiente: • • <OL> • • <LI>elemento uno • • <LI>elemento dos • • <LI>elemento tres • • </OL> • • La lista tendrá este aspecto: • • Lista con 3 elementos • • 1. elemento uno • • 2. elemento dos • • 3. elemento tres • • fin de lista • • Lista no ordenada: • • Para crear listas con viñetas, o no ordenadas, se usa la etiqueta <UL> (lista no ordenada). El formato es el siguiente: • • <UL> • • <LI>elemento uno • • <LI>elemento dos
  • 8. • • • 06. Como_crear_listas! <LI>elemento tres • <UL> • • La lista tendrá este aspecto: • • Lista con 3 elementos • • • elemento uno • • • elemento dos • • • elemento tres • • fin de lista • • Lista de definición: • • La lista de definición es distinta y puede usarse para aplicar sangrías automáticamente a determinadas partes del texto. La mejor manera de explicar qué es una lista de definición es mostrar una: • • Definida lista con 2 elementos • • Naranjas = Una fruta de color amarillo-rojizo y del tamaño de una manzana. Pertenece a la familia de los frutos cítricos. En España, las naranjas se crían principalmente en la región levantina. • • Manzanas = La manzana es un fruto de tamaño similar al de las naranjas y con distintos colores resultantes de combinar rojo, amarillo y verde. En España, las manzanas se crían principalmente en las regiones del norte. • • fin de lista • • Ésta es la misma lista con las etiquetas visibles: • • <DL> • • <DT> Naranjas • • <DD> Una fruta de color amarillo-rojizo y del tamaño de una manzana. Pertenece a la familia de los frutos cítricos. En España, las naranjas se crían principalmente en la región levantina. • • <DT> Manzanas • • <DD> La manzana es un fruto de tamaño similar al de las naranjas y con distintos colores resultantes de combinar rojo, amarillo y verde. En España, las manzanas se crían principalmente en las regiones del norte. • • </DL>
  • 9. 07. Cómo se alinea el texto en la página! • ¿Cómo se alinea el texto? • • • Puede usar estas etiquetas de párrafo para cambiar la alineación del texto en la página: • • ALIGN LEFT • • <p align="left">Escriba el texto aquí • • aparecerá como: • • Escriba el texto aquí • • ALIGN RIGHT • • <p align="right">Escriba el texto aquí • • aparecerá como: • • Escriba el texto aquí • • CENTER • • <p align="center">Escriba el texto aquí • • o bien • • <CENTER>Escriba el texto aquí</CENTER> • • aparecerá como: • • Escriba el texto aquí…
  • 10. 08. Cómo se da formato al • texto! ¿Cómo se da formato al texto? • • • Ya ha aprendido que debe comenzar a escribir el texto entre las etiquetas BODY. Puede dar distintos formatos al texto: • • Lista con 3 elementos • • 1. Negrita, cursiva y subrayado • • Puede hacer que el texto que usa aparezca en negrita, cursiva o subrayado. Para ello sólo tiene que ponerlo entre las etiquetas correspondientes a esos atributos. • • <b>Texto cualquiera en negrita</b> • • aparecerá como: Texto cualquiera en negrita • • • <i>Texto en cursiva</i> • • aparecerá como: Texto en cursiva • • • <u>Texto subrayado</u> • • aparecerá como: Texto subrayado • • • También puede combinar estos atributos para obtener el que desee. Por ejemplo: • • <b><i>Texto en negrita y cursiva</i></b> • • aparecerá como: Texto en negrita y cursiva • • NOTA: es importante que las etiquetas de cierre aparezcan en el mismo orden que las de inicio. En otras palabras, en el último ejemplo es importante que la etiqueta de cursiva se cierre antes que la de negrita (ponga la </i> antes de la </b>). • • • 2. Uso de los tamaños de los encabezados • • Los navegadores reconocen seis niveles distintos de encabezados. • • <h1>Encabezado de nivel uno </h1>
  • 11. 08. Cómo se da formato al • texto! • <h2>Encabezado de nivel dos</h2> • • <h3>Encabezado de nivel tres</h3> • • <h4>Encabezado de nivel cuatro</h4> • • <h5>Encabezado de nivel cinco</h5> • • <h6>Encabezado de nivel seis</h6> • • • Los encabezados tendrán este aspecto: • • Encabezado de nivel uno • • Encabezado de nivel dos • • Encabezado de nivel tres • • Encabezado de nivel cuatro • • Encabezado de nivel cinco • • Encabezado de nivel seis • • • 3. Centrar texto • • De forma predeterminada, los navegadores alinean el texto a la izquierda. Puede alinear el texto en el centro si lo pone entre dos etiquetas <center>. • • El texto: • • <center>Ésta es una prueba</center> • • aparecerá como: • • Ésta es una prueba • • Si hay más de una línea de texto entre las etiquetas, todas ellas aparecerán centradas…
  • 12. 09. Cómo se insertan líneas horizontales! • ¿Cómo se insertan líneas horizontales? • • • Use la etiqueta <HR> para insertar una línea (o regla) horizontal en la página, como ésta: • • Puede personalizar la regla horizontal, cambiando por ejemplo su anchura y el color. Por ejemplo, con este código: <HR WIDTH="50%"> se obtiene el siguiente resultado: • • También puede cambiar el color añadiendo el atributo COLOR="RED", aunque sólo tiene efecto con los navegadores Microsoft Internet Explorer. • Si ve este ejemplo con IE debe aparecer una regla horizontal en color rojo: • • El código es simplemente: <HR WIDTH="50%" COLOR="RED">
  • 13. 10. Cómo poner color en página web! • Para darle colores a una página, debes darle la órden luego de la etiqueta .Ahora los colores se nombran ya sea en su nombre correspondiente en Inglés, o también en sus códigos respectivos en números. Ejemplo 1: • < body bgcolor="black" text="white" >
  • 14. 10. Cómo poner color en página web! • Ejemplo 2: • < body bgcolor="#000000" text="#FFFFFF" > • Esto hará que tu página sea con un fondo de color negro y el texto blanco.
  • 15. 11. Cómo cambiar los colores del texto y del fondo! • ¿Se pueden cambiar los colores del texto y del fondo? • • • La etiqueta <BODY> controla los colores, las imágenes de fondo y algunas otras características. • • Puede controlar el color del fondo, texto y enlaces de la página principal por medio de la etiqueta <BODY>. • • Para establecer el color del fondo, texto, enlace, enlace visitado o enlace activo, sustituya el valor de un color modificando los seis caracteres que aparecen tras el símbolo "#" como en el siguiente ejemplo. • • No haga que todos ellos tengan el mismo color, ya que de hacerlo no vería nada en la página (porque tanto el fondo como el texto tendrían el mismo color). • • Puede incluir cualquiera de los siguientes elementos (BGCOLOR, TEXT, LINK, VLINK o ALINK), o no incluir ninguno de ellos. • • <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#="#0000FF" VLINK="#="#009900" ALINK="#FF0000"> • • Éstos son algunos colores que puede usar: • • Blanco • • Amarillo • • Rojo • • Gris • • Azul • • Verde •
  • 16. 11. Cómo cambiar los colores del texto y del fondo! • Negro • • Morado • • Azul claro • • #FFFFFF • • #FFFF66 • • #FF0000 • • #CC9999 • • #0000FF • • #00FF00 • • #000000 • • #CC33FF • • #00CCFF • • Estos valores hexadecimales representan la combinación de Rojo, Verde y Azul (RGB) que produce el color en cuestión. Examine este atractivo • • cuadro de colores • • (en inglés) que muestra de forma gráfica los códigos de color hexadecimales…
  • 17. 12. Cómo añado una • tabla! ¿Cómo añado una tabla? • • • A continuación detallamos el código para añadir una tabla sencilla a su página: • • <TABLE> • • <TR> • • <TD>1</TD> • • <TD>2</TD> • • </TR> • • </TABLE> • • Cada etiqueta tiene un propósito específico. Por ejemplo: • • Lista con 3 elementos • • • Cada tabla tiene que abrirse con esta etiqueta <TABLE> y cerrarse con ésta </TABLE>. • • • Cada fila de la tabla (table row en inglés) debe abrirse con esta etiqueta <TR> y cerrarse con ésta </TR>. • • Para una tabla de tres filas: • • 1 • • 2 • • 3 • • • Cada fila contiene una celda de datos o más (table data cell en inglés). Cada celda debe abrirse con la siguiente etiqueta <TD> y cerrarse con ésta</TD>. •
  • 18. 12. Cómo añado una tabla! • Aquí se incluye un ejemplo de una tabla con una fila y tres celdas: • • 1 • • 2 • • 3 • • fin de lista • • Entonces, si añade el siguiente código a su página: • • <TABLE border=1 width=70%> • • <TR> • • <TD>hola</TD> • • <TD>chao</TD> • • <TD>guay</TD> • • </TR> • • </TABLE> • • La tabla tendrá el siguiente aspecto (una fila con dos celdas): • • hola • • chao • • guay • • Nota: "Border" sirve para ponerle un borde a la tabla; cuanto más alto sea el número, más grueso será. "Width" (anchura) indica qué porcentage de la página ocupará la tabla; aunque también se puede expresar en número de píxels. En este caso, ocupa el 70%.
  • 19. 13. Cómo crear enlaces links! • ¿Cómo se crean los enlaces (links)? • • • En la página puede crear enlaces que señalen a: • • 1. Una página o archivo del directorio • • 2. Una página o archivo de un subdirectorio • • 3. Una ubicación externa (en Internet) • • fin de lista • • Para crear un enlace a una página o archivo del mismo directorio que el de la página que se modifica, basta con usar la ruta de acceso relativa, con lo que el enlace sólo incluirá el nombre del archivo: • • <a href="pagina.html">Página siguiente</a> • • En la página aparecerá el texto "Página siguiente", y al hacer clic en él aparecerá la página cuyo archivo se denomina pagina.html. • Si desea cambiar el texto del enlace sustituya "Página siguiente" por el que desee usar. Además, si desea que el enlace señale a otra página, bastará con que sustituya "pagina.html" • • por el nombre de ese archivo. • • Cuando el enlace sea a un subdirectorio, debe usar este formato: • • <a href="subdirectorio/pagina.html">Página siguiente</a> • • Al crear un enlace a una página externa al directorio, o en Internet, basta con usar la dirección completa (denominada ruta de acceso absoluta) en lugar de la ruta de acceso relativa: • • <a href="http://servidor.com.. ó, .es">Ir a Mi página!</a> • • El código anterior, crea un enlace que permite ir a la página "seleccionada!".
  • 20. 14. Cómo se añade un enlace a una imagen! • ¿Cómo se añade un enlace a una imagen? • • • Para crear un enlace en una imagen, puede usar el código de ejemplo siguiente: • • <a href="pagina.html"><img src="imagen.gif"></a> • • La imagen de nombre "imagen.gif" aparece en la página, y al hacer clic en él, el navegador irá a la página denominada pagina.html (sustituya esos nombres por los de sus archivos). • También puede añadir un atributo BORDER dentro de la etiqueta IMG SRC para personalizar el borde del enlace que aparece alrededor de la imagen. El código de ejemplo anterior no incluye el atributo BORDER, por lo que el resultado será el siguiente: • • my/top7 • • Aquí tiene de nuevo el mismo ejemplo, la diferencia es que ahora se ha añadido el atributo BORDER="0" en la etiqueta IMG SRC para quitar el borde. Éste es el código: • • <A HREF="http://servidor.com, ó. es"><IMG SRC="http://us.yimg.com/i/es/my/top7.gif" BORDER="0"></A> • • my/top7 • • La imagen servidor! del ejemplo anterior incluye un enlace para ir a la página seleccionada! También se ha añadido el atributo BORDER="0" para quitar el borde • • de enlace de alrededor de la imagen. • • Tenga en cuenta que: en los enlaces se distinguen mayúsculas y minúsculas, recuerde que index.html NO es igual que INDEX.html…
  • 21. 15. Cómo se crean enlaces • a delimitadores! ¿Cómo se crean enlaces a delimitadores? • • • Los enlaces a delimitadores pueden ser muy útiles para facilitar a los visitantes su desplazamiento por páginas de gran tamaño. Pueden crearse mediante dos conjuntos distintos de códigos. ambos situados dentro de etiquetas <A> </A>. Éstos son los pasos que se deben seguir: • • En primer lugar debe decidir el nombre del delimitador. En este ejemplo vamos a usar "delimitador". En este caso, basta con usar el código <A NAME="delimitador"> para definir el punto en que desea colocar el delimitador, de forma que cuando se establezca un enlace con este delimitador, se vaya directamente a ese • • punto. Recuerde que es más lógico incluir delimitadores si desea que se pueda tener acceso a las distintas secciones de la página. Esta posibilidad es más útil en el caso de páginas de gran tamaño en las que no es posible ver toda la información a la vez en la ventana del navegador. Para este ejemplo, se ha situado el código del delimitador inmediatamente antes del final de la página a modo de ejemplo. • ¿Cómo se establece un enlace a ese delimitador? • • Basta con usar: • • <A HREF="#nombre del delimitador">PARTE 1</A> • • Observe el símbolo "#" que aparece antes del nombre del delimitador. ¡Es muy importante! Este código hace que aparezca el texto "PARTE 1" en la página, • • y al hacer clic en él se pasará directamente al punto de esa misma página en el que se haya colocado el delimitador. • • En el ejemplo siguiente, el código que se usa para crear el enlace al delimitador es el siguiente: Se han añadido varias líneas de "texto de ejemplo" para que el ejemplo de salto al delimitador del final de la página sea más clarificador: • • <a href="#delimitador">PARTE 1</a> • • <p>texto de ejemplo • • <p>texto de ejemplo • • <p>texto de ejemplo • • <p>texto de ejemplo • • <p>texto de ejemplo • • <p>texto de ejemplo • • <p>texto de ejemplo • • <p>texto de ejemplo • • <p>texto de ejemplo • • <p>texto de ejemplo • • <p>texto de ejemplo •
  • 22. 15. Cómo se crean enlaces • • a delimitadores! <p>texto de ejemplo • <p>texto de ejemplo • • <p>texto de ejemplo • • <p><a name="delimitador">Debe quedar en este punto</a> • • Éste es el aspecto que debe tener en la página. A seguir, haga clic en el enlace. • • PARTE 1 • • texto de ejemplo • • texto de ejemplo • • texto de ejemplo • • texto de ejemplo • • texto de ejemplo • • texto de ejemplo • • texto de ejemplo • • texto de ejemplo • • texto de ejemplo • • texto de ejemplo • • texto de ejemplo • • texto de ejemplo • • texto de ejemplo • • texto de ejemplo • • Debe quedar en este punto • • También es útil tener delimitadores que permitan volver al principio de la página, de forma que los visitantes puedan hacer clic en ellos si desean regresar al principio. Basta con usar un nombre distinto para el delimitador y colocarlo al principio de la página…
  • 23. 16. Cómo se crean gráficos en miniatura! • ¿Cómo se crean gráficos en miniatura? • • • La página puede incluir gráficos en miniatura enlazados a las versiones en tamaño completo de las imágenes (también llamados "thumbnails"), para ello debe • tener dos versiones distintas de la imagen: una en miniatura y la otra de tamaño completo. • • Para ello debe crear al menos dos páginas, una para la imagen en tamaño completo y otra con los gráficos en miniatura. • • Supongamos que el nombre de la imagen es "imagen.gif" y la página en la que desea incluir esta imagen se llama "pagina1.html". En ese página debe incluir • este código: • • <img src="imagen.gif"> • • En la página de los gráficos en miniatura debe crear enlaces a la página "pagina1.html". • • <a href="pagina1.html"><img src="miniatura.gif"></a> • • miniatura.gif es la versión pequeña de la imagen e incluye un enlace a la pagina1.html, que es la que tiene la imagen en tamaño completo. • • Para cambiar correctamente el tamaño de las imágenes debe usar un programa de edición de imágenes….
  • 24. 17. Cómo se puede incluir música de fondo! • ¿Cómo se puede incluir música de fondo? • • • Hay dos juegos de códigos diferentes cuyo uso se recomienda para hacer que suene una música de fondo cuando alguien visite la página. Microsoft Internet • Explorer usa la etiqueta <BGSOUND SRC>, mientras que Netscape Navigator usa <EMBED>. Incluya el código siguiente (dentro de la etiqueta HEAD) para que • • la página tenga una música de fondo: • • <EMBED SRC="musica.mid" AUTOSTART=TRUEHIDDEN=TRUE><NOEMBED><BGSOUND SRC="musica.mid"></NOEMBED> • • Sustituya "musica.mid" por el nombre actual del archivo que desea usar. • También puede hacer que la música de fondo suene ininterrumpidamente, hasta que • el visitante haga clic en el botón "DETENER" del navegador, o vaya a otra página. Éste es el mismo código del ejemplo anterior, pero con reproducción continua: • • <EMBED SRC="musica.mid" AUTOSTART="TRUE" HIDDEN="TRUE" LOOP="TRUE"><NOEMBED><BGSOUND SRC="musica.mid" LOOP="INFINITE"></NOEMBED> • • Atención: tenga en consideración que el archivo de sonido que utilice como música de fondo debe estar entre los archivos de su página (como las imágenes) • • y que deberá cargarlo utilizando la herramienta de Carga Fácil (desde el Administrador de archivos) o un programa de FTP…
  • 25. 18. Cómo crear enlace correo electrónico! • ¿Puedo crear un enlace que permita a las visitas enviarme un correo-e? • • • Claro que sí. Ese enlace se denomina "mail-to" ya que ése es el formato del código: • • <A HREF="mailto:nombre@servidor.es">enviar un mensaje de correo</A> • • El código anterior hace que aparezca en la página el texto "enviar un mensaje de correo", al hacer clic en ese texto se abre una nueva ventana del programa • de correo predeterminado con la dirección de correo-e ya escrita en el campo "PARA:". Este enlace sólo funciona correctamente cuando el visitante usa un • programa de correo-e para enviar correo electrónico. • • Otra posibilidad que funciona en cualquier caso consiste en usar la opción "¡Envíeme un correo-e!" en el Cajetín Publicitario. Si tiene incluido dicho Cajetín • en su página principal (situado en la esquina superior derecha), puede activar el enlace "¡Envíeme un correo-e!". Cuando un visitante haga clic en él, • • pasará a una página Web donde puede escribirle un mensaje. Ese mensaje se enviará a la dirección de correo que elija al personalizar el Cajetín Publicitario…
  • 26. 19. Cómo crear enlace descarga fichero música! • ¿Se pueden incluir solamente enlaces a los archivos de música para que se puedan descargar? • • • Sí. En lugar de usar los códigos de música de fondo, puede emplear simplemente un código de hiperenlace. Este ejemplo de código pregunta a los usuarios • si desean descargar un archivo WAV. • • <A HREF="cancion.wav">Descargar esta canción</A> • • El código del ejemplo anterior hace que aparezcan las palabras "Descargar esta canción" en la página Web, al hacer clic en ellas aparece un cuadro de diálogo • en el que se le pregunta al usuario si desea guardar el archivo o reproducirlo, siempre que para ello tenga correctamente instalada la aplicación necesaria…
  • 27. 20. Cómo crear imágen fondo página! • ¿Se puede usar una imagen como fondo de la página? • • • Claro que sí. Al añadir el atributo BACKGROUND a la etiqueta BODY puede hacer que un mosaico de imágenes cubra completamente el fondo. Recuerde que la imagen • • se muestra en forma de mosaico, por eso puede usar una imagen pequeña y cubrir totalmente la página. Es aconsejable usar imágenes pequeñas para que la página se cargue con mayor rapidez. Utilice el código siguiente para incluir una imagen como fondo. • • <BODY BACKGROUND="imagen.jpg"> • • Sustituya "imagen.jpg" por el nombre real del archivo de imagen. • • Nota importante: si ya ha creado la página y ésta ya incluye una etiqueta BODY, debe añadir dentro de esa etiqueta el atributo BACKGROUND. No cree una nueva etiqueta BODY…
  • 28. 21. Cómo corregir errores al cargar página! • He guardado la página, la he modificado en línea y la vuelto a cargar. Ahora aparecen errores al ver la página. ¿Cómo puedo corregir el problema? • • • Si ha guardado la página con el comando "Guardar como" del navegador, puede que haya guardado con ella partes de código dinámico (como por ejemplo, el Cajetín • • Publicitario). Tiene que eliminar todo el código que haya guardado involuntariamente junto con la página, sólo así se puede corregir el problema. El código • del Cajetín Publicitario se inserta automáticamente DETRÁS de la etiqueta de cierre </HTML>, por eso puede quitar todo el código que encuentre detrás de • • la etiqueta antes de volver a cargar la página…