O documento discute as tags Div e Span no HTML, explicando como elas podem ser usadas para dividir uma página em seções e estilizar partes de texto, respectivamente. Também aborda como personalizar links no CSS de acordo com seu estado.

1. HTML 4.1 - Aula 13
Canal Effeccinco

2. Revisão da Aula Anterior
 Aprendemos a colocar espaçamento entre linhas
 Aprendemos o que é modelo de caixa
 Personalizar nossas bordas
 Colocar espaçamentos
 Colocar Margem
 Colocar plano de Fundo
 Aprendemos a diferença entre Classe e ID.

3. Conteúdo dessa Aula
 Você já ouviu falar em Div e Span
 Bom agora com esses conceitos nós deixamos de ser programadores de Html
Básicos para sermos desenvolvedores Avançados, isso mesmo depois dessa
aula começamos a ser experts no assunto, e já sabe o que vamos aprender né?
 DiV e Span
 Então se preparem.

4. Aprendendo Div
 Antes de mais nada você sabe o que significa essa tag, Div vem do Inglês
Division ou seja divisão, isso mesmo com essa tag nós podemos dividir a nossa
página Html em várias partes, isso ajuda muito na hora de deixar o design da
nossa página muito mais simples, robusto e moderno.
 Para dividir a sua página em sessões, que é como as páginas trabalham até
agora na nossa atualidade, você tem que colcor a tag de abertura e
fechamento da divisão veja:
 <div> </div>

5. Divs
 Para deixar ainda mais aquela divisão única você pode colocar um id que a
identifique como um grupo de informações.
 Feito isso é hora de mudar o estilo da sua divisão ou sessão como você
preferir chamar, e personalizar ainda mais para que ela fique parecida com o
que você deseja fazer na sua página da internet.
 Perceba que já estamos ficando craques nisso, por isso já se considere um
desenvolvedor HTML avançado.

6. Elementos Spans
 Os elementos span permitem separar os elementos em linha isso é útil quando
você quer aplicar um estilo a alguma parte do seu site, mas não quer gerar
uma quebra de linha, veja como é simples adicionar um elemento desses na
sua página:
 <span>
 </span>
 Muito Simples

7. Personalizando seus links no CSS
 Você sabia que você pode personalizar ainda mais os seus links com a ajuda
do CSS?, e você pode fazer isso de acordo com o estado daquele link, você
pode deixa-lo verde por exemplo se ele nunca foi clicado, ou melhor, deixar
ele vermelho se ele já foi visitado, ou fazer com que ele mude de cor quando
o mouse é passado em cima dele, para isso você os três comandos abaixo no
CSS:
 A:link{color: green;}
 A:visited{color: red;}
 A:hover{color: Orange;}

8. Quer saber mais sobre html?
 Quer ver na prática como funciona esse conteúdo , assista a essa vídeo aula no
youtube:
 https://www.youtube.com/watch?v=ormuatdty7Q
 Quer aulas sobre HTML, veja nosso Canal no Youtube, nos assista, curta e
compartilhe:
 https://www.youtube.com/channel/UC7FWW7I5ZW5T9V7dQnEtD7A/feed
 Acesse o nosso Blog, e confira matérias mais completas.
 www.effeccinco.wix.com/effeccinco

9. Referências
 Livro: Use a Cabeça HTML, CSS e XHTML, 2º
Edição, Editora Alta Books, Elisabeth Freeman &
Eric Freeman. Capítulo 1 – Comece a entender o
HTML.
 SHARMA, Vivek. SHARMA, Rajiv. Desenvolvendo
Sites de e-Commerce. São Paulo: Makron Books,
2001, 598 p.