HTML CSS JavaScript
Para este artículo primero se dará una explicación y luego un ejemplo
HTML
HTML es un lenguaje de programación que se utiliza para el desarrollo de páginas de Internet. Se trata de la siglas que corresponden a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto. Se puede decir que HTML se encarga de de crear la estructura básica de la página web.
ejemplo.
El consorcio de W3(World Wide Web) dicta diferentes estándares para la creación de sitios web en los cuales se tiene por ejemplo
_________________________________________________________________________________
Hasta este punto se puede tener el siguiente resultado, además se añade la biblioteca de estilos de Bootstrap
- HTML & CSS
- JavaScript Web APIs
- Gráficos
- Audio y Video
- Accesibilidad
- Internacionalización
- Web móviles
- Privacidad
- Matemática en la web
CSS
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. Es muy usado para establecer el diseño visual de los documentos web e interfaces de usuario escritas en HTML.
JavaScript
Es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico. Se utiliza principalmente en su forma del lado del cliente o frontend, implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas. También se puede utilizar en la parte del Servidor como por ejemplo al utilizar NodeJS.
Bootstrap
Es una biblioteca multiplataforma o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como extensiones de JavaScript adicionales. A diferencia de muchos frameworks web, solo se ocupa del desarrollo front-end.
Ejemplo
Se hará un pequeño ejemplo el cual incluirá los 4 conceptos ya explicados.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calculadora</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
<script src="index.js"></script>
</head>
<body>
<div class="mydiv">
<h1>Calculadora</h1>
<h2>Esta es una pequeña calculadora de sumas</h2>
<form>
<div><span><p>valor: </p></span><span><input type="number" name="sum1" id="sum1"></span></div>
<div><span><p>valor: </p></span><span><input type="number" name="sum2" id="sum2"></span></div>
<div><input type="button" name="but1" id="but1" onclick="sumar();" value="Sumar"></div>
</form>
<h2 id="resultado"></h2>
</div>
</body>
</html>
_________________________________________________________________________________
Hasta este punto se puede tener el siguiente resultado
_________________________________________________________________________________
Hasta este punto se puede tener el siguiente resultado
index.css
body{
background-image: url("bg.jpg");
}
.mydiv{
width: 500px;
height: 500px;
margin: auto;
border-color: #fff;
border-style: dashed;
background-color: #000;
color: #fff;
}
h1, h2 {
text-align: center;
}
div{
margin: 10px;
}
form{
margin-left: 50px;
margin-right: 50px;
}
input{
color: #000;
}
_________________________________________________________________________________
Hasta este punto se puede tener el siguiente resultado, además se añade la biblioteca de estilos de Bootstrap
index.js
function sumar(){
var sum1 = document.getElementById("sum1");
var sum2 = document.getElementById("sum2");
var resultado = document.getElementById("resultado");
var result = parseInt(sum1.value) + parseInt(sum2.value);
resultado.innerHTML= ""+result;
}
_________________________________________________________________________________
Finalmente la página tiene la posibilidad de sumar números
Finalmente la página tiene la posibilidad de sumar números
No hay comentarios.:
Publicar un comentario