Roteiro de Estudos e Atividades Avaliativas HTML Faça essa atividade de forma individual ou em dupla, faça o máximo de questões que conseguir. Pesquise na Web o significado das tags e utilize-as para alcançar o resultado apresentado nas imagens. Crie uma pasta chamada Exercício dentro dela estarão todos os seus códigos. Assim que terminar os exercícios compacte sua pasta e envie para cintiaoliveira@iftm.edu.br com o nome da dupla no corpo do e-mail. Exercício 1: Utilização das tags de cabeçalho. <html></html> <head></head> <title></title> <body></body> <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> 1. Abrir o NotePad++. 2. Criar um documento HTML com a aparência semelhante a imagem a seguir. 3. Salvar o documento com o nome: exer1.html Exercício 3 (arquivo exer3.html): Utilização das tags de parágrafo, mudança de linha, imagem, texto não formatado, bloco de texto e endereço Pesquise uma imagem da sua preferência. <p align= right ></p> <br clear= left > <img src="ok.gif" align="left"> <pre></pre> <blockquote></blockquote> <address></address> Exercício 2: Utilização das tags de parágrafo, linha e pular linha. <p></p> <hr> <br> 1. Abrir o NotePad. 2. Criar um documento HTML com a aparência semelhante a imagem a seguir. 3. Salvar o documento com o nome: exer2.htm
Exercício 4 (arquivo exer4.html). Utilização das tags de negrito, lista não ordenada, lista ordenada e descrição <ul></ul> <ol></ol> <li> <dl></dl> <dt> <dd> Exercício 5 (arquivo exer5.html). Utilização das tags de negrito, sublinhado, itálico, sobrescrito, subscrito, tamanho grande e pequeno <strong></strong> <u></u> <i></i> <sup></sup> <sub></sub> <big></big> <small></small> Exercício 6 (arquivo exer6.html). Utilização das tags de tabela. <table> <caption></caption> <th></th> <td></td> Coloque o código a seguir no arquivo e teste: <th>cabeçalho</th> <th>outro Cabeçalho</th> <td>linha 1, célula 1</td> <td>linha 1, célula 2</td> <td>linha 2, célula 1</td> <td>linha 2, célula 2</td> <h4>células que abrangem duas colunas:</h4> <th>nome</th> <th colspan="2">telefone</th> <td>bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> <h4>células que abrangem duas linhas:</h4> <th>primeiro Nome:</th> <td>bill Gates</td> <th rowspan="2">telefone:</th> <td>555 77 854</td> <td>555 77 855</td>
CSS Exercício 7. Com base no seguinte HTML crie arquivo CSS (posicionamento.css) para uma renderizaçã como a da Figura 1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd "> <html> <head> <title>posicionamento com CSS</title> <link rel="stylesheet" href="posicionamento.css" type="text/css"> </head> <body> <div id= esqcima > <p> Esquerda em cima </p> </div> <div id= esqbaixo > <p> Esquerda Embaixo </p> </div> <div id= dircima > <p> Direita em Cima </p> </div> <div id= dirbaixo > <p> Direita Embaixo </p> </div> </body> </html> Exercício 10. Observe o seguinte trecho de código: B {color: navy} <B>Minhas páginas agora usarão <I> CSS </I> </B> Qual a cor do texto CSS? Justifique. Exercício 11. Relativamente aos códigos que se seguem: Regras CSS H1 {font-family:impact; background: yellow;color:red} P {color: green} HTML <HTML> <HEAD> <TITLE>Mais um Exemplo se Style Sheet</TITLE> </HEAD> <BODY> <H1>Neste exemplo, estou começando a dominar</h1> <P>O Cascading Style Sheets</P> </BODY> </HTML> Faça as alterações necessárias de modo a: a) Criar um link para o style sheet b) Troque a cor de fundo do documento para azul c) Faça o H1 ter o texto centralizado d) Pesquise como centralizar tudo tanto na vertical quanto na horizontal Exercício 8. Crie um novo design para o HTML do www.csszengarden.com. Exercício 9. Observe o código, execute o programa e verifique o seu resultado Exercício 12. Levando em consideração a ordem de prioridade de estilos, diga o que acontece ao texto que se encontra na tag <P>. <HTML> <HEAD> <STYLE TYPE="text/css"> <!-- P {color: red} --> </STYLE> <TITLE>Mais um Exemplo se Style Sheet</TITLE> </HEAD> <BODY> <P STYLE="color: green">cascading Style Sheets</P> </BODY> </HTML>
Exercício 13. Faça uma folha de estilo que permita obter um texto de cor vermelho no primeiro parágrafo, verde no segundo parágrafo e cinza no terceiro. Exercício 14. Escreva uma regra CSS de modo que o estilo de todo o texto que aparecer em negrito seja vermelho. Mas essa condição deverá ser satisfeita única e exclusivamente se o negrito ocorrer dentro de uma tag <P>. Exercício 15. Faça uma página contendo 3 links. Os links criados devem ser mostrados inicialmente na cor vermelha (red), os links que foram visitados na cor azul (navy) e quando o cursor estiver sobre o link o texto é visualizado na cor amarela (yellow). Exercício 16. Faça regras CSS para links com as seguintes propriedades: #800000, tamanho das letras 8 pontos, não sublinhado. Caso o mouse esteja em cima do link defina o mesmo para a cor #800080 e letras em negrito. Exercício 17. Assinale a alternativa que representa como definir um CSS interno. a) <css> b) <style> c) <script> d) <estilo> Exercício 18. Assinale a alternativa que mostra uma sintaxe correta do CSS. a) {body:color:black} b) body {color:black} c) body:color=black d) {body:color=black{body} Exercício 19. Assinale a alternativa que mostra como inserir comentários no arquivo CSS. a) /* comentario*/ b) * comentário * c) // comentário d) // comentário // Exercício 21. Como alteramos a cor de texto de um elemento? a) text-color b) color c) fcolor d) color-text Exercício 22. Qual a sintaxe para tornar todos os elementos <p> em negrito? a) <p style= text-size:bold > b) P {text-size:bold} c) <p style= font-size:bold > d) P {font-weight:bold} Exercício 23. Coloque uma imagem no fundo de um documento HTML e faça ela ocupar todo o fundo sem repetir. Exercício 24. Crie um layout com 3 colunas do mesmo tamanho utilizando DIVs estilizadas com CSS. Exercício 25. Crie um layout com um DIV azul com altura de 200 pixels ocupando todo a parte superior do documento, um DIV amarelo com altura de 500 pixels e largura de 800 pixels centralizada e um DIV verde de 100 pixels ocupando 80% do comprimento do fundo. Exercício 26. Experimente com posicionamento fazendo a imagem de fundo repetir na vertical, na horizontal e não repetir. Exercício 27. Crie um DIV com 400 pixels por 400 pixels e centralize na horizontal. Exercício 28. Posicione uma imagem em uma posição a 4cm da margem esquerda e a 7cm da margem superior. Posicione outra imagem afastada 11 cm da margem esquerda e 1 cm abaixo da margem superior. Exercício 29. Desenvolva um arquivo HTML e outro em CSS para reproduzir a imagem seguinte: Exercício 20. Qual a propriedade que utilizamos para alterar a cor do background? a) background-color b) bgcolor c) color d) backcolor
Exercício 30. Faça uma estrutura HTML com estilização CSS utilizando os atributos de padding, margin, height, width, border para fazer a seguinte forma. Exercício 31. Faça uma estrutura HTML com estilização CSS para reproduzir a seguinte página: