Ver Mensaje Individual
  #8 (permalink)  
Antiguo 21/06/2013, 04:45
Avatar de HackID1
HackID1
 
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 492
Antigüedad: 12 años
Puntos: 17
Respuesta: Organización del código en una pagina web

Cita:
Iniciado por iEnrique Ver Mensaje
Con las etiquetas HTML5 lo que haces es darles una idea a los navegadores que los soportan de qué es cada zona de la web, pero debes meter cada una de las partes en unos <div></div> para que los navegadores que no lo tengan aún puedan reconocer que es un contenedor, aunque no sepan muy bien para que sirve pero ellos lo ponen xdd
Hola, Ok entonces puedo hacer uso de las etiquetas HTML5 pero metiendolas en div para que las reconozcan los navegadores que NO soporten HTML5 no?

Y un ejemplo podría ser así: ?

Código HTML:
<!DOCTYPE html >
<html>

<head>
	<title> 
		Página hotel XML
	</title>
	<script>	
	</script>
	<style>
		
		header 
		{
			border: solid 2px red;
			border-radius: 5px;
			text-align: center;
			color: blue;
			background-color: #2ECCFA;
		}
	
		#capa_central
		{
			position: absolute;
			top: 20%;
			bottom: 6%;
			width: 70%;
			border: solid;
			border-color: green;
			border-radius: 6px;
			left: 1%;
			right: 1%;
			background-color: silver;
		}
	
		nav
		{
			position: absolute;
			top: 14%;
			width: 98%;
			text-align: center;
			border: solid;
			border-color: red;
			border-radius: 5px;
			background-color: #FA5882;
		}
		
		section
		{
			position: absolute;
			top: 2%;
			bottom: 5%;
			left: 2%;
			border: solid;
			border-color: #FACC2E;
			border-radius: 5px;
			color: black;
			text-align: center;
			background-color: #81F79F;
		}
		
		video
		{
			position: absolute;
			left: 70%;
			top: 2%;
		}
		
		canvas
		{
			position: absolute;
			left: 55%;
			top: 50%;
			border: solid;
			border-color: red;
		}
		
		#capa_derecha
		{
			position: absolute;
			left: 73%;
			top: 20%;
			bottom: 6%;
			width: 25%;
			border: solid;
			border-color: green;
			border-radius: 6px;
			right: 1%;
			background-color: silver;
		}
		
		aside
		{
			position: absolute;
			left: 2%;
			top: 2%;
			right: 2%;
			border: solid;
			border-radius: 5px;
			background-color: orange;
		}
		
		
		footer
		{
			position: absolute;
			border: solid 1px black;
			border-radius: 5px;
			text-align: left;
			color: black;
			top: 95%;
			bottom: 2%;
			width: 98%;
			background-color: silver;
		}
		
        @font-face
		{
            font-family:"Deliciosa";
            src:url('fonts/Delicious-Roman.otf');            
        }
		
		
	</style>
</head>

<body>
		
	<header> 
		<h1> Página </h1>
	</header>
	
	<nav>
			<table>
				<tr> 
					<td> Inicio. </td>
					<td> </td>
					<td> Reservas del Hotel </td>
					<td> Ayuda </td>
				</tr>
			
			</table>
	</nav>
	
	<footer>
		Creada por
	</footer>

	<div id="capa_central"> 
	
		<section> 	
			Seccion de articulos 
		</section>
		
	</div>

	<div id="capa_derecha" >
	
		<aside>
			Hoteles más visitados.
			<br/>
			Introduzca su correo.
			<br/>
			<form>
				
				<input type="email" name="email" placeholder="Introduce tu correo"/>
				<input type="submit" value="Probar">
			Introduzca su edad.
			<br/>
				<input type="number" name="edad" placeholder="Introduce tu edad"/>
			<br/>
			Elija un color
			<br/>
				<input type="color" name="color" />
			<br/>
			Introduzca fecha
			<br/>
				<input type="date" name="date" />
			<br/>
			Introduzca hora
			<br/>
				<input type="time" name="time" />
			</form>
			
		</aside>
	
	</div>
	
</body>

</html> 
Fijate que a HEADER, NAV y FOOTER no las meto en un DIV el resto si, esto valdría o hay que colocar esas etiquetas dentro de DIVs también. Gracias
Este es un ejemplo que hice hace unos meses en el instituto :) .
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1