Donde Conseguir Trabajo Freelance

Elementos HTML II

Las Listas

En HTML es posible representar elementos en forma de listas donde se podrán incluir cualquiera de los elementos HTML e incluso listas anidadas, es decir, listas dentro de listas. El uso de listas es muy sencillo y cuenta con una gran versatilidad. El lenguaje HTML nos permite crear tres tipos distintos de listas:

• Listas no numeradas
• Listas numeradas
• Listas de definiciones

Lista no numeradas: <UL> {UL: Unordered List}

Como el nombre indica, este tipo de listas permite especificar una serie de elementos sin un orden predeterminado, precedidos de una marca o viñeta que nosotros mismos podemos definir. Para la definición de los límites de la lista utilizaremos las etiquetas <UL>.... </UL>, y para determinar cada uno de los elementos que la componen usaremos la etiqueta <LI>.

El formato de la lista no enumerada es el siguiente:

<UL type="disk">
<LH>Título de la lista</LH>
        <LI>Primer elemento
        <LI>Segundo elemento
    <LI>Tercer elemento
</UL>

El atributo type se utiliza para especificar el tipo de viñeta que precederá cada elemento de la lista y puede ser: “disk” (disco), “circle” (círculo) ó “square” (cuadrado).

Listas numeradas: <OL> {OL: Ordered List}

Tipo de listas utilizadas cuando queremos especificar una serie de elementos numerados según el orden que aparecen en la lista. Los límites de este tipo de listas son representados por las etiquetas <OL>.... </OL>.

El formato de la lista numerada es el siguiente:

<OL>
<LH>Título de la lista</LH>
        <LI>Primer elemento
        <LI>Segundo elemento
     <LI>Tercer elemento
</OL>

La lista numerada cuenta con el atributo start para poder indicar el número con que va a empezar la lista, si este es diferente de 1. El atributo type se utiliza para especificar el tipo de numeración de la lista. Lo valores posibles para type son:


A: Letras mayúsculas (A, B, C, ...)
a: Letras minúsculas (a, b, c, ...)
I: Números romanos en mayúsculas (I, II, III, IV, ...)
i: Números romanos en minúsculas (i, ii, iii, iv, ...)
1: Numéricamente (1, 2, 3, 4, ....) (Esta es la numeración por defecto y no es necesario indicarla)

Listas de definición: <DL> {DL: Definition List}

Son listas que nos permite describir una serie de términos y con sus respectivas definiciones. Para este tipo de listas se utiliza la etiqueta <DL>.... </DL> para enmarcar su inicio y fin. Para especificar los términos utilizamos la etiqueta <DT> y para especificar las definiciones que les corresponde a cada término utilizamos la etiqueta <DD>.

El formato de la lista de definición es el siguiente:

<DL>
<LH>Título de la lista</LH>
     <DT>Término 1
     <DD>Definición 1
     <DT>Término 2
     <DD>Definición 2
     <DT>Término n
     <DD>Definición n
</DL>

Ejemplos de Listas

Ahora veamos algunos ejemplos de listas en acción:

<ul type="circle"> <lh><b>Redes Sociales:</b></lh> <li>Facebook <li>Google+ <li>Twitter </ul>	Redes Sociales: Facebook Google+ Twitter
<ol type="a"> <lh>Contenido CMS</lh> <li>Joomla <li>Wordpress <li>TYPO3 </ol>	Contenido CMS Joomla Wordpress TYPO3
<lh>Abreviaturas y Significado:</lh> <dt>HTML <dd>HyperText Markup Language <dt>CSS <dd>Cascading Style Sheets </dl>	Abreviaturas y Significado: HTML HyperText Markup Language CSS Cascading Style Sheets
<ol> <lh>Bebidas:</lh> <li>Café <li>Té <li>Jugo <ul type="square"> <li>Narajan <li>Piña <li>Limón </ul> <li>Leche </ol>	Bebidas: Café Té Jugo Naranja Piña Limón Leche

Charlie and the Kid (B&W and Color)

Charlie And The Kid

Gracias por sus visitas

Me gustaría darles las GRACIAS A TODOS por sus visitas en estos últimos días a nuestro Tutoriales HTML, creado para todos aquellos que se dedican al Trabajo Freelance o desean aprender el lenguaje.

Hemos estado tratando de compartir algunos tutoriales con ustedes y hemos visto que han sido de su agrado. Me gustaría recibir además algunos comentarios para ver en que podemos mejorar o cuales son aquellos de su preferencia: HTML, CSS, Javascript, PHP. MySQL, Ajax, jQuery.

