Si no encuentras lo que estás buscando prueba con:

Búsqueda personalizada

lunes, 4 de julio de 2011

Post 8 - Etiquetas de Fuentes en HTML

La etiqueta <font> de HTML no debe de ser utilizada.

  • La etiqueta <font> de HTML está en desuso en HTML 4, y fue borrada para que no se utilice de HTML5.
  • El World Wide Web Consortium (W3C) opto por remover la etiqueta <font> de sus recomendaciones de uso.
  • En lo que es HTML4 , se debe utilizar en vez de la etiqueta <font>, style sheets (CSS) para definir todo lo que tenga que ver con el diseño de nuestra página, y la apariencia de los elementos HTML que utilicemos.

En el siguiente ejemplo mostramos como luciría nuestro código HTML si utilizamos la etiqueta <font>, pero se recomienda utilizar CSS y no esta etiqueta.

<p>
<font size="14" face="arial" color="blue">
Este es un párrafo en letra Arial, tamaño de letra 14, y el texto está de color azul.
</font>
</p>


Post 7 - Etiquetas de formato en HTML

Utilizando etiquetas de formato en HTML

En HTML podemos utilizar etiquetas como <b> o <i> para dar formato a la salida en pantalla a desplegar, estás etiquetas son, la “negrita” o la “cursiva”.
En HTML estás etiquetas son más conocidas como etiquetas de formato.
Muy a menudo el <strong> funciona y se puede usar en el lugar de <b>, y la etiqueta <em> (énfasis) funciona y se puede usar en el lugar de <i>. A pesar de esto, existen diferencias en el significado de estos dos pares de etiquetas:
<b> o <i> define texto en “negrita” o “cursiva” solamente.
Cuando utilizamos las etiquetas  de <strong> o <em> se busca que nuestro navegador y el usuario entiendan el texto entre estas etiquetas como importante.  Al día de hoy, la gran mayoría de los navegadores web utilizan <strong> en vez de bold <b>, y énfasis <em> en lugar de italics <i>.

Etiquetas de formato de texto en HTML.


Etiqueta
Descripción
<b>
Texto en negrita
<big>
Define texto tamaño grande
<em>
Texto con énfasis
<i>
Texto en cursiva
<small>
Define texto tamaño pequeño
<strong>
Define texto fuerte, parecido a la negrita.
<sub>
Texto en subíndice
<sup>
Texto en superíndice
<ins>
Texto insertado
<del>
Texto borrado.

Etiquetas HTML “Computer Output”.


Etiqueta
Descripción
<code>
Define texto en formato de código de máquina
<kbd>
Define texto en formato de teclado
<samp>
Define muestra de código de máquina
<tt>
Define texto teletipeado.
<var>
Define una variable
<pre>
Define texto que ya tiene un formato previo.

 Etiquetas de citación, Acotación y definición en HTML.


Etiqueta
Descripción
<abbr>
Se utiliza para definir una abreviación de una palabra.
<acronym>
Utilizar esta etiqueta cuando queremos definir un acrónimo.
<address>
Define información de contacto del autor o de la persona a quien está dirigido el documento.
<bdo>
Especifica la dirección del texto, de derecha a izquierda o de izquierda a derecha.
<blockquote>
Se utiliza para designar una cita de texto larga.
<q>
Se utiliza para designar una cita de texto corta.
<cite>
Cita o referencia a otro lugar.
<dfn>
Se utiliza para definir un termino o palabra determinada.

viernes, 24 de junio de 2011

Post 6 - Párrafos HTML

Los documentos HTML están divididos en párrafos.

Como definir un párrafo HTML.

Los párrafos son definidos en nuestro documento HTML con la etiqueta <p>.

Ejemplo
<p>Este es el primer párrafo</p>
<p>Este es el segundo párrafo</p>
Los navegadores automáticamente adicionan una línea en blanco antes y después de cada párrafo, de forma de mantener el orden de nuestra página web.

La etiqueta de fin en párrafos HTML

La gran mayoría de los navegadores desplegarán nuestros párrafos si nos olvidamos de colocar la etiqueta de fin o de cierre.
<p>Este es un párrafo
<p>Este es otro párrafo
Este ejemplo anterior va a funcionar en la mayoría de los navegadores, pero verdaderamente no se recomienda no colocar esta etiqueta de fin, debido a que al olvidarnos de esta etiqueta se pueden producir resultados inesperados e inexplicables muchas veces.

Párrafo con línea en blanco entre medio.

Utilizar la etiqueta <br/> cuando se quiere pasar a la siguiente línea del un párrafo, sin que se arranque un párrafo nuevo.
<p>Esto es<br />un parra<br />fo con salto de linea</p>
La etiqueta <br/> es una de las etiquetas vacías de los elementos HTML y no tiene etiqueta de fin o cierre.

Como se va a desplegar nuestro HTML en los navegadores.

Nunca vamos a estar seguros de cómo nuestros navegadores van a desplegar nuestro documento HTML, en ventanas grandes o chicas, y obviamente para diferentes tamaños de ventas se van a obtener distintos resultados.
En HTML no podemos cambiar la salida a desplegar agregandole lineas extras en nuestro codigo HTML, ya que lo que arreglas para un tamaño de ventana, lo terminas desarreglando para los otros tamaños.
Aparte que cada navegador va interpretar el documento HTML y va a borrar todas las lineas extras a la hora de desplegar la página web. La cantidad de lineas extres que hayamos arreglado las va a contar como una sola, y con la cantidad de espacios va a hacer lo mismo.

Resumen de Tags HTML vistos.


Etiqueta
Descripción
<p>
Definición de párrafo en HTML
<br/>
Inserta un salto de línea sin comenzar un párrafo nuevo.

jueves, 23 de junio de 2011

Post 5 - Encabezados HTML

Los encabezados son muy importantes en los documentos HTML

Ya que la gran mayoría de los buscadores como Google, Yahoo, etc, los tiene muy en cuenta a la hora de indexar y posicionar nuestra pagina web.

Características de los encabezados HTML.

Los encabezados son definidos con las etiquetas desde la <h1> hasta la <h6>, donde <h1> define el encabezado más importante, y la etiqueta <h6> define el encabezado de menos importancia.
<h1>Este es un encabezado de importancia 1</h1>
<h2>Este es un encabezado de importancia 2</h2>
<h3>Este es un encabezado de importancia 3</h3>
Los navegadores cuando leen nuestro HTML y ven una etiqueta de encabezado dejan un espacio en blanco debajo del mismo según la importancia del mismo.

Importancia de los encabezados.

Los encabezados HTML deben ser usados unicamente como encabezados que son. No utilize las etiquetas de encabezados para agrandar la letra o verla en negrita.
Como dijimos al principio, los motores de busquedas utilizan las palabras claves presentes en los encabezados para indexar y posicionar nuestro sitio web.
Los encabezados son muy importantes dentro de las paginas web, porque sirven para estructurar nuestras páginas y para que nuestras visitas puedan ver en un breve pantallaza a nuestros encabezados de que trata la página web.
Los encabezados <h1> son los más importantes, seguidos en orden de importancia por los encabezados <h2>, le sigue en importancia el encabezados <h3> y así hasta el <h6>.
Líneas en HTML
Cuando decimos línea, nos estamos refiriendo a una línea de nuestro código o una línea de contenido de nuestra página web.
La etiqueta <hr/> crea una línea horizontal vacía en nuestra página web. Esta etiqueta puede ser usada para separar contenido.
<p>Primer párrafo</p>
<hr />
<p>Segundo párrafo</p>
<hr />
<p>Tercer párrafo</p>

Como comentar en HTML.

Los comentarios tanto en HTML como en cualquier otro lenguaje son insertados para darnos una ayuda a la hora de rever el código, de manera que sea más leíble y entendible. Los comentarios son ignorados por los navegadores y no son desplegados en pantalla.
Los comentarios se escriben de la siguiente manera:

<!--Acá va mi comentario -->

Notar que hay un signo de exclamación al principio del tag pero el mismo no aparece en el final.

Como ver el codgo fuente de una página HTML.

Muchas veces hemos visto páginas web, que nos dejan de boca abierta y nos decimos, ¡Qué página tan impresionante! ¿Cómo la habrán hecho?
Para ver como es el código fuente HTML de la página, nos dirigimos al Menú “Ver” de nuestro navegador y en el menú desplegable que nos aparece seleccionamos “Código fuente” o “Código fuente de la página”. Una vez hecho esto se nos abre una ventana que contiene el codigo HTML de la misma.

Resumen de tags HTML.

En post posteriores vamos a tratar más en profundidad todos estos elementos y sus atributos que se pueden utilizar en cada uno.


Tag
Description
<html>
Define el documento HTML
<body>
Define el suerpo del documento es la parte visible de la página
<h1> a <h6>
Define los encabezados HTML
<hr/>
Define una línea horizontal
<!-->
Define comentarios en HTML.

Post 4 - Atributos HTML


Los atributos HTML nos proporcionan información adicional sobre los elementos HTML.


Características de los atributos HTML.


  • Los elementos HTML pueden tener atributos.
  • Estos atributos que incluimos en los elementos HTML nos proporcionan mayor información sobre el elemento HTML.
  • Los atributos son siempre especificados en la etiqueta de inicio.
  • Los atributos se especifican con el par “nombre del atributo=valor” por ejemplo name=”value”.

Ejemplo sobre Atributos HTML.


Los links en HTML son definidos con la etiqueta <a>. La dirección URL a linkear se coloca en el atributo href.
<a href="http://www.todosobreexpression web.com">Este es un link al blog</a>

Propiedades de los atributos HTML.


Cuando agregamos atributos a nuestro elemento HTML, necesitamos siempre poner el valor del atributo entre comillas. Lo más común es colocarle comillas dobles, pero igualmente las comillas simples son permitidas. En algunas situaciones, no muy comunes, cuando nuestro valor a asignar al atributo tiene comillas dentro del valor debemos usar comillas simples. Ejemplo: name=’Diego “Cachabacha” Forlán’.


Uso de minúscula en la definición de Atributos HTML.

En la definición de los atributos no se hace distinción entre mayúsculas y minúsculas, en ingles se dice que es “case-insensitive”.
A pesar de esto el W3C “World Wide Web Consortium” recomienda que siempre se usen letras minúsculas en el valor de los atributos. En versiones mas actuales de HTML nos obligan a usar minúsculas en el valor de los atributos.


A continuación presentamos una lista con algunos de los atributos más utilizados en los elementos HTML.

Atributo
Valor
Explicación
class
classname
Especifica el nombre de la clase de un elemento HTML
id
id
Especifica un único identificador de el elemento.
style
style_definition
Especifica el estilo del elemento.
title
tooltip_text
Especifica información extra sobre el elemento (displayed as a tool tip)

viernes, 10 de junio de 2011

Post 3 - Elementos HTML.


Los elementos HTML son todo el texto que está presente entre la etiqueta de inicio y la etiqueta de fin. Las etiquetas de inicio y de fin también son llamadas etiquetas de apertura y de cierre. Veamos algunos ejemplos:
Etiqueta de inicio
Contenido del elemento
Etiqueta de cierre
<p>
Este es un párrafo
</p>
<a href="inicio.htm" >
Esto es un Link
</a>
<br />


 Tabla 1- Ejemplo de elementos HTML
Sintaxis de los elementos HTML.
  • Un elemento HTML comienza en una etiqueta de inicio o apertura.
  • Un elemento HTML termina en una etiqueta de fin o cierre. 
  • El contenido del elemento HTML es todo el texto que aparece entre las etiquetas de inicio y de fin.Existen elementos HTML que no tienen contenido.
  • Los elementos que son vacíos se abren y se cierran en la etiqueta de inicio.
  • La gran mayoría de los elementos HTML pueden tener atributos
El tema atributos de los elementos HTML lo vamos a ver en post posteriores, por el momento vamos a tomarlo entre pinzas.

Anidación de elementos HTML.
La mayor parte de los elementos HTML pueden ser anidados unos adentro de otros, esto es puede haber etiquetas HTML adentro de elementos HTML. Los documentos HTML están compuestos de elementos HTML anidados.

Ejemplo de documento HTML:
<html>


<body>
<h1>Este es un encabezado</h1>
<p>Este es un párrafo.</p>
</body>


</html>

Este ejemplo contiene 4 elementos HTML.

Explicación del ejemplo anterior.
El elemento <h1>:

<h1>Este es un encabezado.</h1>

El elemento <h1> define un encabezado en el documento HTML. Tiene un tag de inicio <h1> y un tag de fin </h1>. El contenido del elemento HTML está dado por: “Este es un encabezado
El elemento <p>:

