ETIQUETAS HTML

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

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

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

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 

Instruye al navegador que exhiba el texto en negritas, algunos navegadores muestran en cursiva

Etiqueta 

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

Etiqueta 

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.

EL LENGUAJE DE HTML PRIMER CAPITULO

GENERALIDADES:

El lenguaje de HTML es un sistema para definir tipos de documentos estructurados y lenguajes . Este lenguaje es una aplicacion delSGML.

• DESCRIPCIONES DE LOS COMPONENTES BÁSICOS

Indica el formato de los caracteres, marcas, nombres, atributos y comentarios

• ESTRUCTURA DEL DOCUMENTO

Marcas empleadas para definir partes de documento y las estructuras del bloque.

• CARACTERES, PALABRAS Y PÁRRAFOS

Juegos de caracteres aceptados en HTML y el marcador alternativo para que el texto sea solo ACII de 7 bits, ademas de describir como se tratan las palabras y párrafos.

• CARACTERÍSTICAS HIPERMEDIA

Necesitamos marcas para definir relaciones entre distintos documentos, inserción de imágenes y otras características.

• FORMULARIOS 

Permiten la interacción del usuario y el servidor mediante la definición de plantillas de formulario, que el usuario completa y envía para su proceso. 

• TABLAS

Se puede introducir tablas al igual que en un documento de texto normal.

• MAPAS

Creamos imágenes interactivas con el usuario

• CAPAS

Con la que estructuramos los documentos "HTML"

FUNDAMENTOS

• Caracteres:
  HTML puede tener distintos 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:
  Delimitan los elementos de un documento HTML, como cabeceras, parrafos, etc.
  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:
  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>

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

COMO PONER COLOR DE TEXTO, FONDO DE LA PAGINA Y TAMAÑO DE LETRA EN HTML

Color: Regula el color de los caracteres. En principio existen dos posibilidades para definir los colores en HTML:

1. Mediante la especificación de los valores RGB del color deseado en forma hexadecimal (RGB=Red/Green/Blue, valores Rojo/Verde/Azul)
2. Mediante la especificación del nombre del color en ingles

Ejemplos:

<FONT COLOR="BLACK">Negro</FONT>	Negro	#000000
<FONT COLOR="RED">Rojo</FONT>	Rojo	#FF0000
<FONT COLOR="GREEN">Verde</FONT>	Verde	#00FF00
<FONT COLOR="BLUE">Azul</FONT>	Azul	#0000FF
<FONT COLOR="YELLOW">Amarillo</FONT>	Amarillo	#FFFF00

Para ponerle color de fondo a la página escribir:
<body bgcolor=#808080></body> con el cual obtendremos un color de fondo gris oscuro.
Colocar mal los colores de fondo en nuestras páginas puede provocar problemas. ¿Qué ocurría con los links o enlaces si colocáramos un fondo de color azul?. Puesto que los links son azules cuando todavía no se han pulsado puede ocurrir que no se puedan leer con claridad o incluso que no se puedan distinguir en absoluto del fondo.
Se puede imaginar todavía un caso peor si decidiéramos colocar un fondo demasiado oscuro, tan oscuro que no permitiera distinguir con claridad la información que se presenta en pantalla. Podemos remediar esto eligiendo nosotros mismos el color que queremos que tengan los links o enlaces e incluso el texto, las etiquetas para hacer esto son las siguientes:

• text="#número" Para el color del texto.
• link="#número" Para el color de los enlaces.
• vlink="#número" El color con que aparecerán los enlaces ya visitados.
• alink="#número" Color del enlace cuando lo pulsamos.

Por lo tanto la etiqueta <body> puede quedar del siguiente modo:
<body bgcolor="#num" text="#num" link="#num" vlink="#num" alink="#num">
Ahora veremos como poner una imagen de fondo. Es muy sencillo, basta con usar la etiqueta:
background="localización de la imagen" Esta etiqueta va dentro de la etiqueta <body>.
Ejemplo:
<body background="/documentos/html/gifs/dragonball.gif">