19/09/2019, 10:09:57 pm *
Bienvenido(a), Visitante. Por favor, ingresa o regístrate.
¿Perdiste tu email de activación?

Ingresar con nombre de usuario, contraseña y duración de la sesión
Noticias: Homenaje a aladan
 
 
Páginas: [1] 2   Ir Abajo
  Imprimir  
Autor Tema: Café informal de HTML  (Leído 5014 veces)
0 Usuarios y 1 Visitante están viendo este tema.
argentinator
Consultar la FIRMAPEDIA __________________________________________________________________________________________________________________
Administrador
Pleno*
*****

Karma: +0/-0
Desconectado Desconectado

Sexo: Masculino
Argentina Argentina

Mensajes: 7.275

Vean mis posts activos en mi página personal


Ver Perfil WWW
« : 29/04/2013, 11:09:06 pm »

Café informal de HTML

Abro aquí una conversación sobre HTML.

Dado que no estoy en condiciones de enseñar este lenguaje, pero que aún asi lo entiendo, y estoy buscando aprenderlo tanto como pueda, me parece que lo más adecuado es que plantee una charla así, de modo informal.

Lo que voy a hacer es ir posteando cosas de HTML que me llamen la atención, o diversos experimentos o problemas a resolver.

Y ya que esto queda abierto, si alguno se quiere inmiscuir y sugerir cosas para hacer o aprender, las vamos improvisando o aprendiendo de camino.



El HTML es un lenguaje informático usado para publicar páginas en Internet.
Es un lenguaje basado en "marcado" o "etiquetas".
Una etiqueta HTML es en general un par de etiquetas, una para "abrir" y otra para "cerrar", que encierra información entre ambas.
Cada etiqueta sirve para dar un formato o realizar cierta acción, o intercalar información de algún tipo.


Una propiedad importante de las etiquetas es que algunas de ellas se pueden anidar (nesting), permitiendo la combinación de varios formatos diferentes.

En vistas a la programación orientada a objetos aplicada a las páginas web, diremos que cada par de etiquetas y el contenido guardado entre ellas, constituye un objeto HTML.

Esos objetos se pueden manipular con otros lenguajes usados en combinación con HTML, que son CSS, jQuery, JavaScript (que son básicos y accesibles en forma natural), o bien PHP, Ruby, Perl, AJAX, etc. (que requieren instalación de software en el servidor en que se aloja la página web).

Las "etiquetas" se llaman también "balizas", y en inglés "tags".
El nombre del objeto se coloca encerrado entre ángulos, y para indicar el cierre del "tag" se repite lo mismo, pero anteponiendo una barra "/" al nombre del objeto.
Por ejemplo, el objeto "body", que aparece en todas las páginas HTML, se usaría así:


<body>
    (Información encerrada entre los tags de: body)...
</body>


El "tag" de apertura es aquí <body>, y el de cierre es </body>.

Ellos se comportan como si fueran un par de "paréntesis" entre los cuales ha de colocarse alguna información.

(Esta sección del post se ha sido actualizado: 30/abril/2013).



 :sorprendido: En todo contenido de Internet es de esperar que los "tags" de HTML reaccionen.

Dado que estamos discutiendo HTML, y que todo el tiempo estaremos refiriéndonos y nombrado a los tags de HTML, podemos obtener comportamientos imprevistos o indeseados.
Inclusive, si a la fecha hay un "tag" que no reacciona indeseablemente, puede que lo haga en el futuro.
No podemos estar seguros

Entonces, cada vez que nombremos un "tag" específico, como <body>, conviene que lo "neutralicemos" para que no reaccione.

En el foro esto se hace encerrándo el "tag" entre los delimitadores [nobbc][/nobbc].
Por ejemplo, el código anterior yo lo he escrito así:


[nobbc]
<body>
    (Información encerrada entre los tags de: body)...
</body>
 
[/nobbc]

Otra razón importante para usar [nobbc][/nobbc] es que el foro ¡elimina los espacios en blanco a principio de línea!

Esto impide que mostremos correctamente el indentado de los programas.
Sin embargo, los espacios en blanco no son quitados dentro de los delimitadores [nobbc][/nobbc].

Así que, en las futuras discusiones:

¡Pongamos los "tags" de HTML encerrados entre delimitadores [nobbc][/nobbc]!



Spoiler: Algunas generalidades de HTML (click para mostrar u ocultar)

Índice

1. Estructura básica de una página HTML y etiquetas principales.

2. Los comentarios en HTML

3. ¿Cómo puedo crear páginas HTML?

4. HTML y los espacios en blanco y los saltos de línea.

5. Estilo de redacción de páginas HTML
En línea

argentinator
Consultar la FIRMAPEDIA __________________________________________________________________________________________________________________
Administrador
Pleno*
*****

Karma: +0/-0
Desconectado Desconectado

Sexo: Masculino
Argentina Argentina

Mensajes: 7.275

Vean mis posts activos en mi página personal


Ver Perfil WWW
« Respuesta #1 : 29/04/2013, 11:42:22 pm »

1. Estructura básica de una página HTML y etiquetas principales.


Las etiquetas básicas de HTML son las siguientes:


<html>    </html>

<head>    </head>

<body>   </body>

<title>    </title>
 
<style>   </style>

<script>  </script>

