Esse código HTML/CSS e PHP está organizado?

leandro42 · 4 de junho de 2014

Olá, estou começando a aprender HTML, CSS e PHP e queria saber se este código esta bagunçado ou esta bom?se sim como deixar mais organizado.

Obrigado pela atenção!!!

Página principal:

<html><head><title>Tabela</title><style type="text/css">		#div1 {		align:center;		width:350px;		height:700px;		position:absolute;		top:50%;		left:50%;		;		margin-top:-350px;		font-family:verdana;		color:#ffffff;		font-size:30px;		}	#div1:hover  {				background-color:rgba(0, 0, 0, 0.5);				}	#body {		background-image:url(image.jpg);		background-color:#000000;		background-repeat:repeat-y;		background-position:center;		background-attachment:scroll;		}	#submit     {	display:block;	border:solid 0px;	border-radius:8px;	padding:10px;	width:200px;	background:#000000;	font-family:verdana;	color:#ffffff;	font-size:18px;	font-weight: bold;}	#submit:hover {		position:relative;		top:1px;		left:1px;		background-color:rgba(51,51,51,0.5);		}								</style></head>	<body id="body">	<div id="div1">			<form method="post" action="teste1.php">			<center>	Escolha uma tabuada:<br><br>						<input type="radio" name="tab" value="1" id="1" checked> <label for="1">1</label><br>					<input type="radio" name="tab" value="2" id="2"> <label for="2">2</label><br>					<input type="radio" name="tab" value="3" id="3"> <label for="3">3</label><br>					<input type="radio" name="tab" value="4" id="4"> <label for="4">4</label><br>					<input type="radio" name="tab" value="5" id="5"> <label for="5">5</label><br>					<input type="radio" name="tab" value="6" id="6"> <label for="6">6</label><br>					<input type="radio" name="tab" value="7" id="7"> <label for="7">7</label><br>					<input type="radio" name="tab" value="8" id="8"> <label for="8">8</label><br>					<input type="radio" name="tab" value="9" id="9"> <label for="9">9</label><br>	 			<input type="radio" name="tab" value="10" id="10"> <label for="10">10</label><br>	<br>	Escolha outra tabuada:					<select name="tab2" style="width:130px;">						<option value="1">1<br>						<option value="2">2<br>						<option value="3">3<br>						<option value="4">4<br>						<option value="5">5<br>						<option value="6">6<br>						<option value="7">7<br>						<option value="8">8<br>						<option value="9">9<br>						<option value="10">10<br>					</select><br><br>					<input type="submit" value="Calcular" id="submit"><br>					<input type="reset" value="Limpar" style="width:100px;" id="submit">			</center>			</form>		</div>	</body>		</html>

PHP com HTML/CSS:

<html><head><style type="text/css">#body {		background-image:url(image.jpg);		background-color:#000000;		background-repeat:repeat-y;		background-position:center;		background-attachment:scroll;		}#divprincipal {			width:350px;			height:350px;			position:absolute;			top:50%;			left:50%;			margin-top:-175px;			;			font-family:verdana;			color:#ffffff;			font-size:25px;		}#tab1 {	float:left;		}#tab2 {		float:right;		}#voltar {		display:block;		border:0px solid;		border-radius:8px;		padding:10px;		width:200px;		background:#000000;		font-family:verdana;		color:#ffffff;		font-size:18px;		font-weight: bold;		margin-top:280px;				}#voltar:hover{			position:relative;			top:1px;			left:1px;			background-color:rgba(51,51,51,0.5);			}</style></head>		<body id="body">			<div id="divprincipal"><center>		<div id="tab1"><?php						$tabx=$_POST['tab'];						$tab2=$_POST['tab2'];							function tabuada1($tabx) {										for ($n=0; $n <= 10; $n++) {											$resultado=$tabx*$n;										echo $tabx.'x'.$n.' = '.$resultado.'<br>';										}											}											tabuada1($tabx);?>		</div>									<div id="tab2"><?php							function tabuada2($tab2) {										for ($a=0; $a <= 10; $a++) {											$resultado=$tab2*$a;										echo $tab2.'x'.$a.' = '.$resultado.'<br>';										}											}											tabuada2($tab2);?>		</div>								<br><br><br>					<input type="button" value="Voltar" onclick="history.back()" id="voltar"></center>		</div>				</body></html>

pg1.html

teste1.php

Mog.Lucas · 5 de junho de 2014

Não está dos piores, mas dá pra melhorar. Seguem algumas dicas:

Utilize CSS externo. Leia mais: www.maujor.com/w3ctuto/firstcss.html (Vá até o Passo 7)
A tag label pode (e acredito que deva) ser pai da tag da qual ela faz referencia.. nesse caso você não precisa nem definir id para ela:
```
<input type="radio" name="tab" value="6" id="6"><label for="6">6</label>
```
vira
```
<label><input type="radio" name="tab" value="6" id="6">6</label>
```
O elemento <input>, assim como outros (o <br>, por ex) são elementos vazios. Ou seja, não foram desenvolvidos para conter outros elementos. Nesses casos, eles não possuem tag de fechamento (</input>, por ex) mas devem conter um sinal de fechamento assim: />
Veja:
```
<input type="radio" name="tab" value="6" id="6" />
```
Evite o uso de tags <br>. Utilize CSS para colocar os elementos onde você quer. Acredito que <br> só deva ser utilizado para quebrar linhas de texto (semantica).
Melhore a identação do seu código, está mais ou menos certa mas em alguns momentos se perde. Por exemplo: os <option> estão identados corretamente em relação a tag <select>, mas a tag <select> não está identada corretamente em relação ao form/div.
Nunca, nunca utilize a tag <center>. Faça centralização por CSS (text-align: center, para elementos do tipo block, ou margin: 0 auto; para outras situações)
Seu botão de Limpar e seu botão de Enviar o formulário estão com o mesmo id. id's devem ser unicos, tome cuidado com copiar-e-colar.
Evite criar variaveis e nomes abreviados. Siga padrões, como por exemplo o UpperCamelCase e o lowerCamelCase. Leia mais: http://pt.wikipedia.org/wiki/CamelCase

Mas não está ruim não.. já vi muito "profissional" com códigos bem piores. Parabéns e continue a evoluir

PS: Tome cuidado com a preguiça.. programar com preguiça pode te tornar um mal profissional ao longo do prazo.. MUITO cuidado com copiar-e-colar e com abreviaturas.

Abraços!

leandro42 · 6 de junho de 2014

Muito obrigado mesmo, ajudou muito.

Na verdade eu não copiei e colei, no botão limpar eu usei o mesmo id porque a formatação no CSS seria a mesma mas acho que foi um erro.

Ah você poderia tirar mais uma dúvida em relação ao posicionamento dos objetos na tela, mesmo usando porcentagem para posicionar, os objetos não se ajustam a monitores de diferentes resoluções, o que eu posso usar para isso?