jueves, 3 de febrero de 2022

Solución Bootstrap 8

Nuevoindex.html

<!DOCTYPE html>

<html lang="es">

<head>
  <title>Bootstrap 8</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body class="text-center" style="background-color:#BAB5B4;">
    <div class="container">
<div class="well" style="margin-top:10px;">
<h1>Cursos de programación!</h1>
<p>Aprende con nosotros los lenguajes de programación web más modernos del mercado</p>
</div>
<h2 class="well" style="background-color:#BAB5B4;">Lenguajes en el entorno cliente</h2>
<div class="row">
    <div class="col-sm-4">
<img src="html.png" class="img-rounded" alt="html5" width="200" height="200">
</div>
<div class="col-sm-4">
<img src="css.png" class="img-rounded" alt="css" width="200" height="200">
</div>
<div class="col-sm-4">
<img src="javascript.png" class="img-rounded" alt="javascript" width="200" height="200">
</div>
</div>
<h2 class="well" style="background-color:#BAB5B4;">Lenguajes en el entorno servidor</h2>
<div class="row">
    <div class="col-sm-4">
<img src="wordpress.png" class="img-rounded" alt="wordpress" width="200" height="200">
</div>
<div class="col-sm-4">
<img src="php.png" class="img-rounded" alt="php" width="200" height="200">
</div>
<div class="col-sm-4">
<img src="java.png" class="img-rounded" alt="java" width="200" height="200">
</div>
</div>
<br>

<ul class="pager">
  <li class="previous"><a href="index1.html">Previous</a></li>
  <li class="next"><a href="index2.html">Next</a></li>
</ul>
      <hr>
      <footer class="text-left"> 
  <p class="pull-right">&copy; Prin Enterprise.<br>&copy; Todos los derechos reservados.</p>
  <address>
<strong>Diseñado por Colores S.A.</strong><br>
Carrer de la Jota, 123<br>
St. Andreu, Barcelona<br>
<abbr title="Teléfono">Tel:</abbr> 944123456
  </address>
      </footer>
    </div>
  </body>
</html>


Index1.html

<!DOCTYPE html>

<html lang="es">

<head>
  <title>Bootstrap 8</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body class="text-center" style="background-color:#BAB5B4;">
    <div class="container">
<div class="well" style="margin-top:10px;">
<h1>Lenguajes en el entorno cliente!</h1>
<p>Aprende con nosotros los lenguajes de programación web más modernos del mercado</p>
</div>

<div class="row text-center">
    <div class="col-sm-4">
<img src="html.png" class="img-rounded" alt="html5" width="200" height="200">
</div>
<div class="col-sm-4">
<img src="css.png" class="img-rounded" alt="css" width="200" height="200">
</div>
<div class="col-sm-4">
<img src="javascript.png" class="img-rounded" alt="javascript" width="200" height="200">
</div>
</div>
<br>
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
¿Qué es HTML?</a>
  </h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
  <div class="panel-body">HTML, sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros.</div>
</div>
  </div>
  <div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
CSS</a>
  </h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
  <div class="panel-body">Hojas de estilo en cascada (o CSS, siglas en inglés de Cascading Stylesheets) es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado.2​ Es muy usado para establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS... También permite aplicar estilos no visuales, como las hojas de estilo auditivas.</div>
</div>
  </div>
  <div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Javascript</a>
  </h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
  <div class="panel-body">JavaScript es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos,3​ basado en prototipos, imperativo, débilmente tipado y dinámico. Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas4​ aunque existe una forma de JavaScript del lado del servidor(Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo.</div>
</div>
  </div>
</div>
<ul class="pager">
  <li class="previous"><a href="index2.html">Previous</a></li>
  <li class="next"><a href="nuevoindex.html">Next</a></li>
</ul>
      <hr>
      <footer class="text-left"> 
  <p class="pull-right">&copy; Prin Enterprise.<br>&copy; Todos los derechos reservados.</p>
  <address>
<strong>Diseñado por Colores S.A.</strong><br>
Carrer de la Jota, 123<br>
St. Andreu, Barcelona<br>
<abbr title="Teléfono">Tel:</abbr> 944123456
  </address>
      </footer>
    </div>
  </body>
</html>


Index2.html

<!DOCTYPE html>

<html lang="es">

<head>
  <title>Bootstrap 8</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body class="text-center" style="background-color:#BAB5B4;">
    <div class="container">
<div class="well" style="margin-top:10px;">
<h1>Lenguajes en el entorno servidor!</h1>
<p>Aprende con nosotros los lenguajes de programación web más modernos del mercado</p>
</div>

<div class="row text-center">
    <div class="col-sm-4">
<img src="wordpress.png" class="img-rounded" alt="wordpress" width="200" height="200">
</div>
<div class="col-sm-4">
<img src="php.png" class="img-rounded" alt="php" width="200" height="200">
</div>
<div class="col-sm-4">
<img src="java.png" class="img-rounded" alt="java" width="200" height="200">
</div>
</div>
<br>
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
¿Qué es Wordpress?</a>
  </h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
  <div class="panel-body">Aunque esté aquí incluido Wordpress no es un lenguaje, pero sí que necesita de un servidor para funcionar. WordPress es un sistema de gestión de contenidos o CMS (por sus siglas en inglés, Content Management System) enfocado a la creación de cualquier tipo de página web. Originalmente alcanzó una gran popularidad en la creación de blogs, para convertirse con el tiempo en una de las principales herramientas para la creación de páginas web comerciales. Está desarrollado en el lenguaje PHP para entornos que ejecuten MySQL y Apache, bajo licencia GPL y es software libre.</div>
</div>
  </div>
  <div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
¿Es útil PHP con MySQL?</a>
  </h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
  <div class="panel-body">Muy útil. PHP es un lenguaje de programación de propósito general de código del lado del servidor originalmente diseñado para el desarrollo web de contenido dinámico. Fue uno de los primeros lenguajes de programación del lado del servidor que se podían incorporar directamente en un documento HTML en lugar, de llamar a un archivo externo que procese los datos. El código es interpretado por un servidor web con un módulo de procesador de PHP que genera el HTML resultante. <br><br>MySQL es un sistema de gestión de bases de datos relacional desarrollado bajo licencia dual: Licencia pública general/Licencia comercial por Oracle Corporation y está considerada como la base datos de código abierto más popular del mundo,1​2​ y una de las más populares en general junto a Oracle y Microsoft SQL Server, sobre todo para entornos de desarrollo web.</div>
</div>
  </div>
  <div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Y ¿Java?</a>
  </h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
  <div class="panel-body">Java es un lenguaje de programación de propósito general, concurrente, orientado a objetos, que fue diseñado específicamente para tener tan pocas dependencias de implementación como fuera posible. Su intención es permitir que los desarrolladores de aplicaciones escriban el programa una vez y lo ejecuten en cualquier dispositivo (conocido en inglés como WORA, o "write once, run anywhere"), lo que quiere decir que el código que es ejecutado en una plataforma no tiene que ser recompilado para correr en otra. Java es, a partir de 2012, uno de los lenguajes de programación más populares en uso, particularmente para aplicaciones de cliente-servidor de web, con unos diez millones de usuarios reportados.</div>
</div>
  </div>
</div>
<ul class="pager">
  <li class="previous"><a href="nuevoindex.html">Previous</a></li>
  <li class="next"><a href="index1.html">Next</a></li>
</ul>
      <hr>
      <footer class="text-left"> 
  <p class="pull-right">&copy; Prin Enterprise.<br>&copy; Todos los derechos reservados.</p>
  <address>
<strong>Diseñado por Colores S.A.</strong><br>
Carrer de la Jota, 123<br>
St. Andreu, Barcelona<br>
<abbr title="Teléfono">Tel:</abbr> 944123456
  </address>
      </footer>
    </div>
  </body>
</html>