sábado, 20 de septiembre de 2014

Caracteres Especiales

Caracteres Especiales



Algunos de los navegadores de Internet, por fortuna pocos, no reconocen caracteres como la "Ñ" o las vocales acentuadas y, por lo tanto, si nuestra pagina Web es leída por un anglosajón, su navegador de Internet interpretaría dichos caracteres con símbolos raros.

No obstante, debemos saber como mínimo todos los navegadores de Internet deben soportar todos los caracteres gráficos del alfabeto latino, en el cual se encuentran definidas nuestras vocales acentuadas, la "Ñ", tanto minúsculas como mayúsculas, etc.

La tabla siguiente contiene una relación de los nombres, también llamadas "entidades de caracter", de los caracteres especiales mas importantes.

Así para poder poner la palabra página seria de la siguiente forma:

Página. y el resultado en el navegador seria Página.




Formularios

Formularios


Existe una forma de generar formularios en html para el envió de informacion hacia alguna base de datos que este almacenada en algun servidor, para ello necesitamos rellenar un formulario para enviar nuestros datos y al dar clic en el botón de enviar se activa una acción que puede enviar esa informacion hacia un correo electrónico o una pagina Web.

La estructura es la sigueinte:

<FORM METHOD="POST" action="MAILTO:ejemplo@hotmail.com">
         .
         .
         .
</FORM>

Existen también varios herramientas de un formulario que nos ayudan a guardar informacion de una manera eficaz y que nos es muy util para rellenar formularios:

Para cajas texto:
<input type="text" value="hola">

Para valores que deseamos ocultar:
<input type="password" value="hola">

Para botones:
<input type="submit">

Para botones que restablecen nuestras cajas de texto:
<input type="reset">

Para adjuntar archivos:
<form enctype="multipart/form-data" method="POST" 
action="mailto:ejemplo@hotmail.com">
<input name="mi fichero" type="file">
<input type="submit" value="Adjuntar fichero">
</form>

Para botones de opción:
Clase A
<input type="radio" name=clase value=A>
Clase B
<input type="radio" name=clase value=B>

Para cajas de verificación:

Clase A
<input type="checkbox" name=clase value=A>
Clase B
<input type="checkbox" name=clase value=B>

Para listas:
<select name="lista">
          <option>Valor 1
          <option>Valor 2
          <option>Valor 3
          <option selected>Valor 4
          <option>Valor 5
</select>

Para áreas de texto ej. para dejar algún comentario en cierta pagina Web:
<textarea name="texto1" rows=5 cols=40>Introduce aquí tu comentario</textarea>



martes, 16 de septiembre de 2014

Colores en Tablas

Colores en Tablas 


Para definir el color de las lineas de nuestra tabla vamos a utilizar el atributo BORDERCOLOR de la siguiente forma:

<BORDERCOLOR="color">

Donde "color " es el color de los bordes de la tabla, pero como siempre en ingles.

<TABLE BORDERCOLOR=BLUE BORDER=3 ALIGN=CENTER>

Color de celda 

Así como podemos colorear los bordes de la tabla, también lo podemos hacer con las celdas mediante el atributo BGCOLOR, dentro de las etiquetas <TD> o <TH>, de la siguiente forma:

<TD BGCOLOR="color">

<TH BGCOLOR="color">

De fondo en la tabla

Es muy fácil aplicar al fondo de la tabla, ya que se hace de la misma forma que con las celdas, la única diferencia es que el atributo BGCOLOR va insertado en la etiqueta <TABLE>, como a continuación se presenta:

<TABLE BGCOLOR="color">

Imagen de fondo en la tabla

En lugar de un color solido para el fondo de nuestra tabla, también podemos aplicar una imagen utilizando el atributo BACKGROUND de la siguiente forma:

<TABLE BACKGROUND=URL>

Donde URL es la dirección o bien la trayectoria y el nombre del archivo que contiene la imagen que deseamos insertar como fondo de nuestra pagina Web.

Imagen de fondo en las celdas

Por supuesto que a las celdas de una tabla le podemos colocar una imagen de fondo.

También se utiliza el atributo BACKGROUND, pero ahora insertado en <TD> o <TH> de la siguiente forma:

<TD BACKGROUND=URL>

<TH BACKGROUND=URL>


lunes, 15 de septiembre de 2014

Tablas y Caracteristicas I

Tablas y Características


Las tablas en html son muy parecidas a las que se utilizan en el procesador de textos de Word, también están formadas por renglones y columnas y a la intersección de estas también se le llama celda.

Dentro de una celda podemos colocar texto, imágenes o hipervínculos, por lo que en una tabla podemos presentar información en varias columnas.

Crear Tabla 

Para definir una tabla vamos a utilizar las etiquetas <TABLE>...</TABLE>, que definirán el principio y el fin de la tabla, y todo lo que escribamos dentro de esta área pertenecerá a la tabla.

Filas 

Para delimitar las filas se utilizan las etiquetas <TR>...</TR>, es muy importante mencionar que las filas están compuestas por celdas.

Celdas

Dentro de cada fila debemos delimitar el principio y el fin de cada celda haciendo uso de las etiquetas <TD>...</TD>, y lo que escribamos entre estas etiquetas es lo que se va a mostrar dentro de la celda.

<TABLE>
          <TR>
                    <TD>Celda 1 Fila 1</TD>
                    <TD>Celda 2 Fila 1</TD>
                    <TD>Celda 3 Fila 1</TD>
          </TR>
          <TR>
                    <TD>Celda 1 Fila 2</TD>
                    <TD>Celda 2 Fila 2</TD>
                    <TD>Celda 3 Fila 2</TD>
          </TR>
</TABLE>

Bordes

Para trazar lineas de contorno alrededor de las celdas, es necesario colocar el atributo BORDER dentro de la etiqueta </TABLE>, de la siguiente forma:

<TABLE BORDER="n">

Border nos permite indicar el grosor que va a tener el contorno de la tabla sin modificar el contorno de las celdas.

Donde "n" es el grosor de la tabla en pixeles. Si "n" es igual a 0 no se mostraran bordes.

Encabezados

Podemos decir que los encabezados son celdas situados en la primera fila o en la primera columna de la tabla.

Html nos brinda las etiquetas <TH>...</TH> que engloban los encabezados, es decir todo lo que escribamos dentro de esas etiquetas se mostrara mas resaltado y centrado con respecto a la celda.

En columnas:

<TABLE>
          <TR>
                    <TH>Encabezado 1</TH>
                    <TH>Encabezado 2</TH>
                    <TH>Encabezado 3</TH>
          </TR>
          <TR>
                    <TD>Celda 1 Fila 2</TD>
                    <TD>Celda 2 Fila 2</TD>
                    <TD>Celda 3 Fila 2</TD>
          </TR>
</TABLE>

En renglones:

<TABLE>
          <TR>
                    <TH>Encabezado 1</TH>
                    <TD>Celda 1 Fila 1</TD>
                    <TD>Celda 2 Fila 1</TD>
          </TR>
          <TR>
                    <TH>Encabezado 2</TH>
                    <TD>Celda 1 Fila 2</TD>
                    <TD>Celda 2 Fila 2</TD>
          </TR>
</TABLE>

Títulos

Ademas de os encabezados de la tabla podemos colocar títulos, es decir un pequeño texto en la parte superior que describa el contenido de la tabla.

Para colocar un titulo utilizaremos las etiquetas <CAPTION>...</CAPTION>. de acuerdo con el siguiente formato:

<TABLE>
<CAPTION>
          <B>Este es el titulo de mi tabla utilizando CAPTION</B>
</CAPTION>
          <TR>
                    <TD>Celda 1 Fila 1</TD>
                    <TD>Celda 2 Fila 1</TD>
                    <TD>Celda 3 Fila 1</TD>
          </TR>
          <TR>
                    <TD>Celda 1 Fila 2</TD>
                    <TD>Celda 2 Fila 2</TD>
                    <TD>Celda 3 Fila 2</TD>
          </TR>
</TABLE>

Dimensiones

Hasta ahora, las dimensiones de la tabla han sido las que ha definido el navegador de Internet, pero se pueden variar y no nada mas las de la tabla, si no también las de las celdas.

Podemos establecer el alto y el ancho de la tabla, con los atributos HEIGHT y WIDTH, de acuerdo con la siguiente estructura.

                             <TABLE HEIGHT="n" WIDTH="n">

Donde "n" es el numero de pixeles o bien una cantidad en porcentaje (%) de pantalla.

Es importante aclarar que cuando se dan las dimensiones de la tabla en porcentaje (%), si se hace mas grande o mas pequeña la ventana del navegador la tabla modifica su tamaño adaptándose a las nuevas dimensiones de la ventana, pero si se dan las dimensiones de la tabla en pixeles, el tamaño de la tabla no varia.

