Site com HTML e CSS

E para dar continuidade ao nosso curso grátis, finalmente é chegada a hora de criarmos nosso primeiro site com HTML e CSS. Vamos colocar em prática a maioria das coisas que você aprendeu ao longo das 4 aulas anteriores, além de falar sobre mais algumas coisas que ainda não foram discutidas.

Na introdução das aulas desse curso, falamos sobre a estrutura HTML e mais alguns detalhes que introduziram você no mundo do desenvolvimento. Logo em seguida, na segunda aula, você viu sobre a maioria das tags HTML que estão disponíveis para sua utilização. Na terceira aula fizemos uma introdução ao CSS combinado com HTML. Na penúltima aula (a quarta) falamos sobre a maioria das propriedades CSS que você pode aplicar em suas tags HTML para atingir um objetivo maior.

Mas e agora? Como colocar tudo isso junto para criar seu próprio site?

Simples! Vamos criar um site bem básico e ir explicando o motivo da utilização das tags HTML e certas propriedades CSS para estilizar as mesmas.

Nosso layout básico

Seguindo um padrão bastante antigo no mundo do desenvolvimento, vamos iniciar criando um modelo básico e com largura fixa para manter as coisas simples.

Nosso layout terá largura de 960px no elemento geral da página. O que passar disso dará espaço para uma imagem de fundo (background) fixa.

Nele temos os seguintes elementos:

- Cabeçalho
    - Logo (Esquerda)
        - Link para a home do site
    - Pesquisa (Direita)
 - Menu
    -Lista de links do site
- Corpo
    - Artigos
        - Espaçamento
            - Conteúdo
    - Barra lateral
        - Espaçamento
            - Conteúdo
- Rodapé
    - Texto centralizado

Ou se preferir visualizar isso graficamente, a imagem abaixo detalha melhor o nosso exemplo:

Nosso primeiro layout

Não vamos estilizar tudo completamente, pois, isso geraria um artigo extremamente gigante, por este motivo, nosso site não ficará totalmente agradável aos olhos (leia-se: feio), mas está bom para algo educativo.

A estrutura HTML e de pastas

Como eu disse na introdução desse curso, a estrutura HTML é obrigatória para qualquer documento, então vamos relembrar:

Arquivo HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">

		<link rel="stylesheet" type="text/css" href="meuestilo.css">

		<title>Título</title>
	</head>
	
	<body>
		Tags do atenção
	</body>
</html>

Arquivo CSS (meuestilo.css)

/* Meu CSS */

Isso mesmo, apagamos tudo o que estava em ambos os arquivos para começarmos do zero.

Coloque ambos dentro de uma pasta qualquer e vamos começar a alterar.

Curso de html - estrutura da pasta

Observação: Meu arquivo não tem a extensão “.html” e sim “.php“, mas não altere o seu, continue com a extensão “.html“.

Depois de termos as estruturas prontas e o arquivo CSS “linkado” no <head> do arquivo HTML:

<link rel="stylesheet" type="text/css" href="meuestilo.css">

Estamos prontos para começar a escrever nosso site.

Observação importante: De agora em diante só vamos trabalhar com o arquivo CSS e tags dentro das tags <body> e <body> do nosso arquivo HTML.

Exemplo do arquivo HTML:

Tags no body

Exemplo do arquivo CSS:

CSS

CSS Reset

Todos os navegadores já têm estilos definidos para a maioria das tags HTML, por este motivo, devemos “zerar” estes estilos para que eles não nos atrapalhem posteriormente. Este processo é conhecido como CSS Reset.

Existem milhares de maneiras de zerar o CSS do navegador, no entanto, em nosso tutorial vamos zerar apenas as margens que o navegador tem no elemento <body>.

Então as primeiras linhas do nosso CSS são:

/* Meu CSS */
body,
html{
	margin:  0; 
	padding: 0;
	font-size:18px;
}
body{
	background:#ccc url(https://www.cssauthor.com/wp-content/uploads/2013/07/Blurred-Background_2.jpg) center top no-repeat;
	background-size:100%;
	background-attachment:fixed;
}

Ou seja, na primeira parte, selecionamos “body” e “html” e configuramos as propriedades, margin:0; (nada de margem), padding:0; (nada de enchimento); font-size:18px; (fonte padrão em caso de omissão será 18px).

Configurando a imagem de fundo

Na segunda parte, configuramos uma imagem de fundo para o elemento body, ou seja, background: #cor_html url(endereço_da_imagem) centro topo sem-repetir;.

Na segunda propriedade, em background-size:100%;, dissemos ao navegador para expandir a imagem para o tamanho da tela em qualquer resolução, ou seja, a imagem de fundo sempre vai ocupar a tela inteira.

Na terceira propriedade, background-attachment:fixed;, apenas dissemos para o navegador que a imagem não deve rolar com a página, ou seja, ela é fixa.

Configurando os links e imagens

Repare no trecho a seguir:

a, a img{
	text-decoration:none;
	border:none;
}
img{
	max-width:100%;
	height:auto;
}

Na primeira parte, selecionamos “a” e “a img”, ou seja, todos os elementos <a> e todos os elementos <a><img></a>. Em seguida dissemos ao navegador que tais links não têm decoração e nem borda.

Na segunda parte, selecionamos as imagens com “img” (todos os elementos <img>), depois instruímos o navegador que as imagens terão largura máxima de 100%. Isso quer dizer que se uma imagem estiver dentro de uma tag que tenha sua largura configurada para 100px, não importa o tamanho da imagem, sua largura máxima será 100px sempre.

A propriedade “height:auto;” ajusta a altura das imagens relacionando-as com sua largura, assim as imagens não ficarão distorcidas quando redimensionadas.

Nossa DIV principal

Observação: Vamos mexer no arquivo HTML.

Para que nosso site tenha a largura máxima de 960px, devemos criar um elemento dentro das tags <body> e </body> para envolver todas as outras DIVs. Tal DIV deverá ser a DIV principal, ou seja, todas as outras DIVs estarão dentro dela:

<div class="principal">
</div>

Dentro dessa DIV, vamos criar mais quatro DIVs, que serão as quatro sessões que queremos: Cabeçalho, Menu, Corpo e Rodapé.

<div class="principal">
	<div class="cabecalho">
	
	</div>
	<div class="menu">
	
	</div>
	<div class="corpo">
	
	</div>
	<div class="rodape">
	
	</div>
</div>

Agora vamos tratar cada uma dessas DIVs individualmente.

Cabeçalho (HTML)

Vamos inserir uma outra DIV (logo-cabecalho) e um link para a home do blog dentro dessa DIV. Além disso, vamos inserir uma outra DIV para sustentar um campo de pesquisa.

<div class="cabecalho">
	<div class="logo-cabecalho">
		<a href="./">Meu blog pessoal</a>
	</div>
	
	<div class="pesquisa">
		<input type="text" />
		<input type="submit" value="Pesquisar" />
	</div>
</div>

Menu (HTML)

Dentro da DIV “menu”, vamos criar uma lista com links necessários para o site:

<ul>
	<li> <a href="#">Início</a> </li>
	<li> <a href="#">Artigos</a> </li>
	<li> <a href="#">Contato</a> </li>
</ul>

Depois acertaremos essa lista no CSS.

Corpo (HTML)

Dentro da DIV corpo, vamos colocar duas DIVs principais, uma para os artigos do site, e outra para barra lateral:

<div class="corpo">
	<div class="artigos">

	</div>
	<div class="barra-lateral">

	</div>
</div>

Dentro de ambas, “artigos” e “barra-lateral”, teremos mais uma DIV chamada de “espacamento”. Todo o conteúdo virá dentro dessa última.

<div class="corpo">
	<div class="artigos">
		<div class="espacamento">
                     Conteúdo da DIV.
		</div>
	</div>
	<div class="barra-lateral">
		<div class="espacamento">
                     Conteúdo da DIV.
		</div>
	</div>
</div>

Rodapé (HTML)

Dentro do rodapé, teremos apenas um texto simples:

<div class="rodape">
	Tutsup - Curso de HTML Grátis
</div>

Arquivo HTML completo:

