febrero 18, 2022

Conceptos básicos de desarrollo web: HTML, CSS y JavaScript para principiantes

El desarrollo web implica términos como texto HTML, CSS y JavaScript. La Web está construida con estos componentes. En el desarrollo web, estas herramientas son dominantes. Cada biblioteca o herramienta parece girar en torno al texto HTML, CSS y JavaScript. Como resultado, si planeas convertirte en desarrollador web, debes aprenderlos a la perfección. Estos tres […]

El desarrollo web implica términos como texto HTML, CSS y JavaScript. La Web está construida con estos componentes.

En el desarrollo web, estas herramientas son dominantes. Cada biblioteca o herramienta parece girar en torno al texto HTML, CSS y JavaScript. Como resultado, si planeas convertirte en desarrollador web, debes aprenderlos a la perfección. Estos tres idiomas se utilizan con para edificar sitios web.

¿Qué es cada uno de ellos y para qué sirven? ¿Por qué son tan importantes? ¿Por qué son tan frecuentes en los tutoriales y temas de desarrollo web?

Explicaremos a detalle: qué son HTML, CSS y JavaScript, cómo funcionan y qué pueden hacer por ti.

Laptop iluminada.

Lo esencial

La dirección IP de una computadora se puede usar para identificarla y ubicarla en Internet. Puede verse así: 168.212.226.204

Los sitios web son subconjuntos de Internet.

Asimismo, toda red informática tiene dos componentes principales: un cliente y un servidor.

Los clientes solicitan datos y los servidores los comparten o los sirven. Para lograr esto, ambas partes deben estar de acuerdo. Ese acuerdo se denomina API (Interfaz de programación de aplicaciones en inglés).

Estos datos deben organizarse y formatearse de manera comprensible para los usuarios finales, con una amplia gama de experiencia y habilidades técnicas.

Aquí participan el texto HTML, CSS y JavaScript, el concepto base del desarrollo web.

Texto en HTML

Texto en HTML

El texto HTML significa  Hyper Text Markup Language.

Es una instrucción para la composición tipográfica de un manuscrito, generalmente escrita en el propio manuscrito, en relación con el tipo de letra, el diseño de la página, etc.

¿Para qué se usa texto HTML? Para crear instrucciones detalladas sobre el estilo, el tipo, el formato, la estructura y el diseño de una página web antes de que se muestre.

Te permite dividir tu página en elementos como párrafos, secciones, encabezados, barras de navegación, etc.

Un documento se puede formatear y estructurar usando solo texto HTML. Algunos elementos web incluyen:

  • Encabezado de nivel 1 h1
  • Nivel 2 rumbo h2
  • Nivel 3 rumbo h3
  • Un párrafo p
  • Una lista desordenada con viñetas ul li
  • Una entrada de entrada de botón
  • Todo el cuerpo de la página.

Estos elementos también pueden tener atributos para identificarlos y acceder a ellos desde otras partes del sitio. Para todos los elementos de tres tramos, podemos establecer el atributo id. Nuestro JavaScript podrá acceder a estos archivos como veremos después.

Este atributo es similar a tu nombre de usuario de redes sociales. Otras personas pueden encontrarte en las redes sociales usando este nombre. Este nombre se puede usar para referirse a ti (puedes ser etiquetado en una publicación, etc.).

Necesitarás diseñar cualquier cosa que no sea una demostración para que sea más presentable. Esto se puede hacer con CSS.

CSS

Logo CSS.

CSS es un lenguaje de diseño que se utiliza para que tu página web se vea agradable y presentable. El texto HTML es un lenguaje de marcado utilizado para la estructura y el formato de una página web.

¿Qué significa CSS? Hojas de estilo en cascada (Cascading Style Sheets). Puedes usarlo para hacer que un sitio web se vea mejor. Con los estilos CSS, puedes mejorar la apariencia de tu página y la facilidad de uso para el usuario final.

Imagina un mundo en el que los seres humanos fueran solo restos óseos. ¿Qué aspecto tendría? No uno muy agradable. CSS sería como nuestra apariencia física.

