Como hacer página web en HTML

octubre 15, 2007 at 8:33 pm 40 comentarios

INTRODUCCIÓN

Con este pequeño curso de HTML, usted aprenderá los principios básicos. Sabrá todo lo necesario para hacer un web site básico. Qué software necesita. Cómo publicar sus páginas en Internet. Si no puede pagar por un espacio en un Servidor… Existen lugares donde puede tener un Site totalmente Gratis.

html.gif

Ver todo

Primero, voy a decir que este texto no pretende ser un curso formal de “Html”. Tan solo quiero que sea de ayuda y guía para todos aquellos que quieren introducirse en el tema.

Comenzaremos diciendo que el Html (HyperText Markup Language) no es verdaderamente un lenguaje de programación; es en realidad una versión reducida del Lenguaje SGML (Standard Generalized Markup Language), un lenguaje estándar para la descripción de documentos. Se emplea, entonces el Html, para describir las páginas que deseamos “crear”; de manera tal que los distintos “browsers” las muestren lo más fielmente posible.Debido a la existencia de distintos browsers (aunque actualmente existen dos que se disputan el dominio del mercado: Netscape e Internet Explorer) resulta difícil concebir una página de aspecto final único, todo depende del “browser con que se mire”.De esta manera nos encontramos con que existen ciertos “comandos” (tags) exclusivos de cada browser.

Una vez hechas estas aclaraciones comenzemos a desarrollar nuestra página para la world wide web!

SOFTWARE 

Para crear sus página web usted necesita algunos programas (software). Afortunadamente todo lo necesario se encuentra en la Red, ya sea en versiones Shareware ó Freeware.

Editor
    Lo primero que necesita es un editor, un programa que nos permite escribir y editar HTML. Es preferible un editor de texto, ya que nos permite escribir nuestro código completamente por nosotros mismos. Debemos entender las consecuencias de escribir cada instrucción de HTML. Por lo tanto nos olvidaremos de usar los editores WYSIWYG.
    Usaremos los simples editores de texto. Windows ya trae uno incorporado: Wordpad. Con él podemos editar varios archivos a la vez y además podemos pasar fácilmente de uno a otro. Si trabaja con una Macintosh, use el BBedit. Un buen editor en texto de HTML, que recomiendo es el Stone’s Webwriter (un programa Freeware!!!!!).
Browsers
    Otra cosa que necesitaremos es un (web) browser. Como ya dije existen dos que pelean por el liderazgo de los Browsers; asi que podemos hacernos de ambos para poder “ver” nuestros logros en el aprendizaje.
    Para mi gusto el mejor es Netscape Navigator (ahora Communicator). En segundo lugar tenemos al Microsoft Internet Explorer. Otro muy bueno es el Opera, un browser compacto y rápido, sin prestaciones innecesarias.
FTP software
    Esta es una herramienta que necesitamos para poder poner nuestras páginas en la red. Un programa FTP (File Transfer Protocol) nos permite “mover” un archivo de un lugar a otro. El más usado es el WS_FTP, otro muy popular es el Cute-FTP. Si está utilizando una Macintosh, una buena opción es el Fetch.
File manager
    Para no perdernos entre tantos archivos, necesitaremos un buen administrador de archivos.Si bien ya tenemos el Explorador de Windows, existen otros muy buenos como el Windows Commander. En caso de que no dispongamos de dinero para un programita de estas características, hay varios que son Freeware.
Para ahorrar espacio y tiempo (que es dinero) en la red, muchos archivos se encuentran comprimidos. A veces se tratan de archivos self-extracting ó de programas instaladores. Pero otros son archivos zip. En este caso necesitamos de un descompresor, el Winzip es uno de los mejores y más populares.
Reference
    Por último debemos tener a mano un buen “HTML reference”. El mejor es el de Stephen le Hunte, denominado: HTML Reference Library. El Web Design Group tiene uno llamado Wilbur help file. El W3C publica el standard oficial on line.
   
Uno no aprende a realizar páginas Web leyendo solamente. Podrá leer cientos libros sobre el tema pero no sabrá lo que es hasta no haber experimentado por sí mismo. El HTML es, como amar, se aprende mejor haciéndolo. No tema cometer errores, aprenda de ellos.

TAGS

 

 

 

 

 

 

 

Una vez que tenemos las herramientas necesarias,iniciamos:
En HTML todo gira en torno a los tags. Un tag es un rótulo, con algo escrito en él. Un tag HTML trabaja como una llave, que muestra u oculta cosas que se verán o no en la página.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<TAG>

    Los tags están siempre encerrados entre los signos “menor que ” (<) y “mayor que” (>). Los Tags tanto en mayúsculas como en minúsculas. Es recomendable escribirlos en mayúsculas, para poder ubicarlas rápidamente dentro del Código. Pero puedes hacerlo de la manera que más te guste.

<TAG>…</TAG>

    Los tags a menudo se escriben de a pares. Un tag de apertura y ptro tag de cierre. La única diferencia es la “barra” que debemos poner en el tag de cierre.NOTA: a menudo nos olvidamos de esta barra, haciendo que la página no tome el aspecto que queremos.

¡¡¡ No nos olvidemos de la barra en el tag de cierre!!!

ATRIBUTOS:

    Algunos tags tienen uno ó más atributos. Estos suministran información extra a su browser. Cuando ponemos una imagen en la página, usamos un tag de imagen, en él especificamos sus atributos es decir, qué imagen será usada y sus características. Los detalles del atributo se ubican entre comillas. En resumen: un tag le dice al browser QUE hacer, un atributo le dice COMO hacerlo.

<TAG ATRIBUTO=”…”>…</TAG>

   Especial atención debemos prestarle a la notación de los tags. Siempre debemos poner los signos “menor que” y “mayor que” directamente al lado de la descripción del tag sin espacios. No use espacios en los atributos. Cuando coloca la información de un atributo después del signo “igual”, hay que ponerlo entre comillas. Los Tags pueden contener otros tags. La forma correcta de escribirlas es…: <A><B></B></A>. Si lo hacemos de la siguiente manera: <A><B></A></B>, la cosa puede no funcionar como lo esperamos.

PÁGINA BÁSICA

Abramos el editor de texto y escribamos el texto de abajo. Es conveniente abrir una ventana con el browser, así podemos ver los efectos de la alteraciones que realizamos a nuestro código. Para ello debemos recargar la página luego de cada modificación que hagamos. ( Apretar Reload -si usamos Netscape- ó Actualizar-si usamos el Explorer-)

<HTML>
</HTML>

    Con estos dos tags indicamos que el archivo es un archivo HTML. Le estamos diciendo al Browser: Aquí comienza el archivo HTML (<HTML>), y aquí termina el archivo(</HTML>). Estos tags son usados una sola vez en cada página. Antes del tag <HTML> y después del tag </HTML> normalmente no suele haber nada.

Head

<HTML>
<HEAD>
</HEAD>
</HTML>


    Cada archivo HTML tiene un “Encabezamiento“. Este se encuentra encerrado por dos tags HEAD que se ubican después del tag HTML. Los tags aparecen solo una vez en toda la página. El contenido principal del tag HEAD es el título de la página que estamos creando. Pondremos el título de nuestra página encerrado por el tag TITLE; lo que allí escribamos será mostrado en la barra superior de la ventana del Browser.Por ahora no usaremos ningún otro tag dentro del HEAD

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

Title
   Debemos elegir un título claro para nuestra página; ya que cuando nuestros visitantes nos pongan en su Bookmark; el título será nuestra presentación. Además es importante para que nos presenten los motores de búsqueda.

<HTML>
<HEAD>
<TITLE>Título Claro</TITLE>
</HEAD>
</HTML>

Body
    Todos los archivos HTML tienen un cuerpo principal, denotado por el tag BODY. Entre estos tags pndremos el contenido de la página. Es decir lo que será visible en el Browser. Nuevamente el tag BODY al igual que los que vimos se escriben una sola vez. El tag <BODY> se ubica inmediatamente detrás del </HEAD >; y el tag </BODY> de cierre es la última cosa que se escribe antes del tag </HTML>.

<HTML>
<HEAD>
<TITLE>Título Claro</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Files

    Una vez que escribimos lo anterior en nuestro editor, lo podemos guardar. Lo grabamos como page.html ó page.htm si no podemos usar más de 3 caracteres en la extensión. Lo guardaremos en un directorio separado, junto a los otros archivos que serán parte de su Site.
    A menudo alguno nombres de archivos pueden ocasionar problemas. Esto es debido a que la mayoría de los servers trabajan bajo UNIX. Lo mejor es utilizar siempre para los nombres de archivos letras minúsculas y no emplear espacios.

Nuestra primera página
    La siguiente es la sintaxis de una página básica:

<HTML>
<HEAD>
<TITLE>Mi primera página</TITLE>
</HEAD>
<BODY>

Mi primera página. No es muy sofisticada pero sirve de ejemplo.
</BODY>

</HTML>

Hemos escrito nuestra primera página, la guardamos… y podemos verla con un browser, podríamos publicarla.
   La usaremos como un template, para ayudarnos a construir las otras páginas y no tipearemos de nuevo lo mismo una y otra vez (obviamente sacaremos el texto del body).

Todas las páginas, por más complicada que sea, consta de estos 3 elementos.

Recordemos: TODOS los tags que hemos mencionado se usan una sola vez en la página web. Ellos son la columna vertebral de la página.

TEXTOS

La mayoría de las páginas tienen algún pedacito de texto en ella. El texto es elemento más utilizado en las páginas web. Como ya vimos ponemos el texto dentro de los tags Body. Trataremos ahora el tema de la:

Apariencia
    El texto que escribimos aparecerá con un formato simple. Pero a no preocuparse porque podemos destacar alguna parte del texto ó hacer de él un encabezado. Podemos hacer el texto más pequeño, más grande, ponerlo en italica, colorearlo, como si fuera un procesador de texto.

