Introducción Al HTML

Un lenguaje de marcado o lenguaje de marcas es una forma de codificar un documento.

Incorpora etiquetas o marcas que contienen información adicional acerca de la estructura del texto o su presentación.

Marcado de presentación, es aquel que indica el formato del texto, es útil para maquetar la presentación de un documento para su lectura, pero resulta insuficiente para el procesamiento automático de la información.

Marcado de procedimientos, está enfocado hacia la presentación del texto, el programa que representa el documento debe interpretar el código en el mismo orden en que aparece.

Marcado descriptivo, utiliza etiquetas para describir los fragmentos de texto, pero sin especificar cómo deben ser representados, o en que orden.

Es el lenguaje de marcado procedural predominante para la construcción de páginas web.

HTML es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes.

HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>).

Etiqueta: Código que se inserta en el contenido del documento para determinar la estructura del mismo (<TAG> y </TAG>).

Atributo: Aporta información adicional que modifica el comportamiento de las etiquetas (atributo="valor").

Navegador: Programa especializado en evaluar las etiquetas y el contenido de un documento HTML y de mostrarlo conforme a las posibilidades del sistema. También se encarga de solicitar nuevos documentos según HTTP.

<!DOCTYPE HTML PUBLIC ''//W3C//DTD HTML 4.0//EN''>

<HTML>

<HEAD> <! esto es la cabecera del documento > </HEAD> <BODY> <! este es el cuerpo del documento > </BODY>

</HTML>

Marca el comienzo y el final del documento.

En la práctica este par de etiquetas puede parecer opcional, sobre todo la de cierre, pues muchos navegadores admiten documentos sin ella, pero esto puede confundir a otros navegadores que rechazarán la página Web o la mostrarán de manera impredecible.

Cualquier etiqueta del documento debe aparecer entre el par de etiquetas <HTML> y </HTML>.

Dentro de una etiqueta <HTML> puede aparecer la etiqueta <HEAD>, seguida de <BODY> o <FRAMESET>.

Contiene las definiciones globales a todo el documento:

El título del documento: <TITLE> título </TITLE> que será mostrado en la barra de título del browser, por lo que deben ser cortos y representativos.

El destino por defecto de los hiperenlaces:<BASE href=''protocol://servername/path/'' [target=targetFrame]>

El modo en que el documento debe ser tratado o información utilizable por motores de búsqueda y otros: <META>.

<META NAME=valor CONTENT=contenido>

Author identifica el autor que creó la página, y algunas veces el nombre del editor HTML usado para crear la página.

Description da una explicación de la página o de su uso, y suele ser utilizado por los motores de búsqueda para hacer un resumen de la página.

Copyright es el aviso oficial de derechos de copia de la página.

<meta name=”author” CONTENT=”WebMaster de Los Alpes”>

<meta name=”keywords” CONTENT=”viajes, ofertas, Los Alpes, Orlando”>

<meta name=”description” CONTENT=”La agencia de viajes Los Alpes tiene un gran prestigio en el mundo de las empresas y combina una gran calidad con unos excelentes precios.”>

<BODY [bgcolor=valor] [text=valor] [background=imagen]>... </BODY> Determina la parte visible del documento.

Bgcolor: determina el color de fondo en tres códigos hexadecimales o alguno de los 16 colores predefinidos (white, black, blue, green, etc).

Text: determina el color para el texto en tres códigos hexadecimales o alguno de los 16 colores predefinidos (white, black, blue, green, etc).

Background: especifica una imagen para ser utilizado como fondo de la pagina.

Algunos caracteres han de ser 'escapados' o adoptar una forma de entidad SGML para poder ser representados por todos los navegadores (juego de caracteres ISO88591, Latin1).

Carácter Referencia de Entidad

“ "

< <

> >

á - Á á - Á

é - É é - É

í - Í í - Í

ó – Ó ó - Ó

ú - Ú ú - Ú

ñ - Ñ ñ - Ñ

Encabezamientos <Hn>

Párrafos <P>

Nueva Línea <BR>

Texto Preformateado <PRE>

Modificación de la Apariencia <EM>, <STRONG> etc.

<Hn> encabezado de nivel n </Hn> HTML permite definir 6 niveles de encabezados, siendo el 1

el más importante.

Los browsers utilizan un tipo de letra mayor y más negrita para un nivel que para el siguiente.

Un encabezado ocupa siempre una línea en exclusiva.

Sirven para simular los títulos de capítulos, secciones, etc. pero no determinan que los párrafos que les siguen pertenezcan a capítulo o sección alguna.

<P> esto es un párrafo </P> Un párrafo comienza en una línea nueva y se mantiene

junto.

Aunque la etiqueta de cierre es opcional y se puede omitir se recomienda su utilización siempre.

Cada párrafo debe especificar su alineamiento con el atributo align, si no se les aplicará el por defecto (align=right).

Se pueden introducir saltos de línea dentro de un párrafo con <BR>, etiqueta que no se cierra.

La etiqueta FONT se emplea para formatear el tipo y tamaño del texto en algunos puntos del documento específicos.

<FONT FACE="arial" SIZE=5 COLOR=red>Tipo para formatear</FONT>

Face: especifica el tipo de fuente en que se mostrara el texto.

Size: define el tamaño para la letra. Color: especifica el color del texto.

<PRE> texto tal cual queremos que aparezca </PRE>

Permite describir la forma en que queremos que aparezca un texto, respetando el espaciado y los saltos de línea.

El texto es presentado con una fuente de paso fijo.

<p>Hola Adiós</p> Mostrara: Hola Adiós

<pre>se mostrará así tal como se escribió</pre>

Enfatización:

Énfasis básico <EM> texto </EM> asociado a cursiva.

Énfasis fuerte <STRONG> texto </STRONG> asociado a negrita.

El mismo efecto se puede conseguir con: <I> Cursiva. <B> Negrita <U> Subrayado <TT> Teletype, proporciona un espaciado simple entre las

letras del texto <S> <STRIKE> Tachado <BIG> Grande <SMALL> Pequeña

Referenciar un trabajo: <CITE> referencia </CITE>. Definiciones: <DFN> término </DFN>. Acrónimos: <ACRONYM> letras </ACRONYM>. Código de programas: <CODE> código </CODE>. Variables: <VAR> variable </VAR>. Ejemplo de salida de programas: <SAMP> salida </SAMP>. Ejemplo de entrada de programas: <KBD> entrada </KBD>. Dirección: <ADDRESS> mi dirección </ADDRESS>. Citas: <QUOTE> párrafo de una cita </QUOTE> y <Q> cita

corta </Q>. Líneas: <HR [align][width=ancho][size=pixels][noshade]>.

La etiqueta <IMG> sirve para situar imágenes en una página. Esta etiqueta no tiene etiqueta de cierre.

<img src="http://www.htmldog.com/images/logo.gif" alt="HTML Dog" border=0>

HTML proporciona un conjunto de etiquetas especiales para gestionar las listas, teniendo algún control sobre su apariencia.

Las listas se pueden anidar. Listas Ordenadas: muestran un conjunto de items numerados

para mostrar algún tipo de jerarquía o importancia. Listas Sin Orden: muestran un conjunto de items sin que el

orden en que son mostrados implique grado de importancia o de jerarquía alguno.

Glosarios: permiten definir una lista de definiciones.

<UL><LI> item 1 </LI><LI> item 2 </LI>...<LI> item n </LI></UL>

Se puede controlar el tipo de indicador de los items: <UL bullet=tipo> donde tipo es uno a elegir entre circle, square y disc.

<DL><DT> término 1 </DT><DD> definición 1 </DD><DT> término 2 </DT><DD> definición 2 </DD>...<DT> término n </DT><DD> definición n </DD></DL> Los browsers se encargarán de mostrar el

glosario de manera conveniente. Se pueden utilizar las etiquetas de formateo

estándar para dar más énfasis a la presentación: <TT>, <I>, <B>, <U>, <S>, <STRIKE>, <BIG> y <SMALL>.

<OL><LI> item 1 </LI><LI> item 2 </LI>...<LI> item n </LI></OL>

Se puede controlar el número inicial de la serie: <OL start=numero>.

También se puede elegir el conjunto de caracteres que identifica cada item en la lista: <OL type=tipo>, con tipo a elegir entre 1 para arábico, a o A para alfabético e i o I para romano.

<A name=nombre href=destino> origen </A>

Los hiperenlaces son la esencia del Web.

Permiten ir de un documento a otro siguiendo los caminos que han sido marcados por los creadores de los documentos Web.

Tienen dos componentes: el ancla fuente y el ancla destino.

Un ancla es una zona con nombre dentro de un documento HTML.

Tiene dos usos:Como ancla para definir una referencia dentro de un documento.

<a name=“inicio”>Inicio:</a>

Como enlace a otra página ó a un ancla.

<a href=“#inicio”>Inicio</a>

<a href=“../../index.html”>Indice</a>

<a href=“http://www.google.com/search?q=escafandra”> Búsqueda de Escafandra en Google</a>

<TABLE>

<CAPTION> Ejemplo de Tabla 3x2 </CAPTION>

<TR><TH>Columna1</TH><TH>Columna2</TH></TR>

<TR><TD>Fila 1 Columna 1</TD><TD>Fila 1 Columna 2</TD></TR>



</TABLE> <TABLE> Tag de Inicio de la tabla <CAPTION> Establece título a la tabla. <TR> Especifica cada fila. <TH> Declara el encabezado de cada columna <TD> delimita cada celda dentro de cada fila (Columna)

La etiqueta <TABLE> puede tener los siguientes atributos: align: controla la colocación dentro de la página y

acepta los valores left, right, center o justify. width: determina la anchura de la tabla en pixels o

en un porcentaje de la anchura de la ventana del browser, 50% por ejemplo.

height: determina el largo de la tabla en pixels o en un porcentaje de la anchura de la ventana del browser, 50% por ejemplo.

border: determina la anchura en pixels del borde si lo hay.

cellspacing: el espacio en pixels entre celdas. cellpadding: el espacio en pixels entre el final de la

celda y su contenido.

Una marquesina (en inglés, marquee) es una ventana en la que se desplaza un texto.

Permite darle dinamismo y movimiento a la pagina web, haciendo que se vea más atractiva.

<MARQUEE>Texto en movimiento</MARQUEE>

WIDHT, HEIGHT: Ajustan la anchura y altura, respectivamente, de la marquesina.

<MARQUEE WIDTH=50% HEIGHT=60> ocupa el 50% del ancho de la pantalla y tiene una altura de 60 pixels </MARQUEE>

ALIGN: Modifica el alineamiento del texto que rodea a la marquesina, que puede ser TOP (arriba), MIDDLE (en medio) o BOTTOM (abajo).

<MARQUEE WIDTH=50% HEIGHT=60 ALIGN=BOTTOM>La palabra "¡Hola!" estará alineada con la parte inferior de la marquesina</MARQUEE> ¡Hola!

BEHAVIOR, Este atributo (comportamiento) define de qué manera se va a efectuar el desplazamiento del texto. SCROLL, el texto aparece por un lado, se desplaza hasta el otro hasta

desaparecer por él, y vuelve a empezar. SLIDE, aparece por un lado y se desplaza hasta llegar al otro extremo, y

se detiene ahí. ALTERNATE, se desplaza alternativamente hacia un lado y otro, siempre

dentro de los límites de la marquesina. BGCOLOR, Modifica el color de fondo de la marquesina. DIRECTION, Modificar la dirección hacia la que se dirige el texto; la cual

puede ser LEFT (izquierda) o RIGHT (derecha) SCROLLAMOUNT, define la cantidad de desplazamiento del texto en cada

movimiento de avance, expresado en pixels (a mayor número, mayor velocidad)

SCROLLDELAY , define el tiempo entre cada movimiento de avance, expresado en milisegundos (a mayor número, menor velocidad)

Los marcos son divisiones que se realizan de la pagina para mostrar en cada parte una pagina HTML distinta. Cada marco tendrá un URL determinado.

Es muy usado el tener un marco estrecho que actúa como índice y al lado un marco mayor que es donde se muestra la información de cada apartado del indice.

Los marcos cambian la estructura de la pagina HTML tradicional, eliminando la parte del cuerpo (BODY) y sustituyéndola por el código <FRAMESET>. Así todos los códigos que antes aparecían dentro del cuerpo aparecen dentro del código <FRAMESET>. Así la estructura típica al utilizar frames será:

<HTML> <HEAD> <TITLE> Titulo de la ventana </TITLE> </HEAD> <FRAMESET> Aquí se definen los marcos </FRAMESET> </HTML>

Atributos de Frameset: ROWS="lista_de_valores": especifica el numero

de marcos en los que se divide la pagina y cuantas filas va a ocupar cada marco. Se puede expresar en números enteros, en tantos por ciento (%) y con el valor '*' que especifica que sea tan grande como la ventana.

COLS="lista_de_valores": utiliza el mismo tipo de valores que ROWS para especificar la longitud en columnas de los marcos.

<FRAMESET COLS="20%,80%"> , define dos marcos que dividen verticalmente la ventana ocupando respectivamente el 20 y el 80 % de la anchura.

<FRAMESET ROWS="100,*,80"> , define tres marcos que dividen horizontalmente la ventana ocupando el marco superior 100 pixeles, el inferior 80 pixeles y el central el resto de pixeles de altura de la ventana.

Para especificar el contenido de los marcos definidos con FRAMESET haremos uso del código <FRAME>. Posee los siguientes atributos: SRC="nombre_documento": documento que se

quiere colocar dentro del marco. NAME="nombre_ventana": da un nombre a un

marco, de forma que pueda ser el destino de enlaces desde otros marcos.

MARGINWIDTH="valor": especifica cual es el margen lateral en pixeles desde el margen del marco al texto incluido en el.

MARGINHEIGHT="valor": especifica cual es el margen superior e inferior en pixeles desde el margen del marco al texto incluido en el.

SCROLLING="yes | no | auto": nos permite que aparezcan o no las barras de scroll para avanzar en el documento, o que aparezcan automáticamente si es necesario. (es el valor por defecto).

NORESIZE: incluyendo este atributo se fija a que los marcos no pueden ser aumentados o disminuidos en tamaño mediante el ratón.

NOFRAME: crea un contenido alternativo que sea visualizable por navegadores que no soportan frames. El contenido de este texto alternativo se incluirá entre las tags <NOFRAME> y </NOFRAME>.

FRAMEBORDER="no". Este atributo elimina el borde en un frame, pero si se quiere que se elimine completamente, también hay que ponérselo al frame contiguo. Si se quiere eliminar los bordes de todos los frames, se debe colocar en la etiqueta FRAMESET, como hemos visto anteriormente.

<HTML> <HEAD> <TITLE> Ejemplo de frames

</TITLE> </HEAD> <FRAMESET COLS="20%,80%"> <FRAME SCR="indice.html"> <FRAME SCR="cap1.html"

NAME="base"> </FRAMESET>

<!- Para los navegadores que no soportan frames ->

<NOFRAMES> <A HREF="cap1.html"> Capitulo

1 </A><BR> <A HREF="cap2.html"> Capitulo

2 </A><BR> <A HREF="cap3.html"> Capitulo

3 </A><BR> </NOFRAMES> </HTML>

<HTML> <HEAD> <TITLE> Indice </TITLE> </HEAD> <BODY BGCOLOR="#ffffff"> <H3 ALIGN=CENTER> INDICE

</H3> <A HREF="cap1.html"

TARGET="base"> Capitulo 1 </A><BR>

<A HREF="cap2.html" TARGET="base">

Capitulo 2 </A><BR> <A HREF="cap3.html"

TARGET="base"> Capitulo 3 </A><BR> </BODY> </HTML>

<HTML> <HEAD> <TITLE> Ejemplo de frames

anidadas </TITLE> </HEAD> <FRAMESET COLS="60%,40%"> <FRAMESET ROWS="50%,50%"> <FRAME

SCR="doc_izq_arrib.html"> <FRAME

SCR="doc_izq_abajo.html"> </FRAMESET>

<FRAMESET ROWS="50%,50%">

<FRAME SCR="doc_der_arrib.html">

<FRAME SCR="doc_der_abajo.html">

</FRAMESET> </FRAMESET> </HTML>

Un formulario es una manera que provee HTML para interactuar con el usuario quien necesita procesar cierta información.

Es una sección de un documento que contiene texto, etiquetas, elementos especiales llamados controles con sus etiquetas a través de los cuales se recopila la información deseada.

Generalmente el procesamiento de la información se realiza en el servidor web, pero también se puede enviar la información a un correo electrónico.

<!DOCTYPE HTML PUBLIC ''//W3C//DTD HTML 4.0//EN''>

<HTML>

<HEAD> … </HEAD> <BODY> <FORM action = “…..” method = “….” > ……</ FORM>…..

Action: indica la acción a realizar (enviar a un correo, al servidor)

method: indica como será enviado

Especifica un agente de procesamiento “URL HTTP”: envia los datos a un programa en un servidor.<form action=“http://mipagina/programa" method="post">

“URL mailto”: envia los datos a una dirección de correo electrónico.

<form action="mailto:[email protected]" method="post" enctype="text/plain">

Especifica el método utilizado para enviar los datos

Get (valor por defecto) los datos a enviar se añaden al URL (valor del atributo action) separados por el símbolo “?”, se usa generalmente cuando se desea hacer consulta del servidor.

Post los datos introducidos se incluyen en el cuerpo del formulario y se los envía. Se usa generalmente para procesos de actualización de datos.

Cuadros de texto Puede ser

De una sola línea <Input Type = “Text” name=“Nombre” Size=“25”

Maxlength=“20”>o de varias líneas<Textarea name=“Comentarios” Cols=“30”

Rows=“10”> Escriba comentarios … </Textarea>

Con Contraseña:<input type="password" name="contraseña">

Botones de radio (Radio Buttons)

<input Type = “radio” name = “sexo” value = “Hombre” checked>

<input Type = “radio” name = “sexo” value = “Mujer”>

Se comportan igual que las casillas de verificción pero si comparten el mismo nombre son mutuamente excluyentes.

Casillas de selección (Checkboxes) Son del tipo si/no, on/off o verdadero/false<input Type = “checkbox” name = “opcion” value = “ON”

checked>

Pueden compartir el mismo nombre (name). El atributo checked hace que este preseleccionada.

Listas de Opciones (Select):<select name="transporte"> <option>Carro</option> <option Selected>Avión</option> <option>Tren</option> <option>Barco</option></select>

Botones (Buttons): Submit: los datos del formulario son enviados por el

método correspondiente.<input Type = “submit” value = “Enviar” >

Reset: Restablece todos los controles a sus valores iniciales<input Type = “reset” value = “borrar” >

Documents

Introducción Al HTML