Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
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!

Editado por dif
Alterar o bloco CODE do css para tipo CSS. Repare que ao selecionar a linguagem CSS para postar o código ele fica colorido quando é um css. isso vale para o php, javascript html!

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/

 

Editado por dif
  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • Autor do tópico
  • 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
  • Autor do tópico
  • 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






    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

    ×