segunda-feira, 24 de março de 2025

Atividade Web Design - 24/03 - 2º Info A/B

 

Títulos, Parágrafos e Quebras de Linha no HTML

Títulos em HTML

A forma mais simples de criar títulos no HTML é utilizando as tags <h1> a <h6>. O número representa o nível de importância, sendo <h1> o maior e <h6> o menor.

Exemplo:

<!DOCTYPE html>

<html>

<head>

    <title>Títulos em HTML</title>

</head>

<body>

    <h1>Texto Grande</h1>

    <h2>Texto um pouco menor</h2>

    <h3>Texto ainda menor</h3>

    <h4>Texto menor...</h4>

    <h5>Texto bem pequeno</h5>

    <h6>Texto mais pequeno possível com <h6></h6></h6>

</body>

</html>


Parágrafos em HTML

A tag <p> é usada para definir parágrafos, organizando o conteúdo do texto.

Exemplo:

<!DOCTYPE html>

<html>

<head>

    <title>Parágrafos em HTML</title>

</head>

<body>

    <p>Este é um parágrafo.</p>

    <p>Este é outro parágrafo.</p>

</body>

</html>


Quebra de Linha

A tag <br> permite pular para a próxima linha dentro de um texto sem precisar criar um novo parágrafo.

Exemplo:

<!DOCTYPE html>

<html>

<head>

    <title>Quebra de Linha</title>

</head>

<body>

    Cada <br> palavra <br> em <br> uma <br> linha.

</body>

</html>


Atividade Prática: Criando uma Biblioteca Virtual

Agora é sua vez de praticar! Você deverá criar uma página HTML listando 10 livros de sua escolha, organizando os títulos com <h2> e os resumos com <p>.

Passo a Passo

  1. Crie um novo arquivo HTML e salve-o como biblioteca.html.
  2. Organize os conteúdos usando <h2> para os títulos dos livros e <p> para os resumos.
  3. Adicione um parágrafo extra ao final com a sua opinião sobre um dos livros listados.

Exemplo de Estrutura da Página:

<!DOCTYPE html>

<html>

<head>

    <title>Biblioteca Virtual</title>

    <meta charset="utf-8">

</head>

<body>

    <h1>Minha Biblioteca Virtual</h1>

 

    <h2>1. Dom Casmurro</h2>

    <p>Obra de Machado de Assis que narra a história de Bentinho e sua obsessão por Capitu.</p>

 

    <h2>2. 1984</h2>

    <p>Escrito por George Orwell, este livro apresenta uma sociedade distópica sob vigilância constante.</p>

 

    <h2>3. O Pequeno Príncipe</h2>

    <p>Clássico de Antoine de Saint-Exupéry, que traz uma reflexão sobre a vida e os sentimentos.</p>

 

    <h2>4. Harry Potter e a Pedra Filosofal</h2>

    <p>Primeiro livro da saga escrita por J.K. Rowling, introduzindo o mundo da magia e Hogwarts.</p>

 

    <p>Dos livros listados, meu favorito é "1984" porque aborda temas sobre controle social e manipulação da informação.</p>

</body>

</html>


Desafios Extras

  1. Adicione uma lista de livros recomendados no final, utilizando <ul> (lista não ordenada).
  2. Inclua um link externo para um site onde os livros possam ser lidos ou comprados.
  3. Escreva um resumo de pelo menos 50 palavras sobre o livro que mais gostou.


quinta-feira, 26 de março de 2015

ATIVIDADE SEGURANÇA

Aula Excel –  Funções Básicas (soma, média, máximo, mínimo)
Escrever na lousa e pedir que os alunos digitem no Excel

Explicação:
·         As fórmulas são recursos que agilizam a realização de cálculos no Excel.
·         Existem inúmeras fórmulas para cálculos matemáticos diversos, estas são as mais simples.
·         Sempre devem ser iniciadas por =
·         O dois ponto ( : )  determina um intervalo de valores.

Atividade
Pesquise 20 produtos de informática e monte uma planilha com os seguintes dados:
Nome do produto
Valor unitário de cada produto
Quantidade adquirida de cada produto
Valor total da venda por produto (multiplique valor unitário por quantidade com a função =mult(valor1;valor2))
Soma total de todos os valores de venda
Média de todos os preços
Maior preço
Menor preço


terça-feira, 28 de outubro de 2014

PROJETO FINAL

Faça uma página que contenha um caça-palavras, estilizando o espaço entre letras e demais configurações em CSS. Você pode utilizar configurações de tabela para organizar as linhas e colunas de seu jogo. Não é necessário que haja interatividade com o usuário, ou seja, essa página será estática.

É preciso conter um cabeçalho com as palavras que devem ser procuradas e um tema específico para isso. Você pode adicionar imagens, cores e espaçamentos estilizados.

ENTREGA: Você terá, a partir de agora, 48 horas para entrega de seu caça-palavras.
AVALIAÇÃO: Seu jogo será avaliado mediante interação com o professor e o produto final seguindo os quesitos:

  • Organização do código: indentação, comentários;
  • Visual: clareza dos elementos na tela;
  • Recursos CSS: elementos apresentados em aula 


EXEMPLO:


Bom trabalho!!!

AULA 6 - ESPAÇAMENTO ENTRE BORDA E CONTEÚDO

Para configurar o espaçamento entre uma borda e seu conteúdo utilizamos a propriedade padding:


Propriedade
Descrição
padding-top
Define o espaçamento superior
padding -right
Define o espaçamento direita
padding -bottom
Define o espaçamento inferior
padding -left
Define o espaçamento esquerda

Valores para as propriedades: largura medida em px, cm ou %.
Exemplo:
p {margin-top:1cm; margin-left:5cm; margin-right: 5cm;
text-align:justify;
border-width: thick; border-style:double; border-color: blue;
padding-top: 1cm; padding-left:1cm; padding-right: 1cm; padding-bottom:1cm;
}


Ou padding: 1cm 1cm 1cm 1cm;

AULA 5 - BORDAS COM CSS

Propriedades básicas para configurar bordas:

Propriedade
Descrição
Border-width
Espessura da borda
Border-style
Estilo da borda
Border-color
Cor da borda

Valores para as propriedades:
Border-width: thin,medium,thick, tamanho (2px,2cm,2pt).
Border-style:none,dotted(pontilhado),dashed(tracejada),solid(contínua),double(dupla),
groove(entalhada),ridge(ressalto),inset(baixo relevo),outset(alto relevo),tamanho (2px,2cm,2pt).

Border-color: hexadecimal, nome da cor.

Exemplo:
p {margin-top:1cm; margin-left:5cm; margin-right: 5cm;
text-align:justify;
border-width: medium; border-style:solid; border-color: blue;
  }

p {margin-top:1cm; margin-left:5cm; margin-right: 5cm;
text-align:justify;
border-width: thick; border-style:double; border-color: blue;
}

AULA 4 - MARGENS COM CSS

Com o CSS podemos controlar o espaçamento em volta dos elementos html com a propriedade margin.

Propriedade
Descrição
Margin-top
Define a margem superior
Margin-right
Define a margem direita
Margin-bottom
Define a margem inferior
Margin-left
Define a margem esquerda

Valores para as propriedades: largura medida em px, cm ou %.

Exemplo:
<html>
<head>
<style type="text/css">
  h1 {margin-top: 5cm; margin-left: 3cm;}
  h2 {margin-top: 1cm; margin-left: 4cm;}
p {margin-top:1cm; margin-left:5cm; margin-right: 5cm; text-align:justify;}
</style>
</head>
<body>
<h1> Título com margem superior de 5 cm e esquerda de 3 cm </h1>

<p>
Parágrafo com margem superior de 1 cm, margem esquerda de 5 cm e margem direita de 5 cm.Parágrafo com margem superior de 1cm, margem esquerda de 5 cm e margem direita de 5 cm.Parágrafo com margem superior de 1cm, margem esquerda de 5 cm e margem direita de 5cm.Parágrafo com margem superior de 1 cm, margem esquerda de 5 cm e margem direita de 5 cm. Parágrafo com margem superior de 1 cm, margem esquerda de 5 cm e margem direita de 5 cm.Parágrafo com margem superior de 1 cm, margem esquerda de 5 cm e margem direita de 5 cm.Parágrafo com margem superior de 1 cm, margem esquerda de 5 cm e margem direita de 5 cm.

</p>

<h2> Título com margem superior de 1 cm e esquerda de 4 cm </h2>
</body>
</html>


Salvar como ExMargens.html