HTML Alguém pode ver se tem algo errado em meu codogio?

Thorum · 27 de junho de 2019

Olá senhoras e Senhores, este é meu primeiro web site, fiz ele apenas com HTML5 E CSS3 não utilizei JV por não saber ainda, estudo a alguns dias e peço para que os senhores apontem erros no codigo, obrigado desde já

Codigo HTML

<!DOCTYPE html>

<html lang="pt-br">


<html>


<head>
   <title>Site</title>
   <meta charset="utf8">
   <meta name="description" content="site">
   <link rel="stylesheet" href="css/estilo.css">

</head>



<body> 


   <header>
       
	   <h1 class="logo">MD</h1>
<!---menu---->
            <ul class="menu"> 
		        <a href="#"><li>CONTATO</li></a>
			   <a href="#"><li>SERVIÇOS</li></a>
			</ul> 	  
 <!---menu---->
   </header>

<!---conteudo---->
   <section> 
            <h2 class="texto">MARQUES DESENVOLVIMENTO WEB </h2>
   </section>
<!---conteudo---->

    
	<img src="img/logo.png"  width="400px" height="300px;">
 
<!---rodapé---->
    <footer> 
           <p class="text">Todos os Direitos Reservados  a  MD</p> 
    </footer>
<!---rodapé---->


</body>


</html>

Codigo CSS

*{
margin:0px;
paddin:0px;
	
}



body{
	
	background-color:#EEE9E9;
	overflow-x: hidden;
	
}
header{
	
width: 100%;
height: 60px;
background-color:#696969;	
border-bottom: 2px  solid black;	
}

.logo{
	font-family:Impact ;
	color:#FF4500;
	font-size: 24px;
	text-shadow: black 2px 2px 2px;
	position:relative;
	top: 10px;
	left:5px;
	
}

/*==== menu====*/
.menu ul{
	background-color:#696969;
    
}

.menu li{
	display:inline;
	list-style-type:none;
	font-family:impact;
	text-shadow: black 2px 2px;
	position:relative;
	left: 650px;
	top:11px;
    margin-left: 20px;
}

.menu a{
	
	text-decoration:none;
    color:#FF8C00;
}
/*==== menu====*/


section{
	
	width: 100%;
	height: 300px;
	background-color:#D3D3D3;

}


.texto{
     font-family:impact;
	  text-align:center;
      position:relative;
      top: 10px;
	 text-shadow: 1px 1px 1px #B03060;
     
}



img{
	position:absolute;
	left: 600px;
	
}



footer{

width: 100%;
height:60px;
background-color:#696969;
position:absolute;
bottom:0;
border-top: 2px solid black;
overflow: hidden;
}



.text{
	
	text-align:center;
	font-family:impact;
	
}

falando de mim, sou professor de educação física escolar e estou precisando pegar um money extra, penso em fazer isso com programação web, então senhores todas as criticas a esses codigos serão bem vidas, obrigado a todos novamente!!

GabrielSennaMs · 27 de junho de 2019

@Thorum Bom dia!

Bom uma coisa que muita gente confunde na web é o fato de que o html e css não são linguagem de programação, e sim um texto com marcações para ser interpretado, nesse caso o interpretador é o navegador.

Dito isso, seu texto em html e css, se não tiver erros de marcação e seguir os padrões dos marcadores, ele necessariamente não vai ter nenhum erro.

Eu olhei o seu texto em html é só encontrei alguns erros.

O primeiro erro que eu encontrei foi no elemento base <html>, você repete ele embaixo do elemento <html> com o atribulo lang="", pra resolver isso basta remover o de baixo.

<html lang="pt-br">


<html>

O segundo erro que eu encontrei foi no <head> no elemento <meta>, você adiciona um elemento <meta> com um atributo charset="", e nesse atributo você adiciona o valor "utf8", porém o correto é "utf-8" com um - entre o f e o 8.

<meta charset="utf8">

O correto seria

<meta charset="utf-8">

O terceiro erro foi no elemento <ul>, o elemento <ul> ele cria uma lista e cada item da lista deve ser seguida por uma elemento <li>, porém você colocou um elemento <a> antes do <li>.

<ul class="menu"> 
	<a href="#"><li>CONTATO</li></a>
	<a href="#"><li>SERVIÇOS</li></a>
</ul>

O correto seria

<ul class="menu">
	<li><a href="#">CONTATO</a></li>
	<li><a href="#">SERVIÇOS</a></li>
</ul>

Tirando esse três erros eu não achei mais nenhum erro, porém o seu design está ruim, se você quiser trabalhar na web, recomento a você melhorar o seu design, poque o design dá página pesa muito no trabalho.

Vou deixa o site dá W3Shools, ele sem duvida é o melhor site para aprender e estudar sobre desenvolvimento web.

https://www.w3schools.com/default.asp, todos o site é gratuito e ele tem ótimos tutorias e também tem uma ótima documentação.

Thorum · 27 de junho de 2019

26 minutos atrás, GabrielSennaMs disse:
@Thorum Bom dia!

Bom uma coisa que muita gente confunde na web é o fato de que o html e css não são linguagem de programação, e sim um texto com marcações para ser interpretado, nesse caso o interpretador é o navegador.

Dito isso, seu texto em html e css, se não tiver erros de marcação e seguir os padrões dos marcadores, ele necessariamente não vai ter nenhum erro.

Eu olhei o seu texto em html é só encontrei alguns erros.

O primeiro erro que eu encontrei foi no elemento base <html>, você repete ele embaixo do elemento <html> com o atribulo lang="", pra resolver isso basta remover o de baixo.
<html lang="pt-br">


<html>
O segundo erro que eu encontrei foi no <head> no elemento <meta>, você adiciona um elemento <meta> com um atributo charset="", e nesse atributo você adiciona o valor "utf8", porém o correto é "utf-8" com um - entre o f e o 8.
<meta charset="utf8">
O correto seria
<meta charset="utf-8">
O terceiro erro foi no elemento <ul>, o elemento <ul> ele cria uma lista e cada item da lista deve ser seguida por uma elemento <li>, porém você colocou um elemento <a> antes do <li>.
<ul class="menu"> 
	<a href="#"><li>CONTATO</li></a>
	<a href="#"><li>SERVIÇOS</li></a>
</ul> 
O correto seria
<ul class="menu">
	<li><a href="#">CONTATO</a></li>
	<li><a href="#">SERVIÇOS</a></li>
</ul> 
Tirando esse três erros eu não achei mais nenhum erro, porém o seu design está ruim, se você quiser trabalhar na web, recomento a você melhorar o seu design, poque o design dá página pesa muito no trabalho.

Vou deixa o site dá W3Shools, ele sem duvida é o melhor site para aprender e estudar sobre desenvolvimento web.

https://www.w3schools.com/default.asp, todos o site é gratuito e ele tem ótimos tutorias e também tem uma ótima documentação.

obrigado por corrigir, sim, meu designer esta horrível uehueh e irei melhorar, obrigado pelas dicas valeu

JonathanCruz · 27 de junho de 2019

Refiz a pagina usando meus conhecimentos (que não são muitos rsrsr)

Não sou Expert e nem trabalho na areá, mais desenvolvo minhas próprias aplicações.

Estou aberto a criticas também!

Minha dica pro Thorum é que estude sobre responsividade

html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Site</title>
  <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <header>
    <h1 class="logo">MD</h1>
    <!---menu---->
      <ul class="menu">
        <li><a href="#">CONTATO</a></li>
        <li><a href="#">SERVIÇOS</a></li>
      </ul>     
    <!---menu---->
  </header>
  <!---conteudo---->
  <div class="container">
    <h2 class="texto">MARQUES DESENVOLVIMENTO WEB </h2>
  </div>
<!---conteudo---->
  <div class="slides">
    <img src="img/logo.png">
  </div>
<!---rodapé---->
  <footer class="rodape"> 
    <p class="TextoRodape">Todos os Direitos Reservados  a  MD</p> 
  </footer>
<!---rodapé---->
</body>
</html>

css:

*{
  margin:0px;
  padding:0px;
  font-family:Impact ;
  }

body{  
  background-color:#EEE9E9;
}

header{
  width: 100vw;
  height: 10vh;
  background-color:#696969; 
  border-bottom: 2px  solid black;
  display: flex;
  align-items: center;
  text-shadow: black 2px 2px 2px;
}

.logo{
  color:#FF4500;
  font-size: 24px;
  margin-left: 5px;
}

/*==== menu====*/
.menu{
  width: 18vw; 
  margin-left: 40vw;
}

.menu li{
  display: inline-block;
  margin-left: 1vw;
  margin-top: 6vh;
}
.menu a{
  color:#FF8C00;
  text-decoration: none;
}

.container{
  width: 100vw;
  height: 40vh;
  background-color:#D3D3D3;
  display: flex;
  justify-content: center;
}
.texto{
  height: 5vh;
  margin-top: 2vh;
  text-shadow:1px 1px 1px red;
}

.slides{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40vh;
}

.slides img{
    width:26vw;
    height:32vh;
}

footer{
  width: 100vw;
  height: 60px;
  background: #696969;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
}