: incorpora código JavaScript para agregar interactividad a la página web.
  • : incluye el contenido que será visible para los usuarios en la página web.

    • Elementos HTML de uso común

    A continuación se muestran algunos elementos HTML básicos que utilizará con frecuencia:

    Creando tu primer archivo HTML

    Para crear un archivo HTML, puede utilizar cualquier editor de texto, como el Bloc de notas o VS Code. A continuación se muestra un ejemplo sencillo:

    1. Abre tu editor de texto y escribe el siguiente código:
      HTML Tutorial  
    Example Number 1
      
    Hello, world!
    1. Guarde el archivo con una extensión .html (por ejemplo, index.html)
    2. ¡Abra el archivo en su navegador web para ver su primera página web HTML en acción!
    3. Para inspeccionar su código, presione Ctrl Shift C en Google Chrome para abrir las Herramientas de desarrollo y explorar la estructura DOM.
    4. Vaya a la pestaña de red en Herramientas para desarrolladores y actualice la pestaña de su navegador.

    Puedes encontrar que hay una solicitud en el nombre que has guardado como en esta imagen.
    \\\"Develop

    En la pestaña de respuesta, encontrarás el código que has escrito como en la siguiente imagen
    \\\"Develop

    Ahora, lo que pasó es que, una vez que abriste el archivo que guardaste como html, la computadora comenzó a ejecutar el archivo en el navegador. El navegador quería mostrar algo, por lo que realizó una llamada de solicitud al archivo desde el que se inició. El archivo le dio al navegador su código y se encontró en la sección de respuesta. Como era un archivo html, el navegador comienza a leer el código HTML de arriba a abajo. Este proceso se conoce como análisis. Durante el análisis, el navegador encuentra diferentes etiquetas HTML (como , , , etc.) y comienza a construir una estructura llamada DOM basada en estas etiquetas. A medida que el navegador crea el DOM, simultáneamente muestra el contenido en su pantalla.

    Creando una tabla

    Vayamos un paso más allá creando una tabla simple en HTML:

    1. Abra el mismo archivo HTML y agregue el siguiente código dentro de la etiqueta :
    Table Example
      
        Name    Power    Is Kurama Present  
      
        Naruto    Rasengan    Yes  
      
        Sasuke    Sharingan    No
    1. Guarde el archivo y actualice su navegador para ver la tabla mostrada.

    Observe que el encabezado se representa mediante etiqueta de párrafo. Alternativamente, también puedes usar la etiqueta , que centrará el encabezado de la tabla. Experimente con la etiqueta de título y actualice para ver los cambios.

    Tenga en cuenta que la etiqueta solo debe usarse inmediatamente después de la etiqueta de apertura

    .

    Ya has creado con éxito una tabla básica en HTML. No dudes en experimentar con filas y columnas adicionales para sentirte más cómodo con la sintaxis HTML.

    Conclusión

    ¡Felicitaciones por completar sus primeros pasos en el desarrollo web con HTML! La clave para dominar HTML es la práctica. Experimente con diferentes elementos, cree sus propias páginas web y no tenga miedo de cometer errores: cada error es una oportunidad de aprendizaje.

    Recuerda, esto es solo el comienzo. A medida que continúe construyendo sobre esta base, pronto podrá crear sitios web más complejos y dinámicos. Hagamos de la Web un lugar mejor, una línea de código a la vez.

    Este artículo está escrito por Anantha Krishnan, una profesional con experiencia tanto en TI como en ingeniería mecánica. Con experiencia en desarrollo completo y pasión por los sistemas mecánicos y eléctricos, Anantha Krishnan ahora se centra en la creación de contenido educativo para ayudar a los principiantes en campos de su especialización.

    ","image":"http://www.luping.net/uploads/20240820/172415124366c475cb37fe7.png","datePublished":"2024-08-20T18:54:03+08:00","dateModified":"2024-08-20T18:54:03+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
    "Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
    Herramientas en línea
    Tutoriales de software
    Sitio de navegacion
    Programación
    Página delantera > Programación > Desarrollarse para crear interfaces de usuario web: parte Comprensión de HTML

    Desarrollarse para crear interfaces de usuario web: parte Comprensión de HTML

    Publicado el 2024-08-20
    Navegar:968

    El desarrollo web es una de las habilidades más demandadas en la actualidad. Implica crear sitios web atractivos y fáciles de usar a los que se pueda acceder a través de un navegador. El primer paso para convertirse en desarrollador web es comprender HTML.

    Develop yourself to build Web UIs: Part Understanding HTML

    HTML (Lenguaje de marcado de hipertexto) es la columna vertebral de cualquier página web. Es el lenguaje estándar utilizado para estructurar una página web y determinar cómo se muestra el contenido en el navegador. Mientras que la apariencia de una página se decide mediante CSS (Hojas de estilo en cascada) y su funcionalidad mediante JS (Javascript), HTML es responsable del esqueleto o estructura fundamental.

    Antes de sumergirte en esta parte del curso, es importante comprender las jergas famosas y recurrentes que se utilizarán en tu viaje. Esto le ayudará a comprender los conceptos a medida que avancemos (y también facilitará que el autor explique las cosas ;-)).

    Comprender las jergas

    1. Lenguaje de programación: Un conjunto de instrucciones escritas en una sintaxis específica (a modo de lenguaje de programación) que una computadora puede ejecutar. Recuerde que la computadora solo entiende código binario (ya sea 1 o 0). Ahora, para que la computadora comprenda la lógica y también para encontrar un equilibrio, nosotros (los humanos) hemos creado un lenguaje de programación tal que sea fácil para nosotros para codificar y también para que la computadora lo entienda.
    2. Compilador: herramienta que traduce código escrito en un lenguaje de programación a lenguaje de máquina que una computadora puede entender y ejecutar.
    3. Sintaxis: Las reglas que definen la estructura de un lenguaje de programación. Piense en ello como la forma en que se organizan las palabras en una oración para que tengan sentido.
    4. Comentarios: Notas dentro del código que explican qué hacen ciertas partes del código. Los comentarios ayudan a otros desarrolladores (o a usted mismo en el futuro) a comprender la lógica detrás de su código.
    5. DOM (Modelo de objetos de documento): El DOM es una representación en forma de árbol del documento HTML. Cada etiqueta en su HTML se convierte en un nodo en este árbol. Por ejemplo, si su HTML tiene una etiqueta con un

      (párrafo) dentro, el navegador crea un nodo de cuerpo con un nodo de párrafo como hijo.

    6. Niños: Comprenderás esto a medida que avances. Elementos anidados dentro de otro elemento. Por ejemplo, en HTML, una etiqueta de párrafo (

      ) dentro de una etiqueta div (

      ) se consideraría hija del div.
    7. Elemento a nivel de bloque: Esta jerga se le presentará a medida que avance. Este término generalmente describe la característica del elemento que ocupará todo el ancho disponible.

      8. Empezando con HTML

      HTML significa Lenguaje de marcado de hipertexto

      • Hipertexto: se refiere a la capacidad de HTML para vincular diferentes documentos.

      • Lenguaje de marcado: utiliza etiquetas para anotar texto, definiendo cómo debe mostrarse en un navegador.

      Aquí está la estructura básica de un documento HTML:

      
  
    HTML Tutorial
      Hello, world!

      • Etiquetas: en HTML, las etiquetas se utilizan para definir elementos. Las etiquetas están entre corchetes angulares, como o

        .

      • Elementos: Consisten en una etiqueta de apertura y una etiqueta de cierre, que pueden contener contenido. Por ejemplo,

        ¡Hola, mundo!

        es un elemento de párrafo.

      Estructura del documento HTML

      Cada documento HTML sigue una estructura básica:

      1. : Declara el tipo de documento y versión de HTML.
      2. : El elemento raíz que encierra todos los demás elementos HTML.
      3. : contiene metainformación sobre el documento, como el título y enlaces a hojas de estilo.
      4. : establece el título de la página web, que se muestra en la barra o pestaña de título del navegador.
      5. : proporciona metadatos sobre el documento HTML, como el juego de caracteres, el autor y la configuración de la ventana gráfica. Es una etiqueta de cierre automático.
      6. : incorpora código CSS para diseñar los elementos HTML.
      7. : incorpora código JavaScript para agregar interactividad a la página web.
      8. : incluye el contenido que será visible para los usuarios en la página web.

      Elementos HTML de uso común

      A continuación se muestran algunos elementos HTML básicos que utilizará con frecuencia:

      • : Define un párrafo.
      • : un elemento a nivel de bloque utilizado para agrupar otros elementos.
      • : un elemento en línea que se utiliza para agrupar texto con fines de estilo.
      • : representa el contenido introductorio o los enlaces de navegación de una sección.

      • a
        : Encabezados, siendo

        el nivel más alto y

        el más bajo.

      • : Inserta un salto de línea (etiqueta de cierre automático, lo que significa que no es necesario cerrar la etiqueta).
      • : Se utiliza para crear un formulario HTML para la entrada del usuario.
      • : Crea un campo de entrada, normalmente utilizado dentro de un formulario.
      • : Crea una lista desplegable.
      • : Asocia una etiqueta de texto con un elemento de formulario.
    : Define una tabla.
  • : Define una fila en una tabla.
  • : Define una celda en una fila de la tabla.
  • : define una celda de encabezado en una fila de la tabla.
  • : Define una lista desordenada (con viñetas).
    • : Define una lista ordenada (numerada).
    2. : define un elemento de la lista.

      Creando tu primer archivo HTML

      Para crear un archivo HTML, puede utilizar cualquier editor de texto, como el Bloc de notas o VS Code. A continuación se muestra un ejemplo sencillo:

      1. Abre tu editor de texto y escribe el siguiente código: 
      

  HTML Tutorial
      Example Number 1
      
  
      Hello, world!
      1. Guarde el archivo con una extensión .html (por ejemplo, index.html)
      2. ¡Abra el archivo en su navegador web para ver su primera página web HTML en acción!
      3. Para inspeccionar su código, presione Ctrl Shift C en Google Chrome para abrir las Herramientas de desarrollo y explorar la estructura DOM.
      4. Vaya a la pestaña de red en Herramientas para desarrolladores y actualice la pestaña de su navegador.

      Puedes encontrar que hay una solicitud en el nombre que has guardado como en esta imagen.
      Develop yourself to build Web UIs: Part Understanding HTML

      En la pestaña de respuesta, encontrarás el código que has escrito como en la siguiente imagen
      Develop yourself to build Web UIs: Part Understanding HTML

      Ahora, lo que pasó es que, una vez que abriste el archivo que guardaste como html, la computadora comenzó a ejecutar el archivo en el navegador. El navegador quería mostrar algo, por lo que realizó una llamada de solicitud al archivo desde el que se inició. El archivo le dio al navegador su código y se encontró en la sección de respuesta. Como era un archivo html, el navegador comienza a leer el código HTML de arriba a abajo. Este proceso se conoce como análisis. Durante el análisis, el navegador encuentra diferentes etiquetas HTML (como ,

      , , etc.) y comienza a construir una estructura llamada DOM basada en estas etiquetas. A medida que el navegador crea el DOM, simultáneamente muestra el contenido en su pantalla.

      Creando una tabla

      Vayamos un paso más allá creando una tabla simple en HTML:

      1. Abra el mismo archivo HTML y agregue el siguiente código dentro de la etiqueta : 
      Table Example
      Name Power Is Kurama Present
      Naruto Rasengan Yes
      Sasuke Sharingan No
      1. Guarde el archivo y actualice su navegador para ver la tabla mostrada.

      Observe que el encabezado se representa mediante etiqueta de párrafo. Alternativamente, también puedes usar la etiqueta

      , que centrará el encabezado de la tabla. Experimente con la etiqueta de título y actualice para ver los cambios.

      Tenga en cuenta que la etiqueta

      solo debe usarse inmediatamente después de la etiqueta de apertura .

      Ya has creado con éxito una tabla básica en HTML. No dudes en experimentar con filas y columnas adicionales para sentirte más cómodo con la sintaxis HTML.

      Conclusión

      ¡Felicitaciones por completar sus primeros pasos en el desarrollo web con HTML! La clave para dominar HTML es la práctica. Experimente con diferentes elementos, cree sus propias páginas web y no tenga miedo de cometer errores: cada error es una oportunidad de aprendizaje.

      Recuerda, esto es solo el comienzo. A medida que continúe construyendo sobre esta base, pronto podrá crear sitios web más complejos y dinámicos. Hagamos de la Web un lugar mejor, una línea de código a la vez.

      Este artículo está escrito por Anantha Krishnan, una profesional con experiencia tanto en TI como en ingeniería mecánica. Con experiencia en desarrollo completo y pasión por los sistemas mecánicos y eléctricos, Anantha Krishnan ahora se centra en la creación de contenido educativo para ayudar a los principiantes en campos de su especialización.

      3. Declaración de liberación Este artículo se reproduce en: https://dev.to/marina_labs/develop-yourself-to-build-web-uis-part-1-understanding-html-4of9?1 Si hay alguna infracción, comuníquese con Study_golang@163 .com para eliminarlo
      Último tutorial Más>
      ClasificaciónMás>
      Aprende japonés Aprender coreano Aprender chino Aprender idioma extranjero Juego Problema comun Periféricos tecnológicos AI Tutoriales de software Programación Artículo

      Estudiar chino

      HerramientaMás>
      Decodificación de imagen base64
      pinyin chino
      Codificación Unicode
      Compresión de cifrado de ofuscación JS
      Herramienta de cifrado hexadecimal de URL
      Herramienta de conversión de codificación UTF-8
      Herramientas de codificación y decodificación Ascii en línea
      herramienta de cifrado MD5
      Herramienta de cifrado y descifrado de texto hash/hash en línea
      Cifrado SHA en línea

      Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

      Copyright© 2022 湘ICP备2022001581号-3