Entrar

Estructura web

aldich · · Solicitar retirada
Bueno hace unos días que he empezado esta web, pero como acabo de empezar en esto del html y css, no estoy seguro si esta bien. Agradecería que le hechárais un vistazo para ver si esta bien, porque a partir de esta estructura voy a hacer toda la web y no me gustaría tener que modificar todo cuando la tenga acabada...

PD: He leído las normas de esta sección y ya se que no es exactamente donde tenía que poner el mensaje pero tampoco he encontrado un sitio mejor... Si no esta bien movedlo y mil disculpas [;)][:D]

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Inicio</title>









<link rel="stylesheet" href="hojaestilo.css" type="text/css" media="all"></head><body><br>
<div id="contenedor">
<div id="banner"><br></div>
<div id="separador" style="text-align: left;"><div id="menuh">

<ul><li><a id="primero" href="#menuh">Inicio</a></li><li><a href="#menuh">Antes de empezar</a></li><li><a href="lecciones.html">Lecciones</a></li><li><a href="#menuh">Herramientas</a></li><li><a href="#menuh">Foro</a></li><li><a href="#menuh">Otras Webs de interes</a></li></ul>
</div>
<br>

</div>
<div id="menu"> <br>
</div>



<div id="contenido"> hola hola hola hola hola hola hola hola hola hola
hola hola hola hola hola hola hola hola hola hola hola hola hola hola
hola hola hola hola hola hola hola hola hola hola hola hola hola hola
hola hola hola hola hola hola hola hola hola hola hola hola hola hola
hola hola hola hola hola hola hola hola hola hola hola hola hola hola
hola hola hola hola hola hola hola hola hola hola hola hola hola hola
hola hola hola hola hola hola hola hola hola hola hola hola hola hola
hola hola hola hola hola hola hola hola hola hola hola hola hola hola
hola hola hola hola hola hola hola hola hola hola hola hola hola hola
hola hola hola hola hola hola hola hola hola hola hola hola hola hola
hola hola hola hola hola hola hola hola hola hola hola hola hola hola
hola hola hola hola hola hola hola hola hola hola hola hola hola hola
hola hola hola hola hola hola hola hola hola hola hola hola hola hola
hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola<br>

hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola<br>

hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola<br>

hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola<br>

hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola<br>

hola hola hola hola hola hola hola hola hola hola hol<br>
</div>
<div id="pie"><br>Alejandro Díaz<br>
INS Ramon Casas i Carbó<br>
2011<br></div>
</div>
</body></html>



css:

body {
margin: auto;
background-color: #999999;
padding-bottom: 10px;
}
#contenedor {
margin: auto;
width: 900px;
background-color: #000099;
background-image: url(objetos/gradnegro.png);
padding-bottom: 5px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-box-shadow: 0px 0px 10px 4px black;
-moz-box-shadow: 0px 0px 10px 4px black;
box-shadow: 0px 0px 10px 4px black;

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#banner {
height: 140px;
}
#menu {
border-style: ridge;
border-color: black;
font-weight: bolder;
color: white;
padding-left: 10px;
min-height: 500px;
margin-left: 20px;
float: left;
margin-top: 20px;
background-color: #ff6600;
width: 150px;
padding-bottom: 5px;
padding-top: 5px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#menu a:hover {
color: #ff6600;
text-decoration: underline;
}
#contenido {
margin: 40px 33px 20px 215px;
padding: 20px 15px 20px 25px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
min-height: 475px;
background-color: #ecebff;

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#pie {
border: 2px solid black;
margin: 10px;
color: black;
height: 75px;
font-weight: bolder;
font-size: 0.8em;
text-align: center;
background-image: url(objetos/fondopie.png);
padding-bottom: 0px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#separador {
border-top-color: black;
text-align: center;
background-color: #ffcc00;
border-left-color: black;
height: 32px;
}
#menuh {
margin: auto;
font-weight: normal;
font-size: 80%;
font-variant: normal;
line-height: normal;
font-style: normal;
font-stretch: normal;
font-family: Arial;
font-size-adjust: none;
}
#menuh ul, li {
list-style-type: none;
}
#menuh ul {
margin: 0;
padding: 0;
}
#menuh li {
float: left;
}
#menuh a {
border: 1px solid #2f1700;
padding: 8px 35px 7px;
background-attachment: scroll;
background-position: left center;
color: black;
text-align: center;
background-image: url(objetos/fondonaranja.png);
background-repeat: repeat;
text-decoration: none;
display: block;
font-weight: bold;
font-size: 1em;
}
#menuh a#primero {
border-left: 1px solid #2f1700;
}
#menuh a:hover {
background-image: url(objetos/fondoplat.png);
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 50%;
color: #ff6600;
}
ocbarrio · · Solicitar retirada
Uff!! a ver: no veo que hayas cerrado los br (si abres con <br> tienes que cerrar con </br>)
El div separador tiene propiedades, es mejor que pongas esas propiedades en el css.
Lo veo un poco raro. Otra cosa es que tienes propiedades en el css que no te validará.

Poco mas puedo decir ahora mismo!

Un saludo!
aldich · · Solicitar retirada
Tienes razón, no me valida las css de sombras y redondeados. Se puede subir una web sin el css validado? Y sobre lo de los <br> creo que solo hace falta cerrarlos en xhtml.. pero nose, hablo desde la ignorancia jaja! Gracias por contestar :)
ocbarrio · · Solicitar retirada
buenas!

Claro que se puede subir, pero al no validar te quita puntos en el posiconamiento. Si no es algo importante para ti entonces no pasa nada.

No tengo ni idea de para que sirven los "br", si me lo puedes decir... Pero que yo sepa, todo lo que se abre hay que cerrarlo. Y tb hablo desde la ignorancia, jeje.

Haber si alguien puede confirmarnoslo.

Suerte!

P.D. Critica mi pagina, please.
icocelebes · · Solicitar retirada
Hola:
Si puedes subir la web sin validar, y para cerrar el <br> he encontrado esto con Google:

Differences Between HTML and XHTML
In HTML the <br> tag has no end tag.

In XHTML the <br> tag must be properly closed, like this: <br />.

Cuando subas la web mandanos el enlace y podremos criticarla mejor.
Animo.
P.D. <br> creo recordar que era para dejar una linea en blanco.
<BR>: Saltos de línea. Esta tag sirve para realizar un salto de linea, puede poner tantas como desee y realizará un salto de línea por cada una de ellas.
ocbarrio · · Solicitar retirada
Ya esta claro!

"br" es un salto de linea (linea en blanco). "hr" es una linea, y se puede especificar el tamaño con <hr width="80%">. No hay que cerrar en HTML pero si en XHTML.

Gracias a los 2, poco a poco voy conociendo mas cosas.

Un saludo!
aldich · · Solicitar retirada
Lo mismo digo! Gracias a los dos por contestar, cuando acabe la web la subo y me decís que tal. ocbarrio ahora le hecho un vistazo a tu web.

Un saludo!
Web-Freelance · · Solicitar retirada
Hola,

He revisado la estructura y bien, es una estructura básica de head/menu/sidebar-contenido/footer. Es muy típica si lo que buscas es innovar, pero si lo que buscas es comodidad, bien, lo sencillo es fácil.

Lo de los bordes y sombras es normal que no te lo valide, ya que son estilos propios del navegador, no del estándar, pero la puedes subir que funcionará, solo que no cumplirás con el estándar, pero no te van a multar por ello, jajaja.

Para meter texto de relleno yo utilizo (yo y millones de personas) esto http://es.lipsum.com/

Consejo: Empezar a utilizar la normativa de XHTML para iros acostumbrando, ya que no cuesta nada, tan solo es seguir una serie de normas para tener un código limpio y claro de leer. Por ejemplo, no cuesta nada poner <br /> en vez de <br>, con esto funcionará igual en el navegador pero también estarás acogiendote a la fase evolucionada de html (dejando a un lado html5) como es el XHTML, y así con todas las etiquetas sin cierre (meta, img, hr, br, etc). Las etiquetas sin cierre se cierran en la misma etiqueta.

Por ejemplo, html permite poner esto:

<p>Esto es un <u>párrafo</p></u>

¿Creeis que está bien esto que acabo de poner? empiezo el párrafo y lo cierro delante del cierre de </u>, pues para HTML está bien, pero estaréis conmigo en que es una chapuza. XHTML exige que sea así:

<p>Esto es un <u>párrafo</u></p>

Mucho mas bonito y comprensible no? de hecho ya lo hacéis así sin pensarlo a que si?

Bueno que me enrollo y os estoy metiendo una chapa que pa que.... [:p]

Saludos!
ocbarrio · · Solicitar retirada
Que bueno eres, web-freelance!!

Vaya que si me voy a pasar, en cuanto tenga un ratico. Me imagino que solo es crear un XTHML y pegar dentro todo el codigo, teniendo cuidado en no quitar el DOCTYPE, ¿no?
Aclarame algo: La unica diferencia entre HTML y XTHML es esa? No tiene nada mas? Parece muy simple, no?

Un saludo!
Web-Freelance · · Solicitar retirada
Bueno, aparte de para otras cosas que sirvan a XML (no es el caso), si, es básicamente eso, seguir una normativa algo mas estricta que el html, ya que el html es un despiporre, poder escribir en may y min, no cerrar etiquetas, minimizar atributos, etiquetas de estilo, mezclar etiquetas, no seguir una jerarquía en cuanto a contenido, etc, etc, etc, un despiporre vamos.

Luego ya queda en cada uno lo que prefiere, html es más fácil de definir, pero claro, cuando tengas una web con miles de lineas de código, vas y la entiendes, jajajajaja.

Si, hay que guardar la doctype de lo que vayas a escribir en el documento.

Saludos!
ocbarrio · · Solicitar retirada
Muchas gracias, web-freelance! La semana que viene me paso a XTHML (seguramente con las ansias este finde).
gcardenach · · Solicitar retirada
ocbarrio escribió:Muchas gracias, web-freelance! La semana que viene me paso a XTHML (seguramente con las ansias este finde).
Excelente tema
gcardenach · · Solicitar retirada
ocbarrio escribió:Muchas gracias, web-freelance! La semana que viene me paso a XTHML (seguramente con las ansias este finde).

Buen mensaje