Embed Size (px)
Citation preview
Tecnologias para apresentação de dados - HTML
Aécio Costa
Apresentação de Dados na Web
Tecnologias client-side
HTML CSS JavaScript
HTMLHyperText 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.
HTMLCaracterí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ê.
HTML
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.
6
HTMLTAGs
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 (/).
HTMLEm 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>
HTML
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> … </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.
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>
HTML
<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.;
HTML
No final teremos:
<html><head><title>Minha Primeira Página</title></head><body> Aprendendo HTML</body></html>
13
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”
HTML
Atributos em TAGs - Exemplo
Outro atributo para TAG body é background que deve apontar para uma imagem:
<body bgcolor="green"> </body>
<body background="imagem.png"> </body>
HTML
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>
HTMLEstilos em Textos
Tag Descrição
<p> Define um parágrafo
<b> Aplica Negrito
<i> Aplica Itálico
<u> Aplica sublinhado
<sub> Aplica subscrito
<sup> Aplica sobrescrito
<center> Centraliza o texto
<pre> Define a formatação do Texto
17
HTMLFontes
Para definir fontes, tamanho e cores de textos utilizamos a TAG <font>.<font size="10" face="Tahoma" color="red">
Texto Customizado</font>
Atributo Descrição
size Tamanho que varia de 1 a 7, sendo 3 valor default
face Nome da fonte
color Cor da fonte, podendo ser indicada em haxadecimal
HTML
Quebra de Linha
Para quebras de linha em páginas HTML utlizamos a tag <br>.
Primeira Linha<br>Segunda Linha
HTMLLinhas HTML
Para criar linhas horizontais em HTML utilizamos a tag <hr>.
<hr width="100%" align="left" size="5" color="white">
Atributo Descrição
size Tamanho da espessura em pixels.
color Cor da linha
width Defina a largura da Linha
align Alinhamento [left, rigth, center]
HTMLExercício
Construa uma página de uma série, time, novela e etc. utilizando as formatações vistas.
HTMLImagens
Para inserir imagens em HTML utilizamos a TAG <img>.
<img src="imagem.png" alt="Veja a Imagem">
Atributo Descriçãosrc Caminho da imagem (URL)
alt Texto que aparece caso a imagem não seja renderizada
width Define a largura da imagem que pode ser em pixel ou porcetagem.
heigth Define a altura da imagem que pode ser em pixel ou porcetagem.
HTMLLinks
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.
HTMLLinks
A propriedade target="_blank" = Especifica onde vai ser aberto o link.
<a href="http://www.google.com/">Visite o Google</a> <a href="../index.html">Página Inicial</a>
HTMLAncoras
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>
HTML<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>
26
HTML<title>
Define o título do documento.
É requerido em todos documentos html/xhtml.
<html><head><title>PSI - FG</title></head> <body>
The content of the document......</body> </html>
HTML<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
HTML<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>
HTML<script>
Usado para definir scripts client-side, por exemplo: Javascript.
<script>alert('Hello World!');
</script>
HTMLListas 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 Descrição
type 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;
start o valor inicial de uma lista numerada
HTMLListas 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 Descrição
type 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.
HTMLTabelas
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>
33
HTML
Tabelas
Como fazer essa tabela?
HTMLTabelas
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>
HTMLTabelas – Outros Atributos
Atributo Descrição
cellpadding compreende a distância entre células e linhas
bgcolor Dá cor de fundo à tabela.bordercolor Define a cor da borda.height Define a altura da tabela em pixels ou
porcentagem.width Define a largura da tabela em pixels
ou porcentagem.background Permite-nos colocar um fundo para a
tabela desde um link a uma imagem.
HTML
Caracters em HTML
HTML
Cores em HTML
38
HTMLForms
Usados para passar dados para o servidor.
Um elemento form pode conter elementos como:
Text FieldsCheckboxRadio buttonsSubmit buttons...
HTMLForms
Principais propriedades de um Form
Atributo Descrição
action Endereço para onde os dados devem ser submetidos (Outra página ou Servidor)
method Tipo de requisição que será gerada, normalmente GET ou POST
HTML
Forms – Text fields
<form>First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname">
</form>
HTML
Forms - Password Field
<form>Password: <input type="password" name="pwd"></form>
HTML
Forms – Radio Buttons
RadioButtons permitem um usu á rio selecionar um dentre as op ç ões disponibilizadas.
<form><input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female">Female
</form>
HTML
Forms – Checkboxes
CheckBoxes permitem um usuário selecionar zero ou mais opções.
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car
</form>
HTML
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>
HTML
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>
HTML
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>
HTML
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>
HTML
Forms – TextArea
Permite a criação de campos para textos maiores.
<textarea name="comment" rows="7" cols="20"></textarea>
HTMLExercí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
HTML
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
HTML
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.
