Esta página sirve como presentación de los fundamentos para el desarrollo de páginas web.
En ella se introducirán los conceptos de los tres pilares de este tipo de desarrollo: HTML, CSS
yJavascript.
Siendo cada uno de ellos:
HTML
Lenguaje de marcado que sirve para posicionar elementos dentro de la página y definir la
semántica de la misma
CSS
CSS o Cascade Style Sheets es la definición de los estilos que tendrá la página
Javascript
Lenguaje script que define implementa la interacción del usuario con los diferentes elementos de
la página (entre otras cosas).
Muchos conceptos que se explican, son inexactos o están incompletos, ya que la finalidad es que
sirvan como una introducción a los fundamentos del desarrollo de páginas webs.
En el pie de la página se incluyen enlaces a documentación que se puede consultar para completar y
concretar estos conceptos.
Componentes de una web
Las páginas web se componen de ficheros con extensión .html, siendo la página principal o
la
entrada al sitio el fichero index.html.
Esta página sólo se compone de un fichero html.
Además de los ficheros .html, las web pueden contener ficheros con extensión
.css,
para
definir sus estilos;
ficheros con extesión .js para la implementación de la funcionalidad de los diferentes
elementos de la página;
así como otros ficheros como imágenes o vídeos.
HTML
Introducción
Como se decía en la presentación, el lenguaje HTML es un lenguaje de marcado, que se encarga de colocar
los diferentes elementos de una página web en la misma.
La forma de establecer estos elementos es mediantes etiquetas. Estas etiquetas deben tener una apertura
y un cierre y entre ellas se incluirán, bien otras etiquetas, bien el contenido a mostrar.
<button>¡Púlsame!</button>
Las etiquetas pueden cerrarse ellas mismas si no van a contener nada entre la de apertura y la de
cierre.
<input type="text" name="campo-formulario" />
Estructura
Las páginas web deben tener una estructura para que los navegadores puedan interpretarlas y
renderizarlas correctamente.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fundamentos Web</title>
<!-- PRE-CODE -->
<link type="text/css" rel="stylesheet" href="./assets/estilos.css" />
<script src="./assets/pre-code/pre-code.js"></script>
<!-- Estilos Personalizados -->
<link type="text/css" rel="stylesheet" href="./assets/estilos.css" />
<style>
footer {
background-color: #445775;
bottom: 0;
color: #cfd6e3;
min-height: 50px;
position: fixed;
width: 100%;
}
</style>
</head>
<body>
<section id="introduccion">
<h1>Presentación</h1>
<article>
<header>
<h2>Introduccion</h2>
<p>
Esta página sirve como presentación de los fundamentos para el desarrollo de páginas web.
En ella se introducirán los conceptos de los tres pilares de este tipo de desarrollo: HTML, CSS y Javascript.
</p>
</header>
</article>
</section>
<footer>
<div class="container">
<article></article>
<article></article>
<article></article>
</div>
</footer>
<script src="assets/scripts.js"></script>
</body>
</html>
La estructura comienza con la definición del tipo de documento doctype, de manera
que el navegagor sepa qué debe interpretar.
Desde la versión 5 de HTML (HTML5), esta etiqueta se ha simplificado y sólo es necesario
indicar que se trata de un documento HTML.
En versiones anteriores esta etiqueta tenía varias definiciones: static, transitional, ....
Esta etiqueta no requiere de ningún tipo de cierra, ya que es declarativa
<!DOCTYPE html>
Después de esta etiqueta, viene la estructura de la página con el contenido.
Toda página debe empezar con la etiqueta html. Ésta a su vez contendrá a las dos etiquetas
principales, head y body
La etiqueta head contiene la información de la página, como el título,
información para buscadores (etiquetas meta),
carga de ficheros de estilos (css) y scripts.
Adicionalmente, en la etiqueta head se puede incluir la etiqueta
<style></style> que defina los estilos de la página,
así como código Javascript, dentro de la etiqueta <script></script>,
aunque como se indicará más adelante, este tipo de código, es mejor hacerlo en ficheros aparte e
importarlos en la página.
Por último, tenemos la etiqueta <body></body> que será la que contenga el
contenido de la página.
Como se indicará más adelante en el apartado de javascript, al final de la
etiqueta <body></body>
pueden incluirse fragmentos de código javascript o importarse ficheros .js.
Lenguaje y Etiquetas
Las etiquetas, como se puede ver en el ejemplo del apartado anterior, pueden anidarse unas dentro de
otra.
Tal y cómo se vayan organizando, éstas quedarán dispuestas de una u otra manera dentro de la estructura
de la página, formando de esta manera una jerarquía de las mismas.
Esto se podría asemejar a la forma en la que se distribuyen (maquetan) los diferentes elementos
de un libro, un periódico, ...
Existen diferentes tipos de etiquetas en el lenguaje HTML, como etiquetas para títulos
(H1, H2, H3, ...),
para imágenes img, formularios form, ...
Con la práctica, se irán conociendo estas etiquetas y cuál es su función.
Las etiquetas pueden contener información adicional a través de atributos. Algunas etiquetas requieren
de estos atributos para poder interpretarse correctamente.
Estos atributos se incluyen en la apertura de la etiqueta y, además de los que puedan ser requeridos, se
pueden definir atributos personalizados.
Por ejemplo, para indicar qué imagen debe cargarse en una etiqueta img se utilizará el
atributo src;
en un formulario, para indicar qué tipo de campo es el que se muestra, se utiliza el atributo
type.
Y, por ejemplo, si en una sección queremos incluir un atributo que contenga una breve descripción de la
misma, se utilizará el atributo <data-*>,
pudiendo poner cualquier valor en el asterisco, por ejemplo description
<section data-description="sección de información html">[...]</section>
Semántica
La semántica hace referencia a la relevancia de los elementos de una página sobre otros, de manera que
la estructura definida sea coherente con la información transmitida.
Es decir, si queremos crear un título principal y un subtítulo para una sección, el primero debería
definirse con una etiqueta H1 y el segundo con una H2,
ya que la información semántica que transfiere la primera es superior a la segunda.
A su vez, la semántica viene definida por la jerarquía que se indicaba anteriormente, siendo más
relevantes elementos superiores, a sus hijos o de nivel inferior.
La forma en la que se estructure esta jerarquía definiendo la semántica de la página, hará que los
buscadores sean capaz de priorizar ciertos elementos de la página sobre otros,
facilitando el posicionamiento.
Una jerarquía clara y bien estructurada, se verá reforzada en las búsquedas y, además, será más
mantenible para el desarrollador.
CSS
Introducción
El CSS es la definición de estilos de la página. Con ellos podemos establecer colores, tipos de
fuentes, espaciados y un montón de estilos más, además de ciertos efectos.
Aquí sólo daremos una breve introducción que ayude a entender qué es exactamente y para qué sirven.
CSS u Cascading Style Sheets, (Hoja de Estilos en Cascada), es la
definición, que como su propio nombre indica,
de los estilos que queremos aplicar a nuestras páginas, para definnir su aspecto y que se aplican en
forma de cascada. Es decir, los estilos que se encuentren más abajo serán los que se apliquen,
sobreescribiendo otros estilos que hayan sido definidos más arriba en la hoja de estilos. De igual
manera, si se cargan diferentes hojas de estilos, y algunos se aplican a los mismos selectores,
se aplicarán aquellos que se hayan importado después.
Como se indicó al principio, los estilos pueden definirse en la etiqueta <style>
dentro de la etiqueta <head>,
o bien importarse de ficheros de estilos o css mediante la etiqueta
<link>,
siendo esta última, la opción más recomendada.
Hay cantidad de estilos que se pueden aplicar, desde colores de fondo, bordes, márgenes, espaciados,
distribución de elementos en contenedores, ...,
hasta efectos, transiciones o animaciones, visibilidad, ...
También se pueden definir efectos para pseudo elementos, que son aquellos que hacen referencia
a una acción o posición virtual del propio elementos sobre el que se define el estilo,
como efectos al posicionar el cursor encima, insertar algún elemento, carácter, ..., antes o después del
elemento, hacer referencia si se aplica al primer elemento hijo, o al primer elemento de tipo, ...
Como se puede ver en los ejemplos, los estilos se definen indicando un selector y entre llaves
{} se incluyen la propiedad a definir y el valor a aplicar,
separados por dos puntos :font-size: 28px;, y separando cada
propiedad por un punto y coma ;.
Con la práctica se irán conociendo las diferentes propiedades, como las unidades o valores que admiten
las mismas.
Selectores
Mediantes los selectores es la forma a través de la que se indica a las hojas de estilos sobre qué
elementos debe aplicar los estilos. Algunos de estos selectores son los siguientes:
Etiqueta
Se puede utilizar una etiqueta html como selector para aplicar un estilo:
Entre los atributos que se pueden aplicar a las etiquetas html, existe el identificador o
id. Este identificador debe ser único y no debe aplicarse a ningún otro elemento de la
página.
La forma de acceder a este selector es mediante el símbolo #
Las clases son nombres que ponemos a estilos que podemos querer compartir entre diferentes
elementos, o un valor de la propiedad class de los elementos,
que puede servir para marcar diferentes elementos con una característica común, de manera que se
pueda actuar sobre ellos de forma simultánea.
Se pueden definir múltiples clases en cada elemento.
La forma de acceder a las clases es mediante el símbolo punto .
Otra forma de acceder a los elementos de la página, es mediante los atributos de los elementos.
Para acceder mediante este tipo de selector, lo hacemos con el atributo entre corchetes
[].
Aunque no es la mejor forma, ya que tienen sus propis selectores, tanto el id como las
clases class,
son atributos y se podría acceder a ellos también mediante este selector.
Para hacer más preciso el selector, se puede acceder tanto sólo por el atributo, como por el
atributo y su valor.
En este ejemplo, se aplicaría un estilo a todas las etiquetas <section> con
atributo data-info,
pero además, a la sección que tiene como valor en el atributo HTML, se le cambiaría el
color del texto a blue,
al tratarse de un selector más específico.
Combinados
Se pueden combinar diferentes selectores, de manera que en una misma definición, se aplique a
diferentes elementos que no tengan ningún tipo de selector en común.
Los selectores se separarían mediantes comas ,.
Por ejemplo, si se quiere aplicar el mismo estilo a una sección con la clase principal y a
las etiquetas H1, se haría de la siguiente manera:
Otra forma de definir selectores es a través de un selector padre y navegar hasta el/los
elemento/s hijo/s.
La forma de indicar este selector es escribiendo la jerarquía de los elementos desde el
padre/ancestro
hasta el elemento al que se le quiere aplicar el estilo, dejando un espacio entre elementos.
Javascript es un lenguaje de script, a través del que se puede implementar la funcionalidad para que el
usuario pueda interactuar con la página,
además de definir eventos sobre los diferentes elementos de la página.
El código puede incluirse dentro de las propias páginas dentro de las etiquetas script o
importar los ficheros que contienen el código javascript.
Debido a que es un tema que requiere más aprendizaje, sólo se incluirán una serie de ejemplos que
muestren algunas de las posibilidades que ofrece el uso del
lenguaje javascript.
Ejemplos
Validación
Una de las funciones habituales de javascript es la de validar formularios antes de enviarlos. En
este ejemplo veremos un caso habitual de validación y envío de formularios.
¡¡Formulario enviado correctamente!!
Mostrar mensajes
En muchas páginas según las acciones que se realicen, se pueden mostrar una serie de mensajes
emergentes. En este ejemplo vamos a ver los más habituales,
aunque cada vez se utilizan más mensajes emergentes personalizados, frente a los nativos, para poder
personalizarlos y agergarles mayor funcionalidad.
Para no complicar el ejemplo, se verán los mensajes alert y confirm.
Ventana de Advertencia
Ventana de Confirmación
Alterar elementos
Otra de las posibilidades que ofrece javascript es la de poder alterar los elementos de la página web.
Aquí se mostrarán algunos ejemplos, como cambiar el color de fondo de un elemento,
cambiar un texto, modificar la visibilidad, crear nuevos elementos o eliminar existentes
o desplazar un elemento dentro de otro.
Cambiar color
Modificar texto
Se ha forzado cierto retardo en la escritura
Visibilidad
Lista de tareas
Mover
Realizar peticiones externas
Este ejemplo va a recuperar de la página Giphy
hasta diez
gifs en función del texto introducido en la caja de texto.
La búsqueda se realizará automáticamente a partir del 3 carácter introducido.