Espero su regreso ya que estaremos actualizado los tutoriales tan pronto el tiempo nos permita.

Nuevamente MUCHAS GRACIAS. Sus visitas nos anima a continuar.

Saludos,

Cláudio Schröeder
.

Elementos HTML I

Tutoriales Freelance

La Cabecera del documento

Cabecera del documento es la que está delimitada por las etiquetas HTML <HEAD></HEAD>
La cabecera de un documento HTML se utiliza para incluir definiciones generales que afectarán a todo el documento, como por ejemplo el título de la página que vimos en el capítulo anterior:

<TITLE>Título de la Página</TITLE>

Veremos otras etiquetas y funcionalidades de la cabecera del documento en capítulos posteriores.

El cuerpo del documento

El cuerpo del documento es aquel que está delimitado por las etiquetas <BODY></BODY>
En el cuerpo de un documento HTML es donde se introducen las distintas instrucciones propias del lenguaje HTML y el contenido en sí de nuestra página Web como los son: textos, imágenes, enlaces a otras páginas, etc..

Las Cabeceras HTML

Las cabeceras (Header) son etiquetas que formatean el texto como un titular, asignándole un tamaño mayor a la letra y colocando el text en negrita.
Las etiquetas utilizadas son <H1><H2><H3><H4><H5> y <H6>, siendo que <H1> indica la cabecera mayor, <H2> corresponde el segundo nivel y así hasta la etiqueta <H6> que representa la cabecera de menor tamaño.

Así es como se ve:

Las cabeceras, así como otras etiquetas soporta el atributo align para alinear el texto. El siguiente ejemplo mostrará la cabera en el centro:

<h2 align=”center”>Cabecera Secundaria</h2>

El texto de la cabecera se mostraría en el navegador con el siguiente formato:

Cabecera Secundaria

Los párrafos HTML

Los párrafos están definidos por las etiquetas <P></P>. En la mayoría de los navegadores añaden un salto de línea después de la etiqueta </P>.

Veamos en acción:

Atributos de Textos

Los textos de un documento HTML pueden tener varios formatos o atributos. Veamos algunos de los más utilizados:

Atributo	Etiqueta	Ejemplo	Resultado
Negrita	<B>…</B> <strong>…</strong>	<b>Texto en negrita</b> <strong>Igual que negrita</strong>	Texto en negrita Igual que negrita
Cursiva	<I>…</I>	<i>Texto en cursiva</i>	Texto en cursiva
Subrayado	<U>…</U>	<u>Texto subrayado</u>	Texto subrayado
Tachado	<S>…</S>	<s>Texto tachado</s>	Texto tachado
Centrado	<center>…</center>	<center>Texto centrado</center>	Texto centrado
Cita	<CITE>…</CITE>	<cite>Igual que cursiva</cite>	Igual que cursiva
Superíndice	<SUP>…</SUP>	<sup>Texto superíndice</sup>	Texto superíndice
Subindice	<SUB>…</SUB>	<sub>Texto subíndice</sub>	Texto subíndice

Imágenes HTML

Utilizamos la etiqueta <IMG> para insertar una imagen en nuestro documento HTML. Esta etiqueta no tiene finalización y como mínimo debe contener los atributos src y alt.

El atributo src se utiliza para indicar el nombre del archivo que contiene la imagen.

En un servidor Linux los nombres de los archivos son sensibles a mayúsculas y minúsculas por lo que es recomendable utilizar sólo minúsculas.

Por otra parte el atributo alt se utiliza para incluir un texto que debe describir el contenido de la imagen. Este es el que verán usuarios que visiten el sitio con un navegador que sólo permite texto o tenga desactivada la opción de descarga de imágenes.

La sintaxis de la etiqueta <IMG> es la siguiente:

<img src=”miImagen.jpg” alt=”Mi imagen en JPG”> 

También podemos utilizar los atributos width y  height para determinar el ancho y el alto de la imagen.

Observe el siguiente ejemplo:

Hipervínculos HTML

Para definir un hipervínculo se utiliza las etiquetas <A></A>. Un hipervínculo puede apuntar a un punto determinado del documento HTML que tenemos abierto, a otra página del mismo sitio o a enlaces externos.

La sintaxis del hipervínculo es la siguiente:

<a href=”pagina1.html”>Ir a página 1</a>

El atributo href de la etiqueta <A> hace referencia a la página que debe mostrar el navegador si el visitante hace clic sobre el hipervínculo, que en este caso apunta a pagina1.html que está en el mismo sitio.