Autor Tema: Ejercicio CU00727B tutorial HTML: creación de portal básico con cabecera y pie (Leído 4923 veces)

borri_10 · « **en:** 04 de Marzo 2015, 17:48 »

<html>
<head>
<meta charset="utf-8">
<title> Ejercico CU00727B </title>
</head>
<body>
<div id="page" style="text-align:center;margin:auto;width=1000px;border:1px solid black;"/>
<div id="header">
<img=" http://www.ligafutbol.net/wp-content/2011/04/simpson_atletico_de_madrid.jpg" width="250px">
<h1> Página Oficial Atletico de Madrid </h1>
<a href="http://clubatleticodemadrid.com/" width="25%">
<img src=" http://www.colchonero.com/media/galeria/4/2/2/8/5/n_atletico_de_madrid_atletico_de_madrid_wallpapers-5675822.jpg" title="Acceder a Atleticodemadrid.com" width="200px"></a>
</div>
<div id="wrapper">
<div>Menu</div>
<ul>
<li> <a href=" http://www.clubatleticodemadrid.com/galerias/siqueira-regreso-al-trabajo-con-el-grupo">Siqueira regresó al trabajo</a></li>
<li> <a href=" http://www.clubatleticodemadrid.com/noticias/godin-200-partidos-como-rojiblanco">Godin, 200 partidos como rojiblanco</a></li>
<li> <a href=" http://www.clubatleticodemadrid.com/noticias/saul-se-sometio-a-nuevas-pruebas-y-visito-a-sus-companeros"> Saúl lesionado</a></li>
<li> <a href=" http://www.clubatleticodemadrid.com/noticias/el-atletico-de-madrid-premiado-por-la-aepd"> Premios a Enrique Cerezo</a></li>
<li> <a href=" http://www.clubatleticodemadrid.com/noticias/el-bayer-leverkusen-pasa-a-cuartos-en-la-prorroga">El leverkusen da miedo</a></li>
</ul>
<br/>
<img src=" http://www.colchonero.com/media/users/4/9/6/0/o_a_bienme_atletico_de_madrid_13069_20140306134355.gif" width="100px" title="Muerte al Madrid" align="center">
<br/>
<p> Las noticias del Atlético de Madrid a día 04/03/2015 son las que se muestran en la parte media de la página. Como podemos 
observar, nuestro equipo se mantiene en forma, a pesar de las numerosas bajas que acumulamos debido a los durisimos últimos 
3 partidos</p>
<p> La noticia mas destacada es el premio que ha recibido nuestro presidente <u> Enrique Cerezo </u> de la LFP, ya que el año
pasado fue uno de los mejores años de la entidad en cuanto a titulos se refiere.</p>
</div>
<br/>
<br/>
<br/>
<br/>
<div id="footer">
<img src=" https://eldescodificador.files.wordpress.com/2010/04/hommer.jpg" width="100px" title="Asi firmamos los atleticos">
Copyyright 1903-2003-Atleticodemadrid.com <a href=" http://clubatleticodemadrid.com/jugadores-primer-equipo/">La Plantilla</a>
</div>
</div>
</body>
</html>
[code]

Ogramar · « **Respuesta #1 en:** 04 de Marzo 2015, 21:51 »

Hola y forza atleti, buen comienzo para un portal:

a) Una cabecera con una imagen, un texto h1, y otra imagen que a su vez sea un link.

Mal: <img=" http://www.ligafutbol.net/wp-content/2011/04/simpson_atletico_de_madrid.jpg" width="250px">

Corregido: <img src="http://www.ligafutbol.net/wp-content/2011/04/simpson_atletico_de_madrid.jpg" width="250px">

b) Un cuerpo con un menú que contenga 5 items, una imagen y dos párrafos.

Bien

c) Un pie que contenga una imagen, un copyright y un texto que sea a su vez un link.

Bien

O sea, lo único que tienes mal es un despiste, te faltó el src, todo lo demás bien.

Salu2

jimmorrison · « **Respuesta #2 en:** 17 de Abril 2015, 01:26 »

Sigo yooo jeje

Código: [Seleccionar]

<!Doctype html>
<html lang="es">
<head>
<title>aprendiendo a programar</title>
<meta charset=utf8">
<meta name="description" content="portal aprendiendo a programar">
<meta name="keywords" content="aprender programar html portal">
</head>
<body>
<div id="pagina" style="text-align: center;">
<header id="cabecera">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQwrxF-gB-g5E16NKpOBLi8Yk0uGX38-lStv6_ovK8ikQIzpLfYZQ">
<h1>Portal (Tutorial básico del programador web: HTML desde cero) - aprenderaprogramar.com</h1>
<a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTploPhKxW0YPotEcyGMrM4E4XllvSlKcnFUO2jb8TplqPwFqvw" 