<div>      </div>

<p>        </p>

<span>   </span>

<a>        </a>

<br>


Las etiquetas "html" se usan para colocar todo el contenido de la páginas web en su interior.
Es decir, nuestro archivo HTML comienza con <html>, luego sigue todo el contenido de nuestra página, y finaliza con </html>.

Si bien ése es el formato correcto, los navegadores web de todos modos suelen interpretar correctamente una páginas HTML aunque no tenga esas etiquetas colocadas correctamente.

Entre las etiquetas <head> </head> va el encabezado de la página web. Ahí se coloca información general de la página web, cuestiones de formato, y se cargan otras características adicionales. Por ejemplo, se definen allí estilos de formato a usar luego en el contenido propiamente dicho, código de scripts, meta-tags, y algún que otro etcétera.

Entre las etiquetas <body> </body> va el contenido propiamente dicho de nuestra página web.
Allí va toda la información que deseamos mostrar, y se "aplican" los formatos y demás cosas definidas previamente en el encabezado.

Las etiquetas <title>   </title> se colocan en el encabezado para darle un "título" a la página web.
Este título en realidad es lo que aparece en el marco superior de la ventana del navegador, mientras exhibe la página web.

En el encabezado se pueden incluir las etiquetas <style>  </style>, dentro de las cuales se hacen declaraciones  relativas al formato de los objetos HTML que aparecen luego en la página web.
Típicamente va allí una lista de definiciones y configuraciones en lenguaje CSS.

También en el encabezado pueden incluirse las etiquetas <script>   </script>, y en ellas se incluyen porciones de programas que actúan sobre los elementos de la páginas HTML. Dichas acciones se dan típicamente en lenguaje JavaScript, pero puede que haya otras posibilidades.


En el "cuerpo" de la página web pueden ir muchísimas etiquetas HTML, y aquí sólo nombraré las tres más importantes, que están siempre presentes.

Las etiquetas <div>   </div> se usan para delimitar una porción de texto HTML, que queda así conformando un "bloque" indiviso. Los bloques "div" sirven pues para dividir la página HTML en diversos bloques de información, los cuales pueden luego acomodarse de un modo u otro, según la lógica interna que pretendamos darle a nuestra página.

Algo similar ocurre con las etiquetas <p>   </p>, que denotan también bloques de información, llamados "párrafos".

La diferencia entre "div" y "p" es que "div" está pensado como un "contenedor" que puede tener cualquier tipo de información, incluyendo otros contenedores o párrafos, mientras que "p" se usa sólo para "párrafos", y no puede "anidar" otros bloques de elementos (es decir, otros párrafos o contenedores).

Además, hay diferencias en el formato. Con "p" se deja un cierto espacio (separación entre párrafos) por encima y por debajo del bloque indicado por <p> </p>, mientras que con "div" esto no ocurre.

Las etiquetas <span>   </span> se utilizan sólo para encerrar pequeñas porciones de información a las que se les quiere dar un formato diferente al texto que le rodea.



Lo importante de los elementos HTML es que son objetos que pueden pensarse como una unidad que interactúa con otras unidades dentro de la página, y entonces puede que queramos especificar la manera en que esta interacción se produce, en vistas a cómo se reparten, y en qué orden, el espacio disponible en la página web.

Finalmente, comentemos la muy importante etiqueta <a>  </a>, que es la esencia misma de Internet.

Se utiliza para indicar enlaces a otras páginas web.

Esto es lo que permite considerar a las páginas HTML como hipertexto.
Es el mecanismo por el cual podemos acceder a la información de varias páginas web que están interconectadas entre sí, y que hace tan provechosa la experiencia en Internet.

Finalmente, el tag <br> se usa para indicar un salto de línea,
es decir, que allí queremos que el navegador dé inicio a un nuevo párrafo.
No tiene "tag de cierre" </br>, sin embargo es muy probable que los navegadores interpreten una aparición de </br> de la misma manera que si fuera una aparición de <br>.




Una página web típica tendrá esta estructura en HTML:


<html>
  <head>

     <title>Hola HTML</title> 

      <style>           
             
      </style>

      <script>
 
      </script>


   </head>


   <body>

          (Contenido de la página).

          <a href="http://rinconmatematico.com">Página del rincón</a>

   </body>   

</html>
En línea

argentinator
Consultar la FIRMAPEDIA __________________________________________________________________________________________________________________
Administrador
Pleno*
*****

Karma: +0/-0
Desconectado Desconectado

Sexo: Masculino
Argentina Argentina

Mensajes: 7.275

Vean mis posts activos en mi página personal


Ver Perfil WWW
« Respuesta #2 : 30/04/2013, 12:15:44 am »

2. Los comentarios en HTML

Si deseamos poner comentarios en nuestro archivo HTML que sólo sean visibles para el programador,
pero que no puedan visualizarse en forma normal como la información que muestran los navegadores web,
debemos encerrar dicha información entre <!--   y   -->, así:


<!--   Aquí comienza la zona de comentarios.
Los comentarios pueden seguir
en varias líneas de texto.
Hasta llegar a la última.
Aquí se cierra el comentario:    -->


El navegador web simplemente ignorará las porciones de texto encerradas entre <!--   y  -->,
y no mostrará nada de ello al internauta que se tope con nuestra página web.



Una línea típica que aparece en las páginas web es ésta:

<!DOCTYPE HTML>

Esa línea aparece al principio de un archivo HTML, antes de la etiqueta <html>,
y lo que hace es informar al navegador de que el contenido que viene debajo está escrito en lenguaje HMTL.
Esto sirve para prevenir la posibilidad de que se usen otros posibles lenguajes para formatear contenido en Internet.
Más aún, sirve también para informar acerca de la versión de HTML que el archivo utiliza, y así los navegadores pueden tomar decisiones en aras de la mayor compatibilidad posible entre versiones.

En línea

argentinator
Consultar la FIRMAPEDIA __________________________________________________________________________________________________________________
Administrador
Pleno*
*****

Karma: +0/-0
Desconectado Desconectado

Sexo: Masculino
Argentina Argentina

Mensajes: 7.275

Vean mis posts activos en mi página personal


Ver Perfil WWW
« Respuesta #3 : 30/04/2013, 12:26:33 am »

3. ¿Cómo puedo crear páginas HTML?

Lo bueno de HTML es que podemos crear páginas en dicho lenguaje sin necesidad de bajarnos ningún programa especial.

Necesitamos un editor de texto (como el Bloc de Notas de Windows, o como el PSPad, que les recomiendo descargar), que usaremos para editar nuestras páginas HTML,
y un navegador web (Internet Explorer, Firefox, Chrome, etc.) para visualizar nuestro archivo HTML con toda la información y efectos visuales que deseábamos exhibir.

Así que, abrimos nuestro editor de texto, y escribimos por ejemplo lo siguiente:


<!DOCTYPE HTML>
<html>

  <head>
     <title>Hola Mundo en HTML</title> 
   </head>

   <body>
      <div>
           ¡¡¡Hola Mundo!!!
      </div>
   </body>
   
</html>



Guardamos el archivo poniéndole el nombre HolaMundo.HTML.

Tengamos cuidado de que el editor de texto no nos ponga una extensión .TXT, y asegurémonos de que la extensión es .HMTL.

Luego, vamos a buscar nuestro archivo recién creado en el explorador de carpetas de Windows, y lo abrimos.
Haciendo doble clic en él, nuestro navegador predeterminado lo abrirá automáticamente, y mostrará una página web en blanco, con el mensaje:

¡¡¡Hola Mundo!!!

Además, si nos fijamos en la pestaña superior del navegador, aparecerá el título "Hola Mundo en HTML".



Esos son los sencillos pasos con los que podremos crear siempre nuestras páginas HTML y verlas en el navegador.

En línea

feriva
Pleno*
*****

Karma: +1/-0
Desconectado Desconectado

Sexo: Masculino
España España

Mensajes: 8.364



Ver Perfil
« Respuesta #4 : 30/04/2013, 06:04:20 am »

Hola, Argentinator.

 Se puede añadir a las etiquetas principales la etiqueta < br> y la de cierre </br>. Lo que hace es separar párrafos al igual que <p> </p> pero, a diferencia de ésta, no cancela estilos.

 Es decir, si ponemos un texto entre <p> y</p>, precedido de un “span style” en el que se defina tamaño, color, etc, para el texto, al aparecer la etiqueta de cierre </p> aparece tambien automáticamente una etiqueta </span> sin que nosotros la pongamos (al menos era así en el HTML antiguo, no sé si HTML5 funciona igual porque ya hace mucho tiempo que casi no uso HTML). Creo que también pasa lo mismo con “font”. En cambio, si usamos < br>, después de la etiqueta de cierre </br> no se cancelan los estilos.
 No obstante, hay que decir que en algunos editores de HTML que utilizan algunas páginas de usuarios no funciona la etiqueta < br>; esto no sé por qué es, puede que se deba a editores antiguos. Pero el editor que usan la mayoría de las webs y los correros, hoy en día, suele ser TinyMCE WYSIWYG, que creo que es la versión nueva de otro “Tiny” maś antiguo que era el que daba ese problema.

 En cuanto a la etiqueta “a”, creo que siempre se utiliza “a href”, suelta no sé si se usa para algo, aunque puede que tenga algún uso poco conocido de forma aislada, no lo puede asegurar; sí que tiene la peculiaridad de que el cierre es solamente < /a>

Ahora bien (que se me había olvidado) si utilizamos un bloque < div> para definir estilos y demás, en vez de span, éste mantiene todo lo definido hasta que aparece la etiqueta < /div >; lo que ocurre es que en esos mismos editores que no admiten < br >, y que se usan en algunas páginas, tampoco suelen admitir < div>, que es una etiqueta preferible a <span>, ya que también permite niveles de profundidad para poner capas de distintas maneras; por ejemplo, podemos insertar un vídeo o una secuencia animada detrás del texto a modo de background, y también hacer que el scroll afecte sólo al texto añadiendo la instrucción "fixed"

Saludos.
En línea

argentinator
Consultar la FIRMAPEDIA __________________________________________________________________________________________________________________
Administrador
Pleno*
*****

Karma: +0/-0
Desconectado Desconectado

Sexo: Masculino
Argentina Argentina

Mensajes: 7.275

Vean mis posts activos en mi página personal


Ver Perfil WWW
« Respuesta #5 : 30/04/2013, 10:40:30 am »

Hola feriva.

No he visto que <br> tenga una etiqueta de cierre </br>.

Es una de las etiquetas que no tiene "cierre".
Sin embargo, al probar usar </br> en los navegadores que tengo (Chrome, Firefox, IExplorer), dicha etiqueta funciona tal como <br>, produciendo un salto de línea (o fin de párrafo, como prefieras).

Sin embargo no estoy seguro de si esto tiene que ver con versiones antiguas de HTML, o si se busca compatibilidad con otros lenguajes que andan por ahí, que puedan ser parecidos a HTML o relacionados,
o si simplemente los navegadores consideran que se trata de un posible error del programador y lo corrigen automáticamente.

¿Tenés idea?

Si no, habrá que buscar información más técnica, como en el estándar HTML, que creo haber visto por ahí.



Cada aparición de <br> sirve para indicar un final de párrafo.

Lo que ocurre es esto: Si en HTML ponemos "a mano" texto en distintas líneas en el editor de texto, no las considera marcas de fin de párrafo, sino que las toma como espacios  en blanco.

El final de un párrafo tiene que indicarse en forma explícita con <br>.

Otro modo de asegurar una separación de "párrafo" es encerrar todo un bloque de información entre las etiquetas <p> </p>.

____________

En cuanto a lo que decís de "div" y "span", están lejos de ser parecidas.

"div" se usa para crear "contenedores" (o "bloques") de información, que puede ser de cualquier tipo, y contener en su interior otros subcontenedores "div".

En cambio "span" sólo se usa para indicar que una pequeña porción de información va a tener un formato distinto que el flujo principal de datos...

Por ejemplo:


<div>
    Hola mundo <span style="color:red">cruel</span> e inhumano.

    He aquí Don Quijote bien dispuesto.
</div>



Genera el siguiente resultado:


Hola mundo cruel e inhumano. He aquí Don Quijote bien dispuesto.


Ahí "span" sólo se usó para cambiar el formato de la palabra "cruel".

(De paso ilustré el hecho de que HTML ignora los saltos de línea, y que pone todo el texto a continuación).

En cambio "div" indica que todo el texto puesto ahí está contenido en un "bloque" o "contenedor".

Después intentaré ilustrar mejor esto de los contenedores...



En cuanto a las etiquetas "a", tienen otros usos aparte del clásico "href".
Por eso la he dejado así, suelta.

En línea

feriva
Pleno*
*****

Karma: +1/-0
Desconectado Desconectado

Sexo: Masculino
España España

Mensajes: 8.364



Ver Perfil
« Respuesta #6 : 30/04/2013, 11:29:07 am »

Hola feriva.

No he visto que <br> tenga una etiqueta de cierre </br>.




Tienes razón, funciona sin cierre, pero algunos editores al final de un br te ponen una etiqueta con la barra detrás <br /> (en ésos que no funciona el br, por ejemplo) y lo hace  automáticamente; pero no sé más, yo conozco estas cosas de usarlas pero intuitivamente, viendo cómo me responden. En las páinas web que se hace uno como index para subirlas a un sitio no pasa eso, sólo pasa con algunos editores. Lo que tiene br, además de esas diferencias con <p>, es que la separación deja un espacio simple y < p > deja doble o triple espacio, no sé, pero demasiado para algunas cosas.

 Saludos.
En línea

argentinator
Consultar la FIRMAPEDIA __________________________________________________________________________________________________________________
Administrador
Pleno*
*****

Karma: +0/-0
Desconectado Desconectado

Sexo: Masculino
Argentina Argentina

Mensajes: 7.275

Vean mis posts activos en mi página personal


Ver Perfil WWW
« Respuesta #7 : 30/04/2013, 12:36:11 pm »

Es cierto que <p> </p> deja mucho espaciado de líneas.
Esto seguramente se puede regular con el estilo, y después lo voy a buscar bien.

He modificado el post de presentación,
explicando cómo llevar correctamente la discusión de HTML.

El problema es que el foro reacciona o reaccionará a algunas etiquetas HTML, causando que algunas no se vean bien, o que obtengamos errores al postear.

Por ejemplo, veo que te viste obligado a agregar un "espacio en blanco" como en < br> o en < div >, etc.

Yo creo que hay que evitar esos espacios en blanco, porque no muestran las etiquetas en forma correcta.

______________

Para que las etiquetas HTML se vean correctas, y a la vez no "reaccionen" como código HTML,
se deben colocar entre los delimitadores [nobbc][/nobbc].

Por ejemplo:

[nobbc]<br>[/nobbc] produce <br>.

[nobbc]<div>[/nobbc] produce <div>.

Ecétera.
En línea

feriva
Pleno*
*****

Karma: +1/-0
Desconectado Desconectado

Sexo: Masculino
España España

Mensajes: 8.364



Ver Perfil
« Respuesta #8 : 30/04/2013, 02:05:03 pm »



Por ejemplo, veo que te viste obligado a agregar un "espacio en blanco" como en < br> o en < div >, etc.

Yo creo que hay que evitar esos espacios en blanco, porque no muestran las etiquetas en forma correcta.

______________

Para que las etiquetas HTML se vean correctas, y a la vez no "reaccionen" como código HTML,
se deben colocar entre los delimitadores [nobbc][/nobbc].

