Hola! Buenas a todos, espero se encuentren muy bien! Por aquí dejo resuelto el ejercicio de la clase le añadí unos cambios probando css.
Enunciado:
Crea una página web utilizando los distintos elementos HTML que hemos ido estudiando en el curso que refleje de forma aproximada lo que se ve en esta imagen y que cumpla lo indicado más abajo.
(Imagen reflejada en la entrega del curso).
Los elementos a incluir son: un título h1, un título h2. Menú, separador hr, lista de elementos que son links, párrafos de texto que contienen algunos links. Imágenes. Un formulario. Imagen y texto de pie.
La página debe organizarse en capas según esta estructura: capa de cabecera (contiene títulos h1 y h2). Capa de cuerpo (contiene menú, párrafos y formulario). Capa de pie (contiene imagen y copyright).
Código De Mi Salida:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Clase #26 Ejercicio De La Clase .</title>
<!-- USADO PARA LLAMADO A ARCHIVO CSS LINK REL="stylesheet" TYPE="text/css" HREF="clasedetablas.css"!-->
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body style="background-image:url('http://dreamscoachtrue.com/wp-content/uploads/2016/03/matrix.jpg'); background-repeat: no-repeat; background-size: cover;">
<div class="container">
<div class="Global" style="padding: 10px; background-color: whitesmoke;">
<div class="Header">
<h1>
Portal Web AprenderAProgramar.Com
</h1>
<h3>
Didáctica Y Divulgación De La Programación
</h3>
</div>
<br />
<br />
<div class="Body">
Menú
<hr>
<ul>
<li><u><a href="#">Inicio</a></li></u>
<li><u><a href="#">Libros De Programación</a></li></u>
<li><u><a href="#">Cursos De Programación</a></li></u>
<li><u><a href="#">Humor Informático</a></li></u>
</ul>
</div>
<span>
<p style="text-align: justify-all;">
Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan. <br/><br/>
Hay que tener claro que <u><a href="#">aprender programación</a></u> no es tarea de un día ni de una semana: aprender programación <br/>
requiere al menos varios meses y, si hablamos de programación a nivel profesional, varios<br/> años. No queremos
con esto desanimar a nadie: en un plazo de unos pocos días podemos estar haciendo <br/> nuestros primeros programas.
<br/><br/>
Puedes seguir uno de <u><a href="#">nuestros cursos</a></u> entre los varios disponibles. Cuando haya que utilizar un editor de <br/>
textos recomendamos el uso de uno potente y sencillo como Sublime Text, aunque en el mercado las <br/>
alternativas son variadas una de ellas puede ser Eclipse.
</p>
<p>
<img src="https://upload.wikimedia.org/wikipedia/en/4/4c/Sublime_Text_Logo.png" alt="sublime text img" height="150px" width="150px">
<img src="http://seeklogo.com/images/E/Eclipse-logo-B806D85ADB-seeklogo.com.gif" alt="eclipse text editor img" height="150px" width="150px">
</p>
<p>
<form action="action.php" method="get">
<label>Si quieres contactar con nosotros envianos este formulario relleno:</label>
<br />
<label for="nombre">Nombres: </label>
<input type="text" name="nombre" id="form1">
<br />
<label for="apellidos">Apellidos: </label>
<input type="text" name="apellidos" id="form1">
<br />
<label for="direccion">Dirección: </label>
<input type="text" name="direccion" id="form1">
<br />
<label for="correo">Correo Electrónico: </label>
<input type="text" name="correo" id="form1">
<br />
<label for="mensaje">Mensaje: </label>
<textarea name="comentarios" rows="2" cols="30">...Tus comentarios aquí...</textarea>
<br /><br />
<input type="submit" value="Enviar!"> <input type="reset" value="Cancelar!">
<br /><br /><br />
</form>
</p>
</span>
<div class="Footer">
<img src="http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png" alt="footer aprender2program.com" height="100px" width="100px"> CopyRight 2006-2019 Apender2Program.com
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
PD: Hago llamado a Bootstrap por eso los scripts y las llamadas a los servidores en <head>
ya que me gusta el tipo de letra que aplican y como se ve de realizarla jeje.
Tema: Error: Bootstrap's JavaScript requires jQuery en consola ejercicio CU00726B (Leído 10018 veces)
RSS -
WAP2