Ficha html e css

Agrupamento de Escolas de Tondela Tomaz Ribeiro
1
HTML / CSS
1. Executa o Notepad++ e cria um ficheiro HTLM, com o nome de index.html. Abre o
ficheiro index.html no browser. (Durante o exercício, mantém as duas janelas abertas:
Notepad++ e o browser)
2. No início do documento em HTML, insere o seguinte código:
<!DOCTYPE html>
<html lang="pt-pt">
<meta charset = "UTF-8">
<head>
<title>Pegada Digital</title>
</head>
<body>
<div>
<header>
<p>Curso Profissional - Disciplina de IMEI</p>
</header>
<h1>A Pegada Digital</h1>
<p>A pegada digital diz respeito a tudo o que está na internet, desde o nosso perfil
numa rede social, informação publicada em blogs, discussões em fóruns.</p>
<img src=" pegadadigital.png ">
<p>A pegada digital não depende apenas do que nós publicamos, mas também do
que os outros publicam sobre nós.</p>
<p>Os posts que coloca no blog, as fotografias e comentários que partilha no
Facebook e os ficheiros que guarda na Cloud fazem parte da sua pegada digital.</p>
<p>A pegada digital de cada indivíduo é constituída de duas formas:</p>
<ul>
<li><p>A forma PASSIVA reporta-se ao que os outros colocam sobre cada um
de nós.</p></li>
<li><p>A forma ATIVA diz respeito ao que nós publicamos: blogs, artigos,
fotografias, videos, etc.</p></li>
</ul>
<iframe width="560" height="315" src="https://www.youtube.com/embed/zlM-
YuUQ3Ms" frameborder="3"></iframe>
</div>
<footer>
<p>Desenvolvido por: Paulo Nogueira para a disciplina IMEI - CSS</p>
<footer>
</body>
</html>

2
Guarda o ficheiro no bloco de notas (Ctrl+S) e atualiza o browser (F5) para ver o resultado.
Vamos agora definir as formatações em CSS (dentro da tag <head>).
3. Insere dentro da tag <head> a tag <Style> então escreve o seguinte código (dentro da tag
<style>):
<style>
</style>
4. Para formatar todo o texto associado à tag <h1> vamos escrever o seguinte código
(dentro da tag <style>):
h1 {
font-family: Verdana;
font-size: 32px;
color: red;
font-weight: bold;
text-align: center;
text-shadow: 10px 10px 5px grey;
}
Guarda o ficheiro e visualiza as alterações provocadas.
5. Para formatar todo o texto associado à tag <p> vamos escrever o seguinte código (dentro
da tag <style>):
p {
font-family: verdana;
font-size: 18px;
color: black;
text-align: justify;
padding-left:25px;
padding-right:25px;
}
6. Para formatar o fundo central com um gradiente associado à tag <div> vamos escrever o
seguinte código (dentro da tag <style>):
div.gradiente {
background: linear-gradient(to bottom, orange, white);
width:100%;
height:100%;
}

3
Mas ainda temos que acrescentar o código (a sombreado) dentro da tag <div>:
<div class="gradiente">
7. Para formatar todo o texto associado à tag <p> que vão estar dentro do cabeçalho
vamos escrever o seguinte código (dentro da tag <style>):
p.cabecalho {
font-family: verdana;
font-size: 18px;
color: grey;
text-align: center;
font-weight: bold;
}
Mas ainda temos que acrescentar o código (a sombreado) dentro da tag <p> no
cabeçalho:
<p class="cabecalho">Curso Profissional - Disciplina de IMEI</p>
8. Para formatar todo o texto associado à tag <p> que vão estar dentro do rodapé vamos
escrever o seguinte código (dentro da tag <style>):
p.rodape {
font-family: arial;
font-size: 12px;
color: grey;
text-align: center;
font-weight: bold;
font-style: italic;
}
Mas ainda temos que acrescentar o código (a sombreado) dentro da tag <p> dentro do
rodapé:
<p class="rodape">Desenvolvido por: Paulo Nogueira para a disciplina de IMEI - CSS</p>

4
9. Para formatar cor de fundo na zona do cabeçalho vamos escrever o seguinte código
(dentro da tag <style>:
header {
background: black;
padding: 10px 0px 10px 0px;
}
10. Para formatar cor de fundo na zona do rodapé vamos escrever o seguinte código (dentro
da tag <style>:
footer {
background: black;
padding: 5px 0px 5px 0px;
}
11. Para centrar a imagem temos escrever o seguinte código (dentro da tag <style>):
img.img-center {
display: block;
margin-left: auto;
margin-right: auto;
}
Mas ainda temos que acrescentar o código (a sombreado) dentro da tag <img>:
<img class="img-center" src="pegadadigital.png">
12. Para centrar o vídeo temos escrever o seguinte código (dentro da tag <style>):
iframe.vid-center {
display: block;
margin-left: auto;
margin-right: auto;
}
Mas ainda temos que acrescentar o código (a sombreado) dentro da tag <iframe>:
<iframe class="vid-center" width="560" height="315"
src="https://www.youtube.com/embed/zlM-YuUQ3Ms" frameborder="3"></iframe>

Ficha html e css

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a Ficha html e css (20)

Mais de Paulo Nogueira (17)

Último (6)

Ficha html e css