<TABLE HEIGHT=60% WIDTH=60%>
<CAPTION>
          <B>Este es el titulo de mi tabla utilizando CAPTION</B>
</CAPTION>
          <TR>
                    <TD>Celda 1 Fila 1</TD>
                    <TD>Celda 2 Fila 1</TD>
                    <TD>Celda 3 Fila 1</TD>
          </TR>
          <TR>
                    <TD>Celda 1 Fila 2</TD>
                    <TD>Celda 2 Fila 2</TD>
                    <TD>Celda 3 Fila 2</TD>
          </TR>
</TABLE>

Alto y Ancho de las celdas:

<TABLE>
<CAPTION>
          <B>Este es el titulo de mi tabla utilizando CAPTION</B>
</CAPTION>
          <TR>
                    <TD WIDTH=50% HEIGHT=60%>Celda 1 Fila 1</TD>
                    <TD WIDTH=50% HEIGHT=60%>Celda 2 Fila 1</TD>
                    <TD WIDTH=50% HEIGHT=60%>Celda 3 Fila 1</TD>
          </TR>
</TABLE>

Espacio entre celdas:

<TABLE BORDER=3 HEIGHT=60% WIDTH=60% CELLSPACING=10>
<CAPTION>
          <B>Este es el titulo de mi tabla utilizando CAPTION</B>
</CAPTION>
          <TR>
                    <TD>Celda 1 Fila 1</TD>
                    <TD>Celda 2 Fila 1</TD>
                    <TD>Celda 3 Fila 1</TD>
          </TR>
          <TR>
                    <TD>Celda 1 Fila 2</TD>
                    <TD>Celda 2 Fila 2</TD>
                    <TD>Celda 3 Fila 2</TD>
          </TR>
          <TR>
                    <TD>Celda 1 Fila 3</TD>
                    <TD>Celda 2 Fila 3</TD>
                    <TD>Celda 3 Fila 3</TD>
          </TR>
</TABLE>

Espacio entre celdas y texto:

<TABLE BORDER=3 HEIGHT=60% WIDTH=60% CELLSPACING=10 CELLPADDING=18>
<CAPTION>
          <B>Este es el titulo de mi tabla utilizando CAPTION</B>
</CAPTION>
          <TR>
                    <TD>Celda 1 Fila 1</TD>
                    <TD>Celda 2 Fila 1</TD>
                    <TD>Celda 3 Fila 1</TD>
          </TR>
          <TR>
                    <TD>Celda 1 Fila 2</TD>
                    <TD>Celda 2 Fila 2</TD>
                    <TD>Celda 3 Fila 2</TD>
          </TR>
          <TR>
                    <TD>Celda 1 Fila 3</TD>
                    <TD>Celda 2 Fila 3</TD>
                    <TD>Celda 3 Fila 3</TD>
          </TR>
</TABLE>

Alineación de tablas:

<TABLE="alineación">

Donde "alineación" puede tomar alguno de los siguientes valores:

CENTER
LEFT
RIGHT

Alineación en celdas (Horizontal)

<TD="alineación"> o <TH="alineación">

Donde "alineación" puede tomar alguno de los siguientes valores:

CENTER
LEFT
RIGHT
JUSTIFY

Alineación en celdas (Vertical)

<TD="alineación"> o <TH="alineación">

Donde "alineación" puede tomar alguno de los siguientes valores:

TOP
MIDDLE
BOTTOM
JUSTIFY


jueves, 11 de septiembre de 2014

Hipervinculos

Hipervínculos


Los hipervínculos son la parte de una pagina Web, a través de ellos podemos desviamos a otra pagina o bien a otra parte del mismo documento Web.

Cabe señalar que en cualquier lugar de nuestra pagina podemos incorporar hipervínculos, ahora bien, existen varios tipos los cuales son:

  1. Externos
  2. Internos
  3. En una Imagen.
  4. A una URL
  5. A un correo electrónico

Externos <A HREF=URL>"descripción del vinculo"

Un hipervínculo permite conectar nuestra pagina Web con cualquier otro documento en la WWW o Red.



<A HREF=http://www.google.com.mx>Google
<A HREF=http://www.youtube.com>Youtube
<A HREF=http://www.blogger.com>Blogger


Internos

Cuando diseñamos una pagina Web con una gran cantidad de información, esta tiende a ser muy larga y no se puede visualizar en su totalidad en la pantalla del navegador de Internet.

Por lo tanto resulta interesante crear hipervínculos a una parte u otra nuestra pagina Web y para realizar lo debemos de hacer lo siguiente:

Primero debemos crear un "Marcador de acceso" dentro de nuestra pagina Web, utilizando las etiquetas:

<A HREF=NAME>"nombre o referencia"

Donde "nombre o referencia" sera una cadena de caracteres que utilizaremos como identificador del "Marcador de acceso".

Posteriormente, en otro lugar de nuestra pagina debemos crear un hipervínculo que haga referencia al "Marcador de acceso", utilizando las etiquetas:

<A HREF="#nombre o referencia">"descripción del documento"

Donde "#nombre o referencia " es el mismo identificador del "Marcador de acceso", pero procedido del símbolo #.

Y "descripción del documento" es también un texto descriptivo que permitirá al visitante de la pagina localizar en la pantalla del navegador y determinar su contenido.

En una Imagen

En un principio se utilizaban mas textos como hipervínculos, pero en la actualidad cada vez mas diseñadores prefieren utilizar imágenes para darle un enfoque mas visual a las paginas.

Esto se logra anidando entre las etiquetas <A>...</A> la referencia de "Marcador de acceso" y la URL de la imagen.


<A HREF=#Cohete>
<IMG SRC=cohete.jpg>Un paseo por el espacio.
</A>

A una URL

Es el momento de crear accesos a una zona concreta de otra pagina Web y para ello debemos combinar en una sola las dos técnicas vistas hasta ahora.

En primer lugar, sera necesario que la pagina destino u objetivo tenga "Marcadores de acceso" creados con la etiqueta <A> y el tributo NAME, es decir <A NAME="nombre o referencia">.
En segundo lugar la pagina origen debe contener la etiqueta <A> con el atributo HREF indicando el nombre de la pagina destino y el "Marcador de acceso", o sea <A HREF=URL#nombre o referencia>"descripción del documento" (para mayor comprensión ver el vídeo de abajo).

A un correo Electrónico

La estructura para el envió de correo es:

<A HREF=MAILTO:"email">"nombre"</A>

Donde "email" es la dirección de correo electrónico al que deseamos enviar un correo, y "nombre" es la descripción del destinatario del correo (para mayor comprensión ver el vídeo de abajo).

Color de hipervínculos


Al visualizar, una pagina Web en el ordenador de Internet, los hipervínculos visitados y los aun no activados se muestran en diferentes colores, generalmente los hipervínculos no visitados se presentan en color azul marino, mientras que los visitados se marcan en color violeta.

Aun así, podemos cambiar esos colores predeterminados, de acuerdo con nuestras necesidades o gustos. Para hacerlo, el lenguaje html nos brinda tres atributos de las etiquetas <BODY>...</BODY>, los tributos son los siguientes.

ALINK="color" define el color de los hipervínculos activos, colocando en "color" el nombre del color elegido, pero en ingles.

LINK="color"  define el color de los hipervínculos no visitados, es decir antes de hacer clic en ellos.

VLINK="color" define el color de los hipervínculos ya visitados, o sea al hacer clic sobre el hipervínculo, este cambia al color definido por VLINK.

<BODY ALINK=GREEN LINK=PINK VLINK=ORANGE> 

Sonidos activados por el usuario

En e lenguaje html podemos hacer que cuando el usuario haga clic sobre el hipervínculo asociado a un sonido este se escuche o active.

<A HREF=sonido.mp3>Sonido</A>



martes, 9 de septiembre de 2014

Imágenes y Atributos

Imágenes


Un elemento muy importante en una pagina Web o documento html son las imágenes y los gráficos.

Inserción


Existen varias formas de insertar una imagen en una pagina Web, pero la mas utilizada es mediante la etiqueta:

<IMG SRC=URL>

Donde url es la dirección completa o bien la trayectoria y el nombre del archivo que contiene la imagen que deseamos insertar dentro de nuestra pagina Web.

Los tipos de imágenes ideonas para ser integradas en las paginas Web son aquellas que tienen el formato GIF y JPEG, ya que estos tipos de imágenes los soportan la mayoría de los navegadores de Internet.

Si en la misma carpeta llamada "Pagina Web", se encuentra el archivo de nuestra pagina cuyo nombre es "Primera Pagina con imagen.html" y el archivo de imagen llamado "imagen.jpg", entonces colocamos la siguiente trayectoria.


<IMG SRC=imagen.jpg>

