Programação para Internet I

Transcrição

1 Programação para Internet I Aula 03 Prof. Fernando F. Costa nando@fimes.edu.br Prof. Fernando 1

2 HTML - Acentuação Não é recomendável utilizar acentos em documentos web Problemas Pode haver má interpretação destes caracteres especiais Solução Utilizar a tabela de caracteres especiais que representam os acentos. Prof. Fernando 2

3 Códigos para Acentuação Alguns códigos de acentuação: Prof. Fernando 3

4 Tags Básicas HTML Indica ao browser que o documento está escrito em html. Sintaxe: <html>... </html> Exemplo: <html> Meu primeiro contato com html </html> Prof. Fernando 4

5 Tags Básicas Comentários Não são compiladas pelo browser. Servem para que a pessoa que tem acesso ao código possa fazer comentários particulares. Exemplo: <html> Sintaxe:  Meu primeiro contato com html  </html> Prof. Fernando 5

6 Tags Básicas Head Determina comandos que devem ser lidos antes do site ser carregado, como por exemplo, título da página, linguagens incorporadas, etc. Tag opcional, mas buscadores como o Google utilizam esta tag como parâmetros. Sintaxe: <head> </head> Prof. Fernando 6

7 Tags Básicas Title Identifica o título da página que será exibido na barra de títulos. Deve ser utilizada juntamente com a tag head. Sintaxe: <head> <title> </title> </head> Prof. Fernando 7

8 Tags Básicas Exemplo: <html> <head> <title> Título da Página </title> </head> Meu primeiro contato com html  </html> Prof. Fernando 8

9 Tags Básicas Meta Define atributos identificadores do site como autor da página, direitos autorais, palavras-chave, etc. Sintaxe: <meta name=... content=... > Prof. Fernando 9

10 Tags Básicas Atributos da tag meta: Name Determina qual identificador será adicionado na página Author identifica o autor da página Copyright Direitos autorais Keywords Palavras-chave Content Determina o conteúdo do identificador. Se houver mais de um deve ser separado por vírgula. http_equiv= refresh - Recurso da tag meta que permite determinar um tempo em segundos para que o browser seja redirecionado para outra página. Prof. Fernando 10

11 Tags Básicas Exemplo: <html> <head> <meta name= author content= Fernando F. Costa > <meta name= copyright content= UNIFIMES > <meta name= keywords content= primeira página, HTML, aula 03 > Conhecendo a tag meta... </head> </html> Prof. Fernando 11

12 Tags Básicas Exemplo com uso do atributo http-equiv= refresh : <html> <head> <meta name= author content= Fernando F. Costa > <meta name= copyright content= FIMES > <meta name= keywords content= primeira página, HTML, aula 03 > <meta http-equiv= refresh content= 10; url=meta.html > Aguarde, você será redirecionado em 10 segundos... </head> </html> Prof. Fernando 12

13 Tags Básicas BODY Define o início e o fim do corpo da página. Define também a cor de fundo e o papel de parede de uma página. Sintaxe: <body>...</body

14 Tags Básicas Atributos da tag body: Bgcolor define a cor de fundo da página Background define a imagem de fundo do site. Com html puro não é possível controlar a imagem, ou seja, se a imagem for menor que o fundo do site, ela será repetida até preencher todo o espaço.

15 Tags Básicas Exemplo de uso do atributo bgcolor <html> <head> <title>uso do BgColor</title> </head> <body bgcolor="blue"> Utilizando o BgColor </body> </html>

16 Tags Básicas Exemplo de uso do atributo background <html> <head> <title>uso do BackGround</title> </head> <body background= MinhaImagem.jpg > Uso do atributo BackGround </body> </html>

17 Controlando a quebra de linhas A linguagem html não é capaz de interpretar formatações feitas utilizando o Enter, o TAB, a barra de espaço (quando houverem 2 ou mais espaços). Exemplo: <html> Linha 1 Linha 2 </html>

18 Controlando a quebra de linhas Para que a quebra de linha seja interpretada pelo browser, é necessário o uso da tag que faz a quebra de linha. Exemplo: <html> Linha 1 Linha 2 </html>

19 Controlando a quebra de linhas Obs: A quebra de linha ocorre automaticamente quando o tamanho do texto excede o tamanho da janela do navegador. Se for necessário podemos indicar que não ocorra esta quebra de linha através da tag Sintaxe: ...

20 Exemplo de uso do <html> <head> <title>utilizando o nobr</title> </head> <body> a linguagem html não é capaz de interpretar formatações feitas utilizando o Enter, o TAB, a barra de espaço (quando houverem 2 ou mais espaços). Para que a quebra de linha seja interpretada pelo browser, é necessário o uso da tag que faz a quebra de linha. </body> </html>

21 Tags de Formatação de Texto Tag <H> A tag <H> é utilizada para definir títulos em uma página. Ela possui variações de 1 a 6 que definem a prioridade do título. Sintaxe <Hx align=[left/right/center]>título </Hx>, onde x varia de 1 a 6 Prof. Fernando F. Costa 21

22 Tags de Formatação de Texto Atributos da tag <H> Align - Determina o alinhamento do título. Aceita como valores: right, center ou left. Exemplo de uso <H1 align= center >Título 1</H1> Prof. Fernando F. Costa 22

23 Tags de Formatação de Texto Tag A tag permite alterar as fontes de uma página. Sintaxe Texto Prof. Fernando F. Costa 23

24 Tags de Formatação de Texto Atributos da tag Size - Define o tamanho da fonte. Pode-se utilizar um valor absoluto ou relativo. Valores absolutos: variam entre 1 e 7, onde quanto maior o valor, maior a fonte. Valores relativos: variam entre -4 e +4. Valores negativos indicam fonte menores que a padrão e valores positivos indicam fontes maiores que a padrão. Face = Define a fonte a ser utilizada. Caso a primeira fonte não seja encontrada, procura a segunda opção e fonte, depois a terceira e assim sucessivamente. Prof. Fernando F. Costa 24

25 Tags de Formatação de Texto Atributos da tag Color Define a cor da fonte. Aceita nome dar cor em inglês ou seu código hexadecimal Exemplo de uso Seu Texto Prof. Fernando F. Costa 25

26 Tags de Formatação de Texto Tag <PRE> A tag <PRE> (abreviação de preformatted) exibe o texto no navegador com a mesma formatação que foi digitado no código fonte. Sintaxe <PRE> Texto </PRE> Prof. Fernando F. Costa 26

27 Exemplo utilizando as tags FONT, H e PRE <html> <body> <h1 align="center">tags de formatação de texto </h1> <h2>atributos da tag </h2> <pre> Size - Define o tamanho da fonte. Pode-se utilizar um valor absoluto ou relativo. Valores absolutos: variam entre 1 e 7, onde quanto maior o valor, maior a fonte. Valores relativos: variam entre -4 e +4. Valores negativos indicam fontes menores que a padrão e valores positivos indicam fontes maiores que a padrão. </pre> Face = Define a fonte a ser utilizada. Caso a primeira fonte não seja encontrada, procura a segunda opção e fonte, depois a terceira e assim sucessivamente. </body> </html> Prof. Fernando F. Costa 27

28 Resultado esperado Prof. Fernando F. Costa 28

29 Tags de Formatação de Texto TAG ou - Coloca o texto em negrito. Sintaxe: texto em negrito TAG ou - Coloca o texto em itálico. Sintaxe: texto em itálico TAG - Coloca sublinhado no texto. Sintaxe: texto sublinhado Prof. Fernando F. Costa 29

30 Exemplo de uso das Tags b, i e u <html> <body> Este é um texto de exemplo. Aqui você está vendo o uso das tags para texto em negrito, para texto sublinhado e para texto itálico. </body> </html> Prof. Fernando F. Costa 30

32 Tags de Formatação de Texto TAG <STRIKE> ou <S> - Coloca um risco sobre o texto. Sintaxe: <s>texto riscado</s> TAG <BIG> - Coloca a fonte um pouco maior. Tem efeito acumulativo. Sintaxe: <big>texto um pouco maior</big> TAG - Coloca a fonte um pouco menor. Possui efeito acumulativo. Sintaxe: texto um pouco menor Prof. Fernando F. Costa 32

33 Exemplo de uso das tags strike, big e small <html> <body> Este é um texto de exemplo. Aqui você pode ver como funciona a tag <strike> que deixa o <strike>texto riscado</strike>. Também está vendo que a tag <big> deixa o texto com a fonte um <big>pouco maior</big>, além da tag que deixa o texto com a fonte um pouco menor. </body> </html> Prof. Fernando F. Costa 33

35 Tags de Formatação de Texto TAG - Coloca o texto subscrito, ou seja, o texto fica um pouco abaixo da linha normal e um pouco menor. Sintaxe: texto subscrito TAG - Coloca o texto sobrescrito, ou seja, o texto fica um pouco acima da linha normal e um pouco menor. Sintaxe: texto sobrescrito Prof. Fernando F. Costa 35

36 Exemplo de uso das tags sub e sup <html> <body> Este é um texto de exemplo. Aqui você pode ver como funciona as tags que é muito útil em fórmulas químicas como: H2O, CO2. Pode-se ver também o uso da tag que é muito útil para se escrever fórmulas matemáticas como. (x+y)2 = x2 + 2xy + y2. </body> </html> Prof. Fernando F. Costa 36

38 Exercício Crie uma página web com as tags apresentadas até hoje, de forma a responder as seguintes perguntas: O que é spam, fishing e spyware? Quais são as novidades do HTML 5? Os browsers atuais já oferecem suporte a ele? Quais as novidades do CSS3? Os browsers atuais já oferecem suporte a ele? Tabela de cores utilizadas Atenção: Usar codificação especial para acentos e cedilhas.

39 Boa Noite! Prof. Fernando 39