Introducción a XHTML (N°17)

Publicado el 28/oct/2010 por y guardado en la categoría: Internet, Programacion.

Haremos una referencia a cada uno de los elementos de bloque comenzando por la etiqueta párrafo; “<p>”, El cual nos sirve para delimitar un párrafo, por lo tanto la usamos para separar estos en un texto con las etiquetas de abertura y cierre de párrafo que son: <p> y </p> respectivamente.

ejemplo81 150x150 Introducción a XHTML (N°17)ejemplo92 150x150 Introducción a XHTML (N°17)

En la imagen izquierda podemos observar el código del documento HTML  en el cual se esta delimitando con estas etiquetas 2 párrafos diferentes sin importar que en el formateado estén los dos juntos sin espaciado ya que lo importante es la ubicación de las etiquetas que interpreta el navegador web como se observa en la imagen de la derecha.

Introducción a XHTML (N°16)

Publicado el 28/oct/2010 por y guardado en la categoría: Internet, Programacion.

Continuando con los elementos fundamentales que podemos encontrar en un documento HTML, mas concretamente dentro del cuerpo; <body>, Empezaremos a ver los “Marcadores de párrafo”, También llamados “elementos de bloque”, Y Que reciben este nombre justamente porque se aplican a los párrafos completos.

Estos cumplen una función muy similar a lo que hacen los procesadores de texto y por esta razón podremos observar varias etiquetas que delimitan y al mismo tiempo formatean párrafos de texto las cuales podemos observar en la imagen.

ejemplo7 Introducción a XHTML (N°16)

Cada uno de estos elementos bloque da lugar a una ruptura de línea y a un relleno de espacio después de que se cierran las etiquetas y por lo tanto estos elementos bloque no podemos usarlos para trabajar con partes dentro de párrafos o estilos inline, Por lo tanto se trata de etiquetas para usar solo con párrafos completos.

Introducción a XHTML (N°15)

Publicado el 27/oct/2010 por y guardado en la categoría: Internet, Programacion.

Afortunadamente esta aplicación de los estilos a los documentos HTML nos permite también aplicar hojas de estilo externas que de este modo podemos aplicar a múltiples documentos y simplemente editando y modificando esa hoja de estilo externa ya se modificarían todos los documentos en los que se estuviera aplicando.

En el ejemplo de la siguiente imagen vemos un trozo de código en el cual definimos en el <head>

Definimos un archivo que se llama “estilo-sitio.css”, Como la hoja de estilos externa para el documento HTML, Lo que hará el documento HTML es buscar esta hoja de estilos y aplicar lo que ella contienen al documento.

ejemplo5 150x150 Introducción a XHTML (N°15)ejemplo6 150x150 Introducción a XHTML (N°15)

Esta hoja de estilo puede ser simplemente el archivo .css conteniendo en su interior la definición de los atributos como observábamos anteriormente en la etiqueta  <style> en el documento anterior como podemos observar en la imagen derecha.

Introducción a XHTML (N°14)

Publicado el 27/oct/2010 por y guardado en la categoría: Internet, Programacion.

Podemos tener en cuenta que teniendo digamos un documento grande (Allí  lo interesante de este tipo de estilos), Imaginemos que tengamos que aplicarlo a 100 partes del documento manualmente. En vez de esto contamos con la posibilidad de simplemente cambiando los atributos del estilo en el área del <head>, Inmediatamente se le aplicaría a todos los textos que estuvieran incluidos dentro de la etiqueta  <span> que indica donde se debe aplicar el estilo.

ejemplo3 150x150 Introducción a XHTML (N°14)ejemplo4 150x150 Introducción a XHTML (N°14)

Los estilos también podemos aplicarlos directamente a muchas etiquetas HTML mediante el uso del atributo “style”. Por ejemplo adentro de la etiqueta párrafo <p>, declarando los atributos del estilo podemos aplicarle los atributos para el párrafo completo, Como podemos observar en la siguiente imagen, Aunque de esta forma  perdemos la mayor parte de las ventajas que nos ofrece este uso de estilo sobre todo en cuanto a poder modificar de modo sencillo el estilo dentro de documentos largos.

Introducción a XHTML (N°13)

Publicado el 27/oct/2010 por y guardado en la categoría: Internet, Programacion.

Se puede apreciar en la imagen del anterior articulo como esta organizado en detalle toda la estructura general del documento, Para empezar vemos en el <head> definido el estilo <style>, al que le dimos un nombre (en este caso redline), y unos atributos que allí vemos como el color en este caso rojo y una decoración de texto (text-decoration), que como decíamos antes es line through que sirve para que aparezca la línea sobre el texto como efecto de tachado.

ejemplo2 150x150 Introducción a XHTML (N°13)

Luego de tener este estilo definido en la cabecera (redline), Podemos aplicarlo en alguna parte del texto solo con usar la etiqueta span precedida con el nombre del estilo que tenemos creado  y queremos aplicar (con etiqueta de apertura y cierre respectivamente). El resultado se puede apreciar en la imagen.


Diseño web y programación: Bahia Studio

Badoo