Free Sitemap Generator

SI DA CLICK EN LAS PROMOCIONES AYUDAS AL MTTO DE ESTA WEB, GRACIAS!!

(En Venta) GUIA METODOLÓGICA para Asesores de Tesis ==>

ASESORAMIENTO Y TESIS

ASESORAMIENTO Y TESIS
Click sobre la imagen!!! CEL: +58-4126941572

Contenidos para las siguientes Materias

Si te ha gustado esta web, haz click en algunos de los recuadros de publicidad, solo te ocupa unos segundos y colaboras al mantenimiento de la web.


"Todo hombre al nacer tiene derecho a que se le eduque, y en pago, contribuir a la educación de los demás" José Martí


¿Problemas con su PC?

Llámenos: 4126941572

SOMOS ESPECIALISTAS
No deje que cualquiera se la toque.
Somos los especialistas.



Mis Publicaciones

Btn_red_122x44

Mis Publicaciones a Tu alcance

Premio Alcanzado

Profesor Boente

"TRAIGO EN EL CORAZÓN, LAS ENSEÑANZAS DEL MAESTRO" Free Sitemap Generator

PARA CONTACTO DIRECTO Y URGENTE AQUI

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

CENTRO DE ACCESO DE DOCUMENTACION DIGITAL

Mostrando entradas con la etiqueta Lenguaje HTML. Mostrar todas las entradas
Mostrando entradas con la etiqueta Lenguaje HTML. Mostrar todas las entradas

martes, 13 de abril de 2010

HTML al instante - Parte #2



HTML al instante - Parte #2

Versión: 1.0
Autor: Santiago Badano
Ultima actualización: 13 Oct 96

En la primera parte aprendimos a colocar texto e imágenes en una página web. Vimos comandos para darle formato al texto, estilos, alinearlo, separarlo en párrafos y ponerle títulos. También vimos como incluir imágenes, y alinearlas. Con estos comandos se puede hacer una página básica.

En esta segunda parte veremos comandos que nos dan mucha más flexibilidad para mostrar la información en pantalla.


Listas en HTML
Las listas son simplemente eso: listas. Exactamente igual que cuando hacemos una lista de compras para el supermercado. Las listas son muy simples. Hay diferentes tipos: listas desordenadas, ordenadas y de definiciones. Comenzemos por las mas simples, las desordenadas.

Listas desordenadas


  • papas
  • salus
  • dulce de leche
  • pan

asi se ve --->>>
  • papas
  • salus
  • dulce de leche
  • pan
Como ven, confeccionar una lista es muy simple. Primero especificamos el tipo de lista, en este caso UL (unordered list) de lista desordenada. Luego cada item de la lista se indica con LI (list item). Fácil verdad? Verán tembién que hay un parámetro en UL, el TYPE="disc". Eso significa que el puntito que aparece a la izquierda de cada item de la lista sea un disco. También existen CIRCLE y SQUARE.

  • papas
  • salus
  • dulce de leche
  • pan

asi se ve --->>>
  • papas
  • salus
  • dulce de leche
  • pan
Tip: se pueden mezclar tipos de items como en el ejemplo anterior. Util para diferenciar items.

  • papas
  • salus
  • dulce de leche
  • pan

asi se ve --->>>
  • papas
  • salus
  • dulce de leche
  • pan

No todos los browsers soportan esto. Es un pequeño detalle pero no esta de mas saberlo. Ahora pasemos a las listas ordenadas. Se definen exactamente igual a las desordenadas, salvo que se utiliza el comando OL (ordered list). Veamos un ejemplo:

Listas ordenadas


  1. papas
  2. salus
  3. dulce de leche
  4. pan

asi se ve --->>>
  1. papas
  2. salus
  3. dulce de leche
  4. pan
En las listas ordenadas el puntito pasa a ser un numeral que indica el orden de cada item. Muy util para numerar listas automaticamente, ya que no hay que ingresar en número de cada item a mano. Al igual que en las listas desordenadas, se puede elegir mediante el parámetro TYPE el tipo. Existen A, a, I, i, y por defecto 1. Veamos como quedan:


  1. papas
  2. salus
  3. dulce de leche
  4. pan

asi se ve --->>>
  1. papas
  2. salus
  3. dulce de leche
  4. pan

  1. papas
  2. salus
  3. dulce de leche
  4. pan

asi se ve --->>>
  1. papas
  2. salus
  3. dulce de leche
  4. pan

  1. papas
  2. salus
  3. dulce de leche
  4. pan

asi se ve --->>>
  1. papas
  2. salus
  3. dulce de leche
  4. pan

  1. papas
  2. salus
  3. dulce de leche
  4. pan

asi se ve --->>>
  1. papas
  2. salus
  3. dulce de leche
  4. pan
Bueno, hasta aqui las listas. Ah, casi me olvidaba, se pueden incluir listas dentro de listas.
Como? Muy fácil:


  1. papas
  2. salus
  3. dulce de leche

    1. conaprole
    2. milky
    3. lapataia

  4. pan

asi se ve --->>>
  1. papas
  2. salus
  3. dulce de leche
    1. conaprole
    2. milky
    3. lapataia
  4. pan


Tablas en HTML
Las tablas son uno de los elementos mas versátiles del HTML. Sirven para todo. No siempre existieron las tablas. Cuando solo existia el HTML V1.0 no había tablas, recién con la versión 2.0 llegaron las tablas. Hoy casi todos los browsers soportan las tablas, aunque existen algunos que no lo hacen. Si tu browser no soporta tablas, cambienlo por una que si. Verán todo mas claro ;)

Vamos a la practica. Una tabla se define con el comando

y debe finalizar siempre con
. Cerrar una tabla es muy importante, sino la página puede aparecer totalmente diferente si nos olvidamos de un simple
. Imaginen una hoja cuadriculada. Una tabla es eso, con sus filas (TR) y columnas (TD). Primero veamos una tabla simple:




1996
1997
30 millones
80 millones
asi se ve --->>>
1996 1997
30 millones 80 millones

Esa tabla esta compuesta de la siguiente forma: Primero comienza la tabla con , indica que comienza una nueva fila (horizontal) de la tabla. Una tabla por lo menos debe tener una fila. Luego viene , que indica que comienza una columna. A continuación de este tag se coloca la información. Ven que en la segunda fila usa en vez de . TH significa TABLE HEADING, se usa cuando la información contenida es el nombre de una categoría. Simplemente lo que hace es resaltar la información. TD significa TABLE DATA y no resalta la información. TD y TH aceptan los siguiente parámetros:

HEIGHT Indica la altura de la celda. Para especificar el tamaño en pixels solo ingresar la contidad, ej: HEIGHT=340 ; también se puede ingresar el tamaño en porcentajes, ej: HEIGHT=30%
WIDTH Indica el ancho de la celda.
ALIGN Permite alinear el texto dentro de una celda. Acepta LEFT, RIGHT, CENTER.
VALIGN Permite alinear el texto verticalmente dentro de una celda. Acepta TOP, BOTTOM, CENTER.
BGCOLOR Permite especificar el color de fondo de una celda.
(solo se ve en Netscape 3.0)
ROWSPAN=n Indica que esa celda se extiende n filas.
COLSPAN=n Indica que esa celda se extiende n columnas.
Que mejor que un ejemplo para ver como se utilizan estos comandos:

Ejemplo 1 - Tabla Normal





USUARIOS EN INTERNET EN URUGUAY
1995
1996
1997
1.500
15.000
80.000

asi se ve
USUARIOS EN INTERNET EN URUGUAY
1995 1996 1997
1.500 15.000 80.000


Ejemplo 2 - Tabla Loca





Texto por aqui...
mas...
otro por aca...
y mas..
y por aca...
1A
2B


asi se ve
Texto por aqui... mas... otro por aca...
y mas.. y por aca...
1A 2B

En el correr de la semana agregaré mas información sobre las tablas. Este fin de semana no he tenido mucho tiempo, asi que agregaré unas cosas importantes sobre las tablas que no mencione aquí. Hoy en día, casi todo esta hecho de tablas. Netscape 3.0 tiene extensiones para hacer texto de multicolmnas automaticamente, pero no son estandard. Como regla general, alejense de lo que no es estandard todavía. Quizá algun dia lo sea, pero mientras...
La semana que viene van los frames, incluyendo frames invisibles!


Fin de la segunda parte.
Bueno, hasta aqui la segunda parte del mini curso de HTML. Todavía quedan muchas cosas, la semana que viene va la parte #3. Si alguien desea tratar algun tema en particular, o simplemente comentar lo aqui expuesto, no duden en hacermelo saber.
Enviar e-mail a: rgblab@cs.com.uy.

HTML al instante - Parte #1

HTML al instante - Parte #1

Versión: 1.1
Autor: Santiago Badano
Ultima actualización: 13 Oct 96

HTML significa HyperText Markup Language. Es el lenguaje en que se escriben los millones de documentos que hoy existen en el World Wide Web. Cuando accedemos a uno de estos documentos, el cliente (Netscape, IE, Mosaic, Lynx, IBrowse) los interpreta y los despliega. Existen clientes gráficos como Netscape, y otros como el Lynx que solo despliegan texto. Es muy importante no olvidar esto cuando se diseña una página web. Crear una buena página tiene dos aspectos; por un lado el conocimiento técnico para crear código HTML correcto, por otro lado el claro diseño para presentar la información.


Estructura de un documento HTML
Una página web es un archivo de texto, se puede crear con cualquier editor de texto como el edit de DOS. Todas las páginas web tienen la siguiente estructura:




primera página



...
...
...


En la primer linea encontramos el comando . Esto le indica al cliente (ej: Netscape) que comienza un documento HTML. Luego viene , la primer parte de un documento HTML. Dentro de HEAD puede ir el titulo del documento (Netscape lo muestra en la barra superior de la ventana) y otros comandos mas avanzados que luego veremos. Luego de HEAD viene <body>, que es donde se coloca la información que queremos mostrar. El comando BODY acepta varios parámetros muy interesantes: </p><p> <span style="font-size:-1;color:#eeaa00;">Tip: un documento HTML consta de dos partes: HEAD y BODY. Siempre deben estar presentes.</span> </p><p> <strong>Parámetros de BODY</strong> <table> <tbody><tr> <td valign="TOP"><code>BACKGROUND="imagen.gif"</code> </td><td>Permite incluir una imágen de fondo. No poner una imágen muy 'pesada' de fondo, no mas de 15k. No olvidar verificar que no dificulte la lectura del texto. </td></tr><tr> <td valign="TOP"><code>BGCOLOR="#xxxxxx"</code> </td><td>Cambia el color de fondo de una página. Donde va cada x va un número hexadecimal, del 0 a la F. Las dos primeras xx corresponden al rojo, las 2 siguientes al verde y las restantes al azul. Ej: para un fondo blanco poner todos los valores al máximo: FFFFFF. Para un fondo rojo: FF0000. </td></tr><tr> <td valign="TOP"><code>TEXT="#xxxxxx"</code> </td><td>Cambia el color del texto de <em>toda</em> una página. La selección de color funciona igual para todos los casos. </td></tr><tr> <td valign="TOP"><code>LINK="#xxxxxx"</code> </td><td>Cambia el color de todas las conexónes (links) de toda una página. </td></tr><tr> <td valign="TOP"><code>VLINK="#xxxxxx"</code> </td><td>Cambia el color de todas las conexónes visitadas (links) de toda una página. </td></tr></tbody></table> </p><p> <span style="font-size:-1;color:#eeaa00;">Tip: Para ver un ejemplo de como se usa esto pueden fijarse en el código de esta misma página.</span> </p><p> En la última linea del código del ejemplo esta </html>. Esto le indica al cliente ( Netscape) que terminó el documento. Noten que: <head> tiene su correspondiente llave de cierre </head>, y <body> tiene </body>. Esto es fundamental incluirlo en la página para tener un documento HTML correcto. Esta estructura de cabezal (HEAD) y cuerpo (BODY) siempre debe ser mantenida. Envolviendo estas dos secciones va el <html> y </html>. </p><p> </p><hr /> <p> <span style="color:#00bb00;"><strong>Incluyendo texto</strong></span> <br />Si cargamos el código del primer ejemplo veremos que no aparece nada. (solo el titulo!) <br />Tenemos la estructura, ahora hace falta agregarle la información. Lo primero que debemos tener claro es que al cliente web (Netscape) no le importa los espacios, tabs, o fin de lineas que tenga un texto creado con el edit. Como ejemplo, veamos la siguiente página: </p><p> <table> <tbody><tr> <td bgcolor="#442233"> <pre><html> <br /><head> <br /><title>primera página



Bienvenido a mi página


Esta página se encuentra en Montevideo Uruguay,

en el servidor web de Compuservice.


Hasta luego!


Este código de ve asi:

Bienvenido a mi página

Esta página se encuentra en Montevideo Uruguay,
en el servidor web de Compuservice.
Hasta luego!

Aqui aparecen varios comandos nuevos.

es para indicar el que texto es un tíulo. Cuando esta página es cargada ese texto aparece en un tipo de letra más grande.

es un comando 'contenedor', significa que necesita una llave de cierre que es

. Esta llave indica que hasta ahi llega el título, sino toda la página apareceria con letras gigantes.
le indica al cliente que muestre 'Montevideo, Uruguay' más fuerte. indica que le de énfasis. Generalmente todos los clientes muestran al texto como bold, y como italic.

no es un comando contenedor. Cuando colocamos un
, indica un corte de linea (CR).
tampoco es contenedor, indica incluir un separador.

Comandos basicos de formateo de texto

Indica que el texto en un título. El mas importante (grande) es H1, luego H2 y asi hasta H7. Los más usados son hasta H3.
Muestra en texto seleccionado más fuerte.
Casi todos lo muestran como bold.
Muestra en texto sellecionado con énfasis.
Casi todos lo muestran como italic.

Indica un corte de linea. (CR)

Inserta un separador.

Indica un comienzo de párrafo. Tiene como opciones ALIGN (center, left y right) y otras más que luego veremos. Util para centrar o alinear a la derecha texto. Cada comiezo de párrafo deja un espacio separador.

Tip: para centrar un texto:

.


Incluyendo imágenes
Incluir imágenes en una página web es muy sencillo. Primero ciertas consideraciones:

JPG vs GIF
Solo usar JPG cuando la imágen sea una foto. Cuando sea un logo, letras, o un dibujo utilizar GIF. Existen exepciones, pero esta es una buena regla general. Lo principal es que la imágen ocupe lo mínimo posible y que tenga una calidad aceptable. Todo vale, un GIF de 256 colores generalmente en un desperdicio, con 64 colores casi no hay diferencia y puede ocupar bastante menos. Una foto en GIF de 256 colores, en JPG puede quedar a menos de la mitad. No olvidar que a nadie (va, a muy pocos) le sobra ancho de banda, y menos en nuestro país. Como regla, si una sola imagen pesa más de 50k hay que hacerla adelagazar! Muy grande para internet. Si quieren poner una imágen grande (hay casos que no hay otra), no obligar a la gente a bajarla poniendola directamente en la página, primero pongan un versión mini de digamos 150 x 100 pixels con una conexión a la grande, y avisando cuanto ocupa la grande antes de obligar a bajarla. Existen otras consideraciones sobre la paleta de colores, pero eso lo dejo para el último capitulo.

Tip: el código para aliner la moto de arriba es:

IMG SRC
Para incluir una imágen se utiliza el comando .
IMG acepta una gran variedad de parámetros y es muy flexible. Veamos algunos:

Párametros de IMG

SRC Indica el nombre de archivo de la imágen a incluir.
HEIGHT Indica la altura de la imágen. El Netscape, si la altura no coincide con la original de la imágen, esta es estirada o achicada para llegar a la altura especificada en este parámetro.
WIDTH Indica el ancho de la imágen.
BORDER Si la imágen tiene una conexión, especificando BORDER=0 desaparece el borde caracteristico de una imágen con conexión. Si no deseamos que se vea el border, este es el comando a utilizar.
ALIGN Permite alinear una imágen. Acepta LEFT, RIGHT, BOTTOM, TOP, MIDDLE, etc.
LOWSRC Indica el nombre de archivo de la versión de carga rápida de una imágen. Muy útil para agilizar el despliegue de una página pesada.

Tip: Siempre escribir el nombre del archivo entre comillas.

Usando IMG

Top Middle Bottom


Generando conexiones (links)
Las conexiones (en ingles links) son un elemento fundamental del HTML. Supongamos que tenemos una lista de servicios. Lo ideal es que cuando seleccionamos un servicio, saltemos a una página con mas detalles sobre ese servicio. Eso es el hypertexto. En toería las conexiones podrían ser infinitas, navegando entre diferentes temas con solo seleccionarlos. Imaginen una hyperenciclopedia, donde cada tema puede ir profundizandose y ramificandose hacia todas las áreas del conocimiento. En la realidad es bastante complicado lograrlo.
En un documento HTML, se especifica una conexión mediante el comando (Anchor). Por ejemplo, para realizar una conexión sería: . Para verlo mas claro, veamos como agregarle una conexión a nuestra 'primer página'.




primera página



Bienvenido a mi página


Esta página se encuentra en Montevideo,

en el servidor de Compuservice.


Hasta luego!


Este código de ve asi:

Bienvenido a mi página

Esta página se encuentra en Montevideo Uruguay,
en el servidor web de Compuservice.
Hasta luego!

En este caso, la dirección completa es especificada. Al seleccionar Compuservice saltamos a la página principal de Compuservice. Cuando hacemos referencia a una página dentro del mismo directorio donde esta nuestra primera página solo alcanza con incluir su nombre. Por ejemplo, si estamos en index.html y queremos hacer una conexión a servicios.html que esta en el mismo directorio, solo alcanza con texto.


Fin de primera parte.
Bueno, hasta aqui la primera parte del mini curso de HTML. Todavía quedan muchas cosas, la semana que viene va la parte #2. Si alguien desea tratar algun tema en particular, o simplemente comentar lo aqui expuesto, no duden en hacermelo saber.
Enviar e-mail a: rgblab@cs.com.uy.

Visitadas

contador de visitas
reloj para webrelojes para blogger
(En Venta) GUIA METODOLOGICA. A LA VENTA (NO SEA PICHIRRE)==>

Buscar en este blog

Marketing Online

Multi_Chat (Facebook)

¿ATORMENTADO CON TU TESIS? LOCALIZANOS

unisoft.ca@gmail.com

REPARO TODO TIPO DE COMPUTADORAS A PRECIOS ECONOMICOS

LA SOLUCION A TUS PROBLEMAS DE

INFORMATICA



REPARAMOS COMPUTADORAS

DIAGNOSTICAMOS Y

DAMOS INFORME TECNICO

SOBRE PROBLEMAS DE HARDWARE



Creamos el Blog para su negocio o personal



LE HACEMOS SU PRESUPUESTO Y REPARAMOS



INSTALAMOS WINDOWS, EN TRES CONFIGURACIOENES DIFERENTES



METODOLOGIA E INVESTIGACION, TRABAJOS DE TESIS Y DE DIPLOMAS

OTROS TRABAJOS ACADEMICOS E INVESTIGATIVOS




Montamos presentaciones en Power Point para Exposiciones y Defensas.



Hacemos lo que nos solicite el Cliente en materia Informática. Nosotros servimos, no competimos



Le hacemos una Postal y le escribimos un Poema de Amor, Necesita algo más?



NO DUDE EN LLAMAR O COMUNICARSE CON NOSOTROS



unisoft.ca@gmail.com



ESTAMOS EN LOS GRUPOS DE GOOGLE, CONSULTE NUESTRAS VENTAS ON-LINE



http://groups.google.com/group/ventas-unisoft

UNISOFT-ALEBO

======================================

ESE EQUIPO ROTO, SE LO PODEMOS REPARAR Y TODOS GANAMOS




TODO LO QUE SE TE HAYA ROTO, TIENE SOLUCIÓN CON NOSOTROS (Equipos del Hogar, incluyendo PC y Laptop)


Puerto La Cruz, Anzoátegui, Venezuela

ANTE DE TIRARLOS, PIENSALO, PODEMOS REPARARLOS

TODOS GANAMOS!! Y EL PLANETA TAMBIÉN :)

Ayude al Mtto de este Sitio de Click en los Anuncios