Programação para Internet I Aula 05 e 06 Fernando F. Costa [email protected] 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]” <html> hspace=”[espaçamento horizontal]” <body> vspace=”[espaçamento vertical]”> <marquee direction=”left”> Seu Texto Texto animado </marquee> </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 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 </td> </tr> </table> 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
Download
