Baixado 32 vezes
Carregado porPaulo Nogueira
Ficha html e css
Este documento fornece instruções passo-a-passo para formatar um documento HTML sobre a pegada digital usando CSS. Inclui códigos CSS para formatar elementos como cabeçalhos, parágrafos, imagens e vídeos e aplicar estilos como cores, fontes e alinhamento.
Ficha html e css
- 1. Agrupamento de Escolasde 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. Agrupamento de Escolasde Tondela Tomaz Ribeiro 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; } Guarda o ficheiro e visualiza as alterações provocadas. 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. Agrupamento de Escolasde Tondela Tomaz Ribeiro 3 Mas ainda temos que acrescentar o código (a sombreado) dentro da tag <div>: <div class="gradiente"> Guarda o ficheiro e visualiza as alterações provocadas. 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> Guarda o ficheiro e visualiza as alterações provocadas. 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. Agrupamento de Escolasde Tondela Tomaz Ribeiro 4 Guarda o ficheiro e visualiza as alterações provocadas. 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"> Guarda o ficheiro e visualiza as alterações provocadas. 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>