Ahora supongamos que dentro de la carpeta "Pagina Web" existe otra, llamada "imágenes".

Por lo tanto, si dentro de la carpeta "Pagina Web" se encuentra el archivo de nuestra pagina cuyo nombre es "Primera pagina con imagen.html", y dentro de la carpeta "imágenes" esta almacenado el archivo de imagen llamado "imagen.jpg", entonces colocamos la siguiente trayectoria.

<IMG SRC=imágenes/imagen.jpg>

Ahora, supongamos que dentro de la carpeta  "imágenes" se encuentra la carpeta "Pagina Web".

Y dentro de la carpeta "Pagina Web" se encuentra el archivo de nuestra pagina cuyo nombre es "Primera pagina con imagen.html", y dentro de la carpeta "imágenes" esta almacenado el archivo de imagen llamado "imagen.jpg", entonces debemos acceder a una carpeta superior y para lograr esto escribiremos la siguiente trayectoria.

<IMG SRC=../imagen.jpg>

Referencias de texto ALT

En algunas ocaciones el navegador de Internet no puede acceder correctamente a las imágenes, ya sea porque el navegador trabaja solamente en modo de texto o porque se esta utilizando algún programa de lectura de paginas para discapacitados, o simplemente porque se tenga des habilitada la opción de visualización de imágenes.

En estos casos es importante tener una descripción de la imagen para hacernos una idea de su contenido, y para ello existe el atributo ALT.

El atributo ALT nos permite introducir en nuestras paginas una descripción de las imágenes, esta descripción se mostrara en la pantalla del navegador de Internet, siempre y cuando las imágenes no puedan ser visualizadas.

El formato para el uso del atributo ALT es el siguiente:

<IMG SRC=URL ALT="descripción de la imagen">

Donde la descripción de la imagen la debemos escribir entre "comillas".

Tamaño WIDTH y HEIGHT


El lenguaje html nos permite escalar los gráficos, es decir modificar su tamaño mediante los atributos:

WIDTH que determina el ancho de la imagen y su valor por defecto es 100 puntos de imagen.
HEIGHT que determina la altura de la imagen.

<IMG SRC="imagen.jpg" width=50 height=50>

<IMG SRC="imagen.jpg" width=100 height=100>

O

<IMG SRC="imagen.jpg" width=50% height=50%>

<IMG SRC="imagen.jpg" width=100% height=100%>

Alineación ALIGN="posición"

Posición en medio:

<IMG SRC="imagen.jpg" ALIGN=MIDDLE>

Posición arriba:

<IMG SRC="imagen.jpg" ALIGN=TOP> 
Posición abajo:

<IMG SRC="imagen.jpg" ALIGN=BOTTOM>

Posición derecha:

<IMG SRC="imagen.jpg" ALIGN=RIGHT>

Posición izquierda:

<IMG SRC="imagen.jpg" ALIGN=LEFT>


Distancia entre el texto y la imagen

Las imágenes que insertamos junto a un texto, con el atributo ALIGN=LEFT o RIGHT, hacen que el navegador de Internet muestre el texto alrededor de la imagen.

Sin embargo, en ocasiones necesitamos espacio entre el texto y la imagen, y para ello el lenguaje html tiene dos atributos que nos ayuda a establecer esta distancia.

HSPACE= pixeles y VSPACE=pixeles

<IMG SRC="imagen.jpg" ALIGN=LEFT VSPACE=30 HSPACE=30>

Bordes BORDER="tamaño"

Ademas de los atributos que acabamos de ver, para la alineación de la imagen con respecto al texto en la pagina Web, existen otros que nos permiten colocar un borde alrededor de la imagen, así como definir sus características.

De forma predeterminada, los navegadores de Internet no muestran un borde en las imágenes, pero es posible dibujarles uno, mediante sus características.

BORDER="tamaño"

Donde "tamaño", es el ancho del borde en numero de pixeles a puntos de pantalla.

<IMG SRC="imagen.jpg" ALIGN=MIDDLE BORDER=0>

<IMG SRC="imagen.jpg" ALIGN=MIDDLE BORDER=4>

<IMG SRC="imagen.jpg" ALIGN=MIDDLE BORDER=8>



Titulos

Títulos <H#>Titulo</H#>


Cuando escribamos una pagina web en html, seguramente en mas de una ocasión tendremos que mostrar texto que esta organizado en párrafos y en los que ademas hay encabezados o títulos.

Este un modo sencillo de hacer resaltar a los títulos, que es mediante las etiquetas de encabezados:

                                                        <H#>Titulo</H#>

Donde # puede ser un numero cualquiera entre 1 y 6, siendo el 1 el titulo de mayor tamaño y  6 el de menor, aunque lo mas común es utilizar encabezados entre 1 y 3.

Estas etiquetas se emplean para dividir los documentos en secciones, o mejor dicho para definir los títulos de esas secciones.

<H1>Todo en formato H1</H1>
   .
   .
   .
   .
<H6>Todo en formato H6</H6>

Lineas de Separación <HR>


Existen varias formas de separar bloques de información, pero también hay otra forma de hacerlo y es mediante lineas de separación.

Una linea de separación, como su nombre indica, es una linea recta que va de extremo a extremo de la pantalla del navegador de Internet, y al ajustar el ancho de esta, también se ajustara de forma automática.

Para mostrar una linea de separación en nuestra pagina, se utiliza la etiqueta <HR>, esta etiqueta es del mismo tipo que <BR>, es decir ABIERTA, ya que no necesita la etiqueta </HR>.

Cada vez que el navegador de Internet encuentre la etiqueta <HR> aplica una linea.

Ancho de Linea <HR WIDTH=#>

Para cambiar el ancho de linea, usamos el atributo WIDTH, de acuerdo con la siguiente estructura:

<HR WIDTH=#>


Donde # indica la anchura de la linea.

Cabe mencionar que la anchura de la linea se puede indicar de las dos formas.

1. En pixeles.
2. En tanto por cierto del ancho de la pagina del navegador de Internet, en este casi sera necesario agregar el símbolo %.

<HR WIDTH=110>

<HR WIDTH=50%>

Grosor de la linea <HR SIZE=#>

Para definir el grosor de la linea usaremos el atributo SIZE, de acuerdo con la siguiente estructura.

<HR SIZE=#>


Donde # indica el grosor de la linea en pixeles.

Color de la Linea <HR COLOR="color">

Donde "color" es el nombre del color que deseamos aplicar aplicar a la linea, pero en ingles.

Color Nombre
Blanco Nieve Snow
Blanco White
Negro Black
Gris Gray
Gris Oscuro DarkGray
Gris Claro LightGray
Azul Marino NavyBlue
Azul Blue
Verde Green
Rosa Pink
Rojo Red
Oro Gold
Amarillo Yellow
Naranja Orange

Alineación <HR ALIGN=CENTER o LEFT o RIGHT>

De forma predeterminada, las lineas horizontales se presentan cerradas en la pantalla del navegador de Internet, pero se pueden alinear al centro (CENTER), a la izquierda (LEFT) o a la derecha (RIGHT) con el atributo ALIGN, de acuerdo con la siguiente estructura.

                                    <HR ALIGN=CENTER o LEFT o RIGHT>

Es preciso aclarar que este atributo es valido cuando se define un ancho de linea, ya que si se deja la linea con el ancho por omisión, la alineación de la misma no tendrá ningún efecto.


lunes, 8 de septiembre de 2014

Listas (No ordenadas, Ordenadas, de Definición y Menús)

Listas



En el lenguaje html es posible mostrar el texto en forma de lista o numeración.

Existen tres tipos de listas que podemos utilizar:

No Ordenadas: en las cuales se mostrara un símbolo para indicar a los diferentes elementos de la lista.
Ordenadas: en las que se utilizara un numero para indicar el orden de los elementos que integran a la lista.
De Definición: que están compuestas por términos o expresiones y su definición, así como el texto que estas leyendo en este momento de las listas No ordenadas Ordenadas y de Definición.

No Ordenadas

En este tipo de listas se utiliza como marcador un símbolo que puede ser un circulo (circle), un disco (disc) o un cuadrado (square) para indicar sus elementos.

Para crear este tipo de listas se usa el siguiente formato:

<UL TYPE=disc>
          <LI> Elemento 1 de la lista 
          <LI> Elemento 2 de la lista 
          <LI> Elemento 3 de la lista 
          <LI> Elemento 4 de la lista 
</UL>

<UL TYPE=circle>
          <LI> Elemento 1 de la lista 
          <LI> Elemento 2 de la lista 
          <LI> Elemento 3 de la lista 
          <LI> Elemento 4 de la lista 
</UL>

<UL TYPE=square>
          <LI> Elemento 1 de la lista 
          <LI> Elemento 2 de la lista 
          <LI> Elemento 3 de la lista 
          <LI> Elemento 4 de la lista 
</UL>

Ordenadas OL

En este tipo de listas se utiliza un numero o elemento de orden que pueden ser letras minúsculas, bien números latinos para etiquetar los diferentes elementos de la misma.

Para crear este tipo de listas se usa el siguiente formato.

<OL TYPE="tipo">
          <LI> Elemento 1 de la lista 
          <LI> Elemento 2 de la lista 
          <LI> Elemento 3 de la lista 
          <LI> Elemento 4 de la lista 
</OL>

Donde "tipo" es el símbolo de numeración de nuestra lista ordenada y puede tomar alguno de los siguiente valores permitidos.


Valor Destacado
1 La numeración se presenta con números arábigos, en caso de que faltase el atributo TYPE, se presenta numerada así por omisión
a Numeración con letras minúsculas de la forma a, b, c, etc.
A Numeración con letras mayúsculas de la forma A, B, C, etc.
i Numeración con números romanos en minúsculas de la forma i, ii, iii, iv, v, etc.
I Numeración con números romanos en mayúsculas de la forma I, II, III, IV, V ,etc.

De Definición <DL>, <DT> y <DD>

En este tipo de lista se incluyen dos elementos por un lado la definición, que aparece junto al borde izquierdo, y por el otro termino, que aparece tabulado a la derecha.

Afortunadamente aquí se puede incluir solo la definición, solo el termino o ambos.
Para crear este tipo de listas se usa el siguiente formato.

<DL>
          <DT> Termino a definir 1
                    <DD> Definición del termino 1 
          <DT> Termino a definir 2
                    <DD> Definición del termino 2
          <DT> Termino a definir n
                    <DD> Definición del termino n
</DL>

Menú <MENU>

Este tipo de lista tiene el mismo propósito que la lista no ordenada, pero el resultado final es una lista mas compacta, es decir con menos espacios entre elementos.

Para crear una lista con menú utilizaremos la etiqueta <MENU>...</MENU> y cada uno de sus elementos estarán dentro de una etiqueta <LI>...</LI>, de acuerdo con la siguiente estructura.

<MENU>
          <LI> Elemento 1 del menú 
          <LI> Elemento 2 del menú 
          <LI> Elemento 3 del menú 
          <LI> Elemento 4 del menú 
</MENU>



domingo, 7 de septiembre de 2014

Formato de Texto

Formato de Texto

Superíndices


<html>
<head>
<title>Superíndices</title>
</head>
         <body>
                   C<SUP>2</SUP>=A<SUP>2</SUP>+B<SUP>2</SUP>
         </body>
</html>

C2=A2+B2

Subíndices


<html>
<head>
<title>Subíndices</title>
</head>
         <body>
                  CH<SUB>3</SUB>-CH<SUB>2</SUB>-CH<SUB>3</SUB>-CH<SUB>4</SUB>
         </body>
</html>

CH3-CH2-CH3-CH4

COLORES



Color Nombre
Blanco Nieve Snow
Blanco White
Negro Black
Gris Gray
Gris Oscuro DarkGray
Gris Claro LightGray
Azul Marino NavyBlue
Azul Blue
Verde Green
Rosa Pink
Rojo Red
Oro Gold
Amarillo Yellow
Naranja Orange



Párrafos y atributos

Párrafos y Atributos

Al construir una pagina web con html, debemos agrupar el texto en párrafos o bloques, así cada vez que comience un nuevo párrafo el navegador de Internet insertara una linea en blanco para separar un párrafo de otro.

Para realizar esto utilizaremos la etiqueta <P> para indicarle al navegador el comienzo del párrafo y la etiqueta </P> para indicarle el fin del párrafo.

<HTML>
          <HEAD>
                    <TITLE>Texto con Párrafos</TITLE>
          </HEAD>
          <BODY>
                    <P> Este es un párrafo que no tiene nada que ver con el párrafo de abajo</P>
                    <P> Este es un párrafo que no tiene nada que ver con el párrafo de arriba</P>
           </BODY>
</HTML>

Atributo Align

Las etiquetas <P>...</P> no sirven únicamente para delimitar párrafos como se demostró en la parte de arriba, ya que tienen otras opciones que nos ayudaran a centrar un párrafo, alinearlo a la izquierda o a la derecha.

                                                    <P ALIGN="alineación">

Donde la "alineación" puede tomar alguno de los siguientes valores.

