0% acharam este documento útil (0 voto)

16 visualizações27 páginas

Aula 08 HTML-CSS

O documento aborda a organização de HTML e CSS, enfatizando a separação do CSS externo para melhor manutenção e a utilização do Notepad++. Ele também explora propriedades de exibição e posicionamento de elementos, como FLOAT, CLEAR, CURSOR, DISPLAY e VISIBILITY. Além disso, apresenta exercícios práticos para aplicar os conceitos aprendidos na criação de um site fictício chamado 'HOSPEDAGEM CENTRAL'.

Enviado por

eliezerlimaneves22

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

16 visualizações27 páginas

Aula 08 HTML-CSS

Enviado por

eliezerlimaneves22

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 27

8.

Organizando o HTML e o CSS e utilizando formas de exibição,

posicionamento de elementos e trabalhando com o Notepad++.

Nesta aula vamos aprender a separar o CSS do HTML, para uma melhor organização do projeto.

As formas de exibição permitem alterar o formato do ponteiro do mouse e ativar propriedades que necessitam
de propriedades específicas.

O posicionamento de elementos permite fixar um elemento ou definir uma determinada coordenada.

Notepad++ é o um programa que facilita a programação para qualquer linguagem de programação.

Com o uso destes recursos, iremos aprimorar os nossos projetos.

8.1. CSS EXTERNO

O CSS vindo de um arquivo é a forma mais recomendada, pois o nosso CSS fica separado do HTML, facilitando
assim até mesmo a manutenção.

Para fazer uso do CSS externo dependemos da seguinte linha de comando nos arquivos HTML.

<link href="caminho-do-arquivo" type="text/css" rel="stylesheet"/>

Esta linha de comando deve ser digitada dentro da tag <HEAD>.

Caminho-do-arquivo é onde devemos indicar qual é o local em que se encontra o arquivo CSS.

Exemplo:

Uma pasta chamada CSS para organização e um arquivo chamado estilo.css

Deve ser escrita dentro das tags <HEAD></HEAD>

A tag LINK possui os seguintes atributos:

HREF indica o endereço do arquivo CSS.

REL determina a relação deste link com a página, o STYLESHEET ou folha de estilos.

TYPE informa o tipo de dados como sendo TEXT/CSS.

8.2. FORMAS DE EXIBIÇÃO

São propriedades que permitem alterar o comportamento dos elementos HTML.

Conhecendo algumas propriedades.

1
FLOAT

Define o alinhamento de um elemento e controla o fluxo de texto ou de outros elementos ao seu redor.

LEFT Posiciona um elemento para o lado esquerdo.

RIGHT Posiciona um elemento para o lado direito.
NONE Remove os valores.

No exemplo acima foram criadas duas áreas, uma na cor verde e outra na cor laranja, e com o FLOAT: LEFT
posicionamos os elementos lado a lado.

Veja o resultado.

Outro exemplo é o uso do FLOAT LEFT E RIGHT.

2
Posicionando um elemento à esquerda e outro à direita.

Neste caso cada elemento foi posicionado em um lado da tela.

Usando o FLOAT: NONE os valores serão removidos.

Veja o exemplo no navegador.

Veja que neste exemplo os elementos estão posicionados um abaixo do outro.

3
CLEAR

Define os lados de um elemento onde não são permitidos elementos flutuantes.

LEFT Evita fluir seu conteúdo à direita de elementos com float: left; permanecendo
abaixo dele.
RIGHT Idem ao “left”, evitando fluir seu conteúdo à esquerda de elementos com float:
right
BOTH Idem “left” e “right”, o conteúdo permanece abaixo de elementos flutuantes
independentemente para que lado flutuem.
NONE Remove os valores.
No exemplo abaixo estamos evitando que os dois elementos fiquem posicionados à direita.

Veja o resultado.

8.3. CURSOR

Esta propriedade permite definir o formato do cursor.

n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help

Veja alguns exemplos.

DEFAULT Cursor padrão do navegador.

POINTER Cursor em forma de mão com o dedo reto.
CROSSHAIR Cursor em forma de cruz.

4
Exemplo com o valor DEFAULT.

Veja o resultado.

Exemplo com o valor POINTER.

Veja o resultado.

Exemplo com o valor CROSSHAIR.

5
Veja o resultado.

8.4. DISPLAY

Define se um elemento deve ser apresentado e a forma de apresentação.

none | inline | block | list-item | run-in | compact | marker | table | inline-table

BLOCK Faz com que o elemento HTML seja renderizado como bloco, ou seja, ativa
as medidas.
INLINE Permite que seja renderizado dentro do bloco na mesma linha.
INLINE-BLOCK Permite que seja renderizado dentro da linha um elemento HTML em bloco.
NONE Faz com que o elemento HTML não seja renderizado.

Exemplo com o valor BLOCK.

6
Veja o resultado.

Acrescentando a propriedade DISPLAY: BLOCK

Veja o resultado.

No resultado acima podemos ver que os valores de largura e altura foram ativados.

Exemplo com o valor INLINE-BLOCK.

Veja o resultado.

7
Como visto no exemplo acima, o inline-block manteve os links na mesma linha em bloco.

8.5. VISIBILITY

Define se um elemento deve ficar visível ou invisível.

HIDDEN O elemento é invisível (mas ainda ocupa espaço)

VISIBLE Valor padrão, o elemento está visível.

Exemplo com o valor VISIBLE E HIDDEN.

Com o valor visible o texto do parágrafo aparece como valor padrão.

8
Exemplo com o valor HIDDEN.

No exemplo acima o texto do parágrafo foi escondido com o valor HIDDEN.

8.6. Posicionamento de elementos (POSITION)

Define a posição de um elemento como estática, relativa, absoluta ou fixa.

Para posicionar seus elementos, você precisa inserir uma coordenada pelas propriedades top, left, right ou
bottom.

Importante: todos os valores de position só trabalham com essas coordenadas.

Position FIXED

Este valor vai posicionar o elemento na coordenada que você definiu. A medida que a página é rolada, o
elemento continua fixo na posição que foi definida.

Exemplo:

Para você poder conferir como esta propriedade funciona, digite o código acima e faça o teste.

9
Veja que a imagem acima mostra a barra na cor preta, e o fundo cinza é a tela que aparece na rolagem da barra
lateral.

Position RELATIVE

Todos os positions precisam de um ponto para iniciar o cálculo da coordenada para assim posicionar o elemento
na tela. Ao contrário do que muitos acham, esse ponto não é o ponto central do elemento, o ponto base é o canto
superior esquerdo do elemento. A partir deste canto, o browser irá calcular a coordenada que você definiu e irá
posicionar o elemento no viewport.

O position relative posiciona o elemento em relação a si mesmo. Ou seja, o ponto zero será o canto superior
esquerdo, e ele começará a contar a partir dali.

Veja o exemplo.

Com o position Relative o elemento já aceita a propriedade left.

Position ABSOLUTE

O Position Absolute é um tanto diferente do Relative. Enquanto o elemento com Position Relative utiliza seu
próprio canto para referenciar sua posição, o elemento com Position Absolute se utiliza do ponto superior esquerdo
de outros elementos. Estes elementos são os parentes dele do elemento com position absolute. Mais
especificamente o pai.

10
Observação:

No caso, se o DIV pai não tivesse position definido, o div filho iria se referenciar pelo BODY mesmo. Se caso o
div pai não tivesse position definido, e se ele também fosse envolvido por outro div com position, o div filho iria se
referenciar por este terceiro div.

Logo, o div com position absolute referencia sua posição pelo div mais próximo que o envolve e que também
tenha um position definido.

Em nosso exemplo todos os elementos possuem o position relative, porem a class valor vai posicionar o
elemento na parte inferior e no canto direito da div vendas.

Veja o exemplo HTML e CSS.

Veja o resultado.

8.7. Notepad++

O Notepad++ é um editor de texto e códigos fonte completo que suporta as mais diversas linguagens de
programação e, sendo assim, uma ótima alternativa ao bloco de notas.

Alguns ajustes que precisam ser feitos antes da digitação.

Para definir a codificação dos caracteres clique no menu Formatar.

11
Para definir a linguagem a ser usada, no caso HTML, clique no menu Linguagem.

Para definir a linguagem CSS clique no menu Linguagem.

Estes são alguns ajustes que devemos executar antes de iniciar o desenvolvimento.

12
8.8. Exercícios de Conteúdo

Olá, seja bem-vindo, a nossa área de exercícios, desenvolvemos uma série de atividades, para que você domine
todo conteúdo abordado nesta aula, é muito importante você fazer todos os exercícios, qualquer dúvida, chame o
seu instrutor.

Observação: Salve os exercícios, se você precisar de orientação, de como localizar sua pasta, converse com seu
instrutor, para que ele lhe crie uma, ou oriente, onde a mesma se encontra.

As imagens estão na pasta Arquivos Auxiliares/Aula8/imagens-passo-a-passo.