Já adicionamos todo o texto e imagens de conteúdo de todas as DIV dentro da estrutura que acabei de passar para você. O arquivo HTML completo ficou assim:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">

		<link rel="stylesheet" type="text/css" href="meuestilo.css">

		<title>Curso de HTML Grátis - Primeiro layout</title>
	</head>

	<body>
		<div class="principal">
			<div class="cabecalho">
				<div class="logo-cabecalho">
					<a href="./">Meu blog pessoal</a>
				</div>
				
				<div class="pesquisa">
					<input type="text" />
					<input type="submit" value="Pesquisar" />
				</div>
			</div>
			<div class="menu">
				<ul>
					<li> <a href="#">Início</a> </li>
					<li> <a href="#">Artigos</a> </li>
					<li> <a href="#">Contato</a> </li>
				</ul>
			</div>
			<div class="corpo">
				<div class="artigos">
					<div class="espacamento">
						<h1>Artigos</h1>
						<p>
							<img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Abstract_on_Nature_%281038152891%29.jpg" />
						</p>
						<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut posuere tortor sit amet purus feugiat, ac viverra est pretium. Pellentesque lobortis, ante tempus tristique scelerisque, felis tellus ornare sem, vitae sodales diam lorem sed urna. Duis iaculis augue id sapien tincidunt, vitae rutrum enim mollis. Aenean eu eleifend erat, in laoreet sapien. Proin accumsan vel sem a facilisis. Suspendisse at lacinia metus. Nulla consequat suscipit tincidunt. Duis scelerisque, tortor nec molestie pretium, diam mauris fermentum orci, non laoreet dolor augue et nulla. Fusce ullamcorper mi vel urna pharetra, ut commodo leo gravida. Nam orci nisl, tristique vitae elit sit amet, fermentum mattis nisi. Etiam pretium, nulla eget tincidunt vestibulum, dolor purus malesuada mi, eget pretium ligula ante sed nisi.
						</p>
						<p>
						Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam elementum nec urna nec dictum. Ut eget leo sit amet metus congue auctor. Nulla id malesuada magna. Curabitur eleifend pharetra mauris vel viverra. Nunc convallis nisi purus, eget ornare risus lacinia et. Nunc leo nisl, cursus vitae leo ut, vehicula vulputate nisl. Donec placerat, sem eget scelerisque lobortis, ligula ante sagittis neque, vel tristique augue urna et massa. Aenean et elit facilisis, hendrerit nibh a, sagittis sapien. Etiam vestibulum nulla vel sem vehicula cursus. Sed fermentum sem lorem, sed imperdiet nibh bibendum eu. Morbi eu faucibus quam.
						</p>
						<p>
						Donec in tristique sem, vitae sollicitudin odio. Morbi volutpat lectus ut libero vulputate, eget iaculis quam vestibulum. Morbi eleifend urna non purus facilisis malesuada. Sed eget lobortis eros. In sodales justo mollis lacus scelerisque bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet dui quis ante cursus vestibulum. Donec nec purus varius nisl rutrum aliquet eu ut nibh. Mauris aliquet massa nec malesuada sagittis. Aenean id auctor urna. Etiam auctor facilisis nisl at laoreet. Morbi a accumsan neque. Mauris interdum augue nec turpis facilisis, in gravida lacus cursus. Vestibulum dignissim et velit in accumsan.
						</p>
						<p>
						Maecenas felis felis, euismod sed est nec, sodales fermentum felis. Fusce suscipit felis sapien, non tristique turpis vulputate at. Vivamus elementum sem in diam porttitor eleifend. Ut sed sapien id lacus sagittis interdum. Praesent lobortis sollicitudin imperdiet. Donec et accumsan ligula, quis ultrices augue. Nam fringilla adipiscing odio, sit amet auctor quam viverra quis. Curabitur hendrerit facilisis diam a lobortis.
						</p>
						<p>
						Vestibulum id magna nulla. Quisque libero lorem, rhoncus ut nulla sit amet, rhoncus elementum nunc. Suspendisse eget porttitor ante. Morbi facilisis nulla a viverra posuere. Phasellus aliquam diam ut nunc varius, ut fringilla enim commodo. Nunc blandit eu erat vel dignissim. Ut interdum faucibus vehicula. Nullam pulvinar dignissim arcu tempus suscipit.
						</p>
			
					</div>
				</div>
				<div class="barra-lateral">
					<div class="espacamento">
						<h2>Barra lateral</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut posuere tortor sit amet purus feugiat, ac viverra est pretium. Pellentesque lobortis, ante tempus tristique scelerisque, felis tellus ornare sem, vitae sodales diam lorem sed urna. Duis iaculis augue id sapien tincidunt, vitae rutrum enim mollis. Aenean eu eleifend erat, in laoreet sapien. Proin accumsan vel sem a facilisis. Suspendisse at lacinia metus. Nulla consequat suscipit tincidunt. Duis scelerisque, tortor nec molestie pretium, diam mauris fermentum orci, non laoreet dolor augue et nulla. Fusce ullamcorper mi vel urna pharetra, ut commodo leo gravida. Nam orci nisl, tristique vitae elit sit amet, fermentum mattis nisi. Etiam pretium, nulla eget tincidunt vestibulum, dolor purus malesuada mi, eget pretium ligula ante sed nisi. </p>
						<p>
							<img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Abstract_on_Nature_%281038152891%29.jpg" />
						</p>
						<p>
							<img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Abstract_on_Nature_%281038152891%29.jpg" />
						</p>
						<p>
							<img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Abstract_on_Nature_%281038152891%29.jpg" />
						</p>
					</div>
				</div>
			</div>
			<div class="rodape">
				Tutsup - Curso de HTML Grátis
			</div>
		</div>
	</body>
