Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Etiquetas HTML

    Cargado por

    Gonzalo Delgado Crespo
    9 vistas6 páginas
    El documento describe las principales etiquetas HTML para estructurar y dar formato a páginas web. Algunas etiquetas clave son <html> para definir el documento, <head> para el encabezado, <body> para el cuerpo, <title> para el título, <h1> para encabezados, <p> para párrafos, <img> para imágenes, <a> para hipervínculos, <form> para formularios, <input> para campos de entrada, <select> para menús desplegables, <div> para divisiones y <span>

    Descripción original:

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

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

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    El documento describe las principales etiquetas HTML para estructurar y dar formato a páginas web. Algunas etiquetas clave son <html> para definir el documento, <head> para el encabezado, <body> para el cuerpo, <title> para el título, <h1> para encabezados, <p> para párrafos, <img> para imágenes, <a> para hipervínculos, <form> para formularios, <input> para campos de entrada, <select> para menús desplegables, <div> para divisiones y <span>

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    9 vistas6 páginas

    Etiquetas HTML

    Cargado por

    Gonzalo Delgado Crespo
    El documento describe las principales etiquetas HTML para estructurar y dar formato a páginas web. Algunas etiquetas clave son <html> para definir el documento, <head> para el encabezado, <body> para el cuerpo, <title> para el título, <h1> para encabezados, <p> para párrafos, <img> para imágenes, <a> para hipervínculos, <form> para formularios, <input> para campos de entrada, <select> para menús desplegables, <div> para divisiones y <span>

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 6

    Etiquetas HTML

    DOCUMENTO
    <!DOCTYPE HTML>: definir el tipo de documento
    <html>: código que vamos a usar
    <head>: encabezado del código
    </head>: terminar encabezado
    <title>: nombre documento
    </title>: terminar nombre de documento
    <h1>: encabezado a modo titulo
    1: tamaño del que queremos tener el encabezado (1,2,3,4)
    </h1>: terminar encabezado
    <body>: cuerpo del código
    </body>: terminar cuerpo del código
    <p>: párrafo de texto
    </p>: terminar párrafo de texto
    <br>: pasar a la siguiente línea del párrafo
    <strong>: poner en negrita algo
    </strong>: terminar poner en negrita
    <em>: poner en cursiva algo
    </em>: terminar poner en cursiva algo
    LISTAS
    <ol>Mejores refrescos
    <li>Cocacola</li>
    <li>Pepsi</li>
    <li>Monster energy</li>
    </ol>
    <ol> Lista de lacompra
    <ul> Pan </ul>
    <ul> Leche </ul>
    </ol>
    - <ol> Y </ol> Empezar y terminar lista
    - <li> y </li> Empezar y terminar listas con números
    - <ul> y </ul> Empezar y terminar lista con puntos

    <pre>: texto preformateado, es decir, el texto tal cual


    </pre>: terminar texto preformateado

    IMAGENES
    <img: insertar una imagen
    src= “link”: meter el link de una imagen
    alt = “”: meter descripción de la imagen
    height “número”: altura de la imagen
    width = “numero” : elegir el tamaño de una imagen
    border = “numero” : elegir el borde de una imagen
    >: terminar una imagen

    HIPERVÍNCULOS (Internos)
    <a id="nombre_del_marcador">Texto asociado al marcador</a>
    HIPERVINCULOS (Externos)
    <a href="http://es.wikipedia.org/wiki/Panthera_leo"
    target="blank">pulsa aquí para mas información </a>.
    - <a Iniciar el código
    - href="”  Codigo para el vinculo (Entre comillas el vínulo de la
    pagina)
    - target=”blank”>  Codigo para abrir el vinculo en pestaña nueva
    (si no queremos eso, lo omitimos y ponemos solo el >)
    - TEXTO: ponemos el texto que queremos que sea el hipervínculo
    - </a>  Cerramos línea de código

    TABLAS
    <table border=”2px”> : crear tabla con borde 2
    <!—Aquí ponemos nuestro comentario --> (Hacer un comentario, sin que
    afecte al código
    <table border="2px">
    <tr>
    <td>Campo 1</td>
    <td>Campo 2</td>
    <td>Campo 3</td>
    </tr>
    <tr>
    <td rowspan="2">Campo unificado</td>
    <td>Campo 5</td>
    <td>Campo 6</td>
    </tr>
    <tr>
    <td>Campo 8</td>
    <td>Campo 9</td>
    </tr>

    - Todo lo naranja: Columnas y filas


     <tr> y </tr> Abrir y cerrar columna (como un bloque)
     <td> y </td> Abrir y cerrar fila (Individual, va dentro
    de <tr>)
    - <td rowspan="2">Campo unificado</td> : Unificar celdas de una misma
    columna ( el “2” indica cuantas celdas de la columna queremos unificar
    - <td colspan="2">Campos 4 y 5</td> Unificar fila (el “2” indica cuantas celdas de
    la fila queremos unificar”
     
    FORMULARIOS
    - Para rellenar con texto una casilla:
    <form method="post" action="action.php">
    Ingresa un texto: <input name="ingresatexto" type="text" value="Por
    favor, ingresa aquí" />
    </form>
    - Para rellenar casilla con contraseña
    <form method="post" action="action.php">
    Ingresa tu contraseña: <input name="contrasena" type="password" value="123456" />
    </form>
    - Para Entrada multilínea
    <form method="post" action="action.php">
    Ingresa tus comentarios:<br /><textarea name="comentarios" rows="2"
    cols="30">...Tus comentarios aquí...</textarea>
    </form>
    - Para casillas de verificación
    <form method="get" action="Página web dónde quieras que llegue tu información">
    Selecciona tus intereses:
    <br />
    <input name="cbiOpción1" type="checkbox" />Opción 1
    <br />
    <input name="cbiOpción2" type="checkbox" />Opción 2
    <br />
    <input name="cbiOpción3" type="checkbox" />Opción 3
    </form>
    - Para botones radio
    <form method="get" action="http://aprenderaprogramar.com/action.php">
    Selecciona tu actividad favorita:
    <br />
    <input name="intereses" type="radio" value="rbiopción" />Opcion
    <br />
    <input name="intereses" type="radio" value="rbiopción" />Opcion
    <br />
    <input name="intereses" type="radio" value="rbiopción" checked="checked"
    />Opción
    </form>
    (el checked="checked" es para si queremos que esa casilla esté marcada desde que
    se abra el documento HTML)
    - Para listas de opciones
    OPCIÓN 1 (LISTA DESPLEGABLE)
    <form method="get" action="Página dónde quieres que llegue la información">
    Elije solo una opción, como en los botones radio:
    <select name="entradalista1">
    <optgroup label="Entradas textuales">
    <option>Entrada de línea</option>
    <option selected="selected">Entrada de contraseña</option>
    <option>Entrada multi-línea</option>
    </optgroup>
    <optgroup label="Opciones">
    <option>Casillas de verificación</option>
    <option>Botones radio</option>
    <option>Listas</option>
    </optgroup>
    </select>
    <br />
    </form>
    OPCION 2 (LISTA “NORMAL”)
    <form method="get" action=" Página dónde quieres que llegue la información ">
    <select name="entradalista2[]" multiple="multiple">
    <optgroup label="Entradas textuales">
    <option>Entrada de línea</option>
    <option>Entrada de contraseña</option>
    <option>Entrada multi-línea</option>
    </optgroup>
    <optgroup label="Opciones">
    <option selected="selected">Casillas de verificación</option>
    <option>Botones radio</option>
    <option>Listas</option>
    </optgroup>
    </select>
    </form>
    - PARA BOTONES EN FORMULARIOS
    OPCION 1 (IMAGENES)
    <form method="get" action="Página web">
    <input name="boton1" type="image"
    src="Imagen como boton ">
    OPCION 2 (NORMAL)
    <form method="get" action=" Página dónde quieres que llegue la información ">
    <input type="text" name="texto1" value="Valor por defecto" /><br />
    <input type="checkbox" name="condiciones" checked="checked" />
    Acepto las condiciones<br />
    <input type="reset"
    value="Restablecer todos los campos a su valor predeterminado" />
    </form>
    - PARA SUBIR ARCHIVOS
    <form method="post" action="accion.php" enctype="multipart/form-data">
    Ingresa el archivo:
    <input name="imagen" type="file" />
    </form>

    DIVISIÓN DE APARTADOS EN
    PÁGINA WEB
    <div style="text-align: center; font-size: 60px; border: 1px solid red;">
    Cabecera de la página.
    </div>
    <div style="border: 1px solid green;">
    Cuerpo de la página.
    </div>
    <div style="border: 1px solid blue;">
    Pie de la página
    </div>

    Para cambiar borde y Color del texto en la cabecera


    Para cambiar bordes y color del texto en el cuerpo
    Para cambiar el color en el pie de pagina de la pagina

    Etiqueta SPAN (para poner palabras distintas con colores distintos)


    <span style="color: green;">de</span> la <span style="color: orange;">página</span>.

    También podría gustarte