Tecnologias para apresentação de dados - HTML Aécio Costa
Apresentação de Dados na Web Tecnologias client-side HTML CSS JavaScript
HyperText Markup Language Uma linguagem de marcação utilizada para produzir páginas na Web; Documentos HTML podem ser interpretados por navegadores; Documentos HTML são formados por Tags; Documentos em HTML são arquivos de texto simples que podem ser criados e editados em qualquer editor de textos comum.
Características As tags HTML permitem que o leitor de uma p á gina Web envie informações ao servidor atrav é s de componentes gráficos como botões, caixas de checagem, caixas de texto etc.; A p á gina constru í da em HTML é transferida do servidor para o computador do usu á rio, onde o browser faz o trabalho de interpretar os códigos naquele documento e mostrar a página final que o usuário vê.
Requisitos para a construção de uma página WEB: Conhecer a linguagem HTML para escrever o código fonte de sua página; Editor de texto para gerar o seu c ó digo fonte (bloco de notas, notepad ++, Dremweaver, Eclipse e outros); Um navegador de internet (browser) para visualizar as suas páginas, tais como: Internet Explorer, Firefox, Netscape, etc.
TAGs Os comandos HTML s ã o chamados de TAGs, compreendem de marcas padrões que são utilizadas para fazer indicações ao Browser. Assim como em outras linguagens, os comandos t êm uma sintaxe própria, e seguem algumas regras: As tags aparecem sempre entre sinais de menor que (<) e maior que (>); Geralmente são utilizadas aos pares, sendo que a TAG de finalização de um comando qualquer é finalizada com a precedência de uma barra (/). 6
Em geral: <nome da TAG> conteúdo </nome da TAG> Onde: <nome da TAG>: indica o início da TAG </nome da TAG>: indica o fim da TAG Tag única <br> Tag dupla <center> conteúdo </center>
Uma página Web criada em HTML, possui três partes básicas: estrutura principal, um cabeçalho e um corpo de página. Possui uma estrutura dividida em 4 TAGs básicas: <html> </html> <head> </head> <title> </title> <body> </body>
<html> </html> São usados para delimitar os comandos HTML, indicam o início e o fim de um documento. O browser reconhece a TAG <html> e identifica que o documento que virá à seguir deve ser interpretado como HTML.
<head> </head> Delimitam a seção do cabeçalho do documento onde serão definidos poucos comandos de linguagem, o mais importante é o título que é exibido na barra de títulos do browser ao fazer sites em html. <title> </title> Definem o t í tulo da p á gina que p é exibido na barra de t í tulos do browser. Esta TAG deve estar sempre dentro das TAGs <head></head>
<body> </body> Dentro desta TAG est ã o os elementos da p á gina web. É onde estão localizados os textos, imagens, ligações com outras páginas, etc.;
No final teremos: <html> <head> <title>minha Primeira Página</title> </head> <body> Aprendendo HTML </body> </html>
Atributos em TAGs TAG s HTML podem ter atributos que prov ê m informa ç ões adicionais sobre o elemento, podendo definir comportamentos ou simplesmente identificando-os. Os atributos são colocados em elementos utilizando o par chave/valor: name= value 13
Atributos em TAGs - Exemplo <body bgcolor="green"> </body> Outro atributo para TAG body é background que deve apontar para uma imagem: <body background="imagem.png"> </body>
Headings Servem para definir títulos e subtítulos e são importantes em HTML podendo ser <h1> até <h6>. <h1>texto 1</h1> <h2>texto 2</h2> <h3>texto 3</h3>
Estilos em Textos Tag <p> <b> <i> <u> <sub> <sup> <center> <pre> Descrição Define um parágrafo Aplica Negrito Aplica Itálico Aplica sublinhado Aplica subscrito Aplica sobrescrito Centraliza o texto Define a formatação do Texto
Fontes Para definir fontes, tamanho e cores de textos utilizamos a TAG <font>. <font size="10" face="tahoma" color="red"> Texto Customizado </font> 17 Atributo Descrição size Tamanho que varia de 1 a 7, sendo 3 valor default face color Nome da fonte Cor da fonte, podendo ser indicada em haxadecimal
Quebra de Linha Para quebras de linha em páginas HTML utlizamos a tag <br>. Primeira Linha <br> Segunda Linha
Linhas HTML Para criar linhas horizontais em HTML utilizamos a tag <hr>. <hr width="100%" align="left" size="5" color="white"> Atributo size color width align Descrição Tamanho da espessura em pixels. Cor da linha Defina a largura da Linha Alinhamento [left, rigth, center]
Exercício Construa uma página de uma série, time, novela e etc. utilizando as formatações vistas.
Imagens Para inserir imagens em HTML utilizamos a TAG <img>. <img src="imagem.png" alt="veja a Imagem"> Atributo src alt width heigth Descrição Caminho da imagem (URL) Texto que aparece caso a imagem não seja renderizada Define a largura da imagem que pode ser em pixel ou porcetagem. Define a altura da imagem que pode ser em pixel ou porcetagem.
Links Hyperlinks em HTML permitem ao usuário navegar de um documento para outro. Quando se coloca o mouse em cima de um Link é possível para onde será direcionado ao clicar.
Links <a href="http://www.google.com/">visite o Google</a> <a href="../index.html">página Inicial</a> A propriedade target="_blank" = Especifica onde vai ser aberto o link.
Ancoras Ancoras n ã o s ã o vis í veis para os usu á rios, servem para criar bookmark (marcadores) dentro de um documento HTML. <a id="top">início da Página</a> <a href="#top">vá para o Início da Página</a>
<head> A tag <head> é um container para todos os elementos de cabeçalho. Dentro dessa tag é poss í vel colocar scripts, instru ç õ es para o browser de onde encontrar estilos (CSS) e etc. Tags possíveis dentro de um <head> <title>, <style>, <meta>, <link>, <script>, <noscript>, <base>
<title> Define o título do documento. É requerido em todos documentos html/xhtml. <html> <head> <title>psi - FG</title> </head> <body> </body> The content of the document... </html> 26
<link> Define o relacionamento entre o documento e um recurso externo. É usado frequentemente para link de estilos (CSS) <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> @CHARSET "ISO-8859-1"; body {background-color:yellow} p {color:blue} mystyle.css
<style> Usado para definir estilos para o documento HTML. Dentro da tag deve-se especificar como os elementos do HTML devem ser renderizados no browser. <html> <head> <style type="text/css"> body {background-color:blue} p {color:white} </style> </head> <body> <p>utilizando CSS</p> </body> </html>
<script> Usado para definir scripts client-side, por exemplo: Javascript. <script> alert('hello World!'); </script>
Listas Ordenadas Uma lista ordenada inicia com a tag <ol>. Cada item inicia com a tag <li>. <ol> <li>náutico</li> <li>sport</li> <li>santa Cruz</li> </ol> Atributo type start Descrição O formato da ordem pode ser: 1: lista numérica (não é necessário ser definido); A: lista alfabética com letras maiúsculas; A: lista alfabética com letras minúsculas; I: Lista numérica com números romanos maiúsculos; I: lista numérica com números romanos minúsculos; o valor inicial de uma lista numerada
Listas não Ordenadas Uma lista não ordenada inicia com a tag <ul>. Cada item inicia com a tag <li>. <ul> <li>náutico</li> <li>flamengo</li> <li>corinthians</li> </ul> Atributo type Descrição O formato do marcador pode ser: disc: o marcador é um ponto (padrão utilizado pelos navegadores, não precisa indicar); square: o marcador é um quadrado; circle: o marcador é um ponto.
Tabelas Tabelas são definidas em HTML pela tag <table>. Uma tabela é dividida em Linhas e Colunas representadas pelas tags <tr> e <td>. <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
Tabelas Como fazer essa tabela? 33
Tabelas Podem ser definidos cabeçalhos para uma tabela, por meio das tags <th>. <table border="1"> <tr> <th>header 1</th> <th>header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
Tabelas Outros Atributos Atributo cellpadding bgcolor bordercolor height width background Descrição compreende a distância entre células e linhas Dá cor de fundo à tabela. Define a cor da borda. Define a altura da tabela em pixels ou porcentagem. Define a largura da tabela em pixels ou porcentagem. Permite-nos colocar um fundo para a tabela desde um link a uma imagem.
Caracters em HTML
Cores em HTML
Forms Usados para passar dados para o servidor. Um elemento form pode conter elementos como: Text Fields Checkbox Radio buttons Submit buttons... 38
Forms Principais propriedades de um Form Atributo action method Descrição Endereço para onde os dados devem ser submetidos (Outra página ou Servidor) Tipo de requisição que será gerada, normalmente GET ou POST
Forms Text fields <form> </form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname">
Forms - Password Field <form> Password: <input type="password" name="pwd"> </form>
Forms Radio Buttons RadioButtons permitem um usu á rio selecionar um dentre as op ç ões disponibilizadas. <form> </form> <input type="radio" name="sex" value="male">male<br> <input type="radio" name="sex" value="female">female
Forms Checkboxes CheckBoxes permitem um usuário selecionar zero ou mais opções. <form> </form> <input type="checkbox" name="vehicle" value="bike">i have a bike<br> <input type="checkbox" name="vehicle" value="car">i have a car
Forms Input Submit Submetem um formulário para uma determinada ação <form name="input_user" action="outra_pagina.html" method="get"> Username: <input type="text" name="user"> <input type="submit" value="submit"> </form>
Forms Reset Função de resetar os campos de um formulário. <form name="input_user" action="outra_pagina.html" method="get"> Username: <input type="text" name="user"> <input type="submit" value="submit"> <input type="reset"> </form>
Forms Hidden Permite o envio de dados escondidos em requisições, sendo enviados pelo método POST. <form name="input_user" action="outra_pagina.html" method="post"> Username: <input type="text" name="user"> <input type="submit" value="submit"> <input type="reset"> <input type="hidden" value="saving" name="action_type"> </form>
Forms Selects Permite a escolha de uma opção em forma de combo na tela. Composto pelas tags: <select> <option> <select> <option>apples</option> <option selected="selected">bananas</option> <option>cherries</option> </select>
Forms TextArea Permite a criação de campos para textos maiores. <textarea name="comment" rows="7" cols="20"></textarea>
Exercício Construa uma página que contenha uma lista de opções (Portal do Aluno, Docente, Funcionários), cada opção deve direcionar (link) o usuário para a página específica onde deve haver: Portal do Aluno: Uma tabela listando as disciplinas de um aluno e suas respectivas notas e faltas; Docente: Uma lista ou tabela com a relação de alunos; Funcionários: Construa um formulário para cadastro de alunos da Faculdade Guararapes, coloque imagens e links para páginas da instituição. OBS: Coloque imagens da instituição e cores necessárias. Entrega Individual
Projeto Grupo 3 Pessoas Criação de páginas de série, novela, desenho e etc. Entrega dos Fontes Apresentação: 31/03 Nota Grupo e Individual Perguntas
Projeto - Sugestões Two and half man; Friends; Dexter; Novelas; Desenhos animados; etc. OBS: Deve existir todos os recursos vistos em sala de aula tais como Links, Listas, Páginas, Tabelas e etc.