Autor Tema: HTML. Subir nuestra web al servidor html ejemplo de estructura con div CU00730B (Leído 2386 veces)

Jack_F · « **en:** 20 de Diciembre 2016, 07:14 »

Hola amigos aquí esta mi ejercicio CU00730B del curso fundamentos de programación web con HTML, una web básica de mi cantante favorito, Wiz Khalifa.

Citar

EJERCICIO

Crea tres archivos HTML con diferente contenido y guárdalos con tres nombres de archivo distintos, por ejemplo webpage1.html, webpage2.html y webpage3.html. Establece links entre cada una de las páginas webs para que se pueda pasar de una a otra, por ejemplo desde webpage1.html hemos de poder pasar con un link a webpage2.html y webpage3.html, etc.. A continuación sube los tres documentos HTML al servidor y comprueba que puedan visualizarse y navegar mediante los links entre una página y otra.

webpage1

Código: [Seleccionar]

<!DOCTYPE html>
<html>
        <head>
		        <meta charset="utf-8" />
				<title>Ejercicio CU00730B</title>
		</head>
		<body>
		        <div id="page" style="width:980px; text-align: center; margin: auto; border: 2px solid red;">
				<div id="header">
				  <a href="https://es.wikipedia.org/wiki/Wiz_Khalifa" target="_blank"> <img src="http://i44.photobucket.com/albums/f30/Jack_f1/wiz-khalifa-para-portada-29427_zpsxnb97svy.jpg" alt="Wiz_Khalifa" /></a>
				  <h1>Wiz Khalifa</h1>
				  <img src="http://i44.photobucket.com/albums/f30/Jack_f1/wiz-khalifa-para-portada-29429_zpsxu4wbxkz.jpg" alt="Wiz_Khalifa" />
				</div>
				<!--fin cabecera-->
				
				<!--contenedor-->
				<div id="wrapper">
				<!--menu-->
				<div id="menu">
				<div>Menú</div>
				<hr style="height:2px; color:red; background-color:red;" />
				<ul>
				 <li><a href="http://yagamijack.esy.es/index.html">Inicio</a></li>
				 <li><a href="http://yagamijack.esy.es/webpage2.html">Discografía</a></li>
				 <li><a href="http://yagamijack.esy.es/webpage3.html">Videos</a></li>
				</ul>
				<hr style="height:2px; color:red; background-color:red;" />
				</div>
				<!--fin menu-->
				
				<!--cuerpo-->
				<div id="cuerpo">
				<p><b>Cameron Jibril Thomaz</b> (Minot, Dakota del Norte; 8 de septiembre de 1987), más conocido como Wiz Khalifa, es un rapero, 
				cantante, compositor y actor estadounidense. Wiz Khalifa es hijo de un padre militar. Sus padres se divorciaron cuando tenía
				unos tres años. Vivió en Alemania, Inglaterra y Japón antes de irse a vivir a Pittsburgh donde llevó a cabo sus estudios en el 
				<a href="https://es.wikipedia.org/w/index.php?title=Taylor_Allderdice_High_School&action=edit&redlink=1"></a>
				Realizó su debut con el álbum Show and Prove, en 2006, lo que le llevó a firmar por la Warner 
				Bros. Records en 2007. Wiz Khalifa lanzó su segundo álbum Deal or No Deal, en noviembre de 2009. En 2011 se publicó su 
				tercer álbum, Rolling Papers, que cuenta con los sencillos: "Black and Yellow", "Roll Up", "On My Level" y "No Sleep". Su cuarto 
				disco, O.N.I.F.C., salió el 4 de octubre de 2012. Y su último álbum, Blacc Hollywood, salió el 18 de agosto de 2014, cuenta con 
				canciones como "We dem boyz", "Promises" y "So high".</p>
				<h2>Carrera artística</h2>
				<p><b>2009-10: Deal or No Deal y firma con Atlantic Records</b></p>
				<p>Continuando su asociación con Rostrum Records, Khalifa lanzó el single "Teach U to Fly", y el mixtape How Fly, una colaboración 
				con el rapero de Nueva Orleans Curren$y, el 9 de agosto de 2009. Khalifa introdujo un estilo más melódico en la mixtape, 
				alternando entre cantar y rapear. Abrió para Wu-Tang Clan miembro de U-God en el CMJ Music Marathon 2009 en la ciudad de 
				Nueva York. Khalifa lanzó el mixtape Burn After Rolling el 2 de noviembre de 2009, donde rapea sobre ritmos familiares de otros 
				artistas, entre ellos las canciones "If I Were a Boy" y "Diva" de Beyoncé, "Walking on a Dream" de Empire of the Sun ", Luchini 
				AKA This Is It" de Camp Lo, y "Best I Ever Had" de Drake. Khalifa lanzó su segundo álbum, Deal or No Deal, el 24 de noviembre 
				de 2009.</p>
				
				<p>Khalifa aparece en la portada de la revista XXL, ese mismo mes, para la lista anual de la revista de los 10 estudiante de primer 
				año, que incluyó Donnis, J. Cole, Pill, Freddie Gibbs y Fashawn. Wiz Khalifa fue nombrado en 2010 por "The Source", junto con 
				Rick Ross, "El Hombre del Año". Realizó una gira con el rapero Yelawolf en una gira de 20 fechas, el Deal or No Deal tour. Khalifa 
				lanzó libre el mixtape Kush and Orange Juice para su descarga el 14 de junio de 2010. Debido a la base de fans devotos de 
				Khalifa, el mixtape se convirtió en el N º 1 en trending topic en Twitter con el hashtag #kushandorangejuice.
				</p>
				
				<p>Citando a expertos de la industria musical, la revista New York escribió que Khalifa firmó con Atlantic Records en abril de 2010. 
				Dijo que AllHipHop en junio de 2010 que estaba trabajando en un nuevo álbum, pero estaba evaluando su opciones y todavía no 
				había decidido en una etiqueta para distribuirlo. Khalifa confirmó a MTV el 30 de julio que estaba firmando un acuerdo de Atlantic 
				Records.</p>
				
				<p>Khalifa apareció para el 2010 en un video remix de Rick Ross "Super High", junto a Curren$y. Se hizo una aparición en el mixtape 
				Head Phones, and Thirsty Women de St. Louis rapero MC, y apareció en la pista "The Breeze (Cool)" en agosto de 2010 del 
				mixtape del rapero Wale About Nothing. Khalifa fue nombrado Hottest Breakthrough MC de MTV en 2010, ganando con casi 
				70.000 votos, superando a los finalistas Nicki Minaj, J. Cole, Travis Porter y Diggy Simmons.
				</p>
				
				<p>Khalifa apareció en el festival Soundset del 2010 en mayo, en Minneapolis, Minnesota, junto a Method Man & Redman, Del the 
				Funky Homosapien y Hieroglyphics, Atmosphere, Murs, Cage y otros. También actuó en el festival Rock 2010. Junto con el hip 
				hop veterano de Wu-Tang clan, Snoop Dogg, Lauryn Hill, a Tribe Called Quest, Rakim, KRS-One, Jedi Mind Tricks y Slick Rick. Khalifa declinó una invitación a recorrer con el 
				rapero Drake y lanzó su propia "Waken Baken" tour, una gira nacional de 50 ciudades con el rapero Yelawolf. Su DJ oficial de la gira fue DJ Bonics.</p>
				
				<p>La gira, programada para durar entre septiembre y noviembre de 2010, tiene, a partir de octubre, se agotaron todos los escenarios. En noviembre de 2010, durante su "Waken 
				Baken" tour, de la Universidad de Carolina del Este, Wiz Khalifa fue detenido por posesión y tráfico de la marihuana. Luego fue puesto en libertad a la mañana siguiente después 
				de una fianza de $ 300K, y reanudó su gira. Él recitó sus versos de la canción "The Check Point", de su mixtape con Curren$y, How Fly.</p>
				</div>
				<!--fin cuerpo-->
				</div>
				<!--fin contenedor-->
				<div id="footer">
				<a href="http://aprenderaprogramar.com/" target="_blank"> <img src="http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png" alt="Pie" /></a>
				<p>Copyright 2006-2034 aprenderaprogramar.com</p>
				
				</div>
				</div>
		</body>
