Hay bastantes programas para editar paginas web, yo no quiero hacer incapie en un programa en especial, eso ya
dependera de vosotros en descargaros programas y mirar cual es el que mas os gusta o el que mas se adapta a vuestras
exigencias, pero os dejo uno que yo tengo, que es gratis y va muy bien :
Modo oculto: Activado:
Sólo usuarios registrados pueden ver este contenido
Se llama FreshHTML, es un editor para principiantes, pero para mi gusto, es muy manejable y como he dicho, lo suelo usar por
la tabla de caracteres especiales que tiene.
Sin mas empezemos con el programa.Despues de instalarlo, lo abrimos y pinchamos arriba a la izquierda en "file" y luego en
"open" y buscamos y abrimos nuestra nueva pagina, asi veremos esto:

Aqui veremos ya el codigo fuente de nuestra pagina y como esta compuesta, ahora solo hay que saber, de que se compone una
pagina web (principalmente), y como podemos cambiarle su contenido, vamos a ello.
Hay que tener siempre en cuenta que una pagina web tiene unos comandos o etiquetas que son principales y que siempre deben de
tener nuestras paginas, si queremos que los buscadores den con ellas, estos comandos son :
-
- <html>
- <head>
- <title></title>
- <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
- <META NAME="Generator" CONTENT="WebFacil">
- <META NAME="authoring_tool" CONTENT="WebFacil">
- <META NAME="keywords" CONTENT="personal, página">
- <META NAME="distribution" CONTENT="global">
- <META NAME="resource-type" CONTENT="document">
-
- </head>
- <body>
-
- Contenido de la pagina
-
- </body>
- </html>
-
Como podeis daros cuenta, todas las etiquetas (los codigos de la pagina web), tienes su abertura y su cierre, o casi todas,
se empieza con "html" y se termina la pagina con "/html",le sigue el "head" y termina con el "/head" y entre medio estan las
estiquetas "metatag" o "meta", en ellas se pondran,el nombre de con que se genero el archivo o pagina (si se quiere), la
descripcion de la pagina, llamamiento a los robost y bastantes mas, arriba ya veis unas cuantas llamadas.
Antes de los metatags, esta tambien el titulo de nuestra pagina "title - /title", esta etiqueta nos dejara ver en el
navegador en la parte alta izquierda, el nombre de nuestra pagina.Entre las etiquetas ""head y "/head"ademas de el "title" y
los "metatag", tambien pueden ir incluidos llamamientos a "scripts", los cuales veremos mas adelante.
Ahora esta la etiqueta "body" con su cierre "/body", entre estas dos etiquetas va a ir el contenido de nuestras paginas, las
imagenes, comentarios, enlaces y demas, bueno ya estais viendo como es el codigo principal de nuestras paginas, ahora veremos
como podemos editar y cambiar algunas cosas de ella.
Una vez que hemos abierto nuestro editor html "FreshHTML", hemos cliqueado en file - open, buscaremos el archivo que queremos
que nos abra ( index.htm),ahora nos vamos a fijar en el contenido que hay entre las etiquetas "body - /body", que es el
contenido que editaremos y cambiaremos.
Como ya he dicho, no tocaremos el tema de los scripts de momento, pero este primero si, debido a que lo miraremos para poder
cambiarle el sonido si asi lo queremos.Este es el codigo como ya lo veis :
- <SCRIPT LANGUAGE="JavaScript">
-
- <!-- Inicio código JavaScript (Oculto en visualizadores no compatibles)
-
- // Script creado por WebFácil para detectar
- // el navegador utilizado por el ordenador que
- // visualiza la WEB, y adaptar las instrucciones
- // de reproducción de sonido a dicho navegador
-
- if (navigator.appName == "Microsoft Internet Explorer") {
- document.writeln('<BGSOUND SRC="ejemplo.mid" LOOP=INFINITE>') }
- if (navigator.appName == "Netscape") {
- document.writeln('<EMBED SRC="ejemplo.mid" WIDTH=0 HEIGHT=2 LOOP=TRUE AUTOSTART=TRUE></EMBED>') }
-
- // Fin código JavaScript -->
- </SCRIPT>
De este codigo solo nos interesa estas lineas:
-
- 1º linea -- if (navigator.appName == "Microsoft Internet Explorer") {
- 2º linea -- document.writeln('<BGSOUND SRC="ejemplo.mid" LOOP=INFINITE>') }
- 3º linea -- if (navigator.appName == "Netscape") {
- 4º linea -- document.writeln('<EMBED SRC="ejemplo.mid" WIDTH=0 HEIGHT=2 LOOP=TRUE AUTOSTART=TRUE></EMBED>') }
En la primera linea mos indica que si el navegador que usamos es "Microsoft Internet Explorer", entonces usara la linea 2º
para funcionar.
En la segunda linea nos pone - BGSOUND SRC="ejemplo.mid LOOP=INFINITE"-, nos esta indicando que cancion queremos poner
"ejemplo.mid" y en Loop=infinite, que la musica se oira sin fin, asi que una vez que termine la musica, empezara de nuevo,en
"BGSOUND SRC=", tendremos que indicarle el archivo midi o wav que queremos que se oiga y su ubicacion, en este ejemplo el
midi se encuentra en la carpeta donde esta el index.html, si quisieramos que nuestra musica estuviera en una carpeta aparte,
tendriamos que indicarselo asi por ejemplo, si creamos una carpeta llamada (por ejemplo) "Musica",tendriamos que indicarle
que buscara la musica en "Musica/ejemplo.mid".
En la tercera linea nos dice, que si nuestro navegador es "Netscape", entonces se usara la linea 4º para la reproduccion de
nuestra musica, entonces donde pone EMBED SRC="ejemplo.mid", pondremos nuestro archivo de musica (siempre el mismo que en la
segunda linea).
Cuando veamos en unas lineas las sentencias "WIDTH" y "HEIGHT", nos estan indicando esto :
WIDTH = Largo de la imagen, pagina, tabla...etc.
HEIGHT = Alto de la imagen, pagina, tabla...etc.
En la sentencia "Loop", le estamos diciendo ahora que funcione o "True", tambien podemos decirle, que no funcione y pondremos
"False", con la sentencia "AUTOSTART=TRUE", ocurre lo mismo que con "Loop".
Lo siguiente que bemos en el codigo viene indicado como "Titulos", si te fijas, esa palabra que ves hay no se ve en nuestro
navegador una vez que arrancamos la pagina, eso es debido a que todo lo que te encuentre o quieras que no se vea, lo puedes
encerrar entre estas llaves :
- <!-- Comentario que quieras -->
Siempre que pongas antes y despues de los comentarios esas llaves, nunca se veran en nuestras paginas, a no ser que se
editen.
Como veis me estoy metiendo un poco en codigo, nada mas que empezar con todo esto, yo espero que lo que vaya explicando de
ello se me vaya entendiendo, si no , mas adelante, si lo veo preciso, lo explicare mejor, o si asi me lo pedis.
Seguimos editando y vemos que hay esto :
- <CENTER>
- <FONT FACE="VERDANA,ARIAL">
- <TABLE BORDER=4><TR><TD>
- <CENTER><H1>Mi primera pagina</H1></CENTER>
- </TD></TR></TABLE>
- </CENTER>
- </FONT>
-
La primera sentencia "center", nos esta diciendo que, todo lo que se encuentre a partir de esta sentencia y asta que se cierre
, que sera con la sentencia "/center", todo el contenido lo pondra en el centro de la pagina,tabla...etc.
Fijaros y vereis dos aberturas del codigo "center" y dos cierres del "/center", ahora explicare cuales son su funcion.
Seguido pone "FONT FACE="VERDANA,ARIAL", aqui nos indica en tipo de fuente que se usara para lo que escribamos, en este caso
sera "VERDANA,ARIAL".
Debajo entramos en lo que son las tablas, si abres la pagina que hemos creado (la cual deberia ya de estar abierta, para
seguir el tutorial), veras que al principio de la pagina se ve el titulo de ella y que hemos llamado "Mi primera pagina", el titulo esta encerrado en un rectangulo, al cual se le llama tabla, se pueden hacer tantas tablas como se necesite para la pagina, un ejemplo de una pagina con tablas, esta bien claro en el index de total-soft, que como veras esta todo (o casi todo), encerrado en tablas, mas adelante nos centraremos mas en ellas, ahora veamos este ejemplo.
Las tablas por norma general se construyen con estos codigos :
- <table summary="indicador de la tabla" border="0">
- <tr>
- <td> </td>
- </tr>
- </table>
En nuestra tabla nos encontramos con que empieza con "TABLE BORDER=4", la cual esta diciendo que :
"TABLE" que significa tabla, "BORDER=4" que significa que tendra un borde de 4 pixeles, osea, que hemos creado una tabla con un borde de 4 pixeles, podemos darle mas pixeles a la tabla o ninguno si ponemos "BORDER=0", eso dependera de lo que queramos hacer o nuestro gusto.
Ahora nos encontramos con "center-H1-Mi primera pagina-/H1-/center ", Como hemos dicho ya, "center" nos indica que lo que se ponga a continuacion de el, se pondra o se colocara en el centro, "H1", esta etiqueta nos dara el tamaño que queramos ponerle a nuestro titulo, que va desde "H1 asta H6", siendo la etiqueta H1 el tamaño mas grande y H6 el mas pequeño, veamos el ejemplo :

