Programação WEB Responsiva-Aula4

Programação WEB Responsiva
Aula 4
Prof. Clóvis Ferraro – clovis.ferraro@docente.unip.br
Folha de estilos
• As declarações feitas em CSS sempre terminarão
com um ponto e vírgula (;) e os grupos de
declaração são delimitados por chaves ({}).
p{
Color : blue;
text-align: center;
margin-left: 20px;
border: 2px solid gray;
font-family: arial, helvetica, courier;
}
Folha de estilo para links
<style>
p { font-size:16px; margin-left: 20px}
/* link não visitado*/
a:link { color: blue; }
/* link visitado*/
a:visited { color: green; }
/* mouse sobre o link*/
a:hover { color: hotpink; }
/* link selecionado*/
a:active { color: red; }
</style>
Criando links para uma seção na
mesma página
<html>
<head>
</head>
<body>
<a name="topo"></a>
<h2>Extraído da Wikipedia</h2>
<h2>Definindo alguns termos técnicos</h2>
<ul> 
<li><a href="#Info1">Informática</a></li>
<li><a href="#Computacao">Ciência da computação</a></li>
<li><a href="#WEB">WEB</a></li>
<li><a href="#internet">Internet</a></li>
</ul>
<a name="Info1" title="Definição de informática">
<h2>Informática</h2> </a>
<p> Informática é um termo usado para descrever o conjunto das ciências da informação, estando incluídas neste grupo:<br/>
a ciência da computação, a teoria da informação, o processo de cálculo, a análise numérica e os métodos teóricos da representação dos<br />
conhecimentos e da modelagem dos problemas. </p>
<p> <a href="#">Voltar ao topo</a> </p>
<a name="Computacao" title="Definição de ciência da computação">
<h2>Ciência da Computação</h2> </a>
<p> Ciência da computação é a ciência que estuda as técnicas, metodologias e instrumentos<br/>
computacionais, que automatiza [...] e computação móvel que têm sido utilizadas por bilhões<br />
de pessoas ao redor do globo. </p>
<p> <a href="#">Voltar ao topo</a> </p>
</body>
</html>
Tag <div>
Suas principais utilizações devem ser:
• Para criar divisões entre tags
(normalmente para fins de estilo ou js);
• Para criar um contêiner/caixa de coisas aleatórias
(coisas dentro do div não precisam fazer sentido
juntas);
• A tag <div> pode ser usada para cria dropdown,
modal, sliders, accordions, informações como
links de rede sociais, endereço, telefone, etc.
TAG div
<!DOCTYPE html>
<html>
<head>
<style>
.Div {
border: 5px outset red;
background-color: lightblue;
text-align: center;}
</style>
</head>
<body>
<h1>TAG div</h1>
<div class="Div">
<h2>Este é um cabeçalho na TAG div</h2>
<p>Este é um paragráfo na tag div.</p>
</div>
<p>Este é um texto fora da tag div.</p>
</body>
</html>
Importante - Imagens
Atente-se às seguintes premissas:
• ninguém poderá usar/reproduzir a imagem duma pessoa sem a
autorização;
• a autorização para uso da imagem duma pessoa não se presume, ou
seja, a pessoa pode ter compartilhado uma foto num grupo de
WhatsApp, mas isso não significa que ela autorizou o uso da sua
imagem para as pessoas que estavam no grupo;
• quando a autorização for concedida, ela deve ser específica, contendo
o local de uso, tempo de uso, valor pago pelo uso, etc.
Qualquer uso fora das premissas acima, sujeitará o responsável a ser
condenado judicialmente a cessar o uso e a ressarcir os danos causados.
Fonte: https://cpbraga.jusbrasil.com.br/artigos/763629307/os-cuidados-
com-o-direito-de-imagem-nas-redes-sociais
Tipos de imagens
• JPGE ou JPG – Suporta até 16,8 milhões de cores.
Não permite imagens com fundos transparentes.
• GIF – Seu formato suporta oito bits por pixel,
permitindo o uso de uma paleta de cores de até
256 cores. É mais indicado para gráficos, ícones e
imagens que não necessitam de muitas cores.
Permite imagens com fundo transparente.
• PNG – permite exibição de até 16,8 milhões de
cores e também, imagens com fundo
transparente.
Inserindo imagens - tag <img>.
<img src=“URL da imagem” alt=“textoalternativo”/>
• O atributo SRC aponta o caminho da imagem nas
pastas do projeto do seu site.
• As imagens usadas na Web são armazenadas em
arquivos com extensão *.gif, *.jpg (ou *.jpeg),
*.png.
• alt – Especifica um texto alternativo a imagem.
• Nesta disciplina iremos utilizar o site:

https://pixabay.com/pt
Inserindo imagens
• alt: Indica um texto alternativo, descrevendo
brevemente a imagem, que é apresentado no
lugar da imagem nos browsers texto, ou quando
se desabilita o carregamento de imagens em
browsers gráficos. É recomendável que esteja
sempre presente ;
• width e height: Atributos de dimensão (largura e
altura respectivamente) da imagem, em pixels.
• align: O atributo align permite alinhar a imagem
com um texto.(left, right, middle,top,bottom)
<html>
<head>
</head>
<body>
<img src="pizza.jpg" alt="Eu amo pizza"
height=“80" width="120">
</body>
</html>
• Utilize a tag <figure> para marcar uma foto em
um documento e a tag <figcaption> para
definir uma legenda para a mesma.
<figure>
<img src=“robo.png" alt=“Figura de um Robo“>
<figcaption>Fig.1 – O Robô.</figcaption>
</figure>
<html>
<head>
</head>
<body>
<figure>
height="120" width="120">
<figcaption>Foto 1. Foto de
pizza</figcaption>
</figure>
</body>
</html>
<html>
<head>
</head>
<body>
<figure>
height="120" width="120">
<figcaption>Foto 1. Foto de pizza</figcaption>
</figure>
<footer>
<p>Feito por Clovis Ferraro</p>
<p>Publicado 20/03/2023</p>
</footer>
</body>
</html>
Criando links em imagens
</HEAD>
<BODY>

<TABLE align=center <HTML >
<HEAD>
<TITLE>Figura</TITLE>
</HEAD>
<BODY>
<a href="https://www.w3schools.com"><img
src="w3school.png"></a>
</BODY>
</HTML>
Tabelas
• Tabelas são úteis para organizar daso e
imagens em uma página da WEB.
• As tabelas podem conter textos, listas,
imagens e outras tabelas.
Criando uma tabela
• A tag utilizada para criar uma tabela é a
<table> </table>.
• São necessárias mais duas tags para a
construção de uma tabela:
– <tr> responsável por criar linhas;
– <th> define uma célula de cabeçalho;
– <td> </td> responsável por criar uma célula.
<HTML>
<HEAD>
<TITLE>Criando uma tabela</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<th> Nome </th>
<th> Sobrenome </th>
<TR>
<TD> Ana </TD>
<TD> Maria </TD>
<TR>
<TD> Antonio </TD>
<TD> Silva </TD>
</TABLE>
</BODY>
</HTML >
<HTML>
<HEAD>
<TITLE>Criando uma tabela</TITLE>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</HEAD>
<BODY>
<TABLE>
<TR>
<th> Nome </th>
<TR>
<TD> Ana </TD>
<TD> Maria </TD>
<TR>
<TD> Antonio </TD>
<TD> Silva </TD>
</TABLE>
</BODY>
</HTML >
<style>
table {
}
th, td {
border: 1px solid red;
}
</style>
Uma cor é mais frequentemente especificado por:

• um nome de cor válida - como "red"
• um valor HEX - como "#ff0000"
• um valor RGB - como "rgb(255,0,0)"
Estilos de borda: border-style
• Solid
– Corresponde a uma linha contínua.
• None
– Significa que nenhuma linha será desenhada.
• Hidden
– Significa que existe uma borda ao redor do elemento, entretanto, esta
não será visível.
• Dashed
– Corresponde a uma linha pontilhada.
• Dotted
– Corresponde a uma linha de pontos circulares.
• Double
– São desenhadas duas linhas ao redor do elemento.
table {
}
th {
height:100px;
color: green;
border: 1px dotted blue;
font-size: 22px;
}
td {
color: blue;
border: 1px dashed red;
font-size: 20px;
}
table {
background-color: black; }
th {
width:40%;
height:100px;
color: green;
border: 2px dotted blue;
font-size: 22px; }
td {
color: blue;
border: 4px dashed red;
font-size: 20px; }
<TABLE align=center BACKGROUND="robo1.png">
<TR>
<th colspan="2"> Aluno </th>

</TR>
<TR>
<th> Nome </th>
</TR>
<TD> Ana </TD>
<TD> Maria </TD>
<TR>
<TD> Antonio </TD>
<TD> Silva </TD>
</TR>
</TABLE>
Bibliografia
KIRILLO, C. Z.; LOZANO, L. C. M. HTML 5
RESPONSIVO PASSO A PASSO, 2020.
SCARELLI, A.;ZAMBON, K. HTML5. Disponível em:
<https://pessoas.feb.unesp.br/ariane/files/2014/02
/Ap_HTML5_LPII_2017.pdf>. Acesso em:
10/03/2023.
HTML5. W3Schools. Disponível em: <
https://www.w3schools.com/html/default.asp >.
Acesso em: 10/03/2023.
HTML5. W3Bai. Disponível em <w3bai.com> Acesso
em 25/03/2023.

Programação WEB Responsiva-Aula4

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Programação WEB Responsiva-Aula4

Enviado por

Direitos autorais:

Formatos disponíveis

Programação WEB Responsiva

• Nesta disciplina iremos utilizar o site:

Uma cor é mais frequentemente especificado por:

Você também pode gostar