<p>Este es un párrafo.</p>

El elemento <p> define un párrafo en el documento HTML, el tag de inicio es <p> y el de fin es </p>. También cuenta con un contenido que en este caso es: “Este es un párrafo
El elemento <body>:

<body>
<h1>Este es un encabezado</h1>
<p>Este es un párrafo.</p>
</body>

El elemento body define lo que es el cuerpo del documento HTML, que a su vez es la parte visible de nuestra página web. Este elemento tiene una etiqueta de inicio <body> y tiene una etiqueta de cierre </body>. El contenido del elemento es otro elemento HTML. Ya que como podemos observar tiene el elemento encabezado y el elemento párrafo, como contenido de él.
El elemento <html>:

<html>


<body>
<h1>Este es un encabezado</h1>
<p>Este es un párrafo.</p>
</body>


</html>

El elemento <html> define todo el documento HTML. Tiene una etiqueta de inicio <html> y una etiqueta de fin </html>. El contenido del elemento HTML es otro elemento HTML.


No olvidarnos de la etiqueta de cierre.
Algunos elementos HTML pueden llegar a desplegarse correctamente cuando nos olvidamos de ponerle la etiqueta de fin. Por ejemplo lo siguiente:

<p>Este es el primer párrafo
<p>Este es el segundo párrafo

El código del ejemplo anterior funciona en la mayoría de los navegadores, debido a que la etiqueta de cierre en este caso es considerada como opcional. Pero luego de haber trabajado mucho con HTML mi conclusión es que nunca debemos olvidarnos de la etiqueta de cierre, porque para diferentes etiquetas puede generar muchos resultados inesperados e inexplicables. Por eso siempre poner la etiqueta de cierre.

Elementos HTML vacíos.
Elementos HTML que no tienen contenido reciben el nombre de elementos vacíos. Por ejemplo la etiqueta <br/>, es un elemento vacío y a su vez no tiene tag de cierre. (este tag define una linea en blanco).

Pique para programar en HTML
HTML es un lenguaje que no hace distinción entre mayúsculas y minúsculas, o sea, podemos definir la etiqueta párrafo así <P> o así <p>, pero lo que yo recomiendo, que es lo mismo que se recomienda en la gran mayoría de paginas de programación es utilizar siempre letra minúscula para definir tags HTML.

Post 5: Como importar texto con estilos desde un documento de Microsoft Word

Como ya sabemos una página web es una fuente de información. Entonces para darle contenido a nuestra página necesitamos ingresar texto que proporcione real interés de parte de en los visitantes. En la mayoría de los casos el contenido de nuestra pagina va a ser suministrado por otra persona o nosotros vamos a escribir nuestro propio contenido en algún formato como por ejemplo en un documento de Microsoft Word. Nuestro primer instinto a la hora de pasar el contenido que tenemos en el documento a nuestra página web es el de recortar el contenido y luego pegarlo en Expression Web. El problema está en que dependiendo de cual versión de Microsoft Word utilicemos, al copiar y pegar el texto se nos va a agregar un montón de código extra que nos va a dificultar el trabajo en la vista "código" una vez que hallamos terminado con la importación. Las Versiones más nuevas de Microsoft Word como la 2010, una vez que copiemos y peguemos el contenido del documento en expression web, vamos a notar que la importación del texto en la vista "Código" va a tener menos código extra, que si hiciéramos el copy and paste, con versiones interiores como la 2007 o 2003, pero igualmente nos vamos a ver obligados a hacerle ciertas modificaciones para que quede más entendible a la vista.

Para visualizar esto vamos crear un documento en Microsoft Word, con encabezados de distintos tipos, párrafos, etc,  lo vamos a copiar y luego lo vamos a pegar en Microsoft Expression Web. En este parte vamos a dar por conocido el manejo de Microsoft Office Word por parte del usuario a la hora de hacer el documento y de copiarlo totalmente y pegarlo en la página web que estamos construyendo con Expression Web. También quiero recordar que en caso de no contar con las herramientas de Microsoft, también se puede utilizar OpenOffice para crear un documento.

Como limpiar el codigo importado a Expression Web.

A pesar de que en el modo "Diseño" se vea nuestra página idéntica que en Microsoft Word, cuando vamos a la vista "Código" nos encontramos con una historia totalmente diferente. A modo de ejemplo cuando pintamos el encabezado del principio de nuestro documento, podemos ver que en la vista Código, el HTML no es tan claro como lo era antes cuando escribíamos el encabezado nosotros en la vista "Diseño".
Dependiendo de la versión de Microsoft Word con la que creamos el documento, va a depender la simpleza de nuestro código HTML cuando importemos nuestro código de Word a Expression Web.
Microsoft Expression Web debemos decir que trata de hacer todo lo posible para que nuestro código sea lo más limpio posible, pero en la mayoría de las veces es imposible. Entonces es ahí cuando la simpleza del código corre por parte nuestra.

 Fig 1 - Vista dividir al pegar texto con estilos en Microsoft Expression Web.

Como podemos ver en la figura Fig 1, en la parte de "Diseño" vemos que nuestra página se ve tal cual nosotros la escribimos en Microsoft Word, pero en la vista "Código" Expression Web nos añade etiquetas de estilos CSS que en realidad nosotros no necesitamos y nos entorpece a la hora de distinguir las etiquetas mas comunes de HTML, como los encabezados, párrafos, etc.
La forma mas facil de limpiar el código HTML es abrir la pagina web en la que pegamos el texto con estilos en la vista "Dividir" de Expression Web y utilizar la barra de herramientas de la vista código. Utilizando esta herramienta podemos facilmente navegar recorriendo el contenido en la parte de "Diseño" y borrando todo el código adicional que nos aparece en la parte de el panel de vista "Código". Lo que buscamos al final de la historia es borrar todos los tags adicionales y que solo nos queden los tags de encabezados y de párrafos, sin tener ningún tag más adicional.
Para empezar, vamos a abrir la herramienta de la vista "Código", para ello vamos a ir a "Ver" en nuestra barra de menú, luego vamos a seleccionar "Barras de Herramientas", y dentro del menú desplegable lateral vamos a elegir "Vista Código". Esta barra de herramientas se va a abrir debajo de la barra de herramientas común. Para limpiar el código no existe una forma buena o una mala, por eso nosotros vamos a arrancar desde el principio de la página. En la vista código vamos a ir hasta el principio de la página y vamos a tratar de encontrar el siguiente string. (la def de string  es: cadena de caracteres)
<style type="text/css">
Este es el tag de comienzo de "Cascading Style Sheets (CSS) code" que define los estilos para que lo que el texto pegamos se vea idéntico que en Microsoft Word. CSS lo vamos a tratar de forma avanzada en post posteriores, en estos momentos lo que queremos es que nuestro código quede lo más claro posible, y para eso debemos sacarle todas las etiquetas CSS. Para remarcar todos los tags de CSS, vamos a colocar el cursor en cualquier lado dentro del string anterior y vamos presionar "Ctrl + : " y luego "Ctrl + shift + : " luego de esto vamos a ver que todo el código que está entre las etiquetasstyle> y </style> queda todo pintado. Ahora lo único que tenemos que hacer es apretar la tecla "delete" y luego "F5". En la vista "Diseño" se van a ver los encabezados ahora en color negro y con letra grande que es lo que queríamos.
Ahora lo que tenemos que hacer es ver que todas las etiquetas de encabezados y párrafós estén bien. Para eso lo que vamos a hacer es borrar todo el contenido extra presente dentro y entre de las estiquetas <h1> y </h1> , <h2> y </h2> y <p> y </p>. A modo de ejemplo mostraremos uno de los párrafos y le borraremos todo lo adicional.

<p class="MsoNormal"><span lang="ES-UY" style="mso-ansi-language:ES-UY">Aprende
a crear paginas Web con una herramienta magnifica como lo es Microsoft
Expression Web. Entra en nuestra URL y aprende desde cero, como utilizar el
programa y como crear tus páginas. Les recomiendo esté sitio porque les va a ser
de gran ayuda tanto a principiantes como a webmasters.<o:p></o:p></span></p>



<p>Aprende a crear paginas Web con una herramienta magnifica como lo es Microsoft
Expression Web. Entra en nuestra URL y aprende desde cero, como utilizar el
programa y como crear tus páginas. Les recomiendo esté sitio porque les va a ser
de gran ayuda tanto a principiantes como a webmasters.</p>


Con esto llegamos al final de esté post, en post posteriores vamos a seguir ampliando el tema de trabajar en la vista código.