DISEÑO ADAPTABLE RESPONSIVE Programación Web II
Enviado por caifual • 17 de Julio de 2021 • Informes • 536 Palabras (3 Páginas) • 621 Visitas
DISEÑO ADAPTABLE RESPONSIVE
Programación Web II
Instituto IACC
21.06.2021
Desarrollo
1. Obtenga una fila con cuatro columnas de anchos iguales para ser mostrada
en Tablet y escalando a formatos de mayor tamaño (3puntos).
Lo primero que vamos a hacer será crear el código que nos ayudara a darle función a lo que nos está solicitando y pidiendo en esta pregunta:
Código :
En esta parte del código, ingresamos las etiquetas <meta>, dentro de la etiqueta <head>,
cada una de ellas representa una funcion, para empezar, tenemos la etiqueta:
<meta name viewport> = que representa el diseño responsive, que le da visualización en todas las plataformas de nuestra pagina.
<link rel=” stylesheet” href=” css/bosstrap.min.css”>= Esta etiqueta nos permite darle estilo y color a la pagina web que se compone de el estilo css.
<script src=” http://code.jquery.com/jquery.js”>= etiqueta que nos ayuda a implementar jQuery
<script src=” js/boostrap.min.js”>= implementa el código de js.
PANTALLAZO:
[pic 1]
Ahora procedemos a trabajar en el cuerpo de nuestra página web a través de la etiqueta <body> en donde empezamos a escribir nuestro codigo, que contendrá nuestro contenido de la página diseñada.
Dentro de body tenemos las etiquetas div, con distintas clases tales como:
<div class= “container principal”> = que prácticamente es la clase principal del código, seguido de la etiqueta row, dentro de una clase que nos permitira mencionar la fila que crearemos.
PANTALLAZO:
[pic 2]
2. Realice una tabla responsive que contenga un scroll horizontal (3 puntos).
Para empezar este ejercicio iniciamos con una etiqueta <div class=”container”>, seguido de una clase table responsive que hsrs que se adapte la tabla a cualquier dispositivo, después de esto, las otras clases que le daran efecto, color, y fluidez a la tabla diseñada y a nuestra pagina web:
PANTALLAZO:
[pic 3]
3. Diseñe un cuadro de dialogo que contenga un título y tres botones, usted
debe colocarle la palabra de su preferencia (3 puntos).
Ahora haremos el botón por el cual nos permitirá que aparezca nuestra ventana emergente, después crearemos un botón para cerrar , después iniciamos el encabezado del cuadro de dialogo, y luego, en el cuerpo podemos poner lo que creamos, además es importante para que al final, pongamos el pie del cuadro de dialogo, donde pondremos los botones necesarios en nuestra pagina web :
PANTALLAZO:
[pic 4]
Codigo CSS que usaremos para darle color y dimensiones las columnas que hemos creado:
*/Codigo css:*//
@charset "utf-8";
/* CSS Document */
.principal{
background:yellow;
color:darkred;
text-aling: center;
}
div [class= "col"] {
border:1px;
color:#0A0201;
padding: 1em;
}
Codigo final de nuestra pagina web :
<!doctype html>
<html lang="es">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
...