</html>

webpage2

Código: [Seleccionar]

<!DOCTYPE html>
<html>
       <head>
	           <meta charset="urf-8" />
			   <title>Ejercicio CU00730B</title>
	   </head>
	   <body>
	           <div id="page" style="width: 980px; text-align: center; margin: auto; border: 2px solid red;">
			   <div id="header">
			   <img src="http://i44.photobucket.com/albums/f30/Jack_f1/wiz-khalifa2_zpsk9mqlg3r.jpg" alt="Wiz Khalifa" />
			   <h1>Wiz Khalifa – Discografia [2006, 2014 y 2015]</h1>
			   </div>
			   <!--fin cabecera-->
			   
			   <!--comtenedor-->
			   <div id="wrapper">
			   
			   <!--menu-->
			   <div id="menu">
			      <div>Menú</div>
			   <hr style="height:2px; color:red; background-color:red;" />
			   <ul style="list-style-type:disc">
			     <li><a href="http://yagamijack.esy.es/index.html">Inicio</a></li>
				 <li><a href="http://yagamijack.esy.es/webpage3.html">Videos</a></li>
			   </ul>
			   <hr style="height:2px; color:red; background-color:red;" />
			   </div>
			   <!--fin menu-->
			   
			   <!--cuerpo-->
			   <div id="cuerpo">
			   <h2>Discografia</h2>
			   <p style="text-decoration:underline;">Show And Prove (2006)</p>
			   <img src="http://i44.photobucket.com/albums/f30/Jack_f1/officialtag-10_zpsqyvrl0rv.jpg" alt="Discografia" width="400" />
			   <p>Wiz Khalifa</p>
			   <p>Álbum: Show And Prove</p>
			   <p>Año: 2006</p>
			   <h2><b>TrackList</b></h2>
			   <ol>
			       <li>Intro</li>
				   <li>Pittsburgh Sound</li>
				   <li>Bout Mine</li>
				   <li>I Choose You</li>
				   <li>Damn Thing</li>
				   <li>Keep the Conversation (Feat. Boaz)</li>
				   <li>Stay in Your Lane</li>
				   <li>Stand Up (Feat. Kev Da Hustla)</li>
				   <li>Too Late</li>
				   <li>I’m Gonna Ride</li>
				   <li>Gotta be a Star (remix) (Feat. Juliano and S. Money)</li>
				   <li>Let em know</li>
				   <li>Sometimes (Feat. Kelly Porter)</li>
				   <li>Locked and Loaded (Feat. Kev Da Hustla)</li>
				   <li>Burn Sumthin’</li>
				   <li>Crazy Since the 80s</li>
				   <li>History in the Making</li>
			   </ol>
			   <hr style="color: red; background-color:red; width: 50%;" />
			   <p style="text-decoration:underline;">Blacc Hollywood (Deluxe Edition) (2014)</p>
			   <img src="http://i44.photobucket.com/albums/f30/Jack_f1/wiz-khalifa-2015-hot-97-summer-jam-01_zpsu0rbce4b.jpg" alt="Discografia" width="300" />
			   <p>Wiz Khalifa</p>
			   <p>Blacc Hollywood (Deluxe Edition)</p>
			   <p>Año: 2014</p>
			   <h2>TrackList</h2>
			   <ol>
			        <li>Hope (Feat. Ty Dolla $ign)</li>
					<li>We Dem Boyz</li>
					<li>Promises</li>
					<li>KK (Feat. Project Pat & Juicy J)</li>
					<li>House In The Hills (Feat. Curren$y)</li>
					<li>Ass Drop</li>
					<li>Raw</li>
					<li>Stayin Out All Night</li>
					<li>The Sleaze</li>
					<li>So High (Feat. Ghost Loft)</li>
					<li>Still Down (Feat. Chevy Woods & Ty Dolla $ign)</li>
					<li>No Gain</li>
					<li>True Colors (Feat. Nicki Minaj)</li>
					<li>We Dem Boyz (Feat. Rick Ross, ScHoolboy Q & Nas) [Remix] 15. You & Your Friends (Feat. Snoop Dogg & Ty Dolla $ign)</li>
					<li>On Me (Feat. Jeezy)</li>
					<li>Word On The Town (Feat. Juicy J & Pimp C)</li>
					<li>Incense</li>
			   </ol>
			   <hr style="color:red; background-color:red; width:50%;" />
			   <p style="text-decoration:underline;">Wiz Khalifa & Juicy J - 2 cuadrilla de Taylor (2015)</p>
			   <img src="http://flowhot.me/wp-content/uploads/2015/04/TaylorGang2-300x300.jpg" alt="Discografia" />
			   <h3>TrackList</h3>
			   <ol>
			        <li>Decision</li>
					<li>Whole Thang</li>
					<li>Refresh (feat. Ty Dolla $ign)</li>
					<li>Stoners Night 3</li>
					<li>Smoke Chambers</li>
					<li>Already (feat. Rae Sremund)</li>
					<li>Denna B**ch (feat. Project Pat)</li>
					<li>Deep Down South (feat. Project Pat)</li>
					<li>Don’t</li>
					<li>Beautiful People</li>
			   </ol>
			   </div>
			   <!--fin cuerpo-->
			   </div>
			   <!--fin comtenedor-->
			   <div id="footer">
			   <a href="http://aprenderaprogramar.com/"> <img src="http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png" alt="Pie" /></a>
			   <p>Copyright 2006-2034 aprenderaprogramar.com</p>
			   </div>
			   </div>
	   </body>
</html>

webpage3

Código: [Seleccionar]

<!DOCTYPE html>
<html>
        <head>
		        <meta charset="utf-8" />
				<title>Ejercicio CU00730B</title>
		</head>
		<body>
		       <div id="page" style="width: 980px; text-align:center; margin: auto; border: 2px solid red;">
			   <div id="header">
			   <img src="http://i44.photobucket.com/albums/f30/Jack_f1/wiz_khalifa_pittsburgh_zpss6dq3rea.jpg" alt="cabecera" />
			   <h1>Wiz Khalifa - Videos</h1>
			   </div>
			   <div id="wrapper">
			   <div id="menu">
			   <div>Menú</div>
			   <hr style="height:2px; color:red; background-color:red;" />
			   <ul>
			       <li><a href="http://yagamijack.esy.es/index.html">Inicio</a></li>
			       <li><a href="href="http://yagamijack.esy.es/webpage2.html">Discografía</a></li>
			   </ul>
			   <hr style="height:2px; color:red; background-color:red;" />
			   </div>
			   <div id="cuerpo">
			   <h2>Videos</h2>
			   <p style="text-decoration:underline;">Lista de videos 2016</p>
			   <img src="http://i44.photobucket.com/albums/f30/Jack_f1/wiz_zpsltzivz0e.jpg" alt="Videos" width="300" />
			   <h2>VList</h2>
			   <ol>
			        <li><a href="https://www.youtube.com/watch?v=Al-UNabxaz8" target="_blank">Wiz Khalifa - DayToday: Gang Gang Ep.2 Always Litty</a></li>
					<li><a href="https://www.youtube.com/watch?v=WQNa0CbFh7Q" target="_blank">Wiz Khalifa - DayToday: Gang Gang Ep.1 Bacc At It</a></li>
					<li><a href="https://www.youtube.com/watch?v=fVsTXNRAFTk" target="_blank">Taylor Gang - Sleep At Night [Official Video]</a></li>
					<li><a href="https://www.youtube.com/watch?v=QIFnS4X90x4" target="_blank">Wiz Khalifa - Pull Up ft. Lil Uzi Vert [Official Video]</a></li>
					<li><a href="https://www.youtube.com/watch?v=WrklZD9H5Vg" target="_blank">Wiz Khalifa - Celebrate ft. Rico Love [Official Video]</a></li>
					<li><a href="https://www.youtube.com/watch?v=HqTNDJgvaj0" target="_blank">Wiz Khalifa - So Much [Official Video]</a></li>
					<li><a href="https://www.youtube.com/watch?v=rTAZlHGOVo8" target="_blank">Wiz Khalifa - Bake Sale ft. Travis Scott [Official Video]</a></li>
			   </ol>
			   
			   </div>
			   </div>
			   <div id="footer">
			   <a href="http://aprenderaprogramar.com/" target="_blank"> <img src="http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png" alt="Pie" /></a>
				<p>Copyright 2006-2034 aprenderaprogramar.com</p>
			   </div>
			   </div>
		</body>
</html>

Y este es link de la página:http://yagamijack.esy.es/

Jack_F · « **Respuesta #1 en:** 20 de Diciembre 2016, 14:45 »

Bueno corrijo algunos errores.

Donde puse<div id="cuerpo" debí poner <div id="contenido"

En los tres tuve ese error. Y tambien en webpage2 puse mal el meta charset="urt-8" /> y debia ser meta charset="utf-8">

Chompy129 · « **Respuesta #2 en:** 22 de Diciembre 2016, 04:56 »

Esta bien que te auto corrijas para así ir mejorando cada vez mas. Por cierto en la 3ra página tienes un error en el menú:

Código: [Seleccionar]

<ul>
<li><a href="http://yagamijack.esy.es/index.html">Inicio</a></li>

<!-- Aquí -->
<li><a href="href="http://yagamijack.esy.es/webpage2.html">Discografía</a></li>
</ul>

Colocaste dos veces href=" y no permite acceder a la 2da pagina.

El ejercicio en si es correcto, cumple su objetivo.
Un saludo!

Jack_F · « **Respuesta #3 en:** 22 de Diciembre 2016, 05:42 »

Gracia Chompy129, por revisar el ejercicio.
Te mando un saludo tambien.

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

Noticias: