Curso Básico de Homepage

	HTML - Hypertext Markup Language, na sigla em inglês, significa Linguagem de Marcação de Hipertexto. É uma linguagem dedicada à construção de páginas Web.
	Os objetivos básicos da HTML são:
	· formatar o conteúdo de uma página Web · criar ligações entre várias páginas
	HTML é uma linguagem de programação baseada em códigos especiais denominados tags.

	Hipertexto é o conceito que possibilita a "navegação" entre segmentos de texto independentemente de sua seqüência linear ou de sua localização.

A página Web é um documento criado através do código HTML, que pode ser visualizado na rede mundial de computadores.
Além de textos, as páginas Web aceitam imagens, animações, sons e vídeos.
O código HTML, utilizado na criação da página Web, pode ser escrito em qualquer editor de textos, por mais simples que seja, como o Bloco de notas do Windows.

Visualize abaixo, um exemplo de código-fonte de uma página HTML.


	Neste curso utilizaremos os termos "Página Web" e "Página HTML" como sinônimos.

É obrigatório salvar a página no formato HTML, para que você possa
visualizá-la em um browser.

Vamos utilizar o Bloco de notas do Windows como nosso editor de HTML.

1. clique no botão , localizado na barra de tarefas do Windows.

2. Em seguida, clique em e .

O Bloco de notas é aberto e mostra uma página em branco.

3. Clique no menu e, em seguida, clique em .

4. Crie uma nova pasta clicando no ícone (Criar nova pasta).

5. No campo Nova pasta, digite: curso_de_html_basico. Pressione a tecla Enter.

6. Dê dois cliques sobre a pasta para abri-la.

7. No campo Nome do arquivo, digite: iniciando.html e clique em .

Salve todos os arquivos (páginas html, imagens, etc.) dentro da mesma
pasta, para que a página html carregue-os em seu conteúdo.
Acrescente a extensão .html ou .htm depois do nome do documento para
que o browser reconheça-o como um arquivo HTML.

Importante :

O navegador é um compilador, ou seja, ele interpreta a linguagem HTML e exibe na tela a formatação da página, definida através dos códigos, conhecidos como tags.
As tags são identificadas facilmente por serem envolvidas pelos sinais "< >" (menor e maior) e "< / >" (menor, barra, maior).
O formato genérico de uma tag é: <nome da tag>texto</nome da tag>. A barra indica que a tag está sendo fechada.
As tags são utilizadas aos pares. Elas "cercam" uma faixa de texto e o altera. Exemplo: <i>texto em itálico</i> faz com que o texto entre as tags apareça assim em um browser: texto em itálico. A tag com a barra " / " indica que ali fecha-se o cerco que envolve um texto.

Veremos, no decorrer do curso, algumas tags que não precisam ser fechadas.

Nos próximos tópicos você verá como utilizar as principais tags , mas antes conheça a estrutura de uma página HTML.

As tags <html> e </html> são a identificação de uma página HTML, ou seja,
fazem com que a página não seja considerada um documento de texto comum.

Você deve utilizar a tag <html> para iniciar a estrutura de uma página HTML e a
tag </html> para encerrar esta estrutura.

O par de tags <head> e </head> é usado para especificar o cabeçalho da página. O cabeçalho contém informações sobre a página que não aparecem no navegador.

Entre as tags <body> e </body> se constrói o corpo da página HTML, ou seja,
entre elas são colocados os textos, imagens e links.

Visualize, logo abaixo, a estrutura básica de uma página HTML.

Veja como é simples inserir título e texto em uma página HTML.
Abra o arquivo "iniciando.html" salvo anteriormente e crie uma estrutura básica.
<html> <head> </head> <body> </body> </html>
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.

Após ter inserido o título e o texto em sua página, você visualizará o resultado em seu navegador.
Antes de mais nada, salve o arquivo "iniciando.html" clicando no menu e em do Bloco de notas.
1. Em seguida, abra o Windows Explorer, clicando no botão da Barra de tarefas do Windows.
2. Clique em .
3. Abra a pasta "curso_de_html_basico" e clique duas vezes sobre o arquivo "iniciando.html", para abri-lo.

	O seu navegador será aberto e exibirá o arquivo com o título e o texto inserido. Clique no botão Voltar de seu navegador para retornar à página do curso.

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.


