SISTEMAS OPERATIVOS 5º FI-MA "B": 2012-01-15

sábado, 21 de enero de 2012

EL LENGUAJE HTML

HTML es un lenguaje que se utiliza para la creación de páginas WWW.
HTML se compone de una serie de comandos, que son interpretados por el visualizador para navegar por el WWW. El visualizador ejecuta todas las ordenes contenidas en el código HTML, de modo que un visualizador puede ser ejecutado para unas presentaciones y para otras no.

Mi primer documento HTML

Abra el editor de textos: en windows abra bloc de notas
Teclee lo siguente: <html><head>
<title>mi primera pagina web </title>
</head>

<body>
<center><h1> mi primera pagina web</h1></center>
<hr>
Esta es mi primera pagina.
<p> aqui va un segundo párrafo</p>
</body>
</html>
Grabe este archivo con nombre: ejemplo.html
Abra el visualizador(no necesita conectarse a internet para ver las paginas)
Elija "archivo/abrir pagina"

Etiqueta <img>
No necesita etiqueta que se cierre, esta instruye al navegador que exhiba la imagen expecificada. El formato básico para incluir un gráfico es: <img src="imajen.ext">

Src: identifica la imagen que se desplegará
Height: para redimensionamiento de gráfico
Width: para redimensionamiento de gráfico

A la imajen se le puede aplicar un borde el cual se hace visible cuando se trata de una imagen de hipervínculo:

Border: definido en pixeles

La imagen también puede alinearse con respecto al texto

Align: alineación puede ser: TOP, MIDDLE, BOTTOM, LEFT y RIGHT
Alt: especifica el texto alterno

Tablas
En HTML podemos incluir arreglos de tablas, para eso se debe utilizar varias etiquetas:

Etiqueta <table></table>
Señala el inicio y final de una tabla, sus atributos son:

Align: establece la alineación de la tabla o texto mediante: align=left o align=right
Bgcolor: establece el color de fondo de las celdas de la tabla
Border: determina el ancho del borde en pixeles
BorderColor: Asigna un color al borde
BorderDark: determina el color de la parte oscura de un borde de tres dimensiones
BorderLight: asigna el color de la parte clara de un borde de 3 dimensiones
Caption: especifica el titulo para la tabla
Cellpadding: establece la cantidad de espacio libre junto al contenido de una celda
Cellspadding: asigana la cantidad de espacio entre las celdas de una tabla
Width: determina el ancho de la tabla en pixeles o en un porcentaje

Etiqueta <th> </th>

Indica al navegador que exhiba el texto como un encabezado en la primera fila de una tabla. Atributos principales:

Colspan: especifica el número de celdas que cubre el encabezado
Align: determina la posición del texto del titulo

Etiqueta <tr> </tr>

Indica al navegador que exhiba el texto dentro de una fila, se puede interpretar como etiqueta para definir filas.

Align: alineación de texto/objetos en toda la fila

Etiqueta <td></td>

La etiqueta de datos de la tabla, es la que identifica a las columnas o celdas específicas de una tabla. Atributos principales:

Align: alineación del texto/objeto de la celda
Bgcolor: color de fondo de la celda
Background: imagen de fondo de una celda
Width:ancho de la celda/columna con respecto al ancho de la tabla

Numeración y viñetas

Etiquetas <ul></ul>

Indica que cree una lista con viñetas no ordenada

Etiquetas <ol></ol>

Listas ordenadas

Etiqueta <li></li>

Se usa para indicar que exhiba el texto que el elemento de línea en una línea. Atributos:

Type: Type=A usa letras mayusculas

Type: Type=a usa letras minusculas

Type: Type=I usa numeros romanos grandes

Type: Type=i usa numeros romanos pequeños

Type: Type=1 usa numero algebraicos

Value:indica que se inicie la nuemeración a partir del numeroe specificado

Hipervículos

Un vínculo hipertextual es un texto, botón o imagen que al seleccionar nos lleve a otra dirección URL, página WEB o recurso

Etiqueta <a></a>

Esta etiqueta denota el inicio y final de una instrucción que contiene alguna forma de vínculo. Atributos:

HREF: recurso al cual se hacer referencia el hipervínculo

NAME: especifica el nombre de la posición a donde apuntar

TARGET: destino del enlace

Frames

Ofrece la posibilidad de utilizar marcos y varias páginas en una sola.

