Continuamos con el body, hoy reglas horizontales HR, citas BLOCKQUOTE y texto formateado previamente PRE

Imprime desde aquí este post

HR

- Reglas horizontales

Crea divisiones importantes en tu texto añadiendo reglas horizontales, pero evita abusar de ello, este tag no tiene tag de cierre.

 <HR>
 

Este sería el resultado

BLOCKQUOTE

- Citas

Las citas son muy populares en la web y la gente espera que las largas sean manipuladas de forma levemente diferente que un párrafo normal, normalmente compensando los márgenes derecho e izquierdo levemente hacia el centro de la página.

Se crea un margen izquierdo que le da un toque más atractivo a la página.

En la vida diaria llamamos a esto un bloque de cita y el tag que responde a esta descripción es BLOCKQUOTE, una cita se haría de la siguiente manera:

 <BLOCKQUOTE>Texto a citar</BLOCKQUOTE>
 

En el panel de control de tu blog en La Coctelera simplemente debes seleccionar el texto y pulsar el icono rodeado en rojo que es lo mismo que el tag BLOCKQUOTE

Este sería el resultado esceptuando las comillas que puse de fondo y el borde, fíjate sólo en como le aplica márgenes al texto, pero para que veas que también se le puede dar formato con CSS (lo veremos más adelante)

Las citas son muy populares en la web y la gente espera que las largas sean manipuladas de forma levemente diferente que un párrafo normal, normalmente compensando los márgenes derecho e izquierdo levemente hacia el centro de la página. Se crea un margen izquierdo que le da un toque más atractivo a la página.

Así serían las citas anidadas (citas dentro de otras citas):

 <BLOCKQUOTE>Texto a citar
 <BLOCKQUOTE>Texto a citar</BLOCKQUOTE>
 Texto a citar</BLOCKQUOTE>
 

El resultado sería este:

Las citas son muy populares en la web y la gente espera que las largas sean manipuladas de forma levemente diferente que un párrafo normal, normalmente compensando los márgenes derecho e izquierdo levemente hacia el centro de la página. Se crea un margen izquierdo que le da un toque más atractivo a la página.

Las citas son muy populares en la web y la gente espera que las largas sean manipuladas de forma levemente diferente que un párrafo normal, normalmente compensando los márgenes derecho e izquierdo levemente hacia el centro de la página. Se crea un margen izquierdo que le da un toque más atractivo a la página.

Las citas son muy populares en la web y la gente espera que las largas sean manipuladas de forma levemente diferente que un párrafo normal, normalmente compensando los márgenes derecho e izquierdo levemente hacia el centro de la página. Se crea un margen izquierdo que le da un toque más atractivo a la página.

PRE

- Texto formateado previamente

A veces, cuando escibas poesía o arregles el texto en un formato en particular, querrás controlar la posición exacta de cada letra en la página.
Normalmente, un navegador de HTML eliminará todo espacio extra o sltos de línea que hayas dejado para facilitar la lectura. Sin embargo, cuando quieras preformatear texto el tag PRE te será muy útil.

Por ejemplo, imagínate que quieres crear un texto en forma de triángulo, pues simplemente lo escribirías dándole forma triangular con espacios y saltos de línea y luego lo envolverías con el tag PRE, si no lo hicieras el HTML se comería los espacios y los saltos de línea aunque los hicieras.

Triángulos

Los triángulos se ordenan
de nuevo silenciosamente
robando a través de
las más profundas
sombras la luz se
desvanece en
la oscuridad
tu y noso-
tros para
ti.

Aquí le he dado espacios y saltos de línea al texto, pero al no estar envueltos en PRE, el HTML lo alinea a la izquierda quitándole el formato previamente dado, en cambio si lo envolvemos con PRE el resultado sería este:

         Triángulos
 
 Los triángulos se  ordenan
  de nuevo silenciosamente
   robando  a  través  de
    las   más  profundas
     sombras la  luz se
      desvanece  en la 
       oscuridad tu y 
        nosotros pa-
           ra ti.
 

Referencia bibliográfica:
DESCUBRE HTML 4 de: PHILLIPS, ANNE
Editorial: PRENTICE HALL
ISBN: 978-84-8322-132-7
NIVEL USUARIO: Intermedio
Un libro que no me canso de leer y de aprender de él

servido por Sir Refusenik 4 comentarios compártelo

Frikis del HTML T-shirt 1

Navegando via Ropa Friki he encontrado esta camiseta, y por supuesto estando en pleno curso de HTML y empezando el body no podía dejar de publicarla, otra de mis frikadas HTML, lo siento no lo puedo evitar (me encantan)

servido por Sir Refusenik sin comentarios compártelo

Body, fondo y enlaces

¿A quedado claro el head?

Pues espero que si porque vamos a empezar con el body

Cambiaremos el fondo y varios elementos esenciales en el blog

 <body bgcolor="white" text="black">
 

 <body background="Aquí debes poner la url de la imagen">
 

Si la imagen no es del mismo tamaño que la pantalla, esta se repetirá hasta llenarla, esto se puede evitar y modificar gracias a la sentencia de repetición REPEAT en las CSS que veremos más adelante.

 <body bgcolor="white" text="black" link="blue" alink="red" vlink="purple">
 

- bgcolor: Establece el color de fondo del blog (en este caso blanco)
- text: Establece el color del texto ordinario (no enlazado) (en este caso negro)
- link: Establece el color de los enlaces ordinarios osea antes de clicar en ellos (en este caso azul)
- alink: Establece el color de los enlaces activos, en el proceso de conexión, osea cuando clicas en ellos (en este caso rojo)
- vlink: Establece el color de los enlaces visitados (enlaces que han sido seguidos o clicados) (en este caso púrpura)

Tabla de colores RGB Definición de Color RGB en la Wikipedia

Avisos para los comentarios:
Todo comentario con lenguaje inapropiado, obsceno, que utilice palabras abusivas o que ofenda al administrador de este blog o a otras personas no será bienvenido, así que por favor, enriquece este post enviando tus comentarios, pero no hagas spam e intenta que sean relevantes con el contenido del mismo, si no es así seran eliminados

servido por Sir Refusenik 9 comentarios compártelo

Resumen 1 del curso de HTML

Tags utilizados hasta el momento

Post META (1/2)
Post META (2/2)

servido por Sir Refusenik 2 comentarios compártelo

¿Cómo comentar el código HTML?

Imprime desde aquí este post

Pero cuidado, no vayas a confundir, con dejar un comentario en el HTML me refiero a escribir una breve descripción de lo que hace cada línea, para que al leer el código sea mucho más comprensible.

 <!-- Esto es un comentario -->
 

Ejemplo nº3

Haz clic aquí para ver el resultado de lo estudiado hasta ahora y en este otro para verlo comentado, si te fijas al cargar los ejemplos verás lo mismo osea el title en la barra de título de la ventana y en la pestaña si es que usas navegador con pestañas y el fondo del blog, ¿porqué?, porque está enlazada la CSS The Refuseniks y por lo tanto le aplica el fondo, pero así no hay diferencias entre los dos ejemplos, para verlas debes hacer clic derecho en la ventana de cada uno, verás que uno está comentado y el otro no.

Si te fijas, verás que he dejado el Javascript fuera del ejemplo, he preferido dejarlo para más adelante.

Bueno y aquí doy por terminado el head o cabecera

Referencia bibliográfica:
DESCUBRE HTML 4 de: PHILLIPS, ANNE
Editorial: PRENTICE HALL
ISBN: 978-84-8322-132-7
NIVEL USUARIO: Intermedio
Un libro que no me canso de leer y de aprender de él

servido por Sir Refusenik 4 comentarios compártelo

Frikis del HTML T-shirt

Via | Nudonation

servido por Sir Refusenik sin comentarios compártelo

Enlaza Javascript desde tu blog

Imprime desde aquí este post

Incluye

También puedes enlazar Javascripts, simplemente debes tener el Javascript Definición de Javascript en la Wikipedia que quieras enlazar y subirlo a tu servidor, (en La Coctelera subirlo igual que una imagen), luego en el HTML dentro del <head>, solo debes copiar esta línea cambiando la ruta y el nombre por tu archivo Javascript, en La Coctelera deberías ponerlo en el Sobre Mi

 <script type="text/javascript" src="/myfiles/davitociber/refuseniks.js">

Referencia bibliográfica:
DESCUBRE HTML 4 de: PHILLIPS, ANNE
Editorial: PRENTICE HALL
ISBN: 978-84-8322-132-7
NIVEL USUARIO: Intermedio
Un libro que no me canso de leer y de aprender de él

servido por Sir Refusenik sin comentarios compártelo

Enlaza páginas desde tu blog incluyendo tu CSS

Imprime desde aquí este post

Utiliza el tag <link>, dentro del bloque <head>, para definir relaciones entre páginas, incluyendo la localización de la página de inicio, la anterior, la posterior incluso hojas de estilo.

Este tipo de enlace utiliza los atributos rel y rev

El atributo rel indica una relación entre el documento donde está el enlace y el documento enlazado. El atributo rev describe la relación inversa, entre el documento actual y documento que lo enlaza.

 <link href="index.html" rel="home">
 

 <link href="anterior.html" rel="prev">
 

 <link href="siguiente.html" rel="next">
 

Siendo index.html tu página de inicio, anterior.html la página previa y siguiente.html la página posterior.

Incluye tu

 <link href="/myfiles/davitociber/refuseniks.css" rel="stylesheet" type="text/css"> 
 

Siendo /myfiles/davitociber/refuseniks.css la ruta y el nombre de tu hoja de estilos.

Otra manera de enlazar tu CSS sería, utilizando CSS dentro de tu HTML al principio del Sobre mi (para La Coctelera) de la siguiente manera:

 <style type="text/css">
 @import url("/myfiles/davitociber/refuseniks.css");
 </style>
 

Siendo <style type="text/css"> el tag de apertura para incluir estilos CSS dentro del HTML y </style> el tag de cierre, entre estos dos tags iría el CSS, aunque de todos modos aconsejo que de esta manera sólo se utilice si es preciso para enlazar la CSS, siempre es más legible, limpio y estructurado un HTML con la CSS importada, que con la CSS incluida en él.

En este caso simplemente deberías substituir /myfiles/davitociber/refuseniks.css por la ruta y el nombre de tu hoja de estilos.

Referencia blográfica:
VAGABUNDIA de: JMiur
Plataforma: BLOGGER
Buenos Aires, Argentina

Referencia bibliográfica:
DESCUBRE HTML 4 de: PHILLIPS, ANNE
Editorial: PRENTICE HALL
ISBN: 978-84-8322-132-7
NIVEL USUARIO: Intermedio
Un libro que no me canso de leer y de aprender de él

servido por Sir Refusenik sin comentarios compártelo