Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Revisão de Tecnologias Web
Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original
TECNOLOGIAS WEB
Aula de Revisão para AV2
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
LINGUAGEM HTML
Documento HTML:
Vínculos (Links)
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
LINGUAGEM HTML
Documento HTML:
Vínculos (Links)
<a href=“__________________”> __________ </a>
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
LINGUAGEM HTML
Âncora (Link Interno)
Sintaxe:
<A NAME="Coloque o nome da ancora aqui"></A>
<a href="#nome da ancora">Texto</a>
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
<table border="1" >
</table>
<tr>
<tr>
<tr>
</tr>
</tr>
</tr>
LINGUAGEM HTML
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
<table width="70%" border="1" >
<tr>
<td>Celula 1.1 </td><td>Celula 1.2 </td><td>Celula 1.3</td>
</tr>
<tr>
<td>Celula 2.1 </td><td>Celula 2.3</td><td>Celula 2.3</td>
</tr>
<tr>
<td>Celula 3.1 </td><td>Celula 3.2</td><td>Celula 3.3</td>
</tr> </table>
LINGUAGEM HTML
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
LINGUAGEM HTML
Formulários
Principal forma de entrada de dados fornecidos por usuários na Internet
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
LINGUAGEM HTML
Formulários
<form action=“ ” >
Elementos de Entrada
</form>
Deve-se indicar neste atributo a localização do recurso onde o formulário será processado.
Ex:
<form action=“ cadastro.php” >
<form action=mailto:user@provedor.com >
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
LINGUAGEM HTML
Formulários
<form method =“ ” >
Elementos de Entrada
</form>
Indica qual o método de HTTP será usado para enviar os conteúdos do formulário.
Existem duas possibilidades :
POST
GET
Ex:
<form action=“ cadastro.php” method =“post” >
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
LINGUAGEM HTML
input type="text“ - Rótulo descritivo
ELEMENTOS BÁSICOS DO FORMULÁRIO
NOME<br /> <input type="text" name="txtNome" />
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
LINGUAGEM HTML
ELEMENTOS BÁSICOS DO FORMULÁRIO
SENHA<br /> <input type=“password“ name="txtSenha" />
input type="password“ - Rótulo descritivo (senha), Elemento HTML
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
LINGUAGEM HTML
ELEMENTOS BÁSICOS DO FORMULÁRIO
<input type="button" name="cmdValidar" value=“Validar" />
input type="button“
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
LINGUAGEM HTML
ELEMENTOS BÁSICOS DO FORMULÁRIO
<input type=" submit " name="cmdEnviar" value=“Enviar" />
input type="submit“
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
LINGUAGEM HTML
ELEMENTOS BÁSICOS DO FORMULÁRIO
Qual o seu sexo ? <br />
<input type="radio" name="sexo" value="masculino" /> Masculino<br />
<input type="radio" name="sexo" value="feminino" /> Feminino<br />
input type="radio”
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
LINGUAGEM HTML
ELEMENTOS BÁSICOS DO FORMULÁRIO
input type="checkbox“
Qual seu esporte favorito ? <br />
<input type="checkbox" name="chkEsporte" value="Futebol" /> Futebol<br />
<input type="checkbox" name="chkEsporte" value="Judo" /> Judo<br />
<input type="checkbox" name="chkEsporte" value="TenisdeMesa" /> Tenis de Mesa<br />
<input type="checkbox" name="chkEsporte" value="Surf" /> Surf<br />
<input type="checkbox" name="chkEsporte" value="Amarelinha" /> Amarelinha<br />
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
LINGUAGEM HTML
ELEMENTOS BÁSICOS DO FORMULÁRIO
Select
Titulo<br />
<select name="ddlTitulo">
<option>elemento 1</option>
<option>elemento 2</option>
<option>elemento 3</option>
<option>elemento 4</option>
<option>elemento 5</option>
</select>
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
LINGUAGEM HTML
ELEMENTOS BÁSICOS DO FORMULÁRIO
textarea
Comentários<br />
<textarea name="txtComments“ rows="10" cols="50" >
Texto que você pode inserir para quando o campo for carregado
</textarea>
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
LINGUAGEM HTML
ELEMENTOS BÁSICOS DO FORMULÁRIO
Outros elementos
hidden – Envia dados ocultos
<input type=“hidden“ name="txtOculto" />
reset – Botão que limpa os dados adicionados pelo usuário
<input type="reset" name=“btLimpar" value=“Limpar">
file – Seleciona arquivos para um tipo de envio.
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
ACESSIBILIDADE
Acessibilidade significa não apenas permitir que pessoas com deficiências ou mobilidade reduzida participem de atividades que incluem o uso de produtos, serviços e informação, mas a inclusão e extensão do uso destes por todas as parcelas presentes em uma determinada população.
Fonte:http://pt.wikipedia.org/wiki/Acessibilidade
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
DEFICIÊNCIAS & SOLUÇÕES
Deficiência Visual
Cegueira
Leitor de Tela
Navegador Textual
Impressora Braile
Navegador com Voz
Baixa Visão
Ampliador de Tela
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
DEFICIÊNCIAS & SOLUÇÕES
Surdez
Libras
Motora
Motrix
Cognitiva
O programa Motrix foi criado para permitir o acesso de pessoas com tetraplegia ou deficiências motoras severas que impeçam o uso efetivo dos membros superiores.
Através dele, é possível comandar com a voz a maior parte das funções de um computador com Windows.
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
ACESSIBILIDADE
A real dificuldade que o deficiente visual (tecnologias assistivas ) tem em ler os textos é gerada pelas características dos mesmos.
Além disso, existem os textos sem representação fonética, o que causa dificuldade de entendimento dos mesmos para aqueles que nunca ouviram a nossa língua, como é o caso dos surdos.
R4F43L
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
ACESSIBILIDADE
Existem pessoas que, por razões diversas, não podem utilizar o mouse. Muitos portais somente permitem interação do usuário via mouse, solicitando-lhe “clicar para pular a introdução”. Se ele não pode utilizar o mouse, ele nunca poderá interagir.
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
ACESSIBILIDADE
- Imagens e Animações. Use o atributo alt para descrever a função de cada elemento visual.
- Imagemaps. Use mapas client-side (o tag map) e texto para as regiões clicáveis.
- Multimídia. Inclua legendas e transcrições para o audio, e descrições para o vídeo.
- Hiperlinks. Utilize texto que faça sentido fora do contexto. Evite a frase "clique aqui".
WCAG - Web Content Accessibility Guidelines (Guia de Acessibilidade aos Conteúdos na Web)
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
ACESSIBILIDADE
WCAG 2.0 tem 12 diretrizes que são organizadas em 4 princípios de Acessibilidade:
1. Perceptível
2. Operável
3. Compreensível
4. Robusto
Para cada orientação, existem critérios de sucesso testáveis que são em três níveis: A, AA e AAA.
Quanto maior o número de letras A, maior o grau de acessibilidade apresentado, isto é, mais princípios foram atendidos.
WCAG - Web Content Accessibility Guidelines (Guia de Acessibilidade aos Conteúdos na Web)
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
ACESSIBILIDADE
Perceptível
Fornecer Alternativas textuais para qualquer conteúdo não textual, permitindo que possa ser alterado, se necessário, para outros formatos como impressão com tamanho de fontes maiores, Braille, fala, símbolos ou linguagem mais simples.
Fornecer Alternativas para mídias baseadas no tempo.
Criar conteúdo que pode ser apresentado de modos diferentes (por exemplo um layout simplificado) sem perder informação ou estrutura.
Tornar mais fácil aos usuários a visualização e audição de conteúdos incluindo as separações das camadas da frente e de fundo.
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
ACESSIBILIDADE
Operável
Fazer com que todas as funcionalidades estejam disponíveis no teclado.
Prover tempo suficiente para os usuários lerem e usarem o conteúdo.
Não projetar conteúdo de uma forma conhecida por causar
ataques epiléticos.
Prover formas de ajudar os usuários a navegar, localizar conteúdos e determinar onde se encontram.
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
ACESSIBILIDADE
Compreensível
Tornar o conteúdo de texto legível e compreensível.
Fazer com que as páginas da Web apareçam e funcionem de modo previsível.
Ajudar os usuários a evitar e corrigir erros.
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
ACESSIBILIDADE
Robusto
Maximizar a compatibilidade entre os atuais e futuros agentes do usuário, incluindo as tecnologias assistivas.
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
CSS – CASCADING STYLE SHEET
seletor { propriedade: valor; }
Seletor: É o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, e para o qual a regra será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc).
Propriedade: É o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc).
Valor: É a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc)
SINTAXE:
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
Vinculando Folhas de Estilo “Externa”
A sintaxe geral para lincar uma folha de estilo chamada estilo.css
<head>
...........
<link rel="stylesheet" type="text/css" href="estilo.css">
..........
</head>
body {background-color: beige}
h1 {color:blue; font-size:20pt}
hr {color:navy}
p {font-size:11pt; margin-left: 15px}
a:link {color:green}
a:visited {color:black}
a:hover {color:red}
a:active {color:yellow}
CSS – CASCADING STYLE SHEET
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
Vinculando Folhas de Estilo “Interna”
<html><head>
<title>Titulo da Página</title>
<style type="text/css">
p{
color: #FF0000;
}
</style>
</head>
<body>
<p>Primeiro Parágrafo</p>
<p>Segundo Parágrafo</p>
</body></html>
CSS – CASCADING STYLE SHEET
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
Vinculando Folhas de Estilo “inline”
<p style="color:#000000; margin: 5px;">
Aqui um parágrafo de cor preta e com 5px nas 4 margens.
</p>
CSS – CASCADING STYLE SHEET
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
CSS – CASCADING STYLE SHEET
Blocos e Elementos Alinhados
Com o CSS pode-se criar layouts utilizando recursos de blocos ou alinhando elementos. Utilizando os recursos:
<DIV>
<SPAN>
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
CSS – CASCADING STYLE SHEET
<span>
Alinha os elementos informando ao navegador para aplicar o estilo no que está entre suas tags.
É um elemento inline
O SPAN é utilizado normalmente em pequenos blocos HTML, especialmente em trechos de texto que necessitam de uma formatação específica.
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
CSS – CASCADING STYLE SHEET
<div>
Define um bloco para organizar os elementos na página criando uma divisão lógica na página.
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
CSS – CASCADING STYLE SHEET
EXEMPLO:
<div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li> li>Harry S. Truman</li>
<li>John F. Kennedy</li> <li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li> <li>Bill Clinton</li>
</ul> </div>
<div id="republicans">
<ul>
<li>Dwight D. Eisenhower</li> <li>Richard Nixon</li>
<li>Gerald Ford</li> <li>Ronald Reagan</li>
<li>George Bush</li><li>George W. Bush</li>
</ul> </div>
#democrats
{
background:blue;
}
#republicans
{
background:red;
}
HTML
Folha de Estilo
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
CSS – CASCADING STYLE SHEET
EXEMPLO:
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
CSS – CASCADING STYLE SHEET
Alterando o Atributo : border
#exemplo2 { width: 300px; height: 100px; background: #090; border: 10px solid #000; }
border: 10px solid #000; aplicou uma borda de 10px, tipo sólida, de cor preta, em cada um dos 4 lados do elemento :
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
CSS – CASCADING STYLE SHEET
Com border Adicionado
:
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
CSS – CASCADING STYLE SHEET
Alterando o Atributo padding
#exemplo1 { width: 300px; height: 100px; background: #c00; padding: 10px; }
:
A linha padding: 10px; aplicou uma margem interna (distância entre a borda e o conteúdo do elemento) nos 4 lados.
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
CSS – CASCADING STYLE SHEET
Alterando o Atributo padding
:
A propriedade padding está associada a margem interna de algum elemento.
Essa margem é invisível, ou seja, ela apenas determina uma distância dos limites especificados para largura (width) e altura (height) de um elemento.
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
CSS – CASCADING STYLE SHEET
Alterando o Atributo margin
#exemplo2 { width: 300px; height: 100px; background: #090; border: 10px solid #000; margin: 10px; }
A linha margin: 10px; aplicou uma margem externa (distância a partir da borda do elemento) nos 4 lados.
RAV 2 – Revisão para AV 2
TECNOLOGIAS WEB
CSS – CASCADING STYLE SHEET
Alterando o Atributo marginCompartilhar
Materiais relacionados
9 pág.
3 pág.
Perguntas relacionadas
Compartilhar