Por ejemplo:

[nobbc]<br>[/nobbc] produce <br>.

[nobbc]<div>[/nobbc] produce <div>.

Ecétera.

Si, me has pillado haciendo el chapuzas :cara_de_queso: (he visto la etiqueta que usabas al editar, pero por vaguería -y porque el servidor se corta mucho ahora- lo he hecho en plan rápido.

Saludos.
En línea

argentinator
Consultar la FIRMAPEDIA __________________________________________________________________________________________________________________
Administrador
Pleno*
*****

Karma: +0/-0
Desconectado Desconectado

Sexo: Masculino
Argentina Argentina

Mensajes: 7.275

Vean mis posts activos en mi página personal


Ver Perfil WWW
« Respuesta #9 : 30/04/2013, 02:32:48 pm »

4. HTML y los espacios en blanco y los saltos de línea.

Si intentamos escribir contenido en una página HTML, veremos que el navegador ignora todos los espacios en blanco extra entre palabras, y también ignora los saltos de línea. A lo sumo, considera los saltos de línea como si fueran otros espacios en blanco.

Esto está vinculado al hecho de que los espacios entre palabras y los saltos de línea entre párrafos se consideran parte del "formato de visualización" de una página web, y por lo tanto tienen que indicarse en forma explícita, como se pueda.

Por ejemplo, si nuestro archivo fuente HTML tiene esto:


<html>
<body>
    
     Experimentando con espacios en blanco.


  Aquí hemos puesto un salto de línea, que no se verá como tal en el navegador.

  Aquí ponemos          más                 espacios               inútiles.

          Finalmente veamos cómo interpreta HTML un salto de línea: 0123456789
xxxxxxxxxxxx

   Después del "9" hay un espacio en blanco.






                   No logro poner saltos de línea para iniciar un nuevo párrafo, por más líneas de separación que ponga.


</body>
</html>  


El resultado que veremos en el navegador es esto:



Experimentando con espacios en blanco. Aquí hemos puesto un salto de línea, que no se verá como tal en el navegador. Aquí ponemos más espacios inútiles. Finalmente veamos cómo interpreta HTML un salto de línea: 0123456789 xxxxxxxxxxxx Después del "9" hay un espacio en blanco. No logro poner saltos de línea para iniciar un nuevo párrafo, por más líneas de separación que ponga.



Es por esto que los saltos de línea tendremos que colocarlos manualmente, en forma explícita, con algún "tag" de HTML.

El "tag" que hace esto es <br>.

Por ejemplo:


<html>
<body>
    
     Experimentando con saltos de línea.

<br>

  Aquí hemos puesto un salto de línea con el tag br, y ahora sí que se va a ver bien.

       <br>
  Aquí ponemos          más    saltos de línea, a ver si funciona.
  <br> <br><br>
 Aunque los hemos puesto uno a continuación del otro en una misma línea,
vemos que cada tag br determina una nueva línea en blanco.

<br>
         Veamos lo que ocurre si ponemos todo en una sola línea separado con tags br:

<br>0: un tag = sólo un salo de línea, <br> <br> 1: dos tags = un salto de línea y luego 1 línea en blanco <br> <br> <br> 2: tres tags = un salto de línea y luego 2 líneas en blanco. <br> <br> <br> <br>

</body>
</html>  




Nos mostrará el siguiente resultado:


Experimentando con saltos de línea.
Aquí hemos puesto un salto de línea con el tag br, y ahora sí que se va a ver bien.
Aquí ponemos más saltos de línea, a ver si funciona.


Aunque los hemos puesto uno a continuación del otro en una misma línea, vemos que cada tag br determina una nueva línea en blanco.
Veamos lo que ocurre si ponemos todo en una sola línea separado con tags br:
0: un tag = sólo un salo de línea,

1: dos tags = un salto de línea y luego 1 línea en blanco


2: tres tags = un salto de línea y luego 2 líneas en blanco.





En línea

argentinator
Consultar la FIRMAPEDIA __________________________________________________________________________________________________________________
Administrador
Pleno*
*****

Karma: +0/-0
Desconectado Desconectado

Sexo: Masculino
Argentina Argentina

Mensajes: 7.275

Vean mis posts activos en mi página personal


Ver Perfil WWW
« Respuesta #10 : 30/04/2013, 05:35:04 pm »

5. Estilo de redacción de páginas HTML

En el post anterior no tuve mejor idea que mostrar ejemplos escritos de manera totalmente antiestética, desprolija.


Primero, hay que notar que a pesar de que lo que escribí es desprolijo y desordenado,
el navegador lo muestra de manera prolija y ordenada, porque el navegador interpreta los tags HTML tal como vienen, y con las convenciones de espacios en blanco explicadas.

No le importa al intérprete de HTML qué criterio estético tengamos nosotros para editar código HTML en bruto.

Entonces aquí conviene que uno se autoimponga reglas de escritura estéticamente agradables, a fin de que el archivo HTML sea lo más legible posible, pues ya sea que nosotros u otros desarrolladores tengan que trabajar con el documento a nivel de diseño.

Para lograr esto no hay muchos misterios.
Lo que suele hacerse es poner varios niveles de "indentación" hacia la derecha, aumentando la cantidad de espacios en blanco dejados, según que el "tag" en consideración esté más anidado que los otros.
Y además, claro está, que todos los objetos que estén en el mismo nivel de anidamiento, tengan una idéntica indentación

Ejemplo:


<html>

  <head>
        <title> Indentación. </title>
  </head> 

   
  <body>
        <div>
              He aquí un nivel de indentación.

              <div>
                      He aquí un nivel de indentación más profundo.
                      <br>
                      En cualquier caso, estos espacios en blanco extra son ignorados por HTML,
                      así que no molestan de ningún modo.
                      <br>
                      Y de paso observar cómo estamos poniendo con prolijidad los saltos de línea br.
              </div>   

        </div>
  </body>

</html>





El resultado que obtengo es el siguiente:


He aquí un nivel de indentación.
He aquí un nivel de indentación más profundo.
En cualquier caso, estos espacios en blanco extra son ignorados por HTML, así que no molestan de ningún modo.
Y de paso observar cómo estamos poniendo con prolijidad los saltos de línea br.


En línea

argentinator
Consultar la FIRMAPEDIA __________________________________________________________________________________________________________________
Administrador
Pleno*
*****

Karma: +0/-0
Desconectado Desconectado

Sexo: Masculino
Argentina Argentina

Mensajes: 7.275

Vean mis posts activos en mi página personal


Ver Perfil WWW
« Respuesta #11 : 30/04/2013, 05:44:01 pm »

Feriva: Agregué el tag <br> a la lista de los más básicos.

Creo que tenés razón en eso.

En línea

feriva
Pleno*
*****

Karma: +1/-0
Desconectado Desconectado

Sexo: Masculino
España España

Mensajes: 8.364



Ver Perfil
« Respuesta #12 : 30/04/2013, 06:35:54 pm »

Feriva: Agregué el tag <br> a la lista de los más básicos.

Creo que tenés razón en eso.



Pues me alegro de que haya sido útil (a ver si sale el mensaje, que antes se ha cortado). Ya he visto lo demás y me parece muy bien explicado.

Saludos.
En línea

feriva
Pleno*
*****

Karma: +1/-0
Desconectado Desconectado

Sexo: Masculino
España España

Mensajes: 8.364



Ver Perfil
« Respuesta #13 : 01/05/2013, 06:29:24 am »

  Hola. Argentinator. He estado buscando algunas etiquetas que yo solía usar y que había olvidado, como ésa que te decía de las capas.

 Por ejemplo, podemos crear una capa en un blque “div” con estos atributos

<div style= "position:fixed; bottom:200px; right:50px; z-index:-1; " id="capa_1">

La  “position” puede ser absoluta, relativa y fijada (basolute, relative, fixed). Las dos primeras harían que la capa se moviese junto al texto al mover la barra lateral para ir viendo la página, pero no sé muy bien la diferencia entre ambas porque yo he usado sobre todo la posición fija; puedes investigarlo y contarnos, por lo que recuerdo tiene que ver con las coordenadas del HTML y los distintos elementos pero en ningún sitio lo explicaban bien; o por lo menos yo no me enteré bien cuando lo miré.

 El caso es que, si no se dice nada, por defecto, todo lo que se ponga en el documento HTML aparece en posición “static”, la normal.

 En ese código que pongo en concreto, la posición viene determinada, por un lado, a partir del bottom, como se puede ver, de la parte de abajo; la imagen, vídeo, texto, tabla o lo que sea, aparecerá 200 pixels por encima de la arista inferior de pantalla; y para determinar la coordenada digamos “x” de la pantalla, a lo ancho de ésta, se usa “rigth”, derecha, aunque también se puede usar “left”; indicando una cantidad de pixels desde la derecha o desde la izquierda (del mismo modo que en vez de “bottom” se puede utilizar “top” y dejar espacio desde la parte superior de la pantalla).

Con el atributo “z-index” se indica la profundidad; o sea, hacia dentro de la pantalla, como si tuviera un eje Z proyectivo que fuera en esa dirección virtual. De esta manera, al darle en ese ejemplo que pongo el valor “-1”. negativo, la imagen queda por debajo del texto y éste se superpone.

Por último, en la etiqueta aparece el atributo “id”, la identidad, el nombre que queramos dar a la capa; podemos crear todas las que se quiera; podríamos poner otra imagen en otro bloque “div” de manera que la nueva imagen se superpusiera tapando el texto en alguna zona; y, bueno, con más instrucciones, pinchando sobre ella, podría desaparecer y tal, pero eso requeriría javascript. También se podría añadir estilos particulares en el bloque “div” de esa capa (si apareciera algún texto) etc.

Estas capas con “identidad” son algo así como los “objetos” de otros lenguajes, tienen un poco su vida propia, sus coordenadas, sus estilos y sus propiedades (siempre que se les indique).

Las bloques “div” que contengan únicamente una capa (que no comprometan estilos y otras cosas) se pueden poner en cualquier parte del “body”, al tener sus propias coordenadas.

No hay que olvidarse, claro, de cerrar cada bloque con un </div> una vez que se ha definido todo lo que queremos, para que sus coordenadas, estilos, etc., no afecte a lo demás.

 Hay mucho más sobre esto que puedes contar, yo te cuento lo poco que sé a través de lo que he usado más.

Aquí subo un archivo con un gif que he tomado de Google; es muy rudimentario porque está hecho deprisa, pero sirve para dar una idea:

http://rinconmatematico.com/foros/index.php?action=dlattach;topic=67703.0;attach=12116

Saludos.

* capas_ejemplo.html (1.07 KB - descargado 126 veces.)
En línea

argentinator
Consultar la FIRMAPEDIA __________________________________________________________________________________________________________________
Administrador
Pleno*
*****

Karma: +0/-0
Desconectado Desconectado

Sexo: Masculino
Argentina Argentina

Mensajes: 7.275

Vean mis posts activos en mi página personal


Ver Perfil WWW
« Respuesta #14 : 01/05/2013, 11:13:54 am »

Gracias Feriva, interesantes aportes.

Habrá que hacer experimentos con las opciones que nombraste.

En cuanto al ejemplo que incluiste, a mí la imagen GIF me aparece abajo a la derecha del texto.
Pero agrandando un poco el Zoom, se nota el efecto de "profundidad", y el texto aparece "detrás" de la imagen, como dijiste.

Por otro lado, tiene errores de sintaxis.

Por ejemplo, todo el contenido (los bloques "div" y el texto) tienen que estar dentro de <body> </body>.
Has dejado cosas afuera de las etiquetas "body".
Además, pusiste dos veces la etiqueta de apertura <body> , sospecho que con la intención de poner el color de fondo celeste grisáceo que le diste a toda la página.

Lo corregí, pero aún así la página luce igual que antes al abrirla en el navegador.

___________

Aunque los navegadores suelen "adivinar" la intención del programador, y corrigen los errores HTML que pudiera haber, me parece importante acostumbrarse a mantener una sintaxis estrictamente correcta, porque esto nos ayudará a tener un control sobre el diseño.

Si no, rápidamente caeremos en un caos.

___________________

También veo que usaste las etiquetas <p> </p>  vacías.
¿Es para aprovechar que ponen separación de párrafos de 2 líneas?

Para separar líneas sin contenido, sería más idóneo usar la etiqueta <br>, que está para cumplir esa función.

En línea

feriva
Pleno*
*****

Karma: +1/-0
Desconectado Desconectado

Sexo: Masculino
España España

Mensajes: 8.364



Ver Perfil
« Respuesta #15 : 01/05/2013, 11:22:21 am »


También veo que usaste las etiquetas <p> </p>  vacías.
¿Es para aprovechar que ponen separación de párrafos de 2 líneas?

Para separar líneas sin contenido, sería más idóneo usar la etiqueta <br>, que está para cumplir esa función.



Hola. Sí, es una forma de dejar dos "br" cuando algún editor no permite el "br"; una mala costumbre mía que proviene precisamente de un blog un poco desfasado en cuanto a estas cosas y que me obligó a aprender a hacer "truquillos" para poder publicar con párrafos.

 Lo del body, en efecto, no hace falta ponerlo al utilizar la etiqueta para dar color al fondo, pero no me he dado cuenta, y lo de pegar párrafos debajo tampoco me di cuenta, corté y pegué por debajo del body.

Saludos.

 
En línea

argentinator
Consultar la FIRMAPEDIA __________________________________________________________________________________________________________________
Administrador
Pleno*
*****

Karma: +0/-0
Desconectado Desconectado

Sexo: Masculino
Argentina Argentina

Mensajes: 7.275

Vean mis posts activos en mi página personal


Ver Perfil WWW
« Respuesta #16 : 01/05/2013, 11:36:43 am »

Encontré que en la versión actual de HTML las "position" admitidas son 5:

static, fixed, absolute, relative, inherit

La última hereda la opción del bloque en el que está contenido, si es que lo hay.

Estoy ensayando los efectos visuales de estas opciones, pero no logro hacerlo en forma clara para que sea vea lo que ocurre.

Voy a tardar un poco armando un ejemplo lindo...

___________

Creo que las 3 opciones básicas son como vos decís: relative, absolute, fixed.

La opción static, que es tomada por defecto, parece funcionar muy similar al modo en que lo hace "relative".

Creo que me doy cuenta dónde está la diferencia entre "static" y "relative", pero se trata de algo más sutil, que ahora no voy a explicar.
En línea

argentinator
Consultar la FIRMAPEDIA __________________________________________________________________________________________________________________
Administrador
Pleno*
*****

Karma: +0/-0
Desconectado Desconectado

Sexo: Masculino
Argentina Argentina

Mensajes: 7.275

Vean mis posts activos en mi página personal


Ver Perfil WWW
« Respuesta #17 : 01/05/2013, 12:38:06 pm »

6.a. Ejemplo de opciones de posicionamiento para bloques div.

Me construí un ejemplo como sigue:

Hice 5 bloques "div", dentro de los cuales he puesto otros 3 subloques "div".

Los 5 bloques "div" no tienen atributos, así que se van a mostrar siguiendo el "flujo del documento", y esto quiere decir que el contenido de cada bloque "div" se posicionará en el orden en que aparecen, de arriba a abajo, como "párrafos".

Ahora bien. En cada uno de esos bloques "div" puse 3 subbloques, con un color de fondo distinto (azul, verde y rojo), con un número, para poder distinguirlos visualmente con claridad.

A cada uno de esos 3 subloques le puse en el estilo la "position", para ver cómo se comporta.

Como hay subbloques que se superponen, lo que hice fue darles anchos y altos distintos para que se distingan en caso de superposición.

También hay superposición de los 5 bloques div principales, así que para lograr visualizarlos les agregué un borde izquierdo incremental.

____________________

http://rinconmatematico.com/foros/index.php?action=dlattach;topic=67703.0;attach=12117
____________________

El 1er bloque, con borde izquierdo de 0 píxeles, contiene 3 subbloques "por default", y esto quiere decir "static".
Se ve que los sub-bloques se "apilan" de arriba a abajo dentro del bloque principal.

Debajo se posiciona en forma inmediata
el 2do bloque, con borde izquierdo de 50 píxeles, contiene 3 subbloques "fixed".
Se ve que los sub-bloques se "superponen" todos respecto la posición en que comienza el bloque principal.

Debajo se posiciona en forma inmediata
el 3er bloque, con borde izquierdo de 100 píxeles, contiene 3 subbloques "static".
Se ve que los sub-bloques se "apilan" de arriba a abajo dentro del bloque principal.

Debajo se posiciona en forma inmediata
el 4to bloque, con borde izquierdo de 150 píxeles, contiene 3 subbloques "relative".
Se ve que los sub-bloques se "apilan" de arriba a abajo dentro del bloque principal.

Debajo se posiciona en forma inmediata
el 5to bloque, con borde izquierdo de 200 píxeles, contiene 3 subbloques "absolute".
Se ve que los sub-bloques se "superponen" todos respecto la posición en que comienza el bloque principal.

______________________


En todos los casos, los "subbloques hijos" se posicionan respecto el punto de inicio del "bloque padre".

Si no hay "bloque div padre", entonces el "padre" es toda la ventana del navegador.
En ese caso, los subbloques fixed y absolute se posicionarían en el extremo superior izquierdo de la ventana.

____________

Como dije antes, la diferencia entre "static" y "relative" es una sutileza de diseño que analizaremos en otro momento.
Así como está el ejemplo que puse, no hay diferencias entre ambos estilos de "posicionamiento de subbloques".

También se ve que el modo en que se posicionan los subbloques "fixed" y "absolute" es el mismo.

La diferencia entre ambos estilos es, como se puede apreciar en el ejemplo, que cuando movemos la barra de scroll de la página, los subbloques que son "fixed" van a conservar siempre la posición original que tenían adjudicada.

Es decir, el navegador les "calcula" una cierta posición, según lo que les tocó en suerte siguiendo el flujo de datos del documento. Pero una vez obtenida dicha posición, se conservará "fija" allí en la ventana del navegador, aún si nos movemos de un lado a otro en el documento.

También observamos que el 3er bloque principial aparentemente ocupa la misma posición que el 2do bloque principal.
En realidad lo que ocurre es que los 3 subbloques fixed del 2do bloque principal, no cuentan como "ocupando espacio", entonces es como si no hubiéramos agregado nada allí, y a los fines del "flujo del documento", es como si estuviera vacío.
Así, cuando viene el 3er bloque principal, se colocaría abajo del 2do..., pero como se interpreta que en el 2do no hay nada, el 3er bloque principal termina ocupando la misma posición en la página que el 2do.

Por esta razón es que el 2do bloque queda "como flotando" en la misma posición que el 3ro.
Así, los subbloques "fixed" no se agregan al flujo natural de la página, y los subbloques "static" quedan debajo de los "default" (que estaban en el 2do bloque principal).


* 20130501-argentinator-bloquesdiv.html (2.63 KB - descargado 122 veces.)
En línea

argentinator
Consultar la FIRMAPEDIA __________________________________________________________________________________________________________________
Administrador
Pleno*
*****

Karma: +0/-0
Desconectado Desconectado

Sexo: Masculino
Argentina Argentina

Mensajes: 7.275

Vean mis posts activos en mi página personal


Ver Perfil WWW
« Respuesta #18 : 01/05/2013, 12:58:05 pm »

(Hice unas correcciones en la explicación del ejemplo anterior: el 2do bloque contiene los "fixed" y le sigue el 3ro con los "static").

En línea

argentinator
Consultar la FIRMAPEDIA __________________________________________________________________________________________________________________
Administrador
Pleno*
*****

Karma: +0/-0
Desconectado Desconectado

Sexo: Masculino
Argentina Argentina

Mensajes: 7.275

Vean mis posts activos en mi página personal


Ver Perfil WWW
« Respuesta #19 : 01/05/2013, 01:22:02 pm »

6.b. Ejemplo de opciones de posicionamiento para bloques div (continuación).

Acá agrego el mismo ejemplo, aunque con una pequeña modificación, en que le puse un título a cada bloque principal, para que se entienda un poco mejor...

http://rinconmatematico.com/foros/index.php?action=dlattach;topic=67703.0;attach=12118

* 20130501-bis-argentinator-bloquesdiv.html (2.81 KB - descargado 117 veces.)
En línea

Páginas: [1] 2   Ir Arriba
  Imprimir  
 
Ir a:  

Impulsado por MySQL Impulsado por PHP Powered by SMF 1.1.4 | SMF © 2006, Simple Machines LLC XHTML 1.0 válido! CSS válido!