Ir ao conteúdo
  • Cadastre-se
Joao_Lucaas

Exercício html, onde errei e como melhorar?

Recommended Posts

Olá, comunidade Clube do Hardware!

 

 

Estou aprendendo HTML e CSS, mas não tenho professores. Estudo em casa! Devido à isto, não conheço ninguém para trocar idéias sobre tópicos, por isso eu conto com vocês, para me falarem onde estou errando, qual técnica usar, entre outras críticas.

Além do já citado, vocês poderiam me falar se é correto exercitar-se reconstruindo templates free, com minha própria lógica, contanto que seja semântica o suficiente?

Segue o código HTML e CSS, respectivamente:

<!DOCTYPE html>
<html lang="en-US">
<head>
	<title>Belle & Carrie Rehabilitation YOGA</title>
	
	<meta name="description" content="YOGA
For Better Health & Flexibility">

	<meta name="author" content="João Lucas">
	
	<link rel="stylesheet" href="css/style.css">
</head>

<body>
	<!-- Interface -->	
	<section id="interface">
		<!-- Header do site -->	
		<header id="principal">
			<hgroup>
				<h1><a href="#">Belle & Carrie</a></h1>
				<h2><a href="#">REHABILITATION YOGA</a></h2>
			</hgroup>
			
			<nav>
				<ul id="menu">
					<li>
						<a href="#" id="home">HOME</a>
					</li>
					
					<li>
						<a href="#" id="about">ABOUT</a>
					</li>
					
					<li>
						<a href="#" id="classes">CLASSES</a>
						<!-- Sub-menu -->	
						<ul>
							<li>
								<a href="#">INSTRUCTORS<a>
							</li>
						</ul>
						
					</li>
					
					<li>
						<a href="#" id="contact">CONTACT</a>
					</li>
					
					<li>
						<a href="#" id="blog">BLOG</a>
					</li>
				<ul>
			</nav>
		</header>
		<!-- Seção de conteúdos -->	
		<Section id="Content">
			<!-- Seção de conteúdos para introdução ao site -->	
			<section class="intro">
				<hgroup>
					<h1>YOGA</h1>
					<h2>For Better Health & Flexibility</h2>
				</hgroup>
				
				<img id="lady" src="images/lady-in-yoga.jpg" alt="lady doing yoga">
			</section>
		</section>
	<!-- Rodapé -->	
	<footer>
		<!-- Container genérico, para juntar endereço e copyright -->	
		<div id="address-copy">
			<address>123 St. City Location, Country | 987654321</address>
			
			<p>&copy 2023 by Belle & Carrie Rehabilitation Yoga. All rights reserved.</p>
		</div>
		<!-- Lista de redes sociais -->	
		<ul>
			<li>
				<a href="#" id="facebook">.</a>
			</li>
			
			<li>
				<a href="#" id="twitter">.</a>
			</li>
			
			<li>
				<a href="#" id="googleplus">.</a>
			</li>
			
			<li>
				<a href="#" id="pinterest">.</a>
			</li>
		</ul>
	</footer>
	</section>
</body>
</html>
/*FONTS*/
@font-face{
	font-family: 'NixieOne';
	src: url('../fonts/nixieone-regular-webfont.eot');
	src: url('../fonts/nixieone-regular-webfont.eot?#iefix') format('embedded-opentype'),
			url('../fonts/nixieone-regular-webfont.svg') format('svg'),
			url('../fonts/nixieone-regular-webfont.ttf') format('truetype'),
			url('../fonts/nixieone-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face{
	font-family: 'Lato';
	src: url('../fonts/lato-regular-webfont.eot');
	src: url('../fonts/lato-regular-webfont.eot?#iefix') format('embedded-opentype'),
			url('../fonts/lato-regular-webfont.ttf') format('truetype'),
			url('../fonts/lato-regular-webfont.svg') format('svg'),
			url('../fonts/lato-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
/*SITE BODY*/
body{background-color: #077054;}

a{
	text-decoration:none;
	margin: 0;
	padding: 0;
}

li{list-style-type: none;}

h1, h2{
	margin: 0;
	padding: 0;
}
/*INTERFACE SECTION*/
section#interface{/*Define largura e centraliza a interface (header, content e footer)*/
	width: 960px;
	margin: auto;
}

/*HEADER*/
#principal{/*Centraliza textos e tira margens*/
	text-align: center;
	margin: 0;
}

#principal hgroup{/*Centraliza todos os títulos, em relação a seus próprios containers (horizon x verti)*/
	padding: 25px 45px 30px 45px;	
}

#principal hgroup h1 a{/*Define estilos para os títulos, removendo os estilos padrões da tag <a>*/
	font-family: 'Lato';
	font-size: 50px;
	line-height: 50px;
	color: #99fa99;
}

#principal hgroup h2 a{/*Mesma regras, que o seletor anterior*/
	font-family: 'NixieOne';
	font-size: 26px;
	line-height: 50px;
	color: #b6d8cf;
}

#principal nav ul li{/*Dispõe listas em linhas, com largura definida*/
	background-color: #077054;
	display: inline-block;
	width: 153px;
	margin: 0;
}

#principal nav ul li{/*Posiciona as listas do menu*/
	position: relative;
}

#principal nav ul li ul li{/*Esconde todos sub-menus e formata estilos*/
	display: none;
	left: 0;
	list-style: none;
	margin: 0;
	padding: 11px 0 5px 0;
	position: absolute;
	top: 30px;
}

#principal nav ul li:hover ul li{/*Mostra o sub-menu, quando passa o mouse sobre as <li> que possuem outras listas*/
	display: block;
}

#principal ul a{/*Formata estilo de todos os links, ou seja, todos os itens do menu*/
	margin: 0;
	padding: 0;
	font-family: 'Lato', serif;
	font-size: 18px;
	line-height: 30px;
	color: #b6d8cf;
}

#principal ul a#home{/*Atribui cor diferente ao ítem de menu, atual (Se tivesse "a#classes" este ítem teria cor diferente)*/
	color: #99fa99;	
}

/*CONTENT INTRO*/
Section.intro{/*Define o espaço para uma introdução, sobre o site*/
	background-color: white;
	padding:120px 80px 65px 65px;
}
.intro hgroup{/*Define largura e flutuação à esquerda, para o grupo de títulos*/
	width: 510px;
	float: left; 
}

.intro hgroup h1{/*Formata estilos, impõe background e alinhamento de texto, no centro*/
	background: url(../images/bg-separator.png) no-repeat center bottom;
	color: #21a51e;
	font-family: 'NixieOne';
	font-size: 100px;
	font-weight: normal;
	line-height: 100px;
	margin: 0;
	padding: 0 0 55px;
	text-align: center;
}

.intro hgroup h2{/*Mesmas regras do seletor anterior, porém, aplicadas ao título de segunda hierarquia*/
	color: #21a51e;
	font-family: 'NixieOne';
	font-size: 90px;
	line-height: 100px;
	padding: 43px 0 0;
	text-align: center;
	margin: 0;
}

/*Footer*/
footer{/*Define moldura externa e interna*/
	margin: 0;
	padding: 30px 0 60px 0;
}

footer address{/*Formata estilos do texto de endereço e modura externa*/
	font-style: normal;
	font-family: 'Lato';
	font-size: 26px;
	line-height: 14px;
	color: #99fa99;
	margin: 0;
}

footer p{/*Formata estilo do texto de copyright e modura externa*/
	font-family: 'Lato';
	font-size: 12px;
	line-height: 30px;
	color: #b6d8cf;
	margin: 0;
}

footer div#address-copy{/*Dispõe a divisória em flutuação à esquerda, em bloco*/
	display: block;
	float: left;
	margin: 0;
}

footer a#facebook{/*Formata tamanho, background e moldura externa de uma das redes sociais*/
	background: url(../images/icon-facebook.png) no-repeat;
	display: block;
	width: 16px;
	height: 30px;
	margin: 0 20px 0 0;
	float: left;
}

