Curso de HTML5 e CSS3 Responsivo Aula 04 Adicionando topo e logotipo no site

Agora que já criamos e configuramos a estrutura da nossa pagina inicial os seja nosso arquivo index e criamos e já utilizamos a nossa folha de estilos, vamos começar a dar vida ao site, aprenderemos nessa vídeo aula como chamar classes através da tag div, chamar mais de uma classe, criaremos o topo do nosso site com cor de fundo e adicionaremos o logotipo.

  • A tag <div> define uma divisão ou uma seção em um documento HTML. É usada geralmente para fazer blocos de elementos, dispondo organizadamente as informações dentro do layout, que são formatadas com CSS. A tag <div> é controlada pela CSS através de uma Class

Código do topo escrito na vídeo aula

        <div class="corpo verde">
            <header class="conteudo">
                <img src="imagens/logo.png" alt="Bobrinha Treinamentos" title="Bobrinha Cursos" class="logo"/>
            </header>
        </div>

O elemento HTML <header> representa um grupo de suporte introdutório ou navegacional. Pode conter alguns elementos de cabeçalho, mas também outros elementos como um logo, seções de cabeçalho, formulário de pesquisa, e outros.

Cuidado para não confundir com a tag <head>, que serve para informar características da página.

Código da imagem escrito na vídeo aula

<img src="imagens/logo.png" alt="Bobrinha Treinamentos" title="Bobrinha Cursos" class="logo"/>
  • O atributo alt,serve para oferecer um texto,caso uma imagem não apareça ou não possa ser visualizada.Esse atributo aumenta a acessibilidade do site,porque os leitores de tela usam esses textos (os que estão dentro do alt) para "ler" a imagem.
  • O atributo title serve você dar um título para sua imagem, uma explicação em texto sobre aquela imagem, um rótulo ou legenda.
/*CORPO*/
.corpo {
	width: 100%
}

/*CONTEUDO*/
.conteudo {
	max-width: 1280px;
	width: 80%;
	margin: 0 auto;
	padding: 5px
}

/*LOGO*/
.logo {
	width: 200px;
	height: 150px
}

/*CORES*/
.verde {
	background: #609E1B;
	color: #FFF
}

Conheça o projeto final do site desenvolvido no curso
http://www.bobrinha.com/exemplos/html5css3/projeto1

Download dos arquivos usados no site
http://www.bobrinha.com/exemplos/html5css3/projeto1.zip



Hospedagem Profissional de Sites