Ir ao conteúdo
  • Cadastre-se
leandro42

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

Recommended Posts

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>

post-725613-0-53280600-1401898344_thumb.

pg1.html

teste1.php

Compartilhar este post


Link para o post
Compartilhar em outros sites

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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

mesmo usando porcentagem para posicionar, os objetos não se ajustam a monitores de diferentes resoluções, o que eu posso usar para isso?

Pesquise por Layout Responsivo.

É algo que demora um certo tempo de experiência pra ficar bom..

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×