{"id":58193,"date":"2024-11-08T04:45:47","date_gmt":"2024-11-08T09:45:47","guid":{"rendered":"https:\/\/niixer.com\/?p=58193"},"modified":"2024-11-08T14:14:58","modified_gmt":"2024-11-08T19:14:58","slug":"ai-geminis-y-chatgpt-realizando-una-pagina-web-paso-a-paso","status":"publish","type":"post","link":"https:\/\/niixer.com\/index.php\/2024\/11\/08\/ai-geminis-y-chatgpt-realizando-una-pagina-web-paso-a-paso\/","title":{"rendered":"AI G\u00c9MINIS Y CHATGPT Realizando una P\u00e1gina Web paso a paso"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Introducci\u00f3n <\/h2>\n\n\n\n<p>Actualmente, una p\u00e1gina web es un recurso imprescindible para cualquier individuo o empresa que aspire a tener presencia en internet. Las plataformas digitales facilitan la difusi\u00f3n de informaci\u00f3n, servicios, productos e ideas a una audiencia mundial de forma r\u00e1pida y eficaz. Su uso es muy diverso: pueden actuar como portafolios para exhibir competencias profesionales, como blogs para difundir saberes, como comercios virtuales para comercializar productos, o como p\u00e1ginas informativas para instruir acerca de una causa o servicio, podemos evidenciar lo importante y \u00fatil que puede ser para los estudiantes de las nuevas generaciones.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Caracter\u00edsticas de una p\u00e1gina Web<\/h2>\n\n\n\n<p><strong>Estructura y jerarqu\u00eda<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Las p\u00e1ginas web tienen una estructura clara y organizada con elementos jer\u00e1rquicos como encabezados (&lt;h1&gt;, &lt;h2&gt;, etc.), p\u00e1rrafos, im\u00e1genes, y enlaces. Esto ayuda a los usuarios a encontrar la informaci\u00f3n de manera r\u00e1pida y facilita la navegaci\u00f3n.<\/li>\n\n\n\n<li>La estructura b\u00e1sica en HTML sigue un formato de contenedores y etiquetas, comenzando por el &lt;!DOCTYPE html&gt;, seguido por las secciones &lt;html&gt;, &lt;head&gt;, y &lt;body&gt;.<\/li>\n<\/ul>\n\n\n\n<p><strong>&nbsp;Interactividad<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Las p\u00e1ginas web modernas incluyen elementos interactivos (como botones, formularios y animaciones) que mejoran la experiencia del usuario. Esto suele lograrse mediante JavaScript, el lenguaje de programaci\u00f3n que permite agregar funcionalidades interactivas.<\/li>\n\n\n\n<li>Ejemplos de interactividad son: formularios de contacto, men\u00fas desplegables, mapas interactivos, y galer\u00edas de im\u00e1genes.<\/li>\n<\/ul>\n\n\n\n<p><strong>Responsive o adaptable<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>La adaptabilidad o dise\u00f1o &#8220;responsive&#8221; permite que las p\u00e1ginas web se ajusten a cualquier dispositivo, ya sea una computadora, tableta o smartphone. Esto se consigue con t\u00e9cnicas de dise\u00f1o que ajustan el contenido seg\u00fan el tama\u00f1o de la pantalla.<\/li>\n\n\n\n<li>Se logra mediante el uso de CSS (Hojas de estilo en cascada) y frameworks de dise\u00f1o como Bootstrap.<\/li>\n<\/ul>\n\n\n\n<p><strong>Enlaces y navegaci\u00f3n<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Las p\u00e1ginas web cuentan con un sistema de navegaci\u00f3n que permite moverse entre secciones y p\u00e1ginas f\u00e1cilmente. Esto incluye men\u00fas, enlaces internos y externos, y botones de navegaci\u00f3n.<\/li>\n\n\n\n<li>Los enlaces (&lt;a&gt;) permiten conectar distintas secciones dentro de la misma p\u00e1gina o con otros sitios web.<\/li>\n<\/ul>\n\n\n\n<p><strong>Uso de dise\u00f1o y est\u00e9tica<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>El dise\u00f1o de una p\u00e1gina web incluye colores, tipograf\u00edas, y un estilo visual que ayuda a comunicar la identidad de la p\u00e1gina o marca.<\/li>\n\n\n\n<li>Un buen dise\u00f1o est\u00e9tico mejora la experiencia del usuario y puede influir en la forma en que los visitantes perciben el contenido o la empresa detr\u00e1s del sitio.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 1: Tener un editor de texto <\/h2>\n\n\n\n<p>Para empezar a realizar la p\u00e1gina web lo primero que debemos escoger es un editor de texto que lo podremos encontrar f\u00e1cilmente en nuestros monitores, para encontrarlo entramos en el bot\u00f3n de Windows y escribimos Notepad esta aplicaci\u00f3n va a hacer nuestra principal  herramienta  para empezar a realizar nuestro c\u00f3digo HTML.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"652\" height=\"70\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-08-010220.png\" alt=\"\" class=\"wp-image-58198\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-08-010220.png 652w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-08-010220-300x32.png 300w\" sizes=\"auto, (max-width: 652px) 100vw, 652px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 2: Se realizar\u00e1 los archivos<\/h2>\n\n\n\n<p>Se crear\u00e1 una carpeta para guardar todos los archivos que contiene la p\u00e1gina web y se crear\u00e1 un formato index.html. Debemos asegurarnos de elegir el tipo de archivo debe estar escrito al final del nombre. Esto le dir\u00e1 al navegador que es una p\u00e1gina web.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"807\" height=\"386\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-08-012012.png\" alt=\"\" class=\"wp-image-58199\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-08-012012.png 807w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-08-012012-300x143.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-08-012012-768x367.png 768w\" sizes=\"auto, (max-width: 807px) 100vw, 807px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 3: Estructura b\u00e1sica de HTML<\/h2>\n\n\n\n<p>Cada p\u00e1gina Web en HTML sigue una estructura b\u00e1sica que se ve as\u00ed:  <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;!DOCTYPE html&gt;<\/code>: Declara el tipo de documento como HTML5.<\/li>\n\n\n\n<li><code>&lt;html lang=\"es\"&gt;<\/code>: Indica que el idioma de la p\u00e1gina es espa\u00f1ol.<\/li>\n\n\n\n<li><code>&lt;head&gt;<\/code>: Contiene informaci\u00f3n sobre la p\u00e1gina (como el t\u00edtulo).<\/li>\n\n\n\n<li><code>&lt;meta charset=\"UTF-8\"&gt;<\/code>: Asegura que los caracteres especiales (acentos, etc.) se muestren correctamente.<\/li>\n\n\n\n<li><code>&lt;title&gt;<\/code>: El t\u00edtulo que aparecer\u00e1 en la pesta\u00f1a del navegador.<\/li>\n\n\n\n<li><code>&lt;body&gt;<\/code>: Aqu\u00ed es donde ir\u00e1 todo el contenido visible de la p\u00e1gina.<\/li>\n<\/ul>\n\n\n\n<p>Encontrar\u00e1s la explicaci\u00f3n de cada c\u00f3digo para empezar a digitar y crear nuestra primera p\u00e1gina con ayuda de nuestra IA nos podr\u00e1 indicar como cada c\u00f3digo vas creando poco a poco la p\u00e1gina  <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"466\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-08-015013-1024x466.png\" alt=\"\" class=\"wp-image-58200\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-08-015013-1024x466.png 1024w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-08-015013-300x137.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-08-015013-768x350.png 768w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-08-015013.png 1397w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 4: Agregar un t\u00edtulo y encabezado <\/h2>\n\n\n\n<p>Dentro de la etiqueta <code>&lt;body&gt;<\/code>, vamos a agregar un t\u00edtulo y un encabezado. Usa el siguiente c\u00f3digo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"792\" height=\"50\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-08-015446.png\" alt=\"\" class=\"wp-image-58201\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-08-015446.png 792w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-08-015446-300x19.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-08-015446-768x48.png 768w\" sizes=\"auto, (max-width: 792px) 100vw, 792px\" \/><\/figure>\n\n\n\n<p><code>&lt;h1&gt;<\/code>: Es una etiqueta de encabezado de primer nivel. Es el texto m\u00e1s grande y m\u00e1s importante en una p\u00e1gina. Puedes usar etiquetas <code>&lt;h2&gt;<\/code>, <code>&lt;h3&gt;<\/code>, etc., para encabezados m\u00e1s peque\u00f1os.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 5: Se revisa como va los cambios <\/h2>\n\n\n\n<p>En este paso vamos evidenciando poco a poco como la estructura de la p\u00e1gina va tomando cuerpo<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"270\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-80-1024x270.png\" alt=\"\" class=\"wp-image-58202\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-80-1024x270.png 1024w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-80-300x79.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-80-768x203.png 768w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-80-1536x405.png 1536w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-80.png 1915w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>podemos evidenciar que cada c\u00f3digo que digitamos va creando una matriz para crear t\u00edtulos contenidos y hasta una direcci\u00f3n IP.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 6: Agregar un t\u00edtulo y un encabezado<\/h2>\n\n\n\n<p>Dentro de la etiqueta <code>&lt;body&gt;<\/code>, vamos a agregar un t\u00edtulo y un encabezado. Usa el siguiente c\u00f3digo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"333\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-81-1024x333.png\" alt=\"\" class=\"wp-image-58203\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-81-1024x333.png 1024w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-81-300x97.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-81-768x250.png 768w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-81-1536x499.png 1536w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-81.png 1905w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p> Como visualizamos el t\u00edtulo aparece en color negro.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;h1&gt;<\/code>: Es una etiqueta de encabezado de primer nivel. Es el texto m\u00e1s grande y m\u00e1s importante en una p\u00e1gina. Puedes usar etiquetas <code>&lt;h2&gt;<\/code>, <code>&lt;h3&gt;<\/code>, etc., para encabezados m\u00e1s peque\u00f1os.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 7: Colores de la p\u00e1gina Web <\/h2>\n\n\n\n<p>El c\u00f3digo que generamos para que la p\u00e1gina tenga color de fuente y en el fondo es:<\/p>\n\n\n\n<p> &lt;body bgcolor =&#8221;green&#8221;text=&#8221;black&#8221;&gt;<\/p>\n\n\n\n<p>Lo que este c\u00f3digo quiere decir es que al fondo tenga un color espec\u00edfico, en este caso fue el verde y en el texto le ponemos un color que contraste como el negro, cabe clara que los comando siempre deben estar en ingl\u00e9s porque el lenguaje est\u00e1 desarrollado un idioma universal como lo es el ingl\u00e9s.  <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"332\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-08-023838-1024x332.png\" alt=\"\" class=\"wp-image-58204\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-08-023838-1024x332.png 1024w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-08-023838-300x97.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-08-023838-768x249.png 768w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-08-023838-1536x498.png 1536w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-08-023838.png 1905w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 8:Agregar un p\u00e1rrafo <\/h2>\n\n\n\n<p>Debajo del encabezado, agreguemos un p\u00e1rrafo que describa la p\u00e1gina. A\u00f1ade lo siguiente:<\/p>\n\n\n\n<p>&lt;p&gt;: con este comando podemos evidenciar y escribir diferentes p\u00e1rrafos  <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"944\" height=\"374\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-82.png\" alt=\"\" class=\"wp-image-58205\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-82.png 944w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-82-300x119.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-82-768x304.png 768w\" sizes=\"auto, (max-width: 944px) 100vw, 944px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 9: Insertar una imagen<\/h2>\n\n\n\n<p>Ahora vamos a agregar una imagen. Busca una imagen en tu computadora y col\u00f3cala en la misma carpeta donde guardaste el archivo <code>index.html<\/code>. Renombra la imagen como <code>mi-imagen.jpg<\/code> (o usa el nombre que prefieras, pero aseg\u00farate de escribirlo correctamente en el c\u00f3digo).<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;img&gt;<\/code>: Se utiliza para mostrar una imagen<\/li>\n\n\n\n<li>.<code>src=\"mi-imagen.jpg\"<\/code>: Indica el nombre de la imagen que debe mostrarse.<\/li>\n\n\n\n<li><code>alt=\"Descripci\u00f3n de la imagen\"<\/code>: Proporciona una descripci\u00f3n que aparecer\u00e1 si la imagen no se carga y es \u00fatil para accesibilidad.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"534\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-83-1024x534.png\" alt=\"\" class=\"wp-image-58206\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-83-1024x534.png 1024w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-83-300x156.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-83-768x400.png 768w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-83-1536x801.png 1536w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-83.png 1910w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 10: presentaci\u00f3n del c\u00f3digo<\/h2>\n\n\n\n<p>Cada paso que realizamos en nuestra p\u00e1gina lo podremos evidenciar f\u00edsicamente en cuando refrescamos la p\u00e1gina como lo podemos evidenciaren la imagen anterior, pero como lo vemos la estructura es muy diferente en la imagen que continuaci\u00f3n vamos a ver podremos ver el esqueleto.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"951\" height=\"689\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-84.png\" alt=\"\" class=\"wp-image-58207\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-84.png 951w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-84-300x217.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-84-768x556.png 768w\" sizes=\"auto, (max-width: 951px) 100vw, 951px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 11: Como insertar un bot\u00f3n<\/h2>\n\n\n\n<p>Para insertar un bot\u00f3n en una p\u00e1gina web con HTML, puedes utilizar la etiqueta <code>&lt;button&gt;<\/code>. A continuaci\u00f3n te explico c\u00f3mo hacerlo y algunas opciones que puedes agregar para personalizar su funcionalidad.<\/p>\n\n\n\n<p>Podemos visualizar que en la parte izquierda se encuentra un bot\u00f3n, esta es una herramienta clave para mejorar la funcionalidad de una p\u00e1gina  web, haci\u00e9ndola m\u00e1s interactiva y permitiendo a los usuarios realizar tareas con facilidad. Esto mejora la experiencia del usuario y la navegaci\u00f3n en el sitio web.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"454\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-85-1024x454.png\" alt=\"\" class=\"wp-image-58208\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-85-1024x454.png 1024w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-85-300x133.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-85-768x341.png 768w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-85-1536x681.png 1536w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-85.png 1907w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 12:Como insertar un video <\/h2>\n\n\n\n<p>Para insertar un video en una p\u00e1gina web con HTML, puedes usar la etiqueta <code>&lt;video&gt;<\/code>. Esta etiqueta permite incrustar videos de manera nativa y ofrece varias opciones para personalizar c\u00f3mo se muestran. Aqu\u00ed te explico los pasos b\u00e1sicos y algunas opciones avanzadas.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">1. C\u00f3digo B\u00e1sico para Insertar un Video Local<\/h4>\n\n\n\n<p>Si tienes un archivo de video guardado en tu computadora (por ejemplo, <code>mivideo.mp4<\/code>), puedes agregarlo a tu p\u00e1gina web con el siguiente c\u00f3digo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"620\" height=\"209\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-86.png\" alt=\"\" class=\"wp-image-58209\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-86.png 620w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-86-300x101.png 300w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li> <strong><code>width<\/code> y <code>height<\/code><\/strong>: Especifican el tama\u00f1o del video en p\u00edxeles.<\/li>\n\n\n\n<li><strong><code>controls<\/code><\/strong>: Muestra los controles de reproducci\u00f3n, como el bot\u00f3n de play\/pause y el volumen.<\/li>\n\n\n\n<li><strong><code>&lt;source&gt;<\/code><\/strong>: Define la ubicaci\u00f3n y el formato del archivo de video. Aqu\u00ed se usa <code>mivideo.mp4<\/code>, y el tipo es <code>video\/mp4<\/code>.<\/li>\n\n\n\n<li><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Insertar Videos desde YouTube o Plataformas Externas<\/h3>\n\n\n\n<p>Si el video est\u00e1 en YouTube u otra plataforma, puedes usar un c\u00f3digo de incrustaci\u00f3n (<em>embed<\/em>) que facilita la inserci\u00f3n de videos externos.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Ve a YouTube y busca el video.<\/li>\n\n\n\n<li>Haz clic en <strong>Compartir &gt; Insertar<\/strong> y copia el c\u00f3digo HTML.<\/li>\n\n\n\n<li>Pega el c\u00f3digo en tu archivo HTML:<\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 13: Agregar un enlace<\/h2>\n\n\n\n<p><br><br>Agregar un enlace a una p\u00e1gina web en HTML es muy sencillo y se logra usando la etiqueta <code>&lt;a&gt;<\/code>. Esta etiqueta permite que los usuarios puedan hacer clic y ser redirigidos a otra p\u00e1gina o secci\u00f3n dentro o fuera del sitio web. A continuaci\u00f3n, te explico c\u00f3mo hacerlo y algunas opciones que puedes agregar para personalizar el enlace.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;a href=\"https:\/\/www.ejemplo.com\"&gt;<\/code>: Es un enlace. Lo que va en <code>href<\/code> es la URL del sitio al que queremos enlazar<\/li>\n\n\n\n<li>El texto entre <code>&lt;a&gt;<\/code> y <code>&lt;\/a&gt;<\/code> ser\u00e1 el texto en el que se puede hacer clic.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 14: Guardar y ver la p\u00e1gina en el navegador<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Guarda el archivo <code>index.html<\/code>.<\/li>\n\n\n\n<li>Abre la carpeta donde guardaste el archivo.<\/li>\n\n\n\n<li>Haz doble clic en <code>index.html<\/code>. Esto abrir\u00e1 la p\u00e1gina en tu navegador predeterminado.<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><\/li>\n<\/ol>\n\n\n\n<p>\u00a1Listo! Ahora deber\u00edas ver tu primera p\u00e1gina web con un t\u00edtulo, un encabezado, un p\u00e1rrafo, una imagen y un enlace.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 15: c\u00f3digo final y resultados<\/h2>\n\n\n\n<p>Aqu\u00ed encontraremos todo el c\u00f3digo para y los resultados:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"936\" height=\"861\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-88.png\" alt=\"\" class=\"wp-image-58211\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-88.png 936w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-88-300x276.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-88-768x706.png 768w\" sizes=\"auto, (max-width: 936px) 100vw, 936px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"916\" height=\"309\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-89.png\" alt=\"\" class=\"wp-image-58212\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-89.png 916w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-89-300x101.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-89-768x259.png 768w\" sizes=\"auto, (max-width: 916px) 100vw, 916px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"533\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-87-1024x533.png\" alt=\"\" class=\"wp-image-58210\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-87-1024x533.png 1024w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-87-300x156.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-87-768x399.png 768w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-87-1536x799.png 1536w, https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/image-87.png 1884w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Video explicativo <\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1080\" style=\"aspect-ratio: 1920 \/ 1080;\" width=\"1920\" controls src=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/20241108_043600.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Cr\u00e9ditos<\/h2>\n\n\n\n<p><strong>Autor<\/strong>: Danna Nicole Sandoval Pinz\u00f3n<\/p>\n\n\n\n<p><strong>Editor<\/strong>: Carlos Ivan Pinz\u00f3n Sanabria <\/p>\n\n\n\n<p><strong>C\u00f3digo:<\/strong>43399066<\/p>\n\n\n\n<p><strong>Universidad<\/strong>: Universidad Central<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Referencias <\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Andriambato, R. T. (2017). Influencia de las caracter\u00edsticas de la p\u00e1gina web en la decisi\u00f3n de compra online: an\u00e1lisis aplicado con wordpress.<\/li>\n\n\n\n<li>Perales Miranda, V. H. (2018). La crisis del agua en La Paz: Cambios y racionamiento del agua.&nbsp;<em>Temas sociales<\/em>, (43), 97-124.<\/li>\n\n\n\n<li>Pe\u00f1a, M. O. (2014). La plataforma Moodle: caracter\u00edsticas y utilizaci\u00f3n en ELE.&nbsp;<em>Universit\u00e0 degli Studi di Perugia<\/em>,&nbsp;<em>913<\/em>, 921.}<\/li>\n\n\n\n<li>Hobbs, L. (1999).&nbsp;<em>Dise\u00f1ar su propia p\u00e1gina web<\/em>. Marcombo.<\/li>\n\n\n\n<li>Brochero-Vergara, M. A., Guti\u00e9rrez-Vega, B. F., &amp; Pinto Celis, O. R. (2024). Evaluaci\u00f3n del sistema de monitoreo y control seg\u00fan la gu\u00eda PMBOK: proyecto CEDI FUTURE.<\/li>\n\n\n\n<li>C\u00e1rdenas Leiva, P. A., Galvis Medina, A. M. D. P., &amp; P\u00e1ez Parra, T. (2023). Construcci\u00f3n de las nuevas oficinas administrativas de los Laboratorios Roche Bogot\u00e1.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introducci\u00f3n Actualmente, una p\u00e1gina web es un recurso imprescindible para cualquier individuo o empresa que aspire a tener presencia en internet. Las plataformas digitales facilitan la difusi\u00f3n de informaci\u00f3n, servicios, productos e ideas a una audiencia mundial de forma r\u00e1pida y eficaz. Su uso es muy diverso: pueden actuar comoSeguir Leyendo<\/p>\n","protected":false},"author":1729,"featured_media":58509,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"categories":[30],"tags":[],"class_list":["post-58193","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-niixer"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>AI G\u00c9MINIS Y CHATGPT Realizando una P\u00e1gina Web paso a paso &#8211; Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos<\/title>\n<meta name=\"description\" content=\"En Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos encuentra los mejores contenidos del mundo de la tecnolog\u00eda | AI G\u00c9MINIS Y CHATGPT Realizando una P\u00e1gina Web paso a paso\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/niixer.com\/index.php\/2024\/11\/08\/ai-geminis-y-chatgpt-realizando-una-pagina-web-paso-a-paso\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AI G\u00c9MINIS Y CHATGPT Realizando una P\u00e1gina Web paso a paso &#8211; Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos\" \/>\n<meta property=\"og:description\" content=\"En Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos encuentra los mejores contenidos del mundo de la tecnolog\u00eda | AI G\u00c9MINIS Y CHATGPT Realizando una P\u00e1gina Web paso a paso\" \/>\n<meta property=\"og:url\" content=\"https:\/\/niixer.com\/index.php\/2024\/11\/08\/ai-geminis-y-chatgpt-realizando-una-pagina-web-paso-a-paso\/\" \/>\n<meta property=\"og:site_name\" content=\"Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/niixer\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-08T09:45:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-08T19:14:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/625c8a30eea74.r_d.487-342-0-1.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"dsandovalp1\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"dsandovalp1\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutos\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AI G\u00c9MINIS Y CHATGPT Realizando una P\u00e1gina Web paso a paso &#8211; Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos","description":"En Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos encuentra los mejores contenidos del mundo de la tecnolog\u00eda | AI G\u00c9MINIS Y CHATGPT Realizando una P\u00e1gina Web paso a paso","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/niixer.com\/index.php\/2024\/11\/08\/ai-geminis-y-chatgpt-realizando-una-pagina-web-paso-a-paso\/","og_locale":"es_ES","og_type":"article","og_title":"AI G\u00c9MINIS Y CHATGPT Realizando una P\u00e1gina Web paso a paso &#8211; Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos","og_description":"En Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos encuentra los mejores contenidos del mundo de la tecnolog\u00eda | AI G\u00c9MINIS Y CHATGPT Realizando una P\u00e1gina Web paso a paso","og_url":"https:\/\/niixer.com\/index.php\/2024\/11\/08\/ai-geminis-y-chatgpt-realizando-una-pagina-web-paso-a-paso\/","og_site_name":"Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos","article_publisher":"https:\/\/www.facebook.com\/niixer\/","article_published_time":"2024-11-08T09:45:47+00:00","article_modified_time":"2024-11-08T19:14:58+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/625c8a30eea74.r_d.487-342-0-1.jpeg","type":"image\/jpeg"}],"author":"dsandovalp1","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"dsandovalp1","Tiempo de lectura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/niixer.com\/index.php\/2024\/11\/08\/ai-geminis-y-chatgpt-realizando-una-pagina-web-paso-a-paso\/#article","isPartOf":{"@id":"https:\/\/niixer.com\/index.php\/2024\/11\/08\/ai-geminis-y-chatgpt-realizando-una-pagina-web-paso-a-paso\/"},"author":{"name":"dsandovalp1","@id":"https:\/\/niixer.com\/#\/schema\/person\/a6db12a0bbcf34ba30cdd30cd0c5a2b7"},"headline":"AI G\u00c9MINIS Y CHATGPT Realizando una P\u00e1gina Web paso a paso","datePublished":"2024-11-08T09:45:47+00:00","dateModified":"2024-11-08T19:14:58+00:00","mainEntityOfPage":{"@id":"https:\/\/niixer.com\/index.php\/2024\/11\/08\/ai-geminis-y-chatgpt-realizando-una-pagina-web-paso-a-paso\/"},"wordCount":1725,"publisher":{"@id":"https:\/\/niixer.com\/#organization"},"image":{"@id":"https:\/\/niixer.com\/index.php\/2024\/11\/08\/ai-geminis-y-chatgpt-realizando-una-pagina-web-paso-a-paso\/#primaryimage"},"thumbnailUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/625c8a30eea74.r_d.487-342-0-1.jpeg","articleSection":["Niixer"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/niixer.com\/index.php\/2024\/11\/08\/ai-geminis-y-chatgpt-realizando-una-pagina-web-paso-a-paso\/","url":"https:\/\/niixer.com\/index.php\/2024\/11\/08\/ai-geminis-y-chatgpt-realizando-una-pagina-web-paso-a-paso\/","name":"AI G\u00c9MINIS Y CHATGPT Realizando una P\u00e1gina Web paso a paso &#8211; Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos","isPartOf":{"@id":"https:\/\/niixer.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/niixer.com\/index.php\/2024\/11\/08\/ai-geminis-y-chatgpt-realizando-una-pagina-web-paso-a-paso\/#primaryimage"},"image":{"@id":"https:\/\/niixer.com\/index.php\/2024\/11\/08\/ai-geminis-y-chatgpt-realizando-una-pagina-web-paso-a-paso\/#primaryimage"},"thumbnailUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/625c8a30eea74.r_d.487-342-0-1.jpeg","datePublished":"2024-11-08T09:45:47+00:00","dateModified":"2024-11-08T19:14:58+00:00","description":"En Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos encuentra los mejores contenidos del mundo de la tecnolog\u00eda | AI G\u00c9MINIS Y CHATGPT Realizando una P\u00e1gina Web paso a paso","breadcrumb":{"@id":"https:\/\/niixer.com\/index.php\/2024\/11\/08\/ai-geminis-y-chatgpt-realizando-una-pagina-web-paso-a-paso\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/niixer.com\/index.php\/2024\/11\/08\/ai-geminis-y-chatgpt-realizando-una-pagina-web-paso-a-paso\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/niixer.com\/index.php\/2024\/11\/08\/ai-geminis-y-chatgpt-realizando-una-pagina-web-paso-a-paso\/#primaryimage","url":"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/625c8a30eea74.r_d.487-342-0-1.jpeg","contentUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/625c8a30eea74.r_d.487-342-0-1.jpeg","width":1200,"height":675},{"@type":"BreadcrumbList","@id":"https:\/\/niixer.com\/index.php\/2024\/11\/08\/ai-geminis-y-chatgpt-realizando-una-pagina-web-paso-a-paso\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/niixer.com\/"},{"@type":"ListItem","position":2,"name":"AI G\u00c9MINIS Y CHATGPT Realizando una P\u00e1gina Web paso a paso"}]},{"@type":"WebSite","@id":"https:\/\/niixer.com\/#website","url":"https:\/\/niixer.com\/","name":"Portal de noticias de tecnolog\u00eda, ciencia, Android, iOS, Realidad Virtual, Aumentada y Mixta, Videojuegos, computadores, todo lo mas reciente en tecnolog\u00eda","description":"Portal de noticias de tecnolog\u00eda","publisher":{"@id":"https:\/\/niixer.com\/#organization"},"alternateName":"Niixer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/niixer.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/niixer.com\/#organization","name":"Niixer","alternateName":"Niixer.com","url":"https:\/\/niixer.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/niixer.com\/#\/schema\/logo\/image\/","url":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/08\/logo-niixer-sin-fondo-1.png","contentUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/08\/logo-niixer-sin-fondo-1.png","width":140,"height":140,"caption":"Niixer"},"image":{"@id":"https:\/\/niixer.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/niixer\/","https:\/\/www.instagram.com\/niixer.tecnologia\/"]},{"@type":"Person","@id":"https:\/\/niixer.com\/#\/schema\/person\/a6db12a0bbcf34ba30cdd30cd0c5a2b7","name":"dsandovalp1","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/4640961cd5f4b2651c1add35dfc9c5f15fd783e78abc534a2a3af99b10421a0e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4640961cd5f4b2651c1add35dfc9c5f15fd783e78abc534a2a3af99b10421a0e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4640961cd5f4b2651c1add35dfc9c5f15fd783e78abc534a2a3af99b10421a0e?s=96&d=mm&r=g","caption":"dsandovalp1"},"url":"https:\/\/niixer.com\/index.php\/author\/dsandovalp1\/"}]}},"jetpack_featured_media_url":"https:\/\/niixer.com\/wp-content\/uploads\/2024\/11\/625c8a30eea74.r_d.487-342-0-1.jpeg","_links":{"self":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts\/58193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/users\/1729"}],"replies":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/comments?post=58193"}],"version-history":[{"count":3,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts\/58193\/revisions"}],"predecessor-version":[{"id":58510,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts\/58193\/revisions\/58510"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/media\/58509"}],"wp:attachment":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/media?parent=58193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/categories?post=58193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/tags?post=58193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}