Mostrando entradas con la etiqueta curso html. Mostrar todas las entradas
Mostrando entradas con la etiqueta curso html. Mostrar todas las entradas

Enlaces o hipervinculos en html
0
1/20/2010 | Posted in , ,

Un enlace (hipervinculo) es un texto, boton o imagen que al momento de seleccionarlo nos trasladan a otra pagina web, esta puede estar dentro del sitio actual o en otro, ademas también nos puede mandar a otra posición en la misma pagina del enlace, a este ultimo se le llama Skip-Link.
Etiquetas < a>< /a>.-
Viene de la palabra ancla y entre estas etiquetas se delimita el texto u imagen que servirá como enlace o hipervinculo, si es un texto por defecto aparecerá en color azul y subrayado (esta configuración la podremos cambiar mas adelante con un poco de CSS), ademas los hipervinculos siempre siguen la misma estructura.
Sintaxis basica.-

< a href="direccion o url">Texto a mostrar del enlace< /a>




Atributos.-
  • HREF - (hypertext reference )En este atributo colocamos la url, la cual es la ruta de acceso a la pagina web a la que se quiere llegar al hacer clic en el enlace.
  • NAME - Nombre asignado al enlace(lo veremos mas adelante viendo el tema de anclas)
  • TARGET - Se utiliza para abrir la url contenida en el enlace en una ventana o pestaña, este atributo actualmente ya no se utiliza, ya que se deja a preferencia del usuario abrir el enlace en una nueva o en la misma ventana.
  • TITLE - Este atributo es opcional, y nos sirve para dar una descripción sobre el enlace, y esta aparecerá cuando se coloque el ratón por encima del enlace.
ejemplo.-

<a href="http://www.blogger.com/menu.html" target="_black" title="Enlace al menu principal">
MENU
</a>


Category: , ,
��

Trabajando con imagenes en Html
0
1/06/2010 | Posted in ,



Al momento de trabajar con imágenes debemos de tomar en cuenta un aspecto muy importante, se trata del tamaño de las imágenes, ya que entre mas pesadas estén, mas demorara el navegador en mostrarlas, así que mejor utilicen imágenes livianas u optimicen la imagen para la web, hay bastantes herramientas online para lograr este objetivo.
Etiqueta .-
Esta etiqueta nos sirve para insertar una imagen en un documento html, como veran, esta etiqueta es especial por que no cuenta con una etiqueta de cierre, en su lugar se utiliza un espacio en blanco seguido de una barra, es como una especie de etiqueta de cierre integrada.
Sintaxis básica.-
||
|| <img src="mi_imagen.jpg" title="Mi imagen" />
||



La etiqueta < img/> cuenta con los siguientes atributos.-
  • Src .- Este es el mas importante de todos los atributos, ya que indica la ruta donde se encuentra la imagen a mostrar.
  • Alt .- Con este atributo podemos ingresar un texto alternativo, el cual se aparecerá cuando la imagen no se muestre.
  • Width .- Con este atributo le indicamos al navegador el ancho que deberá tener la imagen.
  • Height .- Igual que el atributo anterior, solo que ahora se trata de la altura de la imagen.
  • Title .- Este atributo es opcional, y muestra un texto informativo sobre la imagen cuando pasamos el ratón sobre esta.
ejemplo.-

||
|| < img src="imagen.jpg" whith="100" height="50" alt="Mi imagen" title="Esta es mi imagen" />
||
Category: ,
��

Formato del texto Parte 2
0
1/03/2010 | Posted in ,


Continuamos con la segunda entrega del articulo, en el articulo anterior vimos el uso de los caracteres especiales, el uso de las etiquetas < br/> (salto de linea), < hr/> (dibuja una linea) y < p> (párrafo), en esta ocasión nos centraremos mas en la ubicación y atributos del texto.


Etiqueta < center> < /center>.-


Actualmente esta etiqueta se considera obsoleta, es decir ya no se debe utilizar para crear paginas web, aunque si se puede, pero no se recomienda, se utilizaba para centrar el texto, imagen o elementos que se encuentren entre ellas.


Esta etiqueta es remplazada por código CSS, para mas información puedes ver el siguiente articulo.-


Propiedades CSS Text-align


Etiqueta < b> < /b>.-


El texto entre estas dos etiquetas nos posibilita tenerlo en negrita, ejemplo.-


||
|| <body>
|| <p><b>Este texto esta en negrita</b> y este no.</p>
|| </body>
||


El resultado del ejemplo anterior quedaría de esta forma.-


Este texto esta en negrita y este no.


Etiqueta < u>< /u>.-


