Recursos educativos para 9no, de media.

martes, 25 de octubre de 2016

Unidad 6. El Texto básico en HTML.

Material de apoyo para la unidad 6. El Texto en HTML.

Introducción.

El texto básico de un documento HTML puede escribirse sin etiquetas. Cada navegador lo visualiza entonces con el tipo y tamaño de caracteres escogidos en su configuración por defecto, e introduce un salto de línea cuando los caracteres alcanzan el borde de la ventana.

Para dominar las cuestiones de formato (de caracteres, de párrafo, etc.) es necesario utilizar las etiquetas correspondientes.

La etiqueta básica.

La etiqueta básica, que controla el tipo de fuente utilizado, es .

es una etiqueta pareada. Por tanto, afecta a los caracteres introducidos entre y . Pero sin más especificaciones, la etiqueta aún no sirve para nada.

Se puede especificar el tipo de letra (es decir, la fuente de caracteres) añadiéndolo a la etiqueta, de la siguiente manera (en este caso, la fuente escogida es Arial): ....

Se puede especificar el color de la fuente con la etiqueta .... Para especificar los colores, conviene saber al menos lo siguiente:

Cada color posee su correspondiente código.
Hay dos códigos: hexadecimal –lo más habitual– o RGB. En ambos casos se trata de expresar las proporciones de tres colores básicos: rojo, verde y azul.
Los valores hexadecimales de los tres colores se expresan de la siguiente manera:
1. Rojo: color:#ff0000;
2. Verde: color:#00ff00;
3. Azul: color:#0000ff;
Los mismos colores, expresados con los valores RGB (red, green, blue), son los siguientes:
1. Rojo: color:rgb(255,0,0);
2. Verde: color:rgb(0,255,0);
3. Azul: color:rgb(0,0,255);
Todos los colores se expresan mediante combinaciones de estos tres colores básicos. Existen muchos programas que proporcionan los valores de todos los colores que el usuario puede componer. También en internet existen muchas páginas con los Códigos de colores.
Los colores más básicos pueden especificarse sin código, simplemente escribiendo la palabra correspondiente (por supuesto en inglés). Por ejemplo: ..., ..., etc.

Se puede especificar el tamaño de la fuente con la etiqueta .... El valor del tamaño ("?") deseado puede suministrarse de manera absoluta (un número del 1 al 7) o relativa (+1, +2, -1, -2, etc., teniendo en cuenta que el valor por defecto es 3).
Todas estas etiquetas se pueden combinar, de modo que con una sola se controla, por ejemplo, el tipo, el tamaño y el color de los caracteres: ....

Con esta etiqueta hemos visto ya la sintaxis básica de las etiquetas HTML, que podíamos formalizar así: <ETIQUETA [ATRIBUTO="valor"]>.

Lo anterior quiere decir que una etiqueta HTML (por ejemplo, FONT) puede llevar uno o varios atributos (FACE, COLOR, SIZE), cuyos valores se colocan entrecomillados tras el signo igual (="arial", ="#0000FF", etc.).

Esto será válido para todas las etiquetas HTML que veamos a partir de este momento.

Volvamos a nuestro documento web y practiquemos con las posibilidades de la etiqueta . Por ejemplo:

Nuestra página web, tal y como está diseñada en el Ejemplo 3, no posee ninguna especificación de líneas. A pesar de que las etiquetas están ordenadas en varias líneas, el navegador coloca todos los caracteres seguidos (sólo tiene en cuenta un único espacio entre palabras). Para corregir este problema podemos utilizar la etiqueta , que introduce un salto de línea. Nuestro página quedaría entonces así:

Etiquetas de formato.
A partir de este momento, se trata simplemente de añadir más etiquetas a nuestra aún pequeña colección, de modo que vayamos teniendo cada vez más control sobre el formato de los caracteres. La tabla siguiente muestra las más comunes:

Código	Función
<B>...</B>	Negrita
<I>...</I>	Cursiva
<U>...</U>	Subrayado
<SUB>...</SUB>	Subíndice
<SUP>...</SUP>	Superíndice

Hay que realizar algunos comentarios sobre las etiquetas precedentes:
1. Existe otra etiqueta similar a , menos utilizada porque depende de las opciones de configuración del navegador: ....
2. Existe otra etiqueta similar a , menos utilizada porque depende de las opciones de configuración del navegador: ....
3. Conviene tener cuidado a la hora de manejar el subrayado, puesto que éste se utiliza convencionalmente para indicar los hiperenlaces, y podría por tanto resultar confuso para el usuario.

Unidad 3. Editores de documentos HTML.

Material de apoyo para unidad 3. Editores de documentos HTML.

¿Cuáles son las características de un documento HTML?

Un documento HTML comienza siempre con la etiqueta <HTML>, que indica que el documento en cuestión está construido con dicho lenguaje.

La mayoría de las etiquetas son pareadas, es decir, <...> corresponde al principio de la acción y </...> indica el fin de dicha acción.

Por tanto, una página web estará siempre contenida entre las etiquetas <HTML> y </HTML>.

Por otra parte, todo documento HTML consta de dos partes: la cabecera (head) y el cuerpo del documento (body).

La cabecera contiene básicamente información destinada al browser (o navegador), que queda oculta al usuario. Su etiqueta (pareada) es <HEAD>.
El cuerpo es el documento que ve el usuario. Su etiqueta (pareada) es <BODY>.

Ya estamos en condiciones de componer nuestra primera página web. Basta con escribir las siguientes etiquetas en nuestro editor de texto y salvar el resultado con la extensión *.HTML o *.HTM:

¿Cuáles editores de texto son útiles para crear documentos de texto?

Algunos editores que pueden ayudar son Microsoft Word y Bloc de notas de Windows. Lo que si debemos tomar en cuanta es escribir correctamente las etiquetas y atributos en cada línea de comandos y asegurarse de guardar el documento con la extensión .HTML o .HTM como ya hemos mencionado anteriormente.

Unidad 2. Introducción a HTML.

Material de apoyo para unidad 2. Introducción a HTML.

En este primer capítulo, presentaremos las nociones básicas del lenguaje HTML. Con una utilización inteligente de las etiquetas HTML más sencillas, pueden lograrse documentos web de calidad suficiente. Al fin y al cabo, no debe olvidarse que lo importante, tanto en un papel como en Internet, sigue siendo el contenido.

¿Qué es HTML?

HTML es un lenguaje universal, que funciona en cualquier plataforma (Windows, Macintosh, Unix, OS/2, etc.) y con cualquier navegador o browser (Netscape, Internet Explorer, Mozilla Firefox, etc.). El precio que paga por su universalidad es su poca sofisticación, puesto que no es otra cosa que el viejo formato ASCII (y con 7 bits en lugar de ocho, por lo que ni tan siquiera tiene acentos ni otros caracteres especiales).

Por tanto, para que un documento HTML sea algo más que simples caracteres básicos, debe contener, además de dicho texto, una serie de instrucciones para el browser que lo va a reproducir: estas instrucciones se denominan etiquetas o tags y se distinguen del texto porque van entre guiones (< >). Estas etiquetas contienen todo el resto de la información de la página web.

Por tanto, si un documento HTML no es más que texto ASCII (parte sin guiones y parte entre guiones: las etiquetas), cualquier documento web, hasta el más sofisticado, puede escribirse directamente desde un sencillo programa básico de texto, como el Cuaderno de Notas (Notepad) de Windows, por ejemplo.

Sin embargo, escribir un documento complejo de esta manera exige un conocimiento exhaustivo de las numerosísimas etiquetas existentes y sus normas de utilización; para evitar esta dificultad, hay una serie de programas denominados comúnmente editores de HTML (desde el Composer al Dreamweaver, pasando por tantos otros), que permiten al usuario componer una página (es decir, generar etiquetas HTML) desde un interfaz más o menos parecido al de un procesador de textos.

A la hora de crear una página web, y aunque utilicemos un editor de HTML, es casi imprescindible entender la disposición del etiquetado de un documento y manejar siquiera las etiquetas más elementales. Son varias las razones que pueden aducirse para ello:

Los editores de HTML no son siempre herramientas perfectas, sobre todo cuando ha habido muchas modificaciones durante el proceso de creación. Con bastante frecuencia se hará necesario consultar el código completo, con las etiquetas HTML (lo que se suele denominar código fuente o código madre) para corregir las disfunciones.
Tal vez la mejor manera de aprender a diseñar páginas web es observar las páginas de los demás, cuyos códigos fuente están siempre disponibles para ser imitados (o incluso copiados, técnicamente, al menos). Pero, para ello, es necesario entenderlos.
Los mismos editores HTML manejan términos propios del lenguaje HTML (heading, cellspacing, etc.), que es preciso comprender.
Es necesario un buen conocimiento de HTML para insertar otros códigos más potentes, como los de Javascript, por ejemplo.

El objetivo de este documento es aprender a componer una sencilla página web desde el más básico de los programas de texto disponibles en Windows: el Cuaderno de Notas. De esta manera, seremos capaces de entender y manejar los códigos fuente de las páginas más complejas.

Unidad 5. Atributos en HTML.

Material de apoyo Unidad 5 sobre atributos en HTML.

¿Qué son los atributos en un documento HTML?

Los elementos en HTML tienen atributos; estos son valores adicionales que configuran los elementos o ajustan su comportamiento de diversas formas para cumplir los criterios de los usuarios. A continuación algunos atributos más utilizados.

Para más información sobre otros atributos visite: https://developer.mozilla.org/es/docs/Web/HTML/Atributos.

Ejemplo de la aplicación de un atributo en un documento HTML:

<html>

<title>>Atributos</title>

<head>Ejemplo de un atributo en HTML</head>

<body>

<a href="<a href="http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_1.html">Clic aquí para mas información sobre atributos en un documento HTML</a>

Nota: En este ejemplo se ha hecho un enlace para acceder a una URL de un contenido web.

Existen atributos de acuerdo a los fines o intereses del usuario como son: