domingo, 5 de febrero 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

  1. Abra el editor de textos: en windows abra bloc de notas
  2. 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>
  3. Grabe este archivo con nombre: ejemplo.html
  4. Abra el visualizador(no necesita conectarse a internet para ver las paginas)
  5. 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.