CSS se puede utilizar para colocar elementos en tu página.

Debes "seleccionar" estos elementos para acceder a ellos. Los elementos web únicos o múltiples se pueden seleccionar y colocar o diseñar como desees.

Los selectores de CSS gobiernan este proceso.

CSS te permite establecer el color, el fondo, la fuente, el margen, el espaciado, el relleno y muchos más atributos para tus elementos.

¿Cómo funciona CSS?

Al aplicar un estilo, nuestro sitio web se verá diferente.

Seleccionar un elemento nos da acceso a él. Los encabezados de nivel 1 en la página son seleccionados por el elemento h1, los elementos de nivel 2 son seleccionados por h2, etc. Los elementos del texto HTML que selecciones se pueden colocar o mostrar de la forma que desees.

JavaScript

JavaScript.

¿Qué hace JavaScript? El lenguaje de marcado es texto HTML, CSS es el lenguaje de diseño, por lo que JavaScript es el lenguaje de programación.

Si no estás familiarizado con la programación, considere lo siguiente: Comes cuando tienes hambre. Duermes cuando estás cansado. Buscas calor cuando tienes frío.

Cada vez que sucede algo, tu cerebro está programado para reaccionar o responder de cierta manera. Lo mismo se aplica a la programación de tu página web, o con elementos individuales para reaccionar de cierta manera y responder a un evento que ocurre.

Además de acciones y condiciones, puedes programar cálculos, solicitudes de red e instrucciones de concurrencia.

Se puede acceder a cualquier elemento mediante la API del modelo de objetos de documento (DOM) y modificarlo como quieras.

En el navegador, el DOM representa una página web en forma de árbol.

El DOM representa cada elemento en una página web

Se puede acceder a nuestra página web utilizando métodos gracias al DOM.

Se puede hacer que un sitio web "piense y actúe" usando JavaScript. De eso trata la programación.

En una página HTML de ejemplo, íbamos a presentar el resultado de agregar los dos números a la página, en lugar del texto de marcador de posición. Una vez que se hace clic en el botón, se ejecuta el cálculo.

¿Recuerdas los atributos del texto HTML y cómo se usan? 

Una función de visualización toma dos elementos de una página web, los convierte en números, los suma y los pasa a otro elemento como valores internos.

Como resultado de establecer atributos únicos en estos elementos, pudimos acceder a ellos desde JavaScript.

¿Cómo combinar texto HTML, CSS y JavaScript?

Formateamos, diseñamos y programamos páginas web utilizando estos tres lenguajes juntos.

Se convierte en un sitio web cuando vinculas páginas web con hipervínculos, junto con todos tus activos en la computadora del servidor, como imágenes, videos, etc.

Los usuarios normalmente pueden ver e interactuar con el contenido renderizado en el front-end, donde ocurre esta renderización.

El back-end de un sitio web almacena y da acceso a datos, incluida información confidencial, como contraseñas. Contenido del sitio web que existe solo en la computadora del servidor y no se muestra en la computadora del cliente. El usuario no puede acceder fácilmente a este contenido en la computadora del cliente.

Sitio web en una laptop.

Pensamientos finales

Al crear sitios web, los desarrolladores web utilizan texto HTML, CSS y JavaScript.

El sitio está programado en JavaScript, estructurado en texto HTML y diseñado en CSS.

CSS se puede utilizar para crear animaciones y transiciones suaves.

CSS también se puede utilizar para alguna programación básica. Esto se puede ver en el caso de las consultas de medios, donde se definen diferentes reglas de estilo para diferentes resoluciones (tamaños) de pantalla.

Además, JavaScript ahora también se usa fuera del navegador.

Sin embargo, texto HTML, CSS y JavaScript siguen siendo los lenguajes más poderosos de la Web.

Hemos cubierto los conceptos básicos de los lenguajes web. Gracias por leer.

From a line on a piece of paper to a final product, the story unfolds from the earliest ideas to individual integrity and strong identity.
Newsletter
Subscribe and check out my weekly blog

Created by Nally Villezca © 2022 | Content by Word Stylers