Tecnologias Web: HTML, Formulários, Acessibilidade e CSS

•

ESTÁCIO

1

0

1

0

Raimundinha Oliveira

27/01/2020

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Tecnologias Web

6.045 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

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
*