IVLIVS escribió::shock: Que va, que va, profundizar, por el momento no quisiera liarme demasiado.
:P La Web de CCTW la encontré por casualidad, buscando una manera fácil de aprender a fabricar Web.
:D Lo cierto es que, por lo que veo en el foro, hay mucha gente que avanza con sus páginas, llegando incluso a hacer algo serio. No sé si esto ha sido debido a seguir paso a paso el curso, quiero pensar que sí.
Lo único de algunas preguntas raras que hago es por miedo a no entender bién lo que se explica. Porque.....
Creo que una cosa es seguir el curso y ver la página de ejemplo terminada (eso en principo no debería ser demasiada complicación) y otra es extrapolar lo aprendido a una propia.
Bueno, perdón por la extensión y gracias de nuevo.
Hola:
Espero no ofender a nadie en particular , pero comenzaré diciendo que cuando una persona hace una pregunta acerca de un tema, el que va a responder a dicha pregunta, debe tener si no la sabiduría por lo menos la perspicacia necesaria para darse cuenta de que (en base a esa pregunta), el que la hace, es una persona que,
o ya tiene bastante conocimiento acerca de dicho tema y necesita respuestas más “profundas y técnicas” o realmente su conocimiento es básico y necesita respuestas básicas.
Aclarado esto es entonces la razón, (en base a su pregunta), que me dio a entender el grado de conocimiento que usted tiene en estos momentos acerca del tema.
Por ello, yo le di una respuesta más o menos sencilla, sin entrar en profundidades.
El o la usuari@ que le dio anteriormente algunas respuestas, tiene razón en muchos aspectos.
Pero creo, no era el momento adecuado para darle respuestas más profundas y técnicas en lo que concierne al ámbito de las etiquetas que conforman una web.
Cuando le dije que el body es toda la pantalla de su monitor, lógicamente es descontando las barras de búsqueda y dirección.
Trataré de explicarle lo más sencillo posible lo que es el HTML, para que tenga una idea de lo que está haciendo, digamos que entre profundo y superficial.
Los tres componentes básicos de la WWW , “o la web”, son el protocolo HTTP, el esquema de direcciones URL (URI) , y el lenguaje HTML
La transferencia de objetos, sigue haciéndose de acuerdo con el protocolo HTTP.
La identificación de objetos se realiza por medio de URL (URI).
Y los contenidos, por complejos y dinámicos que sean, se basan en HTML.
Existe un meta-lenguaje, y se llama SGML, (Standar Generalized Markup Language).
Es un sistema de descripción de documentos independiente de dispositivos.
Define un mecanismo para describir tanto la estructura de un documento genérico, como para cada una de sus posibles instancias.
Cada documento está organizado físicamente en una serie de entidades y lógicamente en una jerarquía de elementos.
Además resulta ser un lenguaje inteligible para el usuario, no tan solo para la máquina, (si bien prácticamente nadie codifica directamente en el).
De esta forma es lo suficientemente amplio para actuar como meta-lenguaje para la definición de otros lenguajes, tal y como ocurre en el caso de l HTML.
De hecho los ficheros HTML son documentos SGML que cumplen una serie de reglas que definen el significado de sus marcas o directivas.
Estas reglas son las definidas en el DTD.
De hecho, la gramática HTML está escrita en SGML, en un documento denominado DTD, (Document Type Definition).
Por esa razón, diremos que el HTML (Hyper Text Markup Language) no es un verdadero lenguaje de programación, ya que solo se usa para describir documentos y sus componentes, sin embargo tiene comandos y definiciones que no se visualizan pero que modifican el aspecto final del documento.
Aun que no lo parezca a simple vista, pero todos los programas de tratamiento de texto utilizan alguna convención para describir sus documentos, y señalar en qué momento hay que mostrar una cabecera, como alinear párrafos, cómo dejar sitio para una figura etc..
Lo que ocurre es que no somos conscientes del “uso” de ese lenguaje porque el programa lo “recubre” y hace innecesario su conocimiento.
Esto mismo ocurre cuando un navegador visualiza un documento HTML, el usuario solo ve el texto formateado y los gráficos y enlaces, no ve los comandos que le dicen al programa visualizador el cómo y qué debe mostrarse
Resumiendo en modo sencillo:
HTML diríamos que es un lenguaje que pertenece a un meta lenguaje.
Diho HTML tiene a su vez unas variantes del lenguaje, tal como el idioma español cada cierto tiempo se va modernizando y va dejando atrás palabras ya en desuso, sin embargo esto requiere tiempo, incluso hay palabras antiguas del español que se siguen utilizando paralelamente con las modernas para referirse a un mismo elemento como por ejemplo las palabras que se utiliza para referirse a un elemento metálico.
Antiguamente la palabra utilizada era “FIERRO” y ahora se utiliza la palabra “HIERRO”.
Pues en el idioma HTML es lo mismo, hay versiones Transicionales que le dicen al navegador que algunas etiquetas que se usan en dicha web son antiguas y otras modernas
También hay versiones Estrictas, que le dicen al navegador que las etiquetas que se utilizan en dicha web solo son etiquetas modernas (standarizadas).
Ejemplo básico:
Imagine que usted habla español y que va a escribir una carta.
Pues en la cabecera de la página en donde va a escribir su carta, usted tiene que especificar que versión del idioma español va a utilizar, si el Transitional o el Strict.
Por tanto en la cabecera de la página usted escribiría lo siguiente:
“Este documento de texto está escrito en español, y en el utilizo tanto palabras antiguas como palabras modernas, por tanto el modo que hay que utilizar para leer esta carta es el Transitional.
O puede poner:
“Este documento de texto está escrito en español, y en el utilizo palabras modernas, por tanto el modo que hay que utilizar para leer esta carta es el Strict.
En el modo Transitional puede escribir esa carta tanto en minúsculas como en mayúsculas, con alguna falta de ortografía etc., que el que lo lea sabrá entender lo que dice dicha carta.
Pero en el modo Strict, esa carta tiene que escribirla correctamente, basado en lo que dice la Real Academia de la Lengua Española.
Los puntos en donde tienen que estare, las comas en donde tienen que estar, etc. etc.
Pues en el "idioma HTML es lo mismo", existen versiones del idioma HTML Transicionales y versiones Estrictas.
Por eso antes de la etiqueta <html>, allí en la cabecera de la página web, hay que poner esa declaración, para que cuando el navegador llegue a esa página sepa como tiene que leer los códigos de esa página web.
En el curso, la versión que se utiliza es la versión Transitional 4.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Luego de esa declaración entonces comienza la estructura básica de la página, cuya base se conforma de tres cuerpos.
Primero la etiqueta <html>, todo lo que esté entre la etiqueta <html y </html> es la página web.
Dentro de esas etiquetas <html> y </html> van dos cuerpos, uno es el <head> … </head> y el otro es el <body>… </body>.
Entre el <head> y el </head> va una etiqueta que se llama <title>… </title>.
Lo que va en esa etiqueta <title> es lo que se verá en la barra de direcciones del navegador, todas las otras cosas que van entre el <head> y el </head> son meta etiquetas y otras directivas que solo las verá el navegador, para que el navegador sepa de qué va esa página y otras cosas más.
Entre el <body > y el </body>, eso es lo que se visualizará en la pantalla del monitor.
El body es el cuerpo visible de la página web.
Si usted tiene un monitor que mide 800px de anchoX 600px, pues eso es lo que medirá el body de ancho.
Pero si usted tiene un monitor que mide 1.260px de ancho X 960px , pues eso es lo que medirá de ancho el body.
Por eso es cuando digo que el body es toda la pantalla del monitor (exceptuando las barras de direcciones), es que el body se adapta a los anchos de los monitores en que se visualiza la página web.
Si usted tiene un monitor que de ancho mide 800px, y crea dentro del body una capa a la que le pone por nombre “global”, y a esta capa le pone de ancho 700px, y la pone centrada, pues le sobrará por los lados izquierdo y derecho 50px , y se le verá al lado izquierdo de esa capa parte del body (50px) y otro tanto por el lado derecho.
Pero si su monitor mide 1.260px de ancho y su capa global mide 800px de ancho, entonces se verá por el lado izquierdo unos 230px del body, y otro tanto por el lado derecho.
La estructura básica de una página web sería esta:
<html>
<head>
<title>…</title>
</head>
<body>
</body>
</html>
Lógicamente antes de la etiqueta <html> habría que poner cual es la versión del idioma o lenguaje HTML que se va a utilizar en esa página.
En lo que concierne a los margin que le pone al body, recuerde que el body tiene como límite en su ancho lo que es la pantalla del monitor, por tanto el margin que le ponga se referenciará hacia lo que hay dentro, no lo que hay hacia afuera.
Haga un ejemplo:
Cree una carpeta en su escritorio, y póngale por nombre prueba-body
Luego de tener creada esa carpeta, ábrala, cuando esté abierta ponga el cursor en una parte vacía de esa carpeta y haga click derecho, se le abrirá un pequeño desplegable, en ese desplegable ponga el cursor donde diga Nuevo y se le abrirá otro desplegable, pues en ese otro desplegable pulse (click izquierdo) donde dice “Documento de texto”.
Así se le creará en esa carpeta un documento de texto.
Como en el documento de texto recién creado le quedará en azul (la parte del nombre) para que usted le ponga nombre, pues no haga nada y en una parte vacía de la carpeta haga click izquierdo para que el documento de texto quede tal como está.
Bien, ahora que ya tiene creado ese documento de texto, ponga el cursor sobre el y hágale doble click izquierdo para que se abra.
Cuando ya esté abierto ese documento de texto, vaya arriba y pulse (click izquierdo) en Archivo, y en el desplegable que se abre pulse (click izquierdo) en Guardar Como.
Cuando se abra la ventana del Guardar Como, vaya abajo y en la casilla donde dice Nombre, pues borre lo que hay allí y en esa misma casilla esciba index.html.
Luego vaya a la casilla de más abajo, (la que se llama Tipo), y pulse (click izquierdo) en la flecha que hay a la derecha, y en el desplegable que se abre pulse (click izquierdo) donde dice Todos los Archivos.
Luego guarde, (pulse en Guardar, click izquierdo).
Fíjese bien que se guarde en la carpeta que creó en el escritorio, la que se llama prueba-body (arriba en la casilla que se llama Guardar en).
Ahora, (sin cerrar ese documento), vuelva a ir a Archivo y pulse en él (click izquierdo), y en el desplegable que se abre pulse en (click izquierdo) Guardar Como, se le abrirá otra vez la ventana del Guardar Como, así que vaya a la casilla que dice Nombre y borre todo lo que hay allí y escriba en esa casilla estilo.css
Luego vaya a la casilla que dice Tipo y pulse (click izquierdo) en la flecha de la derecha para que se abra el pequeño desplegable y pulse (click izquierdo) en Todos los archivos, luego pulse (click izquierdo) en Guardar, recuerde que debe guardarla en la carpeta prueba-body.
Bien, ahora Cierre (click izquierdo en el aspa roja allí arriba).
Ahora que ya tiene guardado todo eso, abra la carpeta prueba-body (doble click izquierdo sobre ella).
Ponga el cursor sobre el archivo index.html y hágale click derecho, y en el desplegable que se abre ponga el cursor donde dice Abrir Con, y en el otro desplegable que se abre pulse (click izquierdo) en Bloc de notas, así se le abrirá ese documento html para que pueda escribir los códigos que le muestro a continuación
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Mi primera pagina</title>
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
</head>
<body>
<div id="global">
Esta es una prueba</p>
</div>
</body>
</html>
Luego de escribir todos estos códigos guarde y cierre.
Ahora vaya a esa hoja de estilo, allí solo debe hacer doble click izquierdo para que se abra, cuando ya la tenga abierta escriba estos códigos que están a continuación
body {text-align: center;background-color:#ff00ff;margin:30px}
#global {width:700px ; margin: auto;background-color:#ff0000;height:600px }
Luego guarde y cierre
Fíjese que a la capa global solo le hemos dejado como margin -- auto –
y a la capa body le hemos dicho que tenga margin de 30 píxeles.
Ahora vaya a ese archivo index.html y púlse (doble click izquierdo) para que se abra y le muestre esa página web
¿Qué es lo que ha pasado?
Pues que la capa body ha desplazado a la capa global hacia abajo esos 30 píxeles.
¿Porqué?
Porque la capa body no tiene ninguna referencia exterior en qué basarse para tener esos 30 píxeles de margin, ya que el único límite exterior que tiene el body es el propio monitor, y como hemos podido ver anteriormente , los monitores tienen diferentes resoluciones y tamaños, por tanto esa medida sería a lo menos subjetiva.
Por ello esos márgenes que se le ponen al body, éste los “invierte” y lo que hace es desplazar cualquier elemento que esté en su interior esos 30px como en este caso es la capa global.
No es lo mismo ponerle esos márgenes a la capa global, ya que la capa global sí que tiene algo que la contiene (el body) y se le ponemos a esa capa global un margin de 30px auto, y le quitamos al body esos márgenes de 30px, entonces veríamos que queda de la misma manera.
En todo caso lo lógico y correcto es ponerle esos margin a la capa global.
Espero que entre algunas explicaciones sencillas y algunas explicaciones profundas hallamos avanzado algo, con tal de que no nos ahoguemos.
En la hoja de estilo, la posición que tienen algunas capas con respecto a otras muchas veces no es tan relevante, pero si es cierto que hay que llevar un cierto orden, para que al navegador le cueste menos el poder leer los códigos de la hoja de estilo.
Saludos
