Vistas de página en total

domingo, 5 de febrero de 2012

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

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