Si eres de esas personas que quieres empezar con la programación web, igual no tienes nada claro cómo se estructura este tipo de programación y qué lenguajes de programación deberás de aprender para poder convertirte en todo un experto de programación web. Así que para poder ayudarte un poco, vamos a repasar brevemente cuáles son, comentando por encima las principales características de cada uno de ellos.
El desarrollo de una aplicación web consta básicamente de un lenguaje de etiquetas construido por el HTML, un lenguaje de estilos construido por el CSS para representar los elementos del HTML y por un lenguaje de programación, JavaScript, que es el responsable del funcionamiento de la aplicación.
Lenguaje HTML
El HTML es un lenguaje de marcas de hipertexto (HyperText Markup Language) que se emplea para estructurar semánticamente el contenido de una página web. Para definir qué se ve y cómo se ve, se utilizan las llamadas etiquetas (o Tags en inglés), que le trasladan al navegador web las instrucciones necesarias para que presente la página en la pantalla.
Para definir una etiqueta se utilizan los paréntesis angulares < > (los símbolos «menor que» y «mayor que», que enmarcan habitualmente la etiqueta de apertura o inicio, y «</» «>», que acotan la etiqueta de cierre o final). Lo que hay entre las etiquetas suele ser el texto que se puede ver directamente en pantalla, o aquellos elementos que no están destinados a ser visibles y su relación con otros documentos.
Existen tres etiquetas básicas que estructuran el texto en html.
- La etiqueta ‘html’, que nos indica dónde empieza y acaba el documento, es decir, engloba a todo el documento html.
- Seguidamente se añade la etiqueta de ‘head’, cuya función es delimitar la cabecera del documento html. Generalmente incluye el título de la página y los metadatos, aunque también puede incluir referencias a archivos de estilos, scripts, etc.
- Y, por último, la etiqueta de ‘body’, la cual engloba a todo el contenido visual de la página web.
Para empezar a trabajar deberás de abrir un editor de texto y guardar el archivo con la extensión.
Ejemplo 1. Estructura del HTML.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Títulos</title> </head> <body> </body> </html>
Dentro del ‘body’ se pueden incluir textos, listas, enlaces, imágenes y formularios.
Ejemplo 2. Párrafos.
El texto se organiza en párrafos dentro del cuerpo del documento, entonces el navegador irá colocando las palabras que aparezcan dentro de las marcas hasta rellenar una línea, aunque si dentro del párrafo se le añade un salto de línea con “<br/> <br>”, entonces te permite saltar de línea sin necesidad de añadir una línea nueva.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Títulos</title> </head> <body> <p>Aquí aparece mi primer párrafo de texto></p> </body> </html>
Ejemplo 3. Encabezados.
Los encabezados sirven para separar secciones por tanto el título de cada sección se muestra en negrita (‘h’) y el tamaño depende de la numeración, desde ‘1’ más grande hasta ‘6’ más pequeño.
<html> <head> <meta charset="utf-8"> <title>Títulos</title> </head> <!-- Encabezado --> <body> <h1> Primer título</h1> <h2> Segundo título</h2> <h3> Tercer título</h3> <h4> Cuarto título</h4> <h5> Quinto título</h5> <h6> Sexto título</h6> </body> </html>
Ejemplo 4. Negritas y Cursivas.
El texto también se puede poner en “<em>itálica</em>” y “<strong>negrita</strong>”.
<html> <head> <meta charset="utf-8"> <title>Título</title> </head> <body> <p>Esto está escrito con <em>énfasis</em> y esto con <strong>fuerza</strong></p> </body> </html>
Ejemplo 5. Listas ordenadas y listas no ordenadas.
Las listas como tal son una relación de elementos y pueden ser ordenadas “<ol></ol>” cuyos elementos son precedidos de un número y las listas no ordenadas “<ul></ul>” son precedidos de bullets.
<html> <head> <meta charset="utf-8"> <title>Título</title> </head> <body> <h1> Lista de la compra</h1> <ol> <li> Azúcar <li> <li> Sal </li> <li> Aceite </li> </ol> </body> </html>
<html> <head> <meta charset="utf-8"> <title>Título</title> </head> <body> <h1> Lista de la compra</h1> <ul> <li> Azúcar <li> <li> Sal </li> <li> Aceite </li> </ul> </body> </html>
Ejemplo 6. Enlaces.
Para que un enlace funcione en una página web es importante determinar origen, que es la parte del documento que contiene el enlace, y el destino, que es el destino del enlace, es decir, el documento, recurso, página web, etc. Para ello hay que poner “<a></a>” o “<a href= página web> </a>”.
<html> <head> <meta charset="utf-8"> <title>Título</title> </head> <body> <p>Página web que sirve para buscar páginas: <a href="https://www.google.es">Este sitio</a> </p> </body> </html>
Ejemplo 7. Imágenes.
Para introducir una imagen en el html se le añade “<img />” incluyendo el ‘src’, que es el origen de la imagen y en el caso de que se quiera incluir un texto alternativo a la imagen se le añade el ‘alt’.
<html> <head> <meta charset="utf-8"> <title>Título</title> </head> <body> <a href="https://www.google.es"> <img src="prueba.png" alt="Imagen de test"/> </a> </body> </html>
Ejemplo 8. Formularios.
Ejemplo 8. Formularios.Los formularios son la principal forma de comunicación entre cliente – servidor. La estructura del formulario es “<form></form>” y dentro se pueden incluir botones, cuadros de texto, etc.
- Cuadro de texto: <input type= “text”/>
- Checkbox: <input type= “checkbox”/>
- Radiobutton: <input type= “radio”/>
- Lista desplegable: <select><option></option></select>
- Área de texto: <textarea></textarea>
- Botón: <button type= “button”></button>
Ejemplo 9. Bloques DIV.
Los bloques ‘div’ permiten definir un bloque genérico que carece de semántica en el que se rellenara del contenido de la página web. Es muy útil cuando se quiere maquetar la página web. Tiene dos atributos de identificación que son el ID (nombre que identifica unívocamente un elemente HTML) y la Class (nombre que identifica una clase de elementos HTML del documento).
<html> <head> <meta charset="utf-8"> <title>Página HTML con divs</title> </head> <body> <div id="caja1" style="background-color:#CCC;"> <h1>Cabecera</h1> </div> <div id="caja2" style="background-color:#CCC;"> <p>Menú</p> <ul> <li> Opción 1 <li> <li> Opción 2 </li> </ul> </div> <div id="caja3" style="background-color:#CCC;"> <p>Aquí algoo de <em>texto</em></p> </div> </body> </html>
Ejemplo 10. Bloque SPAN
Ejemplo 10. Bloque SPANEl elemento ‘span’ define un elemento en línea genérico que carece de semántica. Es muy útil cuando se quiere dar formato a una palabra, o darle un ancho diferente a parte de la página.
<html> <head> <meta charset="utf-8"> <title>Título</title> </head> <body> <form> <h1>Vamos a cambiar el <span style="color:#00F;">color</span>del título</h1> </form> </body> </html>
CSS
Un CSS (de sus siglas, Cascading Style sheets) es un código que va unido al HTML y cuya función es modificar todo lo que esté relacionado con el estilo. Esto permite que la misma página web pueda ser visualizada de diferentes formas solo cambiando el código del archivo CSS.
Para construir un archivo de estilos es necesario utilizar un selector que aplica el estilo a un elemento de la página web. Presenta una serie de propiedades: color, ancho, relleno y borde.
- background-color:#ccc; (color de fondo gris especificado en código hexadecimal)
- color:#fff; (color del texto dentro de la caja en blanco)
- width:100px; (ancho de 100 píxeles)
- padding:20px; (relleno o margen interior de 20 píxeles por cada lado)
- border:1px solid #000; (borde de color negro continuo de 1 píxel de grosor)
- border-radius:5px; (redondeado de un ángulo de 5 píxeles en todas las esquinas de la caja)
Existen distintas formas de añadir estilos a una página web:
p {
color: red;
width: 500px;
border: 1px solid black;
}#Mapa1 {
float: left;
width: 49%;
height: 100%;
border-style: double;
}Ejemplo 1. Comandos en Línea.
Esto se consigue definiendo estilos sobre la propia etiqueta, es decir añadir un atributo ‘style’ al elemento deseado.
<html>
<head>
<meta charset="utf-8">
<title>Estilo</title>
</head>
<body>
<p>Este párrafo no tiene un estilo definido</p>
<p style: "Font-size: 16px; color: blue; Font-family: Arial, Helvetica,sans-serif;"> Este párrafo si tiene un estilo definido</p>
</body>
</html>
Ejemplo 2. En la cabecera del HTML.
En este caso, se aplican unos estilos que sirven para todo el contenido del documento HTML, no hay que repetir etiquetas. Se añade dentro de la etiqueta ‘head’. Presenta la siguiente estructura: “<style type=”text/css”> Estilos </style>”.
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
h1 {background-color:#CCC; }
em{ color:orange;
background-color: #EBEBEB;}
</style>
<title>Estilo</title>
</head>
<body>
<h1> Encabezado 1 </h1>
<p>
Aquí algoo de <em>texto</em>
</p>
</body>
</html>
Ejemplo 3. En archivo independiente.
Se basa principalmente en incluir dentro del ‘head’ un link donde hace referencia al archivo CSS creado. Su estructura es la siguiente: “<link href = “nombredelarchivo.css” rel = “stylesheet” type = “text/css”>”.
JavaScript
JavaScript es un lenguaje de programación interpretado mediante los scripts que son secuencias de comandos ejecutados desde el lado del cliente. Además, permite la utilización de objetos, es decir, es una programación orientada a objetos.
Los scripts describen pequeñas acciones o eventos que se van añadiendo para generar programas de mayor envergadura. Su estructura es “<script type = “text/javascript”> Código </script>”. Se incluye dentro del ‘head’ del archivo HTML pero se recomienda hacerlo en un archivo aparte con extensión ‘.json’.
Dentro del script se crean las variables, las funciones y los eventos con sus correspondientes instrucciones.
- Las variables pueden ser locales o globales. La diferencia es que la variable global puede ser accesible desde cualquier parte de la página web. Se forma con la palabra ‘var’.
- Las funciones son una o varias instrucciones de código que son accesibles con un nombre y que pueden tener ninguno, uno o varios parámetros de entrada y salida. Se forma con la palabra ‘function’.
- Los eventos son situaciones que ocurren en un instante de tiempo. Los manejadores son funciones que se ejecutan al ocurrir un evento. Por eso hay que tener acceso a DOM (de sus siglas, Document Object Model) el cual se obtiene durante la creación de la página web o cuando ocurre un evento. El DOM es un objeto javascript asociado al HTML que contiene toda la página. Esto da la posibilidad de poder modificar el código del elemento DOM mediante la propiedad innerHTML.
- Existen varios tipos de eventos que pueden ser muy útiles como:
- Asociados a la ventana del navegador (onload, …)
- Asociados a un formulario (onsubmit, …)
- Asociados al teclado (onkeypress, …)
- Asociados al ratón (onclick, ondbclick, …)
- Existen varios tipos de eventos que pueden ser muy útiles como:
Me gusta la forma cómo tratan el tema de la programación Web y me gustaría que me recomendaron algunos libros y guías muy prácticos para mejorar y aprender más de este tema ok.
Muy instructivo todo los contenidos presentados concernientes a la programación. Esto es el ABC de los que se inician en el mundo de la Programación.
Muchas Gracias,
Onelio García
CEO of Hobbiesenred
muy interesante el articulo! sobre todo para aquellos que están comenzando en el mundo de la programación.
Saludos