Etiqueta <frameset></frameset>

Define la disposición gráfica de los marcos en la pantalla.

Atributos:

Rows: determina el alto de las filas

Cols: determina el ancho de las columnas

Framespacing: espacio entre frames

Etiqueta <frame></frame>

Define un solo marco que forma parte del conjunto de marcos definidos en <frameset>. Atributos:

Marginheight: determina que tanto espacio vertical existe entre el objeto ubicado en un marco y los extremos izquierdo o derecho de este

MarginWidth: determina que tanto espacio horizontal existe entre el objeto ubicado en un marco y los extremos izquiero o derecho de este.

Name: ofrece la capacidad de dar nombres a las ventanas de FRAME, de modo que puedan ser utilizados de hipervínculo

Noresize: indica indica que el usuario no puede redimensionarse al marco

Scrolling: habilita una barra de desplazamiento para un marco

SRC: indica que exhiba en un marco el contenido de un documento HTML

Etiqueta <noframes></noframes>

Utilizada para desplegar un texto cuando un navegador no es capaz de desplegar los marcos.

Otras etiquetas útiles

Etiqueta de comentarios <! -- -->

Se trata de una etiqueta que puede ser introducida en cualquier parte del código y que es utilizada para realizar acotaciones y comentarios.

Etiqueta de comentarios <comment></comment>

Se trata de una etiqueta que puede ser introducida en cualquier parte del codigo y que es utilizada para realizar acotaciones y comentarios.

Etiquetas <address></address>

Ofrece una manera de dr formato a un pequeño cuerpo de texto que se asemeje a la rotulación de una carta convencional.

Etiqueta <cite></cite>

El texto dentro de la etiqueta <cite> aparece en cursivas para representar una cita.

Etiqueta <code></code>

El texto dentro de la etiqueta <code> aparece en una fuente con caracteres mono espaciados cuando se visualizará a través de un navegador.

Etiqueta <credit></credit>

Se emplea para indicar los créditos por el material incluido al documento.

Etiqueta <em></em>

Indica que se debe dar enfacis al texto que se contiene.

Etiqueta <kbd></kbd>

Indica al navegador que interprete el texto especificado en una fuente en negritas de ancho fijo.

Etiqueta <nobr></nobr>

La etiqueta <nobr> impide que el navegador inserte un salto de línea, incluso cuando es adecuado el ajuste de texto.

Etiqueta <p></p>

La etiqueta <p> indica el inicio y el final de oraciones a exhibir con un solo párrafo.

Etiqueta <pre></pre>

La etiqueta <pre> significa texto "preformateado" y se usa para conservar espacios y saltos de línea en cuerpos de texto.

Etiqueta <strong></strong>

Hace que el navegador exhiba el texto en negritas, algunos navegadores muestran en cursiva

Etiqueta <sub></sub>

Instruye al navegador que exhiba el texto especificado como subíndice

Etiqueta <sup></sup>

Indica al navegador exhibir el texto especificado como super índice.

Etiqueta <tt></tt>

Indica al navegador que exhiba el texto especificado en una fuente de ancho fijo.

Etiqueta <var></var>

Indica al navegador que exhiba el texto especificado en una fuente más pequeña, de ancho fijo.

Atributo bgproperties="fixed" DEL BODY

Indica a su navegador Internet Explorer que mantenga el fondo constante y no móvil de forma vertical.

viernes, 20 de enero de 2012

Otras instrucciones importantes

Formularios
Es una plantilla creada por que el usuario se comunique con nuestro servidor web de una forma fácil. Dentro de un formulario podemos encontrar los siguientes elementos:

Declaración del formulario(FORM)
Campos de entrada(INPUT)
Campos de selección(SELECT)
Áreas del texto(TEXTAREA)

Declaraciones del formulario

La declaración del formulario se pone las marcas: <form>...</form>

En su interior aparece una secuencia de entrada(elementos imput), junto con elementos de marcado de estructura del documento.

En la definición del formulario se puede incluir los siguientes atributos:

Action: especifica un URI de la acción asociada al formulario, si no se especifica se asume que este es la base del documento.
Method: indica el método de acceso al URI de la acción. Se puede emplear los métodos GET y POST, que se describirán más adelante.
Enctype: específica el tipo de codificación para el transporte de los pares nombre/valor, excepto en los casos en los que el protocolo no imponga uno.

Campos de entrada (INPUT)

El elemento <input> representa un campo de entrada de datos. Los atributos posibles vienen dados, por el valor del atributo TYPE, que determina el tipo de entrada. Los tipos de entrada son:

Texto: INPUT TYPE = TEXT

Indica que la entrada es solo una linea.

Como tributos opcionales tenemos:

MAXLENGTH: limita el máximo número de caracteres que pueden ser introducidos en el campo. Si el valor es mayor que el del atributo SIZE, el navegador debe permitir el desplazamiento de la línea.
SIZE: especifica la cantidad de espacio reservado para este campo.
VALUE: indica el valor inicial del campo.
Password: es un campo de texto como el anterior, pero el calor no se ve escribirlo.
Casilla de verificación: representa una opción booleana. Un conjunto de varios elementos representando un campo de selección multiple.
Botón de opción múltiple: un conjunto de varios elementos de este tipo con el mismo nombre representan un campo de selección múltiple, se utilizan los atributos NAME Y VALUE. Opcionalmente podemos incluir el atrubuto CHEKED.
Botón de envio: indica al cliente que debe enviar el formulario. Como atributos opcionales acepta:
NAME: indica que este elemento constituye un campo cuyo valor es el del atributo VALUE, si no se incluye el atributo no es un campo.
VALUE: indica la etiqueta para el botón.
Pixel de una imagen:
-BOTON DE OPCION: Representa una opcion booleana (si o no). Un cojuntode varios elementos de ese tipo con el mismo nombre representan un campo de seleccion multiple.|
-BOTON DE ENVIO: Representa una opcion, normalmente mediante un boton, que le indica al cliente que enviar al formulario.
Como atributos:
-Name: Indica que este elemento constituye un campo cuyo valor es del atributo VALUE.
-Value: Indica la etiqueta para el boton.
El elemento <OPCION> solo puede aparecer dentro de un elemento <SELECT>, representa una posible eleccion.
-Selected: Indica que esta opcion esta seleccionada inicialmente.
-Value: Indica el valor a retornar si se selecciona la opcion.
AREA DE TEXTO (TEXTAREA) El elemento <TEXTAREA> representa un campo de texto de multiples lineas. Los atributos son:
-COLS: El numero de columnas visibles.
-NAME: Nombre del campo.
-ROWS: El numero de lineas visibles.
ENVIO DE FORMULARIOS
El contenido de los campos es el de sus valores por defecto, ya sea en blanco o con texto.
TIPO DE CODIFICACION DE FORMULARIOS
Al enviar un formulario este se codifica. El tipo de codificacion es: MIME.
-METODO GET: METHOD=GET
El metodo de envio GET es un metodo de consulta. El servidor recibe los datos en una variable de entorno llamada QUERYSTRING.
-METODO POST: METHOD =POST
Se utiliza cuando los dats del formulario realiza una modificacion, en la base de datos.
Al procesarse un formulario cuyo URL de accion es de tipo HTTP.
MARCOS
Los marcos, nos brindan la posibilidad de dividir nuestras pagina web en varias regiones, lo que nos permitira presentar el contenido mas estructurado.
Con los marcos podemos conseguir los siguientes efectos:
-Los elementos como de control, que nos interesa que aparezcan fijos.
-Podemos crear marcos con indices de contenido.
-Del diseño de una pagina con marcos paralelos.

COMANDOS PARA CREAR MARCOS
Los comandos utilizados son:
<FRAMESET>
...
</FRAMESET>
-FRAME: describe las caracteristicas concretas de un marco.

El comando FRAMESET
El elemento <FRAMESET> nos permite definir el contenedor principal para otros marcos.
Veamos los tipos de valores:
-Valor: Un valor numerico simple es tama;o fijo en pixeles.
-Valor %. Con este valor indicaremos un porcentaje del tama;o de la ventana.
-Valor*.El valor de este campo es relativo.

El comando FRAME
El comando o marca <FRAME> crea un marco dentro de un conjunto de marcos.

El comando NOFRAMES

Es incluir una alternativa para estos navegadores. De esta forma, nos aseguramos de que el usuario recibe la informacion deseada de una forma u otra.

jueves, 19 de enero de 2012

INSTRUCCIONES BÁSICAS DE HTML

El comando HTML
Este comando se utilizara para delimentar el documento. Las marcas de principio son :
<html>
...
</html>
Es conveniente incluirlo para evitar posibles conflictos, ademas con esto podremos indicar al lector la version de HTML.

El comando párrafo
Este comando inserta un salto automáticamente al final del párrafo y crea el espacio adecuado entre los diferentes párrafos.
<P> ... </P>

El comando de salto de linea
Para realizar un salto de línea untilizamos:
<BR>
Es necesario indicar donde se debe cortar el texto y donde debe comenzar de nuevo. Para ello utilizaremos CLEAR que podrá tomar los valores: left, right y all.

Los comandos de encabezados
Existen seis niveles de encabezados, el primero lo utilizaremos de encabezados para crear las divisiones mayores del texto. Este será el título de mayor tamaño. Y el sexto nivel mostrara el texto mas pequeño y lo utilizaremos para las menores divisiones.
Hay que entender que estos comando insertan un salto de línea tras el texto que comprenden.

Apariencia del texto
Aqui disponemos de varios comandos. Cuando utlizamos estos comandos delimitamos el texto afectado por los cambios, estos comandos pueden ser utilizados conjuntamente.
Apariencias que podemos dar al texto:
-Negrita:
<B>...</B>
-Cursiva:
<EM>...</EM>
-Parpadeo:
<BLINK>...</BLINK>
-Asiganar un tamaño fijo:
<TT>... </TT>
-Subrayado:
<U>... </U>

Listas
Aqui se pueden dos tipos de listas. Una lista puede englobar otras lsitas.

Listas no numeradas: Son tambien conosidas como no ordenadas. Para crear una lista no numerada, utilizaremos: <UL> ... </UL> Los elementos de la lista se indicaran con: <LI> ... </LI>
Listas numeradas: Son listas ordenadas o numeradas por el comando: <OL>...</OL> y al igualq ue los otros se indicaran con : <LI> ... </LI>

Listas descriptivas

Para crear una lista descriptiva, usaremos el comando:

Cada uno de los elementos de la lista tendrán un titulo, marcado como:

Y un texto para cada título que será indicado por el comando:

Este tipo de listas se utilizan para indicar indices, referencia a otros documentos, etc

CENTRANDO TEXTO

Podemos centrar cualquier parte del documento por medio del comando:

Simplemente debemos delimitar las partes del texto

LINEAS HORIZONTALES

En muchas ocasiones necesitaremos separar el texto de algunos elementos, esto podremos hacerlo insertando una linea horizontal. La linea horizontal se inserta con el comando <HR>

ENLACES

Los enlaces pueden ser clasificados en 4 grupos:

Los que hacen referencia a otra parte del mismo documento.
Los que hacen referencia a otro documento.
Los que hacen referencia a otra parte de otro documento
Los que hacen referencia a una dirección de correo

Referencias en el mismo documento

Tenemos la posibilidad de crear enlaces que lleve al usuario a otro lugar del mismo documento por medio de un clic. Estas referencias se componen de 2 partes:

La referencia: Es la zona en donde el usuario hace clic para desplazarse a otra parte del documento. Para crear una referencia local, delimitaremos la zona con el comando: < a href="#nombre" texto del enlace </A>
El nombre referenciado: el usuario accede al hacer clic en la referencia correspondiente, para crear un nombre local debemos delimitar la zona mediante el comando: <a name="nombre">...</a>

Referencias a otros documentos

Existen dos tipos de referencia a una ubicación: relativa y absoluta.

Referencia relativa: para indicar una referencia relativa debemos especificar la posición del documento, para crear referencia de este tipo utilizaremos el comando: <a href="ubicación"> texto del enlace </a>. Debemos recordar que esta referencia es para un documento que se encuentre en el mismo ordenador.
Referencia absoluta: para crear una referencia absoluta debemos especificar la dirección URL de la página en cuestión. Para realizar un hipertexto utilizaremos el comando: < a "href=http://ordenador/directorio/archivo">.

Referencias a un lugar de otro documento

Esta utiliza una combinación de los dos modos vistos anteriormente, para crear este indicaremos el URL del documento y escribiremos # y finalmente introduciremos el nombre de la zona a enlazar.

Referencia a una dirección e-mail

En ocaciones es buena enlazar nuestras paginas web y un enlace de correo electrónico para poder recibir sugerencias por los usuarios. Para esto utilizaremos el comando: < a href="mailto:direccion de email"> texto del enlace </a>

SISTEMAS OPERATIVOS 5º FI-MA "B"

hey..!!