Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Abrir 10 Códigos HTML Básicos para Páginas Web (Con Ejemplos) - Blog 2

    Cargado por

    Lilia Romero
    12 vistas1 página
    10 códigos

    Título original

    Abrir 10 códigos HTML básicos para páginas web (con ejemplos) - Blog 2

    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
    10 códigos

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    12 vistas1 página

    Abrir 10 Códigos HTML Básicos para Páginas Web (Con Ejemplos) - Blog 2

    Cargado por

    Lilia Romero
    10 códigos

    Copyright:

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

    25/06/21 3:17

    Página 1 de 1

    !
    Nombres de dominios Más Iniciar sesión
    (55) 4631 2410 Blog Ayuda

    !
    México

    Productos mencionados
    Blog - Inicio Artículos por Producto Buscar en el blog

    Creador de páginas web Conoce más

    Sitios web de
    10 códigos HTML básicos para WordPress
    Conoce más

    páginas web (con ejemplos)


    Alejandra Rubio Bravo 22/07/2019

    El lenguaje secreto de la tecnología

    Estando en el proceso de creación de tu página web, puede que te hayas


    topado en internet con términos como editor HTML, código HTML o
    etiquetas HTML.

    Aunque la mayoría de las plataformas para crear sitios web (como


    WordPress) son bastante fáciles de utilizar y no requieren de grandes
    conocimientos técnicos, conocer más sobre HMTL te ayudará a entender
    conceptos de programación y te preparará para cuando sea hora de
    modificar o mejorar la apariencia de tu sitio web.

    Por eso, en esta ocasión te compartimos algunas nociones básicas del tema,
    así como los 10 códigos HTML que debes conocer, acompañados de
    ejemplos para que aprendas a utilizarlos.

    ¿Qué es el HTML?
    Las siglas HTML vienen de “Hyper Text Markup Language” o Lenguaje
    Marcado de Hipertexto.

    Los códigos HTML son el lenguaje universal que se utiliza para crear y dar
    formato a los sitios web. Funcionan en cualquier sistema operativo
    (Windows, Mac, Linux, etc.) y con cualquier navegador (Chrome, Explorer o
    Mozilla).

    Aunque no se trata de un lenguaje de programación muy sofisticado, saber


    manejar HTML te permite insertar otros códigos más potentes, como los de
    Javascript, por ejemplo. Ahora veamos el elemento de base de la sintaxis del
    HTML: las etiquetas.

    Etiquetas HTML
    El lenguaje HTML está conformado por un sistema de etiquetas en serie o
    tags, que incluyen instrucciones que los navegadores traducen como:

    Imágenes

    Texto

    Hipervínculos

    Listas de palabras

    Tablas, etc.

    Así, para que un elemento de este tipo pueda ser leído, la etiqueta debe
    tener dos partes: una etiqueta de inicio (<etiqueta>) y una de cierre
    (</etiqueta>) entre guiones (< >).

    Por ejemplo, las etiquetas <strong> y </strong> definen un texto en negrita.


    Si en nuestro documento HTML escribimos una frase con el siguiente código:

    <strong>Este texto va en negritas.</strong>

    El resultado será:

    ¡Inténtalo tú mismo! Inserta el código anterior en un visualizador HTML.

    Como seguro habrás notado, la etiqueta inicial sirve para definir el


    comportamiento del contenido (por ejemplo, si un texto irá en negritas o si
    tendrá un tamaño específico), y la de cierre le indica al navegador hasta
    dónde debe llegar ese comportamiento. Para construir los “cierres” sólo
    necesitas agregar una diagonal (/) al inicio de la etiqueta.

    Recuerda: de no poner la etiqueta de cierre, todo


    lo que escribas después de la etiqueta de inicio se
    desplegará con ese formato.

    Cabe destacar que no todas las etiquetas necesitan forzosamente un


    “cierre”. Por ejemplo, el código <br> para introducir saltos de línea es
    considerado un “elemento vacío” y puede ir por sí solo en cualquier parte del
    cuerpo del texto.

    Para la creación de sitios web completos, usar documentos HTML te


    permitirá tener organizados en un solo lugar todos los códigos que vayas a
    usar en cada página. Este documento lo puedes elaborar en el editor de
    textos de tu preferencia (Microsoft Word o el mismo bloc de notas), y solo
    debes asegurarte de guardarlo como .html u otro formato web (es un
    documento por cada página).

    Estructura básica HTML


    Antes de ver los códigos básicos, debes saber que la primera línea de tu
    documento HTML siempre debe contener la etiqueta <!DOCTYPE html>.
    Esto hará que el código de tu sitio sea legible en cualquier navegador.

    Ahora bien, un documento HTML bien armado tiene cuatro etiquetas


    esenciales para que el contenido se distribuya correctamente. Estas son:

    1. HTML

    <html> está al inicio de un documento HTML e indica a los navegadores que


    la página tiene código HTML para que pueda leerlo de esa forma. Siguiendo
    la sintaxis del lenguaje, la etiqueta de cierre </html> será el último elemento
    del documento.

    2. Encabezado
    <head> es la etiqueta que se utiliza para el encabezado de la página. Su
    principal función es contener toda la información del funcionamiento del
    sitio. Debido a esto, es un código encriptado que las personas que entran a la
    página no pueden ver.

    3. Título de la página
    <title> es la etiqueta que da a tu sitio un nombre para que los usuarios
    puedan identificarlo. Es el título que puedes ver en las pestañas del
    navegador.

    4. Cuerpo
    <body> es la etiqueta que contiene todos los elementos individuales del sitio.
    O dicho de otra forma, comprende todo el contenido visible del sitio. Aquí
    podrás insertar texto, imágenes, videos o cualquier otra funcionalidad que
    desees mostrar.

    Ejemplo de las cuatro etiquetas esenciales:

    <html>
    <head>
    <title>Mi página de ejemplo</title>
    </head>
    <body>
    Aquí va el contenido
    </body>
    </html>

    Si creas un documento .html con este código y lo abres en tu navegador,


    verás algo como esto:

    Con las cuatro etiquetas anteriores ya tienes el “esqueleto” de tu página


    web. La siguiente tarea sería introducir texto (entre los tags <body> y
    </body>) y controlar sus etiquetas. Veamos las más elementales.

    5. Títulos y subtítulos
    <h1> <h2>… <h6> son etiquetas que funcionan para agregar títulos y
    subtítulos en el cuerpo del texto, lo cual ayuda a jerarquizar la información.
    Por cierto, te recomendamos utilizar la etiqueta H1 sólo una vez dentro del
    contenido.

    Ejemplo:

    <h1>Esta es una etiqueta H1. Utilízala en el título.</h1>


    <h2>Esta es una etiqueta H2. Utilízala en los encabezados de secciones.</h2>
    <h3>Esta es una etiqueta H3. Utilízala en sub-secciones.</h3>
    <h4>Esta es una etiqueta H4. No se usan muy a menudo.</h4>
    <h5>Esta es una etiqueta H5.</h5>
    <h6>Esta es una etiqueta H6.</h6>

    Resultado:

    6. Párrafos
    Las etiquetas <p> y <br> te ayudarán a organizar el texto en párrafos y
    saltos de línea.

    Ejemplo:

    <p>Tu primer párrafo.</p>


    <p>Tu segundo párrafo.</p>
    <p>Un enunciado.<br>
    Un segundo enunciado (pegado al primero).</p>

    Resultado:

    7. Imágenes
    <img> con esta etiqueta podrás agregar imágenes al cuerpo de tu página.
    Combinarlo con el atributo src te permitirá especificar la ubicación donde se
    encuentra la imagen, y el atributo alt te ayudará a darle un título a esa
    imagen para que lo lean buscadores como Google.

    La estructura de los atributos es la siguiente: primero viene la palabra o


    abreviatura que lo define (en este caso src es abreviatura de “source” o
    fuente), luego el signo igual (=) y al último el modificador del atributo entre
    comillas dobles (“_”) o simples (‘_’).

    Ejemplo:

    <img src="https://images.unsplash.com/photo-1535378917042-10a22c95931a">

    Resultado:

    8. Hipervínculos

    <a> te permite insertar un hipervínculo a la página. Por ejemplo, el link hacia


    tus redes sociales o hacia otro sitio web con el que desees conectar tu
    página.

    Ejemplo:

    <a href="https://mx.godaddy.com/blog">Visita el blog de GoDaddy</a>

    Resultado:

    Visita el blog de GoDaddy

    Como te habrás dado cuenta, el atributo que se utilizó aquí fue href.

    9. Listas e índices
    <ol> sirve para agregar listas numeradas y <ul> para agregar bullets, los
    cuales mejoran la legibilidad de tus textos.

    Ejemplo:

    <ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    <li>Elemento 4</li>
    </ul>

    Resultado:

    10. Estilo
    Aunque usualmente se ubica dentro de la etiqueta <head>, con el atributo
    <style> puedes definir el estilo de tu contenido en términos de:

    Color

    Tamaño de fuente

    Tipografía, etc.

    Ejemplo:

    <p style="color:red; font-size:100px">Hola Mundo</p>

    Resultado:

    Tip adicional: basarte en los códigos HTML de otros sitios puede ayudarte a
    entender más sobre diseño web. Estos están disponibles en todo momento al
    dar clic con el botón derecho del mouse en alguna parte en blanco y
    seleccionar “Ver el código fuente de la página”.

    Esperamos que este artículo haya despertado tu curiosidad para


    experimentar más con el funcionamiento de estos códigos, y así no se te
    escape ningún detalle cuando empieces a dar formato a tus páginas web.
    Recuerda que la práctica hace al maestro.

    Si el lenguaje informático no es lo tuyo … ¡no te preocupes! Para eso también


    existen creadores de páginas web como GoDaddy, donde puedes hacer tu
    sitio desde cero y sin necesidad de tener conocimientos previos de
    programación.

    Si quieres sacar máximo provecho de las


    herramientas digitales y aprender más de
    GoDaddy, ¡no te pierdas nuestros webinars!
    Suscríbete en godaddywebinarslatam.com

    #creadordesitiosweb-mx

    Alejandra Rubio Bravo


    Nativa del sur de la Ciudad de México, estudié Comunicación y
    me especialicé en corrección de estilo y Marketing Digital.
    Eterna enamorada de las letras, apasionada con la tecnología y
    feliz colaboradora en Virket, la empresa donde me encontré
    con la increíble riqueza de formas y oportunidades para
    comunicar y planificar estrategias enfocadas a innovar la
    relación cliente-empresa.

    Más artículos por Alejandra

    Obtén la ayuda que necesitas 24/7. Llama a nuestros Guías expertos al (55) 4631 2410. Estamos a tu
    disposición para ayudarte en cada paso del proceso.

    Nos encanta atender tu llamada.


    GoDaddy guides GoDaddy guides

    Acerca de GoDaddy Asistencia técnica Recursos Programas de socios Cuenta


    La empresa Asistencia técnica para productos Webmail Afiliados Mis productos

    Comunícate con nosotros Reportar abusos WHOIS Programa de resellers Renovaciones y facturación

    Redacción Confirmación ICANN GoDaddy Pro Crear cuenta

    Centro de confianza Diseñadores y desarrolladores

    Legal Catálogo de productos

    Blog de GoDaddy

    Compras
    Dominios

    Sitios web
    WordPress

    Hosting

    Seguridad web

    Correo electrónico y Office

    Promociones

    México - Español MXN


    !

    Copyright © 1999 - 2021 GoDaddy Operating Company, LLC. Todos los Legal Política de privacidad Preferencias de publicidad Cookies
    derechos reservados. La marca GoDaddy es una marca registrada de GoDaddy
    Operating Company, LLC en los EE. UU. y otros países. El logo "GO" es una
    marca comercial registrada de GoDaddy.com, LLC en los EE.UU.

    El uso de este sitio está sujeto a las condiciones de uso expresas. Al utilizar
    este sitio, tú indicas que aceptas cumplir con estos Términos universales de
    servicio.

    También podría gustarte