Baixe o app para aproveitar ainda mais
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 *
Compartilhar