Programação para Internet I Aula 05 e 06 Fernando F. Costa nando@fimes.edu.br 1
Tags de Formatação de Texto <Marquee> - Permite que um texto se mova de um lado para o outro da página. Sintaxe: <marquee behavior= [scroll/slide/alternate] direction= [top/botton/left/right] loop= [1..n/infinite] align= [left/right/center] bgcolor= [cor] scrollamount= [espaço] scrolldelay= [tempo] height= [altura] width= [largura] hspace= [espaçamento horizontal] vspace= [espaçamento vertical] > Seu Texto </marquee> <html> <body> <marquee direction= left > Texto animado </marquee> </body> </html> 2
Parágrafo <p> - Define o ínicio e o fim de um páragrafo. Sintaxe: <p align= [left/right/center/justify] > Seu páragrafo </p> Exemplo: <html> <body> <p align= center > Centro </p> <p align= left > Esquerda </p> </body> </html> 3
Bloco de Texto <blockquote> - Definem um parágrafo com recuo a direita e a esquerda. Utilizados para enfatizar trechos em destaque como citações. Sintaxe: <blockquote>bloco de Texto </blockquote> <html> <body> <blockquote> <blockquote> - Definem um parágrafo com recuo a direita e a esquerda. Utilizados para enfatizar trechos em destaque como citações. </blockquote> </body> </html> 4
Divisão de Texto <div> - Definem divisões no texto, formando uma espécie de quadro que delimita o texto. Sintaxe: <div align= [left/right/center/justify] > Texto </div> <div align= center >Divisão de Texto ao centro</div> <div align= left >Divisão de texto a esquerda</div> 5
Listas Dividem-se em três tipos: Lista de Definição Lista Não-Ordenada Listas Ordenadas 6
Listas de Definição Compostas de duas parte: Termo e Definição Sintaxe: <dl> <!- - Início da lista de definição - -> <dt> termo a ser definido <dd> definição </dl><!- - Fim da lista de definição - -> <dl> <dt>html <dd> Hypertext Markup Language <dd> É uma linguagem de descrição de páginas de informação </dl> 7
Listas Não-Ordenadas Sintaxe: <ul type= [disc/circle/square] > <!-- Início da lista nãoordenada --> <li type= [disc/circle/square] > item da lista </ul><!-- fim da lista --> <p>navegadores</p> <ul type= disc > <li> Firefox <li> Internet Explorer <li> Opera </ul> 8
Listas Ordenadas Sintaxe: <ol type= [1/I/i/A/a] start= [início] > <!-- Início da lista nãoordenada --> <li type= [1/I/i/A/a] value= [número] > item da lista </ol><!-- fim da lista --> <p>ranking das Produtoras de Veículos</p> <ol type= 1 > <li> Fiat <li> Volkswagem <li> Chevrolet </ol> 9
Linhas Horizontais <hr> - Serve para dividir assuntos ou partes de um assunto. Sintaxe: <hr width= [largura] size= [espessura] align= [left/center/right] noshade color= [cor] > Exemplo: <hr> <hr width= 50% > <hr size = 8 > 10
Links <a> - Permite a criação de hiperlinks Sintaxe: <a name= [nome] href= [url] title= [título] target= [ _blank/_self/_top/nome_específico] > texto, botão ou imagem </a> 11
Exemplo <html><body><marquee direction= left > Texto animado </marquee> <p>ranking das Produtoras de Veículos</p> <div align= center >Navegadores</div> <ul type= disc > <li> Firefox</li> <li> Internet Explorer</li> </ul><hr> <ol type= 1 > <li> <a href= http://www.fiat.com.br target= _blank >Fiat</a> <li> <a href= http://www.vw.com.br target= _self >Volkswagem</a> </ol><hr> <dl> <dt>html</dt> <dd> Hypertext Markup Language <dd> Linguagem de marcação destinada a estruturar documentos web </dl> <blockquote> <blockquote> - Definem um parágrafo com recuo a direita e a esquerda. Utilizados para enfatizar trechos em destaque como citações. </blockquote> </body></html> 12
Imagens <img> - permite a inserção e manipulação de imagens na página, desde que venha acompanhada obrigatoriamente do atributo src que indicará o caminho da imagem. Sintaxe: <img src= [url da imagem] align= [center/left/right/top/middle/botton] width= largura height= altura vspace= [espaçamento vertical] hspace= [espaçamento horizontal] border= [espessura da borda] alt= texto alternativo > 13
Imagens Exemplo: <html> <body> <img src= figura01.jpg alt= Peso: 100kb Figura 01 align= middle > Centro Universitário de Mineiros </body> </html> 14
Tabelas As tabelas em HTML são compostas por n linhas, para valores de n >= 1. Cada linha de uma tabela HTML pode conter x colunas, para valores de x >= 1. A tag <table> insere uma tabela na página e é responsável por determinar os atributos desta tabela como largura, background, etc. Sintaxe: <table width= largura height= altura align= [left/center/right] bgcolor= [cor de fundo da tabela] background= [url imagem tabela] cellpadding= [distanciamento interno] cellspacing= [espaçamento entre células] border= [espessura] bordercolor= [cor da borda] frame= [estilo borda] > 15
Tabelas Valores válidos para o atributo FRAME Void: remove as bordas externas Above: apenas a borda superior Below: apenas a borda inferior Hsides: lados horizontais, ou seja, as bordas de cima e de baixo. Vsides: lados verticais, esquerda e direita da tabela Lhs: borda do lado esquerdo Rhs: borda do lado direito Box: borda completa (padrão) Border: borda completa (padrão) 16
Tabelas - Linhas A tag <tr> insere linhas em uma tabela. Ela permite definir as características desta linha como largura, altura, tipo de alinhamento, etc. Sintaxe: <tr align= [left/right/center] valign= [top/middle/bottom] bgcolor= [cor de fundo da célula] background= [url da imagem de fundo da célula] > OBS: Lembre-se que esta tag deve ser usada entre as tags <table>. 17
Tabelas - Colunas As tags <th> e <td> inserem as colunas (células) em uma tabela. A diferença entre as tags <th> e <td> é que a tag <th> geralmente é usada para o cabeçalho das tabelas, pois ela coloca o conteúdo das células centralizado e em negrito. Sintaxe: <td width= largura height= altura align= [left/center/right] bgcolor= [cor da célula] background= [url da imagem da célula] cellpadding= [distanciamento] cellspacing= [espaçamento] align= [left/right/center] valign= [top/middle/bottom] colspan= [qtde colunas] rowspan= [qtde linhas] > OBS: Lembre-se que esta tag deve ser usada entre as tags <table> e <tr>. 18
Tabelas Sintaxe Completa: <table width= largura height= altura align= [left/center/right] bgcolor= [cor de fundo da tabela] background= [url imagem tabela] cellpadding= [distanciamento interno] cellspacing= [espaçamento entre células] border= [espessura] bordercolor= [cor da borda] frame= estilo borda > <tr align= [left/right/center] valign= [top/middle/bottom] bgcolor= [cor de fundo da célula] background= [url da imagem de fundo da célula] > </td> </tr> </table> <td width= largura height= altura align= [left/center/right] bgcolor= [cor da célula] background= [url da imagem da célula] cellpadding= [distanciamento] cellspacing= [espaçamento] align= [left/right/center] valign= [top/middle/bottom] colspan= [qtde colunas] rowspan= [qtde linhas] > Conteúdo da célula 19
Tabelas - Exemplo <html><head><title>utilizando tabelas</title></head><body> <table width="80%" border="1" cellspacing="2" cellpadding="0"> <tr> <th width="50%" height="28" bgcolor="#0066ff">nome</th> <th width="17%" bgcolor="#0066ff">nota 01</th> <th width="16%" bgcolor="#0066ff">nota 02</th> <th width="17%" bgcolor="#0066ff">média Final</th> </tr><tr> <td height="42" bgcolor="#0099ff">aluno 01</td> <td align="center" valign="middle" bgcolor="#0099ff">6,0</td> <td align="center" valign="middle" bgcolor="#0099ff">8,0</td> <td align="center" valign="middle" bgcolor="#0099ff">7,0</td> </tr><tr> <td height="46" bgcolor="#00ccff">aluno 02</td> <td align="center" valign="middle" bgcolor="#00ccff">8,5</td> <td align="center" valign="middle" bgcolor="#00ccff">9,5</td> <td align="center" valign="middle" bgcolor="#00ccff">9,0</td> </tr><tr> <td colspan="3" align="right" bgcolor="#0099ff"><strong>média da Turma: </strong></td> <td bgcolor="#0099ff">8,0</td> </tr></table></body></html> 20
Exercício 1 Crie uma nova página com o nome de Aula05.html que: Contenha background na cor preta (#000000 ou black). Contenha no topo o nome Exercício Aula 05 indo e voltando de um lado para o outro da página Contenha na parte central, uma ficha com seus dados pessoais: nome, matrícula, telefone e endereço. Contenha na parte inferior uma lista composta pelos três tipos de listas aninhadas. Contenha uma linha separando as 3 partes textuais. 21
Exercício 2 Faça um página que contenha o texto Faculdades Integradas de Mineiros entre duas imagens. Coloque o link do texto apontando para o site http://www.fimes.edu.br. Na imagem da esquerda, coloque um link apontando para o endereço: http://www.ufu.br. Na imagem da direita acrescente um link apontando para o endereço: http://www.ufg.br 22
Exercício 3 Com base no exercício que vocês fizeram sobre spam, phishing, etc., faça: Divida cada pergunta e resposta em uma página separada. Crie uma nova página chamada index.html. (Esta página deverá conter links para as demais. Procure uma imagem de voltar na internet e coloque em cada página, exceto na index, um link sobre esta imagem para a página index.html 23
Exercício 4 Faça uma página que represente o desenho abaixo 24
Exercício 5 Faça a tabela ao lado 25
Boa Noite! 26