Autor Tema: Maquetar web con divs spans según un modelo Ejercicio CU00726B Curso básico HTML (Leído 2627 veces)

Boletos · « **en:** 09 de Enero 2016, 20:39 »

Hola compis!!! Os dejo mi solución al ejercicio 726B, en el que hay dos diferencias que no supe solucionar:

1) En mi solución del ejercicio, todo (texto e imagenes) queda pegado al borde, cuando en el ejercicio propuesto hay al menos un espacio de separación.

2) La imagen de "Crimson Editor" queda alineada arriba, cuando en al ejercicio propuesto está alineada a abajo.

Os agradecería ayuda además de cualquier otra sugerencia.

Un saludo!!

Código: [Seleccionar]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Ejercicio 726B Contenedores</title>
	</head>
	<body style="border: 1px solid black; background-color:#FAFAFA">
	<!--Cabecera-->
		<a name="arriba"></a>
		<div style="text-align: center;">
			<h1>Portal web aprenderaprogramar.com</h1>
			<span><h2>Didáctica y divulgación de la programación</h2></span>
		</div>
	<!--Cuerpo-->
		<div>
			Menú
			<hr width="90%"/>
			<ul style="list-style-type:disc">
				<li><a href="#arriba">Inicio</a></li>
				<li><a href="http://https://www.aprenderaprogramar.es/index.php?option=com_content&view=section&layout=blog&id=7&Itemid=26" 
					target="_blank" title="aprenderaprogramar.com">Libros de programación</a></li>
				<li><a href="http://https://www.aprenderaprogramar.es/index.php?option=com_content&view=article&id=57&Itemid=86" 
					target="_blank">Cursos de programación</a></li>
				<li><a href="https://www.aprenderaprogramar.es/index.php?option=com_content&view=section&layout=blog&id=10&Itemid=48" 
					target="_blank">Humor informático</a></li>
			</ul>
			Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan.<br/><br/>
			Hay que tener claro que <a href="http://https://www.aprenderaprogramar.es/index.php?option=com_content&view=frontpage&Itemid=46"
				target="_blank">aprender programación</a> no es tarea de un día ni de una semana: aprender
				programación requiere al menos varios meses y, si hablamos de programación a nivel profesional, varios
				años. No queremos con esto desanimar a nadie: en un plazo de unos pocos días podemos estar haciendo
				nuestros primeros programas.<br/><br/>
				
				Puedes seguir uno de <a href="http://https://www.aprenderaprogramar.es/index.php?option=com_content&view=article&id=57&Itemid=86"
				target="_blank">nuestros cursos</a> entre los varios disponibles. Cuando haya que utilizar un editor de
				textos recomendamos el uso de uno potente y sencillo como Notepad++, aunque son válidas otras
				alternaticas como Crimson Editor.<br/>
			<a href="https://notepad-plus-plus.org/" target="_blank" title="Enlace notepad++"><img src="Notepad++.jpg" alt="Notepad.jpg" align="left" width="150px"></a>
			<a href="http://www.crimsoneditor.com/" target="_blank" title="Enlace Crimson Editor"><img src="CrimsonEditor.jpg" alt="CrimsonEditor.jpg" width="350px"></a>
			<br/><br/><br/><br/><br/><br/>
			Si quieres contactar con nosotros envianos este formulario relleno:
			<br/>
			<form method="get" action="http://aprenderaprogramar.es/action.php">
				Nombre: <input type="text" name="nombre"/><br/>
				Apellidos: <input type="text" name="apellidos"/><br/>
				Dirección: <input type="text" name="direc"/><br/>
				Correo electrónico: <input type="text" name="email"/><br/>
				Mensaje: <textarea name="msg" rows="4" cols="50"></textarea><br/>
				<br/>
				<input type="submit" value="Enviar"/>
				<input type="reset" value="Cancelar"/><br/><br/><br/>
			</form>
		</div>
	<!--Pié página-->
		<div>
			<img src="AprendeAProgramar.png" alt="logo.png" height="60px" aling="right">
			Copyright 2006-2038 aprenderaprogramar.com
		</div>
	</body>
</html>

Dimitar Stefanov · « **Respuesta #1 en:** 12 de Enero 2016, 15:05 »

Buenas Boletos,

Creo que la cuestion de que nos quede o no pegado todo el contenido a la izquiera es cuestión de la propiedad "paddin" que se estudian sus características en el curso "CSS desde cero". A mi también me queda todo pegado a la izquiera, pero como en el ejercicio no se mencionaba nada que teníamos que desplazar el contenido un pelín a la derecha, no le presté mucha importancia.

Sobre la segunda cuestión, a mi me quedan bien los imágenes. Supongo que es porque los textos los meto entre etiquetas <p></p>.

A continuación cuelgo mi código del ejercicio:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Ejemplo etiquetas div</title>
</head>
<body style="border: 1px solid black; width: 80%;">
	<div>
		<h1>Portal web aprenderaprogramar.com</h1>
		<h2>Didáctica y divulgación de la programación</h2>
	</div>
	<div>
		Menú
		<hr style="height: 1px; color: 1px solid black; width: 99%;"/>
		<ul>
			<li><a href=#>Inicio</a></li>
			<li><a href=#>Libros de programación</a></li>
			<li><a href=#>Cursos de programación</a></li>
			<li><a href=#>Humor informático</a></li>
		</ul>
		<p>
		Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan.
		</p>
		<p>
		Hay que tener claro que <a href=#>aprender programación</a> no es tarea de un día ni de una semana: aprender programación requiere al menos varios meses y, si hablamos de programación a nivel profesional, varios años. No queremos con esto desanimar a nadie: en un plazo de unos pocos días podemos estar haciendo nuestros primeros programas.
		</p>
		<p>
		Puedes seguir uno de <a href=#>nuestros cursos</a> entre los varios disponibles. Cuando haya que utilizar un editor de textos recomendamos el uso de uno potente y sencillo como Notepad++, aunque son válidos otras alternativas como Crimson Editor.
		</p>
		<img src="logonotplusplus.png" alt="logotipo01">
		<img src="logo.jpg" alt="logotipo02">
		<p>
		Si quieres contactar con nosotros envianos este formulario relleno:
		</p>
		<form method="get" action="http://aprenderaprogramar.com">
			<label for="nombre">Nombre:</label>
			<input type="text" name="nombre" id="nombre"/>
			<br/><br/>
			<label for="apellidos">Apellidos:</label>
			<input type="apellidos" name="apellidos" id="apellidos"/>
			<br/><br/>
			<label for="direccion">Dirección:</label>
			<input type="direccion" name="direccion" id="direccion"/>
			<br/><br/>
			<label for="correo">Correo electrónico:</label>
			<input type="text" name="correo" id="correo"/>
			<br/><br/>
			<label for="mensaje">Mensaje:</label>
			<textarea name="mensaje" id="mensaje" rows="2" cols="40"></textarea>
			<br/><br/>
			<input type="submit" value="Enviar"/>
			<input type="reset" value="Cancelar"/>
		</form>
	</div>
	<div>
	<p>
	<img src="imagen.png" alt="logotipo03">
	Copyright 2006-2038 aprenderaprogramar.com
	</p>
	</div>
</body>
</html>

Boletos · « **Respuesta #2 en:** 19 de Enero 2016, 01:48 »

Tomo nota, muchas gracias por la atención.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: