You are on page 1of 28

Creacion de una

pagina web con


el bloc de notas
Castro perez daniel antonio

01. Cmo crear pgina inic


io!
Es necesario que el archivo de mi pgina principal se llame
"index.html"?.
S. Para que aparezca su pgina principal cuando visite la
URL, debe tener un archivo de nombre index.html. Puede
modificar esa pgina, o, cargar una nueva, pero en ambos
casos debe llamarse index.html. Atencin!: en los nombres
de archivo se diferencian maysculas y minsculas, as
"index.html" no es igual que "Index.html" o "INDEX.HTML".
Adems, ".htm" es distinto de ".html". De esta forma, cuando
un navegante teclee la direccin de su web: http://pepito, o
juanito.com/nombre El servidor le estar mostrando de forma
automtica la direccin: http://juanito, o
pepito.com/nombre/index.html Por tanto, es necesario que su
pgina principal tenga exactamente el nombre index.html.

Cmo empieza el cdigo


HTML de una pgina?

A continuacin, se detalla el formato bsico para una pgina en HTML:

<HTML>

<HEAD>

<TITLE>Ttulo</TITLE>

</HEAD>

<BODY>

Aqu se introducen las tablas, las fotos, enlaces, etctera.

</BODY>

</HTML>

Las pginas empiezan con la etiqueta <HTML>, seguida por las etiquetas <HEAD>. Encontrar las etiquetas para introducir
el nombre de la pgina en las etiquetas

<TITLE>. Se trata del ttulo que aparece en la esquina izquierda superior de su navegador al acceder a la pgina. Note que
se cierran las etiquetas TITLE y HEAD antes de introducir el contenido en s de la pgina dentro de las etiquetas <BODY>.

03. Como crear prrafos!

Prrafos, saltos de lnea y espacios

Para crear un nuevo prrafo slo tiene que aadir una etiqueta <P> delante del
texto. As se crea una lnea en blanco antes de empezar el prrafo.

Los saltos de lnea se crean con la etiqueta <BR>, que hace que el texto
comience una lnea por debajo de la anterior, pero sin insertar ninguna lnea en
blanco.

Tambin observar que puede usar la barra espaciadora del teclado mientras
modifica textos HTML, aunque el navegador convertir todos esos espacios a un
espacio como mximo.
Para crear ms 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 lnea

04. Como agregar texto!

Cunto texto se puede agregar?

Existe un nmero lmite de caracteres que se pueden escribir en los


cuadros de texto. Una vez que se alcanza ese lmite, no se puede
escribir ms texto.

Si corta y pega texto que supere ese lmite, se cortar a partir de la


longitud mxima permitida.

Nota: la cantidad de texto que escriba afectar a la distribucin de


la pgina. En ocasiones puede ser necesario modificar la longitud
del texto para mejorar
elaspecto de la pgina

05. Cmo se utilizan las fu


entes!

Cmo se utilizan las fuentes?

Puede usar la etiqueta FONT para mejorar an ms el aspecto del texto. Por ejemplo, puede
definir el tipo, tamao y color de la tipografa, 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, tamao 2 y color azul: HOLA!

Los diseadores de pginas Web tienen que prestar atencin a la seleccin de fuentes ya qu,
esto es importante, las fuentes que se usan en una pgina, slo aparecern correctamente si el
visitante tiene las mismas fuentes instaladas en su equipo. La solucin a este problema consiste
en usar fuentes que estn normalmente instaladas en la mayora de los sistemas, por
ejemplo:Arial, TimesNewRoman,Helvetica. Si realmente tiene mucho inters en aadir algunas
fuentes especiales a su pgina, puede guardarlas como imgenes e incluirlas en la pgina

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 vietas) y listas de definicin (con sangra) fcilmente 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 vietas, 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 definicin:

La lista de definicin es distinta y puede usarse para aplicar sangras automticamente a determinadas partes del texto. La mejor manera de explicar qu es una lista de definicin es mostrar una:

Definida lista con 2 elementos

Naranjas = Una fruta de color amarillo-rojizo y del tamao de una manzana. Pertenece a la familia de los frutos ctricos. En Espaa, las naranjas se cran principalmente en la regin levantina.

Manzanas = La manzana es un fruto de tamao similar al de las naranjas y con distintos colores resultantes de combinar rojo, amarillo y verde. En Espaa, las manzanas se cran 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 tamao de una manzana. Pertenece a la familia de los frutos ctricos. En Espaa, las naranjas se cran principalmente en la regin levantina.

<DT> Manzanas

