Pulsar acá, es volver al principio

Curso-Web con el Bloc de Notas

 

Introducción

 

Introducción

Se que me estoy metiendo en un gran berenjenal del cual me será muy, pero muy difícil salir, ya que siempre , (para los demás) he sido poco práctico.

Pero ya veré como salgo de esta.

¿Como podríamos diseñar una web poco a poco con el bloc de notas?.

La única diferencia que tiene el bloc de notas (por lo que veo) con los programas que se utilizan para editar páginas web, es que en este se deben poner manualmente los códigos, " no aparecen por arte de magia ".

De hecho, en los programas editores de páginas web, la " ayuda " es importante, pero se comete el error de no aprender el como hacer una página web por si solo.

Soy de la opinión de que es mejor entender lo que se está haciendo, que aprenderlo. De hecho, siempre hemos sabido que dos mas dos suman cuatro, pero nunca nos hemos preocupado del porqué.

Así que os invito a crear vuestra propia página web.

Si sabéis que dos mas dos suman cuatro, entonces os resultará fácil crear vuestra página, pero si también entendéis el porqué dos mas dos suman cuatro, os resultará tan fácil como el respirar.

En realidad, siempre me ha sorprendido esta gente de "internet", ya que cuando hablan de lo fácil que es crear una página web, luego añaden una inmensidad de términos técnicos que no las entienden ni ellos.

Fuera de eso explican las cosas desde su propio punto de vista, (como ellos saben, creen que los demás también).

No son capaces de ponerse en el lugar de la otra persona, (de la que como mucho, solo sabe buscar páginas aleatoreamente.

Verá que hacer una página web es más fácil de lo que pensaba. También te lo digo a ti, si, a ti que estás leyendo esta pequeña introducción.

No importa si tienes cinco años o noventa, (lo de cinco años lo digo por mi hijo) que ya sabe un poco de esto.

Para hacer una página web, se crea y se diseña en el ordenador, según tengo entendido, no necesariamente tiene que ser el ordenador personal, (el de casa), puede ser en cualquiera, pero es mejor hacerla en el ordenador de uno

También necesitamos un editor de páginas web, hay muchos que se pueden instalar en nuestro ordenador, pero nosotros utilizaremos el que viene con windows, el que se llama "bloc de notas".

Necesitamos también un "hosting" o "servidor", en términos sencillos este servidor u hosting es una empresa, (de las muchas que hay), que nos concede un lugar en uno de sus potentes ordenadores para que nosotros podamos "alojar" allí nuestra página.

Los hay de pago y los hay gratuitos, los de pago son los que suelen ofrecer mejores condiciones y a la vez tienen las típicas "terminaciones" punto com, punto net, punto info, punto etc. etc. etc. que van a continuación del nombre que le pongamos a nuestra web.

Los que son gratuítos en cambio, despues del nombre de nuestra web añaden un sub-dominio de ellos, y despues viene la "terminación" punto com, punto info, punto net etc. etc. etc.

Por ejemplo, si yo cojo para mi página web un alojamiento gratuíto, y a mi página le he puesto como nombre paginaderaul, cuando la aloje en ese hosting gratuíto, seguramente se llamará paginaderaul.mypressonline.com, el hosting le agrega un subdominio (ese mypressonline) al nombre de mi página.

Ahora si Amagoia contrata un hosting de pago, y a su página le pone por nombre paginadeamagoia, esta se llamará, paginadeamagoia.com, e irá sin ese sub-dominio incluído.

Antes de que se me olvide, también necesitamos tener un correo electrónico y que esté en funcionamiento, dicho de otro modo, que pueda mandar y recibir correo, vaya tonterías las que digo, je je je.

Bueno, con lo "poco" que tenemos, vamos a tratar de tener un web sencilla quizás, pero que nos va a ayudar mucho para despues ir poniéndole mas cosas.

Cuando digo con lo poco que tenemos, me refiero a el método que utilizaremos para diseñar nuestra web, o sea: Un correo electrónico, el bloc de notas de windows, el programa que tiene windows que nos servirá para subir nuestra página a internet, ( se les suele llamar FTP ), el hosting, que ese ya es externo, el programa de dibujos Paint, (que todos los windows lo tienen). Si tenemos el Photoshop mucho mejor, pero el Paint también nos sirve. Si algo se me olvida, ya me acordaré mas adelante.

Así que vamos a por ella. Digo a por nuestra página. ¡Mal pensad@s!.

PD:
Deseo aclarar que, realmente no era mi intencióon ponerlo acá para enseñarles a crear, construir, diseñar o hacer una página web, solo son sugerencias que le doy a una persona que ha querido que le enseñe lo poco que se de esto.

 

Atreviéndonos

 

Web de a poco

Lo primero que haremos será crear una carpeta en el escritorio para poner allí nuestra web (o las que queramos crear), a esa carpeta le ponemos por nombre "mis-web".

Luego dentro de ella creamos otra carpeta que es la que contendrá una de nuestras web, a esa carpeta le pondremos de nombre "mi-primera-web".

Ahora dentro de esa carpeta (a la que le hemos puesto como nombre "mi-primera-web"), creamos otra, que es la que contendrá las imagenes, fotos y dibujos, a esa le pondremos como nombre "objetos".

Con eso, ya tenemos el lugar donde pondremos nuestras web, la carpeta raíz de nuestra primera web será la carpeta que se llama "mi-primera-web".

(2) Ahora vamos a conocer el bloc de notas,por tanto vamos a "Inicio", (click izquierdo), - "Todos los programas" (Acá ponemos el cursor sobre Todos los Programas para que se abra el desplegable), - "Accesorios", (Acá ponemos el cursor sobre Accesorios para que se abra el desplegable), - "Bloc de notas", (Y acá le hacemos click izquierdo al bloc de notas para que se abra).

Entonces se nos abre una ventana para que podamos escribir en ella, así que en la primera línea escribimos: < !Doctype HTML Public" - // W3C // DTD HTML 4.01 Transitional // EN" >, esto es como decir que ese documento se basa en las normas establecidas, ya que el código HTML es prácticamente una " lengua " de un idioma mayor.

Hecho esto, en la siguiente línea ponemos el siguiente código: < HTML >, y en la siguiente ponemos el código: < HEAD > en la siguiente línea ponemos el código: < TITLE > Esta es mi primera página < / TITLE >.

Como se ve hemos puesto el código title, y a continuación hemos escrito el título de nuestra página, y luego hemos cerrado ese código.

Esos códigos son como cuando uno abre la puerta de casa, entra, y después cierra la puerta, y la manera de cerrar esos códigos es con la barra oblicua, por ejemplo: < TITLE > (abro código) escribimos lo que tenemos que poner y luego cerramos código así < / TITLE >

Realmente estos códigos se llaman etiquetas, así que de ahora en adelante utilizaremos "etiqueta" para referirnos a esa clase de códigos.

Luego en la siguiente línea ponemos una etiqueta, (en realidad todas son etiquetas), así que ponemos: < meta http - equiv = "Content - Type " content = " text / html; charset = iso -8859 -1" >

Esto que hemos puesto ahora, es una meta etiqueta, esta meta etiqueta sirve para que en nuestra página web se puedan ver las eñes y los acentos o tildes.

Como en el idioma inglés no existen acentos ni eñes, a sido necesario crear esa meta etiqueta, (en todo caso ya lo entenderemos mejor más adelante).

Hasta ahora hemos puesto tres clases de etiqueta, una es <HTML>, la otra es <HEAD> y la otra es <TITLE>, (más esa meta etiqueta), por ahora la única que hemos cerrado es la del título.

La página se compone de una etiqueta que engloba todo, como es la etiqueta <HTML>, (todo lo que va entre la etiqueta <HTML> y su cierre </HTML> es la página web), y entre su apertura y su cierre, ponemos todas las demás etiquetas.

Por eso no la hemos cerrado aún, ya que tenemos que poner más etiquetas.

Por tanto, después de poner en la primera línea:
< !Doctype HTML Public" - // W3C // DTD HTML 4.01 Transitional // EN" >

Y en la segunda línea :
< HTML >

Y en la tercera línea:
<HEAD>

Y en la cuarta línea:
< TITLE > Esta es mi primera página < / TITLE >

Y en la quinta línea:
< meta http - equiv = "Content - Type " content = " text / html; charset = iso -8859 -1" >

Entonces en la sexta línea, cerramos la etiqueta head así:
< / HEAD >

Hasta ahora, si vemos lo que estamos escribiéndo, tendría que estar de esta manera.

< !Doctype HTML Public" - // W3C // DTD HTML 4.01 Transitional // EN" >
< HTML >
< HEAD >
< TITLE > Esta es mi primera página < / TITLE >
< meta http - equiv = "Content - Type " content = " text / html; charset = iso -8859 -1 " >
< / HEAD >

Ahora viene el cuerpo de la página, el cuerpo o body es lo que realmente se ve en la pantalla de los ordenadores.

El nombre con el que se designa a este cuerpo es con la etiqueta <BODY>

Esa etiqueta la pondremos en la siguiente línea después del cierre del < / HEAD >

Reitero que el <BODY> es toda la pantalla, por lo tanto lo que va en la cabecera o lo que es lo mismo, entre el < HEAD > y el < / HEAD > es lo que no se ve en la pantalla, eso sirve para los robots que utilizan los navegadores.

Cuando los robots buscan las páginas se fijan primero en lo que hay allí.

Bueno, dentro del body es donde vamos a poner todas las capas o < DIV >.

Por eso, como decíamos pondremos ahora debajo del < HEAD > un < BODY > y lo cerraremos con < / BODY >, (ya pondremos dentro el contenido que tendrá nuestra página).

A continuación cerramos también el total que es el < / HTML >

Por lo tanto la estructura básica de nuestra página nos quedaría así:

< !Doctype HTML Public " - // W3C // DTD HTML 4.01 Transitional // EN " >
< HTML >
< HEAD >
< TITLE > Esta es mi primera página < / TITLE >
< meta http - equiv = "Content - Type " content = " text / html; charset = iso -8859 -1 " >
< / HEAD >
< BODY >
< / BODY >
< / HTML >

Os recuerdo que esa meta etiqueta que hemos puesto , el que dice: < meta http - equiv etc. etc. es el que permite que se vean las ñ y los acentos, ya que las programaciones suelen estar hechas para el idioma inglés, por eso ese código es como un anexo.

Ahora que tenemos puesto todo eso en nuestra página, la cerramos, pero claro, hay que cerrarla de la manera correcta.

Así que vamos a la parte de arriba, y en la pestaña "archivo", elegimos "Guardar Como".

Cuando se abre la ventana en donde tenemos que poner el nombre y la extensión, borramos lo que hay puesto (borramos lo que hay puesto en la casilla que se llama NOMBRE).

Y en esa casilla escribimos " index.html "

Luego en la casilla que hay más abajo, (la que se llama TIPO), pulsamos en la flecha que hay a la derecha de esa casilla y elegimos la pestaña que dice Todos los Archivos.

Luego arriba de la ventana buscamos y elegimos la carpeta " mi-primera-web " para guardarla en esa carpeta, y por fin cerramos.

Así habremos creado nuestra primera página.

Le hemos puesto a esa primera página como nombre index.html.

Según el orden y normas de las cosas en internet, cuando uno escribe en el navegador la dirección de una página,los navegadores cuando buscan esa dirección, van en busca de un archivo o página que se llame index.html.

Es lo mismo que cuando se camina por la ciudad en busca de una dirección, cuando se encuentra dicha dirección, se toca el timbre de la puerta de casa, no se llama a la puerta de una habitación, pues el index.html en una web es lo que la puerta de calle de una casa.

 

El bloc de notas

 

El bloc de notas

Bien, vamos a hablar un poco acerca del bloc de notas, el bloc es el programa por decirlo así con que originalmente se hacían las páginas web, (y aún se siguen haciendo), lo que sucede que ahora existen programas que alivianan el trabajo, por ejemplo hay programas que ponen ellos los códigos, hay otros que casi lo hacen todo por uno, pero lo bueno que tiene el bloc de notas es que uno debe poner los códigos y así se los aprende y los domina, en realidad el bloc de notas no es para personas que lo quieren todo hecho.

Bueno, ya que hemos creado la primera página, seguramente queremos verla, así que vamos a la carpeta donde la hemos guardado y en el "index.html" hacemos clic derecho y nos aparece un desplegable en el que elegimos "abrir con" bloc de notas, así se nos abre en el modo "código", que es cuando tenemos que escribir en la página, allí apareceran todos los códigos que anteriormente hemos escrito, así que cerramos.

Si queremos ver como está quedando la página, hacemos doble clic en ese index.html, seguramente cuando la abramos aparecerá una ventana con un mensaje de que windows no puede encontrar ese archivo, pero a la vez lo abrirá, así que le damos a aceptar para que se cierre esa ventana y hacemos clic en cualquier parte de la página para que se ponga detrás esa otra ventana que es la de la carpeta donde tenemos la web, así nos queda libre la página para verla, el problema es que seguramente no veremos nada,como mucho todo blanco, (el color por defecto) porque lógicamente solo hemos puesto unas etiquetas, lo que si se verá arriba en la barra de dirección es el nombre que le hemos puesto a esa página o el (título) "Esta es mi primera página".

Por eso ahora crearemos la hoja de estilo, que es la que ordenará de como queremos que se vea la página, la página es como un cuaderno con hojas en blanco, la hoja de estilo es como la "bolsita" donde tenemos los lápices, la regla, etc. Nosotros escribimos alguna palabra en la página, y desde la hoja de estilo le decimos el color, el tamaño y la ubicación de donde queremos que aparezca esa palabra.

Pero a lo que vamos, volvemos a "Inicio" - "Todos los Programas" - "Accesorios" - "Bloc de Notas", abrimos el bloc de notas y se abre la ventana para poder escribir en ella, como dijimos antes que el <body> era toda la página visible, o sea toda la pantalla, entonces escribimos en esa ventana: body {background - color : #FFFF00; } así mismo tal como lo he puesto acá.

Con eso le estamos ordenando a la página que tenga un color amarillo o yellow o FFFF00, que es el código que le corresponde a ese color (ya que los ordenadores entienden mejor los códigos que los nombres).

Después de haber hecho eso, lo que hacemos es guardar esa página , o esa hoja, si volvemos a guardarla con la extensión html, la estaríamos guardando como una página de web, pero como queremos que sea una hoja de estilo, tendremos que guardarla con la extensión css.

Así que vamos arriba y en "Archivo", hacemos clic y elegimos "Guardar como", cuando se abra la ventana de guardar como, vamos a la casilla Nombre y escribimos : estilo.css, luego en la casilla que dice Tipo, como saldrá que se quiere guardar como un archivo de texto, pues pulsamos la flecha de la derecha y elegimos Todos los archivos y la guardamos en la misma carpeta en que está el index.html.

Bien, ya tenemos una página index.html, que es la que se verá en nuestra pantalla o en la pantalla de los demás, y una hoja de estilo, que es la que le dirá a la página lo que debe mostrar y como hacerlo, solo que parece que tenemos un pequeño problema.

No ganamos nada con tener una página y una hoja de estilo si no están comunicadas de alguna manera, ya que si en la página : "Quiero poner unas letras de color rojo para los títulos y que el texto de los párrafos sean de color verde". ¿Cómo le doy la orden desde la hoja de estilo ?.

Pues, para relacionarlas es que necesitamos poner un código especial en la página, así que entre el < head > y el < / head >, debajo del título, o debajo de esa " meta equiv" que ya teníamos puesta, allí, ponemos el siguiente código.

 

Hoja / Página

 

Hoja / Página

Para ello, vamos a la carpeta donde tenemos nuestro index.html y hacemos clic derecho en ella, para que se abra ese desplegable que utilizaremos constantemente, el "abrir con", elegimos "bloc de notas" y abrimos la página en modo código, y escribimos:.

< link rel =" stylesheet " href =" estilo.css " type = " text / css " media =" all " >.

Con eso lo que estamos diciéndo es que " Hacemos un enlace desde la página, o la relacionamos, (link rel). con una hoja que se llama estilo.css, (href), y que está escrita en modo texto, (type), y que queremos que se vea en todos los dispositivos, tanto en monitores de ordenador como en móviles etc. (media all).

Guardamos y cerramos, como en la hoja de estilo a la que hemos llamado "estilo.css", habíamos escrito una orden, o le habíamos dado una directiva al body para que fuese de color amarillo, pues entonces ahora después de haber cerrado todo, volvemos a la carpeta donde está nuestro index.html, y en vez de abrirlo con " archivo" "abrir con", lo abrimos haciendo clic dos veces en el, para ver la página.

Seguramente, tendrá que mostrarse de color amarillo.

Hasta ahora todo lo que hemos hecho ha sido poner ciertas directivas básicas, tanto en la página "index.html" como en la hoja de "estilo.css", ahora haremos unas capas o < div > en la página index.html, porque queremos que tenga cierto diseño, por ejemplo queremos una capa en donde dentro de ella podamos poner una imagen.

Como casi todas las web que vemos, en que todas quieren dar a conocer sus "productos", cada una tiene un logotipo para que se le recuerde por el, ya que nuestra mente asimila mejor las imágenes.

Esta imagen o logotipo se suele colocar en una capa de la página en la parte superior izquierda de ella. También en esa capa donde irá el logotipo pero ya a la derecha, se suele tener un espacio para poner publicidad.

Pero antes de hacer nada de esto tenemos que ver ciertos aspectos del diseño de nuestra página web, por ejemplo lo mejor por ahora es poner todas las capas que vayamos a crear dentro de una capa que las contenga a todas para poder dominarlas un poco y llevar cierto orden.

Por ello entre el < body > y el < / body > (que es toda la pantalla), pondremos esa capa a la que llamaremos " contenedor ", dentro de esa capa contenedor irán todas las otras capas.

La palabra contenedor es un nombre que nos inventaremos para poder darle definiciones a esa capa, ya que para el idioma HTML hay nombres de etiquetas que ya están predeterminados como " body, DIV, P, UL, OL, LI, H1, H2, H3, H4, H5, H6, HR, FORM, FIELDSET, COL, TABLE, TD, LEGEND, IFRAME " etc.

El nombre para esa capa que llamaremos " contenedor ", en la hoja de estilo le tenemos que anteponer el símbolo de la almohadilla, que es la que define el nombre, por ejemplo :

" #contenedor ", y en la página la pondremos así " < div id = " contenedor " >, y la cerraremos así " < /div > ", claro que la cerraremos después de haber puesto todas las capas que van dentro, aunque podemos cerrarla también y cuando queramos hacer una capa dentro de contenedor la ponemos entre el < div id = " contenedor " > y el < /div >.

Pues ahora haremos un repaso del como debemos tener la página habiéndo incluído ya la capa o div contenedor :

< ! Doctype HTML Public" - // W3C // DTD HTML 4.01 Transitional // EN" >
< html >
< head >
< title > Esta es mi primera página < /title >
< meta http - equiv = "Content - Type " content = "text / html; charset = iso -8859 -1 " >
< link rel = " stylesheet " href = " estilo.css " type = "text / css " media = " all " >
< /head >
< body >
< div id = " contenedor " >
< /div >
< /body >
< /html >

No nos olvidemos de que para abrir la página en la vista código, debemos ir a la carpeta " mis web " y abrir la que está dentro de ella, " mi - primera - web ", ya que esa es la carpeta raíz de nuestra web, y allí abrimos la página haciéndo clic derecho y elegir " abrir con " el bloc de notas.

Bueno, después que hemos puesto todos esos códigos en nuestra página, la cerramos con " guardar ", y abrimos nuestra hoja de estilo que está en la misma carpeta, en ella solo basta hacer doble clic para que se abra, recordemos que en ella teníamos puesta una directiva para el body.

Esto es lo que teníamos en la hoja de estilo : body { background - color : FFFF00 ; }. Como ahora en la página hemos creado una capa o div, la que se llama " contenedor ", entonces debajo de esa línea donde pusimos body etc. etc. ponemos las directivas para esa capa recién creada, y nos quedaría así la hoja de estilo ::

body { background - color : FFFF00 ; }
#contenedor { }

Las llaves que se ponen son las que tienen que englobar todas las directivas de esa capa, claro que ahora no le hemos puesto ninguna directiva, así que lo vamos a hacer.

#contenedor { width : 800px ; margin : 4px auto ; background - color : 00FF00; }

Con esto le hemos dicho que mida de ancho 800 píxeles, y que deje un margen por arriba y por abajo de 4 píxeles, y que por los lados se centre automáticamente, y que el color sea un lime ( verde claro ).

Lo mas seguro es que no haya quedado como nosotros queríamos, pero debe ser por que no le dijimos realmente que se centre, por eso para ello se lo tenemos que decir al body, como el html es un idioma de códigos de texto, entonces lo que haremos será ir al body y poner :

body {text - align : center ; background - color : FFFF00 ; }. Así esa capa contenedor nos quedaría centrada en la pantalla con respecto al body.

Al ponerle al body en la hoja de estilo un " text - align : center, le estamos diciéndo al navegador Internet Explorer que centre todo el texo de la página web, pero como el Internet Explorer, por lo visto las cosas las ve a su manera, lo que hace es centrar todo, en cuanto al otro navegador, el Firefox, usará la directiva que le pusimos a la capa global, ese margin : 4 px auto.

Como se puede ver , son dos maneras diferentes de ver las cosas, por eso lo que hay que tratar es de compatibilizar los códigos para que la página se vea en los navegadores sin mucha diferencia. Dicho esto, los códigos quedarían de la siguiente manera.

En la hoja de estilo

body {text-align:center;background - color : FFFF00 ; }
#contenedor { width : 800px ; margin : 4px auto ; background - color : 00FF00; }

En la página o index.html

< ! Doctype HTML Public" - // W3C // DTD HTML 4.01 Transitional // EN" >
< html >
< head >
< title > Esta es mi primera página < /title >
< meta http - equiv = "Content - Type " content = " text / html; charset = iso -8859 -1 " >
< link rel = " stylesheet " href = " estilo.css " type = "text / css " media = " all " >
< /head >
< body >
< div id = " contenedor " >
< /div >
< /body >
< /html >

Ya se que esa capa contenedor no se ve, pero ¿porqué no se ve?, solo se ve el body que es toda la pantalla , y de color amarillo, sucede que las capas se ven cuando o tienen contenido, por ejemplo un texto o una letra, o cuando se le ha dado una medida, usted dirá que ya le hemos dado una medida, si, pero solo a lo ancho, por lo tanto esa capa si existe, solo que por ahora mientras no le pongamos una medida de altura o algo de contenido, solo será una línea que apenas se note en la parte superior del body.

En realidad a esa capa contenedor no le pondremos nada de texto, ni siquiera una medida de altura, porque la ocuparemos para que contenga a las otras capas que irán dentro, que si llevarán medidas y texto, por eso en su momento borraremos esa frase que pusimos en esa capa, la que dice "hola", ya que solo la hemos puesto como ejemplo.

 

Modelo de cajas

 

Modelo de cajas

Antes de que sigamos, aclararemos algo importante con respecto a como funciona una web con respecto a su diseño. veremos que hay dos formatos, el modelo de formato "visual". Nos dice cómo los navegadores muestran por pantalla los documentos que realizamos.

Debiéramos de aprender porque con CSS se modificarán muchas propiedades que alterarán el "flujo" o curso normal de este proceso.

El modelo de formato visual organiza los elementos de nuestra página en bloques o "cajas de contenido" que se reparten el espacio de la página.

Para hacer una comparación sencilla, podríamos decir que el modelo de formato visual es como un puzzle en el que ordenamos los elementos que vamos creándo en la página. En cambio el modelo de caja es cómo diseñamos y situamos cada una de las piezas, que al final nos permite ver un buen diseño.

Por cada elemento que compone nuestra página web, el navegador genera cero o una caja. ¿Qué es una caja?. Una caja es un espacio rectangular dentro de la ventana de nuestro navegador, todas las páginas web están divididas en estos bloques de contenido que llamamos cajas, por ejemplo:

BODY es una caja
DIV es una caja que está dentro de BODY
P es una caja que está dentro de DIV
texto es una caja que está dentro de P o párrafo.

---Como podemos ver, la ventana del navegador se divide en cajas que contienen otras cajas, y que posicionan las nuevas cajas respecto a las anteriores.

Cuando una caja contiene otros elementos ( y mas cajas ), provoca un bloque de contención, (hay casos en que no se aplica esta regla), la posición y tamaño de un elemento se calcula respecto a su bloque de contención en el que se encuentra.

Realmente todo esto es necesario, por que gracias a ello podemos ordenar los elementos en la página, mostrarlos uno detrás de otros y sobre todo situarlos. Lo importante es comprender que cualquier documento HTML (por básico que sea) está distribuido en cajas.

 

Mas Bloc

 

Mas Bloc

 

---Esto es lo que llevamos por ahora, así que comenzaremos a crear dentro de esa capa contenedor los diferentes elementos, como por ejemplo una capa a la que llamaremos cabecera en la que pondremos un logotipo a la izquierda y dejaremos un espacio para algo de publicidad por la derecha.

Lo que haremos será crear dentro de la capa contenedor una capa que será la cabecera, y dentro de esa capa cabecera crearemos dos capas, una que llamaremos "logotipo", y la otra a la que llamaremos "publicidad". No me lo digáis, que ya lo se, como véis no soy muy original poniéndo nombres. Comenzaremos primero por la cabecera, así que nos vamos a nuestra carpeta donde está nuestra hoja de estilo para "crearla" y darle las propiedades como ancho, alto, etc.

En la hoja de estilo teníamos por el momento esto :

body { text - align : center ; background - color : FFFF00 ; }
#contenedor { width : 800px ; margin : 4px auto ; background - color : 00FF00; }

Entonces ahora debajo de donde dice # contenedor escribimos :
#cabecera { background-color : #FF0000 ; border : black 1px solid ; height : 100px ; }

Eso significa que dentro de esa capa de color verde que tenemos en la imagen, hemos hecho una capa que se llama cabecera a la que le hemos dado un color de fondo rojo, una altura de 100 píxeles, le hemos puesto unos bordes de color negro de un píxel de grueso y que esos bordes sean una línea continua, y que estén por los cuatro lados.

---Ya que le hemos definido en la hoja de estilo a esa capa a la que llamamos cabecera unas medidas, un color y unos bordes, entonces ahora después de guardar y cerrar la hoja de estilo, vamos a nuestra página, la abrimos con el típico "abrir con", y creamos esa capa allí, y debajo de la línea donde dice < div id="contenedor" >, ponemos la siguiente capa, < div id="cabecera" > </ div>.

Recordemos que había que borrar la palabra "hola" de la capa contenedor, pues ahora sería un buen momento.

Si váis siguiéndo estas indicaciones, y haciéndo en vuestro ordenador todo esto, veréis que ahora esa capa cabecera que hemos creado dentro de la capa contenedor, ocupa todo el ancho y alto de la capa contenedor, y al hacerlo, ya que le habíamos dado un color rojo, pues ahora se ve toda esa capa de color rojo.

Por tanto nuestros códigos en nuestra página index nos quedaría por el momento así:

< ! Doctype HTML Public" - // W3C // DTD HTML 4.01 Transitional // EN" >
< html >
< head >
< title > Esta es mi primera página < /title >
< meta http - equiv = "Content - Type " content = " text / html; charset = iso -8859 -1 " >
< link rel = " stylesheet " href = " estilo.css " type = "text / css " media = " all " >
< /head >
< body >
< div id = " contenedor " >
< div id = " cabecera " > < / div >
< /div >
< /body >
< /html >

Y en nuestra hoja de estilo nuestros códigos estarían de esta manera/:

body {text-align:center;background - color : FFFF00 ; }
#contenedor { width : 800px ; margin : 4px auto ; background - color : 00FF00; }
#cabecera { background-color : #FF0000 ; border : black 1px solid ; height : 100px ; }

Ahora crearemos las capas que habíamos dicho anteriormente, la capa a la que llamaremos logotipo y la capa que llamaremos publicidad, estas irán dentro de la capa cabecera.

Así que para ahorrar trabajo, pondremos los códigos de como debiera de quedar nuestra página index con las capas antes dichas, que estarán dentro de la capa cabecera.

< ! Doctype HTML Public" - // W3C // DTD HTML 4.01 Transitional // EN" >
< html >
< head >
< title > Esta es mi primera página < /title >
< meta http - equiv = "Content - Type " content = " text / html; charset = iso -8859 -1 " >
< link rel = " stylesheet " href = " estilo.css " type = "text / css " media = " all " >
< /head >
< body >
< div id = " contenedor " >
< div id = " cabecera " >
< div id = " logotipo " > < / div >
< div id = " publicidad " > < / div >
< /div >
< /div >
< /body >
< /html >

Como vemos, hemos puesto las dos capas dentro de la capa cabecera, hemos abierto la capa logotipo y después la hemos cerrado, lo mismo hemos hecho con la capa publicidad, y ese < / div > que hay debajo de la capa publicidad es el que cierra la capa cabecera.

Ahora a continuación, guardamos y cerramos nuestra página index.html y nos vamos a nuestra hoja de estilo.css, le hacemos como ya sabemos doble click para abrirla, allí le pondremos el ancho, el color y la altura a esas capas, ( logotipo y publicidad ), así que lo haremos de esta manera :

body {text-align:center;background - color : FFFF00 ; }
#contenedor { width : 800px ; margin : 4px auto ; background - color : 00FF00; }
#cabecera { background-color : #FF0000 ; border : black 1px solid ; height : 100px ; }
#logotipo { background-color : #C0C0C0 ; width : 200px ; height : 100px ; float : left ; }
#publicidad { background-color : #FFC0CB ; width : 598px ; float: left ; }

Al guardar y cerrar nuestra hoja de estilo e ir a nuestra página, seguramente veremos solo la capa logotipo de ese color gris que le hemos dado, y la capa publicidad, lo mas probable es que no la veamos, esto es debido que a la capa logotipo le hemos dado una altura, pero a la capa publicidad no le hemos dado ninguna altura, solo le hemos dado el ancho, la capa logotipo, fuera de que se ve porque le hemos dado una altura específica, también le hemos dicho que se mantenga flotando a la izquierda, lógico que dentro de la capa cabecera que es la que contiene a las dos capas, con la capa publicidad nos sucede lo que al principio cuando creamos la capa contenedor, lo mas probable es que esa capa publicidad solo sea una línea, si recordamos, la capa contenedor no se veía hasta no haberle puesto por lo menos un contenido o una altura, así que aprovecharemos, ya que estamos en nuestra página, de ponerle algo de contenido a las dos capas, así nos evitamos que estas no se vean, así que lo haremos de esta manera:

Escribiremos la palabra logotipo en la capa logotipo y escribiremos la palabra publicidad en la capa publicidad, (sigo con mi originalidad, je je je)

Como se muestra acá abajo, es como debiéramos de tener nuestros códigos en nuestra página.

< ! Doctype HTML Public" - // W3C // DTD HTML 4.01 Transitional // EN" >
< html >
< head >
< title > Esta es mi primera página < /title >
< meta http - equiv = "Content - Type " content = " text / html; charset = iso -8859 -1 " >
< link rel = " stylesheet " href = " estilo.css " type = "text / css " media = " all " >
< /head >
< body >
< div id = " contenedor " >
< div id = " cabecera " >
< div id = " logotipo " > Logotipo < / div >
< div id = " publicidad " > Publicidad < / div >
< /div >
< /div >
< /body >
< /html >

Bueno, ahora hacemos click en archivo - guardar, y cerramos nuestra página, la abrimos con doble click, (recordar que si aparece el mensaje de que windows no puede mostrar la página o no puede abrir el contenido, lo que debemos hacer es cerrar ese mensaje, ya que nos la mostrará de todas maneras).

Como decía, abrimos nuestra página y veremos ahora la palabra logotipo escrita en la parte superior de la capa logotipo, y en la capa publicidad veremos también en la parte superior de esa capa la palabra publicidad que tendrá de fondo el color rosa que le habíamos puesto en nuestra hoja de estilo, como a la capa publicidad no le habíamos dado ninguna altura, es por eso que solo nos muestra una franja de color rosa donde está la palabra publicidad, esa franja de color rosa es el fondo por defecto que tiene esa palabra, así que haremos que esa palabra quede mas o menos por el medio, y el color rojo que se ve, es parte de la capa cabecera, ya que la capa publicidad está dentro de aquella capa, solo que al lado derecho, ya que el lado izquierdo lo está ocupándo la capa logotipo, por tanto a la capa publicidad le pondremos una separación de la parte de arriba para que nos quede mas o menos por el centro, lo haremos en la hoja de estilo, así que abrimos nuestra hoja de estilo y añadimos a la directiva de la capa publicidad lo siguiente:

Como se muestra acá abajo es como debiéramos de tener nuestros códigos en nuestra hoja de estilo.

body {text-align:center;background - color : #FFFF00 ; }
#contenedor { width : 800px ; margin : 4px auto ; background - color : #00FF00; }
#cabecera { background-color : #FF0000 ; border : black 1px solid ; height : 100px ; }
#logotipo { background-color : #C0C0C0 ; width : 200px ; height : 100px ; float : left ; }
#publicidad { background-color : #FFC0CB ; width : 598px ; float: left ; margin - top : 40px ; }

Antes de poneros una imagen de como estaría quedando nuestra página, debéis saber que si hacemos una capa que mide 800 píxeles de ancho, y queremos poner otras capas dentro, debemos tener en cuenta que si le hemos puesto a esa capa unos bordes, por ejemplo a la izquierda y a la derecha, nuestra caja ya no tendrá de ancho por dentro los 800 píxeles, así que habrá que, como en nuestro caso, en que la capa logotipo le hemos dado una medida de 200 píxeles, teoricamente nos quedarían 600 píxeles para poner la capa publicidad, pero claro, la capa cabecera mide 800 píxeles, pero tiene un borde de un pixel de grueso a la izquierda y un borde de un pixel de grueso a la derecha, así que por lo tanto, nuestra capa publicidad debiera de medir de ancho 598 píxeles, que es lo que le pusimos, con esto creo que aclaramos un poco lo que tiene que ver con los bordes.

 

---Esto es lo que llevamos por el momento, creo que no ha sido tan difícil llegar hasta acá, pero lo cierto es que debemos continuar, ya que solo hemos hecho hasta ahora, la típica cabecera que se suelen ver en todas las páginas, aún nos queda por hacer una pequeña capa debajo de la cabecera en la que pondremos algunos enlaces, para que al pulsar en alguno de ellos, nos lleve a ver u otra página que tengamos creada en nuestra web u otra página de otra web.

Como esa capa que vamos a crear, es la que nos servirá para "navegar " hacia otras páginas, lo mas seguro que a esa capa le pongamos por nombre navegacion.

 

Navegación

 

Navegacion

En la capa a la que llamaremos navegación es donde pondremos algunos enlaces, esta como dije va a continuación de la capa cabecera, así que vamos a nuestra página, la abrimos como siempre (click derecho-Abrir con- Bloc de notas), y ponemos esa capa debajo del cierre de la cabecera, la contiene a las otras dos capas (logotipo y publicidad).

< ! Doctype HTML Public" - // W3C // DTD HTML 4.01 Transitional // EN" >
< html >
< head >
< title > Esta es mi primera página < /title >
< meta http - equiv = "Content - Type " content = " text / html; charset = iso -8859 -1 " >
< link rel = " stylesheet " href = " estilo.css " type = "text / css " media = " all " >
< /head >
< body >
< div id = " contenedor " >
< div id = " cabecera " >
< div id = " logotipo " > Logotipo < / div >
< div id = " publicidad " > Publicidad < / div >
< /div >
< div id = " navegacion " > Navegación < / div > Esta es la capa creada ahora
< /div >
< /body >
< /html >

---Si ahora guardamos y cerramos nuestra página, al volver a abrirla, notaremos que esa capa navegación que hemos creado, aún no aparece, solo se verá la palabra "navegación" sobre un fondo verde.

Ese fondo es parte del fondo que le corresponde a la capa contenedor, por eso ahora lo que tenemos que hacer en esa capa navegación es darle las propiedades que queremos que tenga, eso lo haremos en la hoja de estilo.

Así que cerramos todo, y vamos a nuestra hoja de estilo que está en la misma carpeta que nuestra página index.html, y abrimos nuestra hoja de estilo en la cual vamos a darle las directivas a esa nueva capa que hemos llamado navegación. Le pondremos un color de fondo y bordes tanto a la izquierda como a la derecha y en la parte inferior, estos tendrán un píxel de grueso y serán de color negro como los de la capa cabecera

Así que debajo de la capa publicidad escribimos:

body {text-align:center;background - color : FFFF00 ; }
#contenedor { width : 800px ; margin : 4px auto ; background - color : 00FF00; }
#cabecera { background-color : #FF0000 ; border : black 1px solid ; height : 100px ; }
#logotipo { background-color : #C0C0C0 ; width : 200px ; height : 100px ; float : left ; }
#publicidad { background-color : #FFC0CB ; width : 598px ; float: left ; margin - top : 40px ; }
#navegacion { background-color : #808000 ; border-left: black 1px solid; border-right: black 1px solid; border-bottom:black 1px solid; }

 

Principal

 

Principal

---Ahora haremos la capa o div principal, en la que pondremos el contenido de lo que queremos decir en nuestra página, para ello abrimos nuestra página index con el bloc de notas, (recuerde hacer clic derecho y en el desplegable elegir "abrir con" "bloc de notas") y debajo de la capa o div navegación, escribimos el siguiente código, y aprovechamos de escribir algo de texto para que no nos pase como con la capa navegación, luego cerramos ese código. Por lo tanto, escribimos todo lo que pongo acá

< div id = "principal">Esta es mi primera página que estoy haciendo, y en esta capa escribiré algunas cosas que les quiero enseñar a los demás < / div >.

Ahora guardamos y cerramos nuestra página, y en la hoja de estilo.css, escribimos las ordenes que le vamos a dar a esa capa que hemos creado.

Abrimos con doble clic nuestra hoja de estilo, y en la línea siguiente, (abajo de la capa navegación), escribimos el siguiente código (directiva)

# principal {background - color : # FFA500 ; width : auto ; border - left : black 1px solid ; border - right : black 1px solid ; }

# principal p { padding : 5px 10px 5px 10px ; text - indent : 15px }

Como podéis ver, hemos puesto dos códigos, uno que le da el color de fondo a esa capa principal, ( orange o naranja ) con bordes a la izquierda y a la derecha que tienen un píxel de ancho, de color negro, y le hemos dicho que esos bordes sean sólidos, (una línea continua), pero también hemos puesto una directiva para el texto que escribiremos en esa capa, el padding, literalmente quiere decir relleno, eso significa que hemos puesto un relleno alrededor del texto que escribamos en esa capa, quizás por ahora sea difícil de entender, pero con ese relleno hacemos que el principio y el final, como por arriba y por abajo de los párrafos que escribamos, haya un espacio para que las palabras o letras no toquen los bordes de la capa, también le hemos puesto un indent, ¿ Qué es un indent ¿ nos preguntaremos. Pues un indent es para que la primera línea de cada párrafo que escribamos comience un poco mas a la derecha que las líneas siguientes de ese párrafo, así que resumiendo, los códigos en nuestra página index.html quedarían así

 

< ! Doctype HTML Public" - // W3C // DTD HTML 4.01 Transitional // EN" >
< html >
< head >
< title > Esta es mi primera página < /title >
< meta http - equiv = "Content - Type " content = " text / html; charset = iso -8859 -1 " >
< link rel = " stylesheet " href = " estilo.css " type = "text / css " media = " all " >
< /head >
< body >
< div id = " contenedor " >
< div id = " cabecera " >
< div id = " logotipo " > Logotipo < / div >
< div id = " publicidad " > Publicidad < / div >
< /div >
< div id = " navegacion " > Navegación < / div >
< div id = "principal">Esta es mi primera página que estoy haciendo, y en esta capa escribiré algunas cosas que les quiero enseñar a los demás
< / div >
< /div >
< /body >
< /html >

 

La capa Menu

 

Menu

---Bueno, en todas las páginas web, siempre existe un menu, es lo que llamaríamos una lista de enlaces que al pulsar en uno de ellos, nos llevará a una de nuestras otras páginas de nuestra web.

Si nuestra web se compone de cinco páginas, pues haremos un menu con cinco enlaces, este menu estará en todas nuestras páginas para que podamos de cualquier página ir a las otras.

Esta capa menu la pondremos dentro de la capa Principal, pegada a la izquierda, claro que a esa capa menu le daremos unos márgenes (para que nos quede un poco separada) por arriba por la derecha por abajo y por la izquierda, así nos quedaría casi pegada a la izquierda y arriba de los bordes de la capa Principal.

Para que nos vaya quedando bien, esta capa menu, en la página donde escribimos los códigos, debemos ponerla a continuación del código que abre la capa Principal, pero antes de lo que habíamos escrito. (son las cosas que tiene esto de internet), y pensar que yo todavía no me entero de porqué tiene que ser así je je je .

Por eso vamos a ir a nuestra página index.html y la abrimos con el bloc de notas para crear esa capa menu. ¿Os acordáis como se abría la página con el bloc de notas?. Vale, vale, no os preocupéis, vamos a repasarlo ahora mismo.

Vamos a nuestra carpeta, la que se llama mis web, la abrimos con doble click, al abrirse nos muestra la carpeta mi primera web,así que le hacemos a esa carpeta doble click y allí vemos nuestra carpeta objetos, nuestra hoja de estilo y nuestra página index, así que ponemos el cursor en nuestra página index.html y hacemos click derecho, y cuando se abre el desplegable, ponemos el cursor en donde dice "abrir con", y en el pequeño desplegable que se abre, elegimos "bloc de notas", así se abre nuestro index.html en lo que se llama "la vista código", también conocida como "código fuente".

Entonces donde dice: < div id = "principal">Esta es mi primera página que estoy haciendo, y en esta capa escribiré algunas cosas que les quiero enseñar a los demás </div>, lo pondremos de la siguiente manera:

< div id = "principal"> <div id=" menu ">Menu</div>Esta es mi primera página que estoy haciendo, y en esta capa escribiré algunas cosas que les quiero enseñar a los demás </div>

Como vemos, hemos abierto una capa a la que le hemos puesto de nombre menu, (muchas veces me sorprende la originalidad que tengo para ponerle nombre a las cosas, je je je). También entre los códigos de abertura y cierre, hemos escrito la palabra Menu, ¿Recordáis esa norma de ponerle algo a una capa cuando la creamos?, Si, seguro que lo recordáis, "Toda capa que creamos, se le pone unas medidas, sobre todo la altura, y si no es necesaria la altura, entonces debemos de escribir algo en ellas, aunque sea poner un punto"

Es que así coge algo de cuerpo, (con tal que no sea el cuerpo del delito je je je). Bueno, ya que hemos creado nuestra capa menu en nuestra página, lo que debemos hacer ahora es ir a nuestra hoja de estilo, y darle las directivas de como queremos que sea esa capa y en que parte de la capa Principal queremos ponerla.

Abrimos nuestra carpeta "mi-primera-web" y hacemos doble click en el archivo que se llama estilo.css, y en la siguienta línea, debajo de donde dice: # principal p{padding:5px 10px 5px 10px;text-indent:15px}, escribimos:

#menu {width:150px;background-color: #FFFFFF;margin:3px 10px 3px 3px;float:left;}

¿Qué realmente hemos hecho al poner todos esos códigos?, pues es muy sencillo, queremos que nuestra capa menu, la que hemos creado en nuestra página, tenga un ancho de 150 píxeles, que tenga un color de fondo blanco, que esté separada esa capa menu de la capa principal 3 píxeles por arriba, que por la derecha de esa capa menu haya una separación o margin de 10 pí:xeles, eso significa que cualquier cosa que pongamos a la derecha de la capa menu, estará separada del borde derecho de la capa menu 10 píxeles, como por ejemplo, lo que escribamos en la capa principal que esté a la altura de la capa menu, tendrá esa separación.

Si, es cierto, también le hemos puesto un float-left, con eso le estamos diciéndo a esa capa menu, que queremos que flote a la izquierda. Por ahora no me preguntéis de que va ese float left, ya lo iréis comprendiéndo mas adelante, y yo también je je je.

Aprovechándo de que estamos en nuestra hoja de estilo y que acabamos de poner el como queremos que se muestre nuestra capa menu, lo que haremos será ponerle una directiva a la palabra Menu, ¿Recordáis que en nuestra página index, entre la etiqueta de abertura de la capa menu y la de cierre pusimos la palabra Menu?, pues la vamos a convertir en un título.

En las páginas web hay unas etiquetas que se llaman H1, H2, H3, H4, H5, H6, todas estas etiquetas sirven para poner títulos, y subtítulos, normalmente ya están prefijadas sus medidas, pero lo que nosotros vamos a hacer es cambiarle , para la capa menu la medida a una de esas etiquetas, por ejemplo a la H1, ya que si la dejamos tal como viene prefijada, nos quedaría muy, pero muy grande para esa capa, por eso pondremos el siguiente código para esa etiqueta que irá dentro de la capa menu.

#menu h1{ text-decoration:none;font-size:12px;padding-top:12px;}.

Cuando ponemos algún título en un artículo que vamos a escribir, se usa la etiqueta H1, pero como dije antes, las medidas ya están prefijadas de acuerdo al tamaño de las letras que se estén usando cuando uno escribe, también sucede que lo que va dentro de la etiqueta H1, suele por defecto estar subrayado, pero como nosotros no queremos que ese título esté subrayado, es que hemos puesto en la directiva ese "text-decoration:none, y como toda palabra que se ponga dentro de esa etiqueta H1 es como dos veces y media mas grande que las letras que utilizamos cuando escribimos, es por ello que le ponemos una altura a las letras de esa etiqueta tan solo de 12 píxeles con ese " font-size:12px, fuera de eso, por defecto esos títulos suelen estar casi pegados al borde superior de la capa, pero como no queremos que sea así (se vería muy feo), es que le hemos puesto un relleno o padding por arriba para que separe del borde superior unos doce píxeles, eso lo hacemos con ese padding-top:12px.

¿Habéis visto como nos ha quedado?

---La capa menu, que está dentro de la capa Principal, y que está a la izquierda como nosotros queríamos, (como podemos ver en la imagen de mas arriba), pero lamentablemente sobresale hacia abajo de la capa Principal.

En mis ratos libres, (cuando no estaba pensando en pajaritos) se me ocurrió que, si ponía mas texto en la capa Principal, esta se iría alargando hacia abajo y ¡Cha chán!, Así fue, desde que le puse mas texto a lo que había escrito en la capa Principal, esta comenzó a ir hacia abajo, y la capa menu se quedó donde estaba, (A veces me doy premios por mis buenas ocurrencias, ¡Cuidado Pekin!. ¿O ahora es Londres? je je je je).

Pero os digo. Si habéis hecho todo tal como os lo he explicado hasta ahora, veréis que esto está tomando forma poco a poco, aunque aún nos quedan unas cuantas cosas por hacer, (como prepararme ahora mismo un café).

Bueno, después del sabroso café, seguiremos con nuestro experimento, je je je . Lo que haremos será ver como debiéramos de tener los códigos hasta ahora, tanto en nuestra página como en nuestra hoja de estilo, así que acá los pondré.

Esto es lo que debemos tener en nuestra página

 

< ! Doctype HTML Public" - // W3C // DTD HTML 4.01 Transitional // EN" >
< html >
< head >
< title > Esta es mi primera página < /title >
< meta http - equiv = "Content - Type " content = " text / html; charset = iso -8859 -1 " >
< link rel = " stylesheet " href = " estilo.css " type = "text / css " media = " all " >
< /head >
< body >
< div id = " contenedor " >
< div id = " cabecera " >
< div id = " logotipo " > Logotipo < / div >
< div id = " publicidad " > Publicidad < / div >
< /div >
< div id = " navegacion " > Navegación < / div >
< div id = "principal">
< div id = "menu"> <h1>Menu</h1></div>
Esta es mi primera página que estoy haciendo, y en esta capa escribiré algunas cosas, en primer lugar, como la capa menu se me pasa hacia abajo, lo que tengo que hacer es escribir algo mas de texto en esta capa principal para que se vaya alargando hacia abajo, quedándo la capa menu dentro tal como yo quería así que escribiré un montón de texto, hasta que el texto llegue a pasar por debajo de la capa menu
< / div >
< /div >
< /body >
< /html >

 

Y esto en nuestra hoja de estilo.

 

body {text-align:center;background - color : #FFFF00 ; }
#contenedor { width : 800px ; margin : 4px auto ; background - color : #00FF00; }
#cabecera { background-color : #FF0000 ; border : black 1px solid ; height : 100px ; }
#logotipo { background-color : #C0C0C0 ; width : 200px ; height : 100px ; float : left ; }
#publicidad { background-color : #FFC0CB ; width : 598px ; float: left ; margin - top : 40px ; }
#navegacion { background-color : #808000 ; border-left: black 1px solid; border-right: black 1px solid; border-bottom:black 1px solid; }
# principal {background - color : # FFA500 ; width : auto ; border - left : black 1px solid ; border - right : black 1px solid ; }
# principal p { padding : 5px 10px 5px 10px ; text - indent : 15px }
#menu {width:150px;background-color: #FFFFFF;margin:3px 10px 3px 3px;float:left;}
#menu h1{ text-decoration:none;font-size:12px;padding-top:12px;}

 

Si todo lo tenéis así, significa que vamos por buen camino, ya pronto se acerca el momento en que podamos "subir" nuestra página a internet,solo nos estaría faltando poner una capa que se le suele llamar capa pie, esta es una capa que va al final, se le suele poner unos enlaces.

Pero una página web sin imagenes es como si caminásemos por un parque lleno de hierba , pero que no tuviese ninguna flor, así que también haremos una pequeña incursión a un programa que nos facilitará en buena medida que podamos poner unas buenas imagenes.

Si tenéis el Photoshop, os enseñaré algunos truquillos para que las imagenes que pongamos en nuestra página no "pesen" tanto, ya que mientras mas "livianas" las imagenes que pongamos, mas rápido se cargará nuestra página cuando alguien desee ver nuestra obra de arte.

Si no tenéis el Photoshop, aún nos quedaría el Paint de Windows, pero mucho mejor sería si lo tuvieseis.

 

Retocando

 

Cambios urgentes

Esto del inglés no se me da muy bien, yo pensaba que esto iba a ser mas fácil, pero tanto left y tanto right y top y bottom. Es que se me erizan los pelos tan solo de saber que tengo que acordarme que left significa izquierda, era tan fácil cuando solo conocía el yes.

Por eso ahora haremos una entrada furtiva, rápida y letal para acomodar las cosas y que nuestra página vaya pareciéndo lo que queremos que sea,una página.

Por eso lo primero que vamos a hacer es añadir y retocar algunas cosas, códigos y demases, así que no os asustéis si vamos con exceso de velocidad. "Es que es tan grande el Universo, y tan poco nuestro tiempo".

Si hasta me sale la vena de poeta, y hablándo de poetas, ¿Sabíais que tengo un par de premios por un par de poemas que remití a un "concurso"?;. Claro que yo no sabía que era un concurso, y ¡Cha chán!, voy uno de estos días a donde tu ingresas diez y te cobran veinte por hacerlo. ¡Si, al banco!, y me encontré que donde debía mucho dinero, (cuando pasa de trecientos , para mi ya es mucho) tenía eso, mas eso, mas la mitad de eso, mas la mitad de la mitad de eso, mas uno. Resultando que tenía mil a mi favor. ¿Haber si sabéis cuanto debía?.

Bueno, menos cháchara y a lo nuestro je, je, je. Hasta ahora hemos hecho las cosas con lógica, pero debéis saber que internet, o mejor dicho hacer una página web sale muchas veces fuera de esa lógica, en algunas ocasiones hay que poner un código para después quitarlo. ¡Vaya tontería!. Pero es así.

Porque estoy seguro que no nos ha quedado como lo que tenemos en la imágen anterior. Por eso, como digo, vamos a retocar un poco estos códigos. ¿Os acordáis del reset?. Si, de ese botoncito escondido que hay en casi todos los aparatos, como por ejemplo las calculadoras etc., pues vamos a hacer algo parecido, pero con los códigos, ya que cuando algo va por "mal camino", lo mejor es resetear, y llegó el momento de hacerlo para nuestra página.

Para adelantar un poco, pondremos esa capa que falta en la parte de abajo, (la capa pie), también pondremos unos enlaces en la capa menu, y resetearemos los margin, padding, border, e indent, así que manos a la obra, que después de ponerlos os explicaré algunas de las cosas que hemos hecho.

Abriremos nuestra hoja de estilo, y modificaremos algunos códigos para que nos quede así:

 

*{text-indent:0px;margin:0px;padding:0px;border:0pX;}
h1{font-size:1.2em;color:blue;font-weight:bold;text-decoration:underline;text-align:center}
p{text-align:justify;}
body{text-align:center;background-color:#FFFF00;height:100%;}
#contenedor{background-color:#00FF00;width:800px;margin:4px auto;}
#cabecera{background-color:#FF0000;border:black 1px solid;height:100px}
#logotipo{background-color:#C0C0C0;width:200px;height:100px;float:left;}
#publicidad{background-color:#FFC0CB;float:left;width:598px;margin-top:40px;}
#navegacion{background-color:#808000;border-left:black 1px solid;border-right:black 1px solid;border-bottom:black 1px solid;}
#principal{background-color:#FFA500;width:auto;border-left:black 1px solid;border-right:black 1px solid;}
#principal p{padding:5px 10px 0px 10px;text-indent:15px;}
#menu{text-align:left;width:150px;background-color:#FFFFFF;margin:3px 10px 3px 3px;float:left;border:black 1px solid;}
#menu h1{text-decoration:none;font-size:12px;background-color:#FFFF00;}
#menu li{list-style:none;margin:4px 0px 4px 6px;}
#capapie{background-color:#008000;border:black 1px solid;}
a{color:brown;text-decoration:none;display:block}
a:link{}
a:visited{}
a:hover{color:red;text-decoration:underline;background-color:#FFEFD5;}
a:active{}

 

Como véis, hemos cambiado un montón de cosas, pero no os preocupéis, que lograremos (espero), nuestro objetivo, por eso ahora abriremos nuestra página en vista código, y la modificaremos hasta que quede así:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Mi primera pagina</title>
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<div id="logotipo">logotipo</div>
<div id="publicidad">publicidad</div>
</div>
<div id="navegacion">navegacion</div>
<div id="principal">
<div id="menu"><h1>menu</h1>
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li><li><a href="#">Enlace 5</a></li></ul></div>
<h1>Esta es mi pagina</h1>
<p>Esta es la primera página que hago, y en esta capa escribiré muchas cosas, en primer lugar, como la capa menu se me pasa hacia abajo, lo que tengo que hacer es escribir algo mas de texto en esta capa.</p>
<p>Y así esta capa Principal se va alargando hacia abajo, quedando la capa menu dentro como yo quería, así que escribiré un montón de texto, hasta que llegue a pasar por debajo de la capa menu.</p>
<p>Si véis que la página no va quedando como pensáis que tiene que quedar. No os asustéis, porque si lo hacéis, también me asusto yo, así que vamos a perderle el miedo, ¡Si es que nos atrevemos!.</p>
<p>A veces me da la tentación de que se os introduzcan todos los códigos de una vez en vuestras cabecitas, pero me recuerdo de como aprendí yo, como niño pequeño je je je.</p>
</div>
<div id="capapie">Esta es la capa pie</div>
</div>
</body>
</html>

 

Bueno. Lo prometido, aunque no os hagáis ilusiones de que voy a explicar todo, todo, de todo, ya que algo mas tenemos que hacer con esas cositas que tenemos en el cerebro, (¿Neuronas se llaman?). Bien, podemos ver que en nuestra hoja de estilo hemos puesto en la primera línea, (lo primero de lo primero), un asterisco, ese viene siendo como el reset que expliqué anteriormente, con ese asterisco le estamos diciéndo a nuestra web, que todos los margin, los padding, los border y los indent, tengan 0 píxeles, ahora, si queremos ponerle márgenes a alguna capa, o rellenos, o bordes, o indentar párrafos, lo pondremos individualmente a cada uno (si es que podemos).

---Esta es la manera en que tendríamos que tener por ahora nuestra página.Si os fijáis, en nuestra hoja de estilo en la parte de abajo, hay un grupo de aes, ese grupo es el que tiene que ver con los enlaces, esos que al pulsar sobre ellos nos llevan a otra página, página que puede ser de nuestra web o de otra web.

También en la capa menu h1, o sea donde pusimos esa palabra que dice Menu, le hemos quitado ese padding, ¿queréis que os diga algo? esos padding los he quitado porque se me ha dado la real gana, ya que los pondremos en algún momento mas adelante que de seguro los vamos a necesitar para un "invento" que tengo preparado.

Antes de que se me olvide, os recuerdo que tenéis que ir pensando en que nombre le pondréis a vuestra web, hay personas que solo desean una página personal y le ponen como nombre "mipáginapersonal.es", pero debemos recordar que como vamos a coger un hosting o alojamiento gratuíto, el hosting nos va a incluir otro subdominio por su cuenta, por ejemplo si le vamos a poner por nombre a nuestra web "mipáginapersonal", nos quedaría mas o menos así. "mipáginapersonal.myartsonline", claro que con la terminación que haya disponible, que puede ser .com o .net, o .org. o .info. o .es, o la que haya.

Otros le ponen como nombre a su página o web, un nombre descriptivo que tenga que ver con su negocio, otras personas desean dar a conocer su localidad o su pueblo, como por ejemplo "mendigorria.myartsonline.com", así que id pensándo en cual nombre le pondréis a vuestra web, y no seais remolones ni remolonas, que para eso tiempo os queda bastante.

Esto de internet es un mundo muy, pero muy grande, (lástima que solo sea virtual), por eso nosotros estamos aprendiéndo a hacer una página lo mas sencilla posible, digamos que con las cosas básicas, ya habrá tiempo de incluírle esas otras cosas que hacen que las páginas parezcan como si estuviésemos viendo un video, por ahora, sencillita, (como yo, je je je ).

Os contaré un secreto. Me gusta que la juventud de esta generación aprenda, lo que sea, pero que aprenda, eso hace que estén despiertos a todo, y que cuando vengan esos ladrones, esos que les llenan la cabeza de m..., y que tratan de robar sus corazones diciéndoles que todo lo hacen por su bién.

¡Pero que tremenda mentira se han montado!. Se creen que los jovenes son como borreguitos a los que hay que guiar. Claro que hay que ayudarlos, sobre todo los que tienen mas experiencia en esta vida, pero yo les digo a estos soberbios ladrones de sentimientos, "¡si tú, que tienes experiencia en la vida, y que te remueves en tu propio lodo sin poder salir, ¿Cómo vas a ayudar?. ¿No tendrías que haber salido primero de ese lodazal?!".

Bueno, otra vez me estoy yendo por otros caminos, pero es que en verdad que me pone triste, por que sin ir mas lejos el otro día vi un reportaje a un médico, le preguntaban por algo que tenía que ver con las neuronas. ¡Hubiéseis visto!, no solo la respuesta que dió, si no la actitud que tomó al darla, como si el fuese el no va mas de la inteligencia, con una soberbia que ya la hubiese querido Pinochet o Hitler o Mussolinni. Te hablan como si hubiesen descubierto las Américas, cuando no son capaces ni siquiera de estirar la mano para apagar el despertador.

Bueno, yo reconozco que a mi siempre se me vuelca. - El despertador digo--. Y yo, dele apretándo y apretándo y este condenado que no se apaga. Claro, si lo que apretaba era una de las "patitas", je je je.

Quiero recordaros que estamos aprendiendo a hacer una página web, pero una página web sencilla, pondremos unos colores de fondo, (aunque ya tenemos puestos algunos), pero también pondremos unas imagenes de fondo, eso de las imagenes de fondo lo veremos mas tarde, por que ahora lo que haremos será poner unos enlaces en la capa navegación, esa que tiene un color oliva, que sería en términos de ordenador el código #:808000.

No recuerdo si os expliqué lo de los enlaces, si es que no os lo he explicado, haremos un pequeño resumen de lo que en realidad son.

Todos los ordenadores tienen dentro de su memoria, especificado de como van a mostrar los enlaces de las páginas web. ¿Recordáis que cuando visitáis una página web, los enlaces aparecen de color azul?. Eso es porque ya están predefinidos de que aparezcan así. Pero como nosotros queremos ser diferentes, lo que vamos a hacer es que los enlaces tengan el color que queramos. Bueno, recuerdo que ya lo hemos hecho allí en el grupo de las aes que hemos puesto en nuestra hoja de estilo

Podéis probar de ir a vuestra hoja de estilo y en la primera línea del grupo de las aes, quitarle una letra, solo una letra donde dice brown, (quitádle la n), después guardáis y abrís vuestra página y veréis que los enlaces de la capa menu, ya no tienen ese color marrón que le pusimos, sino que tienen un color azul, ya que si nada le ponemos a ese grupo de aes, cogerá el color predefinido, (por defecto, je je je).

Bueno, menos comerse la cabeza con los enlaces y vamos a lo nuestro. Así que abrimos nuestra página en vista código, y vamos donde está la capa o div navegación, y allí crearemos una lista, recordad que una lista va dentro de unas etiquetas que comienzan con el código <ul> que es el que dice que a continuación va a ver una lista, cuya lista pondremos entre ese código y su código de cierre, o sea </ul>.

Recordad haced click derecho - Abrir con - bloc de notas, y nos dirigimos a la capa navegacion y lo primero que haremos será borrar la palabra navegacion, ya que la teníamos puesta solo para que esa capa tiviese algo de "cuerpo".

¿Recordáis que a las capas, cuando no se le ponen medidas, hay que ponerles una palabra o como mínimo un punto?. Pues bien, la borramos y ya está.

Después de borrarla, ponemos (donde estaba la palabra navegacion) los siguientes códigos, (hacemos una lista).

<div id="navegacion"><ul><li><a href="#">Seccion 1</a></li><li><a href="#">Seccion 2</a></li><li><a href="#">Seccion 3</a></li><li><a href="#">Seccion 4</a></li></ul></div>.

--Si guardáis y cerráis vuestra página, y la volvéis a abrir, (doble click), veréis que ahora hay una lista, pero que no está como nosotros la queríamos, y encima aparecen unos puntitos a la izquierda y fuera de la capa.

Pues esos puntitos, también son por "defecto". Así que los quitaremos y haremos que cada enlace de esa lista se ponga uno al lado del otro, y sin esos puntitos ya que es eso lo que queríamos.

Pero. ¿Dónde hacemos eso?. Muy fácil, en la hoja de estilo.

Por tanto, cerramos nuestra página y abrimos nuestra hoja de estilo, vemos donde está la línea de la capa o div navegacion, y debajo de ella creamos dos líneas mas, poniendo los siguientes códigos.

#navegacion li{float:left;list-style:none;margin:0px 20px 0px 20px;}
#navegacion ul{margin-left:160px;}.

Con el float left, le estamos diciéndo que esa lista queremos que flote a la izquierda de esa capa navegación, con el list style none, le quitamos los puntitos, y con el margin 0px 20px 0px 20px, le estamos diciéndo a esa lista que no tenga margenes por arriba ni por abajo, pero que entre ellas haya un margen de por lo menos 20 píxeles.

Con la otra línea que hemos puesto, la de navegacion ul, le estamos diciéndo a esa lista, (al grupo de toda esa lista) que se ponga a 160 píxeles del borde izquierdo de la capa navegación.

Así que cerramos nuestra hoja de estilo y abrimos nuestra página para ver si se han hecho los cambios que le hemos ordenado desde la hoja de estilo.

---Seguramente veremos que los enlaces están como nosotros queríamos, (uno al lado del otro y separados entre si), pero notamos que parece que se han metido en la capa de abajo, (la de color naranja como podéis ver en la imagen), y encima, la capa menu (la que tiene los otros enlaces)se nos fue a la derecha. Esto parece ser que se me está yendo de las manos, (de las teclas diría yo, je je je ) En resumen... ¡Un desastre!. ¡Un caos!. ¡Un...voy a ver si puedo arreglarlo!.

No entiendo la razón de porqué se me ha vuelto todo "patas "arriba. ¿Qué es lo que hice mal?. ¡Hummmmmmmm!....¡Ya se!. Que tenga que utilizar parte de mi tercera neurona, es inconcebible, si me dijeron que esto estaba "chupaó".

Aver... La cabecera está bien, la capapie, está bien, la capa principal, está bien, la capa navegación está...¿Bien?. Claro... el problema está en los enlaces de la capa navegación, hay que recordar que a las capas cuando no se les pone alguna medida, estas se "pierden", y recuerdo que le borramos el texto que habíamos escrito en ella y le pusimos la lista que sería de enlaces o link.

Y claro... Los enlaces suelen coger una medida , diríamos un poco más grande que si solo escribiésemos texto normal, así que el arreglo sería muy sencillo. ¿Qué tal si le ponemos en la hoja de estilo a la capa navegacion una altura, como por ejemplo de unos 20 píxeles?. Así los enlaces no estarían invadiéndo la capa de abajo, (la principal), y seguramente la capa del menu se iría a la izquierda que es donde debe estar.

Entonces vamos a nuestra hoja de estilo, la abrimos, y ponemos en la capa navegacion después de cualquier punto y coma lo siguiente: height:20px;, cosa de que nos quede como os muestro acá abajo.

#navegacion{background-color:#808000;height:20px;border-left:black 1px solid;border-right:black 1px solid;border-bottom:black 1px solid;}.

Bueno, ahora si que nuestra hoja de estilo nos debiera de quedar de esta manera.

 

*{text-indent:0px;margin:0px;padding:0px;border:0pX;}
h1{font-size:1.2em;color:blue;font-weight:bold;text-decoration:underline;text-align:center}
p{text-align:justify;}
body{text-align:center;background-color:#FFFF00;height:100%;}
#contenedor{background-color:#00FF00;width:800px;margin:4px auto;}
#cabecera{background-color:#FF0000;border:black 1px solid;height:100px}
#logotipo{background-color:#C0C0C0;width:200px;height:100px;float:left;}
#publicidad{background-color:#FFC0CB;float:left;width:598px;margin-top:40px;}
#navegacion{background-color:#808000;height:20px;border-left:black 1px solid;border-right:black 1px solid;border-bottom:black 1px solid;}
#navegacion li{float:left;list-style:none;margin:0px 20px 0px 20px;}
#navegacion ul{margin-left:160px;}
#principal{background-color:#FFA500;width:auto;border-left:black 1px solid;border-right:black 1px solid;}
#principal p{padding:5px 10px 0px 10px;text-indent:15px;}
#menu{text-align:left;width:150px;background-color:#FFFFFF;margin:3px 10px 3px 3px;float:left;border:black 1px solid;}
#menu h1{text-decoration:none;font-size:12px;background-color:#FFFF00;}
#menu li{list-style:none;margin:4px 0px 4px 6px;}
#capapie{background-color:#008000;border:black 1px solid;}
a{color:brown;text-decoration:none;display:block}
a:link{}
a:visited{}
a:hover{color:red;text-decoration:underline;background-color:#FFEFD5;}
a:active{}

Y nuestra página debiéramos de tenerla así:.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Mi primera pagina</title>
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<div id="logotipo">logotipo</div>
<div id="publicidad">publicidad</div>
</div>
<div id="navegacion"><ul><li><a href="#">Seccion 1</a></li><li><a href="#">Seccion 2</a></li><li><a href="#">Seccion 3</a></li><li><a href="#">Seccion 4</a></li></ul></div>
<div id="principal">
<div id="menu"><h1>menu</h1>
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li><li><a href="#">Enlace 5</a></li></ul></div>
<h1>Esta es mi pagina</h1>
<p>Esta es la primera página que hago, y en esta capa escribiré muchas cosas, en primer lugar, como la capa menu se me pasa hacia abajo, lo que tengo que hacer es escribir algo mas de texto en esta capa.</p>
<p>Y así esta capa Principal se va alargando hacia abajo, quedando la capa menu dentro como yo quería, así que escribiré un montón de texto, hasta que llegue a pasar por debajo de la capa menu.</p>
<p>Si véis que la página no va quedando como pensáis que tiene que quedar. No os asustéis, porque si lo hacéis, también me asusto yo, así que vamos a perderle el miedo, ¡Si es que nos atrevemos!.</p>
<p>A veces me da la tentación de que se os introduzcan todos los códigos de una vez en vuestras cabecitas, pero me recuerdo de como aprendí yo, como niño pequeño je je je.</p>
</div>
<div id="capapie">Esta es la capa pie</div>
</div>
</body>
</html>

Me parece que ahora ya nos va quedándo mejor, y ya parece una página, así que seguiremos diseñando nuestra sencilla página.

Trataremos de poner en esta página que estamos haciéndo, lo suficiente para que después, cuando tengamos que hacer otras páginas de nuestra web, estas tengan el mismo diseño general, ya que a esas páginas solo le cambiaremos después el contenido

Así que ¡Vamos allá!.

 

Largo es el camino

 

Otro Menu

Vamos a poner un menu ahora a la derecha, ese menu que pondremos a la derecha de nuestra página, será un poco más especial que el que tenemos a la izquierda.

Recordemos que cada enlace que tenemos en el menu de la izquierda nos llevará a una página de nuestra web, pero el menu que pondremos a la derecha, nos llevará a una sección o capítulo, pero de la misma página en que nos encontramos.

Eso es cuando una página es bastante larga. Imaginaros que una página contiene mucho texto, por ejemplo varios poemas y que debemos desplazarnos hacia abajo para poder ir leyéndo cada uno de ellos.

¿Qué haríamos si quisiéramos leer algún poema que está por la mitad de la página?.

Pues se nos gastaría la rueda del ratón, teniéndo que darle vueltas y vueltas hasta llegar al poema que queríamos leer otra vez.

Por eso vamos a hacer ese menu que pondremos a la derecha, pero vamos a hacer las cosas un poco más fáciles, como ya tenemos en nuestra hoja de estilo el menu de la izquierda con sus códigos, lo que haremos será escribir, (no hagáis copiar y pegar, os lo recomiendo).

Así que abrimos nuestra hoja de estilo, ¿Os recordáis como se abre?, cursor sobre ella, click derecho, abrir con, bloc de notas, y escribimos una línea por debajo de donde están los códigos de la capa menu de la izquierda, o sea justo debajo de donde dice:

#menu{etc. etc. etc.}
#menu h1{etc. etc. et.}
#menu li{etc. etc. etc.} Lo siguiente.

#menuderecha{text-align:left;width:150px;background-color:#FFFFFF;margin:3px 3px 3px 10px;float:right;border:black 1px solid;}
#menuderecha h1{text-decoration:none;font-size:12px;background-color:#FFFF00;}
#menuderecha li{list-style:none;margin:4px 0px 4px 6px;}

¿Os habéis fijado?. Lo único que hemos hecho es prácticamente copiar los códigos del menu de la izquierda, pero con unas pequeñas variaciones, como por ejemplo le hemos dicho que flote a la derecha.

En los margin, que en el menu de la izquierda los teníamos 3px por arriba, 10px por la derecha, 3px por abajo, y 3px por la izquierda, ahora el margin que estaba a la derecha, lo hemos puesto a la izquierda, como el texto ahora estará por la izquierda de esa capa, pues necesita que estén separados de ella, o sea, los hemos invertido.

Al menu h1 y al menu li, los hemos dejado igual, ni los hemos tocado, "mejor, así no la fastidiamos je je je je".

Ya se que hay algo en lo que os habéis dado cuenta, claro, la capa que hemos puesto a la derecha, ya no se llama menu, ahora se llama menuderecha, es que como le cambiamos un poco los valores a las propiedades, es mejor que esa capa lleve otro nombre, ya que así le podemos poner otro color de fondo y no el blanco que tiene la capa menu de la izquierda.

Así que ahora guardamos, cerramos y abrimos entonces nuestra página, (recordad que hay que abrirla en vista código para poder escribir en ella?.

Cuando abrimos nuestra página con el bloc de notas, debemos escribir en ella, justo debajo de donde está la lista de los enlaces, digamos que antes de el código que tenemos puesto como título

En nuestra página lo tenemos así:.

<div id="menu"><h1>menu</h1>
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li><li><a href="#">Enlace 5</a></li></ul></div>
<h1>Esta es mi pagina</h1>

Pues ahora hay que escribir los códigos de la capa menuderecha y que queden así:.

<div id="menu"><h1>menu</h1>
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li><li><a href="#">Enlace 5</a></li></ul></div>
<div id="menuderecha"><h1>Capitulos</h1>
<ul><li><a href="#">Capt 1</a></li><li><a href="#">Capt 2</a></li><li><a href="#">Capt 3</a></li><li><a href="#">Capt 4</a></li><li><a href="#">Capt 5</a></li></ul></div>
<h1>Esta es mi pagina</h1>

a

J.J.

 

a

Bueno, seguiré mas tarde con la web

Ya me esoy aburriéndo de esta frasecita

Repito. ¡Me estoy aburriéndo de esta frase

No deje pasar la oportunidad de hundirse con ellos
Demasiado peso el de la razón, para demasiada razón de peso