Estilos de Caracter en HTML

Estos estilo son tags que afectan a palabras o carácteres dentro de otras entidades de HTML modificando el aspecto de ese texto para que sea diferente del texto que lo rodea. Existen dos tipos de estilos:

• Estilos lógicos: Indican como se va a emplear el texto que realzamos, no el como se va a formatear.
  
  
  
  • <em>.....</em>: Indica que los carácteres estarán enfatizados de alguna manera, generalmente en cursiva aunque dependerá del navegador.
  
  
  • <strong>.....</strong>: Los carácteres tendrán mayor énfasis, generalmente en negrita.
  
  
  • <code>.....</code>: Muestra como una fuente monoespaciada, generalmente Courier.
  
  
  • <samp>.....</samp>: Muy similar a code.
  
  
  • <kdb>.....</kdb>: Texto que el usuario debe escribir.
  
  
  • <var>.....</var>:Nombre de una variable que deba ser reemplazada por su valor real. Generalmente en cursiva o subrayada.
  
  
  • <dfn>.....</dfn>:Se usa para resaltar una palabra que se va a definir.
  
  
  • <cite>.....</cite>: Se usa para citas cortas.
  
  
  
  


• Estilos físicos: Modifican la presentación real del texto.
  
  
  
  • <b>.....</b>: Pone el texto en negrita.
  
  
  • <i>.....</i>: Pone el texto en cursiva.
  
  
  • <tt>.....</tt>: Pone el texto en fuente monoespaciada.
  
  
  • <u>.....</u>: Subraya el texto afectado.
  
  
  
  

Listas en HTML

Junto con encabezados y párrafos, son otro de los elementos HTML más comunes. Pueden darse cinco tipos diferentes de listas, cada uno con tags distintas aunque con alguna en común:

• Listas numeradas u ordenadas: Se engloban por las tags <ol>.....</ol> y cada elemento de la lista estará encabezado por la tag <li> que puede o no llevar la tag de cierre </li>. Es conveniente que cada elemento de la lista esté en una línea nueva aunque todo seguido consiga en la presentación el mismo efecto. Cuando el navegador interpreta una lista ordenada, numera y sangra cada elemento en forma secuencial, aunque se introduzcan modificaciones
  


• Listas con viñetas o sin orden: Se engloban por las tags <ul>.....</ul> y cada elemento de la lista, también estará encabezado por la tag <li>. El resultado es que el navegador inserta viñetas (marcadores) delante de cada elemento.
  
  


• Listas de menú y de directorio: Están en desuso puesto que su resultado suele ser, prácticamente, idéntico al de las listas con viñetas.
  
  
  
  • Menú: Englobadas por las tags <menu>.....</menu> y cada elemento encabezado por la tag <li>.
  
  
  • Directorio: Englobadas por las tags <dir>.....</dir> y cada elemento encabezado por la tag <li>.
  
  
  
  
  


• Listas de glosario: Cada elemento de la lista está compuesto por un término y una definición y cada una de estas partes tiene su propia tag. Estas listas se engloban con las tags <dl>.....</dl>. Para el término se usa la tag <dt> y para la definición la tag <dd>. Generalmente el navegador colocará término y definición en dos líneas diferentes pero esto se puede evitar añadiendo a la tag de apertura el atributo compact: <dl compact>.
  


• Listas anidadas: Consiste en poner una lista dentro de otra, de manera que la lista secundaria sangre respecto a la principal. Puede jugar con los diferentes tipos de lista pero recuerde estructurar bien las tags: Las tags de la lista principal englobarán todo el conjunto de las listas y las tags de las listas secundarías se cerraran antes de volver a la lista principal. Ahora quizá le empiece a convenir sangrar el propio código conforme lo va escribiendo en HTML.

Manejo de URL en HTML

Los URL son las direcciones de las informaciones que buscamos en Internet. Los URL constan de tres partes:

Protocolo: Es el programa que utilizará el navegador para obtener el archivo elegido. Les suena HTTP, FTP, Gopher...
Nombre del host: Se trata del sistema donde se encuentra almacenada la información que buscamos.
Ruta del fichero: Se trata de la ubicación del archivo dentro del host.
http://www.bienvenidos.es/publico/saludos.html

Entre los principales tipos de URL destacan:

HTTP: Son los más populares ya que son los utilizados por los servidores de WWW para mandar documentos a través de Internet.
FTP: Se utilizan para apuntar hacia los archivos que estén en servidores que usan el protocolo FTP (File Transfer Protocol). Este protocolo es normalmente utilizado para enviar y recibir ficheros. Es el protocolo que se usa para enviar nuestras páginas al servidor de internet. Como ya se puede imaginar en estos servidores se almacenan los archivos que forman parte de nuestra presentación web.
File: Apuntan hacia archivos contenidos en el mismo disco que se encuentra el navegador. No resulta muy interesante poner estos URL en nuestras presentaciones puesto que otra persona que desde otro sistema apunte hacia este URL, generalmente fallará en su intento y no podrá tener acceso a él.
Mailto: Se usa para mandar correos electrónicos. Cuando seleccionamos este tipo de URL se abre la aplicación de correo electrónico de nuestro ordenador para enviar un correo a la dirección hacia la que apunta el URL. La forma estandar es: mailto:webmaster@bienvenidos.es
News: Son URL de grupos de noticias, en estos servidores se almacenan mensajes el los que se discuten sobre direfentes temas.

<HTML>

<HEAD>

<TITLE>Ejemplo 5</TITLE>

</HEAD>

<BODY>



<H1>Diferentes tipos de URLs</H1>



Enlace a <A HREF="http://www.webestilo.com">WebEstilo</A>.

<br>

Enlace al servidor de FTP

de <A HREF="ftp://ftp.mozilla.org/pub/mozilla/">Mozilla</A>.

<br>

Enlace a <A HREF="file:///C:">la unidad C

de su ordenador</A>.

<br>

Enlace a <a href="mailto:webmaster@bienvenidos.es">

mailto:webmaster@bienvenidos.es</a>.

<br>

Enlace a las <A HREF="news://msnews.microsoft.com">News de Microsoft</A>.

<br>



</BODY>

</HTML>

Crear Enlaces en HTML

Para generar un enlace a otro documento necesitamos el nombre de un archivo (o su dirección URL) y el texto que servirá de punto de activación del otro documento. Este segundo elemento será el que veamos en pantalla y que se servirá del primero para saltar de documento.

Los enlaces se generan mediante la tag <A>.....</A> y, a diferencia de los vistos anteriormente, llevará siempre dentro de la tag un atributo ya sea <A HREF=""> o <A NAME="">.

• <A HREF="URL">.....</A>: Es el más habitual de los atributos y sirve para saltar entre diferentes URLs. De momento veremos:
  
  
  
  • Saltar en una presentación del archivo 1 al archivo 2: En el archivo 1 incluiremos la directiva <A HREF="archivo2.html">Siguiente página</a>
  
  
  • Saltar de nuestra presentación a otra presentación web llamada www.bienvenidos.es: <A HREF="http://www.bienvenidos.es">Visita esta página</A>
  
  
  
  


• <A NAME="parte1">Primera parte</A>: Utilizamos el atributo name para dar nombre a una sección de nuestro documento. Posteriormente, cuando en nuestro documento queramos incluir un vínculo a dicha sección escribiremos: <A HREF="#parte1">Ir a la primera parte</A>

Manejo de Etiquetas para Parrafos en HTML

Para esto se utiliza la etiqueta <P> y </P>. Este comando es muy útil debido a que si uno escribe algo (en el editor que se este utilizando) por mucho espacio que uno le de siempre al texto, siempre va a aparecer en la misma línea.

Para alinear un párrafo se utiliza el comando <ALING> y </ALING>, utilizado dentro de la etiqueta <P>. Se puede alinear de tres formas diferentes:

<p align="left"> Párrafo... </p> Alinea a la izquierda.

<p align="center"> Párrafo... </p> Realiza un centrado.

<p align="right"> Párrafo... </p> Alinea a la derecha.

Cuando nosotros queremos que lo que escribimos aparezca en otra línea utilizamos el comando <BR>.

Al terminar de escribir un párrafo es conveniente y estético utilizar el comando para separar un párrafo de otro que es <HR>

Etiquetas para darle formato al texto:

Para el tamaño y tipo de letra se usa la etiqueta <FONT> y </FONT>, que posee tres atributos: tamaño (Size), Tipo de letra o fuente (face) y color

Formato:

<B> y </B> Sirve para colocar un texto en Negrita.

<U> y < /U> Sirve para subrayar un texto

<STRIKE> y </STRIKE> Sirve para tachar un texto.

<STRONG> y </STRONG> Cumple la misma función que <B>

<I> y <I> Para colocar un texto en cursiva.

<EM>texto con énfasis</EM>  texto con énfasis

<CITE>citación</CITE>  citación

<DFN>definición</DFN> definición

<KBD>teclado</KBD>  teclado

<SAMP>ejemplo</SAMP>  ejemplo

SIZE: Regula el tamaño de los caracteres.

Ejemplo:<FONT SIZE="3"> texto... </FONT>.

FACE: Es la fuente que se quiere usar, Arial, Times new Roman, etc.

Ejemplo:

<FONT FACE=”ARIAL”> texto…</FACE>

Color: Regula el color de los caracteres. En principio existen dos posibilidades para definir los colores en HTML:

1. Mediante la especificación de los valores RGB del color deseado en forma hexadecimal (RGB=Red/Green/Blue, valores Rojo/Verde/Azul)

2. Mediante la especificación del nombre del color en ingles

Ejemplos:

<FONT COLOR="WHITE">Blanco</FONT> Blanco #FFFFFF
<FONT COLOR="BLACK">Negro</FONT> Negro #000000
<FONT COLOR="RED">Rojo</FONT> Rojo #FF0000
<FONT COLOR="GREEN">Verde</FONT> Verde #00FF00
<FONT COLOR="BLUE">Azul</FONT> Azul #0000FF
<FONT COLOR="YELLOW">Amarillo</FONT> Amarillo #FFFF00
<FONT COLOR="CYAN">Cyan</FONT> Cyan #00FFFF
<FONT COLOR="MAGENTA">Magenta</FONT> Magenta #FF00FF

Si nos decidimos a trabajar con valores hexadecimales, entonces tenemos la libertad de utilizar 16,7 millones de colores. De esta manera trabajamos independientemente de los navegadores Web.

Si especificamos el nombre del color, podemos evitar la definición del color en forma hexadecimal que es un poco más difícil. Actualmente están estandarizados tan sólo 16 colores. Existen colores adicionales los cuales son dependientes de los navegadores Web.

Primero que todo debe escribir un símbolo #. A continuación siguen las 6 cifras para la definición del color. Las primeras 2 cifras definen el valor rojo, las siguientes 2 el valor verde y las 2 últimas el valor azul.
Las cifras hexadecimales son:

0 (corresponde al decimal 0)
1 (corresponde al decimal 1)
2 (corresponde al decimal 2)
3 (corresponde al decimal 3)
4 (corresponde al decimal 4)
5 (corresponde al decimal 5)
6 (corresponde al decimal 6)
7 (corresponde al decimal 7)
8 (corresponde al decimal 8)
9 (corresponde al decimal 9)
A (corresponde al decimal 10)
B (corresponde al decimal 11)
C (corresponde al decimal 12)
D (corresponde al decimal 13)
E (corresponde al decimal 14)
F (corresponde al decimal 15)

