Conviértete en el experto que quieres ser con esta oferta especial
¡Inscríbete hoy!
Curso Gratis y con certificado de Programación HTML 2022
La programación HTML es uno de los pilares de la evolución tecnológica y digital de los últimos años y todavía estás a tiempo de profesionalizarte en esta área.
En este artículo aprenderás
Descripción del curso
Requerimientos del curso
Al finalizar este curso, serás capaz de…
Lección 1: Cómo funciona la Web y sus elementos
Lección 2: Conociendo las etiquetas básicas
Lección 3: Etiquetas de formulario
Lección 4: Etiquetas para diagramación y formato
Lección 5: Etiquetas multimedia
Obtén tu certificado en introducción a la programación con HTML
Cursos de Desarrollo Web que te pueden interesar
Descripción del curso
Conoce las bases del lenguaje de creación de páginas web a través del empleo de diversas etiquetas HTML
Inversión: Gratis
Duración: 1 hora
Modalidad: virtual
Recursos: textos y videos
Requerimientos del curso
Tan solo necesitarás tu computador, tablet o celular conectados a internet. También requerirás tener tu cuenta de Google, y acceso a redes sociales para practicar los ejercicios. Las ganas de aprender las pones tú.
Al finalizar este curso, serás capaz de…
Crear páginas y aplicaciones desde cero, usando HTML, CSS y JavaScript y dominando las funciones de cada lenguaje para aplicarlas tanto en proyectos sencillos como en aplicaciones de lado servidor – usuario.
De esta manera, podrás prestar servicios profesionales asociados a la programación, construyendo tu propio portafolio de clientes, u obtener un empleo formal, especialmente, en empresas del rubro de la tecnología.
Incluso, podrás utilizar los conocimientos adquiridos para impulsar tus emprendimientos a través de apps, sitios web y una mejor presencia digital.
Lección 1: Cómo funciona la Web y sus elementos
En términos generales, así funciona la Web:
Paso 1: la URL se resuelve
El código del sitio web no está almacenado en su máquina y, por lo tanto, debe obtenerse de otra computadora donde esté almacenado; esta “otra computadora” se llama “servidor”. Porque sirve para algo, en nuestro caso, sirve para el sitio web.
Ingresa “NextU.com” (que se llama “un dominio”) pero, en realidad, el servidor que aloja el código fuente de un sitio web se identifica a través de direcciones IP (Protocolo de Internet).
El navegador envía una “solicitud” (esto lo veremos en el paso 2) al servidor con la dirección IP que ingresamos (indirectamente; por supuesto, ingresamos “NextU.com”).
Una dirección IP generalmente se ve así: 172.56.180.5.
¿Cómo se traduce el dominio “NextU.com” a la dirección IP?
Hay un tipo especial de servidor en Internet, no solo uno, sino muchos servidores de ese tipo. Un llamado “servidor de nombres” o “servidor DNS” (donde DNS = “Sistema de nombres de dominio”).
El trabajo de estos servidores DNS es traducir dominios a direcciones IP. Puedes imaginar a estos como enormes diccionarios que almacenan tablas de traducción: Dominio => Dirección IP.
Cuando ingresas a “NextU.com”, el navegador primero obtiene la dirección IP de dicho servidor DNS.
En caso de que se esté preguntando: el navegador conoce de memoria las direcciones de estos servidores de dominio, están programadas en el navegador, por así decirlo.
Una vez conocida la dirección IP, avanzamos al paso 2: se envía la solicitud
Con la dirección IP resuelta, el navegador continúa y realiza una solicitud al servidor con esa dirección IP.
“Una solicitud” no es solo un término. Realmente es algo técnico que sucede detrás de escena.
El navegador agrupa un montón de información, como:
- ¿Cuál es la URL exacta?
- ¿Qué tipo de solicitud se debe realizar?
- ¿Se deben adjuntar metadatos?
Y envía ese paquete de datos a la dirección IP.
Los datos se envían a través del HTTP; se trata de un protocolo estandarizado que define el aspecto que debe tener una solicitud (y una respuesta), qué datos se pueden incluir (y en qué formato) y cómo se se presentará la solicitud.
Paso 3: se analiza la respuesta
El navegador recibe la respuesta enviada por el servidor. Sin embargo, esto solo, no muestra nada en la pantalla.
En cambio, la siguiente fase es que el navegador analice la respuesta. Tal como lo hizo el servidor con la solicitud. Una vez más, la estandarización impuesta por HTTP ayuda, por supuesto.
El navegador verifica los datos y metadatos incluidos en la respuesta. Y en base a eso, decide qué hacer.
Es posible que hayas tenido casos en los que se abrió un PDF en el navegador. Eso sucedió porque la respuesta informó a este que los datos no son un sitio web sino un documento PDF; y el navegador intenta elegir el mejor mecanismo de manejo para cualquier tipo de datos que detecte.
Paso 4: se muestra la página
Como se mencionó, el navegador revisa los datos HTML devueltos por el servidor y crea un sitio web basado en eso.
Aunque es importante saber que HTML no incluye ninguna instrucción sobre cómo debe verse el sitio, es decir, cómo debe diseñarse.
Realmente solo define la estructura y le dice al navegador qué contenido es un encabezado, qué contenido es una imagen, qué contenido es un párrafo, etcétera.
Esto es especialmente importante para la accesibilidad: los lectores de pantalla obtienen toda la información útil de la estructura HTML.
¡Ya está! Ahora pasemos a otro punto que también es de gran interés sobre este tema y se trata de los elementos clave de una web.
Estos son los principales que debes conocer:
Usuario
Los clientes son los dispositivos conectados a Internet del usuario web típico (por ejemplo, su computadora conectada a su Wi-Fi o su teléfono conectado a su red móvil) y el software de acceso a la web disponible en esos dispositivos (generalmente un navegador web como Firefox o Chrome ).
Servidor
Un servidor es, en palabras simples, ordenadores que se encargan de almacenar websites, aplicaciones y cualquier otro sitio.
De esta forma, cuando un dispositivo quiere ingresar a la web, lo que sucede es que se descarga una copia de lo que hay en esta computadora, es decir, desde el servidor a la máquina destino para mostrarla en el navegador web del usuario.
La conexión a Internet
Te permite enviar y recibir datos en la web. Es básicamente como la calle entre tu casa y la tienda.
TCP/IP
El TCP —Protocolo de Control de Transmisión— y el IP —Protocolo de Internet— son un instrumento de comunicación que se encargan de definir la manera en que debe trasladarse la información a través de Internet.
Siguiendo nuestra metáfora, el TCP/IP es el medio de transporte que nos nos brindan la posibilidad de trasladarnos al lugar y adquirir los productos.
En nuestro ejemplo, esto es como un automóvil o una bicicleta (o cualquier otra cosa que puedas moverte).
DNS
El sistema de nombres de dominio es como una libreta de direcciones para sitios web. Cuando escribes una dirección web en el navegador, este busca en el DNS para encontrar la dirección IP del sitio web antes de que pueda recuperar el sitio web.
El navegador necesita averiguar en qué servidor se encuentra el sitio web, para que pueda enviar mensajes HTTP al lugar correcto. Esto es como buscar la dirección de la tienda para poder acceder a ella.
HTTP
El Protocolo de Transferencia de Hipertexto (HTTP), es un protocolo de aplicación que define un idioma para que los clientes y servidores hablen entre sí. Es como el lenguaje que usas para ordenar los productos.
Archivos de componentes
Un sitio web se compone de muchos archivos diferentes, que son como las diferentes partes de los productos que compras en la tienda. Estos archivos vienen en dos tipos principales:
- Archivos de código: los sitios web se crean principalmente a partir de HTML, CSS y JavaScript, aunque también pueden ser desarrollados por otras tecnologías.
- Activos: este es un nombre colectivo para todas las demás cosas que componen un sitio web, como imágenes, música, video, documentos de Word y archivos PDF.
Lección 2: Conociendo las etiquetas básicas
Toda persona que quiera iniciarse en la programación, debe enfocarse en conocer las siguientes etiquetas:
- <!DOCTYPE>: establece el tipo de documento.
- <html>: especifica un documento HTML.
- <head>: contiene metadatos o información del documento.
- <title>: determina un título para el documento.
- <body>: cuando la vemos, sabemos que define el cuerpo del documento.
- <h1> a <h6>: estos especifican los encabezados HTML y sus tamaños.
- <p>: establece un párrafo.
- <br>: son empleados para insertar un solo salto de línea.
- <hr>: son aplicados para darle un cambio temático al contenido de la página.
- <!–…–>: define un comentario.
Lección 3: Etiquetas de formulario
Entre las etiquetas de formulario y entrada, encontramos las siguientes:
- <form>: define un formulario HTML para la entrada del usuario.
- <input>: señala un control de entrada.
- <output>: define el resultado de un cálculo
- <datalist>: especifica una lista de opciones predefinidas para los controles de entrada.
- <legend>: define un título para un elemento <fieldset>.
- <select>: define una lista desplegable.
- <textarea>: determina un control de entrada multilínea (área de texto).
- <label>: establece una etiqueta para un elemento <input>.
- <fieldset>: agrupa elementos relacionados en un formulario.
- <option>: determina una opción en una lista desplegable.
- <optgroup>: señala un grupo de opciones relacionadas en una lista desplegable.
- <button>: establece un botón en el que se puede hacer clic.
La etiqueta HTML<form> es un elemento de bloque que se utiliza para crear una sección interactiva en una página web que permite a los visitantes enviar información a un servidor web. Es útil para recopilar información de contacto, realizar encuestas o permitir que los usuarios dejen comentarios.
Ejemplo de etiquetas de formulario en uso
<forma acción=”nombre del script” método=”obtener”>
Nombre: <tipo de entrada=”texto” nombre=”nombre”><br>
Correo electrónico: <input type=”text” name=”email”><br>
<tipo de entrada=”enviar” valor=”Enviar”>
</formulario>
Este es el resultado del ejemplo:
Otros tipos de etiquetas de formulario a usar
Dentro de una etiqueta HTML, un atributo dicta ciertos aspectos de un elemento HTML. Los atributos se componen de un par de nombre y valor; todas las etiquetas admiten atributos estándar.
A continuación, vamos a detallar todos los atributos HTML únicos actuales para la etiqueta <form> y una descripción de cada uno.
- accept-charset: designa las codificaciones de caracteres que se utilizarán cuando se envíe un formulario.
- action: designa dónde enviar los datos del formulario. Este atributo es una secuencia de comandos ASP, JavaScript, Perl, PHP o Python.
- autocomplete: alterna la función de autocompletar.
- enctype: determina cómo deben codificarse los datos del formulario enviado.
- method: señala el método HTTP utilizado para enviar datos de formulario. El método suele ser “obtener” o “publicar” como valor.
- name: establece un nombre para el formulario.
- novalidate: determina que el formulario no debe validarse al enviarlo.
- target: Designa dónde se muestra la respuesta generada al enviarla.
Lección 4: Etiquetas para diagramación y formato
Ahora veamos otros 3 tipos de etiquetas con son indispensables dentro de la programación web.
Etiquetas para diagramación
Vamos a ver 2 tipos de etiquetas para diagramación primordiales, de lista y de tablas.
Etiquetas de lista:
- <ul>: define una lista desordenada.
- <ol> desarrolla una lista ordenada.
- <li>: definir un elemento de lista.
- <dir>: no compatible con HTML5. Utilice <ul> en su lugarm, define una lista de directorios.
- <dl>: define una lista de descripción.
- <dt>: establece un término o nombre en una lista de descripción.
- <dd>: define una descripción de un término o nombre en una lista de descripción.
Etiquetas de tablas:
- <table>: define una tabla.
- <colgroup>: esta etiqueda permite establecer un conjunto de uno o más columnas en una tabla.
- <tfoot>: junta el contenido del pie de página en una tabla.
- <col>: especifica las propiedades de columna para cada columna dentro de un elemento <colgroup>.
- <caption>: determina un título de tabla.
- <tr>: establece una fila en una tabla.
- <td>: coloca una celda en una tabla.
- <tbody>: reune el contenido del cuerpo en una tabla.
- <thead>: agrupa el contenido del encabezado en una tabla.
- <th>: hace una celda de encabezado en una tabla.
- Etiquetas de formato
Veamos los ejemplos más relevantes de las etiquetas de formato para la programación:
- <style>: define la información de estilo para un documento.
- <data>: agrega una traducción legible por máquina de un contenido determinado.
- <div>: especifica una sección en un documento.
- <article>: determina un artículo.
- <aside>: define el contenido aparte del contenido de la página.
- <dialog>: hace un cuadro de diálogo o ventana.
- .<main>: especifica el contenido principal de un documento.
- <header>: establece un encabezado para un documento o sección.
- <section>: define una sección en un documento.
- <details>: busca definir detalles adicionales que el usuario puede ver u ocultar.
- <footer>: define un pie de página para un documento o sección.
- <summary>: señala un encabezado visible para un elemento <detalles>.
- <span>: determina una sección en un documento
Y, en lo que respecta a la metainformación, encontramos:
- <head>: define información sobre el documento.
- <basefont>: especifica un color, tamaño y fuente predeterminados para todo el texto de un documento. No es compatible con HTML5. Utilizar CSS en su lugar.
- <base>: detalla la URL base o de destino para todas las URL relativas en un documento.
- <meta>: especifica los metadatos sobre un documento HTML.
Lección 5: Etiquetas multimedia
Por último, vamos a pormenorizar los tags de multimedia, ya sea imagen, audio o video.
Primero con las imágenes:
- <img>: para incorporar una imagen.
- <figure>: especifica contenido independiente.
- <svg>: define un contenedor para gráficos SVG.
- <figcaption>: define un título para un elemento <figure>.
- <map>: define un mapa de imagen del lado del cliente.
- <area>: determina un área dentro de un mapa de imagen.
- <picture>: desarrolla un contenedor para múltiples recursos de imagen.
- <canvas>: es empleado para el dibujo de gráficas sobre la marcha, a través de secuencias de comandos (generalmente en JavaScript).
Ahora veamos los de audio y video:
- <audio>: establece un contenido de sonido.
- <video>: es empleada para incorporar un contenido de video.
- <track>: determina pistas de texto para elementos multimedia (<video> y <audio>).
- <source>: define múltiples recursos de medios para elementos de medios (<video>, <audio> e <imagen>).
Obtén tu certificado en introducción a la programación con HTML
Ya conoces lo básico para la programación web, un curso con certificación te llevará al siguiente nivel.
Si quieres aprender aún más en cómo crear y desarrollar sitios web, te invitamos a que accedas al curso de Fundamentos del la programación en HTML que Next U ha desarrollado para que consigas:
- Iniciar tu camino en maquetación Web
- Trabajar en agencias de diseño digital
- Ofrecer servicios de creación de páginas de Internet
