Scribd Logo
Upload

Welcome to Scribd!

  • HTML Instantáneo

    Uploaded by

    jolucomo80
    11 views8 pages
    Se trata de un resumen, con ejemplos, sobre las etiquetas más comunes de HTML. Permite crear una web con código básico en HTML y en muy poco tiempo.

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Se trata de un resumen, con ejemplos, sobre las etiquetas más comunes de HTML. Permite crear una web con código básico en HTML y en muy poco tiempo.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    11 views8 pages

    HTML Instantáneo

    Uploaded by

    jolucomo80
    Se trata de un resumen, con ejemplos, sobre las etiquetas más comunes de HTML. Permite crear una web con código básico en HTML y en muy poco tiempo.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 8

    HTML instantneo

    1. Estructura general:

    <html>
    <head>

    informacin sobre la pgina. No se muestra

    <title> DWEC </title>


    </head>
    <body>
    </body>
    </html>

    2. Etiquetas de texto:

    <H1></H1), <H2></H2>, <H6></H6> tamaos de texto


    <P></P> Prrafo
    <BR> Nueva lnea
    <B></B> Negrita
    <I></I> Cursiva
    <ADDRESS></ADDRESS> Cursiva pequea

    3. Colores:

    RGB en hexadecimal. #------ o el nombre del color en ingls para los colores ms
    comunes (hasta 100 colores).
    En BODY:
    BGCOLOR Color de fondo.
    TEXT Color de texto
    En cualquier otro sitio:
    <TEXT COLOR=#------> A partir de este momento el resto de texto de la
    web tendr este nuevo color.

    4. Listas y lneas:

    4.1.

    Listas:

    Cada elemento de la lista ir entre <LI></LI>


    <UL></UL> Lista no ordenada o de boliches. Tipo de boliche con <TYPE=SQUARE
    DISK - ROUND>
    <OL></OL> Lista no ordenada o numerada.

    4.2.

    Lneas:

    <HR> Tiene las propiedades: SIZE (grosor), WIDTH (ancho en pxeles o % del ancho
    de la ventana del navegador) Y NOSHADE (sin sombra)

    5. Imgenes:

    <IMG SRC=NOMBRE_ARCHIVO>
    Propiedades:

    ALIGN=left/center/right

    5.1.

    ALT=DESCRIPCIN Para cuando la imagen no se pueda mostrar.


    Ponerlo es buena prctica.
    WIDTH / HEIGT=<NMERO> Ancho y alto en pxeles.

    Imagen de fondo:

    <BACKGROUND=NOMBRE_ARCHIVO> Va dentro de la etiqueta BODY.

    6. Enlaces:

    <A HREF=direccin>TEXTO DEL ENLACE </A> direccin hace referencia a la


    direccin de la pgina o al archivo que queremos referenciar.
    Si delante de la direccin se inserta el texto mailto:direccin de correo abrir el
    cliente de correo con el destinatario ya puesto.

    6.1.

    Enlaces dentro de una pgina:

    1 Definir con nombres las partes de la pgina web: <A NAME=NOMBRE>TTULO


    DE LA SECCIN. SE PUEDE DEJAR EN BLANCO</A>
    2 <A HREF=#NOMBRE>IR A ESTA SECCIN</A>

    7. Tablas:

    <TABLE>
    <TR>
    <TD>FILA 1, COLUMNA 1</TD>
    <TD>FILA 1, COLUMNA 2</TD>

    OTRAS COLUMNAS
    </TR>
    <TR>
    <TD>FILA 2, COLUMNA 1</TD>
    <TD>FILA 2, COLUMNA 2</TD>
    OTRAS COLUMNAS
    </TR>
    OTRAS FILAS
    </TABLE>
    Algunas propiedades: BORDER, CELLSPACING, WIDTH, BGCOLOR,

    EJERCICIO: Crear una tabla de 2x3 cuyo contenido sea una imagen en cada celda.
    Nota: Puedes centrar la tabla si antes y al final de la etiqueta <TABLE> insertas
    <CENTER></CENTER>

    8. Formularios:

    Muy importantes en JavaScript


    <FORM> </FORM>
    Los datos se recogen principalmente con la etiqueta <INPUT>. Los diferentes tipos de
    entrada se recogern con la propiedad TYPE=text / button /,
    Ejemplo:
    <form method=post action=mailto:direccion@servidor.com>
    <p>Escribe tu nombre: <input type=text name=lector>
    <p>Tu direccin completa:
    <br>
    <textarea name=direccin rows=4 cols=40></textarea>

    <p><input type=button value=Aceptar>

    <p><input type=submit value=Enviar formulario>


    <input type=reset value=Borrar formulario>
    </form>

    Respuesta por correo electrnico:

    Se puede configurar el formulario para que la respuesta de los lectores se realice


    mediante correo electrnico.
    Propiedades del FORM:
    METHOD=post
    ACTION=mailto:tu_direccin_email

    NOTA: Necesitaremos un botn para enviar el formulario:


    <input type=submit value=Enviar formulario>
    NOTA: Podemos borrar el formulario con el valor reset
    <input type=reset value=Borrar formulario>

    EJERCICIO: Comprobar los distintos valores que puede tener la etiqueta type.

    9. Listas desplegables:

    <SELECT></SELECT> Necesita la propiedad NAME para crear la variable.


    <OPTION></OPTION> Crea un elemento de la lista. Necesita la propiedad VALUE
    para crear la variable.

    Ejemplo:
    <select name=Artculo>
    <option value=paleta>Palas de playa</option>
    <option value=cubo>Cubo de arena</option>
    </select>

    10.

    Casillas de activacin:

    Deben incluir la propiedad NAME.

    <br><input type=checkbox name=aventura>Deportes de aventura.


    <br><input type=checkbox name=cine>Ir al cine y al teatro.

    Botones de accin: Deben incluir la propiedad NAME con el mismo valor y, adems, la
    propiedad VALUE que crear la variable con el valor seleccionado.

    <br><input type=radio name=info value=si CHECKED>S, por favor.


    <br><input type=radio name=info value=no>No, gracias.

    11.

    Marcos:

    Distribuyen la informacin. Se necesitan dos tipos de archivos: uno con la informacin


    de la estructura de los marcos, y otro que contenga la informacin que contendr cada
    marco. Una pgina se puede dividir en marcos horizontales o verticales, pero no ambos.
    Un marco puede contener varios marcos.

    <FRAMESET ROWS / COLS= VALOR, VALOR, > Divide la ventana en filas o


    columnas. SUSTITUYE A LA ETIQUETA <BODY> en el domento HTML.

    Tanto ROWS como COLS se puede especificar en pxeles o % del tamao de la ventana.
    El valor * indicar el valor sobrante.

    Ejemplo: <FRAMESET ROWS=100,25%,*>


    Crea tres marcos horizontales. Uno de 100 pxeles de ancho, otro del 25% del tamao de
    la ventana y un ltimo con el resto del tamao de la ventana.

    <FRAME SRC= NAME=> Especifica el documento que se mostrar en el marco y


    establece el nombre del marco.
    Propiedades.
    NORESIZE: Evita que el lector pueda variar las proporciones del marco.
    SCROLLING=yes/no/auto: Opciones para mostrar las barras de
    desplazamiento.

    11.1. Contenido de marcos:


    Cuando trabajamos con marcos podemos usar enlaces cuyo contenido se muestre en
    otro marco dentro de nuestra propia pgina (en otro marco distinto) y as no tener la
    necesidad de salir de nuestra pgina.

    <A HREF=direccin TARGET=nombre_marco> Con TARGET seleccionamos el


    marco de destino.

    Ejercicio: Crea una pgina con la siguiente estructura:

    Logo empresa

    Enlace1
    Enlace2

    Informacin.

    Pie de pgina

    Prueba:
    <frameset rows=60,*>
    <frame src=logo.html name=superior noresize scrolling=no>
    <frameset cols=150,*>
    <frame src=navega.html name=izquierda noresize>
    <frame src=info.html name=derecha scrolling=auto>
    </frameset>
    </frameset>

    You might also like