Académique Documents
Professionnel Documents
Culture Documents
DE
HTML
Escola Técnica (Professor: Ronni M. Madeira) Página: 2
Linguagem HTML
O Que é HTML ?
Você aprenderá o que é HTML, o que é uma página HTML e como salvá-la.
Neste curso utilizaremos os termos "Página Web" e "Página HTML" como sinônimos.
Browser, também conhecido como navegador, é o programa que permite a exibição e a interação
entre páginas Web. Os mais conhecidos são o Netscape Navigator e o Microsoft Internet
Explorer.
• Sumário
Você aprendeu o que é HTML, o que é uma página HTML e como salvá-la.
Veremos, no decorrer do curso, algumas tags que não precisam ser fechadas.
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
Escola Técnica (Professor: Ronni M. Madeira) Página: 4
• Sumário
Você aprendeu o que são tags e quais são as principais tags de uma página. Aprendeu,
também, quais elementos compõem a estrutura básica de uma página HTML.
Inserindo Texto
Você aprenderá a inserir título e texto em uma página HTML, alinhar, mudar de linha,
inserir parágrafos e cabeçalhos.
Insira um título em sua página digitando entre as tags <head> e </head> o comando:
<title>Curso de HTML</title>. O nome dado ao título será exibido na barra de títulos do
navegador. Insira um texto em sua página digitando: Meu curso de HTML entre as tags
<body> e </body>. Após inserido o título e o texto, a estrutura do arquivo ficará assim:
<html>
<head><title>Curso de HTML</title></head>
<body>Meu curso de HTML</body>
</html>
Tenha cuidado ao criar a estrutura da página, pois se uma tag estiver aberta, ou seja,
sem um dos caracteres <, > ou /, você não visualizará corretamente a página em um
Browser.
Escola Técnica (Professor: Ronni M. Madeira) Página: 5
• Alinhando o texto
Após inserir o texto, aprenda como alinhá-lo em sua página HTML.
As tags de alinhamento do texto são: <div> e </div>
O atributo de alinhamento é: align
As opções de alinhamento são:
center - texto centralizado
right - texto à direita
left - texto à esquerda
Volte ao Bloco de notas, clicando no botão correspondente na Barra de tarefas do Windows.
Note que a tag <div> foi finalizada com a tag </div>. O recurso align=center, não
precisa ser repetido no fechamento do comando, pois ele não é uma tag e sim um
atributo das tags <div> e </div>.
Escola Técnica (Professor: Ronni M. Madeira) Página: 6
• Inserindo parágrafos
Uma das diferenças na construção de páginas HTML e textos tradicionais
é que não é possível adicionar parágrafo em HTML apenas pressionando
a tecla Enter. É necessário forçar o fim do parágrafo ou a quebra de linha
utilizando comandos especiais. As tags de parágrafos são: <p> e </p> Com o arquivo
"iniciando.html" aberto no Bloco de notas:
1. Posicione o cursor após a tag </div>. Você pode iniciar uma nova linha pressionando Enter.
2. Digite: <p>Definindo parágrafo na página HTML</p>
3. Salve o arquivo, clicando no menu Arquivo e em Salvar.
4. Vá para o navegador e dê um clique no botão Atualizar (Explorer) ou Reload (Navigator),
para visualizar o parágrafo inserido em sua página.
Note que entre as duas frases, houve uma quebra de linha automática.
• Inserindo cabeçalho
O cabeçalho é uma tag que define o tamanho de cada linha de um texto
da página. O tamanho do cabeçalho pode ser diferenciado.
1. No Bloco de notas, posicione o cursor após o texto "quebra de linha" e
pressione a tecla Enter para iniciar uma nova linha.
2. Digite: <h1>Inserindo cabeçalho<h1>.
3. Pressione a tecla Enter e digite: <h2>Inserindo cabeçalho</h2>.
4. Pressione a tecla Enter novamente e repita estes passos até <h6>.
5. Salve o arquivo no Bloco de notas e atualize-o no navegador.
• Sumário
Você aprendeu a inserir título e texto em uma página HTML, alinhar, mudar de linha, inserir
parágrafos e cabeçalhos.
Escola Técnica (Professor: Ronni M. Madeira) Página: 7
Você utilizará uma única tag e diferentes atributos para especificar tamanho, cor
e tipo de fonte.
A sintaxe da tag e seus atributos é:
<font size=n face="nome da fonte" color=#000000>texto aqui</font>.
Onde:
Size define o tamanho da fonte (n varia de 1 a 7).
Face define o tipo da fonte.
Color define a cor da fonte (em valores hexadecimais).
Para aplicar cor em um texto ou em qualquer outro comando HTML, é preciso conhecer a tabela de cores.
Escola Técnica (Professor: Ronni M. Madeira) Página: 8
Substitua as formatações atuais por outras opções de cores, fontes e tamanhos e visualize a diferença.
• Sumário
Você aprendeu a alterar a aparência do texto, mudando as fontes e atributos
como tamanho, cor e estilo.
• Inserindo links
Veja como é simples inserir links em uma página HTML. A tag link é: <a>
e </a>.
O atributo é: href. O par de tags <a> e </a> cria o link entre as páginas e o
atributo "href" informa o endereço da página de destino.
1. Crie uma nova página HTML com a estrutura básica no Bloco de notas.
2. Após a tag <body>, digite: experiência profissional.
3. Salve este arquivo com o nome: experiencia.html.
4. Clique no menu Arquivo e em Novo e crie outra estrutura básica.
5. Digite após a tag <body>: <a href="experiencia.html">Entrar na página experiência
profissional</a>.
6. Salve este arquivo com o nome "curriculo.html" e verifique se o link está funcionando. Abra o
navegador e clique sobre a frase: Entrar na página experiência profissional.
7. Ao clicar no link, a página "experiencia.html" se abrirá automaticamente.
O formato jpg ou jpeg (Joint Photografic Experts Group) é mais utilizado para
fotos.
Para criar uma imagem com extensão .gif ou .jpg é necessário utilizar um
programa de edição gráfica, como por exemplo o Photoshop ou o CorelDRAW.
• Inserindo imagens
A inclusão de imagens em uma página HTML dá mais qualidade ao
trabalho. É fácil incluir uma imagem na página HTML. A sintaxe é:<img
src="nome da imagem"> Não é necessário fechar esta tag.
A imagem criada deve ser salva na mesma pasta que contém as páginas HTML
para que o navegador possa abri-la.
</head>
<body bgcolor="#FFFF00">O fundo desta página é amarelo</body>
</html>
3. Salve este arquivo com o nome: fundo.html. Abra-o no navegador.
• Sumário
Você aprendeu o que são Links e como criá-los, quais os tipos de imagens que
podem ser inseridas em uma página HTML e como adicionar uma cor e uma
imagem ao fundo da página.
Referências de TAGS
Você visualizará uma lista com as tags que aprendeu no curso de HTML Básico e terá a
oportunidade de criar uma página pessoal.
• Tabela de tags
Visualize, abaixo, uma tabela contendo as tags aprendidas durante o curso.
Tags Função
<html> e </html>
Início e fim da estrutura de uma página HTML.
Todo o documento deve estar entre estas tags.
<a href="arquivo.html"> Texto Link </a> Cria link para outra página.
<font size=10 face="Arial black" Define tamanho, tipo, cor. Pode-se utilizar o
color=#000000>Texto </font> nome da cor em inglês em vez do código.
Note que neste exemplo foram inseridas as tags vistas ao longo deste curso.
• Sumário
Você visualizou uma lista com as tags que aprendeu no curso de HTML Básico e criou uma
página pessoal.
Mensagem Animada
<MARQUEE behavior=alternate height=36 scrollAmount=3 width=344> Mensagem </MARQUEE>
alternado altura Velocidade largura
Atributos da Página
<body bgcolor="cor_do_fundo" text="cor_do_texto" link="não_selecionado" vlink="link_selecionado">
Tabelas
<TABLE BORDER=2>
<CAPTION>Legenda</CAPTION>
<TR> <TD>Teste </TD> <TD> de </TD> </TR>
<TR> <TD>Tabela</TD> <TD>Html</TD> </TR>
</TABLE>
Legeda
Teste de
Tabela Html
Escola Técnica (Professor: Ronni M. Madeira) Página: 13
Âncoras Internas
(encontrar um texto na página)
Para Linkar:
<A HREF="#Texto">Clique para ir para o Texto</A>
Para marcar:
<A NAME="Texto"><!- -></A>
Texto a ser encontrado.
Âncora para outra página: (segue para próxima página e para em determinado ponto "Texto")
<A HREF="pag2.htm#Texto">Página 2, Texto</A>