Skip to content

Latest commit

 

History

History
155 lines (101 loc) · 7.6 KB

capitulo12.md

File metadata and controls

155 lines (101 loc) · 7.6 KB
Raw

¿Qué es una página web?

Este breve capítulo resume lo que necesitas saber acerca de la web y las páginas web.

TL;DR

  • La World Wide Web (o Web) es un espacio de información construido sobre Internet. Los recursos web son accesibles a través de su URL, y pueden contener hiperenlaces a otros recursos.

  • Una página web es un documento apropiado para la web. Crear páginas web generalmente involucra tres tecnologías: HTML para estructurar el contenido, CSS para definir su presentación y JavaScript para añadir interactividad.

  • Un documento HTML está hecho de texto y elementos estructurales llamados etiquetas que describen el contenido de la página, tales como: párrafos, encabezados, hiperenlaces, imágenes, etc.

  • CSS usa selectores para declarar a qué elementos HTML se les aplica un estilo. Los elementos pueden ser seleccionados por el nombre de la etiqueta (h1), clase (.terminado) o un identificador (#groseria).

  • Un documento HTML puede incluir una hoja de estilos CSS con la etiqueta <link> y un archivo JavaScript con la etiqueta <script>.

<!doctype html>
<html>

<head>
    <!-- Información de la página: título, conjunto de caracteres, etc. -->

    <!-- Enlace a una hoja de estilo CSS -->
    <link href="ruta/al/archivo.css" rel="stylesheet" type="text/css">
</head>

<body>
    <!-- Contenido de la página -->

    <!-- Enlace a un archivo JavaScript -->
    <script src="ruta/al/archivo.js"></script>
</body>

</html>
  • Un navegador es un programa que usas para visitar páginas web y usar aplicaciones web. Los modernos incluyen un conjunto de herramientas para desarrolladores para facilitar el trabajo de desarrollar para la web.

Internet y la Web

Como probablemente sabes, la World Wide Web (o Web para abreviar) es un espacio de información en continua expansión construido sobre Internet. Los recursos web son accesibles a través de su dirección, denominada URL, y pueden contener hiperenlaces a otros recursos. Juntos, todos estos recursos interconectados forman un enorme entramado semejante a una telaraña.

Los documentos apropiados para la web son llamados páginas web. Son agrupados en sitios web y visitados a través de un tipo especial de programa llamado navegador.

Los lenguajes de la Web

Hay tres tecnologías principales para crear páginas web: HTML, CSS y JavaScript.

HTML

HTML, siglas en inglés de HyperText Markup Language, es el formato de las páginas web. Un documento HTML está hecho de texto y elementos estructurales llamados etiquetas. Las etiquetas se usan para describir el contenido de la página, tales como: párrafos, encabezados, hiperenlaces, imágenes, etc.

Aquí hay un ejemplo de una página web sencilla, generalmente almacenada como un archivo .html.

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Mi página web</title>
</head>

<body>
    <h1>Mi página web</h1>
    <p>¡Hola! mi nombre es Baptiste.</p>
    <p>Vivo en la gran ciudad de <a href="https://es.wikipedia.org/wiki/Burdeos">Burdeos</a>.</p>
</body>

</html>

Resultado de visualización

Aquí hay algunas referencias para aprender más sobre HTML:

CSS

CSS, o hoja de estilo en cascada, es un lenguaje usado para modificar la presentación de páginas web

CSS usa selectores para declarar a qué elementos se aplica un estilo. Muchas estrategias de selección son posibles, especialmente:

  • Todos los elementos de determinado nombre de etiqueta.
  • Elementos correspondientes a determinada clase (sintaxis del selector: .miClase).
  • El elemento correspondiente a un determinado identificador único (sintaxis del selector: #MiId).

Este es un ejemplo sencillo de una hoja de estilo CSS, generalmente almacenada como un archivo .css.

/* Todos los elementos h1 están en rosa */
h1 {
   color: pink;
}

/* Todos los elementos con la clase "terminado" están tachados */
.terminado {
  text-decoration: line-through;
}

/* El elemento que tiene el id "groseria" es mostrado en mayúsculas con un tipo de fuente especial */
#grosero {
  font-family: monospace;
  text-transform: uppercase;
}

Una hoja de estilo es asociada con un documento HTML usando una etiqueta link en la sección head de la página.

<!-- Enlace a una hoja de estilo CSS -->
<link href="ruta/al/archivo.css" rel="stylesheet" type="text/css">

Para aprender más sobre CSS, visita los siguientes enlaces:

JavaScript

JavaScript puede interactuar con un documento HTML para proporcionar interactividad dinámica: respuestas a las acciones del usuario en la página, estilizado dinámico, animaciones, etc. Es el único lenguaje de programación entendido por todos los navegadores de internet.

Un archivo JavaScript, generalmente almacenado en un archivo .js, es cargado por una página web con la etiqueta <script>.

<!-- Carga un archivo JavaScript -->
<script src="ruta/al/archivo.js"></script>

Desarrollo de páginas web

Para crear páginas web interactivas, necesitas escribir código HTML, CSS y JavaScript. Si apenas estás comenzando, la forma más fácil de hacerlo es usando un entorno virtual de JavaScript. Sin embargo, en algún punto probablemente quieras desarrollar de una manera más profesional, o necesites trabajar fuera de línea.

Consulta el apéndice para más detalles sobre cómo configurar tu entorno.

¡Hora de programar!

Puedes saltarte este ejercicio si tienes experiencia previa con HTML y CSS.

Tu primera página web

Sigue los pasos al inicio del tutorial Primeros pasos en la Web de la Red de desarrolladores de Mozilla para crear una página web sencilla usando HTML y CSS. Los pasos necesarios son:

  1. ¿Cuál será la apariencia de tu sitio web?
  2. Manejo de archivos
  3. Conceptos básicos de HTML
  4. Conceptos básicos de CSS

Resultado esperado