Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Guía Práctica de HTML

    Cargado por

    Omar Velazquez
    20 vistas13 páginas

    Título original

    Guía práctica de HTML

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    DOC, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como DOC, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    20 vistas13 páginas

    Guía Práctica de HTML

    Cargado por

    Omar Velazquez

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como DOC, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 13

    Gua prctica de HTML

    El HTML (HyperText Makeup Language), en realidad no es un lenguaje de programacin, sino como su nombre indica es un lenguaje de maquillado ya que nosotros lo nico que hacemos es maquillar una serie de textos e imgenees para que el navegador nos d la presentacin deseada en conjunto. El HTML est en contnuo desarrollo, por lo que en un principio slo existe un HTML estndar que es el que se denomina SGML (Standart Generalized Makeup Language), que es lenguaje estndar reconocido por todos los navegadores. Slo hay una versin (por el momento), que es la 1.0 y las desventajas que posee sobre el HTML es que es un poco pobre de contenidos, ya que no actualiza las nuevas directivas que estn en contnuo desarrollo. Las directivas en HTML son aquellas ordenes que se hayna entre los smbolos <...> y que son de 2 clases: abiertas y cerradas.

    Abiertas Son aquellas directivas que no necesitan ser cerradas para que su accin sea comprendida por el navegador (<HR>, <BR>, ...)

    Cerradas Son aquellas directivas que para ser comprendidas por el navegador, deben indicar en dnde comienzan y e dnde terminan. Son las ms, y cuando indican al navegador que cierran la directiva poseen el formato </DIRECTIVA> donde DIRECTIVA es la orden que queremos cerrar. El texto o imgenes o elementos que se hayen entre las 2 directivas <DIRECTIVA>...</DIRECTIVA> quedan afectadas por la accin de dicha DIRECTIVA en su totalidad (<H1>...</H1>, <TABLE>...</TABLE>, ...).

    Las directivas en HTML no tienen por qu ser escritas en maysculas, ya que pueden escribirse sin lugar a errores en minsculas. En este texto, las directivas se emplearn en maysculas para mayor claridad y destaque del cdigo HTML, del resto de texto.

    Estructura del Documento


    Todo el contenido de un documento HTML debe encontrarse englobado en el interior de la directiva cerrada <HTML>...</HTML>. Esto indica al navegador que estamos empleando que todo lo que se encuentra entre estas dos marcacs, es cdigo HTML y que debe ser interpretado como tal.

    La directiva <HTML>...</HTML> contiene en su interior 2 bloques: <HEAD>...</HEAD> que es la directiva que seala la cabecera del documento y, <BODY>...</BODY>, que contiene el cuerpo del documento o para entendernos lo que visualizamos en el navegador con el formato correspondiente. En resumen un fichero de HTML sera de la forma:
    <HTML> <HEAD> ... </HEAD> <BODY> ... </BODY> </HTML>

    <HEAD> CABECERA DEL DOCUMENTO Esta cabecera contiene esencialmente informacin del documento. Entre esta directiva podremos poner otras directivas que acontinuacin explico:

    <BASE> Se emplea para especificar un directorio de trabajo (o base) distinto del que actualmente estemos trabajando. Cuando un navegador lee un documento, toma como direccin de este documento con una direccin en el que se halla (http://www.miserver.es/directorio/index.html), como refencia base para el resto del documento. Si ahora ussemos una imagene en nuestro documento (ver seccin IMAGENES) con la directiva: <IMG HREF=dibujos/indice.gif> el navegador buscar el dibujo en http://www.miserver.es/directorio/dibujos/indice.gif (ya que para el navegador el directorio base es directorio y la refencia de la imagen, el navegador la hece sobre esta referencia). Suponemos ahora que el documento index.html lo modificamos, y para comprobar que funciona (tras haberlo modificado), lo colocamos en la direccin: http://www.miserver.es/pruebas/index.html. La imagen que tenemos referenciada como <IMG HREF=dibujos/indice.gif>, ahora ser buscada en http://www.miserver.es/pruebas/dibujos/indice.gif, directorio que seguramente no exista y por lo tanto no veremos la imagen. Aqu es donde entra una de las aplicaciones de la directica <BASE>. Si en el ancabezado indicamos cul es el directorio base o raz de nuestro documento, el resto de referencias a imgenes las podremos seguir manteniendo, de forma que si ponemos:
    <HTML>

    <HEAD> <BASE HREF= http://www.miserver.es/directorio/> ...

    podemos cambiar el documento HTML que queramos de directorio, que las referencias de las imgenes las seguir manteniendo.

    <META> Esta es otra directiva que puede incluirse entre las directivas <HEAD>...</HEAD>. Se usa para incluir metainformacin no definida en las restantes directivas HTML. Una aplicacin mucho ms prctica es la construccin de pginas dinmicas con Netsacpe, lo que se ver ms adelante. El siguiente ejemplo, tras cargar el documento, carga otro al cabo de 10 segundos, si el usuario no sigue antes de este prodo de tiempo ningn otro enlace:
    <HTML> <HEAD> <META http-equiv=REFRESH content=10;URL=http://www.miserver.es/directorio/siguiente.html > ...

    ... <META> es una directiva obligatoria en ningn documento HTML, sino que es opcional totalmente. TRUCO: Podemos hacer con esta directiva, que al finalizar la carga de la pgina, en lugar de hacer que tras un tiempo salte a otra, suene una cacnin, en formato .au (Real Audio, reconocido por Netscape).

    <TITLE> Es otra directiva de la cabecera del documento y en este caso es una directiva cerrada a diferencia de las anteriores que eran abierta (<TITLE>...</TITLE>). Esta directiva nos da la opcin de darle un ttulo al documento, y mejor an, permite visualizarlo en el visualizador de la barra del navegador:
    <HTML> <HEAD> <TITLE> Documento de Javier Gorriz </TITLE> </HEAD> ...

    Aunque en principio no se imponen lmites a la longitud de un ttulo, conviene ser razonable y no usar ni nombre largos nombre muy pequeos. En este tipo de directiva, no se puede emplear ninguna directiva que modifique el tipo de texto, es decir, no podemos ponerlo en negrilla, ni subrayado, ni en cursiva, ni cambiarle el color, simplemente no debemos limitar a poner el texto que deseemos. Ninguna modificacin surtir efecto, y por el contrario sern tambin parte del ttulo las distintas directivas que queramos emplear para modificar la apariencia del ttulo. Aunque est directiva a diferencia de las anteriores, no es obligatoria, es conveniente poner ttulo a nuestra pgina ya que podremos identificarla en todo momento sin tener que verla por completo, para conocer el contenido de la misma. TRUCO: En Netscape se pueden intentar efectos de scrolling o texto pasante en el ttulo del mismo, separando las distintas lneas con el carcter backspace. <BODY> CUERPO DEL DOCUMENTO En el cuerpo del documento se encontrarn todas las directivas HTML as como el texto, las imgenes, sonidos, tablas, listas, etc... Como descripcin grfica, podremos decir que todo lo que aparezca entre las directivas <BODY>...</BODY> ser visualizado de una u otra manera en la pantalla del navegandor. Esta directiva puede alojar en su interior una serie de atributos que suelen hacerla de lo ms interesante en lo que se refiere a la presentacin principal del documento HTML.

    BACKGROUND="..." Este atributo define un grfico en formato .jpg o .gif que nos servir de fondo para la pgina de nuestro documento. El grfico que empleemos se pondr en toda el rea de visualizacin del documento, de forma que complete un mosaico en el que repite el motivo que no es otro que la imagen que definimos en esta directiva. La imagen que nos servir de fondo en nuestra pgina, puede ser puesta con su ruta absoluta de referencia en el servidor, como por ejemplo la ruta absoluta http://www.miservidor.es/fondos/imagen.gif, lo que nos cargara la imagen.gif definida en la ruta de internet http://www.miservidor.es/fondos/, como fondo de nuestra pantalla, o con su ruta relativa como podra ser imagen.gif, que indicara al servidor que dicho imagen GIF, est situada en el mismo directorio del documento que se est cargando en el navegador.

    NOTA: En el caso de que nuestro visitante tenga desactivada la opcin de cargar imgenes, el fondo de nuestra pgina no sera cargada, y el fondo que aparecera (en caso de que no lo impidieramos definiendo otro color de fondo), sera de color gris oscuro.

    BGCOLOR="..." Este atributo define el color que aparecer de fondo en nuestra pgina. Por defecto, en el navegador Netscape, aparecera de color gris oscuro a no ser que se le definiera otro color. Los colores se definiran de dos formas: en formato RGB, o dando el nombre del color deseado en ingls. El formato RGB lo que hace es definir en 3 pares de nmeros hexagesimales, el valor de Rojo (Red), Verde (Green) y Azul (Blue) en cantidad que va desde 0 a 255 (00-FF en hexagesimal). El conjunto en total nos da un color deternimado que ser el indicativo del que aparecer de fondo en nuestro documento. En el caso de que definamos el color del modo RGB, debemos anteponer una almohadilla (#) de forma que el navegador con esta almohadilla sepa que el siguiente nmero, es un nmero hexagesimal y no una serie de caracteres. Por ejemplo, BGCOLOR="#FF0000" en el atributo <BODY> (<BODY BGCOLOR="#FF0000">), nos dar el color de fondo ROJO, el BGCOLOR="#00FF00" el color VERDE y el BGCOLOR="#0000FF" el color AZUL. Existen muchos programas que nos permiten seleccionar el color que deseemos sintener que hacer clculos hexagesimales del valor RGB del color, por lo que nosotros solo nos debemos de preocupar de elegir el color y colocar el atributo con el valor correspondiente dentro de la directiva <BODY>. La otra forma de definir los valores de los colores (por lo menos en Netscape), es la de otorgar el nombre en Ingles del color que deseemos colocar. Esta opcin tiene el fallo de que no todos los colores estn definidos, y slo los ms bsicos son los definidos. Por ejemplo BGCOLOR="Red", BGCOLOR="Green" y BGCOLOR="Blue", nos dara al igual que antes, colores Rojo, Verde y Azul de fondo de documento TRUCO: Aunque nuestro visitante tenga predefinido el no cargar las imgenes y por lo tanto no ver nuestro fondo (en caso de que tuvieramos una imagen), si definimos un color al mismo tiempo que definimos una imagen de fondo, si el usuario no ve las imgenes, SI ver el color que predefinamos,permitiendonos definir un color similar al que predomine en el mosaico que genera la imagen que colocamos de fondo, y dando un efecto similar al que tendra si hubiera cargado la imagen de fondo.

    TEXT="..." Es un atributo de la directiva <BODY>, que nos permite modificar el color del TEXTO general que aparecer en nuestro documento. Es decir, del total del texto que se muestre en la pgina HTML que hagamos. Al igual que el color de fondo podemos definirlo del modo anterior: o bien en RGB o bien con el nombre en ingles del color. Por defecto, si no definimos el color del texto, se mostrar el color NEGRO (por defecto).

    LINK="..." Este atributo define el color de cualquier enlace que aparezca en el documento. Se define al igual que los atributos anteriores. Por defecto el color ser AZUL.

    VLINK="..." Este atributo define el color de cualquier enlace ya visitado que aparezca en el documento. Se define al igual que los atributos anteriores. Por defecto el color ser VIOLETA.

    ALINK="..." Este atributo define el color de cualquier enlace sobre el que mantengamos pulsado el ratn sin soltar, es decir manteniendo sobre el enlace el ratn con el botn pulsado (lo que hara que se habriera ese enlace en otra ventana). Se define al igual que los atributos anteriores. Por defecto el color ser ROJO.

    Etiquetas de HTML
    Regreso a Gua de HTML

    Etiquetas | Atributos

    En la presente tabla se hace una comparacin entre las etiquetas de formato de texto . Netscape no soporta <DFN>: ni <S> (tachado).

    Con etiqueta

    Sin etiqueta

    Con etiqueta

    Sin etiqueta CITE CODE I: ITALICA SMALL SUP 5

    Con etiqueta

    Sin etiqueta

    ADDRESS ADDRESS CITE

    B: B: NEGRITA NEGRITA DFN


    KBD

    BIG
    EM SAMP SUB5
    TT

    BIG EM SAMP SUB 5 TT

    CODE

    DFN KBD STRONG S Tachado VAR

    I: ITALICA
    SMALL

    STRONG S Tachado

    SUP5

    U U VAR Subrayado Subrayado

    Etiquetas
    Apertura <! <A> <ADDRESS> Accin Comentario. Hipervnculo. Atributos Ninguno HREF, NAME, REL, REV, TITLE --> </A> </ADDRESS> Cierre

    Formato para Ninguno direccin del autor. Url del autor; contexto del documento. Tamao de la fuente base. Sonido de fondo. Aumenta el tamao. Hace parpadear el texto. Da formato con sangra a un prrafo Cuerpo del documento. HREF

    <BASE> <BASEFONT SIZE> <BGSOUND> <BIG> <BLINK>

    </BASE>

    Ninguno SRC, LOOP. Ninguno Ninguno

    NO NO - Internet Explorer </BIG> </BLINK> - Netscape

    <BLOCKQUOTE> <BODY>

    Ninguno BGCOLOR, BACKGROUND,

    </BLOCKQUOTE> </BODY>

    TEXT, LINK, VLINK, ALINK <BR> Retorno de lnea. CLEAR: Se utiliza en combinacin con ALIGN de IMAGE. ALIGN: TOP/BOTTOM. Internet Explorer: LEFT, RIGHT, CENTER Ninguno NO

    <CAPTION>

    Posicin de la leyenda en una tabla. Centrar.

    </CAPTION>

    <CENTER> <CITE> <CODE>

    </CENTER> </CITE> </CODE>

    Formato para citas Ninguno en itlicas. Formato en tipo cdigo. Definiciones marcadas, para Lista de Definiciones <DL>. Ninguno

    <DD>

    Ninguno

    NO

    <DFN<

    Formato en itlica. Internet Explorer Lista de directorio, con elementos Ninguno marcados con <LI>. Lista de Definiciones, con trminos marcados con <DT> y Ninguno definiciones marcadas con <DD>. Trminos marcados, para Lista de Definiciones <DL>.

    </DFN<

    <DIR>

    </DIR>

    <DL>

    </DL>

    <DT>

    Ninguno

    NO

    <EM> <EMBED>

    Formato enfatizado Ninguno en itlica. Sonido de Fondo. SRC, WIDTH, HEIGHT,

    </EM></TD< tr> NO - Netscape</TD< tr>

    AUTOSTART, LOOP. <FONT> Definicin de la fuente. Para ingreso de datos del usuario en un formulario. Tamao de letras del 1 al 6. Encabezamiento del documento. SIZE, COLOR. Internet Explorer: FACE. ACTION, METHOD HTML 3.0: LEFT, CENTER, RIGHT BASE, TITLE, ISINDEX, NEXTID, META NOSHADE, SIZE, WIDTH, ALIGN. Internet Explorer: COLOR HEAD, BODY Ninguno ALIGN, SRC, ALT, ISMAP, WIDTH, HEIGHT, VSPACE, HSPACE TYPE, NAME, VALUE, SIZE, MAXLENGHT, ALIGN, SRC, CHECKED </FONT>

    <FORM>

    </FORM>

    <H1 ...H6>

    </H1 .../H6>

    <HEAD>

    </HEAD>

    <HR>

    Lnea horizontal.

    NO

    <HTML> <I>

    Al principio y al fin de todo documento. Itlica (Cursiva).

    </HTML> </I>

    <IMG>

    Cargar imgenes.

    NO

    <INPUT>

    Define un objeto de ingreso en un formulario. Indica que existe un index en el server para el documento.

    </INPUT>

    <ISINDEX>

    Netscape: PROMPT

    NO

    <ISMAP>

    Activa la seleccin de imgenes para Ninguno el usuario. Formato monoespaciado. tem de lista. Ninguno Netscape: VALUE, TYPE

    NO

    <KBD> <LI>

    </KBD> NO

    <LISTING> <LIT>

    Listados

    Ninguno. Obsoleto.

    </LISTING> </LIT>

    Literal. Como PRE, pero usa letra Ninguno proporcional. ALIGN, BEHAVIOR, BGCOLOR, DIRECTION, HEIGHT, WIDTH, HSPACE, VSPACE, LOOP, SCROLLAMOUNT, SCROLLDELAY. Ninguno

    <MARQUEE>

    Marquesina.

    </MARQUEE> Internet Explorer

    <MENU> <META>

    Lista men.

    </MENU> NO

    Metainformacin EQUIV, CONTENT, ubicada en HEAD. NAME Es un parmetro que identifica al documento. Elimina los saltos de lneas. Lista ordenada, con elementos marcados con <LI>. NO

    <NEXTID>

    NO

    <NOBR>

    Ninguno

    NO

    <OL>

    TYPE, START, VALUE.

    </OL>

    <OPTION>

    Opcin de VALUE, SELECTED seleccin dentro de VALUE un formulario. Retorno de lnea, con un espacio. Alineacin de texto. Pasaje de texto plano. Visualiza el texto en su formato original. Texto tachado. Formato tipo ejemplo. Ninguno LEFT, CENTER, RIGHT Ninguno. Obsoleto.

    NO

    <P> <P ALIGN> <PLAINTEXT>

    NO </P> </PLAINTEXT>

    <PRE> <S> <SAMP>

    WIDTH Ninguno Ninguno

    </PRE> </S> </SAMP>

    <SELECT>

    Para seleccin de NAME, SIZE, opciones dentro de MULTIPLE un formulario. Disminuye el tamao. Ninguno

    </SELECT>

    <SMALL>

    </SMALL>

    <STRONG> <SUB> <SUP>

    Formato enfatizado ms fuerte que Ninguno <EM>. Subndice. Superndice. Ninguno Ninguno BORDER, CELLPADDING, CELLSPACING, HEIGTH, WIDTH. Internet Explorer: COLOR

    </STRONG> </SUB> </SUP>

    <TABLE>

    Tabla.

    </TABLE>

    <TD>

    Celdas de una fila en una tabla, dentro de <TR>. rea para ingreso de texto dentro de un formulario.

    ALIGN, VALIGN, NOWRAP, COLSPAN, </TD> ROWSPAN, HEIGTH, WIDTH NAME, ROWS, COLS. ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, HEIGHT, WIDTH Ninguno ALIGN, VALIGN Ninguno </TEXTAREA>

    <TEXTAREA>

    <TH>

    Ttulo de Tabla.

    </TH>

    <TITLE> <TR> <TT>

    Ttulo dentro de HEAD. Fila de una Tabla. Formato tipo mquina. Lista no ordenada, con elementos marcados con <LI> . Formato tipo variable.

    </TITLE> </TR> </TT>

    <UL>

    COMPACT, TYPE

    </UL>

    <VAR>

    Ninguno

    </VAR>

    <WBR>

    Se usa con NOBR para una seccin que deba ser separada. Similar a PRE.

    Ninguno

    NO

    <XMP>

    Ninguno

    </XMP>

    Atributos
    Nombre HREF<A> Etiqueta Direccin del URL local o remoto. Accin href="www.hp.com" Nmero de veces que se reproduce el archivo de loop=infinite sonido. Para permanente se usa INFINITE o -1. Nombre del archivo de src="sonido.wav" sonido (Internet Explorer) Nmero de veces que se reproduce el archivo de loop=-1 sonido. Para permanente se usa INFINITE o -1. Nombre del archivo de sonido (con Crescendo) Nombre del grfico <IMAGE> src="sonido.mid" src="imagen.gif" Valor

    LOOP <BGSOUND> SRC

    LOOP <EMBED> SRC SRC ALT BGCOLOR BACKGROUND TEXT LINK VLINK ALINK ALIGN ALIGN <CAPTION> dentro de <TABLE> <H1..H6>, <P ALIGN>, <TD>, <BODY>

    Nombre que reemplaza a alt="Nombre de la imgen cuando sta no Imgen" puede ser cargada. Color de fondo Imgen de fondo Color del texto Color de vnculo Color de vnculo presionado Colocar ttulo arriba (TOP) o debajo (BOTTOM) de la tabla. Alinear el texto: LEFT, RIGHT, CENTER bgcolor="#FFFFFF" (blanco) background="foto.gif" text="#000000" (negro) link="#0000FF" (azul) alink="#00FF00" (verde) align=top align=center

    Color de vnculo visitado vlink="#FF0000" (rojo)

    <TH>, <TR>, <DIV>, ALIGN SIZE WIDTH SIZE COLOR FACE HEIGHT WIDTH BORDER CELLPADDING CELLSPACING HEIGHT WIDTH COLSPAN ROWSPAN <TABLE> <EMBED>, <IMAGE>, <MARQUEE>, <TD>, <TH> <FONT> <HR> Alinear el texto: LEFT, RIGHT, CENTER Valor de la altura en pixels o porcentaje align=center size=3

    Valor del ancho en pixels width=50% o porcentaje Tamao de la letra de 1 a size=6 7 Color de la letra color="#000000" (negro)

    Fuente del texto (Internet face="helv" (helvtica) Explorer) Valor de la altura en pixels o porcentaje heigth=80

    Valor del ancho en pixels width=50% o porcentaje Borde y ancho del borde border=5 en la tabla Espacio entre el borde y el texto Espacio entre las lneas interna y externa del borde Valor de la altura en pixels o porcentaje cellpadding=10 cellspacing=3 heigth=80

    Valor del ancho en pixels width=50% o porcentaje <TD> dentro de <TABLE> Expandir una celda varias colspan=4 columnas Expandir una celda varias rowspan=4 filas

    También podría gustarte