El texto que este entre estas dos etiquetas nos posibilita subrayarlo, ejemplo.-


||
|| <body>
|| <p><u>Este texto esta subrayado.</u></p>
|| </body>
||


El resultado del ejemplo anterior es este.- "Este texto esta subrayado."


Etiqueta < i>< /i>.-


Todo el texto que se encuentra entre estas dos etiquetas nos posibilita un texto con inclinación itálica, ejemplo.-


||
|| <body>
|| <p><i>Este texto esta con inclinación itálica.</i></p>
|| </body>
||


El resultado del ejemplo anterior seria este.- "Este texto esta con inclinación itálica."


Etiqueta < font>< /font>.-


Actualmente esta etiqueta se considera obsoleta al igual que la etiqueta < center>, con esta etiqueta se puede cambiar el color, el tamaño y tipo de fuente o letra. Pero no se preocupen ya que todo esto lo pueden aplicar mediante código CSS.
Category: ,
��

Formato del texto Parte 1
0
1/02/2010 | Posted in ,
HTML desde un principio fue creado para el alfabeto ingles, pero al pasar el tiempo los programadores web se dieron cuenta que no era suficiente y empezaron a buscar maneras para mostrar caracteres especiales, algo que marcaría el comienzo de la evolución web, la forma de utilizar un caracter especial es la siguiente.-

||
|| $acute;
||



Al principio utilizamos el simbolo ampersad (&) y terminamos con un punto y coma (;), el resultado del ejemplo anterior en pantalla es un acento, acontinuacion listare los caracteres especiales mas utilizados.-
& acute; - Acento
& ntilde; - Letra ñ
& quot; - Comillas dobles
& deg; - Grados
& nbsp; - Espacio en blanco
& aacute; p;- A con acento
& amp; - Simbolo ampersad (&)
& lt; - Signo menor que (<)
Etiqueta < br/>.-
Esta etiqueta se considera especial ya que carece de etiqueta de cierre, la etiqueta < br/> inserta un salto de linea en un documento html, ejemplo.-

||
|| <body>
|| <p>Este es un texto <br/>de prueba</p>
|| </body>
||




Y el resultado en pantalla seria el siguiente.-
Este es un texto
de prueba
Etiqueta < hr/>.-
Al igual que la etiqueta < br/>, la etiqueta < hr/> carece de etiqueta de cierre y nos sirve para dibujar de manera predeterminada una linea horizontal y contiene los siguientes atributos.-
Align - Alinea hacia la izquierda (left), centro (center) o derecha (right).
Noshade - Quita el sombreado predeterminado de la linea.
Width - Especifica el ancho de la linea, el cual puede ser medido en pixeles (px) o porcentaje (%).
Size - Especifica el alto de la linae y se mide en pixeles (px).
Para ver algunos ejemplos puedes ver el siguiente articulo, Haciendo lineas.
Etiqueta < p>.-
Todo el texto que se encuentre entre las etiquetas < p> y < /p> son tomadas por el navegador como un solo parrafo, ejemplo.-

||
|| <body>
|| <p> Este texto es un parrafo </p>
|| </body>
||
Category: ,
��

Colores en Html
0
1/01/2010 | Posted in ,

En html podemos utilizar una gran variedad de colores para mejorar el aspecto de nuestra pagina web, para poder utilizar colores en html, usaremos la notación hexadecimal con la combinación de colores RGB (rojo-verde-azul), donde cada color podrá tener un valor desde 00 hasta ff siento este ultimo el mas claro.
Sintaxis.-
||
|| #0000ff //el cual nos dará el color azul.
||

Los dos primeros sp;dígitos (00) indican el color rojo, los dos segundos dígitos (00) indican el color verde y los dos últimos (ff) indican el color azul, y la combinación de estos tres colores primarios nos da el color deseado, es importante colocar el símbolo # al principio.
Tabla de colores básicos.-



Html soporta otra forma de utilizar los colores, se trata de los colores estándar establecidos por la W3C, en lugar de usar valores hexadecimales se coloca el nombre del color en ingles, son 16 los valores soportados (aqua, yellow, white. black, orange, silver, red, blue, lime, green, gray, maroon, navy, purple, teal, olive).
Ejemplo.-aplicamos el fondo de la pagina con un valor hexadecimal y el color del texto con un color estándar.
||
|| <body bgcolor="#0000ff" text="white">
|| Hola Mundo!!!
|| </body>
||
Category: ,
��

Creando mi primera pagina web
0
1/01/2010 | Posted in ,

Vamos a crear nuestra primera pagina en html, para ello, utilizaremos un editor de texto, podemos utilizar el bloc de notas que viene por defecto en tu sistema operativo o si ustedes me lo permiten les recomiendo utilizar el editor de Notepad++, un exelente editor para diversos lenguajes de programación.
Primero dentro de la estructura html, entre las etiquetas title, colocaremos el titulo de nuestra pagina web, un ejemplo puede ser "Mi primera pagina web", enseguida dentro de la etiqueta body utilizaremos los atributos bgcolor y text para el color de fondo y texto de la pagina, y entre las etiquetas body colocaremos el contenido, en esta ocasión sera "HOLA MUNDO", veamos el ejemplo:

||
|| <html>
|| <head><title>MI PRIMERA PAGINA WEB</title>
|| </head>
|| <body background="black" text="white">
|| <p>HOLA MUNDO!!!</p>
|| </body>
|| </html>
||


Una vez escrito el código, guarda tu documento como "ejemplo01.html" (incluyendo las comillas para que se respete la extencion .html), ahora ejecútalo con el navegador web de tu preferencia y veras que en la parte de arriba del navegador tendrá como titulo MI PRIMERA PAGINA WEB, y en el área de contenido veras desplegado el mensaje HOLA MUNDO.

Ademas notaras que el area de informacion esta de color negro y el texto de color blanco, te preguntaras como?, pues bien, en la etiqueta BODY utilizamos los parametros BGCOLOR (color de fondo de la pantalla) y TEXT (color del texto a mostrar), el color tiene que estar escrito en ingles.
Category: ,
��

Sintaxis basica del html
0
12/31/2009 | Posted in ,



HTML basa su sintaxis en un sistema de etiquetas incluidas en un archivo de texto, el cual define la estructura de un documento web, las etiquetas pueden contener parametros los cuales se indican a continuacion de la palabra clave de la etiqueta separados por un espacio (< body bgcolor="#cccccc">), las etiquetas cumplen su funcion de la siguiente manera:
  • < Nombre de la etiqueta> //etiqueta de apertura
  • texto/etiquetas/graficos/etc
  • < /nombre de la etiqueta> //etiqueta de cierre
Ahora les mostrare un ejemplo:

< body bgcolor="#cccccc">Contenido< body/>
En donde body es la palabra clave de la etiqueta y bgcolor es el parametro de la etiqueta, #cccccc es el valor del parametro de la etiqueta, mas adelante veremos mas a fondo estos ejemplos.
Por ultimo para guardar el archivo web como un archivo html, lo haremos con la extencion .html, ejemplo: ejemplo.html
Category: ,
��

Introduccion a html
1
12/31/2009 | Posted in ,



HTML, siglas de HyperText Markup Language (Lenguaje de Marcas de Hipertexto), Se trata de un lenguaje utilizado para la creacion de paginas web, sin duda es la base de cualquier sitio web, y pues desde un principio me gustaria aclarar que hay un concepto erroneo sobre html ya que muchos lo consideran un lenguaje de programacion (como php, asp entre otros), en mi opinion lo considero como un sistema de etiquetas que sirve para darle una estructura al texto de un documento web.
Html fue creado en 1989 por el cientifico Tim Berners-Lee, el cual da a conocer que trabajaba en un sistema que permitira acceder a ficheros en linea, funcionando sobre redes de computadoras o maquinas electronicas basadas en el protocolo TCP/IP.
Para poder escribir nuestros codigos html necesitaremos de un procesador de texto, podemos utilizar nuestro bloc de notas que viene por defecto en nuestro sistema operativo o bien les recomiendo el notepad, un editor de texto gratuito (open source)que soporta varios lenguajes de programacion, descargalo desde aqui.
Ademas necesitaremos un navegador web para poder visualizar las paginas que realicemos con html, aqui es donde encontramos un problema ya que no todos los navegadores trabajan igual al momento de leer el codigo, asi que tendremos que trabajar un poco mas para obtener un resultado similar para la mayoria de navegadores existente, les recomiendo el navegador Mozilla Firefox y Google Chrome, normalmente al dia encuanto a funcionabilidad y son navegadores open source.
Asi que poco a poco iremos publicando articulos sobre html, esperenlos muy pronto.
Category: ,
��

Tutorial Programacion HTML
0
12/31/2009 | Posted in


En esta sección colocaremos todos los artículos relacionados con html, esperemos poco a poco formar un buen manual de este lenguaje.




Espera nuevos artículos pronto!!!
Category:
��

Etiqueta nav en HTML 5
0




La etiqueta nav en html 5 es utilizada para contener elementos de navegación como puede ser el menú de navegación principal de un sitio web, esta etiqueta es el sustituto de la etiqueta ul combinada con un poco de css para generar el menú de nuestra web.
Sintaxis.-
||
|| < html>
|| < head>< title>< /title>< /head>
|| < body>
|| < header>
|| < h1>TITULO< /h1>
|| < /header>
|| < nav>
|| ELEMENTOS DEL MENU
|| < /nav>
|| < /body>
|| < /html>
||

Como verán la sintaxis es muy sencilla y facil de enten der, la función de esta etiqueta es solo delimitar los elementos del menú de navegación, los cuales pueden estar conformados por una lista desordenada como lo hacemos con html4 o Xhtml, ejemplo.-
||
|| < nav>
|| < ul>
|| < li>Elemento 1< /li>
|| < li>Elemento 2< /li>
|| < li>Elemento 3< /li>
|| < /ul>
|| < /nav>
||
Category: , , , ,
��

Etiqueta header en HTML 5
0



La etiqueta header es la nueva etiqueta de titulo en html, dentro de esta etiqueta se muestra una serie de elementos introductorios de la pagina como el titulo de la misma o una imagen referente a la pagina como puede ser su logo.
Ademas de describir el contenido de una pagina, la etiqueta header también deberá utilizarse para describir secciones individuales dentro de la misma pagina, por ejemplo la pagina puede estar dividida en secciones, el titulo de la pagina referente al contenido y la sección de comentarios, quedaría así el código, ejemplo.-
||
|| < !DOCTYPE html>
|| < html>
|| < head>< title>TITULO DE LA PAGINA< /title>< /head>
|| < body>
|| < header>
|| < h1>TITULO PRINCIPAL< /h1>
|| < /header>
|| < section>
|| < header>
|| < h2>Subtitulo< /h2>
|| < header>
|| < p>contenido . . .< /p>
|| < section>
|| < section>
|| < header>
|| < h3>Comentarios< /h3>
|| < /header>
|| < p>Contenido de comentarios< /p>
|| < /section>
|| < /body>
|| < /html>
||

Como ven en el ejemplo es demasiado fácil estructurar nuestro documento con html 5, dando como resultado una web con mejor aspecto y mejor optimizada para los buscadores.


Category: , , , ,
��

Doctype en HTML 5
0
11/28/2009 | Posted in , , , , ,



Empezamos con decir que el doctype es el encargado de indicarle al navegador web que el documento que esta abriendo es un documento html, ademas de indicar que es un documento html también le indica la versión del html del mismo con el fin de renderizar la pagina de manera correcta para mostrarla de la mejor manera posible.
Este es un ejemplo del doctype de la versión anterior.-
||
|| < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
||

Ahora con la llegada de html 5, el doctype es bastante sencillo y compatible con las versiones anteriores de html y Xhtml, esta es su sintaxis.-
||
|| < !DOCTYPE html>
||

Demasiado fácil verdad?, es uno de los beneficios de la llegada de html 5, ahora solo falta esperar a que todos los navegadores web soporten los estándares de html 5.


Category: , , , , ,
��

Listas de definiciones en html
0
11/26/2009 | Posted in , , ,


En artículos anteriores vimos como trabajar con listas ordenadas y no ordenadas, ademas de aprender a hacer listas anidadas, en esta ocasión veremos las listas de definiciones, por lo general el ámbito de este tipo de listas son hacer glosarios (listas de entradas con definiciones).

A diferencia de las listas ordenadas y no ordenas, las listas de definiciones no son precedidas por ningún símbolo.
Sintaxis básica.-
||
|| < dl>
|| < dt> Aquí introducimos el termino< /dt>
|| < dd> Aquí introducimos la definición < /dd>
|| < /dl>
||

Etiqueta DL.-
(< dl>< /dl>) Identifica el inicio y el final de la lista de definicion.
Etiqueta DT.-
(< dt>< /dt>) Del ingles list term, termino a definir.
Etiqueta DD.-
(< dd>< /dd>) Del ingles definition definition, Definicion o explicacion del termino anterior.
Ejemplo.-
Aquí introducimos el termino
 Aquí introducimos la definición
Category: , , ,
��

Listas anidadas en html
0
11/26/2009 | Posted in , , ,






En el articulo anterior vimos los dos tipos de listas con los que podemos trabajar en html, listas ordenadas y no ordenadas, en esta ocasión aprenderemos a utilizar listas anidadas, no es muy común utilizarlas pero en algún momento las necesitaremos para complementar algún trabajo.
Sintaxis.-
||
|| < ul>
|| < li>Elemento 1< /li>
|| < li>Elemento 2< /li>
|| < ul>
|| < li>Sub elemento 1< /li>
|| < li>Sub elemento 2< /li>
|| < /ul>
|| < li>Elemento 3< /li>
|| < /u>
||

