Aprendiendo a programaren HTML: 2013

lunes, 22 de abril de 2013

Una manera común y de utilidad de conseguir esquemas de forma sencilla, es colocar una lista dentro de otra lista.
Dentro de una lista podemos utilizar cualquier otra forma de lista, es decir, no tenemos porque mantener el mismo tipo de lista. Podemos incluir listas de definición, numeradas. etc.
Código de Ejemplo:

Representación en el navegador:

Ejemplo de listas anidadas

Titulo de la lista principal

Primer elemento de la primer lista
Segundo elemento de la primer lista

Titulo de la 2da. lista

Primer elemento de la 2da. lista
Segundo elemento de la 2da. lista
3er. elemento de la 2da. lista
4to. elemento de la 2da. lista

Si en las listas no ordenadas, no especificamos el tipo de viñeta mediante el atributo type, el navegador cambiará automáticamente en cada anidamiento de la viñeta el nivel de profundidad.
Código de Ejemplo:
<html>
<head>
    <title>Listas Anidadas No Ordenadas</title>
</head>
<body>
   <basefont face="verdana" size="2" />
    <b>Listas No Ordenadas Anidadas</b><br>
    Paises y Ciudades:
    <ul>
      <li>España</li>
      <ul>
         <li>Almeria</li>
         <li>Madrid</li>
      </ul>
         <li>Argentina</li>
      <ul>
         <li>Buenos Aires</li>
         <li>Cordoba</li>
      </ul>
         <li>Reino Unido</li>
      <ul>
         <li>Londres</li>
         <li>Manchester</li>
      </ul>
    </ul>
</body>
</html>
Representación en el navegador:
Listas No Ordenadas Anidadas
Paises y Ciudades:

España
- Almeria
- Madrid
Argentina
- Buenos Aires
- Cordoba
Reino Unido

Londres
Manchester

Parrafos

árrafos <p> ...

El texto de una página puede agruparse en párrafos. Para ello, el texto de cada uno de los párrafos debe insertarse entre las etiquetas <p> y </p>.

No es necesario insertar la etiqueta <br> para que un nuevo párrafo aparezca debajo del anterior, ya que las etiquetas <p> y </p> hacen que se cambie de línea automáticamente.

También es posible cambiar la alineación del texto de cada párrafo. Para ello se modifica el valor del atributo align, cuyos valores pueden ser left (izquierda), right (derecha), center (centrado) o justify (justificado).

Por ejemplo, para insertar el texto:

Bienvenidos a mi página.
Aquí encontraréis cursos de formación muy interesantes.

Habría que escribir:

<p align="center">Bienvenidos a mi p&aacutegina.</p>
<p>Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes.</p>

Otra forma de cambiar la alineación del texto es mediante las etiquetas <div> y </div>, para las que también existe el atributo align. La etiqueta <div>, al igual que la etiqueta <p>, se utiliza para agrupar bloques de texto, pero con la diferencia de que la separación entre ellos es menor.

Por ejemplo, para insertar el texto:

Bienvenidos a mi página.

Aquí encontraréis cursos de formación muy interesantes.

Habría que escribir:

<div align="center">Bienvenidos a mi p&aacutegina.</div>
<div>Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes.</div>

También es posible insertar el texto entre las etiquetas <center> y </center> para que aparezca centrado.

Por ejemplo, para insertar el texto:

Bienvenidos a mi página.

Habría que escribir:

<center>Bienvenidos a mi p&aacutegina.</center>

Resaltado de texto

Resaltado del texto <b> ...

Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra entre ellas, y generalmente se utilizan para resaltarlo. Estos estilos pueden agruparse según vayan asociados al tipo de letra o a la información que represente el texto. No hay que olvidar que todas estas etiquetas necesitan una etiqueta de cierre, y que pueden aplicarse varias etiquetas al mismo texto.

A continuación se muestran algunas etiquetas asociadas al tipo de letra:

Etiqueta	Significado	Ejemplo
<b>	negrita	curso HTML aulaclic
<i>	cursiva	curso HTML aulaclic
<u>	subrayado	curso HTML aulaclic
<s>	tachado	~~curso HTML aulaclic~~
<tt>	teletipo (máquina de escribir)	`curso HTML aulaclic`
<big>	aumenta el tamaño de la fuente	curso HTML aulaclic
<small>	disminuye el tamaño de la fuente	curso HTML aulaclic

A continuación se muestran algunas etiquetas asociadas al tipo de información:

Etiqueta	Significado	Ejemplo
<cite>	cita	curso HTML aulaclic
<code>	ejemplo de código	`curso HTML aulaclic`
<dfn>	definición	curso HTML aulaclic
<del>	eliminado	~~curso HTML aulaclic~~
<em>	énfasis	curso HTML aulaclic
<ins>	insertado	curso HTML aulaclic
<kbd>	teclado	`curso HTML aulaclic`
<samp>	muestra	`curso HTML aulaclic`
<strong>	destacado	curso HTML aulaclic
<sub>	subíndice	curso _HTMLaulaclic
<sup>	superíndice	curso^HTMLaulaclic
<var>	variable	`curso HTML aulaclic`

Las etiquetas más utilizadas son las asociadas al tipo de letra, ya que son más fáciles de recordar, y en muchos casos los resultados son los mismos que los de aplicar una etiqueta diferente. Por ejemplo, el resultado de aplicar las etiquetas <b> y <strong> es el mismo. Incluso a veces algunos estilos asociados al tipo de información pueden representarse de forma distinta según el navegador.

Por ejemplo, para insertar el texto:

Bienvenidos a www.aulaclic.com

Habría que escribir:

<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a <b><u><tt>www.aulaclic.com</tt></u></b></font>

Marquee

Marquesinas <marquee>

Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de línea.

Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <marquee> y </marquee>.

La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varíen.

A través del atributo behavior puede modificarse el tipo de movimiento. Puede tomar los valores alternate (de lado a lado de la ventana, como si rebotara en los extremos), scroll (de un lado a otro, continuamente) o slide (de un lado a otro, pero una sola vez).

A través del atributo direction puede modificarse la dirección en la que se moverá el texto. Puede tomar los valores down (de arriba a abajo), up (de abajo a arriba), left (de derecha a izquierda) o left (de izquierda a derecha).

También es posible establecer un color de fondo, a través del atributo bgcolor.

Por ejemplo, para insertar la siguiente marquesina:

Esto es una marquesina

Habría que escribir:

<marquee bgcolor="#006699" behavior="alternate" direction="right">
<b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b>
</marquee>

También es posible insertar imágenes, tablas y otros elementos entre las etiquetas <marquee> y </marquee>, no sólamente texto.

Encabezados h1,h2,h3,h4

Encabezados <h1> ...

Existen una serie de encabezados que suelen utilizarse para establecer títulos dentro de una página. La diferencia entre los distintos tipos de encabezado es el tamaño de la letra, el tipo de resaltado, y la separación existente entre el texto y los elementos que tiene encima y debajo de él. Hay que tener en cuanta que el navegador del usuario es el que aplicará el estilo del encabezado por lo que el mismo título se puede visualizar de forma diferente según el navegador.

Existen seis etiquetas que representan seis tipos de cabeceras distintas. Todas estas etiquetas precisan una etiqueta de cierre.

A continuación se muestran los distintos encabezados existentes:

Etiqueta	Ejemplo
<H1>	Título 1: HTML
<H2>	Título 2: HTML
<H3>	Título 3: HTML
<H4>	Título 4: HTML
<H5>	Título 5: HTML
<H6>	Título 6: HTML

br tema

Saltos de línea <br>

En general, cuando trabajamos con un editor de texto se produce un salto de línea al pulsar la tecla INTRO.

Si pulsamos INTRO en un documento HTML, el salto de línea se producirá en el código, pero no se mostrará en el navegador. Para que se produzca el salto de línea en el navegador, en lugar de pulsar la tecla INTRO hay que insertar la etiqueta <br> donde se desee que se produzca el salto.

La etiqueta <br> no precisa ninguna etiqueta de cierre. No hay que insertar la etiqueta </br> después de ella, ya que dicha etiqueta no existe.

Por ejemplo, para insertar el texto:

Queridos usuarios,
tengo el placer de comunicaros que hay una nueva sección.

Habría que escribir:

Queridos usuarios,<br>tengo el placer de comunicaros que hay una nueva secci&oacuten.

Tablas

. Tablas (I)

En este tema vamos a ver cómo trabajar con tablas. Podremos insertar tablas, filas y columnas, y modificar sus propiedades.

Hoy en dia, la mayoría de las páginas web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseño.

Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizarse.

Tabla <table>

Las tablas están formadas por celdas, que son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna.

	imagen y texto	COLUMNA
	Texto dentro de una celda

FILA		CELDA

Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas habrá que especificar las filas y columnas que formarán la tabla.

Fila <tr>

Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas deberán insertarse entre las etiqetas <table> y </table>.

Por ejemplo, para crear una tabla con cinco filas escribiríamos:

<table>
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
</table>

Columna o celda <td>

Para crear una tabla no basta con especificar el número de filas, es necesario también especificar el número de columnas.