</html>

Se quiser, copie e cole no seu.

Nosso arquivo CSS

Agora vamos analisar nosso arquivo CSS por partes, em seguida passo seu conteúdo completo.

Principal (CSS)

Vamos analisar o trecho abaixo:

.principal{
	width: 960px;
	color: #444;
	margin: 0 auto;
	font-family:sans-serif;
}

Como descrevi anteriormente, nossa DIV principal terá 960px de largura, atingimos este objetivo com a propriedade “width” do CSS. Em seguida, com a propriedade “color”, utilizamos a tabela de cores HTML para definir que a maioria dos elementos que herdam propriedade tenham a cor #444 (cinza escuro).

A propriedade “margin”, quando recebe o valor “0 auto”, indica que o topo e a parte inferior da DIV principal não terão margem (0), mas a lateral direita e esquerda serão automáticas (auto), isso faz com que o elemento fique centralizado no meio da tela.

Por fim, adicionamos a propriedade “font-family” com o valor “sans-serif”. Simplesmente modificamos a fonte padrão de todos os elementos que estão dentro da DIV “principal”, ou seja, todos os elementos.

Cabeçalho (CSS)

.cabecalho{
	height:100px;
}
.logo-cabecalho{
	float:left;
}
.logo-cabecalho a{
	font-size:50px;
	font-style:italic;
	text-decoration:none;
	color:#000;
	display:block;
	padding:20px 0 0 0;
}
.pesquisa{
	float:right;
	margin-top:40px;
	margin-right:10px;
}

Primeiramente indicamos ao navegador que o cabeçalho terá 100px de altura (height).

Em seguida fizemos a DIV “logo-cabecalho” flutuar para a esquerda (float:left;). Quando um elemento tem a propriedade float, tanto para a direita quanto para a esquerda, configurada, isso indica que ele vai encostar na margem do elemento que o envolve e liberar o espaço lateral para que outros elementos possam o cercar. Resumindo, ele simplesmente pende para o lado que queremos e só ocupa a sua largura no documento, qualquer elemento posicionado ao seu lado irá seguir o fluxo do documento.

Depois utilizamos um seletor que você ainda não viu. Na verdade selecionamos um elemento dentro de outro com:

.logo-cabecalho a{}

Isso indica que vamos alterar as propriedades de todos os elementos <a> que estão dentro da DIV “logo-cabecalho”.

Depois alteramos várias propriedades que você já viu em aulas anteriores.

Para a “pesquisa”, indicamos ao navegador para flutuar o elemento para a direita (na mesma linha da “logo-cabecalho”). Por fim configuramos a margem do topo e da direita do elemento com alguns pixels.

Menu (CSS)

Os elementos <ul> <li> </li> </ul> geram uma lista como mostro abaixo:

  • Primeiro item (li)
  • Segundo item (li)

Por isso devemos “zerar” o CSS que o navegador inclui em tais elementos para que eles sejam posicionados um do lado do outro sem as marcações laterais:

.menu{
	background:#125103;
}
.menu ul li, 
.menu ul{
	margin:0;
	padding:0;
	list-style:none;
}
.menu ul li{
	display:inline-block;
}
.menu ul li a{
	display:block;
	color:#fff;
	padding:13px 20px;
}

A parte que zera o CSS do navegador é a seguinte:

.menu ul li, 
.menu ul{
	margin:0;
	padding:0;
	list-style:none;
}

Em seguida modificamos o modo em que o elemento é exibido para “inline-block”, ou seja, um bloco em linha:

.menu ul li{
	display:inline-block;
}

Depois configuramos os elementos <a> dentro dos elementos <li> com:

.menu ul li a{
	display:block;
	color:#fff;
	padding:13px 20px;
}

O resultado é um menu como você tem costume de ver em vários sites da internet.

Corpo (CSS)

O corpo têm o CSS bem mais avançado que os outros elementos:

.corpo{
	position:relative;
	overflow:hidden;
}
.artigos{
	float:left;
}
.artigos, .artigos:before{
	width:70%;
}
.artigos:before{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	background:#fff;
	z-index:-1;
	content:'';
}
.barra-lateral{
	float:right;
}
.barra-lateral, .barra-lateral:before{
	width:30%;
}
.barra-lateral:before{
   content: '';
    position: absolute;
    top: 0;
    bottom: 0;
	right:0;
    z-index: -1;
    background: #f1f1f1;
}
.espacamento{
	padding:20px;
}

Na primeira parte, temos o seguinte:

.corpo{
	position:relative;
	overflow:hidden;
}

A propriedade “position: relative;” indica que todos os elementos que estão dentro do “corpo” que têm a propriedade “position: absolute;” configuradas, serão alinhados nas bordas do corpo. Se você não configurar esta opção, os elementos internos dessa DIV configurados com “position: absolute;” não respeitarão a margem do elemento “corpo”.

A segunda opção, “overflow:hidden”, serve para que o elemento “corpo”, entenda o seu tamanho ao tamanho de seus elementos internos e preencha todo seu espaço. Também chamamos isso de “Clearfix”.

Para a parte de artigos:

.artigos{
	float:left;
}
.artigos, .artigos:before{
	width:70%;
}
.artigos:before{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	background:#fff;
	z-index:-1;
	content:'';
}

Indicamos que os artigos irão flutuar para a esquerda e terão 70% da largura da DIV “corpo”. Em seguida utilizamos um outro seletor (:before), que vamos explicar em outra aula.

Para a barra lateral:

.barra-lateral{
	float:right;
}
.barra-lateral, .barra-lateral:before{
	width:30%;
}
.barra-lateral:before{
   content: '';
    position: absolute;
    top: 0;
    bottom: 0;
	right:0;
    z-index: -1;
    background: #f1f1f1;
}

Fizemos o mesmo que fizemos em artigos, no entanto, ela tem 30% de largura e flutua para a direita.

Por fim, colocamos um enchimento (padding) na DIV “espacamento” apenas para distanciar seus elementos da borda do documento.

.espacamento{
	padding:20px;
}

Rodapé (CSS)

O rodapé tem um espaçamento de 20px no topo e na parte inferior, e alinha o texto ao centro:

.rodape{
	padding:20px;
	text-align:center;
}

Nosso arquivo CSS completo:

O arquivo CSS completo ficou assim:

/* Meu CSS */
body,
html{
	margin:  0; 
	padding: 0;
	font-size:18px;
}
body{
	background:#ccc url(https://www.cssauthor.com/wp-content/uploads/2013/07/Blurred-Background_2.jpg) center top no-repeat;
	background-size:100%;
	background-attachment:fixed;
}
a, a img{
	text-decoration:none;
	border:none;
}
img{
	max-width:100%;
	height:auto;
}
.principal{
	width: 960px;
	color: #444;
	margin: 0 auto;
	font-family:sans-serif;
}
.cabecalho, 
.logo, 
.rodape,
.menu{
	width:100%;
	display:block;
	clear:both;
}
.cabecalho{
	height:100px;
}
.logo-cabecalho{
	float:left;
}
.logo-cabecalho a{
	font-size:50px;
	font-style:italic;
	text-decoration:none;
	color:#000;
	display:block;
	padding:20px 0 0 0;
}
.pesquisa{
	float:right;
	margin-top:40px;
	margin-right:10px;
}
.menu{
	background:#125103;
}
.menu ul li, 
.menu ul{
	margin:0;
	padding:0;
	list-style:none;
}
.menu ul li{
	display:inline-block;
}
.menu ul li a{
	display:block;
	color:#fff;
	padding:13px 20px;
}
.corpo{
	position:relative;
	overflow:hidden;
}
.artigos{
	float:left;
}
.artigos, .artigos:before{
	width:70%;
}
.artigos:before{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	background:#fff;
	z-index:-1;
	content:'';
}
.barra-lateral{
	float:right;
}
.barra-lateral, .barra-lateral:before{
	width:30%;
}
.barra-lateral:before{
   content: '';
    position: absolute;
    top: 0;
    bottom: 0;
	right:0;
    z-index: -1;
    background: #f1f1f1;
}
.espacamento{
	padding:20px;
}
.rodape{
	padding:20px;
	text-align:center;
}

O resultado final

O resultado final de tudo isso é o demo abaixo:

Como eu disse, o site ficou bem feio, mas é só para você entender como utilizamos tags HTML em conjunto com CSS.

Concluindo

A princípio pode parecer bem complicado, mas, vai por mim, não é.

Recomendo que leia todas as outras aulas e todas as dicas e demonstrações que criamos. Logo, logo você entende tudo perfeitamente. Além disso, este curso vai ficar online e gratuito por tempo indeterminado, portanto, se tiver dúvidas, basta perguntar nos nossos comentários.

Todas as aulas

Veja todas as aulas do curso:

Lembre-se de seguir nosso blog. Postamos todos os nossos novos artigos no Google Plus, Twitter e Facebook. Além disso, enviamos artigos por e-mail, basta se inscrever. Fique sempre por dentro de nossos tutoriais.