Exercício 1:

Este exercício, tem como objetivo, criar um site sobre a fictícia HOSPEDAGEM CENTRAL, onde será criada uma
página com as seguintes áreas. O cabeçalho será fixado ao rolar a página. Alguns elementos serão posicionados
acima de outros. O projeto será desenvolvido dentro da pasta Documentos, na pasta hospedagem-central.

1) Abra o ícone Este Computador, clique duas vezes nesta imagem;

2) Abra a pasta Documentos, clique duas vezes no ícone em destaque;

3) Criaremos neste local, uma pasta chamada hospedagem-central. Clique na pasta em destaque.

4) Pressione a tecla Backspace para apagar o título

5) Digite hospedagem-central e pressione a tecla enter;

6) Pronto! Nossa pasta foi criada, agora clique duas vezes nesta pasta, para abri-la.
7) Criaremos a pasta de imagens. Clique no botão Nova pasta em destaque.

13
8) A pasta foi criada.

Copiando as imagens que serão usadas no exercício.

Abra a pasta Arquivos auxiliares/aula8/imagens-passo-a-passo/ e copie todas as imagens, e cole dentro da

pasta imagens que está dentro da pasta do exercício.

Observação: qualquer dúvida chame o instrutor, para auxiliar na localização desta pasta, que é a origem das
imagens.

9) Crie a pasta CSS para gravar o nosso estilo. Clique no local em destaque.

10) Pressione a tecla Backspace para apagar o título e digite CSS.

11) Veja que a pasta css foi criada.

12) Vamos abrir o Notepad++. Clique no botão Iniciar.

13) Na lista clique em Notepad++

14
Exercício 2:

Este exercício tem como objetivo criar a introdução HTML e a seção HEADER juntamente com o CSS.

1) Com o Notepad++ aberto vamos ajustar algumas configurações antes de usá-lo.

2) Clique no menu Formatar.

3) Na lista que surgiu, clique na opção Codificação em UTF-8, em destaque.

4) Clique no menu Linguagem.

5) Na lista que surgiu, clique na opção H.

6) Na lista ao lado, clique na opção HTML.

15
7) Digite o código abaixo.

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>HOSPEDAGEM CENTRAL</title>
<link href="css/estilo.css" type="text/css" rel="stylesheet"/>
</head>

<body>

<header id="header">
<div id="area-header">
<h1>HOSPEDAGEM CENTRAL</h1>
<nav>
<a href="#">HOME</a>
<a href="#">HOSTING</a>
<a href="#">DOMÍNIO</a>
<a href="#">PÁGINAS</a>
<a href="#">CONTATO</a>
</nav>
</div>
</header>

8) Salvando o arquivo:

9) Clique no menu Arquivo, Salvar como.

16
10) Abra a pasta hospedagem-central.

11) Na caixa Nome digite index e logo após clique no botão Salvar.

12) Criando o arquivo estilo.css

13) Clique no menu Arquivo, Novo.

14) Clique no menu Formatar;

15) Na lista que surgiu, clique na opção Codificação em UTF-8, em destaque;

16) Clique no menu Linguagem;

17) Na lista que surgiu, clique na opção C.

17
18) Na lista ao lado clique na opção CSS em destaque.

19) Clique no menu Arquivo, Salvar como.

20) Na caixa de diálogo que surgiu, abra a pasta css.

21) Na caixa nome digite estilo logo após clique no botão Salvar.

22) Digite o código abaixo referente a introdução e ao elemento HEADER.

*{margin:0; padding:0; list-style:none; text-decoration:none;}

body{background:#EBDCDA;}
#header{width:100%; height:60px; position:fixed; z-index:2; margin:auto; background:#FFF;}
#area-header{width:1000px; height:60px; margin:auto; background:#FFF;}
h1{font:normal 18px verdana; color:#000; float:left; line-height:60px;}
nav{width:430px; float:right;}
nav a{color:#000; font:normal 14px verdana; margin:0 10px; line-height:60px;}
nav a:hover{color:blue;}
#fixa-header{width:100%;height:60px; clear:both;}

18
23) Para conferir como está ficando clique no botão Salvar todos em destaque.

24) Na pasta clique duas vezes no index

25) Veja o resultado.

Exercício 3:

Este exercício tem como objetivo criar a área do BANNER juntamente com o CSS.

1) Acesse o index.

19
2) Digite o código abaixo, na linha 24.

<section id="banner">
<a href="#" id="seta-left"><img src="imagens/seta-left.jpg"/></a>
<div id="ajusta-texto">
<h1>VPS Hosting</h1>
<p>O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão.</p>
<a href="#" id="link-vd">ver detalhes</a>
<div id="circle-desconto"><img src="imagens/10porcento.png"/></div>
</div>
<a href="#" id="seta-right"><img src="imagens/seta-right.jpg"/></a>
</section>
3) Acesse o estilo e digite o código na linha 11.

4) Digite o código abaixo.

/* banner */
#banner{width:100%; height:350px; margin-top:1px; background:red; position:relative;
background:url(../imagens/img1.jpg) no-repeat center; background-size:cover; background-position:center;}
#seta-left{width:44px; height:44px; position:absolute; left:1px; top:150px;}
#seta-right{width:44px; height:44px; position:absolute; right:1px; top:150px;}
#ajusta-texto{width:1000px; height:auto; margin:auto; }
#ajusta-texto h1{font:normal 50px verdana; color:#FFF; float:left; margin-top:50px;}
#ajusta-texto p{font:normal 14px verdana; color:#FFF; float:left; clear:both;}

20
#link-vd{clear:both; font:normal 14px verdana; width:140px; height:38px; display:block;
background:#23AFE3; color:#FFF; text-align:center; position:relative; top:30px; line-height:38px;}
#link-vd:hover{color:yellow;}
#circle-desconto{width:122px; height:122px; position:relative; margin:0 0 0 200px;}
5) Clique no botão Salvar todos.

Veja o resultado. Acesse o navegador e atualize a página.

Exercício 4:

Este exercício tem como objetivo criar a área da barra de INFORMATIVO juntamente com o CSS.

1) Acesse o index.

2) Digite o código na linha 35

3) Digite o código abaixo

21
<p>Procurando qualidade superior</p>
<p>NOME DO DOMÍNIO?</p>
</div>
<div id="ext-dominio">
<div class="dominiovlr">.com<br/>R$ 19,90</div>
<div class="dominiovlr dominiolinha">.org<br/>R$ 21,90</div>
<div class="dominiovlr">.br<br/>R$ 40,00</div>
</div>
<div id="formulario">
<form method="post" action="">
<input type="text" id="inputname" placeholder="Digite o dominio"/>
<select id="selectdominio">
<option>.com</option>
<option>.org</option>
<option>.br</option>
<option>.net</option>
</select>
<input type="submit" value="Buscar" id="inputsubmit"/>
</form>
</div>
</div>
</section>
4) Acesse o estilo.

5) Digite o código na linha 21

/* informativo */
#informativo{width:100%; height:70px; background:#32000C; position:relative;}
#ajuste-info{width:1000px; height:auto; margin:auto;}
#aba-info{width:270px; height:100px; background:#CA0726; position:absolute; top:-40px; padding-
top:40px;}
#aba-info p{font:normal 16px verdana; color:#FFF; text-align:center;}
#aba-info p+p{font:normal 22px verdana; color:#FFF; text-align:center;}
#ext-dominio{width:350px; height:60px; text-align:center; float:left; position:relative; top:5px; left:272px;}
.dominiovlr{font:normal 18px verdana; width:110px; text-align:center; margin-top:10px; color:#FFF;
float:left;}
.dominiolinha{border-left:1px dotted #FFF; border-right:1px dotted #FFF;}
#formulario{width:400px; height:60px; float:right;}

22
#inputname{width:200px; height:20px; float:left; margin-top:20px; padding:5px; color:#FFF;
outline:none; background:none; border:1px solid #FFF;}
#selectdominio{width:100px; height:32px; background:#75001E; float:left; outline:none; margin:20px
2px 0 2px; color:#FFF; border:1px solid #FFF;}
#inputsubmit{width:80px; height:32px; background:none; float:left; margin-top:20px; padding:0px
20px; color:#FFF; border:1px solid #FFF;}

6) Clique no botão Salvar todos

No navegador atualize a página e confira como ficou.

Exercício 5:

Este exercício tem como objetivo criar a área do CONTAINER e FOOTER juntamente com o CSS.

7) Acesse o index.

8) Digite o código na linha 60

9) Digite o código abaixo

23
<section id="container">
<div class="hospedagem">
<h1>HOSPEDAGEM I</h1>
<span id="linha-dashed"></span>
<p>R$ <span id="doze">12</span>,90</p>
<p>
1 site<br/> 5Gb de espaço em disco<br/>
Contas de e-mail<br/> Transferência ilimitada<br/>
Banco de dados<br/> Painel de Controle<br/>
</p>
<a href="#" id="saibamais">Saiba mais</a>
</div>

<div class="hospedagem">
<h1>HOSPEDAGEM II</h1>
<span id="linha-dashed"></span>
<p>R$ <span id="doze">15</span>,90</p>
<p>
1 site<br/> 5Gb de espaço em disco<br/>
Contas de e-mail<br/> Transferência ilimitada<br/>
Banco de dados<br/> Painel de Controle<br/> Scripts modelo
</p>
<a href="#" id="saibamais">Saiba mais</a>
</div>

<div class="hospedagem">
<h1>HOSPEDAGEM III</h1>
<span id="linha-dashed"></span>
<p>R$ <span id="doze">19</span>,90</p>
<p>
1 site<br/> 5Gb de espaço em disco<br/> Contas de e-mail<br/>
Transferência ilimitada<br/> Banco de dados<br/> Painel de Controle<br/>
Scripts modelo<br/> Transferência Ilimitada
</p>
<a href="#" id="saibamais">Saiba mais</a>
</div>

<div class="hospedagem">
<h1>CLOUD HOSTING</h1>
<span id="linha-dashed"></span>
<p>R$ <span id="doze">240</span>,90</p>
<p>
Um ambiente exclusivo com painel de controle e alta performance.
</p>
<a href="#" id="saibamais">Saiba mais</a>
</div>

<figure id="destaque"><img src="imagens/destaque.jpg"/></figure>

</section>

24
<footer id="footer">
<div id="area-footer">
<div id="footer-um">
<h1>RECEBA NOSSA NEWSLETTER</h1>

<input type="submit" value="Buscar" id="inputsubmit-footer"/>

</form>
</div>
</div>

<div id="footer-dois">
<h1>RECEBA NOSSA NEWSLETTER</h1>
<figure id="redesociais">
<a href="#" target="_blank"><img src="imagens/face.png"/></a>
<a href="#" target="_blank" class="margem-icone"><img src="imagens/gplus.png"/></a>
<a href="#" target="_blank" class="margem-icone"><img src="imagens/twitter.png"/></a>
<a href="#" target="_blank"><img src="imagens/youtube.png"/></a>
</figure>
</div>
</div>
</footer>

</body>
</html>
10) Acesse o estilo.

11) Digite o código na linha 35

12) Digite o código abaixo

/* container */
#container{width:1000px; height:955px; background:#FFF; margin:auto; padding-top:1px;}
.hospedagem{width:230px; height:270px; background:#5D4A53; float:left; margin:60px 0 0 15px;
position:relative;}
.hospedagem h1{width:100%; font:bold 20px arial; text-align:center; color:#FFF; margin:5px 0;}
#linha-dashed{clear:both; width:90%; height:5px; display:block; border-bottom:1px dashed #FFF;
margin:auto;}
.hospedagem p{width:100%; font:normal 14px arial; color:#FFF; text-align:center; margin:5px 0;}

25
.hospedagem p+p{text-align:left; margin:15px 10px;}
#doze{font:bold 50px arial; color:#23AFE3;}
#saibamais{width:100%; font:normal 14px arial; color:#FFF; position:absolute; bottom:5px; text-
align:center;}

/* destaque */
#destaque{float:left; margin-top:20px;}

/* footer */
#footer{float:left; width:100%; height:95px; background:#32000C;}
#area-footer{width:1000px; height:auto; margin:auto;}
#footer-um{width:678px; height:70px; float:left;}
#footer-um h1{font:normal 14px verdana; color:#FFF; margin-top:10px;}
#formulario-footer{float:left; width:670px; height:65px;}
#inputname-footer{width:320px; height:20px; float:left; margin-top:10px; padding:5px; color:#FFF;
outline:none; background:none; border:1px solid #FFF;}
#inputsubmit-footer{width:90px; height:32px; float:left; margin:10px 0 0 5px; background:#23AFE3;
border:none;}
#footer-dois{width:320px; height:70px; float:right;}
#footer-dois h1{font:normal 14px verdana; color:#FFF; margin-top:10px;}
#redesociais{width:310px; height:40px; margin-top:15px; float:left;}
.margem-icone{margin:0 5px;}
13) Clique no botão Salvar todos

14) Confira no navegador a página, clique no botão Atualizar.

26
Bom, concluímos aqui os exercícios passo a passo, lembre-se, pratique, essa é a única maneira de aprender,
refaça os exercícios, e qualquer dúvida, chame o instrutor.