alt="niño programando" title="niño programando"></a>

</header>

<div id="pagina"> <!--pagina cuerpo-->

<div id="wrapper"><!--contenedor-->

<nav id="menu"> <!--inicio del menu -->
<span>Menu</span>
<hr style="color:red; background-color:red; width:50%;" />
<hr color="blue" size=3>

<ul>
<li><a href="#">Portada</a></li>
<li><a href="https://www.aprenderaprogramar.com">aprenderaprogramar.com</a></li>
<li><a href="#">curso</a></li>
<li><a href="#">tutorial</a></li>
<li><a href="#">imagenes</a></li>
</ul>
</nav><!--fin del menu nav -->

<section id="seccion"><!--inicio de seccion -->
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRslGpJiKnl23kPvgAsznGOFbELv80FRJ1p4k30j9U40Vd_am-N" alt="bebe html" 

title="bebe aprendiendo html">
<article id="articulo"><!--primer articulo -->
<p>Al hablar de fundamentos de programación nos referimos a aquellos
conocimientos básicos que nos permitirán desenvolvernos sin excesivo número
de tropiezos. Veamos a qué tipo de tropiezos nos referimos utilizando un
símil de transporte. El conductor (programador) dispone de un coche
(el ordenador) y desea trasladarse
</p>
</article><!--fin del primer articulo -->
<article id="articulo2">
<p>REACIÓN DE UN PORTAL BÁSICO

En las próximas entregas, nos vamos a centrar en poner en marcha todos los conocimientos que hemos ido adquiriendo a lo largo del 

curso para crear un pequeño, y de momento modesto, portal web. Para ello, vamos a crear un portal muy básico incluyendo algo de 

maquetación.

 


 

En primer lugar crearemos una página de inicio o portada que contendrá lo siguiente: una cabecera, un menú, un cuerpo y un pié. No 

entraremos a explicar los temas de diseño ni las hojas de estilos que se suelen usar en páginas web ya que ahora trataremos de 

centrarnos en cuestiones básicas de HTML sin complicarlo con otros aspectos añadidos.
</p>
</article>
</section]<!--fin de seccion -->

</div><!--fin de contenedor-->

<footer id="pie_de_pagina">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQma33TrUrcKIkRV-kj9RDpGndLI4rUpzV5gZq3AWpXe1hRCxcWcw" alt="feliz 

html" title="niño feliz html html5">
Copyright 2006-2072 aprenderaprogramar.com
</footer>

</div>
</body>
</html>

Ogramar · « **Respuesta #3 en:** 17 de Abril 2015, 09:14 »

Hola jimmorrison, también has hecho algo bastante original

:

Tienes un fallo <meta charset=utf8"> ahí te faltan las comillas

Aquí parece que hay otro fallo </section] no cierras bien </section>

a) Una cabecera con una imagen, un texto h1, y otra imagen que a su vez sea un link.

Bien

b) Un cuerpo con un menú que contenga 5 items, una imagen y dos párrafos.

Bien

c) Un pie que contenga una imagen, un copyright y un texto que sea a su vez un link.

Bien aunque creo que has olvidado de que el texto tenía que ser un link.

Lo único que tienes mal parecen despistes, todo lo demás bien.

Salu2

jimmorrison · « **Respuesta #4 en:** 17 de Abril 2015, 10:06 »

si me fallo el cierre

</section]

el utf-8 no lo cierro completo por que no me aparecen las tildes o las eñes si lo pongo completo
<meta charset="utf-8" por eso lo dejo asi

gracias ogramar por leer mi codigo me tiro a dormir que llevo desde las 11:00 am y ya son las 3:06 jaja

saludos

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

Noticias:

Autor Tema: Ejercicio CU00727B tutorial HTML: creación de portal básico con cabecera y pie (Leído 4923 veces)

borri_10

Ejercicio CU00727B tutorial HTML: creación de portal básico con cabecera y pie

Ogramar

Re:Ejercicio CU00727B tutorial HTML: creación de un portal básico

jimmorrison

Re:Ejercicio CU00727B tutorial HTML: creación de portal básico con cabecera y pie

Ogramar

Re:Ejercicio CU00727B tutorial HTML: creación de portal básico con cabecera y pie

jimmorrison

Re:Ejercicio CU00727B tutorial HTML: creación de portal básico con cabecera y pie

Preguntas y respuestas