Com o arquivo "iniciando.html" aberto:
1. Posicione o cursor antes da expressão "Meu curso de HTML"
2. Digite o comando para centralizar o texto:
<div align="center">Meu curso de HTML</div>
3. Salve a página clicando no menu e em .
4. Volte ao navegador, clique no botão Atualizar (Explorer) ou Reload (Navigator) para ver o texto centralizado.
Clique aqui para ver diferentes opções de alinhamento.

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

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 a tecla Enter.
2. Digite: <p>Definindo parágrafo na página HTML</p>
3. Salve o arquivo, clicando no menu e em .
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.

A tag </p> não precisa do fechamento para funcionar. No entanto, em documentos que usam componentes avançados da linguagem, a correspondente de fechamento é necessária. Por isso é melhor se habituar a colocar o par de tags

Veja como é simples inserir quebras de linhas em seu texto.
A tag para quebra de linha é: <br>
Esta tag pode ser inserida em qualquer ponto do corpo de sua página HTML.
1. Volte ao arquivo "iniciando.html" no Bloco de notas.
2. Após a tag </p> digite: quebra de linha. Em seguida, digite a tag <br> e novamente digite: quebra de linha.
A estrutura ficará assim: quebra de linha <br> quebra de linha. Obs: A tag <br> não utiliza a tag de fechamento.
3. Salve o arquivo no Bloco de notas e atualize-o no navegador.

Note que entre as duas frases, houve uma quebra de linha automática

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.

A tag cabeçalho possui 6 opções de tamanho: de <h1> até <h6>.

Você aprendeu a inserir título e texto em uma página HTML, alinhar, mudar de linha, inserir parágrafos e cabeçalhos

Você aprenderá a alterar a aparência do texto, mudando as fontes e atributos como tamanho, cor e estilo.

A HTML permite que você deixe o texto mais dinâmico, atribuindo novas cores, fontes e tamanhos.
Formate um texto de acordo com a sequência:
1. Inicie um novo documento no Bloco de notas, clicando no menu e em .
2. Digite a estrutura padrão.
3. Posicione o cursor após a tag <body>.
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).
4. Digite: <font size="4" color="#0000ff" face="courier new">Curso de HTML</font>.
5. Salve o arquivo dentro da pasta "curso_de_html_basico" com o seguinte nome: formatando.html.
6. Abra este arquivo no browser clicando no menu e em .
7. Na caixa de diálogo Abrir, clique no botão e localize o arquivo "formatando.html" que se encontra na pasta "curso_de_html_basico".
8. Clique duas vezes sobre o arquivo e pressione o botão da caixa de diálogo Abrir.
9. Note que ao abrir o arquivo "formatando.html" no browser, o texto apresenta todas as formatações editadas na estrutura HTML.

Para aplicar cor em um texto ou em qualquer outro comando HTML, é preciso conhecer a tabela de cores. Clique aqui para visualizar algumas cores e seus valores hexadecimais.
Substitua as formatações atuais por outras opções de cores, fontes e tamanhos e visualize a diferença.

Além das formatações vistas no tópico anterior, aplique estilos variados em seu texto.
1. No arquivo "formatando.html", posicione o cursor do mouse antes do texto "Curso de HTML", e digite a tag <b>. No final do texto, antes da tag </font>, digite a tag </b>.
O par de tags <b> e </b> define o estilo Negrito no texto.
2. Salve o arquivo e atualize-o no navegador.
3. No Bloco de notas, substitua as tags <b> e </b> por <i> e </i> para aplicar o estilo Itálico ao texto.
4. Visualize o resultado no browser.
5. Use o par de tags <u> e </u> para aplicar o estilo Sublinhado ao texto.

As tags de estilo podem ser aplicadas simultaneamente, isto é, você poderá aplicar no mesmo texto o estilo negrito, itálico e sublinhado	.

Você aprendeu a alterar a aparência do texto, mudando as fontes e atributos como tamanho, cor e estilo.

Você aprenderá 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.

Veja como é simples inserir links em uma página HTML.
O par de tags para 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 e em 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 este arquivo no 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.

Dispense acentos ortográficos ao nomear uma página. Não deixe espaços entre as palavras. Ao atribuir o comando link, digite ao "pé da letra", incluindo a extensão, o nome dado à página.	Existem algumas restrições quanto à nomeação de páginas HTML:

Existem dois tipos de imagens que podem ser inseridas em uma página.
Os formatos de imagens reconhecidos pelos navegadores são: formato .jpg e formato .gif.
O formato jpg ou jpeg (Joint Photografic Experts Group) é mais utilizado para fotos.

O formato gif (Graphics Interchange Format) é mais utilizado para desenhos vetoriais, como os cliparts.

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.

Personalize sua página alterando a cor do fundo.
O comando de cor de fundo "bgcolor", é um atributo da tag <body>.
1. Abra o Bloco de notas e crie uma estrutura padrão sem a tag <body>.
2. Digite como exemplo: <body bgcolor="#FFFF00">O fundo desta página é amarelo</body>.
Com o comando inserido, a estrutura ficará assim: <html> <head> </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.

	Consulte a tabela de cores , substitua a cor amarela (#FFFF00) por outros valores hexadecimais e atualize a página. Note que a cor de fundo da página é alterada.

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.

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.

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.
<head> e </head>	Agrupa informações da página, como o título, por exemplo. Com exceção do título, informações contidas nestas tags não são exibidas no navegador.
<title> e </title>	Digite o título da página entre estas tags.
<body> e /body>	Os comandos entre estas tags são visíveis no navegador.
<i> e </i>	Aplica o estilo Itálico ao texto.
<u> e </u>	Aplica o estilo Sublinhado ao texto.
<b> e </b>	Aplica o estilo Negrito ao texto.
<br>	Utilize para quebrar linhas.
<div align= "center"> e </div>	Alinha o texto. Os atributos são "center", "right" e "left".
<a href="arquivo.html"> e </a>	Cria links.
<img src= "imagem">	Insere imagem na página com extensões .gif ou .jpg.
<font size=n face="Arial black" color=#000000>	Define o tipo, cor e tamanho da fonte. Para fechá-la, utilize </font>.
<body bgcolor=#000000>	Define a cor de fundo da página.
<body background= "imagem">	Insere imagem de fundo na página com extensões .gif ou .jpg

Você visualizou uma lista com as tags que aprendeu no curso de HTML Básico e criou uma página pessoal.

white	#FFFFFF
red	#FF0000
green	#00FF00
blue	#0000FF
magenta	#FF00FF
cyan	#00FFFF
yellow	#FFFF00
black	#000000
orange	#FF9933
bronze	#8C7853
dark green	#2F4F2F
dark green copper	#4A766E
dark olive green	#4F4F2F
dark purple	#871F78
forest green	#238E23

gold	#CD7F32
dusty rose	#856363
dark tan	#97694F
orange red	#FF2400
indian red	#4E2F2F
khaki	#9F9F5F
light steel blue	#8F8FBD
light wood	#E9C2A6
chocolate	#5C3317
medium orchid	#9370DB
medium sea green	#426F42
medium turquoise	#70DBDB
neon pink	#FF6EC7
pink	#BC8F8F
quartz	#D9D9F3

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.
Clique aqui para ver um exemplo de página com imagens.

	A imagem criada deve ser salva na mesma pasta que contém as páginas HTML para que o navegador possa abri-la.

É possível inserir uma imagem de fundo na página HTML, caso não queira utilizar uma única cor.
O comando de inserção de imagem "background", é um atributo da tag <body>.
Ao digitar a estrutura básica, substitua a tag <body> por este comando: <body background= "nome da imagem.gif ou .jpg">.
Clique aqui para visualizar uma página contendo uma imagem de fundo.
	A imagem precisa estar arquivada na pasta onde se encontra a página HTML correspondente.

Agora que você conhece o básico da linguagem HTML, crie sua página pessoal.
1. Inicie o Bloco de notas do Windows.
2. Crie a estrutura padrão de uma página HTML e mãos à obra.

Clique aqui e visualize um exemplo de página Web pessoal. Note que neste exemplo foram inseridas as tags vistas ao longo deste curso.

Uma página HTML é composta basicamente por título, texto, imagem e links.
Esses elementos são posicionados na página através de comandos específicos da linguagem HTML.

Link é um "atalho" que pode levá-lo a outras partes do documento ou a outros documentos. Em páginas HTML, os links são representados por textos sublinhados ou imagens.
Quando você aponta o mouse para um link, o cursor se transforma em uma mãozinha apontando.