y como veis, se cierran las etiquetas "/H1 y /center", con esa accion, el tamaño de la letra solo se la damos a este titulo y la dejamos centrada dentro de la tabla.
Y ya como veis, se cierra la tabla al completo con las mismas etiquetas con las que empezamos, solo que al rever, ahora es "/td - /tr - /table - /center - /font", este ultimo "center", es el primero que hemos puesto antes de la tabla, asi le deciamos a la tabla que se colocara en el centro de la pagina y cerramos el "/font", que nos indica que el tipo de letra "VERDANA,ARIAL", termina hay.
Segido vemos la etiqueta "BR", con esta etiqueta lo que estamos es dando un salto de linea, osea, que el siguiente contenido que pongamos, nos lo ponga en otra linea, y vemos que nos pone a continuacion "<!-- Imagen/foto 1 -->", ya hemos dicho que lo que baya dentro de las llaves "<!-- -->", es un contenido que no se va a ver en nuestras paginas, solo indica lo que vamos a poner en ella, es un indicativo para nosotros como webmasters, seguido pone lo ya visto "center" y la etiqueta "IMG SRC=", aqui estamos diciendo que nos cargue una imagen, la cual como veis, es la bola saltarina, claro que podeis cambiarla imagen por la que vosotros querais, indicando claro esta, la situacion exacta de la imagen. Y ya con esto es bastante para esta primera parte, dentro de nada pondre la segunda y ultima parte de este apartado de la"Edicion de paginas Webs",no dejeis de verla, estara tan interesante como estas (o no?).