ayuda con html sin css

arcanisgk · #1 (**permalink**) 05/02/2009, 13:12

tengo un html muy extenso y qme dijeron que se podia hacer una hoja de estilo sobre ella pero yo no se nada de css, queria saver si existe algun programa que con el codigo fuente de la pagina html extraiga un codigo css, o de ser posible algun tutorial completo sobre este trabajo.

aki les dejo parte del codigo, que es repititivo para que le echen un vistaso....

Código HTML:

<form name="form1" action="procesa.php" method="POST"> 
         <div> 
           <p style="margin-top: 0; margin-bottom: 0">Usted tiene un total de 175 puntos para escoger opciones de este 
			menú, recuerde ahorrar para tener mas puntos adelante; este menú es 
			especial ya que en ves de invertir sus puntos obtendrá lo que se 
			marca en rojo <b>valor:</b> <font color="#FF0000">-20 </font>asta 
			llegar a 75 puntos</p>
			<div style="position: absolute; width: 122px; height: 22px; z-index: 1; left: 218px; top: 67px" id="capa2" align="center">
				Costo </div>
			<div style="position: absolute; width: 91px; height: 22px; z-index: 1; left: 368px; top: 67px" id="capa3">
				Descripción</div>
			<p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
			<p style="margin-top: 0; margin-bottom: 0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p>
			
			<div style="position: absolute; width: 125px; height: 22px; z-index: 1; left: 21px; top: 67px" id="capa1">
				Nombre</div>
			
			<table cellpadding="0" height="677" width="934" bordercolordark="#000000" style="border-collapse: collapse" border="2">
	<tr>
		<td width="206" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<input type="checkbox" value="-20" name="Check1" onclick=" Suma(this.checked,this.value)" style="font-weight: 700"  ><b>1: 
		Horrenda</b></td>
		<td width="123" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<b>&nbsp;valor: <font color="#FF0000">-20</font></b></td>
		<td height="30" width="605" bordercolorlight="#000000" bordercolor="#000000">&nbsp;Sufres de malformaciones 
			en el cuerpo y rostro, lo cual te ase repugnante y es difícil para 
			ti pasar desapercibido reaccionan mal cuando te ven.</td>
	</tr>
	<tr>
		<td width="206" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<input type="checkbox" value="-10" name="Check2" onclick=" Suma(this.checked,this.value)" style="font-weight: 700" ><b>2: 
		Fea</b></td>
		<td width="123" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<b>&nbsp;valor: <font color="#FF0000">-10</font></b></td>
		<td height="30" width="605" bordercolorlight="#000000" bordercolor="#000000">&nbsp;Sufres 
		de alguna deformidad en el rostro lo que te hace poco atractivo 
		reaccionan mal cuando te ven</td>
	</tr>
	<tr>
		<td width="206" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<input type="checkbox" value="-10" name="Check3" onclick=" Suma(this.checked,this.value)" style="font-weight: 700" ><b>3: Paranoia</b></td>
		<td width="123" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<b>&nbsp;valor: <font color="#FF0000">-10</font></b></td>
		<td height="30" width="605" bordercolorlight="#000000" bordercolor="#000000">&nbsp;siempre 
		as estado tan en alerta que se te hace difícil concentrarte en algo</td>
	</tr>
	<tr>
		<td width="206" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<input type="checkbox" value="-10" name="Check4" onclick=" Suma(this.checked,this.value)" style="font-weight: 700" ><b>4: S. Muerto de Hambre</b></td>
		<td width="123" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<b>&nbsp;valor: <font color="#FF0000">-10</font></b></td>
		<td height="30" width="605" bordercolorlight="#000000" bordercolor="#000000">&nbsp;No 
		tienes trabajo solo lo que llevas puesto y tienes deudas en todos los 
		pueblos que visites, si trabajas no recibiros salario hasta completar el 
		pago de 1000 monedas de oro</td>
	</tr>
	<tr>
		<td width="206" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<input type="checkbox" value="-5" name="Check5" onclick=" Suma(this.checked,this.value)" style="font-weight: 700" ><b>5: S. Pobre</b></td>
		<td width="123" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<b>&nbsp;valor: <font color="#FF0000">-5</font></b></td>
		<td height="30" width="605" bordercolorlight="#000000" bordercolor="#000000">&nbsp;No 
		tienes trabajo, solo lo que llevas puesto, trabajas para pagar tus 
		necesidades, si trabajas te pagaran la mitad del salario normal de un 
		obrero</td>
	</tr>
	<tr>
		<td width="206" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<input type="checkbox" value="-15" name="Check6" onclick=" Suma(this.checked,this.value)" style="font-weight: 700" ><b>6: R. Mala</b></td>
		<td width="123" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<b>&nbsp;valor: <font color="#FF0000">-15</font></b></td>
		<td height="30" width="605" bordercolorlight="#000000" bordercolor="#000000">&nbsp;Gozas 
		de una muy mala reputación, eres buscado por los guardias de muchas 
		ciudades por ser sospechoso de mas de 3 actos de delincuencia en cada 
		una Según el director</td>
	</tr>
	<tr>
		<td width="206" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<input type="checkbox" value="-5" name="Check7" onclick=" Suma(this.checked,this.value)" style="font-weight: 700" ><b>7: Enemigos</b></td>
		<td width="123" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<b>&nbsp;valor: <font color="#FF0000">-5</font></b></td>
		<td height="30" width="605" bordercolorlight="#000000" bordercolor="#000000">&nbsp;Estos 
		enemigos serán más fuertes que , el director ara referencia como será 
		estos enemigos y hará un personaje no jugable El cual usara como gu</td>
	</tr>
	<tr>
		<td width="206" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<input type="checkbox" value="-20" name="Check8" onclick=" Suma(this.checked,this.value)" style="font-weight: 700" ><b>8: P. Menor</b></td>
		<td width="123" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<b>&nbsp;valor: <font color="#FF0000">-20</font></b></td>
		<td height="30" width="605" bordercolorlight="#000000" bordercolor="#000000">&nbsp;Esto 
		corresponde a que tu tienes un amigo o conocido el cual deveras tu de 
		proteger este es más débil Puede ser un familiar todo será decisión del 
		director</td>
	</tr>
	<tr>
		<td width="206" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<input type="checkbox" value="-10" name="Check9" onclick=" Suma(this.checked,this.value)" style="font-weight: 700" ><b>9: Avaricia</b></td>
		<td width="123" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<b>&nbsp;valor: <font color="#FF0000">-10</font></b></td>
		<td height="30" width="605" bordercolorlight="#000000" bordercolor="#000000">&nbsp;Aunque 
		tengas mucho de algo siempre querrás tener mas sea plata tierras Según 
		el director</td>
	</tr>
	<tr>
		<td width="206" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<input type="checkbox" value="-15" name="Check10" onclick=" Suma(this.checked,this.value)" style="font-weight: 700" ><b>10: 
		Codicia</b></td>
		<td width="123" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<b>&nbsp;valor: <font color="#FF0000">-15</font></b></td>
		<td height="30" width="605" bordercolorlight="#000000" bordercolor="#000000">&nbsp;Siempre 
		que veas algo a otras personas y te guste, buscaras la forma de 
		obtenerlo Según el director</td>
	</tr>
	<tr>
		<td width="206" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<p style="margin-top: 0; margin-bottom: 0">
		<input type="checkbox" value="-10" name="Check11" onclick=" Suma(this.checked,this.value)" style="font-weight: 700" ><b>11: 
		Cobarde</b></p></td>
		<td width="123" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<b>&nbsp;valor: <font color="#FF0000">-10</font></b></td>
		<td height="30" width="605" bordercolorlight="#000000" bordercolor="#000000">&nbsp;Siempre 
		serás el ultimo en arriesgarse, optaras por correr a enfrentarte a algo</td>
	</tr>
	<tr>
		<td width="206" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<input type="checkbox" value="-5" name="Check12" onclick=" Suma(this.checked,this.value)" style="font-weight: 700" ><b>12: 
		Fobias lv1</b></td>
		<td width="123" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<b>&nbsp;valor: <font color="#FF0000">-5</font></b></td>
		<td height="30" width="605" bordercolorlight="#000000" bordercolor="#000000">&nbsp;Le 
		tendrás miedo a algo en especifico y será tratado como cobardía hacia lo 
		escogido.</td>
	</tr>
	<tr>
		<td width="206" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<input type="checkbox" value="-10" name="Check13" onclick=" Suma(this.checked,this.value)" style="font-weight: 700" ><b>13: 
		Fobias lv2</b></td>
		<td width="123" height="30" bordercolorlight="#000000" bordercolor="#000000">
		<b>&nbsp;valor: <font color="#FF0000">-10</font></b></td>
		<td height="30" width="605" bordercolorlight="#000000" bordercolor="#000000">&nbsp;Le 
		tendrás miedo a algo en especifico y será tratado como cobardía hacia lo 
		escogido.</td>

farve · #2 (**permalink**) 05/02/2009, 13:29

Tienes muchas cosas 'mal', con el titulo del post para empezar.

No utilices la etiqueta font, usa span.
y porque donde pone nombre, costo y descipccion lo has echo en un div, y no como cabecera de la tabla?? con la etiqueta th.

ademas de que sobra el

Código:

<p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
            <p style="margin-top: 0; margin-bottom: 0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p>

eso sin mirarlo mucho.

si quieres un buen tutorial te recomiendo http://www.librosweb.es/
leete el de xhtml y despues el de css, es largo, si pero bueno, y se lee ameno.

arcanisgk · #3 (**permalink**) 05/02/2009, 14:04

realise el cambio que me dijistes haora como paso esto a html+css o xhtml+css

Cita:

<tr>
<td width="206" height="30" bordercolorlight="#000000" bordercolor="#000000">
<input type="checkbox" value="-10" name="Check2" onclick=" Suma(this.checked,this.value)" style="span-weight: 700" >2:
Fea</td>
<td width="123" height="30" bordercolorlight="#000000" bordercolor="#000000">
 valor: -10</td>
<td height="30" width="605" bordercolorlight="#000000" bordercolor="#000000"> Sufres
de alguna deformidad en el rostro lo que te hace poco atractivo
reaccionan mal cuando te ven</td>
</tr>

tomando en cuenta que este codigo se repite 40 veces en la pagina web y lo unico que cambia es el label vicual no el codigo

farve · #4 (**permalink**) 05/02/2009, 14:25

hay mucha cosa que no sirve para nada

lo he echo solo con una fila, he cambiado unas cuantas cosas, fijate bien, y vas haciendo las demas filas.

por aqui el html

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fea</title>
 <link href="1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<form name="form1" id="form1" action="procesa.php" method="POST">  
   <p>Usted tiene un total de 175 puntos para escoger opciones de este 
    menú, recuerde ahorrar para tener mas puntos adelante; este menú es 
    especial ya que en ves de invertir sus puntos obtendrá lo que se 
    marca en rojo <span class='importante'>valor:</span> <span class="valor">-20 </span>hasta 
    llegar a 75 puntos</p>
    
    <table >
    <col class="nombre" />
    <col class="costo" />
    <col class="descripcion" />
    <thead>
        <tr>
            <th scope="col">Nombre</th>
            <th scope="col">Costo</th>
            <th scope="col">Descripción</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td >
                <input type="checkbox" value="-20" name="Check1" id="Check1" onclick=" Suma(this.checked,this.value)" /><label for="Check1" class="importante">1: Horrenda</label></td>
            <td><span class="importante">Valor: <span class="valor">-20</span></span></td>
            <td >Sufres de malformaciones en el cuerpo y rostro, lo cual te ase repugnante y es difícil para ti pasar desapercibido reaccionan mal cuando te ven.</td>
        </tr>
    </tbody>
    </table>
</form>
</body>
</html>

aqui el css

Código:

@charset "UTF-8";

#form1 table {
border-collapse: collapse;
border: 1px solid #000;
width: 950px;
}

#form1 table th, #form1 table td {
border: 1px solid #000;
padding: 3px;
height:30px;
}

.importante {
font-weight: bold;
}

.valor {
color:#FF0000;
}

.nombre{ width: 150px;}
.costo { width: 100px;}
.descripcion { width: auto;}

lo que tines que hacer es crear un archivo con extension .css y meter hay el codigo css
fijate que lo que enlaza el html con el css es el <link href="1.css" rel="stylesheet" type="text/css" />
, hay pone 1.css tu lo llamalo como quieras, lo cambias y ya esta.

y enserio si puedes leete poco a poco los 'libros' esos, que esto no es dificil!!

cualquier cosa, por aqui andare

arcanisgk · #5 (**permalink**) 05/02/2009, 14:36

gracias brother no saves lo que acavas de ayudarme