sábado, 21 de enero de 2012

Otras Instrucciones!


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


      Instrucciones basicas 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.
      1. 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>
      2. 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:
      <DL> ... </DL>

      Cada uno de los elementos de la lista tendrán un titulo, marcado como:
      <DT>... </DT>

      Y un texto para cada título que será indicado por el comando:
      <DD>... </DD>

      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:
      <CENTER> ... </CENTER>
      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> 

      domingo, 15 de enero de 2012

      LENGUAJE DE HTML

      GENERALIDADES
      El lenguaje de HTML(Hipertext Markup ñanguage), es un sistema para definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismo documentos. Este lenguaje es un aplicación del SGML(Standard Generalizad Markup Language)

      FUNDAMENTOS
      Caracteres

      Dependiendo del editor de textos, el documento HTML puede tener distintos juegos de caracteres. Toda cena de caracteres se visualizará en el navegador.
      Para reducir los documentos a ASCII de 7 bits y representar los caracteres empleados en el texto, se definen dos mecanismos de referencia:


      • Referencia por nombre: El carácter se representa con un & seguido del nombre del carácter y punto y coma. Por ejemplo:    &amp
      • Referencia numérica: En lugar de dar la referencia por nombre, se escribe # seguido del número de carácter. Por ejemplo:    &#38

      Marcas
      Las marcas delimitan los elementos de un documento HTML, como cabeceras, párrafos, etc. Las marcas siempre constan de dos partes, una marce de inicio y otra finalización del elemento.
      Las marcas iniciales se escriben entre símbolos "<" y ">" y las finales entre "</" y ">". Por ejemplo: <H1>Contenido</H1> indica que "Contenido" es una cabecera de nivel uno.
      Al utilizar algunos elementos, no siempre es obligatorio la marca final de cierre.

      Nombres
      Los nombre se componen de una letra  seguida de letras.

      Atributos
      Cuando una marca inicial admite tributos, éstos se escriben a continuación del nombre del elemento, generalmente los atributos tienen la siguiente forma:
      nombre_atributo=valor_atributo
      Aunque en algunos casos, basta con el nombre del atributo.
      El valor de un atributo puede ser:
      • Una cadena de carácteres entre comillas que no contenga el símbolo de fin de marca (>).
      • Un nombre


      Comentarios
      La manera de incluir comentarios en HTML, se realiza mediante la marca de comentarios: <!...>
      Cada comentario comienza con "_" e incluye todo el texto "_"

      Identificación del Nivel HTML de un documento
      El lenguaje de HTML se compone por bloques, cada uno identificando por marcas, que se indentifican mediante una instrucción de inicio y otra de final

      ORGANIZACIÓN DE UN DOCUMENTO
      Los documentos en formato HTML son un conjunto de elementos anidados. El nivel mas alto encontramos HTML(marca inicial <html> y final </html>) que consta de dos partes:cabecera y cuerpo.
      En la cabecera se proporciona información acerca del documento, mientras que el cuerpo contiene el texto de la pagina.

      Cabecera 
      La cabecera se proporciona información generales del documento. Las marcas de principio y fin del bloque son:
      <HEAD>
      ...
      </HEAD>
      Puede contener los siguientes datos:
      Título(title): nombre del documento
      Dirección(base): direccion para interpretar en laces relativos cuando el documento esta fuera de contexto.
      Enlaces relacionados(link):podemos incluir en la cabecera varios enlaces
      Metainformación(meta):proporcionar informacion de los documentos que no puedan ser expresados en los campos anteriores.

      Cuerpo
      El cuerpo contiene la parte más importante del documento HTML. Es donde vamos a insertar todo el texto y los objetos  que van a ser prestados al usuario.
      <body>
      ...
      </body>

      SEGUNDO TRIMESTRE

      INTRODUCCIÓN


      Internet en la actualidad es una herramienta de gran ayuda para realizar búsquedas de información, y para crear nueva información a partir de cero.
      De la variedad de servicios que presta internet la mas utilizada es World Wide Web o WWW.
      Tal vez usted se preguntará como se crean estas páginas? La respuesta es con HTML.


      ¿Qué es HTML?
      HTML son las iniciales de Hiper Text Markup  Language
      Es un conjunto de series o etiquetas incluidas en archivos de texto que definen la estructura de un documento WWW y sus vínculos con otros documentos.

      ¿Por dónde comenzar?
      1. Utilizar programas creados para desarrollo de páginas WEB, por ejemplo:

      • Microsoft Front Page
      • Hot Dog
      • Microsoft Internet Assistant
      • Microsoft Office 97
      2. Utiliza un editor de texto y crea nuestro propio codigo.
      Como casi todos los sistemas mas comunes en PC funcionan bajo un entorno Windows, para crear los hipertextos utilizaremos un accesorio, El Bloc de Notas o Note Pad.

      Páginas WEB
      El hipertexto es un archivo de texto que contiene instrucciones que pueden ser interpretadas por un navegador de internet. Estas instrucciones son denominadas Etiquetas.

      Etiquetas
      Una etiqueta cumple su función de la siguiente manera:
      <nombre de la etiqueta>          Apertura de una etiqueta siempre entre "< >"
      texto/ gráfico/ etiquetas            A la cual se aplica la etiqueta
      </nombre de la etiqueta>         Cierra de la etiqueta siempre entre "< >"

      Al acabar de crear un hipertexto, este se deberá grabar con la extensión html. Es bueno acotar esto ya que es un archivo que tiene una extensión definida.

      Estructura básica de una página WEB
      Una página esta compuesta por 2 partes: el encabezamiento y el cuerpo de la página.
      Existen 3 tipos de etiquetas fundamentales, las mismas que deben estar incluidas en el archivo HTML de manera obligatoria. Estas son:
      • <html> </html>   Indica el navegador que el documento texto que esta leyendo es un documento HTML.     Esta etiqueta se abre al inicio del archivo y se cierra al final del mismo
      • <head> </head>  Acá se detalla el encabezado de la página WEB. Esta se abre después de la etiqueta de <html>
      • <body> </body>  Cuerpo de la página donde se despliega el contenido global, esta etiqueta se abre después de cerrar el encabezamiento y se extiende hasta el final de la página, cerrandose antes de </HTML>

      Etiqueta: <title> </title>
      Esta etiqueta va en la parte del encabezamiento de la página web, es decir en el HEAD y define en su contenido el título de la página web, el cual aparecerá enla parte superior izquierda de la pantalla de su navegador.
      Sin cerrar nuestro navegador de internet, volvemos al editor de texto e incluimos al campo <title> entre las etiquetas de apertura y cierre el encabezado(head)

      Etiqueta <body> </body>
      Todo el texto, las imágenes y el formato visible al usuario deben encontrarse entre las etiquetas <body> </body>, esta etiqueta cuenta con los siguientes atributos, ejemplo:
      • Bgcolor: define el color de fondo de la página
      • Text: defiine el cole de texto de la página
      • Link: define el color de los vínculos de la página
      • Alink: define el color del vinculo actual
      • Vlink: define el color del vínculo ya visitado


      ¿Cómo se utilizan los colores HTML?
      Se puede llegar a tener mas de 16 millones de colores en una página web.
      Existen 2 formas de aplicar colores a una página web:
      1.- Se especifica el color deseado directamente con el nombre del colr en ingles.
      2.- Se especifica el color deseado mediante números hexadecimales mediante la siguiente estructura: #RRVVAA

      Texto en HTML
      HTML fue creado en principio para el alfabeto inglés, pero se buscaron modos para mostrar también caracteres especiales.
      Utilizaremos & y ; para denotar el inicio y el final respectivamente de un símbolo especial.

      Etiqueta <br>
      La etiqueta <br> instruye al navegador cliente que inserte un salto de línea en un documento HTML.

      Etiqueta <hr>
      La etiqueta <hr> dibuja una manera predeterminada una regla horizontal alineada automáticamente, con una apariencia de tercera dimensión.

      Encabezados
      Las etiquetas <hl> </hl> al <h6> </h6> son encabezados del cuerpo de texto. El encabezamiento <hl> nos proporciona las letras de mayor tamaño

      Unicación, formato y atributos de texto
      Etiqueta <center> </center>
      Se utiliza para centrar el texto/imagen o datos que se encuentren entre la apertura y el cierre.

      Etiqueta <b> </b>
      Esta es la etiqueta que nos posibilita un texto con negrillas.


      Etiqueta <u> </u>
      Etiqueta que posibilita resaltar un textosubrayado.


      Etiqueta <i> </i>
      Etiqueta que permite resaltar el texto coninclinación itálica