Ayuda para retomar programación

Hola a todos,

Hace un tiempo empecé a programar y tuve un accidente y he estado sin tocar nada de programar bastante tiempo, tanto que no me acuerdo de casi nada

La cuestión que en lo que tenía programado, tenía el siguiente index.php

Sé que está fatal, la cuestión es que he intentado tocar el css asociado y lo he destrozado.

Os lo adjunto debajo. ¿Como podría simplificar el index y que la parte de registro de usuario me quedara minimamente user friendly? He tocado el css y lo he dejado peor, voy a empezar de cero pero por si alguien en un vistazo es capaz de darme algunos consejos y pautas.

Muchas Gracias.

Código

 
<!DOCTYPE html>
<html lang="es">
 
 <br> 
 
 
 
 
<TABLE WIDTH="100%" HEIGHT="100%">
 
 
<TR>
 
 
<TD VALIGN="MIDDLE" ALIGN="CENTER">
 
 
 
 
 
<FONT SIZE=6>  Research <FONT>
<br>
 
<FONT SIZE=2> Quantitative Solutions <FONT>
 
 
 
</TD>
 
 
</TR>
 
 </TABLE>
 
<head>
 
 
<title> Company
</title>
 
<meta charset="utf-8"/>
<meta name="description" content="Análisis  "/>
<meta name="viewport" content="width=devide-width,initial-scale=1"/>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<link rel="stylesheet"  href="css/estilos.css" />
 
 
<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]>-->
 
<link rel="stylesheet" href="flexslider.css"  media="screen" />
	<script src="jquery.min.js"></script>
	<script src="jquery.flexslider-min.js"></script>
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
 
	<!-- Includes for this demo -->
	<link rel="stylesheet" href="css/flexslider.css" media="screen" />
 
	<!-- Hook up the FlexSlider -->
	<script>
		$(window).load(function() {
			$('.flexslider').flexslider();
		});
	</script>
 
 
 
    <script type="text/javascript">
    <!--
        $().ready(function() {
            $("#frmlogin").validate();
            $("#usuario").focus();
        });
    // -->
    </script>
</head>	
 
<body>
 
 
<header>
 
 
 
 
	<h1>
 
		<a href="index.php" > 
		<span class="f"></span>   	<img  alt="bla bla" src="img/fondo-interno.jpg" width="50" height="50" />
	</a>
 
 
		</h1>
 
 
 
 
<nav> 
 
<ul>
<li><a>Bienvenido, accede a tu cuenta</a></li>
 
 
 
</ul>
		</nav>
 
 
        <nav>
 
        Prueba
        </nav>
 
 
 
 
 
 
 
 
	</header>
 
 
 
 
 
 
	<section id="contenido">
	<section id="Mercados">
 
 
 
 
    <article id="servicio3">
	<h3>Iniciar sesi&oacute;n  &nbsp;    </h3>
		<p>
 
		<br /><br />
<form id="frmlogin" name="frmlogin"  method="POST" action="validarUsuario.php">
<table align="center" width="362" CELLPADDING="5">
 
<tr>
    <td width="61">Usuario:</td>
    <td width="142">
        <input type="text" name="usuario" id="usuario" class="required" maxlength="50">
    </td>
</tr>
 
<tr>
    <td>Password:</td>
    <td>
        <input type="password" name="password" id="password" class="required"  maxlength="50">
    </td>
</tr>
 
 
<tr>
    <td colspan="2" align="right">
        <input type="submit" name="enviar" value="Enviar" >
    </td>
 
</tr>
 
 
</table>
</form>
 
      </article>
	  </section>
		</section>
 
 
 
 
<footer> Working progress</footer>
</body>
</html>

Código css

Código

 
/* Reglas para trabjar  */
 
* {
border:0;
 margin: 0;
	padding: 0;
	}
 
 
article,figcaption,figure,footer,header,hgroup,nav,section{
display: block;
 
}
 
body  { 
background: #212121  url(../img/fondo.jpg);
color:#FFF;
 
 
 
}
 
 
 
a{
 
color: #CEF6F5;
 
font-weight:bold;
text-decoration:none;
 
}
 
a:hover{
 
color: #CEF6F5;
 
}
 
 
 
figcaption {
 
	font-size: 0.85em;
	padding: 0.25em;
	text-align: center;
	min-height: 1500px;
}
 
img, video{
	max-width: 100%;
 
}
 
 
 
header, section#contenido,section#contenido2, section#contenido111, footer {
 
	background: #FFF url(../img/fondo-interno.jpg);
	margin: 0 auto;
	max-width: 100%;
	text-align: center;
 
	}
 
 
header h1, h2, h3, h4,h5,h6, nav {
 
	display: inline-block;
	max-width: 100%;
	vertical-align: middle;
	}
 
 
 
 
 
h3,h4, h5{
background: #E2E7F1; 
border-radius: 1em;
margin-bottom: .5em;
padding-left: .5em;
box-shadow: .25em .25em .25em rgba(255, 153, 0,.5);
	color:#000000;
	}
 
 
 
h6{
background: #E2E7F1; 
border-radius: 1em;
margin-bottom: .5em;
padding-left: .5em;
box-shadow: .25em .25em .25em rgba(255, 153, 0,.5);
	color:#000000;
	}	
 
 
	ol{
	padding: 0 2em;
	}
 
		ol li{
	padding: 1em 0;
	}
 
nav ul{
 
list-style: 	none;
 
}
 
 
		nav li{
 
		display: inline-block;
		padding=0.1em;
		vertical-align: top;
 
 
	}
 
 
 
	nav a{
 
	background: #FFF;
	border: 0.1em solid #57ABB8;
	border-radius: 0.25em;
	color: #F60;
	display: block;
 
	font-size: 1.4em;
	padding: 0.2em;
	-ms-transition: all 0.5s ease-in;
	-moz-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	-webkit-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
 
	}
 
 
		nav a:hover{
 
	background: #212121;
	border: 0.1em dashed #F60;
	border-radius: 0 0.5em 0 0.5em;
	color: #FFF;
	-ms-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
 
 
 
	}
 
 
	section#principal, aside{
 
	background: #1E6381;
 
	border-radius: 0.5em;
 
	display: inline-block;
 
	margin: 0 auto;
	max-width: 100%;
	padding: 0.25em;
	vertical-align: top;
	width: 65%;
 
	}
 
 
 
	aside{
	width: 30%;
	}
 
		aside img{
	border-radius: 0.5em;
	}
 
 
 
 
	section#Mercados{
 
	margin: 0 auto;
	max-width:100%;
 
	}
 
 
 
 
	article#servicio1, article#servicio3{
	background: #F6FCFC;
 margin-top: 4px; margin-right; 8px; margin-bottom: 8px; margin-left: 8px
	text-align: justify;
	border-radius: 0.5em;
	max-width:400 px;
	min-width: 400 px;
	min-height: 400 px;
		max-height: 400px;
 
	padding: 0.995em;
	vertical-align: justify;	
	 color: #C00;
 
 
 
	}
 
	article#servicio99{
	background: #F6FCFC;
 margin-top: 4px; margin-right; 8px; margin-bottom: 8px; margin-left: 8px
	text-align: justify;
	border-radius: 0.5em;
 
 
	padding: 0.995em;
	vertical-align: center;
	width: 98%;
 
	 color: #C00;
 
 
 
	}
 
 
	article#servicio1,article#servicio3{
		text-align: justify;
	background: #F6FCFC;
	border: 1px solid #d0d0d0;
	display:inline-block;
	border-radius: 0.5em;
	vertical-align: center;
	width: 31%;
	heigth: 21%;
	max-height: 10px;
	max-width: 200px;
	}
 
 
 
 
 
 
 
	footer{
 
	color: #000;
	font-size: 0.85em;
	padding: 0.75em 0;
 
	}
 
 
	.fade{
	opacity: 1;
	filter :alpha(opacity=10);
	-ms-transition: all 0.5s ease-in;
	-moz-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	-webkit-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
	}
 
	.fade:hover{
		opacity: 0.7;
	filter :alpha(opacity=7);
		-ms-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
 
 
	transition: all 0.5s ease-out;
 
	}
 
	@media(min-width:1081px){
	header h1{
	text-align: left;
	width:35%
	}
 
	nav{
	text-align: center;
	width:100%
 
	}
 
	}
 
	@media(max-width:1081px){
	nav li{
	font-size: 1.3em;
 
	}
 
	article#galeria-inicio{
 
	width:80%
 
	}
 
	article#servicio1,article#servicio2,article#servicio3{
 
	width:30%
	vertical-align: top
 
 
	}
 
	aside{
	width: 20%;
 
	}
 
 
	}
 
	@media(max-width:800px){
	nav li{
	font-size: 0.95em;
 
	}
 
	article#galeria-inicio{
 
	width:88%;
 
	}
 
		article#servicio1,article#servicio2,article#servicio3{
 
	width:45%
 
	}
 
	}
 
 
 
 
	@media(max-width:600px){
 
 
	nav li{
	display: inline-block;
	margin: 0px;
	width:98%;	
 
 
	}
 
 
	article#servicio1,article#servicio2,article#servicio3{
	width:50%
	}
 
 
	}
 
	section#principal{
	margin-bottom: 0.2em;
	}
 
	section#principal, aside{
	display: block;
 
	width:95%
	}
 
 
	div.septrue {
	border-left:1px solid #363636;
}
 
	 div.septrue {
	width:1px;
	height:17px;
	margin-top:7px;
	float:left;
}