Podemos hacer que el texto se vea “pesado”con el tag B:

<B>texto bold </B>
texto bold

    Para que se vea en italica, usamos el tag I . Es recomendable usar esta característica con los tamaños de letras más grandes, ya que con las pequeñas se verán bastante mal.

<I>texto en italica</I>
texto en italica

    Podemos subrayar el texto con el tag U. Debemos tener cuidado cuando subrayamos un texto ya que podría confundirse con un enlace (link). Además resulta muy molesto para la lectura si el texto subrayado es largo.

<U>texto subrayado </U>
texto subrayado

Todos estos tags pueden ser combinados entre sí fácilmente.

<B><I><U>pedacito de texto subrayado en italica </U></I></B>
pedacito de texto subrayado en italica

Headers
    Los encabezados de las páginas ó párrafos se pueden usar con los tags de encabezamiento. Existen 6 tamaños, denotado con una H seguido por un número. El número determina el tamaño desde el 1 (el más pequeño) hasta el 6 (el más grande). Los tags de encabezamiento automáticamente colocan saltos de línea antes y después del tag.

<H1>H1 Enorme</H1>
<H2>H2 Grande</H2>
<H3>H3 Normal</H3>
<H4>H4 Chico</H4>
<H5>H5 Pequeño</H5>
<H6>H6 Muy pequeño</H6>

H1 Enorme

H2 Grande

H3 Normal

H4 Chico

H5 Pequeño
H6 Muy pequeño

    Solamente los tags del H1 al H3 son usados,el resto no tienen uso muy común. Sea cuidadoso con el uso de estos headers.Son los equivalentes enfatizar ó gritar en el idioma hablado. Un encabezado simple puede ser hecho utilizando el tag B y un salto de línea, tag <br>.

DISEÑO 

Cuando deseamos iniciar una nueva línea en nuestro procesador de textos, simplemente presionamos la tecla [Enter]. Entonces el cursor se posiciona en la siguiente línea y comenzamos a tipear nuevamente. Podríamos intentar hacer lo mismo en nuestra página web, en este caso escribiríamos en el procesador…:

Este es
un curso
de HTML.

Pero lo que obtendremos en el Browser será…:

Este es un curso de HTML.

¿Qué pasó con los cortes de línea? ¿Por qué no se “ve” como lo escribimos en el editor?
    Porque para el HTML, un corte de línea hecho con el [Enter] no significa nada. Pero esto es así porque los Browsers los vemos a través de Ventanas y a éstas les podemos modificar su tamaño; Así si escribimos con nuestro editor en una ventana más ancha que donde finalmente la visualizamos (la ventana del Browser) el resultado puede ser desastrozo.
    Los diseñadores deben tener en cuenta este aspecto. Los Browser generalmente ponen un corte de línea al final de la ventana ó cuando se topan con un tag que le dice que lo tiene que hacer. El tag que nos permite ubicar cortes de líneas es el <BR> (break). Y los usamos del siguiente modo:

Este es<BR>
un curso<BR>
de HTML.<BR>

O bien…:

    Este es<BR>un curso<BR>de HTML.<BR>

Párrafos
    Ya vimos que el recurso del BR es adecuado para poner los cortes de línea. Pero ¿podemos usarlo para armar párrafos y obtener de este modo porciones de textos más o menos legibles? Veamos: los párrafos se arman con un salto de línea .

El Tag BR sólo me asegura el corte de línea. Para facilitarnos las cosas viene a nuestra auxilio el tag P.

El tag <P> se escribe al inicio de un párrafo y el tag </P> al final del párrafo.

Márgenes
    Si el texto nos aparece muy “pegado” al margen de la ventana será menos legible. Para solucionar esto pondremos unos márgenes usando el tag <BLOCKQUOTE>. Con este tag el texto se verá identado en ambos lados, además antes y después de los tags tendremos una linea vacía.
    Si usted desea identar sólo el lado izquierdo, puede usar el tag <UL>. También podemos hacer que el margen izquierdo sea más ancho que el derecho, empleando una combinación de ambos tags. Esta combinación es útil cuando tenemos esos “backgrounds” con una barra continua al costado.

<BLOCKQUOTE>
<UL>
<UL>
Ponemos el texto de nuestra página aquí.
</UL>
</UL>
</BLOCKQUOTE>

IMAGEN 

Ya vimos como acomodar porciones de texto para que se puedan leer. Pero una página con simplemente texto es un poco aburrida, asi que pongámosle un gráfico. Para ello usaremos el tag <IMG> (image). El dibujo en sí mismo es un archivo separado. El tag <IMG> únicamente “apunta” hacia el archivo que contiene la imagen, a través del atributo SRC (source). Ubiquemos la imagen en el mismo directorio en el que se encuentra la página web, para evitar problemas. Ya que si el browser no encuentra el archivo que debe mostrar no lo mostrará en la pantalla.

La Sintaxis es:

    <IMG src=”nat.jpg” mce_src=”nat.jpg”>
  •  
      <IMG src=”nat.jpg” mce_src=”nat.jpg” WIDTH=”180″ HEIGHT=”84″>
      <IMG src=”nat.jpg” mce_src=”nat.jpg” WIDTH=”180″ HEIGHT=”84″ BORDER=”0″ ALT=”Natalie Portman “>
  • Tamaño de la Imagen
        Con la sintaxis anterior lo único que hicimos es declarar el nombre y ubicación del archivo. Sin embargo es conveniente agregar las dimensiones de la imagen (en pixels). De esta forma el browser crea un espacio para la imagen, y continúa bajando el resto de la página. Si no lo hacemos de esta manera el browser primero intenta mostrar una imagen, y luego continúa con el resto de la página. A veces no topamos con páginas que no se muestran hasta que todas las imágenes hayan sido bajadas, eso es porque no emplearon los atributos que describen las dimensiones del gráfico. Y realmente es una molestia para los navegantes.
        El tamaño del gráfico se establecen con los atributos WIDTH y HEIGHT. Si usted no conoce las dimensiones de la imagen, entonces véalas con algún editor gráfico ó viewers
    .
    Bordes
        Muchos browsers muestran un borde alrededor del gráfico. El ancho de este borde se establece por medio del atributo BORDER. Si no queremos que tenga borde alguno simplemente le ponemos valor 0.Texto alternativo
        Un atributo final es el tag ALT (alternative text). Agunos navegantes no bajan las imágenes de las páginas para poder navegar con mayor rapidez, en estos casos es bueno escribir una breve descripción de la imagen para que ellos decidan si deban verla o no. E incluso existen navegadores que muestran únicamente texto, como el Lynx.

    Tipos de archivos
        Los únicos archivos gráficos que se pueden utilizar son los GIF ó los JPEG (JPG). Si tenemos otros tipos de archivos gráficos debemos transformarlo a uno se estos formatos con algún editor de imágenes como Lview Pro, Paint Shop Pro ó Irfanview. Es recomendable que la imagen no supere los 25 kilobytes. De otro modo tardará mucho en bajar.

    Cómo obtener imágenes
        Donde podemos obtener gráficos? Fácil. Cualquier gráfico que sea mostrado por su browser mientras usted navega puede ser bajado a su rígido. Para ello ubique el mouse en el gráfico que le guste, presione el botón derecho, clickee “save image as..” en el menú que se desplega, y ya lo estaremos grabando en el disco rígido. El problema surge cuando queremos usar esa imagen Tenga en cuenta los derehos de autor y copyright. Pero a no preocuparse, sino queremos hacernos nuestras propias imágenes; existen varios sites donde nos ofrecen sus colecciones de gráficos para que los usemos en forma gratuita.

    BACKGROUND

    Sabemos que el tag BODY encierra el contenido de la página web. Ahora veremos que dentro de este tag podemos ubicar algunos atributos que serán los atributos de la página. Por ejemplo podemos cambiar el background (imagen de fondo) de la página. Tenemos dos opciones para hacerlo. Por un lado podemos darle simplente un color de fondo, o bien usar una imagen.

    Entonces, si no “seteamos” ningún valor para el background obtenemos :

    <BODY>
    texto escrito
    </BODY>

    texto escrito

    Colores de Background
        La mayoría de los browsers usan el color gris como el color por defecto. Para cambiar este color por otro que nos agrade usaremos el atributo BGCOLOR del tag BODY. Por ejemplo usaremos el color blanco.

    <BODY BGCOLOR=”White”>
    sobre fondo blanco es más fácil de leer
    </BODY>

    Imágenes de Background
        Si decidimos usar una imagen como Background.La sintaxis es:

    <BODY BACKGROUND=”venetian.gif”>
    Texto que nos interesa mostrar sobre la imagen de fondo
    </BODY>

    Esta es la imagen que utilizamos para el background.Se encuentra ubicada en el mismo directorio que la página. Si estuviera en otro directorio debemo escribir el camino completo hasta ella.
    Por ejemplo si está en el directorio fondos del directorio imagenes la sintaxis será..:

    <BODY BACKGROUND=”imagenes/fondos/venetian.gif”>

    Este modo de guardar las imágenes en directorios especiales aún no está disponible en Orbita, pero muy pronto lo estará.
    Cuando usamos imágenes también debemos especificar un color de fondo acorde a la imagen, de esta manera si el navegante no está cargando las imágenes; la lectura del texto no se verá dificultada.

    COLOR DEL TEXTO

    Podemos cambiar el color de fondo (background color) del browser a cualquier color que deseemos. Podemos hacerlo Negro por ejemplo. Pero claro que si el texto está escrito en negro… el mismo será imposible de leer. Es así que echaremos manos de los atributos del tag BODY.
        Para empezar tenemos el atributo BGCOLOR que determina el color del background. El atributo TEXT determina el color del texto,lo mismo hacen LINK con los links no visitados y VLINK con los links visitados. ALINK muestra el color de los links activos, es decir, mientras clickeamos sobre ellos. Estos atributos determinan los colores de la página entera. Una linda combinación es el negro con los tres colores primarios.

    <BODY BGCOLOR=”black” TEXT=”yellow” LINK=”cyan” VLINK=”fuchsia” ALINK=”white”>

    Legilibilidad
        Si bien podemos usar la cominación de colores que se nos ocurra. Tenemos que mantener la legibilidad de nuestra página en todo momento. No debemos usar colores demasiados llamativos. Evitaremos usar contraste demasiado alto ó muy bajo.Lo mejor es escribir en negro sobre un background blanco, como lo que estás leyendo ahora. O bien el texto oscuro sobre un background de color suave.

    NOTA: Estos atributos determinan los colores en TODA la página. NO pueden usarse para resaltar pequeños trozos de texto o palabras sueltas. El tag que debe usarse para ese propósito es el tag FONT que se verá más adelante en este tutorial.

    HYPERLINKS
    De seguro el tag más importante que usaremos es el tag <A> (anchor). Este tag nos permite “conectar” la palabra que encierra el tag con un documento relacionado(página web, gráfico, vídeo, etc.). El documento al que “apuntamos” es especificado en el atributo HREF. A continuación un ejemplo de cómo es la sintaxis y el resultado en la página web.

    <A href=”test.htm” mce_href=”test.htm”>test</A>

    Como podemos observar el link es finalizado con un tag de cierre </A>.

    Este tag hace posible el hipertexto, que es la base que rige Internet, la unión entre sí de distintas páginas.

    Usando imágenes
        A esta altura se estará preguntando si el tag <A> sirve para crear enlaces que no sean texto. Usted habrá visto y usado botones ó íconos que al hacer click sobre ellos nos trasladan a otro documento Pues bien, simplemente debemos encerrar la imagen con el tag <A> de la siguiente manera.

    <A href=”test.htm” mce_href=”test.htm”>
    <IMG src=”boton.gif” mce_src=”boton.gif” HEIGHT=”35″ WIDTH=”35″ ALT=”boton de enlace”>
    </A>

    Email
    Otro hyperlink usado muy a menudo es el que nos permite enviar un e-mail. Si alguien desea contactarnos este link abrirá su administrador de correo electrónico y estará listo para escribirnos un e-mail. El siguiente link de ejemplo puede ser usado para enviarme un e-mail.

    Email:
    <A HREF=mailto:porlasbandas@yahoo.es> porlasbandas@yahoo.es</A>

    Por supuesto que lo podemos combinar con una imagen para hacerlo más atractivo….

    Email:
    <A href=mailto:porlasbandas@yahoo.es mce_href=mailto:porlasbandas@yahoo.es> <IMG src=”email.gif” mce_src=”email.gif” WIDTH=100 HEIGHT=40 BORDER=0 ALT=porlasbandas@yahoo.es>
    </A>

    RECAPITULACIÓN

    Tags
        Los tags están siempre encerrado por los signos (<) y (>). La mayoría de los tags tienen un tag de cierre, el cual presenta una barra inclinada (</ >). Algunos tags tienen atributos que afectan su desempeño. Algunos atributos son definidos con información entre comillas. Los tags siempre pueden contener otros en su interior.

      <TAG>
      <TAG>…</TAG>
      <TAG ATRIBUTO>…</TAG>
      <TAG ATRIBUTO=”…”>…</TAG>
      <A><B>…</B></A> sintaxis correcta
      <A><B>…</A></B> sintaxis errónea

    Página web básica
       El tag HTML inicia y cierra el documento. La sección HEAD contiene el título de la página ( tag TITLE ), el cual aparece en la barra de título de la ventana del browser. El tag BODY contiene a la página web. El resto de los tags se usan dentro del tag BODY.

      <HTML>
      <HEAD>
      <TITLE>Aquí vá el título</TITLE>
      </HEAD>
      <BODY>
      Esto es el texto principal de la página web, aquí pondremos imágenes y todo lo que se nos ocurra!!!!

      </BODY>
      </HTML>

    Aspecto del Texto
       El texto puede hacerse pronunciado con el tag B, ó bien en itálica con el tag I, y subrayarlo con el tag U. Estos tags se pueden combinar entre sí.

      <B>bold</B>
      <I>itálica</I>
      <U>subrayado</U>

    Headers
        Los Headers son construidos con el tag Hn, donde “n” es 1 para el más grande, y 6 para el más pequeño.

      <H1>enorme</H1>
      <H2>grande</H2>
      <H3>normal</H3>
      <H4>pequeño</H4>
      <H5>más pequeño</H5>
      <H6>muy pequeño</H6>

    Cortes de línea
        Los cortes de línea se hacen con el tag BR, los párrafos con el tag P, ambos provocan un salto de línea.

      <BR> corte de línea
      <P> párrafo

    Márgenes
        Dejar una identación en el texto requiere del tag UL, el tag BLOCKQUOTE también realiza esa tarea. Ambos tags agregan una línea vacía arriba y debajo del texto que encierran. Pueden combinarse entre sí para crear márgenes a medida.

      <BLOCKQUOTE>
      <UL>
      <UL>
      El texto se ubica aquí.
      </UL>
      </UL>
      </BLOCKQUOTE>

    Imágenes
        Las imágenes se colocan con el tag IMG. El dibujo en sí es un archivo separado y es convocado a la página con el atributo SRC . Los atributos WIDTH y HEIGHT determinan el tamaño de la imagen permitiendo continuar bajando la página mientras baja el gráfico. El atributo ALT agrega una descripción de la imagen. El atributo BORDER permite colocar un borde alrededor de la image. Los únicos formatos de gráficos que podemos usar son: GIF y JPG.

      <IMG SRC=”path del archivo” WIDTH=”tamaño” HEIGHT=”tamaño” BORDER=”0″ ALT=”descripción”>

    Background
        El background de la página puede ser coloreado con el atributo BGCOLOR del tag BODY. El atributo BACKGROUND muestra una imagen de fondo que se repite. Haga que el color de background sea similar al color de la imagen de background
    .

      <BODY BGCOLOR=”color” BACKGROUND=”imagen”>
      Contenido de la página…
      </BODY>

    Color del texto
        El color de todo el texto que aparece en la página puede cambiarse con el atributo TEXT del tag BODY. A si mismo con los atributos: LINK para los links, VLINK para los links visitados, ALINK para los links activos.

      <BODY BGCOLOR=”color” TEXT=”color” LINK=”color” VLINK=”color” ALINK=”color”>
      Contenido de la página…
      </BODY>

    Hyperlinks
        Los Hyperlinks son usados para conectar diversas páginas entre sí, o bien para conectar páginas a otros documentos. Para ello usamos el tag A (anchor). El atributo HREF contiene el camino para ubicar el archivo al cual queremos vincular. Use el prefijo ‘http://&#8217; si deseamos vincularnos a un documento que se encuentra en otro servidor. Podemos usar una imagen para el vínculo, con el tag IMG. El prefijo ‘mailto:’ permite que nos envíen un e-mail, reemplazando ‘email’ con una dirección de e-mail válida .

      <A href=”file” mce_href=”file”>descripción</A>
      <A href=”file” mce_href=”file”><IMG SRC=”archivo de imagen”></A>
      <A href=”mailto:email” mce_href=”mailto:email”>email</A>

    Comentario final
        Las páginas Web son grabadas como archivos de texto con la extensión .htm ó html. Use solamente letras minúsculas y no utilize espacios para el nombre de los archivos que contienen a la página. De este modo se evitará posibles problemas con los servidores UNIX Utilize un editor de texto simple para crear sus páginas.

    Estos son los tags más importantes que se encuentran en una página web:

    <HTML>…</HTML>
    Estos tags indican el inicio y el final del archivo. Indican que el archivo se trata de una documento HTML . En otras palabras: una página web. Se emplean una sola vez en toda la página.
    <HEAD>…</HEAD>
    Encierran el head (encabezado) de la página web. Se ubican directamente después del primer tag HTML. Allí ubicaremos el título de la página. Se emplean una sola vez en toda la página.
    <TITLE>…</TITLE>
    El tag title están dentro del tag HEAD. El texto que pongamos aquí será el título de la página y aparecerá en la barra de la ventana del browser. Se emplean una sola vez en toda la página.
    <BODY>…</BODY>
    El tag body encierra el contenido de la página. Se ubica inmediatamente después del tag de cierre de HEAD, y el tag de cierre del body antes del de cierre del tag HTML. Se emplean una sola vez en toda la página. Presenta diversos atributos, los que pueden cambiar el color del texto y el background de la página.
    BGCOLOR=”…”
    color de background (color standard = gris)
    BACKGROUND=”…”
    gráfico de background
    TEXT=”…”
    color del texto (standard = negro)
    LINK=”…”
    color del link (standard = azul)
    VLINK=”…”
    color de link visitado (standard = púrpura)
    ALINK=”…”
    color de link activo (standard = rojo)
    <B>…</B>
    Bold (negrita)
    <I>…</I>
    Italics, no lo use con letras pequeñas pueden verse muy feas.
    <U>…</U>
    Underlined, subrayado. Pueden causar confusión con un link.
    <Hn>…</Hn>
    Header, encabezado. El valor n varía entre 1 y 6.
    <BR>
    Line break: corte de línea, interrumpe la línea actual e inicia una nueva.
    <P>
    Paragraph: Párrafo, aísla una cadena de texto introduciendo un línea vacía entre párrafos.
    <BLOCKQUOTE>…</BLOCKQUOTE>
    Blockquote coloca un espacio alrededor del texto y deja un margen tanto a la derecha como a la izquierda.
    <UL>…</UL>
    UL: Similar al BLOCKQUOTE, deja un margen únicamente a la izquierda. Puede emplearse más de una vez.
    <IMG>
    Image coloca una imagen en la página. Se emplea únicamente con archivos del tipo GIF o JPG, y no más grande que los 25 kB. Presenta múltiples atributos, sólo la ubicación del archivo (SRC) es obligatorio.
    src=”…” mce_src=”…”
    Source, indica el nombre y la ubicación del archivo. El gráfico puede residir en un servidor diferente.
    BORDER=”n”
    Coloca un borde alrededor del gráfico, el valor n especifica en ancho del borde en pixels. Con valor cero, el borde desaparece.
    WIDTH=”n”
    Indica el ancho de la imagen en pixels, acelera la “bajada” de la página.
    HEIGHT=”n”
    Indica la altura de la imagen en pixels, acelera la “bajada” de la página.
    ALT=”…”
    Texto alternativo, aparece si no se muestra el gráfico, o si posicionamos el mouse sobre él.
    <A>…</A>
    Anchor: (hypertext) link, es el tag más importante, porque nos permite conectarnos a otros documentos de la web. El texto que se ubica entre ellos es mostrada subrayado, para enfatizar que se trata de un link. El atributo obligatorio, contiene la dirección en la web del link. href=”…” mce_href=”…”
    (Hypertext reference), Especifica el URL del documento al que se desea vincular. Por lo tanto debemos incluir el prefijo ‘http://&#8217; y el nombre del server. Si el browser no lo encuentra, presentará un mensaje de error (404 not found error). Podemos usar el tag <A> para un enlace de email (con el prefijo ‘mailto:’ ); y combinado con el tag IMG.

    @1998 Bladimir Favio Yapura 

     

     

     

     

     

     

     

     

     

     

     

      

     

