1.- Antes de empezar.
Sitúate con el puntero del ratón sobre cualquier punto vacío de esta página que estás leyendo en estos momentos. Pulsa el botón derecho de tu ratón. Se abrirá el siguiente menú contextual:
Si, en vez del Explorer, estás leyendo esta página con el Firefox, el menú contextual será algo distinto:
A continuación elige la opción señalada en cada uno de los casos. Verás algo así:
En el caso de que estés con el Explorer. O algo así:
En el caso del Firefox.
Pues bien, en ambos casos, estás visualizando el código fuente que da origen a la página que estás leyendo en estos momentos. Es decir, es lo que hay que escribir para que la página se muestre tal cual la estás viendo.
Probablemente tanto símbolo extraño y palabras algo raras te sorprenderán y te llevarán a la idea de que "esto es muy difícil" y "no es para mí". Tranquilo. Sin ser fácil, el lenguaje html está al alcance de cualquier persona, y las cosas, paso a paso, se pueden hacer algo más sencillas.
2.- Empezando.
El código fuente, se escribe en un procesador de texto. Nosotros lo vamos a hacer con el Bloc de notas. Para abrir el Bloc de Notas, le damos a Inicio > Todos los programas > Accesorios > Bloc de notas. Se abrirá una ventana como ésta:
[img]
http://roble.pntic.mec.es/apuente/html/im/a04.png[/img]
continuación debes saber que las dos etiquetas fundamentales dentro de las cuales tiene que ir nuestro código fuente son <html> como etiqueta de apertura y </html> como etiqueta de cierre. Después, todo lo que será visible al visitar la página con el navegador, debe de estar entre las etiquetas <body> cuerpo, en inglés, como etiqueta de apertura y </body> como etiqueta de cierre.
Nota: Las etiquetas también se pueden escribir con letras mayúsculas: <HTML> <BODY>...Nosotros vamos a optar por las minúsculas por ser lo que se está imponiendo de acuerdo con las últimas normas.
Vamos a escribir algo en nuestra página. Por ejemplo Bienvenid@. Lo escribiremos entre <body> y </body>. Nuestro código quedará así:
Ahora tenemos que guardar nuestro documento en alguna parte del ordenador y ¡muy importante! con un nombre y una extensión especial. El nombre va a ser index (ya veremos porqué este nombre más adelante) y su extensión .html
También se podría guardar con la extensión .htm (el resultado es exactamente el mismo).
El sitio puede ser cualquier parte del ordenador. Para tenerlo accesible, lo vamos a guardar en el Escritorio: Le damos a Archivo > Guardar
asi::
Elegimos Escritorio y le llamamos index.html
Observa que en Tipo no hemos cambiado nada. No es necesario al haber incluído la extensión .html en el nombre del archivo.
Podemos visualizarlo para ver si la página funciona....
Como todavía la mayoría de los usuarios utilizan el Internet Explorer más que ningún otro navegador, vamos a tenerlo como navegador predeterminado (de momento). Si no lo tienes así, lo puedes hacer abriendo el Explorer y en el menú superior eliges Herramientas > Opciones de Internet...
elegimos la pestaña programas
Y pinchamos en el botón Restablecer configuración Web...
Desactiva la opción Restablecer también la página principal y le das al Sí
Aparecerá el mensaje de confirmación que deberás Aceptar:
Si haces doble clic sobre él, se te abrirá la página con este navegador. Para abrirlo con el Firefox, una posibilidad es hacerlo pinchando con el botón derecho del ratón y, en el menú contextual, elegir la opción del Firefox
Vamos a ver nuestra página: Hacemos doble clic sobre el icono y ...
El otro navegador.
Hemos quedado que nuestra página debía visualizarse, también, con el Firefox.
Y ya hemos dicho también, que una forma era hacerlo desde el menú contextual pinchando con el botón derecho del ratón sobre el icono del archivo.
partir de este momento, es conveniente tener los dos navegadores minimizados en la barra de tareas para actualizar y visualizar rápidamente con cada uno de los navegadores los cambios efectuados.
5.- Mejorando la página.
5.1.- Centrar el texto.
Si queremos que nuestro saludo: Bienvenid@ aparezca en el centro de la página, escribimos delante del saludo la etiqueta <center> y al final del mismo la etiqueta de cierre </center>
y guardamos los cambios
Minimizamos y comprobamos los resultados con el Explorer (lo recuperamos desde la barra de tareas):
Si observamos que nuestro mensaje no aparece centrado le damos al botón . Puede ocurrir que no haya puesto al día los cambios:
Aumentar el tamaño del texto.
Nuestro mensaje es algo pequeño. Podemos aumentar su tamaño empleando las etiquetas de encabezados. Las etiquetas van desde el <h1> (h de head, en inglés, cabeza) para la más grande, al <h6> para la más pequeña.
Vamos a poner el tamaño mayor:
Le damos a Archivo > Guardar , minimizamos y comprobamos los cambios con cada uno de los navegadores
Poner un color de fondo.
Si deseamos poner un color de fondo a toda la página, lo tenemos que hacer dentro de la etiqueta <body> pues afecta a todo el documento. Esto que se escribe dentro de una etiqueta se denomina atributo. Los colores deben escribirse mediante el denominado código hexadecimal que consiste en 6 cifras/letras agrupadas de dos en dos, que nos indican la cantidad de rojo, verde y azul que contiene ese color, o bien, con la palabra inglesa que corresponde al color.
Nosotros vamos a poner el color rojo al fondo de la página. Lo conseguimos escribiendo la etiqueta <body> con su atributo como sigue: <body bgcolor="red"> ( bg de background ).
Guardamos los cambios y abrimos cada uno de los navegadores para comprobar los resultados:
5.4.- Cambiar el color del texto.
Para cambiar el color del texto empleamos la etiqueta <font> con su atributo color. Vamos a cambiar el color negro del texto, al color blanco.
Podríamos emplear el nombre en inglés del color, igual que hemos hecho con el fondo. La etiqueta quedaría <font color="white">. Vamos ahora, a colocar el código hexadecimal de este color que es el ffffff. La etiqueta quedaría así: <font color="#ffffff">. La etiqueta se debe cerrar sin su atributo
Guardamos los cambios, minimizamos y abrimos los navegadores actualizando si es necesario
hasta aqui llego y quien sigue
:D se me ocurrio una idea dejar los codigo con conoscamos de este lenguaje empiezo yo con los colores
--------------------------------------------------------------------------------
Paleta 1: 36 colores "#00xxyy". Sin rojo.
Paleta 2: 36 colores "#xx00yy". Sin verde.
Paleta 3: 36 colores "#xxyy00". Sin azul.
Paleta 4: 36 colores "#FFxxyy". Con el máximo de rojo.
Paleta 5: 36 colores "#xxFFyy". Con el máximo de verde.
Paleta 6: 36 colores "#xxyyFF". Con el máximo de azul.
Col. pastel: Gradación de 6 colores hasta llegar al blanco.
Grises: Gradación de 36 tonos de grises desde el negro al blanco.
Contrastes: 20 colores distintos en esos mismos 20 fondos de color.
Todos los colores (I): Applet para conseguir cualquier tono de color y su código.
Todos los colores (II): Otro applet para conseguir también cualquier color y su código.
Código nombre: Equivalencias entre el código nombre y el código hexadecimal.
Texto sobre fondo:Variaciones de 20 colores de texto sobre 19 fondos distintos.
Textos sobre fondos:Variaciones casi infinitas de texto sobre fondos distintos.
Colores Seguros: Una selección de colores que no varían sea cual sea el navegador.
Color/Texto/Enlaces/Fondos Imagen: Color de los enlaces, texto y fondo.
, 
que el que se dice hacker es solo una mascara 
que quiere aparentar cosas que demás no desimos por cuestión de Ética. 
News
Site map
SitemapIndex
RSS Feed