Foros aprenderaprogramar.com

Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: LuisM en 24 de Octubre 2017, 01:02

Título: div y span HTML tags.Capas o conten. Maquetar estructura de páginas web CU00726B
Publicado por: LuisM en 24 de Octubre 2017, 01:02
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:
(https://i.imgur.com/Iozq5z8.jpg)
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>
Título: Re:div y span HTML tags.Capas o conten. Maquetar estructura de páginas web CU00726B
Publicado por: paramonso en 24 de Octubre 2017, 13:00
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
Título: Re:div y span HTML tags.Capas o conten. Maquetar estructura de páginas web CU00726B
Publicado por: LuisM en 24 de Octubre 2017, 15:17
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>