Competencias comunicativas: Manual HTML

HTML es un lenguaje que se utiliza para la creación de páginas en la WWW. Por página entenderemos el documento que aparece en el visualizador o navegador.

Se compone de una serie de comandos, que son interpretados por el visualizador, o programa que utilizamos para navegar por el WWW. En esta última instancia es el visualizador el que ejecuta todas las órdenes contenidas en el código HTML, de forma que un visualizador puede estar capacitado para unas prestaciones, pero no para otras. Así, podremos especificar que una página tenga una imagen de fondo, o un texto parpadeando, pero si nuestro visualizador no está capacitado para esas funciones, no podremos verlas.

ELEMENTOS EN UN DOCUMENTO HTML

En esta guía, a las instrucciones que forman el lenguaje HTML les llamaremos elementos, "TAGS", o "ETIQUETAS". La notación de los elementos consiste en los símbolos < y > que encierran dentro una instrucción.

Los elementos pueden ser llenos o vacíos.

· Elementos lleno: se cierran con </>

o Ejemplo: El elemento <b> sirve para poner en negrita el texto

Hola

· Elementos vacíos: No se cierran, sólo se aplica la la instrucción inicial

<HR>

Todos los documentos Html tienen la estructura que se muesta a continuación, aunque la etiqueta <body> puede ser sustituida por <frameset> para un tipo de páginas que dividen la ventana del navegador en varios cuadros (frames).

<HTML>

<HEAD>

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

...

</HEAD>

<BODY>

Aquí iría el contenido de la página

</BODY>

</HTML>

· Entre las etiquetas <html> y <head> se suelen colocar otras opcionales, como por ejemplo:

En este caso las etiquetas le indican a los buscadores el contenido de nuestras páginas (description) y algunas palabras clave (keywords) para su localización.

· La cabecera es la sección comprendida entre <head> y </head>. En ella se encuentra necesariamente el título (entre las etiquetas <title> y </title>).

El título de la página debe describir su contenido por ejemplo:

<TITLE>Club Atletismo - Ámbito de Influencia - </TITLE>

no valdría en cambio

<TITLE>Página de Inicio</TITLE> ya que esto no dice nada por si solo

Dentro de la cabecera también se suele incluir código en JavaScript, que se reconoce porque va comprendido entre las etiquetas

<!--

Aquí iría el código

// -->

</SCRIPT>

· El cuerpo (body) del documento html es normalmente lo más importante. Es aquí donde debemos colocar el contenido de nuestra página: texto, fotos, etc.

El cuerpo está delimitado por las etiquetas <body> y </body>

FORMATEO DE TEXTOS

La etiqueta <FONT> con sus atributos SIZE, FACE y COLOR permiten controlar el tamaño, la fuente y el color de un fragmento de texto.

Ejemplo (como variar las características del texto):

<HTML>

<BODY>

<P>Ejemplo del uso del atributo <B><CODE>SIZE</CODE></B></P>

<P>Ejemplo del uso del atributo <B><CODE>FACE</CODE></B></P>

<FONT FACE=ARIAL>Esto es texto en ARIAL</FONT><BR>

<FONT FACE=TIMES>Esto es texto en TIMES</FONT><BR>

<FONT FACE=COURIER>Esto es texto en COURIER</FONT><BR>

<P>Ejemplo del uso del atributo <B><CODE>COLOR</CODE></B></P>

<B><FONT COLOR=RED>No</FONT> <FONT COLOR=PURPLE>es</FONT> <FONT COLOR=FUCHSIA>bueno</FONT> <FONT COLOR=OLIVE>usar</FONT> <FONT COLOR=NAVY>excesivos</FONT> <FONT COLOR=BLUE>colores</FONT> </B>

</BODY>

</HTML>

LISTAS

A menudo hay que hacer listas de objetos, de conceptos, de definiciones...

Las listas pueden ser no numeradas (el orden no importa) y numeradas:

1. Listas no numeradas.

