Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 13 vistas

    Resumen Esquema HTML

    Cargado por

    slo643892
    El documento describe los conceptos básicos de HTML como etiquetas, estructura de documento, cabecera, cuerpo, lista, tabla, enlaces e hipervínculos.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd

    Resumen Esquema HTML

    Cargado por

    slo643892
    13 vistas16 páginas
    El documento describe los conceptos básicos de HTML como etiquetas, estructura de documento, cabecera, cuerpo, lista, tabla, enlaces e hipervínculos.

    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?

    El documento describe los conceptos básicos de HTML como etiquetas, estructura de documento, cabecera, cuerpo, lista, tabla, enlaces e hipervínculos.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    13 vistas16 páginas

    Resumen Esquema HTML

    Cargado por

    slo643892
    El documento describe los conceptos básicos de HTML como etiquetas, estructura de documento, cabecera, cuerpo, lista, tabla, enlaces e hipervínculos.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    de 16

    Resumen Esquema HTML

    <html>
    <head>
    <title>Título de mi página</title>
    </head>
    <body>
    <h1>¡Hola, mundo!</h1>
    <p>Este es un ejemplo de una página HTML básica.</p>
    </body>
    </html>

    Apartado 3:

     Etiquetas de Solo Apertura: <etiqueta>


     Etiquetas de Apertura y Cierre: <etiqueta>...</etiqueta>
     Etiquetas de Cierre Opcional:. Ejemplo: <b>Texto en negrita</b>, <b><i>Texto
    en negrita y cursiva</i></b>.
     Atributos: Los atributos se utilizan para definir propiedades de un elemento.
    Ejemplo: <etiqueta atributo="valor">, como <font color="red">Texto en
    rojo</font>.
    Apartado 4:

     Comentarios en HTML se crean usando <!-- para iniciar un comentario y -->


    para finalizarlo.
     Los caracteres de inicio del comentario <!-- deben estar juntos, pero se pueden
    incluir espacios entre los guiones -- y el signo mayor >.
     Los comentarios pueden abarcar varias líneas, pero se recomienda que sean
    breves y concisos.
    Apartado 5:

     En HTML, los espacios en blanco se ignoran y se consideran como un solo


    espacio.
     La indentación se utiliza para mejorar la legibilidad del código HTML.
     Para forzar un espacio en blanco, se usa &nbsp;.
     Útil en la creación de tablas y otros casos donde se necesita un espacio en
    blanco específico.
    Apartado 6:
    < Marca el comienzo de una etiqueta

    > Marca el final de una etiqueta

    & Marca el comienzo de una referencia o entidad

    Estos caracteres, en caso de utilizarlos, se sustituyen por el nombre de la entidad que los
    representa en el repertorio ISO latín 1 (ISO 8859-1) ¡ ¡ ¿ &queso; “ " < < > > & &

    ñ ñ á á é é í í ó ó ú ú son caracteres de letras acentuadas

    Apartado 7:

    Estructura Básica de un Documento HTML:

    <!DOCTYPE>: Define la versión de HTML utilizada en el documento.

    <html> y </html>: Marcan el inicio y el final del documento HTML.

    <head> y </head>: Contienen elementos de la cabecera, como el título y las


    metainformaciones.

    <body> y </body>: Encierran el contenido principal del documento.

    Cabecera (<head>):

    <title>: Define el título del documento que se muestra en la barra del navegador.

    <meta>: Permite agregar metainformación, como palabras clave y descripción.

    <link>: Se utiliza para vincular hojas de estilo externas al documento HTML.

    <script>: Permite agregar scripts, como JavaScript, al documento.

    Cuerpo (<body>):

    bgcolor: Define el color de fondo de la página, por ejemplo, <body bgcolor="color">.

    background: Establece una imagen de fondo para la página, <body background="imagen.jpg">.

    text: Define el color del texto en la página, <body text="color">.

    link: Especifica el color del texto de los enlaces, <body link="color">.

    vlink: Define el color del texto de los enlaces visitados, <body vlink="color">.

    Black = ”#000000” White= ”#FFFFFF” Gray = “#808080” Red = ”#FF0000” Marron = “#800000”
    Yellow = “FFFF00” Green = ”#008000” Purple = “#800080” Blue = ”#0000FF”

    Apartado 8:
    Espacios y Saltos de Línea:

    <br>: Indica un cambio de línea forzado, insertando un salto de línea.

    <br clear="left">: Busca el primer margen libre a la izquierda antes de cambiar de línea.

    <br clear="right">: Busca el primer margen libre a la derecha antes de cambiar de línea.

    <br clear="all">: Busca el primer margen libre a ambos lados antes de cambiar de línea.

    Línea Horizontal:

    <hr>: Dibuja una línea horizontal en el documento.

    <hr width="valor">: Define el ancho de la línea en puntos o porcentaje.

    <hr align="alineación">: Especifica la alineación de la línea (left, right, center).

    <hr size="valor">: Controla el grosor de la línea en puntos o porcentaje.

    <hr noshade>: Elimina el efecto tridimensional de la línea.

    Centrar Texto:

    <center> y </center>: Centra el texto contenido entre estas etiquetas en la página.

    Etiquetas para Resaltado de Caracteres:

    Estas etiquetas se utilizan para aplicar distintos tipos de énfasis y estilos al texto.

    Ejemplos:

    <b>: Texto en negrita.

    <i>: Texto en cursiva.

    <tt>: Texto con estilo de máquina de escribir.

    <u>: Texto subrayado.

    <big>: Aumenta el tamaño de la fuente.

    <small>: Disminuye el tamaño de la fuente.

    Citas y Bloques de Citas:

    <blockquote> y </blockquote>: Define una cita larga con formato especial.

    <q> y </q>: Define una cita corta con formato especial.

    Caracteres Especiales:
    Las etiquetas <sup> y <sub> se utilizan para crear superíndices y subíndices.

    Ejemplos:

    <sup>: Superíndice.

    <sub>: Subíndice.

    Apartado 9: elementos generales del lenguaje

     Cambio de línea <br>

    Para forzar a la ruptura de una línea de texto independientemente del formato

    en que se esté trabajando.

    o <br clear=left> Busca el primer margen libre a la izquierda.

    o <br clear=right> Busca el primer margen libre a la derecha.

    o <br clear=all> Busca el primer margen libre a ambos lados.

     Línea horizontal <hr>

    Dibuja una línea horizontal <hr width= align= size= >

    Centrar un texto <center>

    Centra el texto en la página

    <center>texto</center>

     Etiquetas para el resaltado de caracteres

    Todas las etiquetas tienen el mismo formato:

    <etiqueta>texto</etiqueta>

    <b> Letra en negrita

    <i> Letra cursiva

    <tt> Letra de máquina de

    escribir

    <u> Letra subrayada

    <big> Aumenta el tamaño de la

    fuente

    <small> Disminuye el tamaño de la

    fuente

    Apartado 10: cabecera


    <hnúmero_nivel1> </hnúmero_nivel1>

    Existen 6 niveles de cabeceras:

    <h1>cabecera de nivel 1</h1>

    <h6>cabecera de nivel 6</h6>

    Apartado 11: inserción de textos

     Creación de párrafos <p>

    La inserción de párrafos se realiza mediante la utilización de la etiqueta:

    <p>texto del párrafo</p>

    Podemos modificar la justificación del texto mediante el atributo align, que

    puede tomar los valores left, right, justify o center.

    Tipo de fuente se incluye entre

    <font face=”tipo de letra”

    …….

    </font>

     Color de la fuente

    <font color=”tipo de color”

    …….

    </font>

     Tamaño de la fuente

    <font size=”tamaño”

    …….

    </font>

    Tema 2

    Cada uno de los elementos de una lista ha de insertarse entre las etiquetas

    <li> y </li> (list item).

    • Por ejemplo, para insertar en una lista los siguientes elementos:

     DAI

     ASI

     ESI
    • Habría que escribir:

    <li>DAI</li>

    <li>ASI</li>

    <li>ESI</li>

    o Para que una lista sea ordenada, sus elementos deberán encontrarse entre

    las etiquetas <ol> y </ol>.

    i. DAI

    ii. ASI

    iii. ESI

    Habría que escribir:

    <ol type="i">

    <li>DAI</li>

    <li>ASI</li>

    <li>ESI</li>

    </ol>

    Lista de tablas:

    <html>

    <head>

    <title>Lista de Frutas</title>

    </head>

    <body>

    <h1>Lista de Frutas</h1>

    <table border="1">

    <tr>

    <th>Nombre</th>

    <th>Color</th>

    <th>Sabor</th>

    </tr>
    <tr>

    <td>Manzana</td>

    <td>Rojo</td>

    <td>Dulce</td>

    </tr>

    <tr>

    <td>Plátano</td>

    <td>Amarillo</td>

    <td>Dulce</td>

    </tr>

    <tr>

    <td>Naranja</td>

    <td>Naranja</td>

    <td>Ácido</td>

    </tr>

    <tr>

    <td>Uva</td>

    <td>Morado</td>

    <td>Dulce</td>

    </tr>

    </table>

    </body>

    </html>

    Tabla de celdas

    <html>

    <head>

    <title>Tabla de 4x4</title>

    </head>

    <body>
    <h1>Tabla de 4x4</h1>

    <table border="1">

    <tr>

    <td>Celda 1,1</td>

    <td>Celda 1,2</td>

    <td>Celda 1,3</td>

    <td>Celda 1,4</td>

    </tr>

    <tr>

    <td>Celda 2,1</td>

    <td>Celda 2,2</td>

    <td>Celda 2,3</td>

    <td>Celda 2,4</td>

    </tr>

    <tr>

    <td>Celda 3,1</td>

    <td>Celda 3,2</td>

    <td>Celda 3,3</td>

    <td>Celda 3,4</td>

    </tr>

    <tr>

    <td>Celda 4,1</td>

    <td>Celda 4,2</td>

    <td>Celda 4,3</td>

    <td>Celda 4,4</td>

    </tr>

    </table>

    </body>
    </html>

    Lista multinivel

    <html>

    <head>

    <title>Lista Multinivel en HTML</title>

    </head>

    <body>

    <h1>Lista Multinivel</h1>

    <ul>

    <li>Elemento 1</li>

    <li>Elemento 2

    <ul>

    <li>Subelemento 2.1</li>

    <li>Subelemento 2.2

    <ul>

    <li>Subsubelemento 2.2.1</li>

    <li>Subsubelemento 2.2.2</li>

    </ul>

    </li>

    <li>Subelemento 2.3</li>

    </ul>

    </li>

    <li>Elemento 3</li>

    </ul>

    </body>

    </html>
    HTML 4

    4.1. URL (Uniform Resource Locator):

    Una URL es la dirección de una página web y generalmente se compone de tres partes: el
    protocolo (por ejemplo, "http://"), la dirección del servidor (por ejemplo, "www.boe.es"), y la
    página dentro de la estructura (por ejemplo, "/pub/index.html").

    Las URLs pueden tener varios formatos, como nombre de página, ruta/nombre de página,
    servidor/ruta/página, o protocolo://servidor/ruta/página.

    4.2. Hipervínculo:

    Los hipervínculos se crean mediante las etiquetas <a> y </a>.

    El atributo href se utiliza para especificar la dirección a la que el enlace llevará al usuario.

    Pueden ser enlaces absolutos (a ubicaciones externas) o enlaces relativos (a documentos


    dentro del mismo sitio).

    El atributo target determina en qué ventana se abrirá la página vinculada (por ejemplo, _blank
    para una nueva ventana).

    4.3. Puntos de Fijación (Anclas):

    Se crean mediante la etiqueta <a> con un atributo name que toma un valor único.

    Los enlaces a anclas pueden ser creados usando el atributo href, por ejemplo, <a
    href="#miancla">Enlace al ancla</a>.

    4.4. Vínculo a Ficheros:

    Los enlaces pueden apuntar a diferentes tipos de archivos, no solo a páginas web, como
    documentos de Word, archivos PDF, hojas de Excel, entre otros.

    Al hacer clic en estos enlaces, el navegador puede abrir el archivo directamente o pedir al
    usuario que lo descargue.

    4.5. Resumen:

    Los enlaces a otras páginas web se crean con <a href="url">Texto a mostrar</a>.

    Los puntos de fijación en una página se crean con <a name="n"></a>.

    Puedes enlazar a un punto de fijación en tu propia página con <a


    href="#nombremarcador">Texto a mostrar</a>.

    También puedes enlazar a un punto de fijación en otra página con <a


    href="url#nombremarcador">Texto a mostrar</a>.

    Los enlaces a direcciones de correo electrónico se crean con <a


    href="mailto:[email protected]">Texto a mostrar</a>.

    Puedes añadir un texto de ayuda a un hipervínculo con el atributo title


    5.1.1.- INSERTAR UNA IMAGEN DE FONDO.

    Para insertar una imagen de fondo, debemos añadir el parámetro background a la etiqueta

    body. Su formato sería:

    <body background=”ruta/nombre_archivo”>

    5.1.2.- INSERTAR UNA IMAGEN EN EL DOCUMENTO.

    Para insertar una imagen en un documento HTML se utiliza la etiqueta <img>. De forma

    que la imagen que deseemos mostrar en nuestra página, se vincula a través del parámetro

    src.

    Su formato sería:

    <img src=”ruta/nombre_de_archivo”>

    Etiqueta Atributo Valor Significado

    img src URL Indica la URL

    alt Texto Define un texto alternativo por si no se

    encuentra la imagen

    align top, middle,

    bottom, left, right,

    center

    Alinea la imagen respecto al texto, tanto en

    sentido horizontal (left, right y center) como

    en sentido vertical (top, middle y bottom)

    border número Pone un borde o marco a la imagen.

    Se expresa en píxeles o porcentaje

    height número % Especifica la altura que debe tener la imagen.

    Se expresa en píxeles o porcentaje.

    width número % Especifica el ancho que debe tener la imagen.

    Se expresa en píxeles o porcentaje.

    hspace número Especifica en píxeles la separación horizontal

    entre el texto y la imagen.

    vspace número Especifica en píxeles la separación vertical


    entre el texto y la imagen.

    longdesc URL Especifica la url desde la que procede la

    imagen, o donde pretendemos enlazarla más

    adelante.

    Ejemplo:

    <html>

    <head>

    </head>

    <body>

    <!--muestra la imagen anillo.gif-->

    <img src="imagenes/anillo.gif" alt="el anillo único">

    <!-- no muestra la imagen anill.gif, no existe, nos muestra su texto alternativo-->

    <img src="imagenes/anill.gif" alt="el anillo único">

    <br>

    <!--muestra la imagen anillo.gif, cambiando el ancho y al alto-->

    <img src="imagenes/anillo.gif" alt="el anillo único" width="150" height="100" >

    <!--muestra la imagen anillo.gif, cambiando el ancho y el alto lo proporciona-->

    <img src="imagenes/anillo.gif" alt="el anillo único" width="150">

    <br>

    <!--muestra la imagen anillo.gif, por defecto-->

    <img src="imagenes/anillo.gif" alt="el anillo único" width="150" >

    1.-el texto está abajo por defecto

    <br>

    <!--muestra la imagen anillo.gif, utilizamos top-->

    <img src="imagenes/anillo.gif" alt="el anillo único" width="150" align="top">

    2.-El texto está arriba por top

    <p>

    <!--muestra la imagen anillo.gif, utilizamos bottom-->

    <img src="imagenes/anillo.gif" alt="el anillo único" width="150"

    align="bottom">
    3.-el texto está abajo por bottom

    <p>

    <!--muestra la imagen anillo.gif, estará a la derecha la imagen-->

    <img src="imagenes/anillo.gif" alt="el anillo único" width="150" align="right"

    "middle">

    4.-el texto está en medio por middle y a la izquierda de la imagen

    <!--muestra la imagen anillo.gif, utilizamos middle-->

    <img src="imagenes/anillo.gif" alt="el anillo único" width="150" align="middle"

    5.-El texto está en medio por middle y sigue conservando el valor right por

    defecto

    <!--muestra la imagen anillo.gif, utilizamos middle-->

    <img src="imagenes/anillo.gif" alt="el anillo único" width="150" align="middle"

    6.-el texto está en medio por middle y el valor right lo pierde por el salto

    <!--muestra la imagen anillo.gif, utilizamos middle y hspace-->

    <img src="imagenes/anillo.gif" alt="el anillo único" width="150" align="middle"

    hspace="50">

    7.-el texto está separado de la imagen <p>

    </body>

    </html>

    5.1.2.- HIPERVÍNCULO DE UNA IMAGEN

    • El gráfico aparece normal, pero cuando movemos el puntero sobre él, nos

    aparece la mano.

    • Por defecto llevan el borde del mismo color que el texto, para quitarlo hemos

    de añadir border: none.

    • Formato:

    <a href=”...”> <img src=”..”> </a> utiliza una imagen como enlace

    Listas graficas:
    Ejemplo:

    <html>

    <head>

    <title>imagines en listas</title>

    </head>

    <body>

    <basefont face="verdana" size="3" />

    <ul>

    <img src="imagenes/apple.png" width="150"> <b>manzanas</b><br>

    <ul>

    <img src="imagenes/hoja.gif" width="150"> hoja<br>

    <img src="imagenes/muñeco_ok.gif" width="150"> muñeco_ok

    </ul>

    <img src="imagenes/gif_frodo.gif" width="150"> <b>Frodo</b><br>

    <ul>

    <img src="imagenes/anillo.gif" width="150"> Anillo <br>

    <img src="imagenes/peras.jpg" width="150"> peras

    </ul>

    </ul>

    </ul>

    </body>

    </html>

    Etiqueta Atributo Valor Significado

    form

    target nombre Especifica el nombre del marco en el que se

    mostrará la respuesta al envío del formulario

    action URL Atributo obligatorio. Indica a dónde se debe enviar

    la información del formulario.

    enctype Tipo Mime

    Determina la forma en la que se debe codificar la


    información, ya sea como texto plano(text/plain) o

    como fichero (multipart/form-data).

    method get, post

    Determina cómo se debe enviar la información. Con

    get se enviará a través de la URL; con post se hará

    en el cuerpo de la petición (invisible a los usuarios).

    name texto Define un nombre unívoco para el formulario.

    input

    accept Tipos

    MIME

    Indica el tipo MIME del archivo (sólo se utiliza con

    type=”file”)

    align

    left, right,

    top,middle,

    bottom

    Define la alineación del texto frente a la imagen

    alt texto Establece un texto alternativo para la imagen

    Checked Indica que el cuadro de validación debe aparecer

    seleccionado por defecto

    maxlength número Determínale número máximo de caracteres que se

    pueden insertar en un campo de texto

    name texto Atributo obligatorio. Define un nombre unívoco para

    el elemento.

    size número Define el tamaño del elemento <input>. No se

    puede utilizar con type=”hidden”

    src URL Indica la URL de la imagen

    type

    button,

    checkbox,

    file,
    hidden,

    image,

    password,

    radio,

    reset,

    submit,

    text

    Indica el tipo de elemento. Por defecto, será texto.

    **

    value value

    Define el valor del tipo de elemento:

     Si type=button, reset o submit, define el

    texto del botón.

     Si type=image, define el resultado simbólico

    del campo pasado a un script.

     Si type=checkbox o radio, este atributo es

    obligatorio. Define el resultado del elemento

    También podría gustarte