Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Etiquetas HTML y Tipos

    Cargado por

    Juan Perez
    15 vistas8 páginas

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

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

    Etiquetas HTML y Tipos

    Cargado por

    Juan Perez

    Copyright:

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

    ELECTIVA-HTML

    ETIQUETAS HTML Y TIPOS


    Las etiquetas son una forma de indicar al navegador como debe mostrarse un cierto
    elemento en una página web, conozcamos más a fondo cuáles son y cómo se utilizan.
    Qué es una etiqueta HTML
    Una etiqueta es una marca que pone límites a un cierto elemento en HTML, para delimitar
    un elemento en HTML se emplea una etiqueta de apertura y una de cierre, son muy
    característicos por colocarse entre signos de menor y mayor. Existe una cantidad limitada
    de etiquetas en HTML y ya están establecidas y solo queda aprenderlas.
    Lista de etiquetas HTML
     Etiqueta HTML <h1>: Encabezado o título principal.
     Etiqueta HTML <h2>: Para elementos subtítulo.
     Etiqueta HTML <p>: Para elementos de párrafo.
     Etiqueta HTML <b>: Para hacer texto en negrita.
     Etiqueta HTML <i>: Texto en cursiva.
     Etiqueta HTML <ul>: Para listas sin ordenar
     Etiqueta HTML <table>: para crear tablas.
     Etiqueta HTML <form>: Para crear formularios.
     Etiqueta HTML <a>: Para crear enlaces.
     Etiqueta HTML <img>: Para insertar imágenes.
    En la sección body escribiremos nuestro primer encabezado visible utilizando la etiqueta
    <h1> y nuestro primer párrafo utilizando la etiqueta <p>, de la siguiente manera:
    1<html>
    2 <head>
    3 <title> MI PRIMER TITULO </title>
    4 </head>
    5 <body>
    6 <h1> Este es el encabezado o título visible </h1>
    7 <p> Este es nuestro primer párrafo de texto Este es nuestro primer párrafo de texto
    Este es nuestro primer párrafo de texto Este es nuestro primer párrafo de texto Este es
    nuestro primer párrafo de texto </p>
    8 <p> Este es otro párrafo de texto Este es otro párrafo de texto Este es otro párrafo de
    texto Este es otro párrafo de texto</p>
    9 </body>
    10</html>
    Profa. Daira Montaño Página 1
    ELECTIVA-HTML

    Resultados:

    Imagen del resultado de etiqueta h1 y p html

    Ahora, si guardamos nuestro documento y actualizamos el navegador, veremos que el


    navegador ya nos muestra contenido en el cuerpo de nuestra página, nuestro encabezado
    o título visible y nuestros párrafos.
    Etiqueta <br/>
     <br/> indica un salto de línea, observa bien, no está mal escrito, es así como se
    escribe.
     <br/> puede ir dentro de un párrafo, por ejemplo para hacer un salto de línea si es
    necesario.
     <br/> no tiene etiqueta de cierre.
    Etiqueta <hr/>
     <hr/> es una etiqueta que crea una línea horizontal o separador y también solo hay
    que digitar tal como aparece, para crear una línea horizontal.
     <hr/> no tiene etiqueta de cierre.
    Ejemplo de código HTML con salto de línea <br/> y línea horizontal <hr/>
    HTML
    1<p> Esta es la primera linea <br/> Esta es la segunda <br/> esta es la tercera linea de
    nuestro primer párrafo <br/> Esta es la cuarta linea de nuestro
    2 primer párrafo de texto Este es nuestro primer párrafo de texto Este es nuestro primer
    párrafo de texto </p>
    3

    Profa. Daira Montaño Página 2


    ELECTIVA-HTML

    4<hr/>
    5
    6<p> Este es otro párrafo de texto Este es otro párrafo de texto Este es
    7otro párrafo de texto Este es otro párrafo de texto</p>
    8
    9<hr/>

    Resultado:

    Imagen resultado de código html con salto de línea y línea horizontal.

    Cómo poner comentarios en código HTML


    Los comentarios en HTML nos permiten añadir a nuestro documento, alguna nota, una
    pequeña descripción, o un simple recordatorio que nosotros entendamos.
    Los comentarios no aparecerán en la página, solo será visible para el programador.
    Un comentario en HTML se indica de la siguiente manera: <!– Aquí escribe tu
    comentario –>
    Ejemplo de comentarios en HTML
    1<html>
    2
    3<head>
    4<title> Mi primer titulo </title>
    5</head>
    6

    Profa. Daira Montaño Página 3


    ELECTIVA-HTML

    7<body>
    8<h1> Página de contacto</h1>
    9<!--Nota importante: No olvidar que esta página debe contener un formulario de
    contacto con fondo azul y tipo de letras helvetica como indico el cliente -->
    10
    11
    12</body>
    13
    14</html>
    Resultado:

    Imagen ejemplo de comentario en html

    Puedes colocar un comentario en cualquier parte de tu documento HTML, no será leído


    por el navegador, solo para ti.

    ETIQUETAS PARA TEXTO HTML Y FORMATOS HTML


    Ahora aprenderemos a manejar las etiquetas de texto HTML, así como las etiquetas de
    formato, aquellas que se emplean exclusivamente para crear elementos de texto y
    controlar su formato hasta cierto punto, HTML nos permite indicar cómo se muestra un
    texto en la página web mediante las etiquetas correspondientes.
    Etiquetas de párrafo y encabezados HTML
    Las etiquetas que siempre indican texto y son:
     <p> Indica que el elemento es un párrafo.

    Profa. Daira Montaño Página 4


    ELECTIVA-HTML

     <h1> Señala que se trata de un título principal.


     <h2>, <h3>, <h4>, <h5>, <h6>: indica niveles de encabezado, subtítulos.
    Ejemplo de etiquetas de texto HTML
    1<h1> Este es un título de primer nivel</h1>
    2<h2>Título de segundo nivel</h2>
    3<h3>Título de tercer nivel</h3>
    4<p>Elemento de parrafo en html</p>
    5
    Resultado

    Lista de formatos y etiquetas de texto HTML


     Etiqueta HTML <b>: Para texto en negrita.
     Etiqueta HTML <em>: Para enfatizar texto.
     Etiqueta HTML <i>: Para texto en cursiva.
     Etiqueta HTML <u>: Para texto subrayado.
     Etiqueta HTML <strong>: Para textos importantes.
     Etiqueta HTML <big>: Texto grande.
     Etiqueta HTML <small>: Para texto pequeño.
     Etiqueta HTML <sub>: Para texto subíndice.
     Etiqueta HTML <sup>: Para texto superíndice.

    Profa. Daira Montaño Página 5


    ELECTIVA-HTML

     Etiqueta HTML <ins>: Para texto insertado.


     Etiqueta HTML <del>: Para texto borrado.
     Etiqueta HTML <mark>: Para texto marcado.
    Diferencia entre <strong>/<b> y <em>/<i>
    Las etiquetas <strong> y <b> se muestran visualmente iguales en los navegadores, lo
    mismo ocurre con las etiquetas <em> y <i> pero hay diferencias.
     <b> define texto en negrita, sin ninguna importancia adicional.
     <strong> define texto fuerte, con importancia semántica aumentada.
     <i> define el texto en cursiva, sin ninguna importancia adicional.
     <em> define el texto enfatizado, con una importancia semántica aumentada.
    Ejemplos de formatos de texto HTML
    1<strong><p> Párrafo importante con etiqueta html strong</p></strong>
    2<b><p>Párrafo con estilo negrita con etiqueta b</p></b>
    3<em><p>Texto importante en cursiva con etiqueta em</p></em>
    4<i><p>Texto con estilo cursiva con etiqueta i</p></i>
    5
    Resultado:

    Obviamente estas etiquetas y formatos las podemos aplicar a otras etiquetas de texto,
    como párrafos, títulos, enlaces, etc.
    Ejemplos de formatos y etiquetas de texto en html

    Profa. Daira Montaño Página 6


    ELECTIVA-HTML

    Empecemos con un párrafo sin ningún formato adicional, posteriormente aplicaremos el


    formato de texto grande al siguiente párrafo, visualizar las diferencias entre el primer
    párrafo y el segundo, nos ayuda a entender mejor cómo funcionan los formatos de texto
    en html, veamos:
    HTML
    1<p> Este es un simple párrafo sin formato </p>
    2
    3<big><p> Este es otro párrafo Y tendrá formato de texto grande</p></big>
    Resultado:

    Ejemplo de las etiquetas y formatos de texto


    Es posible seguir agregando más formatos a nuestras páginas en html, para ello
    simplemente debemos abrir y cerrar las respectivas etiquetas con el contenido dentro de
    ellas.
    Agregando más formatos html
    A continuación aplicaremos los formatos de texto grande y cursiva a nuestro primer
    párrafo y además aplicaremos un marcado para el segundo párrafo.
    HTML
    1<i><big><p> Este es el primer párrafo y tendrá formato de texto grande y será
    cursiva</p></big></i>
    2

    Profa. Daira Montaño Página 7


    ELECTIVA-HTML

    3<p><mark><i><big> Este es el segundo párrafo y tendrá formato de texto grande, será


    cursiva y también será marcado</big></i></mark></p>
    Resultado:

    Los textos pueden ser controlados por etiquetas html


    Y así, podemos emplear etiquetas dentro de otras si son compatibles.
    .
    Tarea.
    Crea un artículo sobre un tema de tu interés (También puedes utilizar el de la primera
    tarea) con las siguientes indicaciones:
     El titulo visible sea texto grande, cursivo y subrayado.
     Los subtítulos sean texto en negrita, además marcados.
     Crea unos párrafos, dentro de los párrafos crea textos marcados para resaltar
    palabras.
     Utiliza todas las etiquetas aprendidas a distintos textos para ver la diferencia

    Profa. Daira Montaño Página 8

    También podría gustarte