sábado, 14 de enero de 2012

El lenguaje Html

HTML es un lenguaje que se utiliza para la creación de página en la WWW.
HTML se compone de una serie de comandos, que son interpretados por el visualizador el que ejecuta todas las ordenes contenidas en el código HTML, de modo que un visualizador puede estar capacitado para una prestaciones, pero no para otras.

MI PRIMER DOCUMENTO HTML

Es recomendable crear un directorio en el ordenador para almacenar las páginas web que vaya haciendo al aprender y que practique un tiempo antes de poner las páginas en Internet.

  1. Abra el directorio de textos: en Windows abra el Block de nOtas
  2. Teclee lo siguiente                                                                                                                               <html>
    <head>
    <title>Ejemplo1-Miprimera pagina Web </title>
    </head>
    <body>
    <center><hl>Miprimera pagina web</hl></center>
    <hr>
    Esta es mi priemra pagina web.
    <p>aqui va un segundo parrafo</p>
    </body>
    </html>
  3. Grabe este archivo con el nombre: ejemplo1.html
  4. Abra el visualizador. No necesita conectarse a Internet para ver  las paginas en su computador. Puede trabajar off-line
  5. Elija “Archivo/Abrir página” en la barra de menú del navegador.



Importante

En internet por lo general una mayúscula es distinta  a una minúscula. Como sugerencia es bueno tener todos los archivos en minúsculas.

Etiqueta <img>

No necesita etiqueta de cierre. Esta etiqueta  permite mostrar imágenes. El formato básico es :

<img src="imagen.ext">
El autor del HTML puede indicar al navegador que re dimensione la imagen especificando los siguientes atributos:

  • SRC      Identifica la imagen que se desplegará.
  • Height    Para redimensionamiento de gráfico( en pixeles o porcentaje)
  • Width    Para  redimensionamiento de gráfico (en pixeles o en porcentaje)
A la imagen se le puede aplicar un borde que se hace notorio cuando se trata de una imagen que además es un 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
En caso de que la imagen no pueda exhibirse, se puede desplegar un texto:
  • Alt        Especifica el texto alterno
 Tablas

En HTML también podemos incluir tablas. Se deben utilizar varias etiquetas:

Etiqueta <table></table>

Señala el inicio y el final de una tabla. Sus atributos son:

  • Aling              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 3 d
  • BorderLight     Asigna el color a la parte clara de un borde de  3d
  • Caption           Especifica el titulo de la tabla
  • Cellpadding     Establece la cantidad de espacio libre junto al contenido de una celda
  • Cellspacing      Asigna la cantidad de espacio entre las celdas de una tabla
  • Width              Determina el ancho de la tabla en pixeles o en porcentaje

Etiqueta <th> </th>

Indica al navegador cliente que exhiba el texto como un encabezado en la primera fila de una tabla. Atributos principales:
  • Colspan        especifica el numero de celdas que cubre el encabezado
  • Align             Determina la posición del texto titilo

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 especiales:
  • Align            Alineación del texto/objto de la celda
  • Bgcolor        Color de fondo de la celda
  • Backgroun    Imagen de fondo de una celda
  • Width           Ancho de la celda/columna con respecto al ancho de la tabla. 




Numeración y Viñetas 


Etiqueta <ul> </ul>


Indica al navegador que cree una lista con viñetas no ordenada. 


Etiqueta <ol> </ol>


Listas ordenadas, esta etiquetas indica al navegador que numera la lista de elementos comprendidos dentro de las etiquetas <ol>.


Etiqueta <li> </li>


SE usa para indicar al navegador que exhiba el texto que le sigue como un elemento de línea en una lista. Atributos:



Type
Especifica el tipo para listas ordenadas:
      Type=A usa mayúsculas
           Type=a usa minúsculas
           Type=I usa números romanos grandes
           Type=i usa números romanos pequeños
           Type=1 usa números algebraicos
Value
Indica que se inicie la numeración a partir del numero especificado.








Hipervínculos


Es un botón o una imagen que al hacer clic nos lleva a otra dirección URL, página WEB o recurso.


Etiqueta <A> </A>


Denota el inicio y el final de una instrucción que contiene de alguna forma un vínculo o hipervínculo.
Atributos:

HREF
Recurso al cual se hace referencia al Hipervínculo
NAME
Especifica el nombre de la posición a donde apuntar
TARGET
Destino del enlace










Frames


Ofrece la posibilidad de utilizar marcos.


Etiqueta <frameset> </frameset>


Define la posició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 superior o inferior de este
Margin Width
Determina que tanto espacio horizontal existe entre el objeto ubicado en un marco y los extremos izquierdo o derecho de este
Name
Ofrece la capacidad de dar nombres a las ventanas Frame, de modo que puedan ser utilizados como destino de los hipervínculos
Noresize
Indica que el usuario no puede redimensionar el marco
Scrolling
Habilita una barra de desplazamiento para un marco

SRC
Indica que exhiba un marco el contenido de un documento HTML





Etiqueta <noframes></noframes>


Es usada para desplegar un texto o una página alternativa cuando un navegador no es capaz de desplegar los marcos.


Otras Etiquetas Utiles

Etiqueta de comentarios <!--    -->


Se trata de una etiqueta que es utilizada para realizar comentarios o acotaciones.


Etiqueta de comentarios <comment> </comment>


De igual manera es utilizada  para realizar comentarios.


Etiqueta <adress> </adress>


Ofrece una manera de dar 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 aparece en cursiva para representar una cita.


Eiqueta <code> </code>


El texto dentro esta etiqueta aparece en una fuente con caracteres mono espaciados cuando se visualiza a través de un navegador.


Etiqueta <credit> </credit>


Se emplea para indicar créditos por el material incluido en un documento.


Etiqueta <em> </em>


 Indica que se debe dar énfasis al texto que se contiene. El navegador resaltará este texto con negrillas e inclinación itálica.


Etiqueta <kbd></kbd>


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


Etiqueta <nobr> </nobr>


Impide que el navegador inserte un salto de línea, incluso cuando es adecuado.


Etiqueta <p> </p>


Indica el inicio y final de oraciones a exhibir en un solo párrafo.


Etiqueta <pre> </pre>


Significa texto pre formateado y se usa para conservar espacios y saltos  de línea en lo cuerpos de texto.


Etiqueta <s></s> o <strike></strike>


Instruye al navegador que tache el texto incluido entre las etiquetas.


Etiqueta <strong> </strong>


Hace que el navegador exhiba el texto en negritas.


Etiqueta <sub> </sub>


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


Etiqueta <sup></sup>


Indica al navegado que exhiba el texto especificado como super índice.


Etiqueta <tt> </tt>


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


Etiqueta <var> </var>


Indica la navegador que exhiba el texto especificado en una fuente mas pequeña, de ancho fijo.


Atributo ="fixed" del BODY


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

Capitulo 3: Otras instrucciones importantes

  • Formularios
Es un aplantilla creada para que el usuario se comunique con nuestro servidor web de una formas fácil.
El conjunto de datos resultante, después de la edición  de los campos por el usuario, se emplea para acceder a un servicio  de información en función del método de envío y la acción asociada.
Los nombres se especifican en los atributos NAME de los elemento de entrada del formulario y los valores toman un valor inicial, que luego pueden ser editados por el usuario.
Hay que tener en cuenta que el uso de formularios esta muy limitado al servidor utilizado para la publicación de la página web.
Elemento de un formulario:

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

  • Declaración del Formulario
Se pone entre las marcas:

                   <FORM>.....................</FORM>
En la definición del formulario se pueden incluir los siguientes atributos:

* ACTION.- Especifica el URI de la acción asociada al formulario. Si no se especifica se supone que el URI es el BASE del documento

*METHOD.-Indica el método de acceso al URI de la acción. Se pueden emplear lo métodos GET y POST.

*ENCTYPE.-Especifica el tipo de codificación para el transporte de los pares nombre/valor.

  • Campos de entrada (INPUT)
El elemento <INPUT> representa un campo de entrada de datos. El atributo TYPE determina el tipo de entrada.
Los tipos de entrada son:

-Texto: INPUT TYPE=TEXT

Valor por defecto del atributo TYPE. Indica que la entrada es una sola línea. Necesariamente los atributos de este tipo deben incluir el atributo NAME que indica el nombre del campo.

Como atributos opcionales podemos tomar:
-MAXLENGTH.- Limita el máximo numero de caracteres que pueden ser introducidos en el campo.

-SIZE.- Especifica la cantidad de espacio reservado para este campo.

-VALUE.- Indica el valor inicial del campo.

-PASSWORD: INPUT TYPE = PASSWORD
Es un campo de texto como el anterior, peor el valor no se ve al escribirlo.

-CASILLA DE VERIFICACIÓN: INPUT TYPE=CHECKBOX

Representa la opción si o no. 

  • -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.

viernes, 13 de enero de 2012

Capitulo 2: Instrucciones Básica de HTML



  • El Comando HTML


 Se utiliza para delimitar el documento.
<html> </html>
Es conveniente incluirlo para evitar posibles conflictos con futuras versiones del lenguaje HTML.
  • El Comando Párrafo
Inserta autómaticamente un salto de línea al final del párrafo.
<p> </p>

  • El Comando Salto de Línea
Este comando indica donde se debe cortar el texto y donde debe comenzar de nuevo debido a que se coloca imagenes, utilizaremos el atributo CLEAR que podra tener los valores : left, rigth y all.

  • Los Comando de Encabezamiento
El texto HTML cuenta con 6 niveles de encabezados. El priemer nivel de encabezado sirve para crear las divisiones mayores del texto; por el contrario el sexto nivel  mostrará el nivel más pequeño.
Siempre escribiremos los comando de encabezado en pareja.

  • Apariencia del Texto
Para variar la aperiencia del texto tenemos varios comandos, que pueden ser utilizados conjuntamente:
-Negrita: <B>...</B>
-Cursiva: <EM>...</EM>
-Parpadeo: <BLINI>...</BLINI>
-Asignar un tamaño fijo y apariencia de caracteres de máquina de escribir: <TT>...</TT>
-Subrayado: <U>....</U>

  • Listas
En un documento de HTML se puede incluir dos tipos de listas, una lista podrá englobar otras listas.

- Listas no numeradas.- Es decir no ordenadas:
<UL>....</UL> Los elementos de esta lista se indicaran con: <LI>...</LI>.


-Listas numeradas.- Se  crfean por medio del coamndo:
<OL>...<OL>: Al igual que en las listas numeradas se indicaran por: <LI>...</LI>.


-Listas Descriptivas.- Usamos el comando:
<DL>...</DL>: Cada uno de los elementos de la lista sera indicado por el comando:

                                              <DT>....</DT>
Y un texto para cada título sera indicado por el coando:

                                               <DD>....</DD>
Ejemplo:

Ejemplo:
<body>
<dl>
<dt>HTML</dt>
<dd>Lenguaje de marcado de hipertexto</dd>
<dt>CSS</dt>
<dd>Hojas de estilo en casacada</dd>
<dt>PHP</dt>
<dd>Preprocesador PHP de hipertexto</dd>
</dl>
</body>

  • Centrando Texto
Se puede centra texto utilizando el comando:
<Center>....</Center>

Simplemente tendremos que delimitar el texto que deseamos que aparezca centrado.

  • Lineas Horizontales
Sirven para separar el el texto de los elementos o de la página, esto podremos hacerlo insertando una línea horizontal 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 docuemento.
-Los que hacen referencia a otra parte de otro documento,
-Los que hacen referencia a una dirección de correo electronico.
Referencias en el Mismo documento
Tendremos la posibilidad de crear enlaces que lleven al usuario de un lugar del documento a otro, dentro del mismo documento. Este tipo de enlaces es conocido como referencias locales, que se componen de dos partes:
1.-La Referencia
Es la zona donde el usuario hace clic para trasladarse a otra parte del documento. Esta zona aparecerá subrayada en el documento. Para crear una referencia local delimitaremos la zona con el comando:
<A href="#nombre"> Texto del enlace </A>
2.-El nombre Referenciado
Esta es la zona donde accede el usuario al hacer clic en la referencia correspondiente.
Paracrear un nombre local, tendremos que delimitar la zona mediante el comando:
<A NAME="nombre">....</A>
  • Referencias a otros Documentos
Para crear un enlace a otro documento es necesario conocer la ubicación de documento.
Existen 2 tipos de referencia de ubicación:
1.-Relativa
Tenemos que especificar la posición del documento en la estructura del subdirectorio, a partir del documento actual. Utilizamos el comando:
<A href="ubicación"> Texto del enlace </A>
Este tipo de enlace solo puede ser realizado a un documento que este en el mismo ordenador
2.-Absoluta
Tenemos que especificar la dirección o URL. Usamos el comando:
<A "href=http//ordenador/directorio/archivo">
En "ordenado" indicaremos el nombre de la máquina en la que se encuentre el documento. En directorio y archivo indicaremos la ubicación del archivo dentro del documento.
  • Referencias a un lugar de otro documento
Indicamos el URL del documento al que hacemos referencia, escribimos un signo # y finalmente introducimos el nombre de la zona a enlazar.
  • Referencia a una dirección e e-mail
Es recomendable incluir en nuestras páginas web un enlace o directorio de correo electrónico para recibir sugerencias realizadas por los usuarios



Capitulo 1: El lenguaje HTML

  • Generalidades
    El lenguaje  HTML es un sistema para definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documentos. Este lenguajees una aplicacion del GSML(standard generalized mackup languaje).
  • Fundamentos:
  • Caracteres:
    Dependiendo del editor de textos el documento HTML puede tener distintos juegos de caracteres.
    Toda cadena de caracteres  se visualizara en el navegador.
    Para reducir los documentos a ASCII de 7 bits y representar los caracteres empleados para marcar el texto, se definen dos mecanismos de referencia:

    -Referencia por nombre: el caracter se representa con un & seguido del nombre del caracter y un punto y coma. Por ejemplo:
    &amp;

    -Referencia numerica: en lugar de dar la referencia por nombre, se escribe # seguido del numero de caracter. Por ejemplo:
    &#38; 
  • Marcas:
    Las marcas delimitan los elementos de un documento HTML, como cabeceras, parrafos, etc.
    Las marcas siempre constan de dos partes, una marca de inicio y otra de final.
    Las marcas iniciales se escriben entre los simbolos "<"y">" y las finales entre "</"y">".Por ejemplo:
    <H1>Contenido</H1> es una cabecera de nivel uno.
    Al utilizar algunos elementos, no siempre es obligatorio la marca de final de cierre.
  • Nombres:
    Los nombres se componen se una letra seguida de letras.
  • Atributos:
    Cuando una marca inicial admite atributos, estos se escriben a continuacion del nombre del elemento:
    nombre_atributo=valor_atributo
    Aunque en algunos casos, basta con el nombre del atributo.
    El valor de un atributo puede ser:

    -Una cadena de caracteres entre comillas que contenga el simbolo de fin de marca (>).
    -Un  nombre.
  • Comentarios:
    La manera de incluir se realiza mediante la marca de comentarios:
    <! ... >
    Cada comentario comienza con "..." e incluye todo el texto.

    Identificacion del nivel HTML de un documento.
    El lenguaje HTML se compone por bloques, cada uno identifican mediante una instruccion de inicio y otra de final.

    ORGANIZACION DE UN DOCUMENTO

    Los documentos en formato HTML son un documento de elementos anidados. En el nivel mas alto, nos encontramos HTML que consta de dos partes:: cabecera y cuerpo.
    En la cabecera se proporciona informacion acerca del documento, mientras que el cuerpo contiene el texto de la pagina.
  • Cabecera:
    La cabecera es una informacion acerca de las caracteristicas generales del documento. Las marcas de principio y fin del bloque son:
    <HEAD>
    ...
    </HEAD>
    Puede contener los siguientes datos:

    -Titulo(TITLE). Indica el nombre del documento.

    -Direccion de base(BASE). Proporciona una direccion de base para interpretar los enlaces relativos cuando el documento se lee fuera de su contexto.

    -El documento es un indice(ISINDEX). Si se pone la palabra clave ISINDEX, el cliente interpretara que la pagina es un indice y permitira al usuario introducir palabras claves para buscarlas.

    -Enlaces relacionados(LINK).En la cabecera podemos ncluir varios enlaces relacionados con el documento, como versiones anteriores, direccion del autor, etc.

    -Metainformacion(META).Sirve para proporcionar informacion sobre el documento que no pueda ser expresada en los campos anteriores. La informacion se escribe usando nombre/valor que pueden ser empleados para dos propositos:

    1. Proporcionar datos al servidor de HTTP para que genere campos de cabecera.
    2. Para que un usuario incluya informacion adicional sobre el documento.
    Cuerpo:
    El cuerpo contiene la parte mas importante del documento HTML. Es donde vamos a insertar todo el texto y los objetos van a ser presentados al usuario.
    <BODY>
    </BODY>