Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
revisaoav2
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Tecnologias Web
João Paulo
Brognoni Casati
Revisão 2
*
Conteúdo da Aula
A linguagem HTML
Formulários em HTML
Acessibilidade na Web
Folhas de Estilo em Cascata
*
*
A linguagem HTML
Linguagem de marcação de hipertexto;
Em inglês: Hyper-Text Markup Language
O texto é marcado para ser exibido de modo formatado/diagramado por uma página web.
Extensão do arquivo: .html ou .htm
*
*
A linguagem HTML
O HTML é constituído de TAGs:
Marcações que são feitas no arquivo
Formatar / Diagramar para a exibição pelo navegador.
Utilizam os símbolos < e >
Abertura: <TAG>
Fechamento: </TAG>
Pontuais: <TAG/>
*
*
A linguagem HTML
Exemplo de uma TAG HTML:
*
<a href=“pagina2.htm”>Clique Aqui!</a>
Nome da propriedade
Aplicação da TAG
Abertura da TAG
Valor da propriedade
Fechamento da TAG
*
A linguagem HTML
Estrutura de um arquivo HTML
*
*
A linguagem HTML
Código HTML:
*
<!DOCTYPE html>
<html>
<head>
<title>PG Teste 02</title>
<meta charset="utf-8"/>
</head>
<body>
<h2>Título</h2>
<p>Parágrafo de Texto.</p>
<p>
Outro parágrafo de texto.
<br/>
Mesmo parágrafo, linha de baixo.
</p>
</body>
</html>
*
A linguagem HTML
Links em HTML:
*
<a href=“http://www.site.com.br"/>
Caminho do html/site a ser exibido
Abertura da TAG
Fechamento da TAG
Propriedade de referência
*
A linguagem HTML
Página com imagem do ENIAC
*
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>HTML: Exemplo 07</title>
</head>
<body>
<h1>Inserção de imagens</h1>
<img src=”eniac.jpg” height=”305” width=”400”/>
<p>
<i> Foto do computador ENIAC (Electronic
Numerical Integrator And Computer) da
década de 40. </i>
</p>
</body>
<html>
*
A linguagem HTML
Tabelas em HTML:
*
<table border="1">
<tr>
<td colspan="2">Carros</td>
</tr>
<tr>
<td>Palio</td>
<td>2012</td>
</tr>
<tr>
<td>Gol</td>
<td>2014</td>
</tr>
</table>
Inicia a Tabela
Nova Linha
Colunas
*
A linguagem HTML
Código HTML
Listas Ordenadas
*
*
Formulários em HTML
Estrutura de um formulário
*
*
Formulários em HTML
O controle Text
É um campo de texto livre com uma linha
O texto digitado é visível
*
<input type=“text” name=“nome” value=“”/>
*
Formulários em HTML
O controle Submit
Botão que envia os dados do formulário
O controle Reset
Botão que limpa os dados do formulário
*
<input type="submit" value="Enviar Dados">
<input type="reset" value="Limpar Dados">
*
Formulários em HTML
Controles diversos
*
*
Acessibilidade na Web
Projeto da W3C
WAI (Web Acessibility Initiative)
Desde 1997
Publica diretrizes de acessibilidade
Visa tornar a web acessível a uma gama maior de pessoas
Linguagem HTML
Possui elementos de acessibilidade
*
*
Acessibilidade na Web
Alguns recursos
Descrição de imagens
Descrição de tabelas
Teclas de atalho
*
*
Folhas de estilo em cascata
CSS
Folhas de estilo em cascata
Criada pela W3C
Possui linguagem própria
Objetivos
Definir um conjunto de regras para formatação de páginas web
Separa o conteúdo da página da formatação
Possibilidade de diagramação: Layouts
*
*
Folhas de estilo em cascata
Cada regra é dividida em seletores e bloco de declaração
O bloco de declaração é dividido em propriedades e valores
*
h1, h2 {
color: red;
font-width: bold;
}
Seletores
Bloco de declaração
Propriedade
Valor
*
Folhas de estilo em cascata
Tipos de seletores
Seletor universal
Seletor de tipo
Seletor de classe
Seletor de ID
Seletor de pseudo-classe
*
*
Folhas de estilo em cascata
Aplicação de formatação de fonte:
*
h1{
font-family: “Arial”;
font-weight: bold;
font-size: 36px;
text-align: center;
background-color: #000080;
color: #FFFFFF;
text-transform: uppercase;
}
p{
font-family: “Comic Sans MS”;
text-align: justify;
background-color: #DEDEDE;
}
<h1>Título do texto com estilo!</h1>
<p>Parágrafo com estilo aplicado!</p>
*
Folhas de estilo em cascata
*
Texto
Página Web
Elemento
Margem
Espaçamento
Borda
*
Folhas de estilo em cascata
Principais elementos HTML para confecção de layouts
<div>
Bloco lógico para confecção de layouts
Não-visual
<span>
Marca trechos em que a formatação é aplicada
Não-visual
*
*
Folhas de estilo em cascata
Layout resultante
*Perguntas relacionadas
Compartilhar