Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto

Tamanho: px

Começar a partir da página:

Download "Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com"

Juan Bardini do Amaral
8 Há anos
Visualizações:

1 Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto

2 Conceitos de HTML Prof. André Y. Kusumoto Definição de HTML Linguagem de marcadores (tags). Linguagem descritiva que utiliza instruções para formatação do texto e criação de relacionamentos com outros documentos. É uma linguagem interpretada. Não é uma linguagem de programação. Vantagens no uso de linguagem de marcadores É um documento multiplataforma Posso abrir o documento em vários browsers Novos códigos vão sendo acrescidos sem prejuízo para documentos de versões anteriores. 2/19

É uma linguagem interpretada. Não é uma linguagem de programação.

3 Prof. André Y. Kusumoto HTML Exemplo <html> <head> <title>exemplo de uma Página HTML </title> </head> <body bgcolor= #a4a4a4 > <h1>curso de Ciência da Computação</h1> <h2>disciplina de Desenvolvimento em Ambiente Web</h2> <p><a href= target= blank >Clique aqui para acessar o site do Prof. André Kusumoto</a></p> </html> </body> 3/19

#a4a4a4 > <h1>curso de Ciência da Computação</h1> <h2>disciplina de Desenvolvimento em Ambiente

4 HTML Prof. André Y. Kusumoto O CABEÇALHO Todo documento HTML deve começar declarando a si mesmo como tal. Você faz isso com o comando <html>, colocado no começo dele. A última diretiva do documento será, portanto, </html>. Perceba que todo comando finalizador utiliza a barra "/" para sinalizar o fechamento do trecho sendo formatado. O topo do documento deverá conter também uma seção cabeçalho, delimitado pelo par <head>... </head>. Você deverá inserir sempre um comando na declaração <head>: trata-se do título do documento. Ele será contido pelo par <title>... </title>. Geralmente, o título não é mostrado na página, porém os browsers o utilizam para titular a janela de visualização. Coloque um título bem claro e explicativo para seus documentos. 4/19

O topo do documento deverá conter também uma seção cabeçalho, delimitado pelo par <head>... </head>. Você deverá inserir sempre um comando na declaração <head>: trata-se do título do documento.

5 Prof. André Y. Kusumoto HTML O CABEÇALHO <meta> Envia informações adicionais para o servidor HTTP (não são exibidas pelo browser) <meta name= nome content= conteúdo > nome - nome de um cabeçalho HTTP conteúdo - contém o valor do cabeçalho <meta name= Author content= Vito Corleone > 5/19

(não são exibidas pelo browser) <meta name= nome content= conteúdo > nome -

6 HTML Prof. André Y. Kusumoto Exemplo <html> <head> <title>usando Meta</title> <meta name= Author content= Vito Corleone > </head> <body> <h1>don Vito Andolini Corleone</h1> </body> </html> 6/19

7 Prof. André Y. Kusumoto HTML O CORPO O "corpo" do documento deve ser demarcado pelo par <body>... </body>. Nesta parte do documento serão colocados todos os comandos para apresentação de uma página HTML. Um documento típico seria codificado da seguinte maneira: <html> </html>  <head> <title> Meu documento HTML </title> </head> <body>... ... </body> 7/19

Nesta parte do documento serão colocados todos os comandos para apresentação de uma página HTML.

8 HTML Prof. André Y. Kusumoto O CORPO Os espaços em branco são ignorados pelo interpretador HTML, o código anterior poderia ser escrito da seguinte forma: <html><head><title> Meu documento HTML </title></head><body>......</body></html> A vantagem é que isto economiza espaço em disco mas, é uma maneira muito confusa e relaxada de programar, acostume-se a organizar seus programas para poder entendê-los posteriormente. 8/19

forma: <html><!-- COMENTÁRIO --><head><title> Meu documento HTML </title></head><body>...<!-- Textos, imagens, comandos etc.

9 Prof. André Y. Kusumoto HTML Exemplo: <body background= imagem bgcolor= cor text= cor >... </body> background - especifica a imagem (GIF ou JPEG) de fundo bgcolor - especifica a cor de fundo da página text - cor do texto da página Tabela de Cores - padrão RGB Cor Hexadecimal YELLOW #FFFF00 BLACK # BLUE #0000FF RED #FF0000 GREEN #00FF00 WHITE #FFFFFF 9/19

.. </body> background - especifica a imagem (GIF ou JPEG) de fundo bgcolor - especifica a cor de

10 Prof. André Y. Kusumoto Formatação de Textos <font> Exibe o texto no tamanho de fontes e cores especificados <font size= n color= cor face= fonte > size - tamanho da fonte (1 a 7, default 3) color - cor desejada face - tipo da fonte 10/19

11 Prof. André Y. Kusumoto Formatação de Textos Estilos de Caracteres Marcadores lógicos Tem um significado de texto Marcadores físicos Formatação física do texto 11/19

12 Formatação de Textos Estilos de Caracteres Lógicos Prof. André Y. Kusumoto 12/19

13 Formatação de Textos Estilos de Caracteres Físicos Prof. André Y. Kusumoto 13/19

14 Prof. André Y. Kusumoto Estilos de Caracteres Físicos <big> Texto em fonte maior <big>exemplo</big> Formatação de Textos <small> Texto em fonte menor <small>exemplo</small> <center> Centraliza na página trechos de texto e imagens <center>exemplo</center> 14/19

15 Prof. André Y. Kusumoto Formatação de Textos Cabeçalhos Escreva seus documentos de forma que os "níveis" dos tópicos e subtópicos reflitam sua organização. Com os tópicos em texto maior (nível 1) e subtópicos em texto menores (nível 2) e assim por diante. O comando de cabeçalho é definido pelo par <hn> </hn>, onde n representa seu nível, sendo numerado de 1 a 6. <hn align= tipo >...</hn> onde tipo= (left, right, center) <h1> Cabeçalho 1 </h1> <h2 align= center > Cabeçalho 2 </h2>... <h6> Cabeçalho 6 >/h6> 15/19

Com os tópicos em texto maior (nível 1) e subtópicos em texto menores (nível 2) e assim por diante.

16 Formatação de Textos Prof. André Y. Kusumoto Parágrafos <p> - Define um parágrafo <p>este é o primeiro parágrafo </p> <p>este é o segundo parágrafo. </p> - Resultaria em: Este é o primeiro parágrafo Este é o segundo parágrafo. - Se não tivesse colocado <p>, o resultado seria este: Este é o primeiro parágrafoeste é o segundo parágrafo. 16/19

17 Quebra de linha Formatação de Textos <br /> - Salta para a próxima linha ( Enter ) Este é o primeiro parágrafo <br /> Este é o segundo parágrafo. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Resultaria em: Este é o primeiro parágrafo Este é o segundo parágrafo. Linha horizontal <hr> - Linha horizontal para separar seções Este é o primeiro parágrafo <hr width="50%" size="3"> Este é o segundo parágrafo. 17/19

com Resultaria em: Este é o primeiro parágrafo Este é o segundo parágrafo.

18 Exercícios Prof. André Y. Kusumoto Faça uma página com a bibliografia de cada aluno da dupla utilizando as tags que você conheceu. Como sugestão, coloque as seguintes informações: Nome completo (Título 1) Data de nascimento Atividades preferidas Por que escolheu o curso de Ciência da Computação? Qual o meu time de futebol? Outros 18/19

19 Prof. André Y. Kusumoto Referências Notas de aula Prof. José Marcos Barbosa da Silveira. Disponível em Acessado em 25/01/2010. Notas de aula Prof. Paulo Roberto Travassos,. Tópicos Avançados em Sistemas. Lemay, Laura. Aprenda a Criar Páginas Web com Html e Xhtml, em 21 dias. Makron Books, Cavalcante, Victor. Web Standards, notas de aula. 19/19

Notas de aula Prof. Paulo Roberto Travassos,. Tópicos Avançados em Sistemas. Lemay, Laura.

Documentos relacionados

QUEM FEZ O TRABALHO?

Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome