Mipio07
  • Ingresar
  • Foro Mipio07
  • ¡Afiliate!
  • Afiliados
  • Extras
  • Taller PWG
  • ¡Torneo de Webs!
  • Contactase con nosotros
  • ¡Postularse para Staff!
  • Nosotros ganamos el torneo!


    -------------------------

    ★ Mipio07 ★ WebMaster ★ Ayuda,Plantillas,Diseños, Ect ★

    HTML

    Curso básico de lenguaje HTML


    Índice


    Estructura general de un fichero HTML

    HTML (HyperText Markup Language) es el lenguaje utilizado en la Internet para definir las páginas del WORLD WIDE WEB. Los ficheros HTML son ficheros puramente ASCII, que pueden ser escritos con cualquier editor básico, tal como Notepad en Windows o vi en Unix. También se pueden utilizar procesadores de texto más 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 extensión *.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>. Además, 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>Título de la página</TITLE>

            ...
        </HEAD>

        <BODY>
            ...
        </BODY>
    </HTML>
    Volver al inicio 

    Formato de párrafos

    Así se escribe: Así se ve: 
    <P>Este es un ejemplo de cómo se 
    
    formatean los párrafos en lenguaje HTML. 
    En esta celda de la Tabla se incluyen dos 
    párrafos</P>
    
    <P>El resultado puede verse en la 
    celda vecina incluida en la columna de la 
    derecha</P>
    Este es un ejemplo de cómo se formatean los párrafos en lenguaje HTML. En esta celda de la Tabla se incluyen dos párrafos 

    El resultado puede verse en la celda vecina incluida en la columna de la derecha 

    <P>Los párrafos se separan con un espaciado 
    superior al correspondiente 
    
    a una nueva línea. <BR>
    Para tener un espaciado más compacto 
    puede utilizarse el Line Break, 
    como en este ejemplo.</P>
    Los párrafos se separan con un espaciado superior al correspondiente a una nueva línea. 
    Para tener un espaciado más compacto puede utilizarse el Line Break, como en este ejemplo. 
    <P>Líneas horizontales:</P> 

    <HR><HR WIDTH=80%><HR SIZE=4><HR NOSHADE>

    Líneas horizontales: 



    <P>Los párrafos pueden indentarse. 

    <BLOCKQUOTE>Block quote indenta un párrafo. Se  

    deshace esta indentación con el fin de la 

    TAG Block quote,</BLOCKQUOTE> 

    como se ve en el ejemplo.</P>

    Los párrafos pueden indentarse. 
      Block quote indenta un párrafo. Se deshace esta indentación con el fin de la TAG Block quote,
    como se ve en el ejemplo.
    <PRE>La TAG Preformatted permite 
        respetar la forma 
          original 

          en que se ha  

            escrito el texto.</PRE>
    La TAG Preformatted permite 
      respetar la forma 
        original 

        en que se ha 

          escrito el texto.
    <ADRESS> 
    <P>Escuela Superior de Ingenieros Industriales 
    <P>Pº Manuel de Lardizábal, 13 
    <P>E-20009 San Sebastián 
    </ADRESS>
    Escuela Superior de Ingenieros Industriales 
    Pº Manuel de Lardizábal, 13 
    E-20009 San Sebastián 
      (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 párrafo, utilizar un espaciado constante, etc.), pero no decir cómo se desea hacerlo, dejando que esta función 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á poniéndola 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 más en concreto cómo va a aparecer su texto en la pantalla del browser. Además, cada vez es más 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 función del texto como determinar en concreto el formato con que se debe representar. A continuación se muestran algunos ejemplos de ambas formas de definir los formatos.

    Así se escribe: Así se ve: 
    <FONT SIZE="+1" COLOR="red" FACE="Arial"> 
    Define tipo de letra, tamaño y color a tu gusto 
    </FONT>
    Define tipo de letra, tamaño y color a tu gusto 
    <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>
    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
    <P>En cualquier caso, también se 
    pueden utilizar los tags 
    
    <B>bold</B> (B) e <I>italic</I> (I).</P>
    En cualquier caso, también se pueden utilizar los tags bold (B) e italic (I). 
    <P>Para escribir con una <TT>letra de paso
    constante (estilo teletipo)</TT> se emplea la 
    Tag TeleType</P>
    Para escribir con una letra de paso constante (estilo teletipo) se emplea la Tag TeleType.
    <P>Para que el texto <BLINK>parpadee</BLINK>
    se emplea la TAG Blink.</P>
    Para que el texto parpadee se emplea la Tag Blink. 
    <P>Títulos: <H1>1</H1><H2>2</H2><H3>3</H3> 

    <H4>4</H4><H5>5</H5><H6>6</H6></P>

    Títulos: 123456
    <P>Alineados:</P> 

    <P ALIGN="LEFT">Izquierda</P> 

    <P ALIGN="RIGHT">Derecha</P> 

    <P ALIGN="CENTER">Centrado</P> 

    </P>

    Alineados: 

    Izquierda 

    Derecha
    Centrado
    Otros efectos:  
    <P><U>subrayado</U>  
    <P><STRIKE>tachado</STRIKE>  
    <P><BIG>letra más grande que el estándar</BIG>  
    <P><SMALL>letra más pequeña que el estándar</SMALL>  
    <P>Texto tipo<SUB>subíndice</SUB>  
    <P>Texto tipo<SUP>superíndice</SUP>
    Otros efectos: 

    subrayado 

    tachado  

    letra más grande que el estándar 

    letra más pequeña que el estándar 

    Texto tiposubíndice 

    Texto tiposuperíndice

    Volver al inicio 


    Listas no ordenadas

    Así se escribe: Así se ve: 
    <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>
    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: Así se ve: 
            
    Las listas ordenadas:
    <P>Las listas ordenadas:
    <OL>
    <LI>Van precedidas por números
    <LI>La numeración es automática
    <LI>Son también muy utilizadas
    
    </OL>
    Las listas ordenadas: 
    1. Van precedidas por números 
    2. La numeración es automática 
    3. Son también muy utilizadas 

    Volver al inicio 


    Listas de definiciones:

    Así se escribe: Así se ve: 
            
    <P>Las listas de definiciones:
    
    <DL>
    <DT>Primer término
    <DD>Definición del 1er término
    <DT>Segundo término
    <DD>Definición del 2º término
    </DL>
    Las listas de definiciones: 
    Primer término
    Definición del 1er término 
    Segundo término
    Definición del 2º término 

    Volver al inicio 
    Tablas

    Las tablas son uno de los elementos más 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: Así se ve: 
    <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>
    celda (1,1) celda (1,2)
    celda (2,1) celda (2,2)
     
    <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>
    celda (1,1)
    celda (1,2)
    celda (2,1)
    celda (2,2)
     
     

    Volver al inicio 
    Links

    Los links son palabras diferenciadas en un archivo HTML, y tienen la función de enviar al usuario a algún ordenador remoto, o a algún sitio de la página, que esté señalada por un ancla. Los links forman lo que se llama hipertexto.
    Así se escribe: Así se ve: 
    <P>Este link envía al Web de la Universidad<P>
    <A HREF="http://k05.kn3.net/CDD723241.gif">Al Web</A>
    Este link envía al Web de la Universidad 

    Al Web 

    <P>Este link envía al ancla<P>
    <A HREF="#ancla">Al ancla</A>
    Este link envía; al ancla 

    Al ancla

     

    Volver al inicio 
    Inserción de imágenes

    Un recurso que da mucha vida a una página hecha con HTML es la inserción de elementos gráficos. La forma de insertar una imagen es la siguiente:
    Así se escribe: Así se ve: 
    <IMG SRC="http://cdn2.iconfinder.com/data/icons/minicons/Png/Home.png">
     

    Volver al inicio 
    Imágenes 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: Así se ve: 
    <P><A HREF="url">
    <IMG SRC="http://cdn2.iconfinder.com/data/icons/minicons/Png/Video.png">
    </A>

     

    Volver al inicio 
    Imágenes sensibles

    Imágenes sensibles son un tipo de imágenes las cuales detectan la zona en la que se ha clicado y según 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 según las coordenadas del punto superior izquierdo y el del punto inferior derecho.
    Así se escribe: Así se ve: 
    <P><IMG USEMAP="#mapadirec" 
    SRC="http://cdn2.iconfinder.com/data/icons/minicons/Png/System.png">
    <MAP NAME="mapadirec">
    <AREA COORDS=0,0,47,46 
    HREF="http://cdn2.iconfinder.com/data/icons/minicons/Png/System.png">
    <AREA COORDS=47,0,96,46 HREF="#ancla">
    </MAP>

    Volver al inicio 


    Formularios
    Así se escribe: Así se ve: 
    <FORM>
    Nombre: <INPUT NAME="nombre">
    </FORM>
    Nombre: 
    <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>
    Nombre:  

    boton radio 1 

    boton radio 2 

    checkbox 






    Comentarios hacia esta página:
    Comentado por skf34r-team( genaa0797hotmail.com ), 24-06-2011, 02:57 (UTC):
    che pio podes dejar el html para poder poner un codigo, como el que pusiste en afiliados...

    Comentado por:10-06-2011, 21:23 (UTC)
    nintendopedia
    nintendopedia
    Offline

    Hola, mipio. ¿Podrías poner un código html para hacer un radio o si no el tutorial?

    Saludos!



    Añadir comentario acerca de esta página:
    Su nombre:
    Su dirección de correo electrónico:
    Su mensaje:

    => ¿Desea una página web gratis? Pues, haz clic aquí! <=