Comienza el listado con la etiqueta <ul> (unordered list) y su final con la etiqueta de cierre </ul>. Cada objeto que forma la lista va precedido de la etiqueta<li> (list item) sin etiqueta de cierre.

<html>

<head>

<title>

Listas no numeradas

</title>

</head>

<body>

Mis aficiones:

<ul>

<li> El cine.

<li> La montaña.

<li> La música.

</ul>

</body>

</html>

2. Listas numeradas.

Comienza el listado con la etiqueta <ol> (ordered list) y su final con la etiqueta </ol>. Cada objeto que forma la lista va precedido, igual que en las anteriores de la etiqueta <li> sin cierre.

<html>

<head>

<title>

Listas numeradas

</title>

</head>

<body>

Mis preferencias:

<ol>

<li> Viajar.

<li> Salir con mis amigos.

<li> Dormir.

</ol>

</body>

</html>

3. Listas anidadas.

Se pueden combinar unas listas dentro de otras: No numeradas y/o numeradas. Hay que tener, simplemente, cuidado en la colocación de las etiquetas de apertura y cierre.

<html>

<head>

<title>

Listas anidadas

</title>

</head>

<body>

<h3>Animales:<h3>

<ul>

<li> VERTEBRADOS.

<ul>

<li>Anfibios

<li>Peces

<li>Reptiles

<li>Aves

<li>Mamíferos

</ul>

<li> INVERTEBRADOS.

<ul>

<li>Insectos

<li>Arácnidos

<li>Crustáceos

<li>Miriápodos

</ul>

</body>

</html>

TABLAS <TABLE>

¿Para qué sirven en HTML? Es un elemento fundamental si no queremos que se desordene los datos (suele ocurrir según el navegador)

¿Como se ponen? Ver ejemplo:

Elementos básicos de una tabla

Ejemplo en HTML

Como se quedaría

- Definición de la tabla. <TABLE>

- Un título: <CAPTION>

- Definición de fila: <TR>

- Definición de casilla: <TD>

- En <TABLE> se puede especificar el borde, colores, etc.

- Para ordenar los datos, pero que no se vea la tabla:

<TABLE BORDER = 0> (Tabla sin bordes o espesor cero)

<TABLE BORDER= 1>

<CAPTION> Ejemplo de tabla sencilla </CAPTION>

<TR>

<TD>fila1-celda1</TD> <TD>fila1-celda2</TD>

</TR>

<TR>

<TD>fila2-celda1</TD> <TD>fila2-celda2 </TD>

</TR>

</TABLE>

Ejemplo de tabla sencilla
fila1-celda1	fila1-celda2
fila2-celda1	fila2-celda2

b) IMÁGENES <IMG SRC="imagen.jpg">

Características Las imágenes se presentan en 2 formatos básicos: JPG (buena resolución en fotos y poco espacio), GIF (resolución de 256 colores, ocupa poco para gráficos (no fotos), y permite animaciones)

¿Cómo se ponen? <IMG SRC="imagen.jpg"> Con el comando IMG SRC (image source, fuente de la imagen) se indica que se quiere cargar una imagen llamada imagen.jpg (o el nombre que tenga).

<IMG SRC="imagen.gif" ALIGN=TOP>	Texto alineado arriba
<IMG SRC="imagen.gif" ALIGN=MIDDLE>	Texto alineado en medio
<IMG SRC="imagen.gif" ALIGN=BOTTOM>	Texto alineado abajo

c) HIPERENLACES <A HREF="dirección"> texto que aparecerá </A>

¿Qué son? Son los elementos que más caracteriza a una WEB, aparte de su carácter multimedia, la posibilidad de unir los distintos documentos repartidos por todo el mundo por medio de enlaces hipertexto.

¿Cómo se ponen? Hay 4 tipos:

TIPOS DE ENLACES	EJEMPLOS	Una página Web de ejemplo
A una Web externa	<A HREF="http://www.berna.miarroba.com"> Web Tecno </A>	<HTML> <HEAD> <TITLE> Una pagina Web </TITLE> </HEAD> <BODY> <CENTER> <H1> Mis paginas favoritas </H1> </CENTER> <HR> Estas son mis paginas favoritas: <P> <A HREF="http://berna.miarroba.com"> Web Tecnología </A> <BR> <A HREF="http://www.tecnotic.com"> Recursos Tecnología </A> <BR> <A HREF="http://www.aulatic.com"> Recursos TIC </A> </P> </BODY> </HTML>
A un correo o email	<A HREF= “mailto: berna55@telepolis.com”> e-mail de Bernardo </A> ó <A HREF= “mailto: berna55@telepolis.com”> <IMG SRC="imagen.jpg"> </A>
A una página de la Web	<A HREF="nombre.html"> nombre pagina o indicativo </A>
Dentro de la misma página	<A HREF="#MARCA"> texto indicativo </A> Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta: <A NAME="MARCA"> </A>

ESTILOS CSS

Probablemente queramos que nuestro sitio web tenga una unidad de estilo que lo haga armonioso y diferenciado de los otros sitios web. Esto se consigue con una potente herramienta del lenguaje html que se denomina Estilos CSS o Estilos en cascada y que permite tres niveles de concreción diferenciados:

Estilos para una etiqueta concreta en un punto determinado.

Estilos para un documento entero.

Estilos para un sitio entero formado por varios documentos. Hoja de estilo externa.

18.1.- Estilos para una etiqueta concreta en un punto determinado.

La sintaxis es la siguiente:

El párrafo afectado por la etiqueta anterior modificaría el color de fondo y se pondría en naranja. Estoy colocando este estilo en este párrafo concreto. Todo él lo estarás leyendo sobre un fondo naranja. Cuando cambie de párrafo esta implementación de estilo dejará de tener efecto.

Lo que hemos hecho en la etiqueta párrafo lo podríamos haber hecho en cualquier otra etiqueta. Se pueden, además, añadir más opciones de estilo:

Lo aplico sobre este párrafo a modo de ejemplo. Estarás viendo un párrafo sangrado del margen izquierdo 50 píxeles, en cursiva y el texto de color gris.

Hay que tener especial cuidado en no cometer errores de sintaxis: El = , las " al comenzar y al acabar, los : para indicar el valor, el ; separando cada uno de los parámetros de estilo. Es fácil equivocarse porque venimos arrastrando la sintaxis de las etiquetas y atributos normales y, ahora, las cosas son diferentes. Aparte, claro está, del nombre y valores posibles de cada atributo de estilo de los que, más tarde, haremos un listado.

La etiqueta <div> .

Se emplea para implementar un estilo determinado, no en una etiqueta concreta, sino en un fragmento (en una división) del documento, que afecte a varias etiquetas: Lo comprendido entre <div> y </div>.

MARCOS O VENTANAS

Son un recurso muy interesante y se emplea cuando queremos visualizar en la misma pantalla varias ventanas. Utilizan un código llamado "Frames".

Para definir las diferentes subventanas o frames se utilizan las etiquetas:

<FRAMESET> </FRAMESET> y <FRAME>.

La directiva <FRAMESET>indica como se va a dividir la ventana principal. Pueden incluirse varias directivas<FRAMESET> anidadas con el objeto de subdividir una subdivisión. Los parámetros de <FRAMESET> son rows y cols en función de si la división de lapantalla se realiza por filas (rows) o columnas (cols). Los parámetros rows y cols se acompañan de un grupo de números que indican en puntos o en porcentaje el tamaño de cada una de las subventanas. En caso de utilizar rows los tamaños de las subventanas se entienden indicados de arriba a abajo, es decir, el primer valor será el asignado a la ventana superior, el segundo a la ventana inmediatamente inferior, etc. En el caso de cols los tamaños se aplican de izquierda a derecha.

Ejemplos

<FRAMESET rows = "25%,50%,25%">

Crea tres subventanas horizontales, la primera ocupará un 20% de la ventana principal, la segunda un 50% y la tercera un 25%.

<FRAMESET cols = "120,*,100">

Crea 3 subventanas verticales, la primera y la tercera tendrán un "ancho" fijo de 120 y 100 puntos respectivamente. La segunda ocupará el resto de la ventana principal.

<FRAMESET cols = "15%,*">

<FRAMESET rows = 20%,*">

En este caso "anidamos" dos directivas. La primera divide la ventana principal en dos subventanas verticales, la primera ocupa un 15% de la ventana principal y la segunda el resto. La segunda directiva vuelve a subdividir la primera subventana creada anteriormente, pero esta vez en dos subventanas horizontales, la superior ocupará un 20% de la subventana, y la inferior el resto.

Ejemplo:

<HTML>

<HEAD>

<TITLE>Pagina con Frames</TITLE>

</HEAD>

<FRAMESET cols = "15%,*">

<!—Dos subventanas verticales, la izquierda ocupa un 15% de pantalla, la derecha el resto. -->

<FRAMESET rows = "35%,*">

<!—Dos subventanas horizontales dentro de la subventana izquierda. -->

<FRAME name = "hsi" src = "catalogo.htm" scrolling = "auto">

<FRAME name = "menu" src = "menu.htm" scrolling = "auto">

</FRAMESET>

<!—Cierre de la definición de las subventanas horizontales de la ventana de la izquierda -->

<FRAME name = "indice" src = "indice_principal.htm" scrolling = "auto">

</FRAMESET>

<!—Cierre de la definición de las subventanas verticales -->

</HTML>

FORMULARIOS

Los formularios permiten dentro de una Web solicitar información al visitante y, después guardarla y procesarla. Utilizan un código llamado "Form".

En el formulario podremos solicitar diferentes datos (campos), cada uno de los cuales quedará asociado a una variable. Una vez se hayan introducido los valores en los campos, el contenido de estos será enviado a la dirección (URL) donde tengamos el programa que pueda procesar las variables.

La declaración del formulario se pone entre las directivas <FORM></FORM>. En el interior de la declaración se indican los elementos (variables) de entrada.

La directiva <FORM> tiene los parámetros action , method y [enctype].

Uso:

<FORM ACTION=url

METHOD=método de envío

ENCTYPE=método de codificación de la información>

Campos de entrada, selección y áreas de texto

</FORM>

action = "programa" (Indica el programa que va a "tratar" a las variables que se envíen).

method = POST / GET (indica el método según el que se transferirán las variables)

Enctype = (Indica el modo de cifrado de la información. (por defecto: application/xwww-form-urlencoded)

<FORM action = "mailto: berna55@telepolis.com" method = post
enctype="text/plain">
Tu Nombre:<INPUT type = text name = nombre size = 30 >
Tu Profesion: <INPUT type = curso name = clave size = 8 >
<P>
Informacion a recibir:<br>
<INPUT type = checkbox name = archivo value = "Html" > Manual de Html
<INPUT type = checkbox name = archivo value ="Editor" > Manual Gimp
<INPUT type = checkbox name = archivo value ="Ejemplo" > Manual Qcad
<P>
Tu Edad :
<INPUT type = radio name = edad value = "-20" > Menos de 20 años
<INPUT type = radio name = edad value = "20-40" > Entre 20 y 40 años
<INPUT type = radio name = edad value = "+40" > Mas de 40 años
<P>
<INPUT type = hidden name = lugar value = "pagina personal" >
Como encontraste mi página :
<SELECT name = donde >
<OPTION>De casualidad
<OPTION>Por el buscador Google
<OPTION>Por el buscador Yahoo
<OPTION>Me la comentaron
</SELECT>
<P>
Tus Comentarios:
<BR>
<TEXTAREA name = comentario rows = 5 cols = 40></TEXTAREA>
<P>
<INPUT type = submit value = "Enviar" >
<INPUT type = reset value = "Borrar" >
</FORM>

ETIQUETA	CIERRE	ATRIBUTO	EXPLICACIÓN
<!--	-->		Añadir un comentario no visible.
<a>	</a>		Establece un vínculo.
		href	Dirección del vínculo.
		name	Establece un ancla.
		target	Establece el destino del vínculo: _blank, _self, _top, _parent, o "definido"
<b>	</b>		Texto en negrita.
<blockquote>	</blockquote>		Sangrado.
<body>	</body>		Parte visible en pantalla del documento.
		alink	Modifica el color del vínculo cuando está activado.
		background	Para colocar una imagen de fondo.
		bgcolor	Para establecer un color de fondo.
		link	Modifica el color del vínculo antes de estar activado.
		vlink	Modifica el color del vínculo cuando ya ha sido visitado.
<br>			Salto de línea.
<caption>	</caption>		Establece el título de una tabla. Dentro de <table>.
<center>	<center>		Centra en horizontal.
<dd>			La definición del término. Dentro de <dl>
<dl>	</dl>		Listado de términos y sus definiciones.
<dt>	</dt>		Término para ser definido. Dentro de <dl>
<font>	</font>		Fuente.
		size	Tamaño de la fuente.
		color	Color
		face	Tipo de letra.
<form>	</form>		Formulario
		action	mailto:la_dirección_de_correo
		method	post
		enctype	text/plain
<frame>	</frame>		Marco.
		name	Nombre que se le da para referirse después a él.
		src	Establece qué documento se va a cargar inicialmente en el marco.
		frameborder	Indica si habrá o no borde entre los marcos.
		noresize	Si se escribe, el navegante no puede redimensionar los marcos.
		scrolling	Establece si habrá o no barra de scrolling.
<frameset>	</frameset>		Estructura de los marcos.
		cols	Número de columnas.
		rows	Número de filas.
<h1>	</h1>		Encabezado de primer orden.Hay otros 5: <h2><h3><h4><h5><h6>
<head>	</head>		Cabecera del documento.
<hr>			Línea de separación horizontal.
		align	Alineación de la línea.
		noshade	Sin efecto tridimensional.
		size	Grosor de la línea.
		width	Anchura de la línea.
<html>	</html>		Apertura y cierre del código.
<i>	</i>		Letra cursiva.
<iframe>	</iframe>		Marco en línea. Carga en un marco otra página.
		name	Nombre que se le da al espacio para posteriores referencias.
		src	Establece qué documento se carga inicialmente.
		frameborder	Establece si habrá o no borde de separación.
<img>			Inserta una imagen.
		alt	Texto alternativo a la imagen.
		border	Establece si va a tener borde o no, cuando sirva de vínculo.
		height	Altura de la imagen.
		width	Ancho de la imagen.
		src	Establece qué imagen se va a insertar.
<li>			Componente de una lista. Dentro de <ul> o de <ol>
<ol>	</ol>		Lista numerada de objetos.
<p>	</p>		Párrafo nuevo.
<sub>	</sub>		Subíndice.
<sup>	</sup>		Superíndice.
<table>	</table>		Tabla.
		align	Alinea la tabla: center, right, left
		bgcolor	Establece el color de fondo de la tabla.
		border	Establece un borde a la tabla
		cellpadding	Separación entre el borde de la tabla y el contenido.
		cellspacing	Separación entre las celdas.
		width	Establece el ancho de la tabla.
<td>	</td>		Celda de una tabla.
		align	Establece la alineación del texto dentro de la celda: left, center, right.
		bgcolor	Establece el color de fondo para la celda.
		colspan	Extiende la celda sobre varias columnas.
		height	Establece la altura de la celda.
		rowspan	Extiende la celda sobre varias filas.
		valign	Establece la alineación vertical: top, middle, bottom.
		width	Establece el ancho de la celda.
<th>	</th>		Titular de la columna de una tabla. Dentro de <tr>.
<title>	</title>		Establece el nombre del documento. Dentro de <head>
<tr>	</tr>		Fila de una tabla.
<u>	</u>		Subrayado.
<ul>	</ul>		Lista no numerada de objetos.

Competencias comunicativas

Manual HTML

No hay comentarios:

Publicar un comentario