HTML PDF

Hyper Text Markup Language
Lic. Francisco Montilla Colegio Universitario de Caracas
Estructura de un documento
HTML trata de definir la estructura de los documentos, aunque tambin tenga alguna posibilidad de modificar su apariencia. Se puede definir la estructura de un documento como la relacin que mantienen las partes del mismo entre ellas. Esto contrasta con el uso de los procesadores de texto que consideran solo la apariencia de los documentos, y casi nunca su estructura.
Terminologa HTML
Etiqueta: un cdigo que se inserta en el contenido del documento para determinar la estructura del mismo (<TAG> y </TAG>). Atributo: aporta informacin 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. Tambin se encarga de solicitar nuevos documentos segn HTTP.
Un Documento HTML
<!DOCTYPE HTML PUBLIC ''-//W3C//DTD HTML 4.0//EN''> <HTML>
<HEAD>  </HEAD> <BODY>  </BODY>
</HTML>
La Etiqueta <HTML>
Marca el comienzo y el final del documento. En la prctica 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 rechazarn la pgina Web o la mostrarn 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>.
La Etiqueta <HEAD>
Contiene las definiciones globales a todo el documento: El ttulo del documento: <TITLE> ttulo </TITLE> que ser mostrado en la barra de ttulo del browser, por lo que deben ser cortos y representativos. El destino por defecto de los hiperenlaces: <BASE href=''protocol://servername/path/'' [target=targetFrame]>. Relaciones entre este documento y otros documentos Web para determinar un mismo modo de impresin, hojas de estilo o scripts: <LINK>. El modo en que el documento debe ser tratado o informacin utilizable por motores de bsqueda y otros: <META>.
La Etiqueta <META>
<META NAME=valor CONTENT=contenido>
Author identifica el autor que cre la pgina, y algunas veces el
nombre del editor HTML usado para crear la pgina.

Description da una explicacin de la pgina o de su uso, y
suele ser utilizado por los motores de bsqueda para hacer un resumen de la pgina.
Copyright es el aviso oficial de derechos de copia de la pgina.
La Etiqueta <BODY>
<BODY [bgcolor=valor] [onload=accion] [onunload=accion]> ... </BODY> Determina la parte visible del documento.
Bgcolor: determina el color de fondo en tres cdigos hexadecimales o alguno de los 16 colores predefinidos (white, black, blue, green, etc). Onload: determina el script a ejecutar cuando la pgina ha sido cargada y antes de ser mostrada. Onunload: lo mismo que en el caso anterior pero cuando la pgina se abandona para ir a otra.
Caracteres Especiales
Algunos caracteres han de ser 'escapados' o adoptar una forma de entidad SGML para poder ser representados por todos los navegadores (juego de caracteres ISO8859-1, Latin-1).
&quote; para '', & para &, > para > y < para <. á para , Ñ para , α para a.
La Etiqueta <IMG>
La etiqueta <IMG> sirve para situar imgenes
en una pgina. Esta etiqueta no tiene etiqueta de cierre.

<img src="http://www.htmldog.com/images/logo.gif"
alt="HTML Dog" border=0>
Alineacin y Formateo de Texto
Encabezamientos <Hn> Prrafos <P> Nueva Lnea <BR> Texto Preformateado <PRE> Modificacin de la Apariencia <EM>, <STRONG> etc.
Encabezamiento
<Hn> encabezado de nivel n </Hn> HTML permite definir 6 niveles de encabezados, siendo el 1 el ms importante. Los browsers utilizan un tipo de letra mayor y ms negrita para un nivel que para el siguiente. Un encabezado ocupa siempre una lnea en exclusiva. Sirven para simular los ttulos de captulos, secciones, etc. pero no determinan que los prrafos que les siguen pertenezcan a captulo o seccin alguna.
Prrafos
<P> esto es un prrafo </P> Un prrafo comienza en una lnea nueva y se mantiene junto. Aunque la etiqueta de cierre es opcional y se puede omitir se recomienda su utilizacin siempre. Cada prrafo debe especificar su alineamiento con el atributo align, si no se les aplicar el por defecto (align=right). Se pueden introducir saltos de lnea dentro de un prrafo con <BR>, etiqueta que no se cierra.
La Etiqueta <FONT>
La etiqueta FONT se emplea para formatear
el tipo y tamao del texto en algunos puntos del documento especficos.

<FONT FACE="arial" SIZE=5 COLOR=red>Tipo para
formatear</FONT>
Texto Preformateado
<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 lnea. El texto es presentado con una fuente de paso fijo.
Modificacin de la Apariencia I
Enfatizacin:
nfasis bsico <EM> texto </EM> asociado a cursiva. nfasis fuerte <STRONG> texto </STRONG> asociado a negrita. El mismo efecto se puede conseguir con <I> y <B> pero perdemos el significado estructural de que queremos enfatizar algo, quedndonos exclusivamente en la forma fsica final.
Modificacin de la Apariencia II

Referenciar un trabajo: <CITE> referencia </CITE>. Definiciones: <DFN> trmino </DFN>. Acrnimos: <ACRONYM> letras </ACRONYM>. Cdigo de programas: <CODE> cdigo </CODE>. Variables: <VAR> variable </VAR>. Ejemplo de salida de programas: <SAMP> salida </SAMP>. Ejemplo de entrada de programas: <KBD> entrada </KBD>. Direccin: <ADDRESS> mi direccin </ADDRESS>. Citas: <QUOTE> prrafo de una cita </QUOTE> y <Q> cita corta </Q>. Lneas: <HR [align][width=ancho][size=pixels][noshade]>.
Listas
HTML proporciona un conjunto de etiquetas especiales para gestionar las listas, teniendo algn control sobre su apariencia. Las listas se pueden anidar. Listas Ordenadas: muestran un conjunto de items numerados para mostrar algn tipo de jerarqua o importancia. Listas Sin Orden: muestran un conjunto de items sin que el orden en que son mostrados implique grado de importancia o de jerarqua alguno. Glosarios: permiten definir una lista de definiciones.
Listas Ordenadas
<OL> <LI> item 1 </LI> <LI> item 2 </LI> ... <LI> item n </LI> </OL>
Se puede controlar el nmero inicial de la serie: <OL
start=numero>.
Tambin se puede elegir el conjunto de caracteres que
identifica cada item en la lista: <OL type=tipo>, con tipo a elegir entre 1 para arbico, a o A para alfabtico e i o I para romano.
Listas Sin Orden

<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.
Glosarios
<DL> <DT> trmino 1 </DT><DD> definicin 1 </DD> <DT> trmino 2 </DT><DD> definicin 2 </DD> ... <DT> trmino n </DT><DD> definicin n </DD> </DL> Los browsers se encargarn de mostrar el glosario de manera conveniente. Se pueden utilizar las etiquetas de formateo estndar para dar ms nfasis a la presentacin: <TT>, <I>, <B>, <U>, <S>, <STRIKE>, <BIG> y <SMALL>.
Hiperenlaces
<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.
Hiperenlaces II
Tiene dos usos: Como ancla para definir una referencia dentro de un documento.
<a name=inicio>Inicio:</a>
Como enlace a otra pgina a un ancla.

<a href=#inicio target=_self>Inicio</a> <a href=../../index.html target=algunframe>Indice</a> <a href=http://www.google.com/search?q=escafandra target=_blank> Bsqueda de Escafandra en Google</a>
Tablas I
<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> <TR><TD>Fila 2 Columna 1</TD><TD>Fila 2 Columna 2</TD></TR> <TR><TD>Fila 3 Columna 1</TD><TD>Fila 3 Columna 2</TD></TR> </TABLE> <TABLE> Tag de Inicio de la tabla. <CAPTION> Establece ttulo a la tabla. <TR> Especifica cada fila. <TH> Declara el encabezado de cada columna. <TD> delimita cada celda dentro de cada fila (Columnas).
Tablas II
La etiqueta <TABLE> puede tener los siguientes atributos:
align: controla la colocacin dentro de la pgina y acepta los valores left, right o center. width: determina la anchura 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.
Formularios
Un formulario es una manera que provee HTML para
interactuar con el usuario quien necesita procesar cierta informacin.

Es una seccin de un documento que contiene texto,
etiquetas, elementos especiales llamados controles con sus etiquetas a travs de los cuales se recopila la informacin deseada.
Generalmente el procesamiento de la informacin se
realiza en el servidor web, pero tambin se puede enviar la informacin a un correo electrnico.
Formularios
<!DOCTYPE HTML PUBLIC ''-//W3C//DTD HTML 4.0//EN''> <HTML>
<HEAD> </HEAD> <BODY> <FORM action = .. method = . > </ FORM> ..
Action: indica la accin a realizar (enviar a un correo, al servidor) method: indica como ser enviado
Atributo action
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 direccin de correo electrnico.
<form action="mailto:direcciondelcorreo@correo.com" method="post" enctype="text/plain">
Atributo method
Especifica el mtodo utilizado para enviar los
datos
Get (valor por defecto) los datos a enviar se aaden al URL (valor del atributo action) separados por el smbolo ?, se usa generalmente cuando se desea hacer consulta del servidor. Post los datos introducidos se incluyen en el cuerpo del formulario y se los enva. Se usa generalmente para procesos de actualizacin de datos.
Tipos de Controles
Cuadros de texto
Puede ser
De una sola lnea

<Input Type = Text name=Nombre Size=25 Maxlength=20> o de varias lneas <Textarea name=Comentarios Cols=30 Rows=10> Escriba comentarios </Textarea> Con Contrasea: <input type="password" name="contrasea">
Tipos de Controles
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 verificcin pero si
comparten el mismo nombre son mutuamente excluyentes.
Tipos de Controles
Casillas de seleccin (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.
Tipos de Controles
Listas de Opciones (Select):
<select name="transporte"> <option>Carro</option> <option Selected>Avin</option> <option>Tren</option> <option>Barco</option> </select>
Tipos de Controles
Botones (Buttons): Submit: los datos del formulario son enviados por el mtodo correspondiente.
<input Type = submit value = Enviar >
Reset: Restablece todos los controles a sus valores iniciales
<input Type = reset value = borrar >
Frames
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
acta como ndice y al lado un marco mayor que es donde se muestra la informacin de cada apartado del indice.
Frames
Los marcos cambian la estructura de la
pagina HTML tradicional, eliminando la parte del cuerpo (BODY) y sustituyndola por el cdigo <FRAMESET>. As todos los cdigos que antes aparecan dentro del cuerpo aparecen dentro del cdigo <FRAMESET>. As la estructura tpica al utilizar frames ser:
Frames
<HTML> <HEAD> <TITLE> Titulo de la ventana </TITLE> </HEAD> <FRAMESET> Aqu se definen los marcos </FRAMESET> </HTML>
Frames
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 nmeros 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.
Frames
<FRAMESET COLS="20%,80%">
, define dos marcos que dividen verticalmente la ventana ocupando respectivamente el 20 y el 80 % de la anchura.
Frames
<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.
Frames
Para especificar el contenido de los marcos
definidos con FRAMESET haremos uso del cdigo <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.
Frames
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 automticamente si es necesario. (es el valor por defecto).
Frames
NORESIZE: incluyendo este atributo se fija a
que los marcos no pueden ser aumentados o disminuidos en tamao mediante el ratn. 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>.
Frames
FRAMEBORDER="no". Este atributo elimina
el borde en un frame, pero si se quiere que se elimine completamente, tambin hay que ponrselo al frame contiguo. Si se quiere eliminar los bordes de todos los frames, se debe colocar en la etiqueta FRAMESET, como hemos visto anteriormente.
Ejemplo de Frames
<HTML> <HEAD> <TITLE> Ejemplo de frames <!- Para los navegadores que no
</TITLE> </HEAD> <FRAMESET COLS="20%,80%"> <FRAME SCR="indice.html"> <FRAME SCR="cap1.html" NAME="base"> </FRAMESET>
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>
Ejemplos de Frames
<HTML> <HEAD> <TITLE> Indice </TITLE> </HEAD> <BODY BGCOLOR="#ffffff"> <H3 ALIGN=CENTER> INDICE <A HREF="cap2.html"
</H3> <A HREF="cap1.html" TARGET="base"> Capitulo 1 </A><BR>
TARGET="base"> Capitulo 2 </A><BR> <A HREF="cap3.html" TARGET="base"> Capitulo 3 </A><BR> </BODY> </HTML>
Ejemplo de Frames
<HTML> <HEAD> <TITLE> Ejemplo de frames <FRAMESET
ROWS="50%,50%">
<FRAME
anidadas </TITLE> </HEAD> <FRAMESET COLS="60%,40%"> <FRAMESET ROWS="50%,50%"> <FRAME SCR="doc_izq_arrib.html"> <FRAME SCR="doc_izq_abajo.html"> </FRAMESET>
SCR="doc_der_arrib.html"> <FRAME SCR="doc_der_abajo.html"> </FRAMESET> </FRAMESET> </HTML>

HTML PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML PDF

Hochgeladen von

Copyright:

Verfügbare Formate

Hyper Text Markup Language

Lic. Francisco Montilla Colegio Universitario de Caracas

nombre del editor HTML usado para crear la pgina.

en una pgina. Esta etiqueta no tiene etiqueta de cierre.

alt="HTML Dog" border=0>

Alineacin y Formateo de Texto

el tipo y tamao del texto en algunos puntos del documento especficos.

Listas Sin Orden

Como enlace a otra pgina a un ancla.

La etiqueta <TABLE> puede tener los siguientes atributos:

interactuar con el usuario quien necesita procesar cierta informacin.

<HEAD> </HEAD> <BODY> <FORM action = .. method = . > </ FORM> ..

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 direccin de correo electrnico.

<form action="mailto:direcciondelcorreo@correo.com" method="post" enctype="text/plain">

De una sola lnea

comparten el mismo nombre son mutuamente excluyentes.

Son del tipo si/no, on/off o verdadero/false

<input Type = checkbox name = opcion value = ON checked>

<select name="transporte"> <option>Carro</option> <option Selected>Avin</option> <option>Tren</option> <option>Barco</option> </select>

<input Type = submit value = Enviar >

Reset: Restablece todos los controles a sus valores iniciales

<input Type = reset value = borrar >

</H3> <A HREF="cap1.html" TARGET="base"> Capitulo 1 </A><BR>

SCR="doc_der_arrib.html"> <FRAME SCR="doc_der_abajo.html"> </FRAMESET> </FRAMESET> </HTML>

Das könnte Ihnen auch gefallen