Autor Tema: div y span HTML tags.Capas o conten. Maquetar estructura de páginas web CU00726B  (Leído 2443 veces)

LuisM

  • Intermedio
  • ***
  • APR2.COM
  • Mensajes: 131
    • Ver Perfil
Hola a todos !!! Paso a dejar el código HTML solicitado en el ejerecicio. Desde ya, muchas gracias.
Un saludo,
Luis
 EJERCICIO

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:

Código HTML
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo etiqueta span - aprenderaprogramar.com</title>
</head>
<body>
<div style="text-align: left; border: 1px solid black;">
<h1> Portal web aprenderaprogramar.com </h1>
<h2> Didáctica y divulgación de la programación </h2>
<div>
Menú
<hr size="1px" color="black" />
 <ul>
<li type="disc"> <a href = "https://www.aprenderaprogramar.com/">Inicio</li>
<li type="disc"> <a href = "https://www.aprenderaprogramar.com/index.php?option=com_content&view=category&layout=blog&id=87&Itemid=26">Libros de programación</li>
<li type="disc"> <a href = "https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86">Cursos de programación</li>
<li type="disc"> <a href = "https://www.aprenderaprogramar.com/index.php?option=com_content&view=category&layout=blog&id=90&Itemid=48">Humor informático</li>
<a href=""></a>
</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="https://www.aprenderaprogramar.com">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, vario
años. No queremos con esto desanimar a nadie: en un plazo de unos pocos días podemos estar haciendo
nuestro primeros programas</p>
<p>Puedes seguir unos de <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86">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 alternativas como Crimson Editor. </p>
<img src="https://i.imgur.com/9Nrs8W4.jpg" title="Notepad++" alt="Notepad">
<img src="https://i.imgur.com/XVzHcmA.jpg" title="Crimson Editor" alt="Crimson">
</br></br>
Si quieres contactar con nosotros envíanos este formulario relleno:
<form action="https://www.aprenderaprogramar.com" method="get">
<p>
<label for="nom">Nombre: </label>
<input type="text" name="nombre" id="nom" />
<br/>
<label for="ape">Apellido: </label>
<input type="text" name="apellido" id="ape" />
<br/>
<label for="dir">Dirección: </label>
<input type="text" name="direccion" id="dir" />
<br/>
<label for="ema">email: </label>
<input type="text" name="email" id="ema" />
<br/>
<br/>
<label for="men">Mensaje: </label>
<textarea name="consulta" rows="3" cols="40" id="men"></textarea>
<br/>
<br/> <br/>
<input type="submit" value="Enviar" />
<input type="reset" value="Cancelar" />
</p>
</form>
</div>
<div>
<img src="https://i.imgur.com/L3Cuf0Y.jpg" title="Aprender a programar" alt="AprenderAProgramar">
Copyright 2006-2038 aprenderaprogramar.com
</br>
</div>
</body>
</html>

paramonso

  • Intermedio
  • ***
  • Mensajes: 241
  • El ignorante afirma, el sabio duda y reflexiona.
    • Ver Perfil
Hola LuisM.

Esta todo bien pero te falta el cierre de la primera etiqueta <div>.
<div style="text-align: left; border: 1px solid black;"> a esta etiqueta la falta la etiqueta de cierre al final de la pagina </div>
Yo le habría quitado el marco .

Por lo demás todo Ok. 

Un saludo.
 ;D

LuisM

  • Intermedio
  • ***
  • APR2.COM
  • Mensajes: 131
    • Ver Perfil
Muchísimas gracias paramonso !!!. Si señor, faltaba el cierre del primer div. Además quité el marco que estaba al divino botón y que con el cierre del div quedó más en evidencia. También saqué un parrafo <p> sin ninguna utilidad en el segundo div.
Nuevamente, muchas gracias por revisar mi código !!  :)
Ahora pego el código HTML corregido
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo etiqueta span - aprenderaprogramar.com</title>
</head>
<body>
<div>
<h1> Portal web aprenderaprogramar.com </h1>
<h2> Didáctica y divulgación de la programación </h2>
</div>
<div>
Menú
<hr size="1px" color="black" />
 <ul>
<li type="disc"> <a href = "https://www.aprenderaprogramar.com/">Inicio</li>
<li type="disc"> <a href = "https://www.aprenderaprogramar.com/index.php?option=com_content&view=category&layout=blog&id=87&Itemid=26">Libros de programación</li>
<li type="disc"> <a href = "https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86">Cursos de programación</li>
<li type="disc"> <a href = "https://www.aprenderaprogramar.com/index.php?option=com_content&view=category&layout=blog&id=90&Itemid=48">Humor informático</li>
<a href=""></a>
</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="https://www.aprenderaprogramar.com">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, vario
años. No queremos con esto desanimar a nadie: en un plazo de unos pocos días podemos estar haciendo
nuestro primeros programas</p>
<p>Puedes seguir unos de <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86">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 alternativas como Crimson Editor. </p>
<img src="https://i.imgur.com/9Nrs8W4.jpg" title="Notepad++" alt="Notepad">
<img src="https://i.imgur.com/XVzHcmA.jpg" title="Crimson Editor" alt="Crimson">
</br></br>
Si quieres contactar con nosotros envíanos este formulario relleno:
<form action="https://www.aprenderaprogramar.com" method="get">
<label for="nom">Nombre: </label>
<input type="text" name="nombre" id="nom" />
<br/>
<label for="ape">Apellido: </label>
<input type="text" name="apellido" id="ape" />
<br/>
<label for="dir">Dirección: </label>
<input type="text" name="direccion" id="dir" />
<br/>
<label for="ema">email: </label>
<input type="text" name="email" id="ema" />
<br/>
<br/>
<label for="men">Mensaje: </label>
<textarea name="consulta" rows="3" cols="40" id="men"></textarea>
<br/>
<br/> <br/>
<input type="submit" value="Enviar" />
<input type="reset" value="Cancelar" />
</form>
</div>
<div>
<img src="https://i.imgur.com/L3Cuf0Y.jpg" title="Aprender a programar" alt="AprenderAProgramar">
Copyright 2006-2038 aprenderaprogramar.com
</br>
</div>
</body>
</html>

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".