Autor Tema: HTML ejemplo portal básico maquetado con div e imágenes Ejercicio CU00727B (Leído 3917 veces)

Dan_SB · « **en:** 23 de Mayo 2015, 03:25 »

Buenas noches!

Vengo a resolver el ejercicio °27 del curso "html desde 0", cuyo enunciado dice asi:
Define la estructura de un portal web que conste de:

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

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

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

Hice una pagina dedicada a los mazdas XD

Código: [Seleccionar]

<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"/><title>Mi pagina web</title></head>
<body style="background-color: black; color: black;">
<div style="background-color: red; border: 2px solid black; height: 150px;" id="page">
<div style="position:absolute; left: 10px;"><image src="http://upload.wikimedia.org/wikipedia/commons/b/b8/Mazda_RX-8_on_freeway.jpg" width="150" height="150"/></div>
<div style="position:absolute; left: 160px;"><image src="http://www.autoguide.com/gallery/d/619041-3/2014-Mazda-6-sedan-08.JPG" width="150" height="150"/></div>
<div style="position:absolute; left: 310px;"><image src="http://www.mazda.co.uk/assets/master/global/mazda-stories/2/the-challengers.jpg" width="150" height="150"/></div>
<a href="C:\Users\Daniels\Documents\Curso HTML desde cero\LosMazdas\Menu_Pag.html"><div style="position:absolute; left: 550px;"><image src="http://duratray.net.au/images/products/Gallery/mazda_logo.png" width="150" height="150"/></div></a>
<a href="C:\Users\Daniels\Documents\Curso HTML desde cero\LosMazdas\Menu_Pag.html"><div style="position:absolute; left: 1220px;"><image src="http://duratray.net.au/images/products/Gallery/mazda_logo.png" width="150" height="150"/></div></a>
<div style="position:absolute; left: 1460px;"><image src="http://o.aolcdn.com/hss/storage/adam/c90e1abcafcbd688001595c7bd1a1d96/001-2014-Mazda-Mazda2-Hazumi-front-autofilou.jpg" width="150" height="150"/></div>
<div style="position:absolute; left: 1610px;"><image src="http://www.todoautos.com.pe/portal/images/stories/mazda/mazdaautosportada.jpg" width="150" height="150"/></div>
<div style="position:absolute; left: 1760px;"><image src="https://d2zc23renulrga.cloudfront.net/assets/8105/ue03yeu9blw01gc7yrka/520420.1-lg.jpg" width="150" height="150"/></div>
<div style="background-color: black; border: 1px solid yellow; height: 50px; margin-top: 50px;"><h1 style="color: blue; text-align: center; margin-top: 10px; font-family: Blagovest;">Los Mazdas mas hermosos</h1></div>
</div>
<div id="contenedor">
<br><br><br>
<div id="menu" style="position:absolute; left: 10px; border: 2px solid yellow; width: 30; height: 300; background-color:Goldenrod">
<ol style="margin-right: 30px;">
   <a href="******************\LosMazdas\Mazda CX7.html"><li style="font-family: Impact; font-size: 16px;">Mazda CX7</li></a>
   <br>
   <a href="******************\LosMazdas\MazdaSpeed 6.html"><li style="font-family: Impact; font-size: 16px;">Mazda speed 6 Grand Touring 2006</li></a>
   <br>
   <a href="******************\LosMazdas\Mazda x8.html"><li style="font-family: Impact; font-size: 16px;">Mazda X8</li></a>
   <br>
   <a href="******************\LosMazdas\MazdaShinari.html"><li style="font-family: Impact; font-size: 16px;">Mazda Shinari</li></a>
   <br>
   <a href="******************\LosMazdas\MazdaTakeri.html"><li style="font-family: Impact; font-size: 16px;">Mazda Takeri</li></a>
</ol>
</div>

<div id="body" style="position:absolute; margin-right:400px; margin-left:400px; border: 2px solid red; background-color: yellow; width:1000; height:1000;">
<h2 style="font-family: Verdana; color: red; text-align:center;">¡Para los amantes de los autos Mazda!</h2>
<p style="font-size: 18px; margin-left: 20px; margin-right: 20px;">En esta pagina, presentare algunos modelos de autos mazda que mas me agradan. Cabe destacar que los autos mazda, segun mi punto de vista, se caracterizan por tener unos buenos diseños y la mayoria
de los mazdas poseen un lujoso panel electrico con tecnologia "touch".<br>
Tambien muchos de sus carros, estan implementando hoy en dia la tecnologia "iStop", en el que consiste apagar el carro un momento, al frenar completamente, y al accelerar, nuevamente el carro enciende. De esta forma el auto puede ahorrar gasolina.<br>
El auto mazda sigue evolucionando hoy en dia... del menú que se encuentra a tu izquierda, elige un modelo de auto mazda para saber información sobre el auto.</p>
<br></br>
<div style="position: absolute; left: 100px; margin-top: 50px;"><img src="http://noticias.coches.com/wp-content/uploads/2013/08/Mazda-3-SportSedan-5.jpg" width="350" height="250"/></div>
<div style="position: absolute; left: 600px; margin-top: 50px;"><img src="http://imganuncios.mitula.net/2015_mazda_mazda6_i_grand_touring_jet_black_mica_in_crow_oregon_100447959463258443.jpg" width="350" height="250"/></div>
</div>

<div id="footer">
<div style="position: absolute; bottom: 20px; left: 600px;"><img src="http://www.promusictutor.com/blog/wp-content/uploads/2013/08/copyright.jpg" width="100" height="100"/></div>
<div style="position: absolute; bottom: 20px; left: 700px;"><p style="font-size: 20px; font-family: Impact; color: red;">Copyright 2015 <a href="C:\Users\Daniels\Documents\Curso HTML desde cero\LosMazdas\Menu_Pag.html">Los Mazdas mas hermosos</a></p></div>
</div>
</div>
</body>
</html>

La pagina se ve asi:

[img width=550]http://i.imgur.com/B2FRtQE.png[/img]

Espero sus comentarios y correcciones!! saludos!!

Alex Rodríguez · « **Respuesta #1 en:** 24 de Mayo 2015, 17:39 »

Hola Dan, en mi navegador y pantalla la web se ve mal, en concreto el copyright aparece encima de las fotos de los coches. El motivo: has introducido en algunos elementos estilos de este tipo: style="position: absolute; left: 100px; margin-top: 50px;" en varios lugares...

Quizás en tu pantalla se vea bien, pero en otras no. Cuando crees un diseño hay que intentar que se vea bien en la mayoría de pantallas. Por eso para corregir el ejercicio deberías eliminar todo lo que sean estilos de este tipo. Con los contenidos del curso HTML quizás no puedas hacer la maquetación que a tí te gustaría. Para hacer cosas más atractivas las explicaciones están en el curso de CSS.

Saludos,

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

Noticias: