Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • HTML

    Cargado por

    asqw6901
    9 vistas10 páginas

    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

    Copyright:

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

    HTML

    Cargado por

    asqw6901

    Copyright:

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

    HTML

    HTML básico
    Crear páginas web usando etiquetas HTML

    Descubriendo HTML y etiquetas

    Etiquetas HTML

    HTML es el lenguaje informático que estructura todas las páginas web en internet.
    El código HTML les dice a los navegadores web cómo mostrar contenido como
    imágenes, enlaces y texto en una página web. En HTML, las cosas giran en torno
    a las etiquetas. Las etiquetas comienzan con <, seguidas de una palabra clave y
    terminan con >.
    <button> Con esta etiqueta HTML se crea un botón.
    <button> es una etiqueta de apertura. Le dice al navegador web que queremos
    comenzar a mostrar un botón.
    Después de la etiqueta de apertura <button>, sigue la etiqueta de cierre
    </button>.
    La mayoría de las etiquetas en HTML vienen en pares, tienen una etiqueta de
    apertura y una etiqueta de cierre. Lo que codificó anteriormente es la etiqueta de
    apertura de un elemento de botón.
    <button>I´m Ready to Code</button> Este Código muestra un botón con
    ……………………………………………………. el texto I´m Ready to Code.

    Texto y encabezados

    En HTML, las palabras clave de algunas etiquetas son obvias, pero hay algunas
    etiquetas que usan una forma abreviada. Por ejemplo, usamos p para un párrafo.
    <p>.
    Codificar un párrafo es muy similar a codificar un botón. Necesita una etiqueta de
    apertura, seguida de su texto y una etiqueta de cierre.
    <p>Mimo is Fun!</p> Este código muestra un párrafo con el texto Mimo is
    …………………………… …….Fun!
    Podemos crear encabezados en HTML para enfatizar ciertos textos. Hay 5
    tamaños de encabezado en HTML, de h1 a h6. <h1>La etiqueta de encabezado
    enfatiza los textos haciéndolos más grandes y audaces. H1 es el más grande y
    audaz y h6 es el más pequeño y menos audaz.
    Estructura de la página web

    Un elemento es lo que llamamos la etiqueta de apertura, la etiqueta de cierre y el


    código intermedio. Ejemplo:
    <button>Hello, World!</button>
    Para crear una página web, necesitará una etiqueta HTML de apertura y cierre.
    Esta opción creará una página web HTML vacía:
    <html> </html>
    Los elementos html y body forman la estructura de una página web. Colocamos
    los elementos que queremos mostrar dentro del cuerpo. Más adelante,
    aprenderemos sobre otros elementos que van dentro de <html> </html> para dar
    estilo a las páginas web y hacerlas interactivas.
    Este código define el cuerpo de una página web.
    <body> </body>
    Debemos colocar contenidos, como encabezados, dentro de las etiquetas del
    cuerpo.
    Mostrar un encabezado en la página web.
    <html>
    <body>
    <h1> Top Stories </h1>
    </body>
    </html>
    Mostrar un botón en la página web.
    <html>
    <body>
    <button> Add to Cart </button>
    </body>
    </html>
    Mostrar un párrafo debajo del título en la página web.
    <html>
    <body>
    <h1>About Me</h1>
    <p>I love to code</p>
    </body>
    </html>
    Mostrar un encabezado más grande encima del encabezado más pequeño.
    <html>
    <body>
    <h1>Online Store</h1>
    <h6>Shoes</h6>
    </body>
    </html>

    Estructuración de texto con etiquetas

    Salto de línea, énfasis e importancia

    A veces queremos formatear párrafos con saltos de línea. Por ejemplo, esta
    canción:

    Se vería mucho mejor si aparecieran Raindrops on roses en una línea, Whiskers


    on kittens en la siguiente, y así sucesivamente.
    Podemos separar líneas con la ayuda de la etiqueta de salto de línea: <br>
    <html>
    <body>
    <h1> My favorite things </h1>
    <p>
    Raindrops on roses <br>
    Whiskers on kitters <br>
    Bright copper kettles <br>
    Warm woolen mittens
    </p>
    </body>
    </html>

    <br> es una etiqueta vacía. Las etiquetas vacías no tienen etiquetas de cierre ni
    contenido. También se les llama etiquetas de cierre automático.
    Hay un elemento para dar énfasis al texto, lo pone en cursiva. Se llama el
    elemento em. Agregue <em> y </em>
    <html>
    <body>
    <h1> My favorite things </h1>
    <p>
    Raindrops on <em>roses</em> <br>
    Whiskers on kitters <br>
    Bright copper kettles <br>
    Warm woolen mittens
    </p>
    </body>
    </html>

    Para definir textos como importantes usamos las etiquetas <strong> y </strong>.
    Pone el texto en negrita.

    <html>
    <body>
    <h1> My favorite things </h1>
    <p>
    Raindrops on <em> roses </em> <br>
    Wiskers on <strong> kittens </strong>
    </p>
    </body>
    </html>

    Encabezado, Título y Doctype

    El elemento HTML head, <head> </head>, es un contenedor de información sobre


    una página web, como su título. Va antes de la etiqueta del cuerpo.

    <html>
    <head>
    </head>
    <body>
    <h1> My favorite things </h1>
    <p>
    Raindrops on <em> roses </em> <br>
    Wiskers on <strong> kittens </strong>
    </p>
    </body>
    </html>

    El título de una página web aparece en la pestaña o ventana del navegador web.
    En las pestañas a continuación, hay dos títulos de páginas web: Mi página web y
    Google.
    Para darle un título a una página web, agregamos <title> y </title> dentro de las
    etiquetas de encabezado. Tenga en cuenta que el title no es visible, pero
    proporciona información al navegador.

    <html>
    <head>
    <title>My webpage</title>
    </head>
    <body>
    <h1> My favorite things </h1>
    <p>
    Raindrops on <em> roses </em> <br>
    Wiskers on <strong> kittens </strong>
    </p>
    </body>
    </html>

    El doctype le dice al navegador web qué versión de HTML estamos usando. Sen
    él, es posible que el navegador no muestre la página correctamente. Como
    estamos usando la última versión, usamos <!doctupe html>

    <!doctype html>
    <html>
    <head>
    <title>My webpage</title>
    </head>
    <body>
    <h1> My favorite things </h1>
    <p>
    Raindrops on <em> roses </em> <br>
    Wiskers on <strong> kittens </strong>
    </p>
    </body>
    </html>

    El tipo de documento parece una etiqueta de tipo de documento vacía con un


    atributo html vacío: <!doctype html> doctype
    Los atributos proporcionan información adicional a las etiquetas. Aprenderá más
    sobre ellos en capítulos posteriores. Por ahora, arma el doctype.
    Botones de construcción

    Botones

    Con los botones, los programas cambian las páginas web según el
    comportamiento del usuario. Por ejemplo, hacer clic en Siguiente puede ejecutar
    código que recorre los caracteres. Más adelante aprenderemos a escribir ese
    código. Por ahora, nos centraremos en el elemento button.
    Para crear un botón en el que los usuarios puedan hacer clic, necesitamos las
    etiquetas de apertura <button> y cierre </button>.
    <!doctype html>
    <html>
    <body>
    <p>Suscribe to our Newsletter</p>
    <button>Subscribe</button>
    </body>
    </html>

    Podemos hacer que aparezcan textos en un botón escribiéndolo entre las


    etiquetas. Intente escribir Login entre las etiquetas de los botones. Asegúrate de
    usar una “L” mayúscula.
    <!doctype html>
    <html>
    <body>
    <h1>Facebook</h1>
    <p>Log in to your account to get started</p>
    <button>Log in</button>
    </body>
    </html>

    Anteriormente, aprendimos cómo enfatizar o hacer que el texto sea importante.


    También podemos usar estas etiquetas para el texto dentro de un botón. Intente
    escribir <strong>continue anyway</strong> entre las etiquetas de botones.
    <!doctype html>
    <html>
    <body>
    <h3>Warning</h3>
    <p>This site contains humor that may cause uncontrollable laughter.
    </p>
    <button><strong>continue anyway</strong></buttons>
    </body>
    </html>
    Los botones se muestran uno al lado del otro incluso si están en líneas de código
    separadas. Coloque estos botones mostrando First, Secont, luego Third.
    <!doctype html>
    <html>
    <body>
    <button>First</button> First Second Third
    <button>Second</button>
    <button>Third</button>
    </body>
    </html>

    Si queremos que los botones se stack uno encima del otro, podemos usar la
    etiqueta <br> para colocar cada botón en una nueva línea.
    <!doctype html>
    <html>
    <body>
    <h3>Stack of Pancakes</h3>
    <p>Log in or sign up to view the best photos of pancakes across the globe.</p>
    <button>Login</button>
    <br>
    <button>Sign up</button> Log in
    </body>
    </html>
    Sign up

    Creación de enlaces

    Enlaces y Atributos

    Echemos un vistazo a cómo funcionan los enlaces para combinar páginas web en
    sitios web. Haz clic en Take a break! Para usar el enlace.

    Para comenzar a crear un enlace, agregamos el texto entre las etiquetas <a> y
    </a>. Esto no resaltará el texto todavía.
    <a> significa etiqueta “Ancla”.
    <!doctype html>
    <html>
    <body>
    <a>Learn to Code</a>
    </body>
    </html>

    Para vincular el texto a una página web, agregamos href=” “ junto con un
    Localizador Uniforme de Recursos ( URL ). href es la abreviatura de “referencia
    de hipertexto”:
    href es un atributo. Todos los atributos tienen dos cosas en común: brindan
    información adicional y van dentro de la etiqueta de apertura. Los atributos se
    agregan después del nombre de la etiqueta y antes del signo de cierre >.
    <!doctype html>
    <html>
    <body>
    <a href=”https://getmimo.com”>Learn to Code</a>
    </body>
    </html>

    Vinculamos a una página web agregando = después del atributo y una URL como
    valor entre comillas.
    <!doctype html>
    <html>
    <body>
    <a href=”https://getmimo.com”>Learn to Code</a>
    </body>
    </html>
    HTML Intermedio
    Vincular varios archivos HTML para crear un sitio web

    Adición de imágenes

    También podría gustarte