Más tutoriales en http://tututorial.webcindario.com

 

 

 

 

 

 

 

About these ads

Entry filed under: HTML, Tutorial. Tags: .

Aumenta la velocidad en las descargas del Emule Ejemplo de colorear foto con Photoshop

40 comentarios Add your own

  • 1. Admin  |  octubre 29, 2007 en 1:45 am

    Este mensaje ha sido borrado por falta de contenidos

    Responder
  • 2. blanca  |  abril 13, 2008 en 7:18 pm

    me gustaria aprender

    Responder
  • 3. marisol  |  abril 23, 2008 en 1:17 am

    necesito hacer una pagina!”!!!!!

    Responder
  • 4. jesus  |  mayo 4, 2008 en 3:14 am

    muy buen tutorial me ayudo mucho gracias

    Responder
  • 5. jhonson cardenas rojas  |  junio 4, 2008 en 12:04 am

    necesito abrir una pagina wed para una biblioteca municipal que debo hacer

    Responder
  • 6. jugued  |  junio 4, 2008 en 11:01 pm

    Jhonson Cardenas Rojas realizamos páginas webs si quieres nuestros servicios haznoslo llegar al email porlasbandas@yahoo.es y hablamos.

    Responder
    • 7. El Candox  |  agosto 13, 2009 en 1:37 pm

      quisiera saber si lo hacen por gusto o cobran por que quieroacer una pagina promocional. respondeme si cobras mandame el precio.

      Responder
  • 8. Alex  |  julio 21, 2008 en 9:32 pm

    Muy buen tutorial, yo se como hacer las paginas, pero una pregunta como ordeno las paginas, la imagenes, el sonido y los videos para subirla, osea cada tipo en una carpeta, osea imagenes en una carpeta, videos en otra, sonido en otra, e.t.c y las paginas .html fuera de estas.
    Gracias

    Responder
  • 9. pooll  |  julio 23, 2008 en 8:48 pm

    enviarme informacion sobre html

    Responder
  • 10. jugued  |  agosto 25, 2008 en 2:47 pm

    Hola, tengo buenas noticias para los visitantes de todotutoriales.wordpress.com y de http://tututorial.webcindario.com hemos puesto un nuevo enlace en la web http://minibannersx030.webcindario.com/ con lo que esperemos que aumente nuestro tráfico de visitas que aumenta sin parar y que nos sirva para darnos a conocer a más gente.
    Cualquiera que quiera promocionar su web lo puede hacer por tan solo 30 centimos de euro en http://minibannersx030.webcindario.com

    Responder
  • 11. ANTRAX999  |  septiembre 12, 2008 en 4:30 am

    ayuda XD pues tengo un gran problema para hacer un enlace local me pueden ayudar se los agradesco mi problema es que nose como poner la direccion a la pagina que quiero conectar con mi en lace todo lo tengo en mi disco duro y nose como hacer para que el enlace funcione correctamente lo tengo asi:
    Página Dos
    Página Tres

    ninguna de las dos formas me funciona que direccion tengo que poner para que funcionen mis enlaces porfavor ayuden que me rompo la cabeza no encuentro respuestas

    Responder
  • 13. ANTRAX999  |  septiembre 12, 2008 en 4:31 am

    jaajajaj perdon no sabia que no se puede ver el codigo fuente que puse mmm ahora como me prodrana yudar?

    Responder
  • 14. jorge  |  septiembre 22, 2008 en 6:47 pm

    muy bueno

    Responder
  • 15. jugued  |  septiembre 23, 2008 en 1:51 pm

    Empezamos con la fusion de Tututorial para darle una mejor calidad y contenidos de nuestros tutoriales a los lectores, pero son muchas las que se han apuntado al carro y las que nos están seguiendo con vistas a conseguir visitas.

    Todotutoriales lleva rozando las 1000 visitas diarias durante esta semana y esto no pasa desapercibido para otras webs. Por ello se han puesto en contacto cuatro nuevas webs para promocionarnos en nuestros tutoriales.

    Las webs son Casino online, Multivan ocasión, Regalos baratos y Sex-shop.

    Estas webs nos estan ayudando a seguir creciendo en calidad y cantidad de tutoriales por lo que son ya parte de nosotros.

    Desde Todotutoriales quisiera recomendaros las webs para que estas tambien crezcan a la velocidad que lo hace Todotutoriales

    Responder
  • 16. GABRIELA PAOLA NUNGARAY DUARTE  |  septiembre 27, 2008 en 10:36 pm

    COMO HASE UN CORREO

    Responder
  • 17. jugued  |  septiembre 30, 2008 en 1:24 pm

    Gabriela esto es un ejemplo de como hacer correo Email:
    porlasbandas@yahoo.es

    Responder
  • 18. jugued  |  septiembre 30, 2008 en 1:25 pm

    Antrax999 para los Hyperlinks un ejemplo es test

    Responder
  • 19. pedro manuel  |  febrero 21, 2010 en 6:56 pm

    me ha servido de ayuda gracias

    Responder
  • 20. marta pedrosa chicano  |  marzo 3, 2010 en 7:46 pm

    por lomenos tendria ke haber menos lluvias
    ke lla estamos artos de agua!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    Responder
  • 21. anonimo  |  marzo 3, 2010 en 7:48 pm

    por lomenos tendria ke llover menos
    ke lla estamos artos de agua!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    Responder
  • 22. DEHLY  |  agosto 7, 2010 en 6:57 pm

    SOY LA MAS BELLA DE TADAS OK

    Responder
  • 23. carlos  |  marzo 20, 2011 en 6:54 pm


          

    Responder
  • 24. carlos  |  marzo 20, 2011 en 6:58 pm


          

    Responder
  • 25. carlos  |  marzo 20, 2011 en 7:03 pm


           
    
    nesesito ayuda para aprender

    Responder
  • 26. carlos  |  marzo 20, 2011 en 7:04 pm

    como funciona esto

    Responder
    • 27. SAMUEL JIMENEZ  |  noviembre 9, 2011 en 12:02 am

      JAJAJAJAJA LASTIMA PORQUE ESTO ES LA HP CAGADA Y ES LO MAS GONORREA DE HACER

      Responder
  • 28. belen  |  abril 21, 2011 en 1:10 am

    ola yo quiero aser una pagina pero solo la quiero para imaginacion y no la quiero subir digamos q jugar a diseñar paginas

    Responder
  • 29. NIKO  |  mayo 27, 2011 en 1:34 am

    COMO SE GUARDAAAAAAAAAAAAAAAAA?

    Responder
  • 30. NIKO  |  mayo 27, 2011 en 1:36 am

    CEBERO CHAT COMO LO ISO =]
    XD ?

    Responder
  • 31. Jaunxhuus  |  diciembre 15, 2011 en 11:59 am

    noo se entieende nada meeen

    Responder
  • 32. darthio  |  mayo 6, 2012 en 4:11 am

    Genial…!!! Lo necesitaba mucho… GRACIAS 8D

    Responder
  • 33. Emmy  |  junio 2, 2012 en 11:05 pm

    graxias…. me sirvio muxisimo ya q necesito hacer una pagina html para mi examen…… =)

    Responder
  • 34. lisbeth  |  julio 7, 2012 en 10:12 pm

    gracias me sirvio mucho para mi examen no sabia mucho q digamos =D

    Responder
  • 35. Raquel Barajas  |  agosto 4, 2012 en 9:38 pm

    Gracias me sirvió de mucho este pequeño tutorial :)

    Responder
  • 36. Siddid Srivastava  |  septiembre 19, 2012 en 2:17 pm

    Hello I am so thrilled I found your website, I really found you by mistake, while I was looking on Aol for something else, Regardless I am here now
    and would just like to say thanks for a marvelous post and a all round thrilling blog (I also love the
    theme/design), I don’t have time to browse it
    all at the minute but I have book-marked it and also added in your
    RSS feeds, so when I have time I will be back to read a great deal more, Please do keep up
    the excellent jo.

    Responder
  • 37. Shameem Chowdhury  |  febrero 17, 2013 en 3:45 am

    Hello! Do you know if they make any plugins to assist with Search Engine Optimization?
    I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good success.
    If you know of any please share. Cheers!

    Responder
  • 40. free live sexy web cams  |  abril 25, 2013 en 11:56 pm

    You could definitely see your expertise within the article
    you write. The sector hopes for even more passionate writers such as
    you who are not afraid to say how they believe. Always go after your heart.

    Responder

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Categorías


Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

%d personas les gusta esto: