HTML - Kusumoto
Transcrição
HTML - Kusumoto
Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto [email protected] Prof. André Y. Kusumoto – [email protected] Conceitos de HTML 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 Prof. André Y. Kusumoto – [email protected] 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=”http://www.kusumoto.com.br/” target=”blank”>Clique aqui para acessar o site do Prof. André Kusumoto</a></p> </body> </html> 3/19 Prof. André Y. Kusumoto – [email protected] HTML 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 Prof. André Y. Kusumoto – [email protected] 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 Prof. André Y. Kusumoto – [email protected] HTML 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 Prof. André Y. Kusumoto – [email protected] 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> <!-- COMENTÁRIO --> <head> <title> Meu documento HTML </title> </head> <body> ... <!-- Textos, imagens, comandos etc. --> ... </body> </html> 7/19 Prof. André Y. Kusumoto – [email protected] HTML O CORPO • Os espaços em branco são ignorados pelo interpretador HTML, o código anterior poderia ser escrito da seguinte forma: <html><!-- COMENTÁRIO --><head><title> Meu documento HTML </title></head><body>...<!-- Textos, imagens, comandos etc. -->...</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 Prof. André Y. Kusumoto – [email protected] 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 BLACK BLUE RED GREEN WHITE #FFFF00 #000000 #0000FF #FF0000 #00FF00 #FFFFFF 9/19 Prof. André Y. Kusumoto – [email protected] 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 Prof. André Y. Kusumoto – [email protected] 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 Prof. André Y. Kusumoto – [email protected] Formatação de Textos Estilos de Caracteres Lógicos 12/19 Prof. André Y. Kusumoto – [email protected] Formatação de Textos Estilos de Caracteres Físicos 13/19 Prof. André Y. Kusumoto – [email protected] Formatação de Textos Estilos de Caracteres Físicos <big> Texto em fonte maior <big>Exemplo</big> <small> Texto em fonte menor <small>Exemplo</small> <center> Centraliza na página trechos de texto e imagens <center>Exemplo</center> 14/19 Prof. André Y. Kusumoto – [email protected] 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 Prof. André Y. Kusumoto – [email protected] Formatação de Textos 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 Prof. André Y. Kusumoto – [email protected] Formatação de Textos Quebra de linha <br /> - Salta para a próxima linha ( Enter ) Este é o primeiro parágrafo <br /> Este é o segundo parágrafo. 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 Prof. André Y. Kusumoto – [email protected] Exercícios 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) •E-mail •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 Prof. André Y. Kusumoto – [email protected] Referências • • • • Notas de aula Prof. José Marcos Barbosa da Silveira. Disponível em http://www.profmarcos.cjb.net. 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, 2002. Cavalcante, Victor. Web Standards, notas de aula. 19/19