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
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
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
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
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
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>

<head>
<title> Meu documento HTML </title>
</head>
<body>
...

...
</body>
</html>
7/19
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><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
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
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
Estilos de Caracteres
Marcadores lógicos
• Tem um significado de texto
Marcadores físicos
• Formatação física do texto
11/19
Estilos de Caracteres Lógicos
12/19
Estilos de Caracteres Físicos
13/19
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
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
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
Quebra de linha
<br /> - Salta para a próxima linha ( Enter )
Este é o primeiro parágrafo <br />
Resultaria em:
Linha horizontal
<hr> - Linha horizontal para separar seções
<hr width="50%" size="3">
17/19
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
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

HTML - Kusumoto

Transcrição

Documentos relacionados

experiência profissional - Portfólio Lucas Cardoso | 19 9705.8531

Título : B2 Regressão quadrática Conte do : Em muitos problemas

View/Open

“DROMOS” de André Silva, na Galeria 24.b

Vencedores do VI Prêmio Hugo Werneck

In for mativo

Lágrimas de enlevo

PREFEITURA MUNICIPAL DE SANTO ANDRÉ DEPARTAMENTO

Aula 11

50 anos - Galeria de Arte André