CENTER: Todas las lineas del párrafo se mostraran centradas incluso imágenes si es que están dentro de este párrafo.
LEFT: Todas las lineas se muestran alineadas a la izquierda, de no poner esta alineación se mostraran de igual forma ya que es la que esta predeterminada.
RIGHT: Las lineas del párrafo aparecerán alineadas a la derecha, es decir todos los finales del párrafo están pegados al borde derecho.

Espacios entre palabras

Cuando insertamos espacios en blanco entre palabras, debemos de saber que el navegador únicamente toma en cuenta un solo espacio entre ellas, o sea, que si entre dos palabras insertamos cinco espacios en blanco el navegador solo mostrara un único e ignorara los otros cuatro.

Para indicar al navegador que deseamos que debemos incluir mas de un espacio en blanco debemos utilizar la etiqueta abierta:
                                                                  &nbsp;

Nota: Esta etiqueta abierta debe ser escrita siempre en minúsculas.

<HTML>
          <HEAD>
                    <TITLE>Texto con Párrafos</TITLE>
          </HEAD>
          <BODY>
                    Palabra1 &nbsp; &nbsp; &nbsp; &nbsp; Palabra2
                    <BR>
                    Palabra1 &nbsp; &nbsp; Palabra2
           </BODY>
</HTML>

Formato de Texto

Al momento de diseñar una pagina web es común destacar partes del texto en negritas, cursiva, subrayada. Para realizar esto html nos ofrece una serie de etiquetas para dar formato al texto.

Texto en Negritas <B>...</B>
Texto en cursiva o itálica <I>...</I>
Texto Subrayado <U>...</U>


miércoles, 3 de septiembre de 2014

Diseño de Paginas Web

Diseño de Paginas Web

Las paginas Web son documentos que se relacionan con otros en forma hipertextual, es decir que podemos movernos por las paginas con solo hacer un clic sobre los enlaces, ligas o links. La función de estos enlaces es ligar distintos documentos por medio de nexos definidos por el diseñador del sitio.

HTML esta basado en ordenes llamas etiquetas o tags

Es mejor que...

HTML esta basado en ordenes llamas etiquetas o tags (haga clic aquí para ver información acerca de las etiquetas o tags).

Y mucho mejor que...

HTML esta basado en ordenes llamas etiquetas o tags (haga clic aquí para ver información acerca de las etiquetas o tags).


HTML

La web utiliza un lenguaje muy sencillo para la creación de documentos que permite una fácil estructuración del texto y la posibilidad de añadir elementos multimedia como, (imagen, sonido, vídeo, etc).

Este lenguajes es html que significa (hypertext makup language) Lenguaje de Marcación de Hipertexto, indica al navegador de Internet la forma de representar el texto y los gráficos que la pagina web puede contener.

Esta basado en etiquetas o tags que determinan el inicio y la finalización de un efecto dentro de la pagina web.dicho en otras palabras, un documento html consta de texto que define el contenido de la pagina web y de una serie de etiquetas que son las instrucciones del lenguaje que definen la forma en que debe presentarse el contenido de la pagina web.

Estas etiquetas siempre comienzan con el símbolo menor que < y terminan con el símbolo mayor que >.

                                                <HTML>
                                                <BODY>
                                                <HEAD>
                                                <TITLE>

Ahora bien para indicarle al navegador de Internet hasta donde ha de aplicarse la acción de una etiqueta, se utiliza la misma etiqueta pero con el símbolo "/" justo delante de la palabra.
Así por ejemplo las siguientes etiquetas representan fin de acción.

                                                </HTML>
                                                </BODY>
                                                </HEAD>
                                                </TITLE>

<HTML>
          <HEAD>
                     <TITLE>Aqui va el titulo de la pagina</TITLE>
          </HEAD>
          <BODY>
              .
              .
              .
          </BODY>
</HTML>

<HTML> Es la etiqueta con la que debe de comenzar todo documento html.
<HEAD> Indica el inicio de la cabecera de la pagina.
<TITLE> Titulo </TITLE> Entre las dos etiquetas queda el titulo de la pagina que es el que aparece en la barra del navegador.
</HEAD> Indica el fin de la cabecera de a pagina.
<BODY> Marca el inicio del cuerpo de la pagina web.
... Aquí se colocaran las etiquetas que conforman la pagina, así como la información que contendrá.
</BODY> Indica el fin del cuerpo de la pagina.
</HTML> Marca el final de toda la pagina web.