domingo, 22 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>
Publicado por en No hay comentarios:
Etiquetas:

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
Publicado por en No hay comentarios:
Etiquetas:

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>
Publicado por en No hay comentarios:
Etiquetas:
Suscribirse a: Entradas (Atom)