Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Resumen de Comandos HTML

    Enviado por

    Marco Antonio Damian Laura
    179 visualizações8 páginas

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    179 visualizações8 páginas

    Resumen de Comandos HTML

    Enviado por

    Marco Antonio Damian Laura

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 8

    Recopilado por Katia Montero HTML Bsico

    1
    HTML

    Estructura bsica
    <html>
    <head>
    <title>Ttulo de la web</title>
    </head>
    <body>
    <center>Contenido de la web</center>
    </body>
    </html>

    Etiquetas de control de texto bsicas
    COMANDO FUNCIN
    <Hx>ttulo</Hx>
    <Hx align=center>ttulo</Hx>
    <Hx align=left>ttulo</Hx>
    <Hx align=right>ttulo</Hx>
    Ttulo o x tiene un valor de 1 a 6
    Ttulo centrado
    Ttulo alineado a la izquierda
    Titulo alineado a la derecha
    <center> texto </center>
    Centra el texto que est entre las etiquetas
    <hr>
    Dibuja una lnea horizontal incrustada en el
    documento
    <p> prrafo </p>
    Prrafo (deja una lnea en blanco)
    <p align=right> prrafo </p>
    Prrafo (alineado a la derecha), puede ser, LEFT,
    CENTER, JUSTIFY, RIGHT.
    <br>
    Cambio a la lnea siguiente (sin dejar lnea en blanco)
    <b> y </b>
    Poner el texto en negrita
    <i> y </i>
    Poner el texto en cursiva
    <pre> y </pre>
    Preformatea el texto respetando los espacios y los
    retornos de carro, como una mquina de escribir
    <blockquote> y </blockquote>
    Sangra el documento a ambos lados
    <tt> y </tt>
    Disminuye el tamao del texto
    <sup> y </sup>
    Superndices
    <sub> y </sub>
    Subndices
    <ul> y </ul> ; <li>
    Listas desordenadas (no numeradas con vietas)
    <ol> y </ol> ;<li>
    Listas ordenadas (numeradas)
    <dl> y </dl>,;<dt> ;<dd>
    Listas de definicin

    Vamos a poner vietas y en negrita
    <HTML><HEAD></HEAD>
    <BODY>
    Paises del mundo
    <UL> <LI>Francia</LI>
    <LI>Espaa</LI>
    <LI>Inglaterra</LI>
    </UL>
    Paises del mundo
    <OL> <LI>Francia</LI>
    Recopilado por Katia Montero HTML Bsico
    2
    <LI>Espaa</LI>
    <LI>Inglaterra</LI>
    </OL></BODY>
    Enlaces e imgenes
    <a href="#marca"> YYY </a>
    <a name="marca"> </a>
    Enlaces en la misma pgina
    <a href="pagina.html"> YYY </a>
    Enlaces con otra pgina nuestra
    <a href="pagina.html#marca"> YYY
    </a>
    Enlaces con una marca de otra pagina nuestra
    <a href="subdir/pagina.html"> YYY
    </a>
    Enlaces con una pagina en otro directorio posterior
    <a href="../pagina.html"> YYY </a>
    Enlaces con una pagina en otro directorio superior
    <a
    href="http://www.paginaweb.com">
    YYY </a>
    Enlaces con una pgina fuera de nuestro sistema
    <img src="imagen.gif"
    alt="descripcin">
    Insertar una imagen en la pgina
    <img src="imagen.gif"
    align=top>texto
    Inserta la imagen alineando arriba el texto
    <img src="imagen.gif"
    align=middle> texto
    Inserta la imagen alineando en el centro el texto
    <img src="imagen.gif"
    align=bottom> texto
    Inserta la imagen alineando abajo el texto
    <img src="imagen.gif" align=left>
    <img src="imagen.gif" align=right>
    Alinea la imagen a la izquierda o a la derecha
    permitiendo que el texto la rodee.
    <img src="imagen.gif" width=120
    height=94>
    Da al navegador la informacin sobre el tamao de la
    imagen, pudiendo variar su tamao.
    <a href="pagina.html"> <img
    src="imagen2.gif"> </a>
    Imagen que enlaza con otra pgina (incluye marco)
    <a href="pagina.html"> <img
    src="imagen.gif" border=0> </a>
    Imagen que enlaza con otra pgina (sin marco)
    <a href="imagen.gif"> <img
    src="imagen2.gif" align=middle></a>
    Imagen que enlaza con otra imagen
    <a href="imagen.gif"> ejemplo</a>
    Texto que enlaza con imagen
    <a href="imagen.gif" target
    =_blank> ejemplo</a>
    Texto que enlaza con imagen en una pgina nueva

    <HTML>
    <HEAD><TITLE>Pagina de enlaces</TITLE></HEAD>
    <BODY>
    <CENTER>
    <!-- Comentario Hipervnculo>
    <P><A HREF = "http://www.yahoo.com">Yahoo</A></P>
    <P><A HREF = "http://www.altavista.com">AltaVista</A></P>
    <P><A HREF = "pagina1.html">Pagina Web Personal</A></P>
    </CENTER>
    </BODY>
    </HTML>
    Caracteres especiales
    &lt; para < &aacute; para la &Aacute; para la
    &gt; para > &eacute; para la &Eacute; para la
    &amp; para & &iacute; para la &Iacute; para la
    &quot; para " &oacute; para la &Oacute; para la
    &#191; para &uacute; para la &Uacute; para la
    Recopilado por Katia Montero HTML Bsico
    3
    &#161; para &uuml; para la &ntilde; para la
    &nbsp; para &Uuml; para la &Ntilde; para la

    Etiquetas no estndar (algunas no funcionan en todos lo navegadores)
    <hr width=75%>
    <hr width=300>
    Lnea horizontal que no ocupa todo el ancho de
    pgina (se puede indicar en % o en pixels)
    <hr width=50% align=left>
    <hr width=350 align=right>
    Adems se puede alinear a la izquierda o derecha
    <hr size=20>
    Tambin podemos variar su espesor
    <hr noshade>
    Para que no quede embutida en el fondo
    <basefont size=5>
    Se pone despus de BODY y afecta a todo el
    documento (menos al texto con tamao propio)
    <font size=5> texto </font>
    Le da al texto el tamao 5 (SIZE va del 1 al 7)
    <font size=+1> texto </font>
    Aumenta o disminuye el tamao del texto respecto al
    valor por defecto (el 3). (SIZE =+1 => SIZE=4)
    <font color="#FF0000"> texto </font>
    Cambia slo el texto entre estas etiquetas
    <font face="Verdana"> texto </font>
    Le ponemos el tipo de fuente que queremos, pero
    debe estar instalada y con el mismo nombre.
    <font face="Impact, Arial"> texto
    </font>
    Podemos indicarle varios tipos de fuente por si
    acaso.
    <body bgcolor="#XXYYZZ">
    Para el color de fondo uniforme sustituimos las xx
    (rojo); yy (verde); zz (azul) por cifras hexadecimales
    <body bgcolor="#XXYYZZ"
    text="#XXYYZZ" link="#XXYYZZ"
    vlink="#XXYYZZ"
    alink="#XXYYZZ">

    Para cambiar el color del texto (TEXT), colore de los
    enlaces (LINK) los enlaces visitados (VLINK) y los
    enlaces en el momento de pulsarlos (ALINK).
    <body background="imagen.gif">
    Pone una imagen de fondo en forma de tapiz (pueden
    ser GIF, JPG, PNG, JPEG)
    <br clear=left>
    <br clear=right>
    <br clear=all>
    Busca el primer margen libre a la izquierda, a la
    derecha o a ambos lados dejando de bordear la
    imagen.

    Tablas
    <table> </table>
    Son las etiquetas que definen el principio y fin de la
    tabla
    <table border=numero> </table>
    dem a la anterior pero aade el borde (cambiando
    el numero variamos el aspecto)
    <tr> </tr>
    Para definir cada fila (se pone tantas como filas)
    <td> </td>
    Para cada celda de cada fila (se ponen tantas como
    celdas (columnas))
    <caption> </caption>
    Para poner titulo a la tabla
    <th> </th>
    Celdas cabecera
    <td align=center> </td>
    <td align=left> </td>
    Posicionar en el centro, a la izquierda o la derecha
    Recopilado por Katia Montero HTML Bsico
    4
    <td align=right> </td>
    <td valign=top> </td>
    <td valign=bottom> </td>
    <td valign=middle> </td>
    Posicionar arriba o abajo (por defecto es en el
    centro)
    <table width=60%>
    <table height=200>
    Forzar la tabla a que ocupe un tamao
    <td colspan=2> </td>
    Para unir celdas (columnas)
    <td rowspan=2>
    Para unir filas, aadir huecos
    <table bgcolor="#00ff00">
    Da color a la tabla
    <td bgcolor="#00ff00">
    Da color a una celda
    <table cellspacing=20>
    Separacin entre celdas
    <table cellpadding=20>
    Separacin entre texto y celdas

    <TABLE bgcolor="yellow border=1 >
    <TR>
    <TD> fila 1 columna 1</TD>
    <TD> fila 1 columna 2</TD>
    </TR>
    <TR>
    <TD> fila 2 columna 1</TD>
    <TD> fila 2 columna 2 </TD>
    </TR>
    </TABLE>


    Insercin de sonidos

    <BGSOUND SRC="imagine.mid"
    LOOP=INFINITE>
    Se recomienda solo archivos .mid (MIDI de
    menos de 60KB mejor. Tambien se pueden
    meter WAVE y MP3). OJO el archivo debe
    estar en el mismo sitio que la pgina, en caso
    de no ser as hay que especificar la ruta
    src= ruta\nombre del archivo de sonido
    Indica la ubicacin y/o el nombre del
    archivo de sonido.

    loop= valor
    Indica la cantidad de repeticiones o infinite
    para repetir indefinidamente
    <img dynsrc="XXXXXXXXXXX" width=320
    height=265 border=1 start=mouseover
    alt="Videos">

    <IMG start=mouseover alt="Videos"
    dynsrc="XXXXXXXXXXXXXXXXX" width=320
    height=180 border=1>

    .


    dynsrc = ruta\nombre del archivo de video
    Indica la ubicacin y/o el nombre del
    archivo de video a mostrar.
    Donde las XXX son la fuente (url) del video y
    donde dice Videos es lo que va a salir en el
    recuedro amarillo que aparece cuando ponemos
    el mouse sobre el video

    fila 1 columna 1

    Fila 1 columna 2
    fila 2 columna 1

    fila 2 columna 2

    Recopilado por Katia Montero HTML Bsico
    5
    <MARQUEE parmetros>Texto o
    imagen que se desplaza</MARQUEE>
    bgcolor = "cdigo de color"
    Indica el color del fondo de la marquesina.
    direction = left / right / down / up
    Indica hacia qu lugar se desplaza el texto
    o la imagen, hacia la izquierda (left), hacia
    la derecha (right), hacia abajo (down) o
    hacia arriba (up).
    loop = valor
    Indica el nmero de veces que se
    desplazar el texto o la imagen por la
    marquesina. Si se indica infinite, se
    desplazar indefinidamente.
    behavior = comportamiento
    El tipo de comportamiento que queremos
    que tenga el texto o la imagen dentro de la
    marquesina, scroll" es el valor por
    defecto, aparece por un lado y desaparece
    por el contrario, "slide" aparece por un
    lado y cuando llega al contrario se queda
    all y "alternate", se desplaza de un lado
    hacia el otro alternativamente.
    center><embed
    src="archivo_pelicula"></center>
    Crea un reproductor multimedia parecido a
    windows media player.

    Frames (Divisin de la pantalla en ventanas)
    <html>
    <head>
    </head>
    <frameset cols=20%, 80%>
    <frame src=indice.html>
    <frame src=pagina_uno.html>
    </frameset >
    </html>
    Se sita en lugar del body y sirve para dividir la
    pantalla en columnas y filas, donde el contenido
    son pginas web.
    <frameset cols=20%, 80%>
    <frame src=indice.html
    name="indice">
    <frame src=pagina_uno.html
    name="contenido">
    </frameset >
    Divide la pantalla en dos columnas. La primera
    tiene un ancho del 20% y la segunda del 80%. En
    la primera se visualiza en contenido del fichero
    indice.html y se llama indice. En la segunda se
    visualiza el contenido del fichero pagina_uno.html
    y su nombre es contenido
    <frameset cols=20%,*, 20%>
    <frameset rows=200, *>
    <frameset frameborder=0
    framespacing=0 border=0>

    Algunos atributos de la etiqueta frameset son:
    cols (columnas), rows (filas), frameborder y
    border (borde de los frames), framespacing
    (espacio entre frames)
    <frame src=indice.html
    name="indice">
    <frame src=indice.html
    marginwidth="2" marginheight="2"
    scrolling =no/yes/auto noresize
    Algunos atributos de la etiqueta frame son: src
    (contenido que queremos cargar en el frame),
    name (nombre del frame), marginwidth (ancho del
    margen), marginheight (alto del margen), scrolling
    Recopilado por Katia Montero HTML Bsico
    6
    frameborder=no>
    (barra deslizadora), noresize (tamao no
    modificable), frameborder (borde del frame)
    <a href=pagina_uno.html target=
    "contenido"></a>
    <a href=pagina_uno.html target=
    "_blank"></a>
    <a href=pagina_uno.html target=
    "_self"></a>
    <a href=pagina_uno.html target=
    "_top"></a>
    Para conseguir que el contenido de una pgina se
    cargue en el frame adecuado utilizamos el
    parmetro target en el enlace. Puede tomar varios
    valores:
    nombre del frame (contenido, indice, ...)
    _blank (en un navegador nuevo)
    _self (en el mismo frame)
    _top (elimina todos los frames y se carga
    ah la pgina)
    <html>
    <head>
    </head>
    <frameset rows=15%, *>
    <frame src=superior.html>
    <frameset cols=20%, *>
    <frame src=indice.html>
    <frame src=pagina_uno.html>
    </frameset >
    </frameset >
    </html>
    Los frames pueden anidarse, como indica el
    ejemplo. La primera fila ocupa el 15% con el
    contenido de superior.html, el resto esta dividido
    en dos columnas, la izquierda del 20% con
    indice.html y la de la derecha con pagina_uno.html

    Inserccin de pelculas Flash y applets de java
    <applet code=sinetext.class
    width=500 height=100>
    <param name=text value="curso
    para realizar una web!">
    </applet>
    Inserta un applet de java llamado sinetext.class
    con tamao 500 x 100. Le pasa al applet el
    parmetro llamado text con el valor curso para
    realizar una web!.
    < embed src="boton.swf" width=100
    height=36 type="application/x-
    shockwave-flash">
    </embed>
    Inserta una pelcula flash. El nombre es
    boton.swf, y las dimensiones 100x36
    < embed src="boton.swf" width=100
    height=36 type="application/x-
    shockwave-flash" quality=high
    bgcolor=#ffcc99 scale="exactfit"
    border="0" align="center">
    </embed>
    Insercin de pelcula flash con varios parmetros,
    quality, bgcolor, scale, border, align.
    pluginspage=
    "http://www.macromedia.com/shockwave/
    download/index.cgi?
    P1_prod_version=shockwaveflash"
    Parmetro opcional para que busque el plugin de
    flash si el navegador no lo tiene instalado. (ojo! el
    enlace est todo seguido sin espacios)









    Recopilado por Katia Montero HTML Bsico
    7
    MARCOS



    index.html

    <<html >
    <head>
    <title>Pgina de index</title>
    </head>

    <frameset rows="131,*" cols="*" frameborder="no" border="0" framespacing="0">
    <frame src="superior.html" name="marcosuperior" scrolling="No" noresize="noresize" id="marcosuperior">
    <frameset rows="*" cols="110,*" framespacing="0" frameborder="no" border="0">
    <frame src="izquierdo.html" name="marcoizquierdo" scrolling="No" noresize="noresize"
    id="marcoizquierdo">
    <frame src="principal.html" name="marcoprincipal" id="marcoprincipal" >
    </frameset>
    </frameset>
    </html>

    izquierdo.html

    <html >
    <head>
    <title>Pgina izquierdoo</title>
    <style type="text/css">
    <!--
    body {
    background-color: #CCFFFF;
    }
    -->
    </style></head>
    <body>
    <p><strong>CONTENIDO</strong></p>
    <p><strong>IZQUIERDO</strong></p>
    </body>
    </html>

    principal.html
    <html >
    <head>
    Recopilado por Katia Montero HTML Bsico
    8
    <title>Pgina principal</title>
    <style type="text/css">
    <!--
    body {
    background-color: #FFFFCC;
    }
    -->
    </style></head>
    <body>
    <strong>CONTENIDO PRINCIPAL</strong>
    </body>
    </html>

    superior.html

    <html >
    <head>
    <title>Pgina superior</title>
    <style type="text/css">
    <!--
    body {
    background-color: #FFCCFF;
    }
    -->
    </style></head>

    <body>
    <strong>CONTENIDO SUPERIOR</strong>
    </body>
    </html>

    Você também pode gostar