footer a#twitter{/*Formata tamanho, background e moldura externa de uma das redes sociais*/
	background: url(../images/icon-twitter.png) no-repeat;
	display: block;
	width: 37px;
	height: 30px;
	margin: 0 20px 0 0;
	float: left;
}

footer a#googleplus{/*Formata tamanho, background e moldura externa de uma das redes sociais*/
	background: url(../images/icon-googleplus.png) no-repeat;
	display: block;
	width: 32px;
	height: 32px;
	margin: 0 20px 0 0;
	float: left;
}

footer a#pinterest{/*Formata tamanho, background e moldura externa de uma das redes sociais*/
	background: url(../images/icon-pinterest.png) no-repeat;
	display: block;
	width: 30px;
	height: 30px;
	margin: 0;
	float: left;
}

footer ul{/*Faz lista de redes sociais flutuarem à esquerda, com margem externa neutra*/
	float: right;
	margin: 0;
}

footer li{/*Dispõe a lista de redes sociais, em linha*/
	display: inline;
	margin: 0;
}


Espero respostas. Valeu!

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Joao_Lucaas Sim, nada melhor do que por a mão na massa para aprender.  Além de refazer do zero para aprender, é bom você usar a inspeção de elemento do chrome(F12). Aí podes analisar o código.

 

Sobre seu código, está ótimo. Só duas coisas que eu mudaria.

 

Por exemplo a seção de conteúdos.  Você pode alterar aquele <section> para <article>  e dentro dele usar o <section> para separar.

Por exemplo:

<!-- Seção de conteúdos -->	
<article id="Content">
	<!-- Seção de conteúdos para introdução ao site -->	
	<section class="intro">
		<hgroup>
			<h1>YOGA</h1>
			<h2>For Better Health & Flexibility</h2>
		</hgroup>		
		<img id="lady" src="images/lady-in-yoga.jpg" alt="lady doing yoga"/>
	</section>
</article>

 

Outra coisa que mudaria é a <ul> dentro do menu.

O elemento <nav> é específico para menus, então ele elimina a necessidade de usar os elementos de lista não ordenada.

Com isso você pode fazer seu menu assim:

 

<nav>
  <a href="link.html">Link 1</a>
  <a href="link.html">Link 2</a>
  <a href="link.html">Link 3</a>
  <a href="link.html">Link 4</a>
  <a href="link.html">Link 5</a>
</nav>  

Esta técnica é chamada  de Listless.  Da mesma forma que o Tableless(estrutura sem tabelas)

Nativamente, ele deixa lado a lado( horizontal) Exemplo: https://jsfiddle.net/c2mu5dow/ 

Repare que não usei nenhum CSS. o menu ficou na horizonal.

 

Mas ele não permite alterar o tamanho do elemento setando o width e height. Para isso deves informar o display para inline-block!

 

exemplo: https://jsfiddle.net/c2mu5dow/1/

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Vou tomar as medidas para utilizar o que você falou. Vou esperar e ver se mais alguém tem opiniões.

Obrigado pela ajuda, dif!

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Joao_Lucaas Não necessariamente "deve" usar a técnica listless. vai tudo tipo que está fazendo.

Se é um menu simples sem dropdown,   sim é melhor não usar listas não ordenadas.  Se é um menu mais complexo com mais de um nível aí o melhor jeito é fazer com listas mesmo.

 

Contudo,  dá para fazer  usando Div e posicionamento no css. Talvez seja possível até uma intervenção de javascript para orientar o tal efeito. 

 

é errado usar listas no menu? Não.

é errado usar a tecnca listless em menus? não.

Eu apenas falei para você tomar ciência que existe dois jeitos de fazer menus. Simples e complexos. 

Por exemplo em um dos meus sites que estou desenvolvendo usei a técnica listless para fazer o menu. Mas em outro usei listas porque tinha vários níveis, então a lista facilita um pouco na manipulação de elementos no menu para os níveis.

 

Isso serve também para criação de sites com a técnica tableless. é errado fazer sites sem tabela? Não!

e sites estruturados com tabelas? Também não! 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Obrigado por participarem!

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

×