Por defecto el texto se alinea en la parte
d abajo de la imagen
Este es un documento con los elementos básicos para poder hacer un documento HTML. Este tipo de documentos es el que utiliza el World Wide Web.
Este manual supone que tu tienes:
Los documentos HTML están en formato de texto sencillo (también conocidos como ASCII) y pueden ser creados utilizando cualquier editor de texto (ej. Emacs o vi en las maquinas UNIX). Un par de browsers de Web (el CERN's para ordenadores Next) incluyen editores rudimentarios de HTML en un entorno de WYSIWIG. Ahora también están disponibles algunos editores WYSIWIG. (ej. HotMetal para Sun Sparcstations, HTML Edit para Macintoshes). DEBERIAS PROBAR ALGUNO DE ELLOS ANTES DE INTRODUCIRTE EN DETALLES DE HTML.
Puedes ver antes un documento en progreso con el NCSA Mosaic (y con algún otro browser de Web). Ábrelo con el comando Open Local debajo del menú File.
Después de que hayas editado la fuente de un documento HTML, grava los cambios. Vuelve a NCSAMosaic y Reload el documento. Los cambios son reflejados en la pantalla.
Aquí hay un escueto ejemplo de HTML:
<TITLE>El ejemplo HTML mas sencillo</TITLE>
<H1>Esta es una cabecera de nivel uno</H1>
Bienvenido al mundo HTML.
Este es el primer párrafo.<P>
Y este es el segundo.<P>
Haz un click aqui para ver formateada la version del ejemplo.
HTML usa tags para decir al agente del Web como mostrar el texto. El ejemplo de arriba usa:
Las tags de HTML constan de un corchete izquierdo (<), (un símbolo matemático de "menor que"), seguido del nombre de la etiqueta y cerrado por un corchete derecho (>). Las etiquetas van normalmente por parejas, ej. <H1> y </H1>. La etiqueta del final es exactamente como la del principio excepto un slash (/) que precede al texto entre paréntesis. En el ejemplo, <H1> dice al Agente de Web que empiece a hacer una cabecera de nivel uno; </H1> dice al browser que la cabecera esta completa.
Una excepción a la regla de parejas es la tag<P>. No hay una tag </P>.
NOTE: HTML lee igual mayúsculas y minúsculas. <title> es equivalente a <TITLE> o <TiTlE>.
No todas las tags son toleradas por todos los browsers del World Wide Web. Si un browser no tolera una tag, simplemente la ignora.
Todo documento HTML debe tener un titulo. El titulo se muestra generalmente de forma separada al documento y se usa para la identificación del mismo en otro contexto (ej. una búsqueda WAIS). Elige media docena de palabras que describan el propósito del documento.
En el X Window System y en versiones Microsoft Windows de NCSA Mosaic, el Titulo del Documento esta en la parte superior de la pantalla, justo debajo de los menus. En NCSA Mosaic para Macintosh, el texto etiquetado como <TITLE> aparece como el titulo de la ventana.
HTML tiene seis niveles de cabeceras numeradas del uno al seis, siendo el 1 la mas grande. Las cabeceras están mostrados en fuentes mas largas y/o en un tipo mas negro que el del cuerpo normal del texto. La primera cabecera de cada texto debe estar etiquetada como:<H1>. La sintaxis de la etiqueta de cabecera es:
<Hy>Texto de cabecera </Hy >
PARTE 3
Para que en la presentación final de un documento Html se vean distintos párrafos debes utilizar el tag <P> (hay algunas excepciones; el espacio que sigue a <P> or <Hy> tag, por ejemplo, esta ignorado.)
Por tanto aunque tu dejes líneas en blanco en tu documento HTML, en la presentación final no se verán reflejadas sino utilizas el tags separados de párrafos
Bienvenido a HTML.
Este es el primer párrafo <P>
Importante: Debes separar tus párrafos con<P>. En un archivo html no se lee, por así decirlo, el espacio que tu dejas entre líneas. Por ejemplo
<TITLE>El ejemplo mas simple de HTML</TITLE><H1>Este es el nivel uno de cabecera</H1>Bienvenido al mundo de HTML. Este es el primer párrafo.<P>
Este es el segundo. No te recuerda esto a Barrio Sésamo?<P>
Si quieres que te centre el párrafo solo tienes que poner
Una de las cosas guay de los documentos HTML, es que te permiten, por medio del Hipertexto, conectar con otro documento, archivo, base de datos, lo que te brote o venga bien para tu trabajo. Incluso imágenes, todo ello de otro documento.
Como se hace para incluir un link en un documento creado por ti? Sigue bien estas instrucciones y no te pierdas:
A.)
Aquí tienes un ejemplo fácil de hypertexto, de como hacer un link:
<A HREF="MaineStats.html">Maine</A>
Te saldar Maine en azul y, posiblemente subrayado. Si Pones el ratón encima de el se te convertirá en un mano, y si haces un click en el, te conectara con el archivo MaineStats.html
Si quieres hacer un link a un archivo que esta en otro directorio solo tienes que hacer lo siguiente: Por ejemplo , un link al archivo NJStats.html localizado en el subdirectorio AtlanticStates debe ser así:
<A HREF="AtlanticStates/NJStats.html">New Jersey</A>
A esto se le llama links relativos.
En general tu puedes usar link relativos porque:
De todas formas, utiliza los pathnames cuando quieras ir a documentos que no estén directamente relacionados. Por ejemplo. supongamos que tenemos un grupo de documentos que contienen un manual para el usuario. Los links que se hagan dentro de este grupo tendrán que ser a links que estén relacionados. Los links a otros documentos (por ejemplo una referencia a softwares relacionados) deberán utilizar los pathnames. De esta forma, si mueves el manual del usuario a un directorio diferente, ninguno de los links tendrá que ser actualizado.
Uniform Resource Locator o URL
El World Wide Web utiliza el Uniform Resource Locators (URL) para especificar la localización de ficheros en otros servidores. El URL incluye el tipo de programa al que se va acceder (por ejemplo, gopher, WAIS), la dirección del servidor y la localización del fichero. La sintaxis es esta:
scheme://host.domain (:port)/campo/nombre de la carpeta donde "scheme" sea uno de los siguientes:
El numero de "port" normalmente se puede omitir. (Esto significa que te olvides de el, a no ser que alguien te diga todo lo contrario.)
Por ejemplo, para incluir un link a este manual en tu documento, pondrás
<A HREF = "http://www.ncsa.uiuc.edu/General/Internet /WWW/HTMLPrimer.html"> NCSA«s Beginner¬s Guide to HTML </A>
Esto hará del texto "NCSA«s Beginner¬s Guide to HTML" un hyperlink a este documento.
Para mas información sobre el URL, busca en
Links a secciones especificas en otros documentos
Los anchors ( o >) se pueden utilizar también para moverse a un sección determinada dentro de un documento. Supongamos que quieras establecer un link del documento A una sección especifica en el documento B. (Llama a este carpeta documentoB.html). Primero necesitas establecer un anchor con nombre en el documento B. Por ejemplo, para establecer un anchor llamado "Jabberwocky" en el documento B, introduce
Aquí esta <A NAME = "Jabberwocky" > algún texto </A>
Ahora cuando crees el link en el documento A, incluye, no solo el nombre de la carpeta, sino también el nombre del anchor, separado por una marca hash (#)
Este es mi <A HREF = "documentob.html#Jabberwocky"> link</A> to documento b.
Ahora si haces un click en la palabra link en el documento A mandar al lector directamente a la palabra "algún texto" en el documento B.
Links a secciones especificas en el documento actual
La técnica es exactamente la misma solo que el nombre de la carpeta se omite.
Por ejemplo, para hacer un link al anchor Jabberwocky desde dentro de la misma carpeta (documento B), utiliza
Este es un <A HREF = "#Jabberwocky">Jabberwocky link </A> desde dentro del Documento B.
Lo anterior es suficiente para producir documentos HTML básicos. Para crear documentos mas complejos, el HTML tiene tags para varios tipos de listas, secciones previamente creadas, citas extensas, para crear caracteres y otras utilidades.
HTML permite realizar listados numerados, sin numerar y listas para definir.
Listas sin numerar
Para crear una lista sin numerar,
He aquí una lista de dos términos:
<UL>
<LI> manzanas
<LI> plátanos
</UL>
El resultado es:
Los términos <LI> pueden contener multiples párrafos. Solo hay que separar los párrafos con la marca de párrafo <P>.
Una lista numerada (también llamada lista ordenada, de ahí la denominación de la marca) es idéntica a una lista sin numerar, excepto que se usa<OL> en lugar de <UL>. Delante de los términos se pone la marca<LI>, que es la misma que se utiliza en las otras listas. El siguiente código HTML
<OL>
<LI> naranjas
<LI> melocotones
<LI> uvas
</OL>
da el siguiente formato:
Una lista de definición consiste en términos alternativos (abreviados como DT) y una definición (abreviada como DD). Normalmente los browsers del web dan la definición en una nueva línea.
He aquí un ejemplo de una lista de definición:
<DL>
<DT> NCSA
<DD> NCSA, el National Center for Supercomputing Applications,
esta situado en el campus de la Universidad de Illinois
en Urbana-Champaign. NCSA es uno de los participantes en el
National MetaCenter for Computational Science and Engineering.
<DT> Cornell Theory Center
<DD> CTC esta situado en el campus de la Universidad de Cornell en Ithaca,
New York. CTC es otro participante en el National MetaCenter
for Computational Science and Engineering.
</DL>
El resultado es:
Tanto la marca <DT> como la marca <DD> pueden contener multiples párrafos (basta con separarlos con las marcas indicativas de párrafo <P> ), listas, o cualquier otra información en la definición.
Se puede hacer tantas listas como se quiera, aunque probablemente solo la haga de tres niveles. También se puede tener una lista de párrafos, en la que cada uno de los cuales contenga una lista en colmena, en una única lista de términos.
Un ejemplo de lista en colmena:
<UL>
<LI> Algunos estados de Nueva Inglaterra:
<UL>
<LI> Vermont
<LI> New Hampshire
</UL>
<LI> Un estado del Medio Oeste:
<UL>
<LI> Michigan
</UL>
</UL>
El resultado de la lista en colmena es
Usa la etiqueta <PRE> (que significa ``predefinido'') para generar texto en un estilo prefijado y originar espacios, cambios de línea y etiquetas que sean significativas. (Es decir, que los espacios multiples son presentados como espacios multiples, y los cambios de línea en la misma localización que en el documento fuente HTML.) Esto es útil para listados de programas. Por ejemplo, las líneas siguientes
<PRE>
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
</PRE>
se presenta así
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
Se pueden utilizar links dentro de secciones comprendidas por el comando <PRE>. Sin embargos, debes evitar usar otros comandos HTML entre secciones del comando <PRE>.
Notese que a causa de que los símbolos <, >, and & tienen un significado especial en el lenguaje HTML, tienes que usar sus secuencias de escape (<, >, and &, respectivamente) para escribir estos caracteres en el texto. Véase la sección Caracteres especiales para mas información.
Usa el comando <BLOCKQUOTE> para incluir citas en un bloque separado de la pantalla. La mayoría de los browsers, generalmente, requieren separarlo del resto del texto.
Un ejemplo:
<BLOCKQUOTE>
Todavía sueño. Es un sueño profundamente arraigado en el sue-o americano. <P>
Tengo el sueño de que, un día, esta nación se levantara y vivirá el verdadero significado de sus creencias. Mantenemos estas verdades evidentes de que todos los hombre son creados iguales. <P>
</BLOCKQUOTE>
El resultado es:
Todavía sueño. Es un sueño profundamente arraigado en el sue-o americano.
Tengo el sueño de que, un día, esta nación se levantara y vivirá el verdadero significado de sus creencias. Mantenemos estas verdades evidentes de que todos los hombre son creados iguales.
El comando <ADDRESS> se usa generalmente para especificar el autor de un documento y es un medio para contactar con el autor (p.e., la dirección de e-mail). Normalmente es el ultimo item del documento.
Por ejemplo, la ultima línea de la version on-line de esta guía es
<ADDRESS>
A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu
</ADDRESS>
El resultado es
A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.eduNOTE: <ADDRESS> no se usa para direcciones postales. Ve al epígrafe ``Cambio Obligado de Línea'' en la pagina 10, para ver como se introducen direcciones postales.
Puedes definir estilos especiales para palabras o frases concretas. Hay dos tipos de estilo: lógico y físico. El estilo lógico etiqueta el texto de acuerdo con su significado, mientras que el estilo físico concreta la apariencia física de una sección. Por ejemplo, en la frase anterior, las palabras ``estilo lógico'' fueron etiquetadas como ``definición.'' Se podría haber conseguido el mismo efecto (poner esas palabras en cursiva), a través de una etiqueta diferente que especificara simplemente ``pon estas palabras en cursiva.''
Si los estilos físico y lógico producen el mismo resultado en la pantalla, En qué se diferencian? Delegamos, durante un par de párrafos, en la filosofía de SGML, que se puede resumir en una especie de mantra Zen: ``Confía en tu browser.''
En el universo ideal de SGML, el contenido esta divorciado de la presentación. Así, SGML etiqueta el nivel-uno de encabezamiento como nivel-uno de encabezamiento, pero no especifica que el nivel-uno de encabezamiento sea, por ejemplo, Times 24 puntos negrita centrada en la cabecera de la pagina. La ventaja de este método (es similar al concepto de hojas de estilo de muchos procesadores de texto) es que si decides cambiar el nivel-uno de encabezamiento a Helvetica 20 puntos justificado por la izquierda, todo lo que tienes que hacer es cambia la definición del nivel-uno de encabezamiento en dispositivo de presentación (p.e., tu browser World Wide Web).
La otra ventaja de las tags lógicas es que ayudan a resaltar consistencia en tus documentos. Es mas fácil marcar algo como <H1> que recordar que los encabezamientos que recordar que los encabezamientos de nivel 1 son 24 puntos Times en negrita, o lo que sea. Lo mismo es cierto para los tipos de letra. Por ejemplo, observa el tag <STRONG> . Muchos browsers lo ofrecen en texto en negrita. De todas formas, es posible que algún lector prefiera que estas secciones se marquen en rojo. Los estilos lógicos ofrecen esta posibilidad.
Para aplicar un tipo de letra,
Cuatro caracteres del grupo ASCII -- el signo de menor que (<), el signo de mayor que (>), el ampersand (&) y las comillas (") -- Tienen especial significado dentro de HTML y por lo tanto no se pueden ser usados como tales en el texto. ( Los signos de mayor y menor que se utilizan para indicar el principio y el final de los tags en HTML, y el ampersand se utiliza para indicar el principio de una secuencia de escape.)
Para utilizar unos de estos caracteres un documento HTML, se debe introducir en su lugar su secuencia de escape:
Otras secuencias de escape se utilizan para apoyar a los caracteres acentuados. Por ejemplo:
Una lista completa de caracteres que requieren apoyo se puede encontrar en CERN.
NOTA: A diferencia del resto de HTML, las secuencias de escape son sensibles ala caja. No se puede, por ejemplo, utilizar < en lugar de <.
El tag <BR> fuerza una rotura de línea sin espacio interlineal. (Por el contrario, muchos browsers configuran el tag de párrafo <P> con un espacio adicional entre líneas, para indicar mas claramente el inicio del nuevo párrafo.)
Un uso de <BR> es el formato de direcciones:
National Center for Supercomputing Applications<BR>
605 East Springfield Avenue<BR>
Champaign, Illinois 61820-5518<BR>
El<HR> tag produce una línea horizontal con el ancho de la ventana del browser.
La mayoría de los Web browsers pueden mostrar las imágenes alineadas (esto es, imágenes junto al texto) que están en el X Bitmap (XBM) o GIF formato. Cada imagen hace mas lento la muestra inicial del documento, así que generalmente no debes incluir imágenes muy grandes, o demasiadas imágenes.
Para incluir una imagen alineada, utiliza
<IMG SRC=image_URL>
dondeimage_URL es la imagen URL del fichero. La sintaxis para IMG SRC URLs es idéntica a la que se una en un ancla HREF. Si el fichero de la imagen se encuentra en un fichero GIF, entonces la parte del nombre del fichero image_URL debe termina con .gif. Los nombres de ficheros de las imágenes X Bitmap deben terminar con .xbm.
Por defecto el texto se alinea en la parte
d abajo de la imagen
Incluye el ALIGN=TOP
la opción si tu quieres el browser que alinee el texto
adyacente con la parte de arriba de la imagen como muestra en
este párrafo. La imagen completa con el alineamiento de
arriba es:
<IMG ALIGN=top SRC=image_URL>
ALIGN=MIDDLE
alinea el texto con el centro de la imagen.
Algunos Word Wide Web browsers, primariamente son los que corren por la terminal VT100, que no puede mostrar imágenes. La opción ALT te permite que tu especifiques el texto a mostrar cuando una imagen no puede ser. Por ejemplo:
<IMG SRC = "UpArrow.gif" ALT = "Up">
Donde UpArrow.gif es el dibujo de una flecha que apunta hacia arriba. Con NCSA Mosaic y otros agentes capaces de mostrar gráficos, el usuario ve el gráfico con la flecha hacia arriba. .Con un VT100 browser, como el lynx, el usuario mira la palabra "Up".
Tu puedes querer tener una imagen abierta y separada del documento cuando el usuario activa un link sobre una palabra o una versión practica mas peque-a de la imagen incluida en tu documento. Esto es considerado una imagen externa y es practico si tu no deseas ir lento para cargar tu documento principal con imágenes alineadas.
Para incluir una referencia a una imagen externa, usa
<A HREF = image_URL>link anchor</A>
Usa la misma sintaxis para hacer animación externa y sonidos. La única diferencia es la extensión del fichero del link. Por ejemplo,
<A HREF = "QuickTimeMovie.mov">link anchor</A>
especifica un link a QuickTime movie. Algunos archivos comunes y su extensión son:
de las unidades de trabajo UNIX, no pueden ver película asegúrate que tu audieandomPic.gif" ALT = "">Por ausencia de la parte de abajo de una imagen es alineada con el texto como se muestra en este párrafo.
Considera este trozo de HTML:
<B>Este es un ejemplo de <DFN>sobreponer</B> HTML tags.</DFN>
La palabra "sobreponer" esta contenida dentro de los dos <B> y <DFN> tags. Como lo formatea un browser? No sabrás hasta que mires, y los browsers reaccionaran diferente, dependiendo de cada uno. En general, intenta no sobreponer los tags.
Es aceptable clavar las anclas con otro elemento de HTML.
<H1><A HREF = "Destino.html">Micabecera</A></H1>
NO claves a una cabecera u otro elemento HTML con un ancla.
<A HREF = "Destino.html">
<H1>Mi cabecera</H1>
</A>
Aunque la mayoría de las anclas actualmente manejan este ejemplo, esta prohibido por el HTML oficial y no funcionara con otros browsers.
Tags de carácter modifican la estética de otros tags:
<UL><LI><B>Una palabra en negritas</B>
<UL>
<LI><I>Una palabra en cursivas</I>
</UL>
De todas maneras, intenta enclavar otros tipos de tags HTML. Por ejemplo, es tentador enclavar una cabecera dentro de una lista, para hacer el punto de la tipografía mas grande:
<UL><LI><H1>
Una cabecera mas grande</H1>
<UL>
<LI><H2>
una cabecera mas peque-a</H2>
</UL>
Cual es la diferencia entre clavar un <B> dentro de un <LI> tag en contra de enclavar <H1> dentro de <LI>? Esto es una pregunta de SGML. El significado semántico de <H1> es que la cabecera principal de un documento debe ser seguido por el contenido del documento. Entonces no tiene sentido encontrar un <H1> dentro de la lista.
Tags de carácter formateado tampoco son, generalmente, no aditivas. Puedes esperar que :
<B><I>some text</I></B>
produjera texto en negritas y cursiva. En algunos browsers si, en otros solo se interpreta el tag que se encuentra mas adentro (en esta caso, la cursiva.)
Cuando un <IMG> tag se-ala a una imagen que no exista, se sustituye por una "dummy" o falsa. Cuando esto ocurra, asegúrate que la imagen a la que se hace referencia si existe, y que el hyperlink tiene la información correcta en la URL, y que el permiso del fichero este correcto (para leer texto).
He aquí un ejemplo mas largo de un documento HTML
<HEAD>
<TITLE>Ejemplo mas largo
</TITLE>
</HEAD>
<BODY>
<H1>Un ejemplo mas largo
</H1>
Este es un documento HTML sencillo. Este es el primer párrafo.
<P>
Este es el segundo párrafo, con efectos especiales. Esta es una palabra
en
<I>cursiva</I>. Esta es una palabra en
<B>negritas</B>.
He aquí una imagen GIF:
<IMG SRC = "myimage.gif">.
<P>
Este es el tercer párrafo, que demuestra links. He aquí un hypertext de la palabra
<A HREF = "subdir/mifichero.html">foo</A>
a un documento llamado
"subdir/myfichero.html". (Si tratáis de seguir este link, tendréis error en la pantalla).
<P>
<H2>Una cabecera de segundo nivel
</H2>
He aquí una sección de texto que se debe mostrar como una fuente de ancho fijo:
<P>
<PRE>
En aquella rama allá arriba
Se siente un pájaro negro y mojado
Arreglando y volviendo a arreglar sus plumas bajo la lluvia...
</PRE>
Esta es una lista desordenada con dos artículos:
<P>
<UL>
<LI> fresas
<LI> franbuesas
</UL>
Este es el fin de mi documento ejemplo.
<P>
<ADDRESS>Me (me@mycomputer.univ.edu)</ADDRESS>
</BODY>
Esta guía es solo una introducción. Por tanto si quieres tener mas información existen:
El siguiente archivo ofrecer como hacer un buen archivo HTML
Estos cubre información similar a la de esta guía: