Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Curso Básico de Lenguaje HTML

    Cargado por

    carlos5757
    8 vistas9 páginas

    Título original

    Curso básico de lenguaje HTML

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    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 PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    8 vistas9 páginas

    Curso Básico de Lenguaje HTML

    Cargado por

    carlos5757

    Copyright:

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

    Curso bsico de lenguaje HTML

    Pgina todava en construccin Se ir mejorando poco a poco ltima actualizacin: 22 de Septiembre de 1997

    ndice
    Estructura general de un fichero HTML Formato de prrafos Formato de texto Listas no ordenadas Listas ordenadas Listas de definiciones Tablas Anclas Links Insercin de imgenes Imgenes clicables Imgenes sensibles Frames Formularios Layers o capas

    Estructura general de un fichero HTML


    HTML (HyperText Markup Language) es el lenguaje utilizado en la Internet para definir las pginas del WORLD WIDE WEB. Los ficheros HTML son ficheros puramente ASCII, que pueden ser escritos con cualquier editor bsico, tal como Notepad en Windows o vi en Unix. Tambin se pueden utilizar procesadores de texto ms complicados como Microsoft Word, pero en este caso hay que asegurarse que el fichero es guardado en disco como "text only". En este fichero de texto se introducen unas marcas o caracteres de control llamadas TAGs, que son interpretadas por el browser. Cuando ste lee un fichero ASCII con extensin *.htm o *.html interpreta estas TAGs y formatea el texto de acuerdo con ellas. Todas las TAGs de HTML van encerradas entre los caracteres menor que ( <) y mayor que ( >), como por ejemplo <HTML>. Adems, la mayor parte de ellas son dobles, en el sentido de que hay una TAG de comienzo y otra de final; entre ambas est el texto afectado por dichas TAGs. La marca de final es como la de comienzo, pero incluyendo una barrra (/). Por ejemplo, la marca de final de <HTML> es </ HTML>. De la misma forma, la TAG de final de <P> es </P>, y as con otras TAGs. <HTML> <HEAD> <TITLE>Ttulo de la pgina</TITLE> ... </HEAD> <BODY> ... </BODY> </HTML>

    Volver al inicio Formato de prrafos

    As se escribe:
    <P>Este es un ejemplo de cmo se formatean los prrafos en lenguaje HTML. En esta celda de la Tabla se incluyen dos prrafos</P> <P>El resultado puede verse en la celda vecina incluida en la columna de la derecha</P> <P>Los prrafos se separan con un espaciado superior al correspondiente a una nueva lnea. <BR> Para tener un espaciado ms compacto puede utilizarse el Line Break, como en este ejemplo.</P>

    As se ve: Este es un ejemplo de cmo se formatean los prrafos en lenguaje HTML. En esta celda de la Tabla se incluyen dos prrafos El resultado puede verse en la celda vecina incluida en la columna de la derecha Los prrafos se separan con un espaciado superior al correspondiente a una nueva lnea. Para tener un espaciado ms compacto puede utilizarse el Line Break, como en este ejemplo. Lneas horizontales:

    <P>Lneas horizontales:</P> <HR><HR WIDTH=80%><HR SIZE=4><HR NOSHADE> <P>Los prrafos pueden indentarse. <BLOCKQUOTE>Block quote indenta un prrafo. Se deshace esta indentacin con el fin de la TAG Block quote,</BLOCKQUOTE> como se ve en el ejemplo.</P> <PRE>La TAG Preformatted permite respetar la forma original en que se ha escrito el texto.</ PRE> <ADRESS> <P>Escuela Superior de Ingenieros Industriales <P>P Manuel de Lardizbal, 13 <P>E-20009 San Sebastin </ADRESS>

    Los prrafos pueden indentarse. Block quote indenta un prrafo. Se deshace esta indentacin con el fin de la TAG Block quote, como se ve en el ejemplo.

    La TAG Preformatted permite respetar la forma original en que se ha escrito el texto. Escuela Superior de Ingenieros Industriales P Manuel de Lardizbal, 13 E-20009 San Sebastin (Esto aparece al principio del documento, a la
    izquierda)

    Volver al inicio Formato de texto

    Una idea importante de HTML es la de definir lo que se desea hacer (resaltar una palabra o un prrafo, utilizar un espaciado constante, etc.), pero no decir cmo se desea hacerlo, dejando que esta funcin la realice el browser de acuerdo con sus posibilidades. Por ejemplo, se le puede decir al browser que se quiere remarcar una palabra sin decirle que la ponga en bold; de ordinario la remarcar ponindola en bold, pero si el browser se est ejecutando en un ordenador que no permite texto en bold, el propio browser buscar una forma alternativa de remarcar esa palabra. De todas formas, los autores quieren muchas veces determinar ms en concreto cmo va a aparecer su texto en la pantalla del browser. Adems, cada vez es ms infrecuente ejecutar un browser que no tenga las amplias posibilidades de formatear texto de Mac o Windows. La consecuencia es que HTML se ha extendido y permite tanto definir de modo general la funcin del texto como determinar en concreto el formato con que se debe representar. A continuacin se muestran algunos ejemplos de ambas formas de definir los formatos. As se escribe: <FONT SIZE="+1" COLOR="red" FACE="Arial"> Define tipo de letra, tamao y color a tu gusto </FONT>
    <P>Una palabra o un fragmento de texto se puede resaltar con el tag STRONG o con el tag EM, que en la mayor parte de los browsers se corresponden con <STRONG>bold</STRONG> e <EM>italic</EM></P> <P>En cualquier caso, tambin se pueden utilizar los tags <B>bold</B> (B) e <I>italic</I> (I).</P> <P>Para escribir con una <TT>letra de paso constante (estilo teletipo)</TT> se emplea la Tag TeleType</P> <P>Para que el texto <BLINK>parpadee</BLINK> se emplea la TAG Blink.</P>

    As se ve:

    Define tipo de letra, tamao y color a tu gusto


    Una palabra o un fragmento de texto se puede resaltar con el tag STRONG o con el tag EM, que en la mayor parte de los browsers se corresponden con bold e italic. En cualquier caso, tambin se pueden utilizar los tags bold (B) e italic (I). Para escribir con una letra de paso constante (estilo teletipo) se emplea la Tag TeleType. Para que el texto Blink. se emplea la Tag

    <P>Ttulos: <H1>1</H1><H2>2</ H2><H3>3</H3> Ttulos: <H4>4</H4><H5>5</H5><H6>6</H6></P> <P>Alineados:</P> <P ALIGN="LEFT">Izquierda</P> <P ALIGN="RIGHT">Derecha</P> <P ALIGN="CENTER">Centrado</P> </P>

    123

    456

    Alineados: Izquierda Derecha Centrado

    Otros efectos: <P><U>subrayado</U> <P><STRIKE>tachado</STRIKE> <P><BIG>letra ms grande que el estndar</BIG> <P><SMALL>letra ms pequea que el estndar</SMALL> <P>Texto tipo<SUB>subndice</SUB> <P>Texto tipo<SUP>superndice</SUP>

    Otros efectos: subrayado tachado

    letra ms grande que el estndar


    letra ms pequea que el estndar

    Texto tiposubndice Texto tiposuperndice

    Volver al inicio Listas no ordenadas


    As se escribe:
    <P>Las listas no ordenadas: <UL> <LI>Van precedidas por "bullets" <LI>Se entiende que no importa el orden <LI>Se utilizan con mucha frecuencia </UL>

    As se ve: Las listas no ordenadas: Van precedidas por "bullets" Se entiende que no importa el orden Se utilizan con mucha frecuencia

    Volver al inicio Listas ordenadas:


    As se escribe:
    Las listas ordenadas: <P>Las listas ordenadas: <OL> <LI>Van precedidas por nmeros <LI>La numeracin es automtica <LI>Son tambin muy utilizadas </OL>

    As se ve: Las listas ordenadas: 1. Van precedidas por nmeros 2. La numeracin es automtica 3. Son tambin muy utilizadas

    Volver al inicio Listas de definiciones:


    As se escribe:
    <P>Las listas de definiciones: <DL>

    As se ve:

    <DT>Primer trmino <DD>Definicin del 1er trmino <DT>Segundo trmino <DD>Definicin del 2 trmino </DL>

    Definicin del 1er trmino Segundo trmino Definicin del 2 trmino

    Volver al inicio Tablas


    Las tablas son uno de los elementos ms interesantes de HTML. Permiten, por ejemplo, escribir texto en varias columnas, hacer listas de equivalencias, tablas propiamente dichas, etc. Este documento es un ejemplo de las posibilidades ofrecidas por las tablas. As se escribe:
    <TABLE BORDER=1> <TR><TD>celda (1,1)</TD><TD>celda (1,2)</TD></TR> <TR><TD>celda (2,1)</TD><TD>celda (2,2)</TD></TR> </TABLE> <CENTER><TABLE BORDER=1> <TR><TD>celda (1,1)</TD><TD>celda (1,2)</TD></TR> <TR><TD>celda (2,1)</TD><TD>celda (2,2)</TD></TR> </TABLE></CENTER>

    As se ve: celda (1,1) celda (1,2) celda (2,1) celda (2,2) celda (1,1) celda (1,2) celda (2,1) celda (2,2)

    Volver al inicio Anclas


    Las anclas son referencias que se emplean en el archivo con el fin de ser el punto de destino de un link. En el archivo son invisibles pero al clicar sobre una palabra sealada como link, la visualizacin de la pgina pasa a ser el punto donde se haba definido el ancla. As se escribe:
    <P><A NAME "ancla">

    As se ve:

    Volver al inicio Links


    Los links son palabras diferenciadas en un archivo HTML, y tienen la funcin de enviar al usuario a algn ordenador remoto, o a algn sitio de la pgina, que est sealada por un ancla. Los links forman lo que se llama hipertexto. As se escribe:
    <P>Este link enva al Web de la Universidad<P> <A HREF="http://193.145.249.23">Al Web</A>

    As se ve: Este link enva al Web de la Universidad Al Web

    <P>Este link enva al ancla<P> <A HREF="#ancla">Al ancla</A>

    Este link enva; al ancla Al ancla

    Volver al inicio Insercin de imgenes


    Un recurso que da mucha vida a una pgina hecha con HTML es la insercin de elementos grficos. La forma de insertar una imagen es la siguiente: As se escribe: As se ve:

    <IMG SRC="todo.gif">

    Volver al inicio Imgenes clicables


    Se pueden unir los dos apartados anteriores, es decir, se puede crear una imagen que a la vez sea un link. Al clicar sobre la imagen, sta te enviar a un documento o un ancla destino. As se escribe:
    <P><A HREF="#ancla"> <IMG SRC="todo.gif"> </A>

    As se ve:

    Volver al inicio Imgenes sensibles


    Imgenes sensibles son un tipo de imgenes las cuales detectan la zona en la que se ha clicado y segn el punto realizan un link a una zona del documento u a otra (o entre archivos). Hay que definir los puntos de la imagen y la zona a la que hay que ir si se clica. Se pueden definir zonas rectangulares, circulares y poligonales. El ejemplo crea dos zonas rectangulares definiendo los puntos segn las coordenadas del punto superior izquierdo y el del punto inferior derecho. As se escribe: As se ve:

    <P><IMG USEMAP="#mapadirec" SRC="mapa.gif"> <MAP NAME="mapadirec"> <AREA COORDS=0,0,47,46 HREF="http://193.145.249.23"> <AREA COORDS=47,0,96,46 HREF="#ancla"> </MAP>

    Volver al inicio Frames


    As se escribe: As se ve:

    <FRAMESET ROWS="50%,50%,*"> <FRAME SCR="ejemplo.htm"> <FRAME SCR="ejemplo.htm"> </FRAMESET>

    <FRAMESET COLS="40%,60%"> <FRAME SCR="ejemplo.htm"> <FRAME SCR="ejemplo.htm"> </FRAMESET>

    Volver al inicio

    Formularios
    As se escribe:
    <FORM> Nombre: <INPUT NAME="nombre"> </FORM> <FORM> Nombre: <INPUT NAME="nombre"><P> <INPUT TYPE="radio" NAME="boton" CHECKED> boton radio 1<P> <INPUT TYPE="radio" NAME="boton" CHECKED> boton radio 2<P> <INPUT TYPE="checkbox" NAME="check"> checkbox </FORM>

    As se ve: Nombre:

    Nombre:
    n boton radio j k l m n boton radio i j k l m g checkbox c d e f

    1 2

    Volver al inicio Layers


    Antes que nada, hay que decir que las layers slo son compatibles con Netscape Communicator por el momento. As que si no es este tu navegador, no vers esta parte como debera ser en la realidad. Las capas permiten jugar con contenidos situados en capas distintas, escondindolos o hacindolos visibles, situandolos en la parte deseada de las ventanas... pero con el handicap de la compatibilidad. Para browsers que no soportan layers, est la tag pareada<NOLAYER> Hay dos tipos de layers: las definidas por <LAYER> son posicionadas de una forma absoluta. Las definidas por <ILAYER> son posicionadas con relacin a otra layer. As se escribe:
    <LAYER NAME="uno" VISIBILITY="HIDE"> Esta es la capa uno </LAYER>

    As se ve:

    Esta otra es la <LAYER NAME="dos" VISIBILITY="SHOW"> Esta otra es la capa dos </LAYER> capa dos

    A continuacin se listan los atributos que soporta la tag pareada <LAYER>: Todo tipo de eventos de JavaScript. (Ver captulo de eventos del tutorial de JavaScript de la ESIISS) NAME: especifica el nombre de la capa para poder referirse a ella desde JavaScript, por ejemplo. LEFT, TOP: indica la posicin (izquierda y arriba) en la que empieza la layer (si es una tag LAYER) o la posicin relativa para las definidas con ILAYER. PAGEX, PAGEY: especifica la posicin relativa de la layer a la ventana del documento

    SRC="nombrearchivo.ext" carga en la layer el arhivo especificado (nombrearchivo.ext) Z-INDEX, ABOVE, BELOW: especifican en orden de amontonamiento de las layers entre s. Estos tres atributos son mutuamente exclusivos, emplese slo uno de ellos. WIDTH, HEIGHT: especifican la anchura y la altura de la layer. Limitan el rea en la que se muestra el contenido de la layer. CLIP=x1,y1,x2,y2 delimita el area visible (definida por el rectngulo de las coordenadas indicadas) de la layer. VISIBILITY: SHOW hace la layer visible, HIDE la oculta. BGCOLOR: especifica el color de fondo de la layer. Por defecto, una layer es transparente para que puedan verse las que estn por debajo. Si se pone color de fondo, no podrn verse las layers inferiores. BACKGROUND="archivo.ext" es lo mismo que BGCOLOR pero poniendo como fondo la imagen del archivo.ext

    Volver al inicio Una plantilla de ayuda


    As se escribe:
    <P>Texto aqu <P>Texto aqu

    As se ve: Texto aqu Texto aqu

    Volver al inicio

    También podría gustarte