Aprende a utilizar HTML, CSS y JavaScript en programación web
Iniciando en la programación web
La programación web es una de las disciplinas más fascinantes que podemos encontrar en el mundo de la informática. Permite crear aplicaciones y sitios web en los que podemos interactuar con el usuario, tener bases de datos que guarden información y una experiencia de usuario que puede ser personalizada de acuerdo a sus necesidades.
En este artículo te enseñaremos cómo utilizar HTML, CSS y JavaScript para empezar a crear tus primeros sitios web en programación web, desde cero y con una explicación detallada de cada uno de los elementos y como utilizarlos.
HTML
El HTML es el lenguaje de marcado estándar utilizado para la creación de páginas web. HTML significa Hyper Text Markup Language y es la base para todos los sitios web en Internet. Con este lenguaje puedes crear el esqueleto de tu página web, definiendo la estructura y el contenido de esta.
Para comenzar a trabajar con HTML, lo primero que debemos conocer son las etiquetas HTML. Las etiquetas HTML se utilizan para dar formato a los contenidos de nuestra página web. Cada etiqueta comienza con un símbolo de menor que (<) y termina con un símbolo mayor que (>). Existen etiquetas de apertura como ,
, , etc., y etiquetas de cierre como , , , etc.
Veamos un ejemplo con la estructura básica de un sitio web:
```
Título de la página
Encabezado
Este es un párrafo de ejemplo
```
En este ejemplo, podemos ver que la etiqueta `` representa el inicio del documento HTML, mientras que la etiqueta `` representa el final del documento. Dentro de la etiqueta `` encontramos dos etiquetas más, `
` y ``. El `` contiene información sobre el documento, mientras que el `` contiene el contenido visible en la página.
Dentro de la etiqueta `
`, encontramos la etiqueta `
`. Esta etiqueta se utiliza para especificar el título de la página que aparece en la barra de título del navegador. En el `<body>` podemos encontrar el encabezado `<h1>` y un par de etiquetas de párrafo `<p>`. El encabezado `<h1>` se utiliza para el título principal de la página, mientras que `<p>` se utiliza para los párrafos de texto.</p>
<h3>Etiquetas HTML comunes</h3>
<p>A continuación se muestra una lista de etiquetas HTML comunes:</p>
<ul>
<li>`<html>` – Comienzo del contenido HTML</li>
<li>`<head>` – Contiene información del documento, como metaetiquetas, archivos de estilo y scripts</li>
<li>`<title>` – Título de la página</li>
<li>`<body>` – Contiene el contenido visible de la página</li>
<li>`<h1>` – Encabezado principal de la página</li>
<li>`<p>` – Párrafo de texto</li>
<li>`<a>` – Enlace</li>
<li>`<img>` – Imagen</li>
<li>`<ul>` – Lista no ordenada</li>
<li>`<ol>` – Lista ordenada</li>
</ul>
<p>Estas etiquetas son solo algunas de las que se pueden utilizar en HTML. Si quieres profundizar en todas las etiquetas y cómo utilizarlas, te recomendamos buscar recursos adicionales.</p>
<h2>CSS</h2>
<p>El CSS es un lenguaje de hojas de estilo utilizado para aplicar estilos a las páginas HTML. CSS significa Cascading Style Sheets y permite aplicar reglas de estilo a los elementos HTML. Es importante destacar que CSS y HTML son lenguajes independientes. Puedes crear hojas de estilo CSS separadas o incluir tus estilos directamente en tu documento HTML.</p>
<p>El CSS se compone de reglas que se aplican a elementos HTML. Cada regla se compone de un selector y un bloque de propiedades. El selector se utiliza para seleccionar los elementos HTML que deseamos estilizar, mientras que el bloque de propiedades contiene los estilos que se aplicarán al elemento seleccionado. Un ejemplo de esto se puede ver en el siguiente código:</p>
```
h1 {
color: red;
font-size: 36px;
}
```
<p>En este ejemplo, el selector `h1` se utiliza para aplicar estilos al elemento de encabezado principal de la página. Los estilos que se aplicarán están dentro del bloque de propiedades que contienen la regla. Los estilos definidos son el tamaño de fuente y el color de texto, que se establecen en 36px y rojo, respectivamente.</p>
<p>CSS permite aplicar estilos a través de varias técnicas, como clases, ID, elementos, entre otras.</p>
<h3>Reglas CSS comunes</h3>
<p>A continuación se muestra una lista de reglas CSS comunes:</p>
<ul>
<li>`color` – Establecer el color del texto</li>
<li>`background-color` – Establece el color de fondo</li>
<li>`font-size` – Establece el tamaño de la fuente</li>
<li>`font-family` – Establece la fuente a utilizar</li>
<li>`text-align` – Establece la alineación del texto</li>
<li>`margin` – Establece el margen del elemento</li>
<li>`padding` – Establece el relleno dentro del elemento</li>
<li>`border` – Establece el borde del elemento</li>
</ul>
<p>Al igual que con HTML, esto es solo una selección de algunas de las reglas CSS que están disponibles.</p>
<h2>JavaScript</h2>
<p>El JavaScript es un lenguaje de programación utilizado para crear páginas web dinámicas e interactivas. Con JavaScript puedes crear animaciones, elementos de navegación, formularios, validaciones y muchas otras funcionalidades en tu página web.</p>
<p>JavaScript se puede usar en conjunction con HTML y CSS para crear una experiencia de usuario más rica y personalizada. Por ejemplo, puedes utilizar JavaScript para validar los campos de un formulario, animar un botón y enviar el formulario sin actualizar la página.</p>
<p>JavaScript se compone de variables, funciones, eventos, condiciones, loops, entre otros. Veamos un ejemplo de código JavaScript:</p>
```
let nombre = "Juan";
alert("Bienvenido " + nombre + "!");
```
<p>En este ejemplo, la variable `nombre` se establece como "Juan". La función `alert()` se utiliza para abrir una ventana emergente que da la bienvenida a la persona que visita nuestro sitio web. El resultado sería una ventana emergente que dice "Bienvenido Juan!"</p>
<h3>Conceptos JavaScript comunes</h3>
<p>A continuación se muestra una lista de conceptos JavaScript comunes:</p>
<ul>
<li>Variables – Contenedores de datos</li>
<li>Funciones – Un set de instrucciones para ser ejecutadas</li>
<li>Eventos – Acciones que suceden en una página web, como un clic de un botón</li>
<li>Condiciones – Permiten ejecutar un set de instrucciones si se cumple una condición</li>
<li>Loop – Permiten repetir un set de instrucciones varias veces</li>
<li>Objetos – Los objetos en JavaScript tienen propiedades y métodos que se pueden utilizar</li>
<li>Arrays – Contenedores de datos para un conjunto de elementos</li>
</ul>
<h2>Conclusión</h2>
<p>En resumen, HTML, CSS y JavaScript son los lenguajes fundamentales para la creación de sitios web. HTML es la estructura de tu sitio web, CSS es el estilo y la presentación de tu contenido, mientras que JavaScript es la funcionalidad y la interactividad.</p>
<p>La programación web no tiene límites, y con estos tres lenguajes, puedes crear sitios web increíbles que brinden una experiencia de usuario única. No te desanimes si al principio encuentras dificultades para entender alguno de estos lenguajes. Lo importante es continuar practicando y buscar recursos adicionales.</p>
<p>Esperamos que esta introducción haya sido útil para ti y te haya dado una idea de cómo utilizar HTML, CSS y JavaScript en la programación web. ¡Buenas suerte en tu viaje a la programación web!</p>
<ul>
<li><a href="https://ensilabas.com/html">html en sílabas</a></li>
<li><a href="https://ensilabas.com/página">página en sílabas</a></li>
<li><a href="https://ensilabas.com/javascript">javascript en sílabas</a></li>
</ul>
</div>
</div>
</div>
<div class="col-30">
<div class="sidebar-wrap">
<div class="sidebar-widget sidebar-widget-two">
<a class="btn btn-lg d-block mb-3" role="button" href="rand.php" style="text-align: center;">¡Sorpréndeme!</a>
<div class="widget-title mb-30">
<div class="section-title-line"></div>
</div>
<div class="adsense-fallback">
<!-- Banner estático como fallback -->
<a href="https://zbitt.com"><img src="https://escuelainformatica.es/banners/zbitt_cuadrado2.jpg" alt="Tu banner alternativo"></a>
</div>
<!-- cuadrado adaptable -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-6317373748139452"
data-ad-slot="9067692888"
data-ad-format="inline"
data-full-width-responsive="false"></ins>
<div class="hot-post-wrap">
<div class="stories-post">
<div class="hot-post-item">
<div class="hot-post-content">
<h4 class="post-title"><a href="blog/la-importancia-de-la-seguridad-en-desarrollo-web">La importancia de la seguridad en desarrollo web</a></h4>
</div>
</div>
</div>
<div class="stories-post">
<div class="hot-post-item">
<div class="hot-post-content">
<h4 class="post-title"><a href="blog/consejos-para-hacer-tu-sitio-web-mas-interactivo">Consejos para hacer tu sitio web más interactivo</a></h4>
</div>
</div>
</div>
<div class="stories-post">
<div class="hot-post-item">
<div class="hot-post-content">
<h4 class="post-title"><a href="blog/consejos-para-mejorar-tu-velocidad-de-programacion">Consejos para mejorar tu velocidad de programación</a></h4>
</div>
</div>
</div>
<div class="stories-post">
<div class="hot-post-item">
<div class="hot-post-content">
<h4 class="post-title"><a href="blog/los-mejores-lenguajes-de-programacion-para-la-web">Los mejores lenguajes de programación para la web</a></h4>
</div>
</div>
</div>
<div class="stories-post">
<div class="hot-post-item">
<div class="hot-post-content">
<h4 class="post-title"><a href="blog/como-utilizar-bases-de-datos-en-programacion-web">Cómo utilizar bases de datos en programación web</a></h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div> </div> </div>
<script>
var xhr = new XMLHttpRequest();
var url = "blog/visitas_update.php";
var params = "slug=" + encodeURIComponent(location.pathname);
xhr.open("GET", url + "?" + params, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// La solicitud se ha completado correctamente
var response = xhr.responseText;
// Mostrar el mensaje en un elemento HTML
document.getElementById("mensaje").innerHTML = response;
}
};
xhr.send();
</script>
<div id="mensaje"></div>
<!-- newsletter-area -->
<section class="newsletter-area-three">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="newsletter-wrap-three">
<div class="newsletter-content">
<h2 class="title">Suscríbete a nuestro Newsletter</h2>
</div>
<div class="newsletter-form">
<form method="post" action="./newsletter">
<div class="form-grp">
<input type="text" name="nombre" placeholder="Nombre" required>
</div>
<div class="form-grp">
<input type="email" name="email" placeholder="E-mail" required>
</div>
<input type="text" class="form-control" name="foo" style="display: none;">
<button type="submit" class="btn">Enviar</button>
</form>
</div>
<div class="newsletter-social">
<h4 class="title">Síguenos:</h4>
<ul class="list-wrap">
<li><a href="https://www.facebook.com/astiz/"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/>
</svg></a></li>
<li><a href="https://twitter.com/karlosastiz"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/>
</svg></a></li>
<li><a href="https://www.instagram.com/carlosastiz/"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"/>
</svg></a></li>
<li><a href="https://www.linkedin.com/in/carlosgonzalezastiz/"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/>
</svg></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- newsletter-area-end -->
</main>
<!-- main-area-end -->
<!-- footer-area -->
<footer>
<div class="footer-area">
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-7">
<div class="footer-widget">
<h4 class="fw-title">escuelainformatica.es</h4>
<div class="footer-content">
</div>
</div>
</div>
<div class="col-lg-6 col-md-4 col-sm-6">
<div class="footer-widget">
<h4 class="fw-title">Legal</h4>
<div class="footer-link-wrap">
<ul class="list-wrap">
<li><a href="legal.html">Legal</a></li>
<li><a href="cookies.html">Cookies</a></li>
<li><a href="contacto">Contacto</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="footer-bottom-menu">
<ul class="list-wrap">
<li><a href="#" id="open_preferences_center">Update cookies preferences</a></li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="copyright-text">
<p>Copyright © 2025 escuelainformatica.es</p>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/main.js"></script>
<script data-host="https://cookiefreemetrics.com" data-dnt="false" src="https://cookiefreemetrics.com/js/script.js" id="ZwSg9rf6GA" async defer></script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8852551531245776"
crossorigin="anonymous"></script>
<script>
window.onload = function() {
// Verificar solo una vez si los anuncios ya han sido cargados
var adElements = document.querySelectorAll('.adsbygoogle');
// Ejecutar adsbygoogle.push({}) una vez para cargar los anuncios
adElements.forEach(function(adElement) {
if (!adElement.hasAttribute('data-adsbygoogle-status')) {
(adsbygoogle = window.adsbygoogle || []).push({});
}
});
// Esperar 3 segundos antes de verificar si los anuncios han sido cargados
setTimeout(function() {
adElements.forEach(function(adElement) {
var fallbackElement = adElement.previousElementSibling; // Asumimos que el banner de fallback está justo antes del AdSense
var adStatus = adElement.getAttribute('data-ad-status');
// Si el anuncio no se ha llenado, mostramos el fallback
if (adStatus === 'unfilled') {
if (fallbackElement && fallbackElement.classList.contains('adsense-fallback')) {
fallbackElement.style.display = 'flex'; // Mantenemos el display como 'flex' para centrar el contenido
fallbackElement.style.visibility = 'visible'; // Asegura que sea visible
}
adElement.style.display = 'none'; // Ocultar el espacio reservado por AdSense
console.log("AdSense no cargó en uno de los banners, se muestra el banner estático.");
} else {
// Si el anuncio ha sido cargado correctamente, ocultamos el fallback
if (fallbackElement && fallbackElement.classList.contains('adsense-fallback')) {
fallbackElement.style.display = 'none';
}
adElement.style.display = 'block'; // Mostrar el anuncio de AdSense
}
});
}, 3000); // Esperar 3 segundos antes de verificar si AdSense ha cargado
};
</script>
</body>
</html>