En el ejemplo anterior vemos la sintaxis de una lista anidada, prácticamente se inserta una lista dentro de otra lista, tan solo hay que tener cuidado al momento de abrir y cerrar las etiquetas, es muy fácil de utilizar, este es el resultado.-
  • Elemento 1
  • Elemento 2


    • Sub elemento 1
    • Sub elemento 2



  • Elemento 3
NOTA:  Es muy importante mantener un anidamiento correcto ya que al momento de visualizar la lista en el navegador se puede ver bien pero por ejemplo si la combinamos con CSS nos traerá muchos problemas, al decir correcta nos referimos a cerrar correctamente las etiquetas.
Category: , , ,
��

Tutorial Html Listas ordenadas
0
10/13/2009 | Posted in , , ,


En el articulo anterior vimos los dos tipos de listas con los que podemos trabajar en html, listas ordenadas y no ordenadas, en esta ocasión aprenderemos a utilizar listas anidadas, no es muy común utilizarlas pero en algún momento las necesitaremos para complementar algún trabajo.


Sintaxis.-


||
|| < ul>
|| < li>Elemento 1< /li>
|| < li>Elemento 2< /li>
|| < ul>
|| < li>Sub elemento 1< /li>
|| < li>Sub elemento 2< /li>
|| < /ul>
|| < li>Elemento 3< /li>
|| < /ul>
||


En el ejemplo anterior vemos la sintaxis de una lista anidada, prácticamente se inserta una lista dentro de otra lista, tan solo hay que tener cuidado al momento de abrir y cerrar las etiquetas, es muy fácil de utilizar, este es el resultado.-


Elemento 1
Elemento 2
Sub elemento 1
Sub elemento 2
Elemento 3


NOTA: Es muy importante mantener un anidamiento correcto ya que al momento de visualizar la lista en el navegador se puede ver bien pero por ejemplo si la combinamos con CSS nos traerá muchos problemas, al decir correcta nos referimos a cerrar correctamente las etiquetas.
Category: , , ,
��

HTML Listas ordenadas y no ordenadas
0


Existen 2 tipos de listas en html, las listas no ordenadas (que suelen constituir la base para crear nuestro menú de navegación) y las no ordenadas (que sirven solo para enumerar texto u ordenarlo), estas listas son un medio muy importante para poder estructurar el texto en un documento html, los dos tipos de listas siguen la siguiente sintaxis.-


||
|| < tipo_de_lista>
|| < li>Elemento 1< /li>
|| < li>Elemento 2< /li>
|| < /tipo_de_lista>
||

Entre los tipos de listas podremos encontrar los siguientes.-
Etiqueta UL .-(< ul>< /ul>) Nos sirve para crear listas de elementos sin orden alguno (cada elemento es presidido por una figura, la cual por defecto es un circulo pequeño), este tipo de lista permite los siguientes parámetros.-

  • Compact .- Muestra la lista mas compacta.
  • Type.- Nos indica el dibujo que precede al elemento, entre sus valores podremos encontrar disc, circle, square.
Etiqueta OL .-(< ol>< /ol>) Esta etiqueta nos permite presentar listas ordenadas de menor a mayor, precedido por su numero en orden y cuenta con los siguientes atributos.-

  • Compact .- Muestra la lista mas compacta.
  • Type .- Indica al navegar el tipo de numeración que precede al elemento, entre los valores de este atributo encontramos 1, a, A, i.
  • Star .-En este atributo pondremos el numero por el cual se empezara a contar los elementos de la lista.
Etiqueta LI .-(< li>< /li>)Esta etiqueta le indica al navegador mostrar el texto que se encuentra entre ellas como un elemento de linea en una lista, y cuenta con el atributo type, con el cual indicaremos que imagen precederá al elemento de la lista.-

  • Type=A .- Muestra letras mayúscula.
  • Type=a .- Muestra letras minúsculas.
  • Type=I .- Muestra números romanos grandes.
  • Type=i .- Muestra números romanos chicos.
  • Type=1 .- Muestra números arábigos.
  • Type=disc .- Muestra un circulo
Ejemplo de una lista no ordenada.-


||
|| < ul>
|| < li>Menu 1< /li>
|| < li>Menu 2< /li>
|| < li>Menu 3< /li>
|| < /ul>
||

El resultado del ejemplo anterior sera este, si la necesitas ordenada solo cambiaremos el tipo de lista por OL y utilizaremos el atributo type para asignarle el tipo de numeración a mostrar.

  • Menu 1
  • Menu 2
  • Menu 3
Category: , , , , , ,
��