Curso de HTML

CONTENIDOS PAGINA # 2

Empezando a trabajar

Empezando a trabajar

Ya podemos empezar a trabar con HTML. Para ello no olvides que necesitamos y un navegador un procesador de texto como ya habíamos mencionado antes; una vez que hallas empezado y desees guardar es conveniente que almacenes el archivo con extensión (htm o html), que son los tipos de fichero que por defecto buscará el navegador (aunque puede visualizar archivos con otras extensiones). Para visualizar un archivo, utiliza la orden Abrir Archivo (Open File) del menú Archivo (File) de tu navegador. Siempre que realices una modificación en el código y la almacenes en el mismo fichero, utiliza la función recargar (reload) del navegador, para comprobar los cambios.

1. Cabecera del documento

Las ordenes <HEAD> y </HEAD> delimitan la cabecera del documento. Dentro de la cabecera es importante definir el título de la página por medio de las ordenes <TITLE> y </TITLE>. Este título será el que aparezca en la barra de nuestro visor de páginas Web.

Ejemplo :

<TITLE>La página de Julián</TITLE>

Dentro de la cabecera de nuestro documento podemos incluir otras ordenes adicionales. La orden <META> 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 orden para incluir la página en sus bases de datos. La orden <META> lleva generalmente dos parámetros, name y content.

Ejemplos :

<META name = "Pagina de Julián" content = "Mi pagina personal, Programación">: Indica al visor el nombre de la página y sus contenidos principales.
<META name = "keywords" content = "Julian Programación links Colombia">: Indica al visor las palabras claves para los buscadores de Internet.

Otro uso de la orden <META> es la de indicar documentos con "refresco automático". Si se indica una URL se sustituirá el documento por el indicado una vez transcurridos el número de segundos especificados. Si no se incluye ninguna URL se volverá a cargar en el visor el documento en uso transcurridos los segundos indicados. Esto es util para páginas que cambian de contenido con mucha frecuencia o para redireccionar a la persona que visita nuestra pagina Web a una nueva dirección donde se encuentra una versión actualizada de nuestra pagina Web.

Ejemplo :

<META http-equiv="refresh" content = "15; URL = http://www.micasa.yupi.com/Julian-Andres/index.htm">: Transcurridos 15 segundos se accederá a la pagina principal de este curso.

La orden <BASE> indica la localización de los ficheros, gráficos, sonidos, etc... a los que se hace referencia en nuestra página Web. Si no se incluye esta orden el visor entiende que dichos elementos se encuentran en el mismo lugar donde se encuentra nuestra página Web.

Ejemplo :

<BASE href = " http://www.jet.co/julian/ ">

2. Cuerpo del documento

La orden <BODY></BODY> indica el inicio y final de nuestra pagina Web. Será entre el inicio y el final de esta orden donde pongamos los contenidos de nuestra página, textos, gráficos, enlaces, etc.... Esta orden tiene una serie de parámetros opcionales que nos permiten indicar la "apariencia" global del documento :

background = "nombre de fichero gráfico": Indica el nombre de un fichero gráfico que servirá como "fondo" de nuestra página. Si la imagen no rellena todo el fondo del documento, esta será reproducida tantas veces como sea necesario.
bgcolor = "código de color": Indica un color para el fondo de nuestro documento. Se ignora si se ha usado el parámetro background.
text = "código de color": Indica un color para el texto que incluyamos en nuestro documento. Por defecto es negro.
link = "código de color": Indica el color de los textos que dan acceso a un Hyperenlace. Por defecto es azul.
vlink = "código de color": Indica el color de los textos que dan acceso a un Hyperenlace que ya hemos visitado con nuestro visor. Por defecto es púrpura.

El código de color es un numero compuesto por tres pares de cifras hexadecimales que indican la proporción de los colores "primarios", rojo, verde y azul. El código de color se antecede del símbolo #.

Ejemplos :

#000000
#FF0000
#00FF00
#0000FF
#FFFFFF Color Negro
Color Rojo
Color Verde
Color Azul
Color Blanco

El primer par de cifras indican la proporción de color Rojo, el segundo par de cifras la proporción de color Verde y las dos ultimas la proporción de color Azul. Cada par de cifras hexadecimales nos permiten un rango de 0 a 255. Combinando las proporciones de cada color primario obtendremos diferentes colores.

De cualquier forma la mayoría de los editores de HTML nos permiten obtener el código de color correspondiente escogiendo directamente el color de una paleta.

2.1 Juego de caracteres del Documento.

Todos los visores de páginas Web actuales soportan todos los caracteres gráficos del la especificación ISO 8859-1, que permiten escribir textos en la mayoría de los países occidentales.

De cualquier forma y como muchos sistemas tienen distintos juegos de caracteres ASCII, se han definido dos formas de representar caracteres especiales usando solamente el código ASCII de 7 bits. Para hacer referencia a estos caracteres se les asigna un código numérico o un nombre de "entidad". Asimismo hay caracteres que se utilizan para las ordenes de HTML, por ejemplo < y >. Estos caracteres pueden ser representados por un código numérico o una entidad cuando deseemos que aparezcan en el documento "tal cual". Las entidades comienzan por el símbolo & (ampersand) y terminan con el símbolo ; (punto y coma).

A continuación veamos una tabla con las principales entidades :

Carácter	Código	Entidad	Carácter	Código	Entidad
!	!	--	"	"	--
#	#	--	$	$	--
%	%	--	&	&	--
'	'	--	(	(	--
)	)	--	*	*****	--
+	+	--	,	,	--
-	-	--	.	.	--
/	/	--	:	:	--
;	;	--	<	<	--
=	=	--	>	>	--
?	?	--	@	@	--
[	[	--	\	\	--
]	]	--	^	^	--
_	_	--	`	`	--
{	{	--	\|	\|	--
}	}	--	~	~	--
Espacio		nbsp	¡	¡	iexcl
¢	¢	cent	£	£	pound
¤	¤	curren	¥	¥	yen
¦	¦	brvbar	§	§	sect
¨	¨	uml	©	©	copy
ª	ª	ordf	«	«	laquo
¬	¬	not		****	shy
®	®	reg	¯	¯	macr
°	°	deg	±	±	plusmn
²	²	sup2	³	³	sup3
´	´	acute	µ	µ	micro
¶	¶	para	·	·	middot
¸	¸	cedil	¹	¹	sup1
º	º	ordm	»	»	raquo
¼	¼	frac14	½	½	frac12
¾	¾	frac34	¿	¿	iquest
À	À	Agrave	Á	Á	Aacute
Â	Â	Acirc	Ã	Ã	Atilde
Ä	Ä	Auml	Å	Å	Aring
Æ	Æ	AElig	Ç	Ç	Ccedil
È	È	Egrave	É	É	Eacute
Ê	Ê	Ecirc	Ë	Ë	Euml
Ì	Ì	Igrave	Í	Í	Iacute
Î	Î	Icirc	Ï	Ï	Iuml
Ð	Ð	ETH	Ñ	Ñ	Ntilde
Ò	Ò	Ograve	Ó	Ó	Oacute
Ô	Ô	Ocirc	Õ	Õ	Otilde
Ö	Ö	Ouml	×	×	times
Ø	Ø	Oslash	Ù	Ù	Ugrave
Ú	Ú	Uacute	Û	Û	Ucirc
Ü	Ü	Uuml	Ý	Ý	Yacute
Þ	Þ	THORN	ß	ß	szlig
À	à	agrave	Á	á	aacute
Â	â	acirc	Ã	ã	atilde
Ä	ä	auml	Å	å	aring
Æ	æ	aelig	Ç	ç	ccedil
È	è	egrave	É	é	eacute
Ê	ê	ecirc	Ë	ë	euml
Ì	ì	igrave	Í	í	iacute
Î	î	icirc	Ï	ï	iuml
Ð	ð	eth	Ñ	ñ	ntilde
Ò	ò	ograve	Ó	ó	oacute
Ô	ô	ocirc	Õ	õ	otilde
Ö	ö	ouml	÷	÷	divide
Ø	ø	oslash	Ù	ù	ugrave
Ú	ú	uacute	Û	û	ucirc
Ü	ü	uuml	Ý	ý	yacute
Þ	þ	thorn	Ÿ	ÿ	yuml

Por lo tanto la palabra página la podríamos escribir como :

Página
Página
Página

Es por ello que si deseamos que cualquier visor de páginas Web pueda visualizar las letras acentuadas de nuestro documento debemos utilizar sus correspondientes entidades o códigos para representarlas.

2.2 Espaciados y saltos de líneas

En HTML solo se reconoce un espacio entre palabra y palabra, el resto de los espacios serán ignorados por el visor.

Ejemplo:

Esto es un frase.

Se vera:

Esto es una frase.

Asimismo tampoco se respetan las tabulaciones, retornos de carro etc... Para ello existen una serie de ordenes que indican estos códigos. Las ordenes <PRE> y </PRE> obliga al visor a visualizar el texto tal y como ha sido escrito, respetando tabulaciones, espacios, retornos de carro, etc..

Ejemplo:

<PRE> Este texto ha Sido

Preformateado.</PRE>

Se vera:

Este texto ha Sido

Preformateado.

Para indicar un salto de línea se utiliza la orden   y para un cambio de párrafo (deja una línea en blanco en medio) se utiliza la orden .

Ejemplo:

Esto es un salto de línea y esto es un salto de párrafo

Se vera:

Esto es un salto de línea

Y esto es

un salto de párrafo

La orden  puede usarse también como orden "cerrada" y indicando de esta manera los atributos de un párrafo en concreto. Cuando se usa de esta manera tiene el parámetro align que indica al visor la forma de "justificar" el párrafo. Los valores posibles de este parámetro son LEFT, RIGHT y CENTER, estando aun en estudio el valor JUSTIFY.

Ejemplo:

Este es un ejemplo de un párrafo de texto justificado a la derecha.

Este es un ejemplo de párrafo de texto centrado.

Se vera:

Este es un ejemplo de un párrafo de texto justificado a la derecha.

Este es un ejemplo de párrafo de texto centrado.

La orden <HR> muestra una línea horizontal de tamaño determinable que sirve para separar párrafos o temas. Tiene los siguientes parámetros opcionales :

align = posición: Alinea la línea a la izquierda (left), a la derecha (right) o la centra (center).
noshade: No muestra sombra, evitando el efecto en tres dimensiones.
size = numero: Indica el grosor de la línea en pixeles.
width = num / %: Indica el ancho de la línea en tanto por ciento en función del ancho de la ventana del visor. También se puede especificar un número que indicaría el ancho de la línea en pixeles.

Ejemplo:

<HR align = center size = 20 width = 50%>

Se vera:

La orden <HR> sin ningún parámetro mostraría una línea horizontal que ocuparía todo el ancho de la página. Estas líneas sencillas son las que ves en este manual para separar las diferentes secciones

Anterior | Siguiente

Julián Andrés Muñoz Castro Ing. Electrónica Universidad del QUINDIO (Armenia)

*#000000* *#FF0000* *#00FF00* *#0000FF* *#FFFFFF*	Color Negro Color Rojo Color Verde Color Azul Color Blanco