PROGRAMACIÓN BASICA CON HTML
DESCRIPCIÓNEstimados estudiantes del grado 11, en este primer capítulo les presento 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.
1.Introducción 2.La estructura mínima de un documento HTML 3.El texto básico de un documento HTML 4.Los párrafos de un documento HTML 5.Los enlaces de un documento HTM 1. INTRODUCCIÓNHTML es un lenguaje universal, que funciona en cualquier plataforma (Windows, Macintosh, Unix, OS/2, etc.) y con cualquier navegador o browser (Netscape, Internet Explorer, Chrome, 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:
El objetivo de esta guía 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.4 De esta manera, seremos capaces de entender y manejar los códigos fuente de las páginas más complejas. |
2. ESQUEMA MÍNIMO DE UN DOCUMENTO HTMLUn 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: A continuación, les indico algunas variantes o formas en que se pueden estructurar los códigos. Puede hacerlo en orden consecutivo, utilizando espacios entre líneas o tabulaciones: Esta primera página web está, lógicamente, vacía, pero es perfectamente operativa. Para modificarla, basta con modificar sus códigos en el editor de texto. No hace falta cerrar para ello el navegador: una vez modificado –y salvado– el fichero, basta con utilizar el comando Actualizar (o Refresh) para ver los cambios.
Al visualizar los resultados del Ejemplo 1, en la barra de título de la ventana correspondiente sólo aparece el nombre del navegador (con Netscape) o la trayectoria completa del archivo (con Explorer). Esto sucede porque nuestro documento no posee un título propio. Para crearlo, debemos introducir una nueva etiqueta (pareada) en la cabecera: <TITLE>. Nuestro página web podría quedar, por tanto, así: Ya sabemos crear el esqueleto de una página web. La siguiente tarea será aprender a introducir texto (entre los tags <BODY> y </BODY>) y controlar sus etiquetas elementales.
|
3. EL TEXTO BÁSICO DE UN DOCUMENTO HTML
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.
3.1. La etiqueta básica
La etiqueta básica, que controla el tipo de fuente utilizado, es <FONT>. <FONT> es una etiqueta pareada. Por tanto, afecta a los caracteres introducidos entre <FONT> y </FONT>. 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): <FONT FACE="Arial">...</FONT>.
Se puede especificar el color de la fuente con la etiqueta <FONT COLOR="?">...</FONT>. 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:
Rojo: color:#ff0000;
Verde: color:#00ff00;
Azul: color:#0000ff;
Los mismos colores, expresados con los valores RGB (red, green, blue), son los siguientes:
Rojo: color:rgb(255,0,0);
Verde: color:rgb(0,255,0);
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: <FONT COLOR="blue">...</FONT>, <FONT COLOR="red">...</FONT>, etc.
Se puede especificar el tamaño de la fuente con la etiqueta <FONT SIZE="?">...</FONT>. 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: <FONT FACE="Arial" COLOR="#0000FF" SIZE="5">...</FONT>.
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 <FONT>. Por ejemplo:
Para dominar las cuestiones de formato (de caracteres, de párrafo, etc.) es necesario utilizar las etiquetas correspondientes.
3.1. La etiqueta básica
La etiqueta básica, que controla el tipo de fuente utilizado, es <FONT>. <FONT> es una etiqueta pareada. Por tanto, afecta a los caracteres introducidos entre <FONT> y </FONT>. 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): <FONT FACE="Arial">...</FONT>.
Se puede especificar el color de la fuente con la etiqueta <FONT COLOR="?">...</FONT>. 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:
Rojo: color:#ff0000;
Verde: color:#00ff00;
Azul: color:#0000ff;
Los mismos colores, expresados con los valores RGB (red, green, blue), son los siguientes:
Rojo: color:rgb(255,0,0);
Verde: color:rgb(0,255,0);
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: <FONT COLOR="blue">...</FONT>, <FONT COLOR="red">...</FONT>, etc.
Se puede especificar el tamaño de la fuente con la etiqueta <FONT SIZE="?">...</FONT>. 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: <FONT FACE="Arial" COLOR="#0000FF" SIZE="5">...</FONT>.
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 <FONT>. 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 <BR>, que introduce un salto de línea. Nuestra página quedaría entonces así:
|
Hay otra cuestión importante que debe saberse sobre la etiqueta <FONT>: es la etiqueta más básica, y conviene empezar a aprender por ella, pero está en desuso y desaparecerá en las versiones futuras de HTML. En su lugar, existen otras etiquetas más potentes, que iremos viendo en su momento.
3.2. Etiquetas de formato de caracteres 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: |
npp.6.9.1.installer.rar |
INTRODUCCIÓN A LA ROBÓTICA
Por lo general, cuando nos hablan de robotica pensamos inmediatamente en las supermáquinas que hacen cosas increíbles. En ocasiones, las películas de Hollywood han mostrado a los robots como super máquinas destructoras. Pero nada de eso coincide con el verdadero uso y función de ésta increíble obra de ingeniería.
Son muchos los conceptos que podrían definir este invento de la ciencia, pero particularmente pienso que es un dispositivo automatizado gracias a la pericia y creatividad del hombre. Éste dispositivo puede llevar consigo tres elementos:
Un primer elemento puede ser mecánico, a través del cual se le puede inducir movimiento al robot usando algún tipo de fuerza; un segundo elemento puede ser electrónico, a través del cual se utilizan circuitos electrónicos que permiten cargar de energía algún mecanismo robótico; y el tercer componente sería la programación. Existen varios lenguajes de programación, lo ideal es conocerlos todos pero cada diseñador opta por el más conveniente según el uso o aplicación que vaya a tener su invención. A través de un lenguaje de programación se pueden organizar determinadas funciones automatizadas a un mecanismo robótico, ya sea en periodos, ciclos, intervalos de tiempo.
Lo ideal es conseguir utilizar los tres componentes para elaborar un mecanismo automatizado, pero aún la fabricación de un dispositivo con cualquiera de los anteriores 3 elementos se considera un robot.
Uno de los dispositivos electrónicos más usados en la robótica actual se le conoce con el nombre comercial de ARDUINO. En la Guía que se encuentra a continuación se hará una breve introducción en lo que respecta a éste dispositivo. Descárguela y léala para analizar su contenido en clases:
Son muchos los conceptos que podrían definir este invento de la ciencia, pero particularmente pienso que es un dispositivo automatizado gracias a la pericia y creatividad del hombre. Éste dispositivo puede llevar consigo tres elementos:
Un primer elemento puede ser mecánico, a través del cual se le puede inducir movimiento al robot usando algún tipo de fuerza; un segundo elemento puede ser electrónico, a través del cual se utilizan circuitos electrónicos que permiten cargar de energía algún mecanismo robótico; y el tercer componente sería la programación. Existen varios lenguajes de programación, lo ideal es conocerlos todos pero cada diseñador opta por el más conveniente según el uso o aplicación que vaya a tener su invención. A través de un lenguaje de programación se pueden organizar determinadas funciones automatizadas a un mecanismo robótico, ya sea en periodos, ciclos, intervalos de tiempo.
Lo ideal es conseguir utilizar los tres componentes para elaborar un mecanismo automatizado, pero aún la fabricación de un dispositivo con cualquiera de los anteriores 3 elementos se considera un robot.
Uno de los dispositivos electrónicos más usados en la robótica actual se le conoce con el nombre comercial de ARDUINO. En la Guía que se encuentra a continuación se hará una breve introducción en lo que respecta a éste dispositivo. Descárguela y léala para analizar su contenido en clases: