Ejemplo de Código HTML para Reportes

Ejemplo de código HTML
<HTML>
<HEAD>
<TITLE>Un Titulo para el Browser de turno </TITLE>
</HEAD>
<BODY>

<H1>Otro título, esta vez más largo. </H1>
<P> <IMG SRC= "./felix.gif "ALIGN= "MIDDLE " ALT= "EL Gato Felix
">Hoola.
<P>Esto es un parrafo con informacion
super importante. Notese que las lineas salen pegadas aun dejando
espacios, saltos de linea, etc. <BR> &#161 Si pongo esto
si <STRONG>cambia </STRONG> de linea!
<P>Otro parrafo, esto ya es un poco rollo.
<H3>Pongamos un subtítulo<H3>
<P>Por cierto, &#191 que paso con las <A HREF= "#pepe ">anclas</A>?
<HR>
<UL>
<LI> Esto es una lista no ordenada.
<LI> Las listas quedan mejor si tienen varios elementos.
</UL>
Me voy al <A HREF= "http://www.iac.es/home.html ">IAC</A>.
<P>Vamos a crear un <EM>ancla </EM>, o lo que es lo mismo, un <A

NAME="pepe">anchor.</A>
.....................................................
.....................................................
</BODY>
</HTML>
Tu visualizador lo vería así.
El HTML se basa en una serie de etiquetas (``tags''), que casi siempre hay una al
principio y otra al final. Lo que si es común a todas es que están englobadas en los
símbolos em mayor que y menor que, de forma: <etiqueta>. Veamos las del ejemplo en
detalle:
Curso Tutorial de xHTML
Conceptos Básicos de xHTML - Parte 2

Tutorial por Jorge Oyhenard (elQuique) de Developers Live
Luego de la Primer Parte, donde comenzamos a introducirnos en el xHTML, abordamos

ahora la continuación con etiquetas como encabezados, vínculos y tablas.
En la Primer Entrega, vimos algunas etiquetas básicas de nuestras páginas xHTML,

seguiremos ahora profundizando con algunas otras.
Etiquetas de Encabezados
Las etiquetas para Encabezados (Headings) hoy día han recuperado importancia debido
al Posicionamiento en Buscadores, si bien estuvieron desde el comienzo la mayoría no
encontraba diferencia entre usar un Parrafo con fuente grande o usar las H1, H2, ..etc.
Hoy día, tal como comentamos en nuestros Tutoriales de Posicionamiento Web, las
etiquetas Heading, se utilizan para dar mayor o menor importancia a los titulos de
nuestras textos y temas expuestos en nuestras páginas web, por otra parte los buscadores
como Google, Yahoo, etc, leen estas etiquetas para dar o no prioridad al texto que ellas
encierran, y posicionar nuestras web de mejor manera cuando alguien busca esas
palabras.
H1, h2, h3 al h6
Son 6 niveles donde únicamente cambia la importancia del texto que enmarcan.
Ejemplo:
<h1>Curso Tutorial de xHTML</h2> \\ este seria el titulo
<h2>Conceptos Básicos de xHTML</h2> \\ este seria el subtitulo
Saltos de Línea
Esta Etiqueta <br /> permite establecer un Salto de Línea (bajar de renglon), a
diferencia de las anteriores no es necesario abrir y cerrar, solamente es necesario
incluirla donde queremos saltar la línea
Ejemplo:
<p>Este texto si bien es un parrafo, tendrá un salto de línea, justo acá<br />
y este otro texto se ve en a línea inferior</p>
Creando Enlaces o Vínculos
Una de las etiquetas más importantes de xHTML es <A>, que permite vincular (Link)
una página con otra, o subir o bajar dentro de una misma página.
Su formato básico es:
<a href.=”página”>texto</a>
href permite indicar una página a la cual queremos ir
texto es el texto que quedara subrayado y donde se debe dar click para ir a link
Ejemplo:
<a href=”http://www.tallerwebmaster.com”>Para visitar la web de Taller Webmaster,

click acá</a>
Todas las etiquetas que hemos mencionado, tienen otros Parámetros o Atributos que
aun no hemos mencionado, pero en esta etiqueta <a> especialmente veremos algunos
que son más que importante.
target permite definir si al dar click se abre ese link en la misma ventana, en una nueva
o en un marco especifico. En el ejemplo anterior, si damos click, la página se abre en la
misma ventana, en el siguiente ejemplo:
<a href=”http://www.tallerwebmaster.com” target=”_blank”>Para visitar la web de

Taller Webmaster, click acá</a>
Solo cambia el target, indicandosele _blank, lo que hace que al dar click se abrirá el
link en una nueva página.
title permite definir un titulo para ese link, ejemplo:
<a href=”http://www.tallerwebmaster.com” target=”_blank” title=”Visitar Taller

Webmaster”>Para visitar la web de Taller Webmaster, click acá</a>
Este texto es el que aparece cuando posicionamos el Mouse sobre el link, sin dar click,
es el llamado Tooltip.
Insertando Imágenes
Otra de las etiquetas más utilizadas es la de inserción de imágenes, se llama <img>, su

formato básico es:
<img src=”archivo_imagen”>
Ejemplo:
<img src=”logotipo.gif”>
Esta etiqueta también tiene parámetros o atributos adicionales que se le pueden

aplicar, algunos son:
width indica el ancho de la imágen, si no lo especificamos tomara la cantidad de pixeles

que tiene ese archivo.
height indica el alto de la imágen, si no se especifica toma el del archivo.
En ambos casos tanto para width, como para height siempre es mejor reducir, o ampliar
imágenes con un programa como Photoshop, ya que obligar el tamaño mediante
xHTML con estos parámetros causa mayor perdida de calidad.
alt es el texto alternativo, es el que aparece si la imágen no esta disponible por alguna
razón, o si en nuestro navegador tenemos configurado para no mostrar imágenes. Hoy
día es un atributo importante para el Posicionamiento Web, ya que los buscadores como
no pueden reconocer la figura que esta en la imágen utilizan el texto de esta etiqueta alt.
title al igual que en el link, es un texto que aparece cuando ubicamos el Mouse sobre la
imágen.
border indica el grosor del borde de la imágen
vspace indica el margen vertical, entre la imágen y los textos u otras imágenes que lo
rodean
hspace indica el margen horizontal.
align indica la alineación de esa imágen dentro de la página o parrafo. Puede ser por
ejemplo left (izquierda), rigth (derecha)
Un ejemplo más completo con todos los parámetros seria:
<img src=”logotipo.gif” width=”250” height=”200” title=”Logotipo de la empresa,

presione sobre la imágen para ampliar” alt=”Logotipo de la Empresa” align=”right”
vspace=”5” hspace=”10”>
Este ejemplo mostrara el logotipo con un ancho de 250 y alto de 200, al pasar el Mouse
sobre la imágen aparecera el texto ”Logotipo de la empresa, presione sobre la imágen
para ampliar” y si la imágen no se ve aparecera en su lugar el texto ”Logotipo de la
Empresa”, la imágen se alineara a la derecha y tendrá un margen vertical de 5 pixeles y
horizontal de 10 pixeles.
Usando Tablas
Las tablas son el mejor recurso para tabular datos, por ejemplo un Reporte de usuarios,
un listado de productos, etc, cualquier lista con varias columnas. Lamentablemente las
tablas también son usadas para maquetar sitios, o sea disponer imágenes, textos etc, esta
no es la finalidad de las tablas y es un uso incorrecto de las mismás que no debería
realizarse, para esos casos es mejor utilizar CSS, como explicamos en nuestros
Tutoriales de CSS.
Su formato básico es:
<table>
<tr>
<td>datos columna 1 en la fila 1</td>
</tr>
<tr>
</tr>
</table>
Las tablas estan formadas por varias etiquetas, como ven en el ejemplo anterior.
<table> comienza una tabla y </table> la finaliza. Las tablas estan formadas por una o
más filas.
<tr> comienza una fila y </tr> finaliza la fila. La fila puede estar formada por una o
más columnas.
<td> comienza una columna y </td> finaliza una columna.
La tabla del ejemplo luce así:
Datos columna 1 en la fila 1 Datos columna 2 en la fila 1

Datos columna 1 en la fila 2 Datos columna 2 en la fila 2
Como ven los tags xHTML del ejemplo en texto ahora se presentan gráficamente de
izquierda a derecha, fila por fila.
Al igual que los Tags anteiores, las etiquetas de las tablas pueden tener atributos o
parámetros para cambiar su forma de presentación.
border indica el grosor del borde de la tabla. Ejemplo <table border=”2”>
cellpadding indica el margen que hay entre el borde de la celda y su contenido
cellspacing indica el margen que hay entre celda y celda
También se puede aplicar la etiqueta align para alinear la tabla a la derecha, así <table
align=”right”>, o alinear al centro el contenido de una celda aplicandolo así <td
align=”center”>

Ejemplo de Código HTML para Reportes

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Ejemplo de Código HTML para Reportes

Enviado por

Direitos autorais:

Formatos disponíveis

Ejemplo de código HTML

<TITLE>Un Titulo para el Browser de turno </TITLE>

<H1>Otro t&iacute;tulo, esta vez m&aacute;s largo. </H1>

<P>Esto es un parrafo con informacion

espacios, saltos de linea, etc. <BR> &#161 Si pongo esto

si <STRONG>cambia </STRONG> de linea!

<P>Otro parrafo, esto ya es un poco rollo.

<LI> Esto es una lista no ordenada.

<LI> Las listas quedan mejor si tienen varios elementos.

Me voy al <A HREF= "http://www.iac.es/home.html ">IAC</A>.

<P>Vamos a crear un <EM>ancla </EM>, o lo que es lo mismo, un <A

Tu visualizador lo vería así.

Curso Tutorial de xHTML

Conceptos Básicos de xHTML - Parte 2

Luego de la Primer Parte, donde comenzamos a introducirnos en el xHTML, abordamos

En la Primer Entrega, vimos algunas etiquetas básicas de nuestras páginas xHTML,

Creando Enlaces o Vínculos

Su formato básico es:

href permite indicar una página a la cual queremos ir

<a href=”http://www.tallerwebmaster.com”>Para visitar la web de Taller Webmaster,

<a href=”http://www.tallerwebmaster.com” target=”_blank”>Para visitar la web de

title permite definir un titulo para ese link, ejemplo:

<a href=”http://www.tallerwebmaster.com” target=”_blank” title=”Visitar Taller

Otra de las etiquetas más utilizadas es la de inserción de imágenes, se llama <img>, su

Esta etiqueta también tiene parámetros o atributos adicionales que se le pueden

width indica el ancho de la imágen, si no lo especificamos tomara la cantidad de pixeles

height indica el alto de la imágen, si no se especifica toma el del archivo.

border indica el grosor del borde de la imágen

hspace indica el margen horizontal.

Un ejemplo más completo con todos los parámetros seria:

<img src=”logotipo.gif” width=”250” height=”200” title=”Logotipo de la empresa,

Su formato básico es:

<td> comienza una columna y </td> finaliza una columna.

La tabla del ejemplo luce así:

Datos columna 1 en la fila 1 Datos columna 2 en la fila 1

cellpadding indica el margen que hay entre el borde de la celda y su contenido

cellspacing indica el margen que hay entre celda y celda

Você também pode gostar

<H1>Otro título, esta vez más largo. </H1>