Una celda es el resultado de la intersección entre una fila y una columna, por lo que podremos especificar el número de celdas por fila, que equivale a especificar el número de columnas por fila.

Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las etiquetas <tr> y </tr>.

Entre las etiquetas <td> y </td> se podrá especificar el contenido de cada una de las celdas. Por ejemplo, para insertar la siguiente tabla:

Sabado	Domingo
Curso HTML	Curso Dreamweaver
Curso Frontpage	Curso Flash

Habría que escribir:

<table border="1">
  <tr>
    <td>Sabado</td>
    <td>Domingo</td>
  </tr>
  <tr>
    <td>Curso HTML</td>
    <td>Curso Dreamweaver</td>
  </tr>
  <tr>
    <td>Curso Frontpage</td>
    <td>Curso Flash</td>
  </tr>
</table>

Imagenes

Imagen <img>

Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual.

Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no necesita etiqueta de cierre.

El nombre de la imagen ha de especificarse a través del atributo src.

Por ejemplo, para insertar la siguiente imagen:

Habría que escribir:

<img src="imagenes/logo_animales.gif">

Teniendo en cuentra que la imagen se llama logo_animales.gif y que está dentro de la carpeta imagenes, que se encuentra en el mismo directorio que el documento actual (referencia relativa al documento).

Para trabajar de una forma más sencilla y ordenada, es recomendable que todos los documentos html se encuentren en un mismo directorio, y que dentro de este directorio existan diferentes carpetas para agrupar otros objetos, como puede ser una carpeta destinada a almacenar imagenes, o una carpeta destinada a almacenar archivos de audio, etc.

Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web. Esta información puedes consultarla aquí

Texto alternativo

Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al especificar mal el valor del atributo src, aparece un recuadro blanco con una X roja en su lugar, junto con el nombre de la imagen.

Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que nosotros deseemos, gracias al atributo alt.

Por ejemplo, imagina que deseamos mostrar una imagen llamada gatito.gif, con el texto alternativo Imagen gato, para ello insertamos el siguiente código:

<img src="gatito.gif" alt="Imagen gato" >

Pero hemos cometido un error, ya que dicha imagen no se encuentra en el mismo directorio que el documento actual, sino que se encuentra dentro de la carpeta imagenes. En lugar de la imagen se mostrará lo siguiente:

Si en lugar del código anterior hubiéramos insertado el siguiente código:

<img src="imagenes/gatito.gif" alt="Imagen gato" >

La imagen habría mostrado correctamente:

lunes, 15 de abril de 2013

Listas ordenadasydesordenadas

Las listas representan uno de los instrumentos más difundidos para organizar la información dentro de los sitios web. Una de sus características principales es la de proporcionar un cuadro claro y sintético del tema tratado.
HTML pone a disposición distintos tipos de listas. A continuación, analizaremos cada uno de ellos.

Listas ordenadas

Las listas ordenadas constan de una sola marca de apertura y cierre <OL></OL> y
<LI>. el codigo para elaborar listas ordenadas es:

<OL>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>
En el ejemplo notamos cómo es posible omitir la marca <BR> para el salto de línea, dado que está automáticamente incluido en <LI>. Si no se establece diversamente (como veremos a continuación), el tipo de lista ordenada que el navegador visualiza está numerada (es decir, la lista consta de una serie de números que parte del 1 y va aumentando progresivamente). Las últimas versiones de HTML prevén la posibilidad de listas ordenadas que contengan un sistema de ordenación diverso del numérico antes citado:

Ordenación con letras mayúsculas:

<OL TYPE=A>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>
Ordenación con letras minúsculas:

<OL TYPE=a>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>
Ordenación con números romanos en mayúscula:

<OL TYPE=I>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>
Ordenación con números romanos en minúscula (romanitos):

<OL TYPE=i>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>

Listas desordenadas

Las listas desordenadas funcionan de manera similar a las ordenadas. La diferencia básica es que en el caso de las listas desordenadas no existen relaciones jerárquicas entre los elementos del elenco, por lo cual no se prevén ordenaciones progresivas como las obtenidas mediante números o letras.

Las listas desordenadas constan de una sola marca de apertura y cierre <UL></UL> y tantas marcas de lista como voces hay que ordenar <LI>. La sintaxis correcta para definir una lista desordenada es:

<UL>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>
Si no se especifica diversamente, cada voz del elenco va precedida de un símbolo geométrico.
Al igual que para las listas ordenadas, también en este caso podemos indicar diversos tipos de símbolos:

Los círculos sólidos de la lista anterior se obtienen con disc:

<UL TYPE=disc>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>
El atributo circle imposta circunferencias:

<UL TYPE=circle>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>
El atributo square imposta listas definidas por cuadrados sólidos:

<UL TYPE=square>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>

Color de fondo en Html

BGCOLOR

El atributo BGCOLOR imposta un fondo de un solo color. La sintaxis correcta es:

<BODY BGCOLOR="red">

Es posible sustituir el nombre en inglés con valores hexadecimales. Por ejemplo, el color rojo (red) se sustituye de esta manera:

<BODY BGCOLOR="#ff0000">

La utilidad de los colores hexadecimales es mayor cuando no se desea un color estándar sino tonalidades diversas o difuminadas. Los editores HTML de mayor difusión prevén paletas para la definición de los colores hexadecimales, mientras que Paint Shop Pro proporciona también, además del color, el correspondiente valor hexadecimal que copiar/pegar.

Encabezados y titulos.

Encabezados o Títulos

Podemos dar mayor o menor importancia a nuestros textos. Para eso se puede recurrir a los Encabezados mediante la etiqueta
<hn></hn>
donde n tiene un valor entero comprendido entre 1 y 6 (1 seria el de mayor importancia, 6 el de menor importancia).
Estos títulos o encabezados son párrafos, ya que producen saltos de línea.
Disponen del atributo align igual que los párrafos, aunque también están desaprobados a favor de las hojas de estilo como hemos dicho antes
Veamos un ejemplo:
<html>
<head>
<title>Ejemplo de Encabezados</title>
</head>
<body>
<h1>Encabezado tipo 1</h1>
<h2>Encabezado tipo 2</h2>
<h3>Encabezado tipo 3</h3>
<h4>Encabezado tipo 4</h4>
<h5>Encabezado tipo 5</h5>
<h6>Encabezado tipo 6</h6>
</body>
</html>
Realizamos la misma operación que detallamos en el post anterior, y probamos nuestro pequeño programita en el navegador, y listo veremos una lista de encabezados con diferentes formatos.
En el código podemos observar las diferentes etiquetas de un programa.
<html></html> al principio y al final del código.
<head></head> etiquetas de principio y fin del encabezado, y dentro de la cual se encuentra el titulo.
<title></title> etiqueta dentro de la cual se encuentra el titulo que se mostrara en la página web. Esta etiqueta a su vez se encuentra dentro del encabezado.

Intruccion a la programacion con html. 1erapunte

HTML (Hypertext Markup Languaje)

El HTML es mas una codificación que un lenguaje de programación. Su estructura básica es tan simple que cualquier persona sin principios en programación puede aprenderlo con gran facilidad.
Lo sorprendente de este lenguaje es que proporciona al usuario la información en una manera interactiva, haciendo uso del hypertexto , o texto con enlaces hacia otros lugares del Web, o hacia inserciones de multimedia (videos, sonidos, gráficos, etc.). Además es universal y no depende del sistema operativo que se esté utilizando.
Los documentos HTML se escriben en modo ASCII (texto plano), haciendo uso de cualquier procesador de palabras y en cualquier sistema operativo.

ESTRUCTURA BÁSICA

Para comenzar debemos saber que el HTML utiliza una codificación genérica, la cual hace uso de TAGS o etiquetas. Mediante estas etiquetas es posible separar el contenido del documento de su formato.
Los TAGS son comandos que se especifican en el cuerpo del programa, con el fin de darle las características deseadas a la información.
Toda página Web debe contener la siguiente estructura :

: <HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY> Esta es mi primera página Web</BODY>
</HTML>

La etiqueta <HTML> le indica al visualizador que va a comenzar a leer un documento HTML y se debe colocar siempre al comienzo y al fin del texto. La etiqueta <HEAD> indica un encabezado, dentro del cual se coloca información como el título, el cual debe estar contenido entre la etiqueta <TITLE>
Entre la etiqueta <BODY> va el cuerpo del documento, el cual es lo que realmente vemos en el Web. Para comenzar a escribir un documento, es importante tener en cuenta que el lenguaje HTML no distingue mas de un espacio entre caracteres y se olvida de cualquier formato que se le de al texto (negrilla, cursiva, tipo de letra, entre otras). Recordemos que para esto es que se creó el HTML, toda presentación final debe ser proporcionada mediante las etiquetas.
Cada etiqueta, con excepción de unas cuantas, le debe indicar al visualizador cuando finaliza, para lo cual se utiliza </TAG>, donde TAG es puede ser cualquier etiqueta. De esta manera indicamos cuando comienza y termina el encabezado, el título, el cuerpo y el documento HTML.

lunes, 22 de abril de 2013

Título 1: HTML

Título 2: HTML

Título 3: HTML

Título 4: HTML

Título 5: HTML

Título 6: HTML

lunes, 15 de abril de 2013

Encabezados o Títulos