En este blog hablaremos de tres cosas fundamentales para conseguir un buen diseño, tocaremos temas relacionados como HTML5 (Enmaquetación), CSS (Estilos) y JavaScript (Dinamismo de la Página) (Figure 1)
 |
| Diseño Web (Figure 1) |
Hmtl5: No es un
Lenguaje de programación, ya que no dispone de un compilador, ni puede realizar
procesos, entre otras cosas. Sin embargo lo podemos conocer como un lenguaje de etiqueta.
(Figure 2)
 |
| HTML5 (Figure 2) |
Etiquetas básicas de Html5:
<!--Así se realizan los comentarios en el
código HTML5-->
<!DOCTYPE html>
<html>
<head> <!-- se coloca la
información que se le proporciona al Navegador
y
al servidor para opciones de búsqueda, entre otras -->
<title>Aprende HTML5</title> <!--
Titulo en la pestaña del Navegador -->
<meta
/> <!-- sirve para cololar información de la
página (Los búscadores utilizan está Información) -->
<link
rel = "stylesheet" href = "css/styles.css"/> <!--
Conexión con la hoja de Estilos css -->
<script
src="js/aprende.js"></script> <!--
Conexión con JavaScript -->
</head>
<body> <!--
Cuerpo del Documento -->
<header> <!-- Encabezado
de la página -->
<h1>Titulo
más Grande</h1> <!-- Titulo de la página van del
<h1> al <h6> -->
</header>
<section> <!--
Secciones de la página -->
<!--
Las <Section> guardan información principal de la página-->
<article> <!-- Articulo
de la Sección -->
<h1></h1> <!--
Titulo H1 -->
<p></p> <!--
Párrafo del Articulo -->
<h2></h2> <!--
Titulo H2 -->
<p></p> <!--
Párrafo del articulo -->
<h6></h6> <!--
Titulo H6 -->
<p></p> <!--
Párrafo del articulo-->
</article>
<article> <!-- Articulo 2 de
la Sección -->
<h1></h1>
<p></p>
<h2></h2>
<p></p>
<h6></h6>
<p></p>
</article>
</section>
<aside> <!--
Contenido asilado del Tema del Formulario -->
</aside>
<footer> <!--
Píe de página del Documento -->
<p></p> <!-- Párrafo del Píe de Página -->
</footer>
</body>
</html>
CSS: Sirve como un organizador de código Html, permiendo presentarlo de forma organizada y con un mayor estilo, permite dar un mayor aspecto al código html. como el color, la posición, el tamaño, entre otras. (Figure 3)
 |
| CSS3 (Figure 3) |
Ejemplo de colocación de estilo
/* Etiquetas
para agregar comentarios */
body /* Modifique el cuerpo del
documento HTML según lo que esta dentro de {} */
{
background-size:
100vw 100vh; /* Para defirnir un tamaño del 100% por alto y por ancho de
una imagen */
background-repeat: no-repeat; /* para definir que la imagen dentro
del body no se repita */
}
header /* Modifique los encabezados del
documento HTML según lo que esta dentro de {} */
{
background-color:
black; /* el fondo del encabezado va ser de color Negro */
color:
purple; /* El color de la letra del encabezado va a ser de color Purpura */
}
#tituloprincipal /* Haga cambios a un
identificador en HTML (<header id ="tituloprincipal"> ) según
{}*/
{
margin:
auto; /* la margen del id sea automática */
text-align: center; /* El texto del id este centrado */
}
.nav /* Haga cambios a la clase nav en
HTML (<nav class ="nav">)
según {}*/
{
margin-left:
auto;
background-color:
purple;
color:
black;
}
JavaScript: Lo podemos definir como un lenguaje de programación que le puede dar dinamismo a una página Web, este lenguaje de programación no necesita de un compilador ya que el código es interpretado a partir del navegador que se esté utilizando. Algunas ventajas de javaScript son: En algunas ocasiones no hay necesidad de poner el punto y coma en partes especificas del código, además da un mayor dinamismo a la página para que deje de ser estática y pase a ser dinámica, entre muchas más. (Figure 4)
 |
| JavaScript (Figure 4) |
<!DOCTYPE html>
<html>
<head>
<title>ejemplo js</title>
<script
src="js/aprende.js"></script>
</head>
<body>
<section>
<label>
digite algo </label>
<input
type="text" name="data" id= "data">
<button
onclick= "getData ()">obtener</button>
</section>
<section>
<input
type="text" name="respose" id="response"
disabled>
</section>
</body>
</html>
---------------------------------------JAVA
SCRIPT---------------------------------------------
function getData()
{
var data =
document.getElementById('data').value
var
response = 0
response =
data * 2001;
if
(response % 2 == 0)
{
document.getElementById('response').value = response
}
else
{
document.getElementById('response').value = response
}
}
0 comentarios:
Publicar un comentario