<DD> La manzana es un fruto de tamao similar al de las naranjas y con distintos colores resultantes de combinar rojo, amarillo y verde. En Espaa, las manzanas se cran principalmente en las regiones del norte.

</DL>

07. Cmo se alinea el texto


en la pgina!

Cmo se alinea el texto?

Puede usar estas etiquetas de prrafo para cambiar la alineacin del texto en la pgina:

ALIGN LEFT

<palign="left">Escriba el texto aqu

aparecer como:

Escriba el texto aqu

ALIGN RIGHT

<palign="right">Escriba el texto aqu

aparecer como:

Escriba el texto aqu

CENTER

<palign="center">Escriba el texto aqu

o bien

<CENTER>Escriba el texto aqu</CENTER>

aparecer como:

Escriba el texto aqu

08. Cmo se da formato al


texto!

Cmo 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 slo 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

Tambin 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 tamaos de los encabezados

Los navegadores reconocen seis niveles distintos de encabezados.

<h1>Encabezado de nivel uno </h1>

08. Cmo 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 tendrn 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 ms de una lnea de texto entre las etiquetas, todas ellas aparecern centradas

09. Cmo se insertan lnea


s horizontales!

Cmo se insertan lneas horizontales?

Use la etiqueta <HR> para insertar una lnea (o regla) horizontal en la


pgina, como sta:

Puede personalizar la regla horizontal, cambiando por ejemplo su anchura


y el color. Por ejemplo, con este cdigo: <HR WIDTH="50%"> se obtiene el
siguiente resultado:

Tambin puede cambiar el color aadiendo el atributo COLOR="RED",


aunque slo tiene efecto con los navegadores Microsoft Internet Explorer.
Si ve este ejemplo con IE debe aparecer una regla horizontal en color rojo:

El cdigo es simplemente: <HR WIDTH="50%" COLOR="RED">

10. Cmo poner color en


Para darle colores a una pgina, debes darle la
pgina
rden luego web!
de la etiqueta .Ahora los colores se

nombran ya sea en su nombre correspondiente


en Ingls, o tambin en sus cdigos respectivos
en nmeros.
Ejemplo 1:
< body bgcolor="black" text="white" >

10. Cmo poner color en


Ejemplo 2:
pgina
web!
< body bgcolor="#000000"
text="#FFFFFF" >
Esto har que tu pgina sea con un fondo de
color negro y el texto blanco.

11. Cmo cambiar los color


es del texto y del fondo!

Se pueden cambiar los colores del texto y del fondo?

La etiqueta <BODY> controla los colores, las imgenes de fondo y algunas otras caractersticas.

Puede controlar el color del fondo, texto y enlaces de la pgina 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 smbolo "#" como en el siguiente ejemplo.

No haga que todos ellos tengan el mismo color, ya que de hacerlo no vera nada en la pgina (porque tanto el fondo como el texto tendran 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. Cmo cambiar los color


es del texto y del fondo!

Negro

Morado

Azul claro

#FFFFFF

#FFFF66

#FF0000

#CC9999

#0000FF

#00FF00

#000000

#CC33FF

#00CCFF

Estos valoreshexadecimalesrepresentan la combinacin de Rojo, Verde y Azul (RGB) que produce el color en cuestin. Examine este atractivo

cuadro de colores

(en ingls) que muestra de forma grfica los cdigos de colorhexadecimales

12. Cmo aado una tabla


!

Cmo aado una tabla?

A continuacin detallamos el cdigo para aadir una tabla sencilla a su pgina:

<TABLE>

<TR>

<TD>1</TD>

<TD>2</TD>

</TR>

</TABLE>

Cada etiqueta tiene un propsito especfico. 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 (tablerowen ingls) debe abrirse con esta etiqueta <TR> y cerrarse con sta </TR>.

Para una tabla de tres filas:

Cada fila contiene una celda de datos o ms (tabledatacellen ingls). Cada celda debe abrirse con la siguiente etiqueta <TD> y cerrarse con sta</TD>.

12. Cmo aado una tabla


!

Aqu se incluye un ejemplo de una tabla con una fila y tres celdas:

fin de lista

Entonces, si aade el siguiente cdigo a su pgina:

<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 ms alto sea el nmero, ms grueso ser. "Width" (anchura) indica quporcentagede la pgina ocupar la tabla;
aunque tambin se puede expresar en nmero depxels. En este caso, ocupa el 70%.

13. Cmo crear enlaces lin


ks!

Cmo se crean los enlaces (links)?

En la pgina puede crear enlaces que sealen a:

1. Una pgina o archivo del directorio

2. Una pgina o archivo de un subdirectorio

3. Una ubicacin externa (en Internet)

finde lista

Para crear un enlace a una pgina o archivo del mismo directorio que el de la pgina que se modifica, basta con usar la ruta de acceso relativa, con lo que el enlace
slo incluir el nombre del archivo:

<ahref="pagina.html">Pgina siguiente</a>

En la pgina aparecer el texto "Pgina siguiente", y al hacer clic en l aparecer la pgina cuyo archivo se denomina pagina.html.
Si desea cambiar el texto del enlace sustituya "Pgina siguiente" por el que desee usar. Adems, si desea que el enlace seale a otra pgina, bastar con que
sustituya "pagina.html"

porel nombre de ese archivo.

Cuando el enlace sea a un subdirectorio, debe usar este formato:

<ahref="subdirectorio/pagina.html">Pgina siguiente</a>

Al crear un enlace a una pgina externa al directorio, o en Internet, basta con usar la direccin completa (denominada ruta de acceso absoluta) en lugar de la ruta de
acceso relativa:

<ahref="http://servidor.com.., .es">Ir a Mi pgina!</a>

El cdigo anterior, crea un enlace que permite ir a la pgina "seleccionada!".

14. Cmo se aade un enla


ce a una imagen!

Cmo se aade un enlace a una imagen?

Para crear un enlace en una imagen, puede usar el cdigo de ejemplo siguiente:

<a href="pagina.html"><img src="imagen.gif"></a>

La imagen de nombre "imagen.gif" aparece en la pgina, y al hacer clic en l, el navegador ir a la pgina denominada pagina.html
(sustituya esos nombres por los de sus archivos).
Tambin puede aadir un atributo BORDER dentro de la etiqueta IMG SRC para personalizar el borde del enlace que aparece alrededor
de la imagen. El cdigo 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 aadido el atributo BORDER="0" en la etiqueta IMG SRC para
quitar el borde. ste es el cdigo:

<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 pgina seleccionada! Tambin se ha aadido el atributo
BORDER="0" para quitar el borde

de enlace de alrededor de la imagen.

Tenga en cuenta que: en los enlaces se distinguen maysculas y minsculas, recuerde que index.html NO es igual que INDEX.html

15. Cmo se crean enlaces


a delimitadores!

Cmo se crean enlaces a delimitadores?

Los enlaces a delimitadores pueden ser muy tiles para facilitar a los visitantes su desplazamiento por pginas de gran tamao. Pueden crearse mediante dos conjuntos distintos de cdigos. 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 cdigo <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 ms lgico incluir delimitadores si desea que se pueda tener acceso a las distintas secciones de la pgina. Esta posibilidad es ms til en el caso de pginas de gran tamao en las que no es posible ver toda la
informacin a la vez en la ventana del navegador. Para este ejemplo, se ha situado el cdigo del delimitador inmediatamente antes del final de la pgina a modo de ejemplo.
Cmo se establece un enlace a ese delimitador?

Basta con usar:

<A HREF="#nombre del delimitador">PARTE 1</A>

Observe el smbolo "#" que aparece antes del nombre del delimitador. Es muy importante! Este cdigo hace que aparezca el texto "PARTE 1" en la pgina,

y al hacer clic en l se pasar directamente al punto de esa misma pgina en el que se haya colocado el delimitador.

En el ejemplo siguiente, el cdigo que se usa para crear el enlace al delimitador es el siguiente: Se han aadido varias lneas de "texto de ejemplo" para que el ejemplo de salto al delimitador del final de la pgina sea ms 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. Cmo 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 pgina. 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

Tambin es til tener delimitadores que permitan volver al principio de la pgina, 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 pgina

16. Cmo se crean grficos


en miniatura!

Cmo se crean grficos en miniatura?

La pgina puede incluir grficos en miniatura enlazados a las versiones en tamao completo de las imgenes
(tambin llamados "thumbnails"), para ello debe
tener dos versiones distintas de la imagen: una en miniatura y la otra de tamao completo.

Para ello debe crear al menos dos pginas, una para la imagen en tamao completo y otra con los grficos en
miniatura.

Supongamos que el nombre de la imagen es "imagen.gif" y la pgina en la que desea incluir esta imagen se llama
"pagina1.html". En ese pgina debe incluir
este cdigo:

<imgsrc="imagen.gif">

En la pgina de los grficos en miniatura debe crear enlaces a la pgina "pagina1.html".

<ahref="pagina1.html"><imgsrc="miniatura.gif"></a>

miniatura.gifes la versin pequea de la imagen e incluye un enlace a la pagina1.html, que es la que tiene la
imagen en tamao completo.

Para cambiar correctamente el tamao de las imgenes debe usar un programa de edicin de imgenes.

17. Cmo se puede incluir


msica de fondo!

Cmo se puede incluir msica de fondo?

Hay dos juegos de cdigos diferentes cuyo uso se recomienda para hacer que suene una msica de fondo cuando alguien
visite la pgina. Microsoft Internet
Explorer usa la etiqueta <BGSOUND SRC>, mientras queNetscapeNavigatorusa <EMBED>. Incluya el cdigo siguiente
(dentro de la etiqueta HEAD) para que

lapgina tenga una msica 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.
Tambin puede hacer que la msica de fondo suene ininterrumpidamente, hasta que
elvisitante haga clic en el botn "DETENER" del navegador, o vaya a otra pgina. ste es el mismo cdigo del ejemplo
anterior, pero con reproduccin continua:

<EMBED SRC="musica.mid" AUTOSTART="TRUE" HIDDEN="TRUE" LOOP="TRUE"><NOEMBED><BGSOUND


SRC="musica.mid" LOOP="INFINITE"></NOEMBED>

Atencin: tenga en consideracin que el archivo de sonido que utilice como msica de fondo debe estar entre los archivos de
su pgina (como las imgenes)

yque deber cargarlo utilizando la herramienta de Carga Fcil (desde el Administrador de archivos) o un programa de FTP

18. Cmo crear enlace corr


eo electrnico!

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 cdigo:

<A HREF="mailto:nombre@servidor.es">enviar un mensaje de correo</A>

El cdigo anterior hace que aparezca en la pgina el texto "enviar un mensaje de correo", al
hacer clic en ese texto se abre una nueva ventana del programa
decorreo predeterminado con la direccin de correo-e ya escrita en el campo "PARA:". Este
enlace slo funciona correctamente cuando el visitante usa un
programade correo-e para enviar correo electrnico.

Otra posibilidad que funciona en cualquier caso consiste en usar la opcin "Enveme un
correo-e!" en el Cajetn Publicitario. Si tiene incluido dicho Cajetn
ensu pgina principal (situado en la esquina superior derecha), puede activar el enlace
"Enveme un correo-e!". Cuando un visitante haga clic en l,

pasara una pgina Web donde puede escribirle un mensaje. Ese mensaje se enviar a la
direccin de correo que elija al personalizar el Cajetn Publicitario

19. Cmo crear enlace des


carga fichero msica!

Se pueden incluir solamente enlaces a los archivos de msica para que se


puedan descargar?


S. En lugar de usar los cdigos de msica de fondo, puede emplear
simplemente un cdigo dehiperenlace. Este ejemplo de cdigo pregunta a
los usuarios
si desean descargar un archivo WAV.

<A HREF="cancion.wav">Descargar esta cancin</A>

El cdigo del ejemplo anterior hace que aparezcan las palabras "Descargar
esta cancin" en la pgina Web, al hacer clic en ellas aparece un cuadro de
dilogo
en el que se le pregunta al usuario si desea guardar el archivo o reproducirlo,
siempre que para ello tenga correctamente instalada la aplicacin
necesaria

20. Cmo crear imgen


fondo pgina!

Se puede usar una imagen como fondo de la pgina?

Claro que s. Al aadir el atributo BACKGROUND a la etiqueta BODY puede hacer que
un mosaico de imgenes cubra completamente el fondo. Recuerde que la imagen

se muestra en forma de mosaico, por eso puede usar una imagen pequea y cubrir
totalmente la pgina. Es aconsejable usar imgenes pequeas para que la pgina se
cargue con mayor rapidez. Utilice el cdigo 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 pgina y sta ya incluye una etiqueta BODY,


debe aadir dentro de esa etiqueta el atributo BACKGROUND. No cree una nueva
etiqueta BODY

21. Cmo corregir errores


al cargar pgina!

He guardado la pgina, la he modificado en lnea ylavuelto a cargar.


Ahora aparecen errores al ver la pgina. Cmo puedo corregir el problema?


Si ha guardado la pgina con el comando "Guardar como" del navegador,
puede que haya guardado con ella partes de cdigo dinmico (como por
ejemplo, el Cajetn

Publicitario). Tiene que eliminar todo el cdigo que haya guardado
involuntariamente junto con la pgina, slo as se puede corregir el
problema. El cdigo
delCajetn Publicitario se inserta automticamente DETRS de la etiqueta
de cierre </HTML>, por eso puede quitar todo el cdigo que encuentre
detrs de

laetiqueta antes de volver a cargar la pgina

You might also like