por Iván Gómez Torres hace 10 meses
157
Ver más
Curso de app mobile utilizando woocommerce
Curso de creación de bloques en gutenberg para wordpress
Curso de creación de plugins para wordpress
Curso profesional de wordpress
Curso práctico de wordpress
Curso de entornos de desarrollo y deployment en wordpress
Curso de funudamentos de bases de datos
Curso de patrones de diseño y buenas prácticas en PHP
Curso de programación orientada a objetos en PHP
Curso de programación orientada a objetos: POO
Curso de manejo de datos en PHP
Curso de PHP con composer
Curso de fundamentos de ecommerce
Curso de creación de temas para woocommerce
Curso de creación de tiendas en línea con woocommerce
Curso de creación de temas para wordpress
Curso práctico de PHP
Curso básico de PHP: arreglos, funciones y estructuras de control
Curso básico de PHP: instalación, fundamentos y operadores
Curso básico de Javascript
Curso práctico de HTML y CSS
Curso de creación de blogs con worpress
Cierre del curso
Herramientas de wordpress
Creando nuestro blog
Trabajando desde el administrador
Comenzando con wordpress
Instalación de wordpress
Presentación del curso y de wordpress
Hosting platform of choice
Instalando wordpress de forma local -platzi
Instalando wordpress de forma manual -platzi
¿Cómo comprar tu dominio y tu hosting?
Curso de creación de tiendas en línea con woocommerc -Platzi
Curso de wordpress -Platzi
Curso de creación de páginas web
Comparte tu proyecto del curso
Próximos pasos para convertirte en web developer
Conoce otros proyectos de este curso!
Mi primera página web con una plantilla de wordpress
Maqueteando el hero con elementor
Mi primera página web con elementor
Instalación y configuración de elementor
Despliega tu página web con wordpress
¿Qué es no-code?
¿Cómo comprar un hosting para mi página web?
Compra el dominio de tu página web
¿Cómo publicar tu página web gratis en internet?
¿Cómo hacer deploy a internet?
Sitios code con HTML y CSS
Detalles finales con HTML y CSS
Estilos para las imágenes de redes sociales
Estilizando el hero: información del hero
Estilizando el hero: elementos encima imágenes
Estilos del menú
Mis primeros estilos con CSS
¿Qué debo saber de CSS?
Maqueteando la sección de redes sociales
Maqueteando el hero
Mi primera página web con HTML
Material que considero importante
Descargar VSCode
Qué es VSCode y cómo usar
Lecturas recomendedas
¿Qué debo saber de HTML?
Javier Nuñez
https://www.w3schools.com/
Referencia de elementos HTML - HTML: Lenguaje de etiquetas de hipertexto / MDN
Esta página lista todos los elementos HTML. Están agrupados por funciones para ayudarte a encontrar lo que tienes en mente con facilidad. Aunque esta guía está escrita para aquellos que son nuevos escribiendo código, se pretende que sea una referencia útil para cualquiera.
Nota: Para más información básica acerca de los elementos y atributos HTML, vea la sección sobre elementos en el artículo 'Introducción a HTML' (en-US).
ElementDescription<html>El elemento HTML <html> (o elemento HTML raiz) representa la raiz de un documento HTML. El resto de elementos descienden de este elemento.
Los metadatos contienen información sobre la página. Esto incluye información sobre estilos, scripts y datos que ayudan al software (search engines (en-US), browsers, etc.) a usar y generar la página. Los metadatos de estilos y scripts pueden estar definidos en la página o estar enlazados a otro fichero que contiene la información.
ElementDescription<base>El elemento HTML <base> especifica la dirección URL base que se utilizará para todas las direcciones URL relativas contenidas dentro de un documento. Sólo puede haber un elemento <base> en un documento.<head>El elemento HTML <head> provee información general (metadatos) acerca del documento, incluyendo su título y enlaces a scripts y hojas de estilos.<link>El elemento HTML <link> especifica la relación entre el documento actual y un recurso externo. Los usos posibles de este elemento incluyen la definición de un marco relacional para navegación. Este elemento es más frecuentemente usado para enlazar hojas de estilos.<meta>Sus etiquetas son: <meta> (solo tiene una).<style>Sus etiquetas son: <style> y </style> (ambas obligatorias).<title>El elemento <title> HTML define el título del documento que se muestra en un Browser la barra de título o la pestaña de una página. Solo contiene texto; las etiquetas dentro del elemento se ignoran.
ElementDescription<body>El elemento <body> de HTML representa el contenido de un documento HTML. Solo puede haber un elemento <body> en un documento.
Los elementos de seccionamiento del contenido te permiten organizar los contenidos del documento en partes lógicas. Usa los elementos de seccionado para crear una descripción amplia de los contenidos de tu página, incluyendo el encabezado y pie de página y elementos para identificar secciones.
ElementDescription<address>El elemento HTML <address> aporta información de contacto para su article más cercano o ancestro body; en el último caso lo aplica a todo el documento.<article>El Elemento de HTML <article> representa una composición auto-contenida en un documento, una página, una aplicación o en un sitio, que se quiere que sea distribuíble y/o reutilizable de manera independiente, por ejemplo, en la redifusión. Algunos ejemplos podrían ser un mensaje en un foro, un artículo de una revista o un periódico, una entrada de blog, el comentario de un usuario, un widget o gadget interactivo, o cualquier otro elemento de contenido independiente.<aside>El elemento HTML <aside> representa una sección de una página que consiste en contenido que está indirectamente relacionado con el contenido principal del documento. Estas secciones son a menudo representadas como barras laterales o como inserciones y contienen una explicación al margen como una definición de glosario, elementos relacionados indirectamente, como publicidad, la biografía del autor, o en aplicaciones web, la información de perfil o enlaces a blogs relacionados.<footer>El Elemento HTML Footer (<footer>) representa un pie de página para el contenido de sección más cercano o el elemento raíz de sección (p.e, su ancestro mas cercano <article>, <aside>, <nav>, <section>,<blockquote>, <body>, <details>, <fieldset>, <figure>, <td>). Un pie de página típicamente contiene información acerca de el autor de la sección, datos de derechos de autor o enlaces a documentos relacionados.<header>El elemento de HTML Header (<header>) representa un grupo de ayudas introductorias o de navegación. Puede contener algunos elementos de encabezado, así como también un logo, un formulario de búsqueda, un nombre de autor y otros componentes.<h1> (en-US), <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h6> (en-US)Los elementos de encabezado implementan seis niveles de encabezado del documento, <h1> es el más importante, y <h6>, el menos importante. Un elemento de encabezado describe brevemente el tema de la sección que presenta. La información de encabezado puede ser usada por los agentes usuarios, por ejemplo, para construir una tabla de contenidos para un documento automáticamente.<main>El elemento HTML <main> representa el contenido principal del body de un documento o aplicación. El área principal del contenido consiste en el contenido que está directamente relacionado, o se expande sobre el tema central de un documento o la funcionalidad central de una aplicación. Este contenido debe ser único al documento, excluyendo cualquier contenido que se repita a través de un conjunto de documentos como barras laterales, enlaces de navegación, información de derechos de autor, logos del sitio y formularios de búsqueda (a menos, claro, que la función principal del documento sea un formulario de búsqueda).<nav>El elemento HTML <nav> representa una sección de una página cuyo propósito es proporcionar enlaces de navegación, ya sea dentro del documento actual o a otros documentos. Ejemplos comunes de secciones de navegación son menús, tablas de contenido e índices.<section>El elemento de HTML section (<section>) representa una sección genérica de un documento. Sirve para determinar qué contenido corresponde a qué parte de un esquema. Piensa en el esquema como en el índice de contenido de un libro; un tema común y subsecciones relacionadas. Es, por lo tanto, una etiqueta semántica. Su funcionalidad principal es estructurar semánticamente un documento a la hora de ser representado por parte de un agente usuario. Por ejemplo, un agente de usuario que represente el documento en voz, podría exponer al usuario el índice de contenido por niveles para navegar rápidamente por las distintas partes.
Utiliza los elementos HTML de contenido del texto para organizar bloques o secciones de contenido colocados entre los tags de apertura<body> y cierre. Es importante para la accessibility y el SEO, que estos elementos se identifiquen con el objetivo o la estructura de ese contenido.
ElementDescription<blockquote>Sus etiquetas son: <blockquote> y </blockquote> (ambas obligatorias).<dd>El elemento HTML <dd> provee detalles acerca de o la definición de un término precedente (dt) en una lista de descripciones (dl).<div>Sus etiquetas son: <div> y </div> (ambas obligatorias).<dl>El elemento HTML <dl> representa una lista descriptiva. El elemento encierra una lista de grupos de términos (especificados con el uso del elemento dt) y de descripciones (proveídas con elementos dd). Algunos usos comunes para este elemento son implementar un glosario o para desplegar metadatos (lista de pares llave-valor).<dt>El elemento HTML <dt> especifica un término en una descripción o lista de definiciones, y como tal debe utilizarse dentro de un elemento dl Es usualmente seguido por un elemento dd; sin embargo, múltiples elementos <dt> en un renglón indican diferentes términos los cuales todos son definidos por el siguiente elemento dd.<figcaption>El elemento HTML <figcaption> representa un subtítulo o leyenda asociado al contenido del elemento padre figure, pudiendo ser colocado como primer o último hijo. Es importante destacar que el elemento <figcaption> es opcional.<figure>El elemento HTML <figure> representa contenido independiente, a menudo con un título. Si bien se relaciona con el flujo principal, su posición es independiente de éste. Por lo general, se trata de una imagen, una ilustración, un diagrama, un fragmento de código, o un esquema al que se hace referencia en el texto principal, pero que se puede mover a otra página o a un apéndice sin que afecte al flujo principal.<hr>Sus etiquetas son: <hr/> (solo tiene una).<li>Sus etiquetas son: <li> y </li> (la de cierre es opcional).<menu>Sus etiquetas son: <menu> y </menu> (ambas obligatorias).<ol>Sus etiquetas son: <ol> y </ol> (ambas obligatorias).<p>Sus etiquetas son: <p> y </p> (la de cierre es opcional).<pre>El Elemento HTML <pre> (o Texto HTML Preformateado) representa texto preformateado. El texto en este elemento típicamente se muestra en una fuente fija, no proporcional, exactamente como es mostrado en el archivo. Los espacios dentro de este elemento también son mostrados como están escritos.<ul>Sus etiquetas son: <ul> y </ul> (ambas obligatorias).
Utilice la semántica del texto en línea HTML para definir el significado, estructura, o el estilo de una palabra, una línea o cualquier pieza arbitraria de texto.
ElementDescription<a>El Elemento HTML Anchor <a> crea un enlace a otras páginas de internet, archivos o ubicaciones dentro de la misma página, direcciones de correo, o cualquier otra URL.<abbr>El elemento HTML <abbr> (o Elemento de Abreviación HTML) representa una abreviación o acrónimo; el atributo opcional title puede ampliar o describir la abreviatura. Si está presente, el atributo title debe contener la descripción completa y nada más.<b>b de bold=negrita.<bdi>El elemento _HTML <bdi> _(o elemento de aislamiento Bi-Direccional) aisla un trozo de texto para que pueda ser formateado con una dirección diferente al texto que hay fuera de él.<bdo>bdo Bi-Directional Overriding=Anulación de bidireccionalidad.<br>El elemento HTML line break <br> produce un salto de línea en el texto (retorno de carro). Es útil para escribir un poema o una dirección, donde la división de las líneas es significante.<cite>Sus etiquetas son: <cite> y </cite> (ambas obligatorias)<code>Sus etiquetas son: <code> y </code> (ambas obligatorias)<data>El Elemento HTML <data> vincula un contenido dado con una traducción legible por una máquina. Si el contenido está relacionado con time- o date-, debe usarse el elemento time.<dfn>Sus etiquetas son: <dfn> y </dfn> (ambas obligatorias)<em>El elemento HTML <em> es el apropiado para marcar con énfasis las partes importantes de un texto. El elemento <em> puede ser anidado, con cada nivel de anidamiento indicando un mayor grado de énfasis.<i>Sus etiquetas son: <i> y </i> (Ambas obligatorias)<kbd>Sus etiquetas son: <kbd> y </kbd> (ambas obligatorias)<mark>El Elemento HTML Mark <mark> representa un texto marcado o resaltado como referencia o anotación, debido a su relevancia o importancia en un contexto particular.<q>El elemento HTML <q> indica que el texto adjunto es una cita corta en línea. La mayoría de los navegadores modernos implementan esto rodeando el texto entre comillas. Este elemento está destinado a citas breves que no requieren saltos de párrafo; para citas de bloque independiente, utiliza el elemento blockquote.<rp> (en-US)<rt> (en-US)<ruby> (en-US)<s>Sus etiquetas son: <s> y </s> (Ambas obligatorias)<samp>El elemento HTML Sample (<samp>) se utiliza para incluir texto en línea que representa una muestra (o cita) de la salida de un programa de ordenador. El contenido de esta etiqueta es renderizado generalmente usando la tipografía monoespaciada por defecto del navegador.<small>El elemento HTML <small> hace el tamaño del texto una talla más pequeña (por ejemplo, de largo a mediano, o de pequeño a extra pequeño) que el tamaño mínimo de fuente del navegador. En HTML5, este elemento es reutilizado para representar comentarios laterales y letra pequeña, incluyendo derechos de autor y texto legal, independientemente de su estilo de presentación.<span>Sus etiquetas son: <span> y </span> (ambas obligatorias).<strong>Sus etiquetas son: <strong> y </strong> (ambas obligatorias)<sub>El elemento HTML <sub> define un fragmento de texto que se debe mostrar, por razones tipográficas, más bajo, y generalmente más pequeño, que el tramo principal del texto, es decir, en subíndice.<sup>El elemento HTML <sup> define un fragmento de texto que se debe mostrar, por razones tipográficas, más alto, y generalmente más pequeño, que el tramo principal del texto, es decir, en superíndice.<time>El elemento HTML <time> representa un periodo específico en el tiempo. Puede incluir el atributo datetime para convertir las fechas en un formato interno legible por un ordenador, permitiendo mejores resultados en los motores de búsqueda o características personalizadas como recordatorios.<u>Sus etiquetas son: <u> y </u> (Ambas obligatorias)<var>Sus etiquetas son: <var> y </var> (ambas obligatorias)<wbr>El elemento HTML word break opportunity <wbr> representa una posición dentro del texto donde el explorador puede opcionalmente saltar una línea , aunque sus reglas de salto de línea de otra manera no crearían un salto en esa posición .En páginas codificadas en UTF-8 , <wbr> se comporta como el punto de código U+200B ZERO-WIDTH SPACE. En particular se comporta como un punto de código unicode bidi BN , significando esto que no tiene efecto en ordenamiento bidi : <div dir=rtl>123,<wbr>456</div> muestra , cuando no se rompa en dos líneas , 123, 456 y no 456 , 123 .
HTML soporta varios recursos multimedia como imágenes, audio, y video.
ElementDescription<area>area de area=área<audio>El elemento audio se usa para insertar contenido de audio en un documento HTML o XHTML. El elemento audio se agregó como parte de HTML 5.<img>El elemento de imagen HTML <img> representa una imagen en el documento.<map>Sus etiquetas son: <map> y </map> (ambas obligatorias).<track>El elemento HTML <track> se utiliza como elemento hijo de los elementos multimedia, audio y video. Le permite especificar pistas de texto cronometradas (o datos basados en el tiempo), por ejemplo, para manejar subtítulos automáticamente. Las pistas están formateadas en formato WebVTT (en-US) (archivos .vtt): Web Video Text Tracks (pistas de texto de video web).<video>El elemento video se utiliza para incrustar vídeos en un documento HTML o XHTML.
Además de los contenidos multimedia habituales, HTML puede incluir otra variedad de contenidos, aunque no siempre es fácil de interactuar con ellos.
ElementDescription<embed>El Elemento HTML Embed ( <embed> ) representa un punto de integración para una aplicación externa o de contenido interactivo (en otras palabras, un plug-in).<iframe>El elemento HTML <iframe> (de inline frame) representa un contexto de navegación anidado, el cual permite incrustrar otra página HTML en la página actual.<object>El elemento HTML <object> representa un recurso externo, que puede ser tratado como una imagen, un contexto de navegación anidado, o como un recurso que debe ser manejado por un plugin.<picture>El elemento HTML <picture> es un contenedor usado para especificar múltiples elementos source y un elemento img contenido en él para proveer versiones de una imagen para diferentes escenarios de dispositivos. Si no hay coincidencias con los elementos <source>, el archivo especificado en los atributos src del elemento <img> es utilizado. La imagen seleccionada es entonces presentada en el espacio ocupado por el elemento <img>.<portal> (en-US)<source>El elemento HTML <source> especifica recursos de medios múltiples para los elementos picture, audio, o video. Es un elemento vacío. Normalmente se utiliza para servir el mismo contenido multimedia en varios formatos soportados por diferentes navegadores (en-US).
Con el fin de crear contenido dinámico y aplicaciones Web, HTML soporta el uso de lenguajes de scripting, el más prominente es JavaScript. Ciertos elementos soportan esta capacidad.
ElementDescription<canvas>El elemento HTML canvas (<canvas>) se puede utilizar para dibujar gráficos a través de secuencias de comandos (por lo general JavaScript ). Por ejemplo, puede usarse para dibujar gráficos, hacer composiciones de fotos o incluso realizar animaciones.<noscript>Sus etiquetas son: <noscript> y </noscript> (ambas obligatorias).<script> (en-US)
Estos elementos permiten proporcionar indicios de que determinadas partes del texto han sido alteradas.
ElementDescription<del>Sus etiquetas son: <del> y </del> (ambas obligatorias).<ins>Sus etiquetas son: <ins> e </ins> (ambas obligatorias).
Estos elementos son usados para crear y manejar datos tabulados.
ElementDescription<caption>Sus etiquetas son: <caption> y </caption> (ambas obligatorias).<col>Sus etiquetas son: <col> (solo tiene una).<colgroup>Sus etiquetas son: <colgroup> y </colgroup> (la de cierre es opcional).<table>El Elemento de Tabla HTML (<table>) representa datos en dos o mas dimensiones.<tbody> (en-US)<td>El elemento HTML Celda de tabla (<td>) define la celda de una tabla que contiene datos. Esta participa en el modelo de tablas.<tfoot> (en-US)<th>El elemento HTML <th> define una celda como encabezado de un grupo de celdas en una tabla. La naturaleza exacta de este grupo está definida por los atributos scope y headers.<thead> (en-US)<tr>El elemento HTML fila de tabla (table row) <tr> define una fila de celdas en una tabla. Estas pueden ser una mezcla de elementos td y th.
HTML provee un número de elementos que pueden usarse conjuntamente para crear formularios los cuales el usuario puede completar y enviar al sitio Web o a una aplicación. Hay una gran cantidad de información acerca de ésto disponible en la HTML forms guide (en-US).
ElementDescription<button>button = botón.<datalist>El elemento HTML <datalist> contiene un conjunto de elementos option que representan los valores disponibles para otros controles.<fieldset>Sus etiquetas son: <fieldset> y </fieldset> (ambas obligatorias).<form>El elemento HTML form (<form>) representa una sección de un documento que contiene controles interactivos que permiten a un usuario enviar información a un servidor web.<input>El elemento HTML <input> se usa para crear controles interactivos para formularios basados en la web con el fin de recibir datos del usuario.Hay disponible una amplia variedad de tipos de datos de entrada y widgets de control, que dependen del dispositivo y el agente de usuario (user agent (en-US)).El elemento <input> es uno de los más potentes y complejos en todo HTML debido a la gran cantidad de combinaciones de tipos y atributos de entrada.<label>El Elemento HTML <label> representa una etiqueta para un elemento en una interfaz de usuario. Este puede estar asociado con un control ya sea mediante la utilizacion del atributo for, o ubicando el control dentro del elemento label. Tal control es llamado "el control etiquetado" del elemento label.<legend>Sus etiquetas son: <legend> y </legend> (ambas obligatorias).<meter> (en-US)<optgroup> (en-US)<option>En un formulario Web , el elemento HTML <option> se usa para representar un item dentro de un select, un optgroup o un elemento HTML5 datalist .<output> (en-US)<progress>La etiqueta HTML <progress> se utiliza para visualizar el progreso de una tarea. Aunque los detalles de como se muestran depende directamente del navegador que utiliza el cliente, aunque básicamente aparece una barra de progreso.<select>El elemento select (<select>) de HTML representa un control que muestra un menú de opciones. Las opciones contenidas en el menú son representadas por elementos option, los cuales pueden ser agrupados por elementos optgroup. La opcion puede estar preseleccionada por el usuario.<textarea>El elemento HTML <textarea> representa un control para la edición mutilínea de texto sin formato.
HTML ofrece una selección de elementos que pueden ayudar a crear objetos de interfaz de usuario interactivos.
ElementDescription<details>El elemento HTML Details <details> es usado como un widget de revelación a través del cual el usuario puede obtener información adicional .<dialog>El elemento HTML <dialog> representa una caja de diálogo u otro componente interactivo, como inspector o ventana.<summary> (en-US)
Los Componentes Web son una tecnología relacionada con HTML que hacen que sea posible, en esencia, crear y personalizar elementos como si fueran HTML normal. Además, pueden crear versiones personalizadas de los elementos HTML estándar.
ElementDescription<content>El elemento HTML <content> es usado dentro de un Shadow DOM como un insertion point . No está pensado para ser usado en HTML ordinario . Es usado con Web Components.<shadow> (en-US)<slot>El elemento HTML <slot> —parte de la suite tecnologica Web Components — es un placeholder en un componente que tu puedes llenar con tu propio marcado, que te permite crear árboles DOM por separado y presentarlos juntos.<template>El elemento HTML <template> es un mecanismo para mantener el contenido HTML del lado del cliente que no se renderiza cuando se carga una página, pero que posteriormente puede ser instanciado durante el tiempo de ejecución empleando JavaScript.
Advertencia: Estos son elementos HTML viejos los cuales están obsoletos y no deben usarse. Nunca debería usarlos en un nuevo proyecto y debería reemplazarlos en proyectos viejos tan pronto como sea posible. Se listan aquí solo con propósitos informativos.
ElementDescription<acronym>acromym de acromyn=acrónimo<applet>Sus etiquetas son: <applet> y </applet> (ambas obligatorias)<bgsound>El elemento HTML de sonido de fondo (<bgsound>) es un elemento de Internet Explorer que asocia un sonido de fondo con un página .<big>big de big=grande<blink>El elemento HTML blink (<blink>) no es un elemento estándar que causa que el texto encerrado parpadee lentamente .<center>Sus etiquetas son: <center> y </center> (ambas obligatorias).<content>El elemento HTML <content> es usado dentro de un Shadow DOM como un insertion point . No está pensado para ser usado en HTML ordinario . Es usado con Web Components.<dir>Sus etiquetas son: <dir> y </dir> (ambas obligatorias).<font>Sus etiquetas son: <font> y </font> (ambas obligatorias).<frame>Sus etiquetas son: <frame> (solo tiene una).<frameset>Sus etiquetas son: <frameset> y </frameset> (ambas obligatorias).<image>El elemento HTML <image> fue un elemento experimental diseñado para mostrar imágenes . Nuca fue implementado y el elemento estándar img debe de ser usado .<keygen>El elemento keygen de HTML existe para facilitar la generación de llaves, y el envío de la clave pública como parte de un formulario HTML. Este mecanismo está diseñado para utilizarse con sistemas de gestión de certificados basados en la Web. Se espera que el elemento keygen se utilice en un formulario HTML, junto con otra información necesaria para la construcción de una solicitud de certificado, y que el resultado del proceso será un certificado firmado.<marquee>La etiqueta html <marquee> se utiliza para insertar un area de texto en movimiento. También se la conoce como marquesina.<menuitem> (en-US)<nobr>El elemento HTML <nobr> previene que una línea de texto se divida en una nueva línea, así, se presentará en una línea larga por lo que puede ser necesario hacer un desplazamiento de pantalla. Esta etiqueta no es un estándar HTML y no debería ser usada, en su lugar use la propiedad CSS white-space como en este ejemplo:<noembed> (en-US)<noframes>Sus etiquetas son: <noframes> y </noframes> (ambas obligatorias).<param>Sus etiquetas son: <param> (solo tiene una).<plaintext> (en-US)<rb> (en-US)<rtc> (en-US)<shadow> (en-US)<spacer> (en-US)<strike>Sus etiquetas son: <strike> y </strike> (Ambas obligatorias)<tt>Sus etiquetas son: <tt> y </tt> (Ambas obligatorias)<xmp>El elemento HTML example element <xmp> dibuja texto entre las etiquetas de inicio y fin sin interpretar el HTML que se encuentra en medio y lo muestra usando un tipo de letra monoespaciada . La especificación de HTML2 recomendaba que que esta debería de ser dibujada suficientemente amplia para permitir 80 caracteres por línea .
Want to get more involved? Learn how to contribute.
This page was last modified on 29 nov 2022 by MDN contributors.
HTML: Lenguaje de etiquetas de hipertexto / MDN
HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) es el componente más básico de la Web. Define el significado y la estructura del contenido web. Además de HTML, generalmente se utilizan otras tecnologías para describir la apariencia/presentación de una página web (CSS) o la funcionalidad/comportamiento (JavaScript).
"Hipertexto" hace referencia a los enlaces que conectan páginas web entre sí, ya sea dentro de un único sitio web o entre sitios web. Los enlaces son un aspecto fundamental de la Web. Al subir contenido a Internet y vincularlo a las páginas creadas por otras personas, te conviertes en un participante activo en la «World Wide Web» (Red Informática Mundial).
HTML utiliza "marcas" para etiquetar texto, imágenes y otro contenido para mostrarlo en un navegador Web. Las marcas HTML incluyen "elementos" especiales como <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output> (en-US), <progress>, <video>, <ul>, <ol>, <li> y muchos otros.
Un elemento HTML se distingue de otro texto en un documento mediante "etiquetas", que consisten en el nombre del elemento rodeado por "<" y ">". El nombre de un elemento dentro de una etiqueta no distingue entre mayúsculas y minúsculas. Es decir, se puede escribir en mayúsculas, minúsculas o una mezcla. Por ejemplo, la etiqueta <title> se puede escribir como <Title>, <TITLE> o de cualquier otra forma.
Los siguientes artículos pueden ayudarte a obtener más información sobre HTML.
Introducción a HTML
Si eres nuevo en el desarrollo Web, asegúrate de leer el artículo Conceptos básicos de HTML para aprender qué es HTML y cómo usarlo.
Tutoriales HTML
Para ver artículos sobre cómo usar HTML, así como tutoriales y ejemplos completos, consulte el Área de aprendizaje de HTML.
Referencia HTML
En nuestra extensa sección referencia HTML encontrarás los detalles sobre cada elemento y atributo en HTML.
Hemos elaborado un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.
El Área de aprendizaje de HTML incluye varios módulos que enseñan HTML desde cero, sin necesidad de conocimientos previos.
Este módulo prepara el escenario para que te acostumbres a conceptos y sintaxis importantes, tal como la aplicación de HTML al texto, cómo crear hipervínculos y cómo utilizar HTML para estructurar una página web.
Este módulo explora cómo usar HTML para incluir multimedia en tus páginas web, incluidas las diferentes formas en que se pueden incluir imágenes y cómo insertar video, audio e incluso otras páginas web completas.
Representar datos tabulares en una página web de una manera comprensible y accesible puede ser un desafío. Este módulo cubre el marcado básico de tablas, junto con características más complejas como la implementación de subtítulos y resúmenes.
Los formularios son una parte muy importante de la Web — proporcionan gran parte de la funcionalidad que necesitas para interactuar con sitios web, p. ej. registrarte e iniciar sesión, enviar comentarios, comprar productos y más. Este módulo te ayuda a comenzar a crear las partes de formularios del lado del cliente/Interfaz de usuario.
Utilizar HTML para resolver problemas comunes
Proporciona enlaces a secciones de contenido que explican cómo usar HTML para resolver muchos problemas comunes al crear una página web: tratar con títulos, agregar imágenes o videos, enfatizar el contenido, crear un formulario básico, etc.
El atributo crossorigin, en combinación con un encabezado CORS apropiado, permite imágenes definidas por el elemento <img> que se cargarán desde orígenes externos y se utilizarán en un elemento <canvas> como si se estuvieran cargando desde el origen actual.
Atributos de configuración de CORS (en-US)
Algunos elementos HTML que brindan soporte para CORS, como <img> o <video>, tienen un atributo crossorigin (propiedad crossOrigin), que te permite configurar las solicitudes CORS para los datos extraídos del elemento.
Precarga de contenido con rel='preload' (en-US)
El valor de preload del atributo <link> del elemento rel te permite escribir solicitudes de recuperación declarativas en tu HTML <head>, que especifican los recursos que tus páginas necesitarán muy pronto después de la carga, que por lo tanto deseas comenzar a precargar al principio del ciclo de vida de la carga de una página, antes de la representación principal del navegador la maquinaria entra en acción. Esto asegura que estén disponibles antes y es menos probable que bloqueen el primer procesamiento de la página, lo que lleva a mejoras de rendimiento. Este artículo proporciona una guía básica sobre cómo funciona preload.
HTML consta de elementos, cada uno de los cuales se puede modificar por medio de algunos atributos. Los documentos HTML están conectados entre sí mediante enlaces.
Examina una lista de todos los elementos HTML.
Los elementos en HTML tienen atributos. Se trata de valores adicionales que configuran los elementos o ajustan su comportamiento de diversas formas.
Los atributos globales se pueden especificar en todos los elementos HTML{, incluso aquellos no especificados en el estándar. Esto significa que cualquier elemento no estándar debe permitir esos atributos, aunque esos elementos hagan que el documento no sea compatible con HTML5.
Elementos en línea y Elementos a nivel de bloque
Los elementos HTML suelen ser elementos "en línea" o "a nivel de bloque". Un elemento en línea ocupa solo el espacio delimitado por las etiquetas que lo definen. Un elemento a nivel de bloque ocupa todo el espacio de su elemento padre (contenedor), creando así un "bloque".
En HTML, se pueden usar varios tipos de enlaces para establecer y definir la relación entre dos documentos. Los elementos de enlace en los que se pueden configurar tipos incluyen <a>, <area> y <link>.
Guía de tipos y formatos de medios en la web (en-US)
Los elementos <audio> y <video> te permiten reproducir audio y video de forma nativa dentro de tu contenido sin la necesidad de soporte de software externo.
HTML se compone de varios tipos de contenido, cada uno de los cuales se puede usar en ciertos contextos y no está permitido en otros. De manera similar, cada uno tiene un conjunto de otras categorías de contenido que pueden recibir y elementos que pueden o no se pueden usar en ellos. Esta es una guía para estas categorías.
Información histórica sobre el modo peculiar («Quirks» en inglés) y el modo estándar.
Aplicación de color a elementos HTML mediante CSS (en-US)
Este artículo cubre la mayoría de las formas en que usas CSS para agregar color al contenido HTML, enumerando qué partes de los documentos HTML se pueden colorear y qué propiedades CSS usar al hacerlo. Incluye ejemplos, enlaces a herramientas de creación de paletas de colores y más.
Want to get more involved? Learn how to contribute.
This page was last modified on 29 nov 2022 by MDN contributors.
¿Qué es el frontend?
DATOS DE COMPAÑEROS DE CLASE
Alfredo Coreano Castro
LECTURAS RECOMENDADAS
Qué es frontend y backend: diferencias y características - Platzi
17293
Puntoshace 5 años
Frontend es la parte de un sitio web que interactúa con los usuarios, por eso decimos que está del lado del cliente. Backend es la parte que se conecta con la base de datos y el servidor que utiliza dicho sitio web, por eso decimos que el backend corre del lado del servidor. Estos dos conceptos explican a grandes rasgos cómo funciona un sitio o aplicación web y son fundamentales para cualquier persona que trabaje en el mundo digital.
Frontend es la parte de un programa o dispositivo a la que un usuario puede acceder directamente. Son todas las tecnologías de diseño y desarrollo web que corren en el navegador y que se encargan de la interactividad con los usuarios.
Los desarrolladores frontend son aquellos que crean los componentes visuales de un sitio web. Dan formato a las imágenes, la animación y la interactividad de un sitio web.
Backend es la capa de acceso a datos de un software o cualquier dispositivo, que no es directamente accesible por los usuarios. Además, contiene la lógica de la aplicación que maneja dichos datos. El Backend también accede al servidor, que es una aplicación especializada que entiende la forma en la que el navegador hace solicitudes.
Los desarrolladores backend se encargan de hacer que la lógica del sitio funcione correctamente, la información se transmita de manera segura y el desempeño de la aplicación no entorpezca la experiencia del usuario.
Guía descargable de lenguajes, frameworks y librerías backend
El desarrollo de front-end es el proceso de hacer que un sitio web funcione y se vea bien en un navegador. Por lo general, lo hacen diseñadores y desarrolladores, a veces con aportes del personal de marketing. Los desarrolladores front-end pueden codificar en HTML, CSS y JavaScript para integrar el diseño del cliente con una aplicación, o pueden trabajar con frameworks como AngularJS.
El desarrollo de back-end es el proceso de administrar el almacenamiento de datos y acceder a los datos de una base de datos para mostrarlos en una página web para que los usuarios puedan consumirlos en cualquier dispositivo.
Los desarrolladores de back-end a menudo deben ser fuertes en habilidades como Java, C ++, Ruby on Rails, PHP o Python, mientras que los desarrolladores de front-end pueden necesitar conocer algunos de estos lenguajes. Sin embargo, a menudo utilizan herramientas o frameworks como Bootstrap o Tailwind, que les permiten crear sus interfaces web de forma rápida y sencilla.
Conoce más sobre: ¿Qué es Angular?
La web está compuesta de un montón de documentos que están conectados entre sí a través de enlaces. Cuando quieres entrar a Platzi escribes la URL www.platzi.com en la barra del navegador, eso quiere decir que estás solicitando que te muestren una página web.
En el siguiente paso tu computador verifica qué servidor de software está corriendo el sitio. Ahí el servidor evalúa qué tipo de petición es la que estás haciendo. Si entras a www.platzi.com/cursos, el sitio web obtiene una petición GET, así que debe hacer una conexión a la base de datos para obtener el listado de cursos.
Algunas veces no se requiere conexión a la base de datos. Por ejemplo, al entrar a www.platzi.com/login no hace falta, ya que cuando inicias sesión, se hace una petición POST que se conecta a la base de datos para validar los accesos y el tipo de cuenta o suscripción que tienes registrada. Con esto, el Backend devuelve la respuesta al servidor para que la empuje al navegador.
Finalmente, entra el Frontend, que recibe la información que le pasó el Backend y la dispone en la interfaz del sitio, lo que en este caso sería el perfil del usuario. Esto es lo que finalmente se muestra en el navegador.
Para convertirte en Frontend Developer debes saber HTML y CSS, los lenguajes de maquetación que nos permiten definir la estructura y estilos de una página web. Y también JavaScript, un lenguaje de programación para definir la lógica de nuestra aplicación, recibir las solicitudes de los usuarios y enviárselos al backend. Conoce más a fondo cómo aprender arquitectura frontend.
En Platzi tenemos un curso específico de desarrollo frontend que te pondrá al día en todo lo que necesitas aprender para empezar tu camino en esta ruta tan apasionante.
Dominando estas tecnologías puedes usar algunos frameworks, librerías o preeprocesadores que expanden tus capacidades para crear todo tipo de interfaces de usuario. Algunos de ellos son:
Algunos de los lenguajes Backend son Python, Node.js, PHP, Go, Ruby y C#. Y así como en el frontend, todos estos lenguajes tienen diferentes frameworks que te permiten trabajar mejor según el proyecto que estás desarrollando, como Django, Flask, Express.js, Laravel, Symphony Framework, Ruby on Rails y ASP.Net. Cada uno lo hemos elegido sobre todo porque tienen una gran comunidad que los respalda.
Dependiendo de las tecnologías que pretendas aprender, hay varias rutas que puedes tomar, como lo muestra esta infografía:
Sin embargo, un verdadero programador backend no está casado o casada con un solo framework o lenguaje de programación. Al contrario, intenta siempre aprender más y conocer los nuevos que van apareciendo de mejor manera, para de esta manera mantenerse a la vanguardia de su profesión.
Lo más importante no es el lenguaje, sino el entendimiento profundo de por qué las cosas están funcionando de una manera u otra.
Los desarrolladores full stack son profesionales que se encargan tanto de la parte técnica como de la parte creativa (frontend y backend). Un stack (en inglés pila o montón) hace referencia al grupo de tecnologías que componen un sitio web en todos sus aspectos (desde la base de datos, hacia el manejo lógico y la interfaz visual). Un desarrollador fullstack es capaz de manejar la pila completa de un sitio y por ende entiende de tecnologías tanto de frontend como de backend y también el manejo de su base de datos.
Si estás aprendiendo a programar, seguramente vas a encontrarte con muchos de los términos de este artículo. Además, en algún punto vas a tener que decidir si prefieres el Desarrollo Frontend o el Desarrollo Backend, aunque es cierto que hay Desarrolladores FullStack que involucran las dos áreas.
¡Cuéntame en los comentarios si te queda alguna duda, si estás aprendiendo a programar y cuáles son tus lenguajes favoritos!
JAVASCRIPT
CSS
HTML
FRONTEND
RESUMEN
9. Javascript hero
8. Dribbble
7. Onepage love
6. Unsplash
5. Pexels
4. Íconos de google fonts
3. Cómo usar fonts en tus páginas web
2. Google Fonts
1. Color Hunt
Platzi: cursos online profesionales de tecnología
Cursos que debo aprobar antes:
Nuevo curso gratis de programación básica
Curso de creación de páginas web con worpress y No-code - Contenido: 4 horas - Práctica: 10 horas
Exámen:
¿Cuál es el lenguaje que me permite darle estilos visuales a mi página web?
e. JavaScript
d. HTML
c. PHP
b. Python
a. CSS
¿Qué es un certificado SSL?
d. es un certificado de seguridad que compramos para garantizar que toda la información que viaje hacia nuestra página web esté encriptada.
c. Es un diploma que me reconoce como un desarrolaldor web profesional.
b. Es un certificado que garantiza que mi página web fue revisada por un profesional y tiene el permiso necesario para estar en internet.
a. Es el certificado que nos da el hosting que nos habilita el acceso a nuestro panel de administración. Es como una conrtaseña, no hay que perderla.
¿Qué es el dominio?
d. Es nuestra dirección en internet. Nos sirve para encontrar la página web que estamos buscando.
c. Es el modelo que conocemos en donde una computadora se comunica con un servidor para obtener la página web que buscamos.
b. Es el espacio de almacenamiento que compramos para poder subir los archivos de nuestro servidor.
a. es la capacidad que tenemos sobre un tema. Cuando aprendemos mucho sobre ese tema podemos decir que lo tenemos dominado.
¿Puedo tener bases de datos en el Frontend?
b. Falso. Las bases de datos, al tener información delicada, se manejan desde el Backend
a. Verdadero. Puedo guardar datos en la base de datos de mi navegador.
¿Es posible tener una página web en internet sin pagar nada?
b. Falso. Siempre hay que pagar si quieres tener una página web en internet. Debes de contar si o sí con un hosting para que tu página web pueda ser servida al público.
a. Verdadero. existen servicios como Netlifly que me permiten subir mi página web gratis con una cuota de servicio limitada.
¿Cuál es una de las ventajas de los sitios web No-code?
d. No tenemos que escribir código por lo que es un alivio para las personas a las que no les gusta programar
c. Permiten resolver un problema muy rápido y a bajo costo, ya que podemos desarrollar un MVP sin necesidad de código.
b. Son 100% personalizables y escalables. Permiten satisfacer cuaqluier necesidad que tengamos.
a. Permiten escribir poco código opr si queremos personalizar alguna característica de nuestro sitio web.
¿Cuáles son las dos áreas en las que se divide el desarrollo web?
d. HTML y CSS
c. Navegadores y servidores
b. Frontend y Backend
a. Frotman y backman
¿Cómo se llama la computadora que es responsable de entregarte una copia de la página web que buscas?
e. Freddy
d. Servidor
c. Computadora
b. Cliente
a. Las computadoras no tienen nombre.
¿Cuáles son las técnicas de alineación que nos permiten distribuir más fácilmente nuestro contenido?
d. Display y Align
c. Position Absolute y position realtive
b. Tablas y lframes
a. CSS Grid y Flexbox
¿Cuál es el lenguaje que me permite armar toda la estructura de mi página web y definir los elementos que esta debe tener?
e. PHP
d. CSS
c. HTML
b. Javascript
a. Python
¿Es importante tener en cuenta la accesibilidad cuando escribimos HTML?
b. Falso. Con que la página sea visible y los botones se puedan clicar es suficiente. A fin de cuentas lo que importa es lo que el usuario ve.
a. Verdadero. esto permitirá que usuarios con capacidades limitadas puedan navegar por nuestro sitio web sin problemas
¿Con un certificado SSL mi página web está segura y pudo evitar que la hackeen?
b. Verdadero. Por eso lo venden, estoy pagando por seguridad y lo mínimo que espero es que no hackeen mi página web de michis.
a. Falso. El certificado SSL es apenas una pequeña capa de seguridad. Debemos tener muchas cosas más en cuenta para garantizar que nuestra página es segura.
¿Cuál es el tipo de hosting que está específicamente enfocado en alojar nuestro sitio web y ningún otro?
c. Compartido
b. VPS
a. Dedicado
En esta área del desarrollo web puedo programar la lógica de mi aplicación. Ocupa lenguajes como PHP, Python, Java e incluso tenemos bases de datos.
c. Data Science
b. Frontend
a. Backend
¿Es wordpress la única herramienta no-code que existe?
b. Verdadero. Al día de hoy se han intentado desarrollar más herramientas no-code, pero ninguna ha podido igualar a wordpress.
a. Falso. existen más herramientas no-code como notion o carrd.
¿Por qué algunas le temen a CSS?
d. Porque es fácil romper un sitio web con CSS y muy difícil poder arreglarlo.
c. Porque muchos desarrolladores no saben realmente cómo funciona y no entienden los conceptos detrás de este lenguaje.
b. Porque la sintaxis de CSS es muy enredada y no sabes cuál es el elemento al que le estás aplicando estilos.
a. Porque CSS es un lenguaje muy difícil y sin sentido
¿En el backend entran los conceptos de diseño de interfaces de usuario y Mockups de aplicaciones?
b. Falso. Toda la parte de diseño de interfaces de usuario se ve desde el Frontend
a. Verdadero. Los programadores backend son los encargados de diseñar las interfaces de usuario.
¿Qué es el Responsive Design?
c. Es hacer que nuestro sitio web responda rápido al usuario
b. Es hacer que nuestro sitio web se adapte a cualquier tamaño de pantalla
a. Es una tendencia de diseño que usa un estilo retro.
¿Puedes tener gratis un dominio?
b. Verdadero. Al igual que con los hostings existen alternativas gratuitas para los dominios, también con cuotas limitadas.
a. Falso. Los dominios hay que comprarlos, a lo mucho puedes tener gratis subdominios que te brinden ciertas páginas de hosting gratuitos como Netlify
En esta área del desarrollo web puedo hacer las interfaces que van a ser visibles para mi usuario. Ocupa lenguajes como HTML, CSS y JavaScript
c. Frontend
b. Backend
a. Data Science
Conclusiones
Sitios no-code con wordpress
Despliega tu página a internet
Sitios con con HTML y CSS
Introducción
¿Qué es el backend?
¿Qué es el Frontend?
¿Cómo se crean las páginas web?
Recursos
9 herramientas necesarias para el desarrollo web
Nuevo Curso gratis de programación básica -Platzi
Platzi: Cursos online profesionales de tecnología
Archivos de la clase
Iván Gómez Torres le está invitando a una reunión de Zoom programada.
Tema: PROGRAMACIÓN
Hora: Este es una reunión recurrente Reunirse en cualquier momento
Unirse a la reunión Zoom
https://us02web.zoom.us/j/89709605756?pwd=NGlrTzNKTDQxenN2Nk5rYUxNeUZLQT09
ID de reunión: 897 0960 5756
Código de acceso: 164218
Móvil con un toque
+13126266799,,89709605756#,,,,*164218# Estados Unidos (Chicago)
+13462487799,,89709605756#,,,,*164218# Estados Unidos (Houston)
Marcar según su ubicación
+1 312 626 6799 Estados Unidos (Chicago)
+1 346 248 7799 Estados Unidos (Houston)
+1 360 209 5623 Estados Unidos
+1 386 347 5053 Estados Unidos
+1 507 473 4847 Estados Unidos
+1 564 217 2000 Estados Unidos
+1 646 931 3860 Estados Unidos
+1 669 444 9171 Estados Unidos
+1 669 900 6833 Estados Unidos (San Jose)
+1 689 278 1000 Estados Unidos
+1 719 359 4580 Estados Unidos
+1 929 205 6099 Estados Unidos (New York)
+1 253 205 0468 Estados Unidos
+1 253 215 8782 Estados Unidos (Tacoma)
+1 301 715 8592 Estados Unidos (Washington DC)
+1 305 224 1968 Estados Unidos
+1 309 205 3325 Estados Unidos
ID de reunión: 897 0960 5756
Código de acceso: 164218
Encuentre su número local: https://us02web.zoom.us/u/kcFjMK0QJA
INTELIGENCIA ARTIFICIAL PARA DEVELOPERS
CÓMO CREAR TUS PRIMEROS PROYECTOS WEB
FUNDAMENTOS DE PROGRAMACIÓN Y DESARROLLO WEB
HISTORIA Y CASOS DE ESTUDIOS DE LA TECNOLOGÍA
FUNDAMENTOS DE PROGRAMACIÓN CON ENFOQUE EN DESARROLLO WEB
COMPUTACIÓN BÁSICA Y PENSAMIENTO LÓGICO
Subtópico
CURSO DE PENSAMIENTO LÓGICO:ALGORITMOS Y DIAGRAMAS DE FLUJO
CURSO BÁSICO DE COMPUTADORES E INFORMÁTICA - Contenido: 4 horas - Práctica: 10 horas
Aprobado
QUIZ FUNDAMENTOS DE PROGRAMACIÓN
¿QUÉ ES EL DOM?
ARCHIVOS DE HTML Y JAVASCRIPT
GANA 3 VECES
CICLOS
REFACTOR DEL CÓDIGO USANDO FUNCIONES
ALEATORIEDAD
ALGORITMO AVANZADO DE PIEDRA, PAPEL O TIJERA
ALGORITMO DE PIEDRA, PAPEL O TIJERA
¿CÓMO DEDCLARAR VARIABLES Y USAR PROMPT?
INSTALANDO TU PRIMER EDITOR DE CÓDIGO
ESTRUCTURA DE ÁRBOL EN HTML
SITIOS WEB CONP HTML
CREA TU PRIMER SITIO WEB
¿CÓMO APRENDER PROGRAMACIÓN?
BIENVENIDA A PLATZI: ¿QUÉ NECESITAS PARA TOMAR EL CURSO?
¿Para qué organizamos nuestros espacios digitales?
c. Para entretenernos en las primeras horas de la mañana.
b. Para no perder tiempo, evitar estrés y facilitarnos la vida.
a. Para poder concentrarnos en otras actividades el fin de semana.
¿Qué es un organization tracker?
c. Una herramienta que permite rastrear los objetivos de organización
b. Una app de seguimiento de buenos y malos hábitos
a. Un dispositivo que define los hábitos de las personas
Visualizar para no perder la motivación
Un proceso de organización básico ¿Por dónde empezar?
¿Qué es organización digital?
cuaderno organización digital
curso de organizacón digital slides
Curso profesional de Git y Git Hub
Curso de introducción a la terminal y línea de comandos
Curso de prework: configuración de entorno de desarrollo en macOS
Curso de Prework: configuración de entorno de desarrollo en Windows
¿Qué es Ubuntu?
Node.js es:
¿Qué es un Virtual Box?
¿Qué es una terminal?
¿Cuáles son algunos de los principales usos de Python?
¿Por qué es importante saber utilizar Git?
¿Quién fue el creador de Git?
¿Qué es Git?
¿Qué es GitHub?
¿Qué es VSCode?
¿Para qué nos sirven las DevTools?
c) No utilizamos Dev Tools porque afectan el proceso de desarrollo.
b) Para entender el rendimiento de nuestro sitio, para importar bibliotecas y para escribir todo el código de nuestro proyecto
a) Para facilitar el desarrollo de nnuestros proyectos web, buscar y corregir errores, entender el rendimiento de nuestro sitio.
¿Por qué razón utilizamos Google Chrome?
c. Por ser navegador de Google, que patrocina a muchos y muchas devs a través del programa de Google Developer Experts
b. Por ser el navegador más utilizado, es importante visualizar nuestros proyectos web como los verán la gran mayoría de usuarios
a. No utilizamos este navegador durante el curso
¿Por qué la virtualización puede ser más lenta que soluciones integradas como WSL2?
c. La virtualización siempre es más rápida y efectiva que WSL2
b. Debido a aque al virtualizar estamos reservando recursos para que sean ejecutados por la máquina virtual y además estamos corriendo el software encargado de la virtualización misma, esto puede ser intensivo de RAM, disco duro, y procesador
a. La virtualización es más lenta porque es más eficiente, respecto a compartir y utilizar recursos
¿Para qué nos sirve utilizar WSL2?
c. Porque la unión europea tiene lineamientos de queúnicamente podemos desarrollar en Linux, además nos da ventaja como sus terminales, sin tener que acostumbrarnos a un Sistema Operativo a que usamos día a día, quizás tienes video llamadas, y en Ubuntu por ejemplo puede ser difícil compartir audio, video, etc. Así que esta fue la forma de Microsoft de ser un sistema útil para desarrollar software que tradicionalmente se hacía en Linux dando la practicidad de Windows.
b. WLS2 no tiene ventajas reales, y no es necesariamente útil.
a. WSL2 nos permite tomar todas las grandes decisiones y facilidades que siempre han existido de desarrollar en Linux, como sus terminales, sin tener que acostumbrarnosa un Sistema Operativo distinto a que usamos día a día, quizás tienes videos llamadas, y en Ubuntu por ejemplo puede ser difícil compartir audio, video, etc. Así que esta fue la forma de Microsoft de ser un sistema útil para desarrollar software que tradicionalmente se hacía en Linux dando la practicidad de Windows.
¿Qué es WSL2?
c) Una máquina virtual basada en virtual box, que permite instalar y ejecutar cualquier distribución de Linux en Windows
b) Windows Subsystem for Lan, un subsistema en Windows que permite ejecutar y hacer análisis de vulnerabilidad en redes locales sin necesidad de crear máquinas virtuales
a) Windonws Subsystem for Linux2, un subsistema en Windows que ejecuta el Kernel completo de Linux, permitiéndonos ejecutar cualquier distribución de Linux que necesitamos directamente en Windows
LECTURAS RECOMENDAS
Profesor Ricardo Celis: Cursos impartidos
Curso de Premowork: configuracion de entorno de desarrollo en macOS
Curso de Prework: configuración de entorno de desarrollo en Linux
MATERIAL DE LAS CLASES
Trucos de Windows
Trucos de windows
Power toys
Git y Github
Git githhub
Subir tu primer repo
Vincular la llave SSH
Instalando Git
Cómo usar Linux dentro de Windows
¿Cómo usar linux dentro de windows?
Instalación de Python
Instalación de Node
Comandos básicos de la terminal
Instalación de Ubuntu en VirtualBox
Instalación de VirtualBox
Ubuntu en WSL
Configurar Windows 11 para soportar la instalación de WSL
¿Qué es WSL?
Curso de prework: configuración de entorno de desarrollo en Linux
Curso de Introducción a la programación de videojuegos 3D con Unity
Editor de texto
Extensiones de VSCode
Extensiones
control + shift + P: en VSCODE podemos realizar pedidos, por ejempo para activar extensiones.
Material Icon Theme: identifica el tipo de archivo con el que se trabaja
Node Require: ayuda a completar
WSL: sirve para trabajar con windows y Linux
Code Spell Checker: corrige en redacción en inglés, también tiene para varios idiomas
CSS Peek: permite hacer una vista rápida de los estilos y las clases en CSS (SIRVE EN ESCUELA DE DESARROLLO)
ESLint: corrige lo que se redacta en JavaScript y JSX
highlight matchin: resalta una etiqueta inicio y fin
Live server: permite ver los cambios en el navegador mientras se ejecutan
Información adicional
Extensiones y personalización de VSCode
Curso de ECMAScript: Historia y versiones de JavaScript
Curso de fundamentos de observabilidad con new relic
Instalar VScode
Atajos
control + S: guardar
Herramientas para la web
Herramientas para la web - Examen
¿Qué provee la herramienta Windows Subsystem for Linux?
d. La transición entre plataformas Windows y Linux
c. Una herramienta de videojuegos
b. Una invitación a explorar su perfil
a. Una herramienta de desarrollo
¿Cómo se denomina la extensión que permite conectar y desconectar rápidamente el JavaScript en tu página web?
Cuando revisé el 21.09.2023, tenía otra estructura
d. Lightouse Toolkit
c. Chrome Store
b. Herramientas para Desarrolladores
a. Toogle JavaScript
d. Developer Tools
c. Herramientas para desarrolladores
b. Chrome Store
a. Lighthouse Toolkit
¿Qué plataformas se unifican con Windows Subsystem for Linux?
d. Mac y Linux
c. Mac y Windows
b. Descarga web
a. Windows y Linux
¿Qué hace la herramienta Google Lighthouse?
c. Ayuda a instalar extensiones
b. Ayuda a sincronizar tus computadoras
a. Automáticamente comprueba la calidad de las páginas web
Manejo básico de las DevTools
Curso de accesibilidad web
Descargar e instalar un navegador web: Chrome
Qué aprenderás para configurar tu entorno de desarrollo
1.1.3. Historia y casos de estudios de la tecnología - Avanzado
1.1.2. Fundamentos de programación con enfoque en desarrollo web - Intermedio
Fundamentos de ingeniería de Sotf
Curso profesional de Git y GitHub
Curso gratis de programación básica
Curso de introducción a la web: historia y funcionamiento de internet
1.1.1. Computación básica y pensamiento lógico - Básico
5) Desafíos semanales de pensamiento lógico.
NO HAY EXAMEN
4) Curso de pensamiento lógico: lenguajes de programación.
Verdadero o falso: Con PHP se pueden realizar desarrollos backend de aplicaciones
¿Cuál es la mejor fuente recomendada para conocer la sintaxis detallada de un lenguaje?
d. Blogs en internet
c. Su documentación oficial
b. Tik toks en inglés
a. Periódicos
¿Cómo se empiezan a escribir las variables en PHP?
d. Usando el operador = frente a cada variable
c. Asignando un valor no nulo a las variables
b. Usando el signo $ al inicio de cada variable
a. Asignando un valor vacío a una variable
Verdadero o falso: El lenguaje PHP permite trabajar con código HTML al mismo tiempo
¿cómo podríamos definir un lenguaje de programación?
c. Un conjunto de instrucciones que nos permite comunicarnos con la computadora
b. Un idioma especial para hablar con otros programadores
a. Un conjunto de códigos secretos que ejecutan una única acción específica
¿En qué áreas de ciencia es muy popular el uso de Python?
d. Desarrollo de sotfware, machine Learning, Análisis de datos
c. Desarrollo de apps móviles
b. Desarrollo de aplicaciones de escritorio
a. Matemáticas, Química, Inteligencia artificial
Verdadero o falso: Python es muy utilizado para la creación de videojuegos
¿Cuál es el mejor lenguaje de programación?
d. Python y Javascript porque están de moda
c. Ninguno, todos tienen grandes bugs
b. Aquel que cubra las necesidades del proyecto que vas a desarrollar
a. PHP, Java y Python porque permiten hacer desarrollos de Backend
Verdadero o falso: Javascript permite crear bases de datos relacionales en su forma más nativa
Verdadero o falso: Con Javascript se pueden crear interacciones en una página web para el usuario
Verdadero o falso: Javascript es un lenguaje que permite realizar desarrollos para fronted y para backend
Verdadero o falso: ¿Es Python un lenguaje OpenSource?
3) Curso de pensamiento lógico: manejo de datos, estructuras y funciones
¿Un ciclo for puede inicializarse en 1?
b. Verdadero
a. Falso
34139 es un tipo de dato
d. Numérico
c. Texto
b. Binario
a. Flotante
¿Un array puede almacenar más de un tipo de dato?
Las funciones sirven para:
d. Optimizar la velocidad con la que ejecutamos ciclos y condicionales.
c. Modularizar el código y optimizar nuestros flujos de trabajo
b. Dividir todas las sentencias o líneas de código que sean diferentes entre sí.
a. Reducir la cantidad de líneas de código de nuestro algoritmo.
¿En qué categorías se dividen las estructuras de control?
d. Condicionales y ciclos
c. If y Switch
b. If / Else y For
a. Condicionales y afirmaciones
¿La sentencia Catch de un bloque Try / Catch nos permite encapsular la sección de nuestro algoritmo en caso de que un resultado haya sido verdadero o sin errores?
¿Los tipos de dato booleanos se representan con 1 y 2?
¿Qué tipos de scope puede tener una función?
c. Local o permanente
b. Con scope o sin scope
a. Público o privado
¿Cuál es la diferencia entre el ciclo while y el ciclo do-while?
d. La cantidad de iteraciones que realiza cada una.
c. Que una es un ciclo infinito y la otra tiene un final de ejecución
b. El orden en que se ejecuta la primera instrucción
a. Ninguna
¿La instrucción if / else es un ciclo?
"Martha está en el mar" es un dato de tipo:
c. Booleano
b. Texto
a. Numérico
¿La sentencia Switch se utiliza para realizar validaciones de diferentes casos?
¿Cuántas iteraciones debe tener un ciclo?
d. Deben ser infinitas.
c. De 3 a 10.
b. No se define una cantidad de iteraciones.
a. La cantidad de iteraciones las asignamos de acuerdo a la estructura que se va iterar.
2) Curso de pensamiento lógico: algoritmos y diagramas de flujo
Para crear un algoritmo es necesario analizar la situación antes de empezar a diseñar o programar.
¿Cuál es el propósito del operador lógico Y (Expresión1 Y Expresión2)?
c. Devuelve False cuando Expresión1 y Expresión2 son verdaderas
b. Devuelve True cuando Expresión1 o Expresión2 son verdaderas
a. Devuelve True cuando Expresión1 y Expresión2 son verdaderas.
¿Cuál es la propiedad matemática conocida por la afirmación "el orden de los factores no altera el producto"?
d. Asociativa
c. Identidad
b. Distributiva
a. Conmutativa
Un diagrama de flujo siempre debe contar con un inicio
b. Verdadero
a. Falso
Las tablas de verdad nos ayudan a determinar cuáles son las condiciones necesarias para que sea verdadero o falso un enunciado
b. Falso
a. Verdadero
Todos los diagramas de flujo siempre deben tener un operador de decisión
¿Cuál es el resultado de la siguiente resta de binarios: 1001 - 100?
d. 110
b. 101
a. 10
La negación de Falso (!F) da como resultado:
b. V (verdadero)
a. F (falso)
¿Cuál es el propósito del operador de comparación < > (Número1 < > Número2)?
c. Devuelve False si Número1 es diferente que Número2.
b. Devuelve True si Número1 es diferente que Número2.
a. Devuelve True si Número1 es igual que Número2.
¿Cuál es el resultado de la conjunción F ^ V?
¿Cuál es el resultado de la disyunción F v V?
b. F
a. V
¿Cuál es el propósito del operador lógico Xor?
c. Devuelve True si Expresión1 es verdadera y Expresión2 es verdadera.
b. Devuelve True si Expresión1 es verdadera o Expresión2 es verdadera, pero no ambas.
a. Devuelve True si Expresión1 es verdadera y también la Expresión2 es verdadera, deben ser ambas.
Verdadero o falso: ¿en programación también se pueden aplicar las operaciones matemáticas básicas?
El operador aritmético dado por el símbolo * se utiliza para:
d. División
c. Suma infinita
b. Multiplicación
a. No existe
¿Cuál es el resultado de la siguiente multiplicación de binarios: 1001 * 1001?
d. 1010001
c. 100011
b. 1010101
a. 1010010
¿Cuál es el resultado de la siguiente división de binarios: 1001 / 1001?
d. 101
c. 100
b. 1
a. 10101
¿Cuál es el resultado de la siguiente suma de binarios: 1101 + 110?
d. 10011
c. 10101
b. 10111
a. 11001
Convierte el número binario 1100100 a decimal:
d. 10
c. 1100
b. 100
a. 101
Convierte el número decimal 456 a binario:
d. 10100100
c. 11001000
b. 111001001
a. 111001000
¿Cuántos dígitos tiene el sistema binario?
c. Cero
b. Dos
a. Uno
TEMARIO:
PRÓXIMOS PASOS
Toma el Curso de Pensamiento Lógico: Tipo de datos y Estructuras de Control
ALGORITMOS Y DIAGRAMAS DE FLUJO
Quiz algortimos y diagramas de flujo
Reto 3: login de usuarios
Reto 2: buscador de ciudades
Reto 1: ¿hay dinero en el cajero electrónico?
¿Qué es un diagrama de flujo?
¿Qué es un algoritmo? ¿Cómo resolver problemas con algoritmos?
OPERADORES
Quiz: tablas de verdad
Reto 0: identifica los operadores
Operadores de comparación
Operadores aritméticos
Operadores lógicos
¿Qué son las tablas de verdad?
Disyunción
Conjunción
Negación
Qué son tablas de verdad y compuertas lógicas / Platzo live -YouTube
Qué son las tablas de verdad: reglas y ejemplos
Ejmplo
3
2
1
Negación en programación
Conjuntiva en programación
Disyuntiva en programación
O exclusivo
Se usa en cifrado, encriptación
En electricidad:
1: si hay electricidad
0: no hay electricidad
Lenguaje en programación
1: verdadero (true)
En JAVASCRIP
0: es falso (false)
SISTEMA BINARIO
Quiz: sistema binario
Las operaciones matemáticas en sistema binario funcionan exactamente igual que en el sistema decimal.
b. Falso
a. Verdadero
Convierte el número 41 a sistema binario
d. 101001
b. 100011
a. 10
Multiplica 111 por 101 en sistema binario
d. 11101
c. 100011
b. 101001
a. 11
Divide 110 por 10 en sistema binario
d. 11
c. 1101
b. 10
a. 100011
¿A cuál sistema de numeración pertenece el número 3?
d. A ninguno
c. A ambos
b. Al sistema decimal
a. Al sistema binario
Multiplicación y división de binarios
División de binarios
Ejemplo 1/10
Paso 1: ¿Cuántas veces cabe el 1 en 1?
Respuesta: 1 vez
Ahora: 1 (izquierda)*1 (encima de la barra)=1 (dentro del semirectángulo)
Para 1 es igual a 0.
Paso 2: bajar el siguiente dígito, que es 0
Paso 3: ¿Cuántas veces cabe el 1 en 0?
Respuesta: 0
Ahora: 0 (izquierda)*1 (encima de la barra)=1 (dentro del semirectángulo)
Para 1 es igual a 0.
Por lo tanto:
COCIENTE: 10
RESIDUO: 00
Multiplicación de binarios
Suma y resta de binarios
Resta de binarios
Suma de binarios
Ejemplo 3
Ejemplo 2
Ejemplo 1
Conversión entre binario y decimal
Y viceversa
¿Qué es el sistema binario?
Al grupo de 0 y 1 se le llama secuencia
Se compone por los números 0-1
INTRODUCCIÓN
Quiz: propiedades y operaciones
El producto de cualquier número y 1 siempre da como resultado el mismo número
d. Propiedad conmutativa
b. Propiedad distributiva
El orden de los factores NO altera el producto
c. Propiedad de identidad
c. Propiedad asociativa
b. Propiedad conmutativa
a. Propiedad distributiva
¿Qué propiedad usarías para resolver el siguiente problema: 15 * (2+7) ?
d. Propiedad distributiva
c. Propiedad conmutativa
b. Propiedad de identidad
a. Propiedad asociativa
Propiedades y orden de las operaciones
Curso de Fundamentos de Matemáticas -Platzi
Curso de Lenguaje y notación matemática -Platzi
¿Cómo funcionan los SIGNOS DE AGRUPACIÓN en matemáticas -YouTube?
Resumen
¿Cuáles son las propiedades?
De identidad
Propiedad de identidad en la multiplicación
4*1 = 4
"El producto de cualquier número y 1 da como resultado ese mismo número"
El número 1 es el elemento neutro de la multiplicación
Propiedad de identidad en la suma
4 + 0 = 4
"Si sumas cualquier número con el número cero, el resultado será siempre el mismo número"
Se aplica a las operaciones de adición y multiplicación
Distributiva
5*(3+2) = 5*3 +5*2
25
8*(4+15) = 8*4 + 8*15
152
"Si sumo 2 números agrupados y lo multiplcamos con un tercer número, será igual, a la suma del tercer número multiplicado con cada número agrupado"
Se aplica a las operaciones donde particpan adición y multiplicación
Asociativa
3+2+5= 10
(3+5)+2= 10
3*2*5= 30
(3*2)*5= 30
"No importa como agrupemos 3 números dentro de una suma o multiplicación, el producto es el mismo"
- Siempre se realiza la operación de los números agrupados, luego con el resto.
- Los números agrupados son 3 y 7
Se llama agrupación a números dentro de un paréntesis: (3+7)+5
Conmutativa
Ejemplos:
8*5= 40
5*8= 40
9+7= 16
7+9=16
"el orden de los factores, no altera el producto (resultado)"
Se aplica a las operaciones de adición o multiplicación
¿Qué es una operación matemática?
Lecturas recomendadas
¿Dónde están las matemáticas?
Necesitas matemáticas para los empleos del futuro
¿Es necesario saber matemáticas para programar? -youtube
Matemáticas como lenguaje universal -youtube
Los mitos de las matemáticas -youtube
Archivos de clase
Respaldo
Enlace oficial
1) Curso básico de computadores e informática
EXAMEN
5. Cierre
Es hora de sacarle el jugo a tu computadora
¿Qué hay de nuevo en Windows 11?
4. Seguridad en tu computadora
Recuerda tus contraseñas
¿Cómo navegar de forma segura en internet?
Antivirus y Firewall
¿Cómo mantener segura tu computadora?
Tipos de ataques de los que serás víctima
¿Qué es un virus informático?
3. Programas en tu computadora
¿Mi computadora sirve para jugar videojuegos?
En google se coloca: requisitos + nombre del juego, para saber las características de CPU que necesitas
Escuela de video juegos
Programas para desarrollo de aplicaciones
Programas de diseño
Curso de configuración de entorno de desarrollo de windows
Programas para programar aplicaciones
Programas de ofimática
Autenticación en dos pasos
¿Cómo crear una cuenta de correo en Gmail?
Navegadores, motores de búsqueda e internet
¿Cómo instalar un programa en mi computadora?
2. Sistemas operativos
Tipos de archivos
Conociendo Windows: desinstalar programas y el explorador de archivos
Conociendo Windows: interfaz y dispotivos Bluetooth
¿Qué es un sistema operativo?
1. Conoce tu computadora
¿Qué es el software?
¿Qué computadora debería elegir?
Tener en cuenta el uso que le daremos a la computadora.
Comparación de rendimiento de CPU
1.4. ¿Qué es el hardware externo y tipos de puertos?
Las pantallas se miden en diagonal
1.3. ¿Qué es el hardware interno?
- Disco duro: se guarda información de forma permanente.
Es lenta pero almacena mas información
- Memoria RAM: se guarda la información de forma temporal.
La información se pierde cada vez que se apaga la computadora.
Esta conectada directamente al CPU, por ello es rápida, pero almacena menos información que CPU.
- GPU: gráficos discretos son mas potentes (separados de CPU).
- CPU: distribuye la información que ingresa, por ejemplo, a la RAM.
Subtopic
1.2. ¿Qué entiende una computadora?
En números, letras, imágenes, videos, música, entiende el sistema binario.
1.1. Bienvenida al curso de computación básica
