Archivo

Entradas Etiquetadas ‘tutorial’

TUTORIAL HTML: 11. IMÁGENES

martes, 21 de julio de 2009 1 comentario

Para insertar imágenes, el código HTML utiliza la etiqueta <img> con sus correspondientes parámetros que son los que se enumeran a continuación:

  • src = «nombre de la imagen» (p. ej.: <img scr=»mifoto.jpg»>
  • alt = «Texto» Este parámetro muestra un texto alternativo cuando pasamos el ratón por encima de la imagen.
  • align = Indica como se alineará el texto con respecto a la imagen. Se puede alinear el texto con la parte superior de la imagen (top), con la parte central (middle), o con la inferior (bottom). También puede quedar la imagen a la derecha (right) del texto, rodeándolo, o a la izquierda (left).
  • border = Indica si lleva borde y su anchura.
  • height = Indica el alto de la imagen. Admite valores en puntos o en porcentaje.
  • width = Indica el ancho de la imagen. Admite valores en puntos o en porcentaje.
  • hspace = Indica el margen horizontal de la imagen con respecto al texto que le sigue o precede.
  • vspace = Indica el margen vertical de la imagen con respecto al texto que le sigue o precede.
  • lowsrc = «nombre de la imagen» Este atributo permite especificar una imagen auxiliar, que se abre en primer lugar, mientras carga la imagen definitiva. Se suelen usan imágenes de menor resolución, para que el usuario disponga de ellas cuanto antes. También se puede usar para logar ciertos efectos (muy simples) de animación. Este parametro no es reconocido por la totalidad de los navegadores.
Ejercicio 7:

Guarda una imagen cualquiera en la misma carpeta en la que guardarás tu archivo HTML. (Puedes guardar la imagen en cualquier carpeta, pero entonces deberás tener mucho cuidado a la hora de indicar la ruta).

Inserta el siguiente código dentro de la etiqueta <body></body>. En los dos primeros ejemplos vemos las diferencias de tamaño de la imagen especificadas por los atributos width (anchura) y height (altura)

Código en el editor de textos En el navegador
<img src=»surf.jpg» width=»139″ height=»89″/> Ejemplo de imagen pequeña
<img src=»surf.jpg» width=»196″ height=»125″/> Ejemplo de imagen grande

En los siguientes ejemplos se aprecia la diferencia de alineación del texto con respecto a la imagen. Observa el uso del atributo align, con sus correspondientes valores top, middle y bottom.

http://img269.imageshack.us/img269/8481/dibujovcx.png

Como sin duda habrás apreciado, la imagen y el texto están excesivamente juntos. Esto se puede mejorar usando los parámetros vspace y hspace.

http://img216.imageshack.us/img216/752/dibujorthlzs.png

El siguiente ejemplo muestra la imagen con borde de 4 puntos.

http://img145.imageshack.us/img145/1112/dibujofgj.png

Haz todos los cambios que creas necesarios hasta que consigas práctica. Prueba con textos más largos para ver las alineaciones de texto envolvente con los parámetros align=right y align=left.

Categories: Uncategorized Tags: , ,

TUTORIAL HTML: 10. LISTA DE ELEMENTOS

martes, 21 de julio de 2009 Sin comentarios

Podemos organizar nuestro texto haciendo uso de las llamadas listas de elementos, que consisten en esas enumeraciones utilizando números, letras o simplemente puntos para separar los diferentes apartados a tratar. Existen tres tipos:

  • Numeradas
  • Sin numerar
  • De definición

1. -Listas numeradas:

Cada elemento va precedido por un número. Para este tipo de lista se utiliza la etiqueta <ol></ol> . Cada uno de los elementos de la lista irá precedido de la etiqueta <li> .

Ejemplo:

http://img98.imageshack.us/img98/857/dibujoolc.png

Si queremos utilizar letras para ordenar nuestra lista (por defecto siempre utiliza HTML números), debemos añadir a la etiqueta <ol> el atributo type con los siguientes valores:

http://img140.imageshack.us/img140/9986/dibujolud.png

Ejemplos

http://img140.imageshack.us/img140/9665/dibujoamf.jpg

Si queremos empezar nuestra lista por cualquier otro número o letra (que no sean el 1 o la «a»), deberemos indicarlo con el atributo start.

http://img229.imageshack.us/img229/8554/dibujoybl.png

2.- Listas sin numerar.

En ellas, cada elemento va precedido por un «bullet» o punto. Se utiliza la etiqueta <ul></ul> para delimitar la lista, y <li> para indicar cada uno de los elementos.

Ejemplo:

http://img229.imageshack.us/img229/9330/dibujogsc.png

Con el parámetro type podemos indicar la forma del «bullet». Los valores de type pueden ser disc (disco) , circle (círculo vacío) o square (cuadrado). Si no indicamos nada, apacerá por defecto el disco.

Ejemplo:

http://img136.imageshack.us/img136/3681/dibujohuhfxh.png

3.- Listas de definición

Las listas de definición se tratan de listas a dos niveles. Es decir, muestran los elementos tipo glosario o diccionario. Sirven para distinguir entre una palabra a definir y su definición. Para este tipo de lista se utiliza la etiqueta <dl></dl> . El elemento marcado como palabra a definir viene marcado por la etiqueta <dt> , y la definición por la etiqueta <dd> .

http://img268.imageshack.us/img268/5283/dibujodeu.png

Listas de varios niveles o Listas anidadas

Podemos construir listas anidadas, es decir, listas que incluyen otras listas.

Todas las listas se pueden «anidar», es decir incluir una lista dentro de otra, con lo que se consigue una estructura tipo «indice de materias».

http://img216.imageshack.us/img216/9625/dibujoczt.png

Categories: Uncategorized Tags: , ,

TUTORIAL HTML: 9. FORMATOS ESPECIALES

martes, 21 de julio de 2009 Sin comentarios

La etiqueta <blockquote></blockquote>

La etiqueta <blockquote></blockquote> es una etiqueta que se utiliza para encerrar un texto parafraseado, una cita, un ejemplo, etc. y conseguir con ella un efecto de sangrado de texto. Tanto el margen izquierdo, como el derecho, se amplían automáticamente.

Ejemplo:

Este ejemplo y la mayoría de los que aparecen en este tutorial está formateado mediante la etiqueta blocquote.

Su código sería el siguiente:

<p>Ejemplo:</p>
<blockquote>
<p>Este ejemplo y la mayoría de los que aparecen en este tutorial está formateado mediante la etiqueta blocquote. </p>
</blockquote>

A continuación usamos dos veces consecutivas la etiqueta <blockquote> para sangrar aún más el texto.

Ejemplo:

Este ejemplo y la mayoría de los que aparecen en este tutorial está formateado mediante la etiqueta blocquote.

Su código sería el siguiente:

<p>Ejemplo:</p>
<blockquote>
<blockquote>
<p>Este ejemplo y la mayoría de los que aparecen en este tutorial está formateado mediante la etiqueta blocquote. </p>
</blockquote>
</blockquote>

La etiqueta <address></address>

La etiqueta <address> se usaba más en los primeros años de Internet, y en la actualidad tiende a desaparecer. Con ella se enmarcan datos como el nombre del autor de la página, el copyrigth, dirección de correo electrónico, etc. El texto siempre aparece en cursiva (por defecto).

Ejemplo:

DistritoWeb. Todos los derechos reservados. info@DistritoWeb.net

Su código sería:

<address>
DistritoWeb. Todos los derechos reservados. info@DistritoWeb.net
</address>

La etiqueta <pre>

Como ha quedado visto en el capítulo dedicado al párrafo, en HTML sólo se reconoce un espacio entre palabra y palabra; el resto de los espacios son ignorados por el navegador. Tampoco se respetan las tabulaciones, retornos de carro, etc… Por lo tanto, si necesitamos obligar al navegador a visualizar el texto tal y como está escrito necesitaremos enmarcarlo con la etiqueta <pre></pre>.

Ejemplo:

Este texto está escrito
 dentro de
 una
 etiqueta             pre, por lo tanto
 estos errores   de espaci
 os entre palabras los muestra 

 tal
 cual.

Este es su código:

<pre>Este texto está escrito
dentro de
una
etiqueta pre, por lo tanto
estos errores de espaci
os entre palabras los muestra

tal
cual. </pre>

Categories: Uncategorized Tags: , , ,

TUTORIAL HTML: 8. EL PÁRRAFO – ETIQUETA

martes, 21 de julio de 2009 Sin comentarios

La etiqueta <p></p> indica párrafo. La alineación de éste la definiremos con el parámetro align. Sus valores son:

  • left: alineación a la izquierda
  • right: alineación a la derecha
  • center: alineación al centro
  • justify: alineación justificada.

Ejemplos:

http://img229.imageshack.us/img229/3017/dibujosff.png

En HTML sólo se reconoce un espacio entre palabra y palabra, el resto de los espacios son ignorados por el navegador. Tampoco se respetan las tabulaciones, retornos de carro, etc… Por lo tanto, si necesitamos obligar al navegador a visualizar el texto tal y como está escrito necesitaremos enmarcarlo con la etiqueta <pre></pre>.

Para indicar los saltos de linea se utiliza la etiqueta <br>

Para los cambios de parrafo se utiliza la etiqueta <p> (en este caso no es necesario cerrarla)

http://img140.imageshack.us/img140/4117/dibujomxo.png

Ejercicio

Copia el código siguiente en el editor de textos y observa su apariencia en el navegador. (No caigas en la tentación de cortar y pegar el ejemplo; escríbelo tú mismo para practicar)

<html>
<head><title>Mi página web </title></head>
<body bgcolor=»#0D5C94″ text=»#FFFFFF»>
<p align=left>Este párrafo de texto está justificado a la izquierda</p>
<br>
<p align=right>Este párrafo de texto está justificado a la derecha.</p>
<br>
<p align=center>Este párrafo de texto está justificado al centro </p>
</body>
</html>

Este será el resultado:

http://img269.imageshack.us/img269/4734/dibujoocg.png

Categories: Uncategorized Tags: ,

TUTORIAL DE HTML: 7. ENCABEZAMIENTOS

martes, 21 de julio de 2009 Sin comentarios

HTML dispone de un método para destacar los títulos (o encabezamientos) y subtítulos con tipo de texto variable y negrita. Para ello se utiliza la etiqueta <h></h>. El texto que escribamos entre la etiqueta de inicio (<h>) y la de cierre (</h>) será el que resulte destacado como título. Las cabeceras fuerzan un salto de linea cuando se cierran, y el texto siempre está en negrita.
Existen 6 tamaños de cabeceras distintas:

<h1><h2><h3><h4><h5> y <h6> . Siendo la <h1> la que muestra el texto en mayor tamaño.

http://img169.imageshack.us/img169/1878/dibujokuz.png

Ejercicio

Utilizando como base el ejercicio 4, le añadiremos encabezamientos:

<h1>Este es el encabezamiento principal</h1>
<h3>Este es el subtítulo</h3>

De forma que nuestra página quedará del siguiente modo:

<html>
<head><title>Mi página web </title></head>
<body bgcolor=»#000000″ text=»#FFFFFF»>
<h1>Esto es el título principal</h1>
<h3>Este es el subtítulo</h3>
<font size=3 color=»#FFFFFF» face=»helvetica»> Este es un texto para practicar los diferentes estilos que podemos conseguir. <i>Aquí empieza la cursiva,</i><b> para dejar paso a la negrita.</b> Podemos tachar <s>lo que no nos guste</s> o <u>subrayar toda una frase</u>. Para nuestras fórmulas es muy útil el subindice como en b<sub>1</sub> o el superíndice como en m<sup>2</sup>. </font>
</body>
</html>

Este será el efecto conseguido:

http://img216.imageshack.us/img216/2465/dibujoool.png

Categories: Uncategorized Tags: , ,

TUTORIAL HTML: 6. ESTILO DE TEXTO-ETIQUETA

martes, 21 de julio de 2009 Sin comentarios

La etiqueta <font></font> se refiere a la fuente utilizada en el documento. Va colocada dentro del cuerpo del documento (<body><font></font></body>). Admite diferentes atributos:

  • size: Define el tamaño en puntos.
  • color: Define color (con los valores RBG o el nombre del color en inglés).
  • face: tipo de fuente (arial, georgia, verdana, etc.)

Ejemplo:

http://img140.imageshack.us/img140/2012/dibujoxvd.png

Para modificar el estilo de texto (negrita, cursiva, etc…) existen las siguientes etiquetas que enmarcarán la porción de texto a la que queramos aplicar el estilo correspondiente:

http://img269.imageshack.us/img269/5300/dibujownj.png

Ejercicio:

Escribe el siguiente código en tu editor de textosy edítalo en el navegador. Haz todos los cambios que creas necesarios para ver los diferentes efectos.

<html>
<head><title>Mi página web </title></head>
<body bgcolor=»#0D5C94″ text=»#FFFFFF»>
<font size=3 color=»#FFFFFF» face=»helvetica«> Este es un texto para practicar los diferentes estilos que podemos conseguir. <i>Aquí empieza la cursiva,</i><b> para dejar paso a la negrita.</b> Podemos tachar <s>lo que no nos guste</s> o <u>subrayar toda una frase</u>. Para nuestras fórmulas es muy útil el subindice como en b<sub>1</sub> o el superíndice como en m<sup>2</sup>. </font>
</body>
</html>

Este será el efecto conseguido:

http://img269.imageshack.us/img269/2186/dibujontr.png

Categories: Uncategorized Tags: , , ,

TUTORIAL HTML: 5. CUERPO DEL DOCUMENTO

martes, 21 de julio de 2009 Sin comentarios

La etiqueta <body></body> engloba el contenido principal del documento HTML (textos, imágenes, etc.). Esta etiqueta puede llevar parámetros opcionales relativos al color de fondo del documento y al color del texto y los enlaces. Estos parámetros son:

  • bgcolor = Define el color de fondo del documento.

Ejemplo: <body bgcolor=»#000000></body>

  • background= Hace referencia al fichero de imagen que servirá como fondo de la página. Si la imagen no rellena todo el fondo del documento, será reproducida en mosaico.

Ejemplo: <body background=»mifoto.jpg»></body>

  • text = Define el color para el texto del documento. Por defecto es negro.

Ejemplo:<body text=»red»></body>

  • link = Define el color de los enlaces. Por defecto es azul.

Ejemplo: <body alink=»#00FF00″></body>

  • vlink = Define el color de los enlaces ya visitados. Por defecto es morado.

Ejemplo: <body vlink=»yellow»></body>

El color puede describirse de dos formas:

  • Por medio del nombre del color en inglés (ver cuadro de colores).
  • Por medio de una expresión numérica: Consiste en la formación de un código RBG (Red, Green, Blue) compuesto por tres valores hexadecimales que señalan la proporción de cada uno de ellos en el color resultante. Es necesario colocar delante de ellos el símbolo «almohadilla» (#).

Cuadro de colores :

http://img148.imageshack.us/img148/8061/dibujoztg.png

Puedes ver todos los colores en html en: http://html-color-codes.com/

🙂

Ejercicio :

Copia el siguiente código en el editor de textos (te recomiendo que escribas los códigos a mano y no caigas en la tentación de copiar y pegar, pues es la mejor forma a aprender HTML)

<html>
<head><title>Mi página web </title></head>
<body bgcolor=»#000000″ text=»#FFFFFF» link=»#00FF00″ vlink=»#0000FF»>Este es el texto de mi página web </body>
</html>

Guárdalo como «ejercicio_2.html» (recuerda poner la extensión «html», si no se guardará por defecto como text).Ábrelo desde tu navegador y observa la apariencia. Haz los cambios necesarios hasta que adquieras cierta práctica. Prueba a poner cualquier imagen de fondo. Guarda la imagen en la misma carpeta en la que hayas guardado el ejercicio_2.html y añade el siguiente atributo dentro de la etiqueta body:

background=»nombrearchivo.jpg»

Puedes guardar las imágenes en otra carpeta (de hecho es lo recomendable) pero entonces tendrás que tener mucho cuidado al indicar la ruta al navegador.

Prueba el resultado. Verás que la imagen de fondo anula el color de fondo. Como por ahora no hemos colocado ningún link en nuestra página, no podrás ver el efecto. Si quieres, para ir probando, añade lo siguiente a continuación de la palabra web.

<a href=»#»>esto es un link </a>

De modo que quede como sigue:

<html>
<head><title>Mi página web </title></head>
<body bgcolor=»#000000″ text=»#FFFFFF» alink=»#00FF00″ vlink=»#0000FF»>Este es el texto de mi página web. <a href=»#»>esto es un link </a></body>
</html>

Prueba a indicar los colores usando sus nombres en inglés en vez del valor RBG:

<body bgcolor=»blue» alink=»green» vlink=»yellow»>

Categories: Uncategorized Tags: , ,

TUTORIAL HTML: 3. ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML

martes, 21 de julio de 2009 Sin comentarios

Un documento escrito en HTML consta de las siguientes etiquetas básicas:

<HTML> Indica el inicio del documento.
<HEAD> Inicio de la cabecera.
<TITLE> Inicio del título del documento.
</TITLE> Final del título del documento.
</HEAD> Final de la cabecera del documento.
<BODY> Inicio del cuerpo del documento.
</BODY> Final del cuerpo del documento.
</HTML> Final del documento.

Ejercicio :

Abre el editor de textos (el bloc de notas, por ejemplo) y escribe lo siguiente:

<html>
<head><title>Mi página web </title></head>
<body>Este es el texto de mi página web </body>
</html>

Guarda el archivo como «prueba.html» (no olvides escribir la extensión html). No es necesario entrar en internet para ver una página, ni tenerla colgada aún. Abre tu navegador. En el menú, haz clic en Archivo/Abrir. En la ventana emergente pulsa «examinar». Busca y abre el archivo que acabas de guardar. Observa el aspecto de tu primera página. Como ves, lo que has escrito como título aparece en la barra de tu navegador, no es el título del texto.

En el navegador, haz clic en menú/ver/código fuente. Se abre el editor de textos donde podrás leer el código HTML. Aquí mismo puedes hacer los cambios que quieras y guardarlos. Para volver a verlos sólo tienes que actualizar la página del navegador.

Categories: Uncategorized Tags: , , ,

TUTORIAL HTML: 2. ETIQUETAS

martes, 21 de julio de 2009 Sin comentarios

HTML consta de una serie de órdenes que indican al navegador cómo queremos que aparezcan representados todos los elementos (texto, imágenes, rótulos, etc…) que contiene el documento. Estas órdenes son las etiquetas, que van enmarcadas por los signos <>.

Ejemplos:

<a> <font> <table> , etc.

Las etiquetas de HTML pueden ser de dos tipos: cerradas o abiertas.

1. Etiquetas cerradas

Son aquellas que tienen una palabra clave que indica el principio de la etiqueta y otra que indica el final.

Ejemplo:

<p>Esta lección es fácil</p>

La etiqueta <p></p> es la que contiene el texto de un párrafo. Decimos que es etiqueta cerrada porque necesita <p> para iniciar el párrafo y </p> para cerrarlo. (Obrsérvese la barra «/» de la etiqueta de cierre)

Entre la etiqueta inicial y la final se pueden encontrar otras etiquetas, encerradas unas por otras como si de muñecas rusas (matruskas) se tratara.

Ejemplo:

<p> Esta <b>lección</b> es fácil</p>

La palabra «lección» del ejemplo está encerrada dentro de la etiqueta <b></b> que indica estilo negrita. En este caso; únicamente la palabra «lección» aparecerá en negrita. Esto será lo que veremos en el navegador:

Esta lección es fácil.

2.- Etiquetas abiertas:

Constan de una sola palabra clave. No necesitan cerrarse al final.
Ejemplo:

<br>

que indica salto de línea.

Parámetros de las etiquetas.

Una etiqueta puede contener «parámetros», es decir, otras palabras claves que especifican y definen aún más concretamente cada etiqueta. Los parámetros se indican a continuación de la palabra clave de la etiqueta y dentro de sus signos <>.

Ejemplo:

<body bgcolor=»#FFFFFF»> </body> Bgcolor es un parámetro de la etiqueta <body>. Indica que el color de fondo del cuerpo del documento es blanco ( #FFFFFF)

*nota: hemos resaltado las etiquetas en negrita para una mayor comprensión, pero no es necesario hacerlo en nuestro editor de texto.

Categories: Uncategorized Tags: , ,

TUTORIAL HTML: 1. INTRODUCCIÓN

martes, 21 de julio de 2009 Sin comentarios

HTML (Hyper Text Markup Language) no es un lenguaje de programación, en realidad es el lenguaje informático que se utiliza para estructurar las páginas web.

El elemento básico de HTML es el texto. Para crear tu primera página Web tan sólo se necesita un editor de textos sencillo, como el Bloc de Notas de Windows.

Existen editores específicos para realizar paginas Web donde por medio de comandos se pueden incluir las etiquetas, sin necesidad de teclearlas, pero para llegar a un completo conocimiento de HTML te recomendamos que aprendas a usar HTML con el Bloc de Notas. Más adelante, cuando trabajes con programas de diseño de páginas web (Dreamweaver, Frontpage, etc) encontrarás sin problema los errores que irremediablemente cometas si dominas el lenguaje HTML.

Importante: utiliza siempre minúsculas para los nombres de tus archivos y no pongas acentos. Utiliza también la barra baja para los espacios entre palabras. ¡¡Te ahorrarás muchos quebraderos de cabeza!!.

Ejemplo:

<a href=«texto_unico.html»</a>

mejor que

<a href=«Texto único.html»</a>

Categories: Uncategorized Tags: , ,
Ir a la barra de herramientas