Para ponerle color de fondo a la página escribir:

<body bgcolor=#808080></body> con el cual obtendremos un color de fondo gris oscuro.

Colocar mal los colores de fondo en nuestras páginas puede provocar problemas. ¿Qué ocurría con los links o enlaces si colocáramos un fondo de color azul?. Puesto que los links son azules cuando todavía no se han pulsado puede ocurrir que no se puedan leer con claridad o incluso que no se puedan distinguir en absoluto del fondo.

Se puede imaginar todavía un caso peor si decidiéramos colocar un fondo demasiado oscuro, tan oscuro que no permitiera distinguir con claridad la información que se presenta en pantalla. Podemos remediar esto eligiendo nosotros mismos el color que queremos que tengan los links o enlaces e incluso el texto, las etiquetas para hacer esto son las siguientes:

• text="#número" Para el color del texto.


• link="#número" Para el color de los enlaces.


• vlink="#número" El color con que aparecerán los enlaces ya visitados.


• alink="#número" Color del enlace cuando lo pulsamos.

Por lo tanto la etiqueta <body> puede quedar del siguiente modo:

<body bgcolor="#num" text="#num" link="#num" vlink="#num" alink="#num">

Ahora veremos como poner una imagen de fondo. Es muy sencillo, basta con usar la etiqueta:

background="localización de la imagen" Esta etiqueta va dentro de la etiqueta <body>.

Ejemplo:

<body background="/documentos/html/gifs/dragonball.gif">

Con esto lograremos que la imagen dragonball.gif aparezca como fondo en nuestra pagina.

Etiquetas META

Son usadas para poner meta-información del documento. Esta “directiva” indica al visor de Internet las palabras clave y contenido de nuestra página Web. Muchos de los buscadores de páginas Web de Internet (Yahoo, Lycos, etc...) utilizan el contenido de esta directiva para incluir la página en sus bases de datos.

Ejemplo:

<META NAME = "Pagina de Pablo" content = "Mi pagina personal de Sailor Moon">

Indica al visor el nombre de la página y sus contenidos principales.
<META NAME="Author" content="Pablo Ravioli">
Indica el nombre de la persona que elabora la pagina WEB
<META NAME = "keywords" content = "Información de Sailor Moon">

Indica al visor las palabras clave para los buscadores de Internet.

Para hacer listas:

Las listas se definen de forma muy sencilla: se dice dónde empieza la lista, dónde empieza cada punto y dónde acaba la lista. Las etiquetas que se utilicen en cada caso deben aparecer al principio de línea, o al menos sin texto por delante (sólo espacios o tabulaciones).

Las listas pueden ser: Lista desordenada, <UL> (Unordered List).

Lista ordenada, <OL> (Ordered List).

Ejemplos de diferentes tipos de listas:

Lista con números romanos:

<ol>
<li type=I>Manzana
<li type=I>Zanahoria
<li type=I>Lechuga
<li type=I>Tomate
</ol>

1. Manzana
   
2. Zanahoria
   
3. Lechuga
   
4. Tomate
   

Lista numerada:
<ol>
<li>Manzana
<li>Zanahoria
<li>Lechuga
<li>Tomate
</ol>

1. Manzana
   
2. Zanahoria
   
3. Lechuga
   
4. Tomate
   

Lista con puntos:
<ul>
<li> Manzana
<li> Zanahoria
<li> Lechuga
<li>Tomate
</ul>

• Manzana
  
• Zanahoria
  
• Lechuga
  
• Tomate
  

Lista con círculos:
<ul>
<li type=circle> Manzana
<li type=circle> Zanahoria
<li type=circle> Lechuga
<li type=circle> Tomate
</ul>

• Manzana
  
• Zanahoria
  
• Lechuga
  
• Tomate
  

Lista con cuadrados:
<ul>
<li type=square> Manzana
<li type=square> Zanahoria
<li type=square> Lechuga
<li type=square> Tomate
</ul>

• Manzana
  
• Zanahoria
  
• Lechuga
  
• Tomate
  

Creando La Primera Pagina en Html

Para crear una página web se pueden utilizar programas especializados en esto, como por ejemplo, el Microsoft Front Page o el Macromedia Dreamweaver 8. De la misma tambien se puede generar una pagina mediante el bloc de notas que trae windows.

A continuación les mostraremos las etiquetas mas comunes que deben aprenderse para hacer una pagina Web.

Estructura de los documentos de HTML
Si se tiene en cuenta el contenido del documento, todos los documentos de HTML bien escritos comparten una estructura en común. Un documento de HTML empieza con la etiqueta <HTML>, que es la que encerrará el documento actual. Contiene dos secciones primordiales: la cabecera y el cuerpo encerradas respectivamente por los elementos <HEAD> cabeza y <BODY> cuerpo.
La cabecera puede contener información y siempre contiene el titulo del documento encerrado por el elemento <TITLE>.
En el cuerpo se encuentra todo el contenido del documento, ya sea, texto, imágenes, sonidos, hipervínculos, etc.
Un documento escrito en HTML contiene las siguientes etiquetas en el siguiente orden:

Ejemplo:

<HTML>
<HEAD>
<TITLE> Título de mi página de Internet >/TITLE>
</HEAD>
<BODY>
<H1> >CENTER> Primera pagina >/CENTER> >/H1>
<HR>
Esta es mi primera pagina.
<P> Aquí va un segundo párrafo.
</BODY>
</HTML>

Para escribir títulos se usa la etiqueta en donde x es un número.
Ejemplo:

<h1>Titulo principal</h1>
<h2>Titulo secundario</h2>
<h3>Titulo terciario</h3>
<h4>Titulo cuarto nivel</h4>
<h5>Titulo quinto</h5>
<h6>Titulo sexto</h6>

Titulo principal

Titulo secundario

Titulo terciario

Titulo cuarto nivel

Titulo quinto

Titulo sexto

Principiando con html

El HTML, Hyper Text Markup Language (Lenguaje de marcación de Hipertexto) es el lenguaje de marcas de texto utilizado normalmente en la www (World Wide Web). Fue creado en 1986 por el físico nuclear Tim Berners-Lee; el cual tomo dos herramientas preexistentes: El concepto de Hipertexto (Conocido también como link o ancla) el cual permite conectar dos elementos entre si y el SGML (Lenguaje Estándar de Marcación General) el cual sirve para colocar etiquetas o marcas en un texto que indique como debe verse. HTML no es propiamente un lenguaje de programación como C++, Visual Basic, etc., sino un sistema de etiquetas. HTML no presenta ningún compilador, por lo tanto algún error de sintaxis que se presente éste no lo detectará y se visualizara en la forma como éste lo entienda.
El entorno para trabajar HTML es simplemente un procesador de texto, como el que ofrecen los sistemas operativos Windows (Bloc de notas), UNIX (el editor vi o ed) o el que ofrece MS Office (Word). El conjunto de etiquetas que se creen, se deben guardar con la extensión .htm o .html
Estos documentos pueden ser mostrados por los visores o “browsers” de paginas Web en Internet, como Netscape Navigator, Mosaic, Opera y Microsoft Internet Explorer.
También existe el HTML Dinámico (DHTML), que es una mejora de Microsoft de la versión 4.0 de HTML que le permite crear efectos especiales como, por ejemplo, texto que vuela desde la página palabra por palabra o efectos de transición al estilo de anuncio publicitario giratorio entre página y página.

A continuación vamos a hablar un poco de historia:

1986. Publicación de la ISO 8879 que presenta el Standard General Markup Language, origen del HTML.

1989. Tim Berners-Lee, a la sazón en el Centro Europeo de Investigaciones Nucleares presenta su artículo Information Management: A Proposal dedicándose de lleno al desarrollo de un sistema que permitiera el acceso en línea de manera uniforme a la información disponible en muchos recursos distintos, y que pudiese funcionar en máquinas que conectadas por redes basadas en TCP/IP.

1990-1991. Tim Berners-Lee define el HTML como un subconjunto de SGML (Standard Generalized Markup Language), que más tarde se llamará nivel 0; soporta encabezados, listas y anclas. Se crea el nombre World Wide Web.

1991. Tim Berners-Lee introduce el primer visor de HTML, LineMode, que trabaja en modo texto y sólo en plataformas UNIX. El Centro Europeo de Investigaciones Nucleares realiza la apertura del primer sitio con acceso público de World Wide Web el 17 de mayo (http://info.cern.ch).

1992. Dan Connolly produce la primera Definición de Tipo de Documento (DTD) para el lenguaje, llamada HTML 1.0, agregando a la definición original atributos para modificar el estilo físico del texto. Se distribuye Viola, primer visor gráfico de Web y disponible sólo para X.11.

1993. Un nuevo visor que soporta un mayor nivel, Lynx, es producido por la Universidad de Kansas, si bien lee sólo texto. Aparece Mosaic, desarrollado por el Centro Nacional para Aplicaciones de Supercomputadoras, es el primer visor de Web en entorno gráfico que se hace disponible para computadoras personales, lo que lo hace inmediatamente popular. A fines de año, comienzan a aparecer los primeros artículos sobre WWW en diarios y revistas de circulación masiva. Tim Berners-Lee utiliza el trabajo del año anterior de Connolly para presentar el borrador de la primera norma (RFC -Recommendation for Comments) de HTML para Internet.

1994. La Universidad Técnica de Graz desarrolla un servidor y clientes con mayores prestaciones para HTML, Hyper-G, que no tiene gran éxito. Cello, primer visor de HTML que no requiere TCP/IP presentado por la Escuela de Leyes de la Universidad de Cornell. Dan Connolly y Karen Olson Muldrow redefinen el HTML para el nivel 2.0, que ahora soporta formularios. Un grupo de programadores que desarrollaran el Mosaic producen un nuevo visor de World Wide Web, Netscape (también conocido como Mozilla), que tiene una amplia aceptación entre los usuarios, pero que soporta elementos de programación que equivalen a una degeneración del HTML (tamaños de letra, fondos). Se define un equivalente para los modelos en tres dimensiones del HTML, el VRML (Virtual Reality Modeling Language), que permite moverse dentro de los ambientes definidos. En este mismo año se realizan la Primera y Segunda conferencias internacionales de WWW, en Ginebra y Chicago, respectivamente. Se crea la W3 Organization.

1995. Dave S. Raggett (Hewlett-Packard, Inglaterra) comienza a compilar la normativa del nuevo nivel del lenguaje, el HTML 3.0, cuya principal novedad es el soporte de tablas. Microsoft produce su primer visor de Internet, el cual también utiliza elementos de HTML degenerados. Una nueva versión de Netscape, Navigator 2.0, agrega soporte de encuadres. Sun Microsystems produce el primer visor de World Wide Web con soporte de un lenguaje de programación, HotJava. Se celebran la Tercera y Cuarta conferencias internacionales de WWW, en Boston y Darmstadt respectivamente, y la conferencia de WWW para Asia y el Pacífico en Wagga-Wagga.
1996. Netscape Communications y Microsoft presentan las nuevas versiones de sus visores que soportan gran parte del nivel de HTML 3.0. Aparecen visores no comerciales que implementan la norma completa de HTML 3.0. Se formaliza un nuevo nivel para la modelación en tres dimensiones, VRML 3.0, que permite interactuar con los objetos definidos. Se celebra la Quinta conferencia internacional de WWW en Rocquencourt.

1997. D. Raggett presenta, en enero, la versión normalizada del 3.2. En julio, aparece la versión 4.0, experimental.
1998. HTML 4.0.