HTML Revisão de códigos para correção

Natanael Marrafon Rocha · 14 de março de 2019

Eu estou fazendo uma tarefa do meu curso de html/css eu queria saber se está certo o código que eu coloquei e como eu posso melhorar , tive um pouco de dificuldade para fazer as tabelas pois precisava colocar a imagem e na frente dela a mensagem eu fiz dessa forma e usei os quebra galhos do comando css position:relative e ajustei para ficar no meio da tela tinha forma melhor de fazer queria saber outra forma sem usar tabela ?

<!DOCTYPE HTML>
<html lang="pt-br">
	<head>
		<meta charset="utf-8"/>
		<title>Loja de Jóias</title>
	</head>
	<body style="width:1000px; background-color:#DDA0DD; text-align:center; margin:auto;">
		<header style="width:1000px; height:180px; float:left; background-color:white;">
			<figure>
				<img style="float:left;" src="imagens/logo.png"/>
			</figure>
			<figure style="float:right; margin-top:50px;">
				<nav>
					<p style="font:normal 14px verdana; float:right; margin-top:30px; padding-left:30px;">Seja um </br> Franqueado</p>
					<a href="index.html"><img style="padding:10px; margin-bottom:10px;" src="imagens/home.jpg"/  alt="Inicio" title="Clique para abrir"></a>
					<a href="aliancas.html"><img style="padding:10px;" src="imagens/aliancas.jpg" alt="Alianças" title="Clique para abrir"/></a>
					<a href="noivado.html"><img style="padding:10px;" src="imagens/noivado.jpg" alt="Noivado" title="Clique para abrir"/></a>
					<a href="formatura.html"><img style="padding:10px;" src="imagens/formatura.jpg" alt="Formatura" title="Clique para abrir"/></a>
				</nav>
			</figure>
		</header>
		<section>
			<div style="width:1000px;">
				<figure style="float:left; margin:0;">
					<img style="margin-top:5px;" src="imagens/banner1.jpg"/>
				</figure>
			</div>
			<div style="width:1000px; height:150px; background-color:white; float:left;">
				<p style="font:normal 22px verdana; margin:10; color:#DDA0DD;">ALIANÇAS DE COMPROMISSO, ALIANÇAS DE NOIVADO E ALIANÇAS DE CASAMENTO</p>
			<table style="float:left; position:relative; left:125px;">
				<tr>
					<td><img src="imagens/frete.jpg"/></td>
					<td><p style="font:normal 10px verdana;"><kbd style="font:normal 13px verdana">FRETE GRATIS</kbd></br>Nas compras acima</br>de R$150.00</p></td>
				</tr>
			</table>
			<table style="float:left; position:relative; left:225px;">
				<tr>
					<td><img src="imagens/troca.jpg"/></td>
					<td><p align="left" style="font:normal 10px verdana;"><kbd style="font:normal 13px verdana">30 DIAS PARA TROCA</kbd></br>Garantimos a troca</br>do seu pedido em até</br>30 dias após sua compra.</p></td>			
				</tr>
			</table>			
			<table style="float:left; position:relative; left:325px; top:10px;">
				<tr>
					<td><img src="imagens/porcento.jpg"/></td>
					<td><p align="left" style="font:normal 10px verdana;"><kbd style="font:normal 13px verdana">10% DE DESCONTO</kbd></br>Para pagamento à vista.</p></td>
				</tr>
			</table>
			</div>
			<div style="width:1000px; height:80px; float:left; background-color:white; color:#DDA0DD;">
				<figure>
					<img style="float:left;" src="imagens/joia-logo.jpg"/>
					<p style="font:normal 22px verdana; float:left; margin-left:10px; margin-top:5px;">DESTAQUES</p>
				</figure>
			</div>
			<div style="float:left; width:1000px; height:500px; background-color:white; margin-top:5px;">
				
			</div>
	</body>
</html>

DiF · 14 de março de 2019

@Natanael Marrafon Rocha Olá,

onde exatamente está sua dúvida?

A técnica usada para criar layouts sem tabela é chamada de tableless. No caso, irás usar o elemento DIV. Para divisão interna de setores, você pode usar o elemento section.

Pelo que vejo do seu código, ele está bastante sujo. Evite de usar o css inline, pelo grau de precedência. Então acostume-se a colocar todas as regras CSS dentro do elemento Style ou em um arquivo .css externo.

Ademais, vejo também atributos desnecessários, como por exemplo na tabela, você usa o float, mas ao mesmo tempo o position relative. Ou você usa ou outro. Os dois não.

Por exemplo, se você quer que os elementos fiquem lado a lado, use o display inline-block. Podes usar o display table também, que aí vai tratar como se fosse tabela, mesmo não sendo.

Enfim... precisa informar onde exatamente está sua dúvida, para que possamos explicar.

Natanael Marrafon Rocha · 15 de março de 2019

Em 14/03/2019 às 16:55, DiF disse:

@Natanael Marrafon Rocha Olá,

onde exatamente está sua dúvida?

A técnica usada para criar layouts sem tabela é chamada de tableless. No caso, irás usar o elemento DIV. Para divisão interna de setores, você pode usar o elemento section.

Pelo que vejo do seu código, ele está bastante sujo. Evite de usar o css inline, pelo grau de precedência. Então acostume-se a colocar todas as regras CSS dentro do elemento Style ou em um arquivo .css externo.

Ademais, vejo também atributos desnecessários, como por exemplo na tabela, você usa o float, mas ao mesmo tempo o position relative. Ou você usa ou outro. Os dois não.

Por exemplo, se você quer que os elementos fiquem lado a lado, use o display inline-block. Podes usar o display table também, que aí vai tratar como se fosse tabela, mesmo não sendo.

Enfim... precisa informar onde exatamente está sua dúvida, para que possamos explicar.

Dif obrigado é que eu to fazendo os exercicios do meu curso e eu to procurando formas de diagramar o site eu fiz o que você falou de colocar tudo em divs, consegui alinhar a imagem á esquerda do texto mas eu to com um problema ficou desproporcional o tamanho do anuncio como faço para arrumar? eu coloquei até em cor vermelha para vizualizar ja tentei colocar o height todos do mesmo tamanho mas sempre fica assim eu estou fazendo dessa forma o css porque o curso está pedindo para treinar,

<!DOCTYPE HTML>
<html lang="pt-br">
	<head>
		<meta charset="utf-8"/>
		<title>Loja de Jóias</title>
	</head>
	<body style="width:1000px; background-color:#DDA0DD; text-align:center; margin:auto;">
		<header style="width:1000px; height:180px; float:left; background-color:white;">
			<figure>
				<img style="float:left;" src="imagens/logo.png"/>
			</figure>
			<figure style="float:right; margin-top:50px;">
				<nav>
					<p style="font:normal 14px verdana; float:right; margin-top:30px; padding-left:30px;">Seja um </br> Franqueado</p>
					<a href="index.html"><img style="padding:10px; margin-bottom:10px;" src="imagens/home.jpg"/  alt="Inicio" title="Clique para abrir"></a>
					<a href="aliancas.html"><img style="padding:10px;" src="imagens/aliancas.jpg" alt="Alianças" title="Clique para abrir"/></a>
					<a href="noivado.html"><img style="padding:10px;" src="imagens/noivado.jpg" alt="Noivado" title="Clique para abrir"/></a>
					<a href="formatura.html"><img style="padding:10px;" src="imagens/formatura.jpg" alt="Formatura" title="Clique para abrir"/></a>
				</nav>
			</figure>
		</header>
		<section>
			<div style="width:1000px;">
				<figure style="float:left; margin:0;">
					<img style="margin-top:5px;" src="imagens/banner1.jpg"/>
				</figure>
			</div>
			<div style="width:1000px; height:200px; background-color:white; float:left; ">
				<p style="font:normal 18px verdana; margin:10; color:#DDA0DD;">ALIANÇAS DE COMPROMISSO, ALIANÇAS DE NOIVADO E ALIANÇAS DE CASAMENTO</p>
			<div>
			<div style="display:inline-block; width:240px; height:200px; background-color:red;">
				<figure>
					<img align="left" src="imagens/frete.jpg"/>
					<p style="font:normal 10px verdana;"><kbd style="font:normal 13px verdana">FRETE GRATIS</kbd></br>Nas compras acima</br>de R$150.00</p>
				</figure>
			</div>
			<div style="display:inline-block; width:290px; height:200px; background-color:red;">
				<figure>
					<img align="left" src="imagens/troca.jpg"/>
					<p style="font:normal 10px verdana;"><kbd style="font:normal 13px verdana">30 DIAS PARA TROCA</kbd></br>Garantimos a troca</br>do seu pedido em até</br>30 dias após sua compra.</p>		
				</figure>
			</div>
			<div style="display:inline-block; width:260px; height:200px; background-color:red; margin:0;">
				<figure>
					<img align="left" src="imagens/porcento.jpg"/>
					<p style="font:normal 10px verdana;"><kbd style="font:normal 13px verdana">10% DE DESCONTO</kbd></br>Para pagamento à vista.</p>
				</figure>
			</div>
			</div>
			</div>
			<div style="width:1000px; height:80px; float:left; background-color:white; color:#DDA0DD;">
				<figure>
					<img style="float:left;" src="imagens/joia-logo.jpg"/>
					<p style="font:normal 18px verdana; float:left; margin-left:10px; margin-top:5px;">DESTAQUES</p>
				</figure>
			</div>
			<div style="float:left; width:1000px; height:500px; background-color:white; margin-top:5px;">
				
			</div>
	</body>
</html>

DiF · 15 de março de 2019

@Natanael Marrafon Rocha Não tenho certeza de onde é o problema exatamente. Mas creio que algum elemento está fazendo com que o elemento pai se expanda.

Eu recomendo retirar o conteúdo desses elementos e colocando gradativamente para isolar qual está mudando o tamanho.

Também pode ser possível que alguma regra css esteja em conflito, visto que o grau de precedência no css inline é maior. Isso faz sobrescrever qualquer outra regra que tenha feito.

Vejo ali que você tentou usar os elementos do HTML 5, mas de forma errada.

Algumas considerações.

O elemento figure, espera os elementos responsáveis por imagens. como o img e o figcaption. O menu, tem que ficar fora e ser posicionado com o position absolute ou relative. Isso semanticamente falando.

Já o elemento section, não deve ser usado para ser o "wrap" ou conteiner da estrutura. É o elemento DIV que tem que fazer isso. O section serve para separar as seções dentro de um elemento div.

Por exemplo:

<div class="elemento-pai">
   <section class="elemento-filho"></section>
   <section class="elemento-filho"></section>
   <section class="elemento-filho"></section>
</div>

Enfim, é legal que o curso aborde que dá para fazer css inline, mas procure não usar isso, a não ser que precise que o css seja sobrescrito.

Natanael Marrafon Rocha · 15 de março de 2019

<!DOCTYPE HTML>
<html lang="pt-br">
	<head>
		<meta charset="utf-8"/>
		<title>Loja de Jóias</title>
	</head>
	<body style="width:1000px; background-color:#DDA0DD; text-align:center; margin:auto;">
		<header style="width:1000px; height:180px; float:left; background-color:white;">
			<figure>
				<img style="float:left;" src="imagens/logo.png"/>
			</figure>
				<nav style="float:right; margin-top:50px;">
					<p style="font:normal 14px verdana; float:right; margin-top:30px; padding-left:30px;">Seja um </br> Franqueado</p>
					<a href="index.html"><img style="padding:10px; margin-bottom:10px;" src="imagens/home.jpg"/  alt="Inicio" title="Clique para abrir"></a>
					<a href="aliancas.html"><img style="padding:10px;" src="imagens/aliancas.jpg" alt="Alianças" title="Clique para abrir"/></a>
					<a href="noivado.html"><img style="padding:10px;" src="imagens/noivado.jpg" alt="Noivado" title="Clique para abrir"/></a>
					<a href="formatura.html"><img style="padding:10px;" src="imagens/formatura.jpg" alt="Formatura" title="Clique para abrir"/></a>
				</nav>
		</header>
		<div style="width:1000px;">
		<section>
				<figure style="float:left; margin:0;">
					<img style="margin-top:5px;" src="imagens/banner1.jpg"/>
				</figure>		
		</section>
		</div>
		<div style="width:1000px; height:200px; background-color:white; float:left;">
		<section>
			<article>		
				<p style="font:normal 18px verdana; margin:10; color:#DDA0DD;">ALIANÇAS DE COMPROMISSO, ALIANÇAS DE NOIVADO E ALIANÇAS DE CASAMENTO</p>
			<div style="float:left; width:235px; height:100px; margin-left:50px;">
				<figure>
					<img align="left" src="imagens/frete.jpg"/>
					<figcaption style="font:normal 10px verdana;"><kbd style="font:normal 13px verdana">FRETE GRATIS</kbd></br>Nas compras acima</br>de R$150.00</figcaption>
				</figure>
			</div>
			<div style="float:left; width:300px; height:100px; margin-left:50px;">
				<figure>
					<img align="left" src="imagens/troca.jpg"/>
					<figcaption style="font:normal 10px verdana; text-align:center;"><kbd style="font:normal 13px verdana;">30 DIAS PARA TROCA</kbd></br>Garantimos a troca</br>do seu pedido em até</br>30 dias após sua compra.</figcaption>		
				</figure>
			</div>
			<div style="float:left; width:255px; height:100px; margin-left:50px;">
				<figure>
					<img align="left" src="imagens/porcento.jpg"/>
					<figcaption style="font:normal 10px verdana;"><kbd style="font:normal 13px verdana">10% DE DESCONTO</kbd></br></br>Para pagamento à vista.</figcaption>
				</figure>
			</div>
			</article>
			<div style="width:1000px; height:60px; float:left; background-color:white; color:#DDA0DD;">
				<figure>
					<img align="left" src="imagens/joia-logo.jpg"/>
					<figcaption style="font:normal 18px verdana; float:left; margin-left:10px; margin-top:5px;">DESTAQUES</figcaption>
				</figure>
			</div>
			</section>
			<div style="width:1000px; height:400px; float:left; background-color:white; margin-top:5px;">
			<section>
				<article>
					<table align="center" style="margin-top:10px;">
						<tr>
							<td><img src="imagens/alianca1.jpg"/></td>
							<td><img src="imagens/alianca2.jpg"/></td>
							<td><img src="imagens/alianca3.jpg"/></td>
							<td><img src="imagens/alianca4.jpg"/></td>
						</tr>
						<tr>
							<td><kbd style="font:normal 15px verdana;">Aliança de Ouro Lines</kbd><br/><kbd style="font:normal 12px verdana;">De R$2.500,00<br/>Por R$1.600.00 Á VISTA<br/> Em até 12x de R$133.00</kbd></td>
							<td><kbd style="font:normal 15px verdana;">Aliança de Noivado 3T5</kbd><br/><kbd style="font:normal 12px verdana;">De R$1.800,00<br/>Por R$900.00 Á VISTA<br/> Em até 12x de R$75.00</kbd></td>
							<td><kbd style="font:normal 15px verdana;">Aliança de Formatura 5Z</kbd><br/><kbd style="font:normal 12px verdana;">De R$3.500,00<br/>Por R$2.100.00 Á VISTA<br/> Em até 12x de R$175.00</kbd></td>
							<td><kbd style="font:normal 15px verdana;">Aliança de Ouro M17</kbd><br/><kbd style="font:normal 12px verdana;">De R$3.500,00<br/>Por R$2.100.00 Á VISTA<br/> Em até 12x de R$175.00</kbd></td>
						</tr>
					</table>
				</article>
			</section>
			</div>
			<div style="width:1000px; height:150px; float:left; background-color:black;">
					<footer>
						<div style="float:left;">
						<p align="left" style="font:normal 20px verdana; color:yellow; margin:10px 0px 0px 20px;">INFORMAÇÕES</p><br/>
						<p align="left" style="color:white; font:normal 12px verdana; margin:10px 0px 0px 20px;">Como comprar alianças<br/>Garantia<br/>Troca e Devoluções<br/>Regulamento<br/>Numeração das Alianças</p>	
						</div>
						<div style="float:left;">
						<p align="left" style="font:normal 20px verdana; color:yellow; margin:10px 0px 0px 50px;">CENTRAL DE VENDAS</p><br/>
						<p align="left" style="color:white; font:normal 12px verdana; margin:10px 0px 0px 50px;">(51) 3594-0001<br/>Nosso horário de atendimento é de:<br/>Segunda a Sexta das 8:30 às 17:30h,<br/>Sábado das 08:30h às 12:45h<br/>Exceto Domingo e Feriados</p>					
						</div>
						<div style="float:left;">
							<figure style="margin:50px 0px 0px 100px;">
								<img style="padding-left:30px;" src="imagens/face.png"/>
								<img style="padding-left:30px;" src="imagens/insta.png"/>
								<img style="padding-left:30px;" src="imagens/twitter.png"/>
								<img style="padding-left:30px;" src="imagens/googlemais.png"/>
							</figure>
						</div>
					</footer>
			</div>
	</body>
</html>

E agora Dif ficou melhor? eu não sei eu vejo a apostila do curso e parece que tem algo errado sabe? como se quisessem explicar de qualquer forma, olha o que eu fiz Dif agora se alinhou os textos e as imagens, eu apenas acrescentei a float:left; neles e mudei o código, e a semântica ta certa agora ? do html 5? eu tenho mais umas dúvidas, quanto a quebra de linha qual é o certo usar? </br> <br/> ou <br> ? ta certo a utilização minha para a tag kbd?

Natanael Marrafon Rocha · 16 de março de 2019

Estou tentando aprender a semântica direito do HTML e CSS está certo dessa forma ?

<!DOCTYPE HTML>
<html lang="pt-br">
	<head>
		<meta charset="utf-8"/>
		<title>Loja de Jóias</title>
	</head>
	<body style="width:1000px; background-color:#DDA0DD; text-align:center; margin:auto;">
		<header style="width:1000px; height:180px; float:left; background-color:white;">
			<figure>
				<img style="float:left;" src="imagens/logo.png"/>
			</figure>
				<nav style="float:right; margin-top:50px;">
					<p style="font:normal 14px verdana; float:right; margin-top:30px; padding-left:30px;">Seja um </br> Franqueado</p>
					<a href="index.html"><img style="padding:10px; margin-bottom:10px;" src="imagens/home.jpg"/  alt="Inicio" title="Clique para abrir"></a>
					<a href="aliancas.html"><img style="padding:10px;" src="imagens/aliancas.jpg" alt="Alianças" title="Clique para abrir"/></a>
					<a href="noivado.html"><img style="padding:10px;" src="imagens/noivado.jpg" alt="Noivado" title="Clique para abrir"/></a>
					<a href="formatura.html"><img style="padding:10px;" src="imagens/formatura.jpg" alt="Formatura" title="Clique para abrir"/></a>
				</nav>
		</header>
		<div style="width:1000px;">
		<section>
				<figure style="float:left; margin:0;">
					<img style="margin-top:5px;" src="imagens/banner2.jpg"/>
				</figure>		
		</section>
		</div>
		<div style="width:1000px; height:200px; background-color:white; float:left;">
		<div>
			<section>
				<figure style="margin:10px;">
					<img style="float:left;" src="imagens/joia-logo.jpg"/>
					<figcaption style="font:normal 18px verdana; margin:5px 0px 0px 0px; float:left; color:#DDA0DD;">ALIANÇAS DE CASAMENTO</figcaption>
				</figure>				
			</section>
		</div>
		<div style="width:1000px; height:80px; float:left;">
			<section>
				<form style="float:left; margin-left:13px;" method="post" action="">
					<input style="width:230px; height:30px; border-color:#DDA0DD;" type="text" placeholder="Digite Aqui" name="Texto">
					<input style="width:80px; height:35px; color:black; background-color:red; border-style:none;" type="submit" value="Buscar" Name="Buscar">
				</form>
			</section>
		</div>
		<div style="width:1000px; height:67px; float:left; text-align:right;">
			<section style="margin:15px 0px 0px 370px;">
				<a style="color:#DDA0DD; margin-left:10px; float:left; display:table; border-spacing:10px; border-width:thin; border-color:#DDA0DD; border-style:solid; text-decoration:none;" href="#">MAIOR PREÇO</a>
				<a style="color:#DDA0DD; margin-left:10px; float:left; display:table; border-spacing:10px; border-width:thin; border-color:#DDA0DD; border-style:solid; text-decoration:none;" href="#">MENOR PREÇO</a>
				<a style="color:#DDA0DD; margin-left:10px; float:left; display:table; border-spacing:10px; border-width:thin; border-color:#DDA0DD; border-style:solid; text-decoration:none;" href="#">MAIS VENDIDOS</a>
				<a style="color:#DDA0DD; margin-left:10px; float:left; display:table; border-spacing:10px; border-width:thin; border-color:#DDA0DD; border-style:solid; text-decoration:none;" href="#">LANÇAMENTOS</a>
			</section>
		</div>
		</div>
			<div style="width:1000px; height:400px; float:left; background-color:white; margin-top:5px;">
			<section>
				<article>
					<table align="center" style="margin-top:10px;">
						<tr>
							<td><img src="imagens/alianca1.jpg" alt="Aliança de Ouro Lines"/></td>
							<td><img src="imagens/alianca2.jpg" alt="Aliança de Noivado"/></td>
							<td><img src="imagens/alianca3.jpg" alt="Aliança de Formatura 5Z"/></td>
							<td><img src="imagens/alianca4.jpg" alt="Aliança de Ouro M17"/></td>
						</tr>
						<tr>
							<td><kbd style="font:normal 15px verdana;">Aliança de Ouro Lines</kbd><br/><kbd style="font:normal 12px verdana;">De R$2.500,00<br/>Por R$1.600.00 Á VISTA<br/> Em até 12x de R$133.00</kbd></td>
							<td><kbd style="font:normal 15px verdana;">Aliança de Noivado 3T5</kbd><br/><kbd style="font:normal 12px verdana;">De R$1.800,00<br/>Por R$900.00 Á VISTA<br/> Em até 12x de R$75.00</kbd></td>
							<td><kbd style="font:normal 15px verdana;">Aliança de Formatura 5Z</kbd><br/><kbd style="font:normal 12px verdana;">De R$3.500,00<br/>Por R$2.100.00 Á VISTA<br/> Em até 12x de R$175.00</kbd></td>
							<td><kbd style="font:normal 15px verdana;">Aliança de Ouro M17</kbd><br/><kbd style="font:normal 12px verdana;">De R$3.500,00<br/>Por R$2.100.00 Á VISTA<br/> Em até 12x de R$175.00</kbd></td>
						</tr>
					</table>
				</article>
			</section>
			</div>
			<div style="width:1000px; height:150px; float:left; background-color:black;">
					<footer>
						<div style="float:left;">
						<p align="left" style="font:normal 20px verdana; color:yellow; margin:10px 0px 0px 20px;">INFORMAÇÕES</p><br/>
						<p align="left" style="color:white; font:normal 12px verdana; margin:10px 0px 0px 20px;">Como comprar alianças<br/>Garantia<br/>Troca e Devoluções<br/>Regulamento<br/>Numeração das Alianças</p>	
						</div>
						<div style="float:left;">
						<p align="left" style="font:normal 20px verdana; color:yellow; margin:10px 0px 0px 50px;">CENTRAL DE VENDAS</p><br/>
						<p align="left" style="color:white; font:normal 12px verdana; margin:10px 0px 0px 50px;">(51) 3594-0001<br/>Nosso horário de atendimento é de:<br/>Segunda a Sexta das 8:30 às 17:30h,<br/>Sábado das 08:30h às 12:45h<br/>Exceto Domingo e Feriados</p>					
						</div>
						<div style="float:left;">
							<figure style="margin:50px 0px 0px 100px;">
								<img style="padding-left:30px;" src="imagens/face.png" alt="Facebook"/>
								<img style="padding-left:30px;" src="imagens/insta.png" alt="Instagram"/>
								<img style="padding-left:30px;" src="imagens/twitter.png" alt="Twitter"/>
								<img style="padding-left:30px;" src="imagens/googlemais.png" alt="Google Mais"/>
							</figure>
						</div>
					</footer>
			</div>
	</body>
</html>