Toda vez que você acessar um site (veja tópico Word Wide Web) por meios de domínios quando adiciona a URL na barra de endereço, do seu Navegador (Browser), você verá páginas na WEB bem dinâmicas, organizadas, animadas e com ela trazendo informações, imagens, sons, vídeos e etc.
Então, você deve se perguntar. Como é feito? Como elas se propagam? Todas estas páginas possuem um código fonte escrito numa linguagem chamada HTML (Hyper Text Markup Language).
Este tutorial tem por objetivo mostrá-lo como criar e exibir páginas HTML, como as que você ver através da WEB. Tais páginas são criadas a partir de arquivos texto ASCII, contendo caracteres de marcação da linguagem HTML. Uma vez criados, estes arquivos são salvos com uma extensão .html.
Então, entendido novamente mais uma etapa, vamos iniciar o curso de verdade. A cada exemplo você deverá salvar seu arquivo com a extensão html. Certo ?
HIERARQUIA DE ELEMENTOS
Primeiramente, gostaria de lembrar-lhe como citei a linhas acima, que existem vários editores de Home Pages, como por exemplo: o Front Page Express, Netscape Composer, Home Site, etc. Só que na ausência destes aplicativos e você desconhecendo a Linguagem de HyperTextos, HTML, não poderia criar suas páginas. Daí a importância de se conhecer esta linguagem. Entendeu?
Muito bem, é para estudarmos HTML, usaremos o já conhecido Bloco de Notas e um Browser (Internet Explorer ou Netscape). Para nossos exemplos usarei o Internet Explorer. Tudo Bem? Vamos nessa!
A estrutura básicas de uma página HTML é mostrada na listagem 1.1. Observe que a construção de páginas exigir o uso de marcadores chamados de “TAGSâ€. Veja agora o uso deles na listagem 1.1
Listagem 1.1
<html> <head> <title>COLOQUE AQUI O TÍTULO DA PÁGINA</title> </head> <body> DAQUI EM DIANTE Você DESENVOLVE SUA PÁGINA </body> </html>
Fim da Listagem 1.1
Com certeza você observou que sempre usei os tags, fazendo demarcação, ou seja, eles sempre estarão ANTES DE ALGUMA COISA E APÓS ALGUMA COISA. Quer mais um exemplo para entender melhor? Tudo bem.
Exemplo: <title>EDITORA ERICA</title>
CONCEITO DOS TAGS USADOS NESTE EXERCÍCIO
TAG O QUE FAZ
<html> Marca o início e o fim do documento HTML. Com ele você inicia e finaliza a construção da página Web.
<head> Marca o início e do fim do cabeçalho, ou seja, a área onde serão descritos cabeçalhos e o título da página
<title> Marca o início e o fim do título do cabeçalho. O título da página aparecerá na barra superior do browser.
<body> Marca o início e o fim do do corpo da página
EXERCÍCIO 1 Vamos praticar?
Bem entendido os conceitos básicos e você mais feliz, vamos criar nossa primeira página.
1º) Abra o Bloco de Notas – Iniciar/Programas/Acessórios/Bloco de Notas
2º) Digite o código da listagem 1.2. Após digitá-lo salve na pasta Meus Documentos ou em outra se preferir com o nome exemplo1.html. Como?
Resposta:
1) Abra o Menu Arquivo e escolha Salvar
2) Na janela que aparecer como mostrar figura 1.1, faça as seguintes tarefas:
2.1) Na opção Salvar em selecione a pasta onde deseja salvar, no caso Meus Documentos
2.2) Na opção Nome do arquivo coloque o nome do arquivo exemplo1.html
2.3) Finalmente clique no botão Salvar.
Figura 1.1
Listagem 1.2
<html> <head> <title>Minha Home Page</title> </head> <body> Aqui neste espaço desenvolverei minha Home Page! Aguarde!! </body> </html>
Fim da Listagem 1.2
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço digite C:\Meus documentos\exemplo1.html. Veja a figura 1.2
O TÍTUO ADICIONADO NA PÁGINA ATRAVÉS DO TAG TITLE
Figura 1.2
Exercício 2 – Vamos aprender mais um pouco?
Em alguns momentos em sua página faz necessário comentar alguns trechos do código para facilitar na leitura e manutenção da página, por isso adicionamos comentários, ou seja, palavras ou frases que não são exibidos no Nevegador, apenas são visto como estamos trabalhando no código fonte.
Na listagem 1.3 faremos um novo exemplo e incrementaremos novos tags. Digite a listagem 1.3 abaixo e salve com o nome exemplo2.html na pasta Meus Documentos.
ï‹ ATENÇÃO: Salve sempre os seus exemplos na pasta Meus Documentos, o processo para salvar é igual ao do Exemplo1, troque apenas o nome do arquivo. Na dúvida veja o exemplo 1. Tudo bem?
Listagem 1.3
<!Início do Documento HTML> <html> <head> <title>Melhorando Minha Home Page</title> <meta name="author" content="NMBS Informática"> <meta name="keywords" content="html, homepages"> </head> <! Início do Corpo da Página> <body> <h1>Este é o título Principal</h1> <h2>Este é o título Secundário</h2> <h3> Estou adorando criar páginas</h3> <hr> <p>Este é o 1º Primeiro Paragráfo <br> Esta é 2ª Linha do 1º Paragráfo <p>Com este recurso inicio um paragráfo<br> E Com este recurso quebro uma linha <hr> <! Fim do Corpo da Página> </body> </html> <! Fim do Documento HTML>
Fim da Listagem 1.3
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço digite C:\Meus documentos\exemplo2.html. Veja a figura 1.3
Figura 1.3
CONCEITO DOS TAGS USADOS NESTE EXERCÍCIO
TAG O QUE FAZ
<!> Insere comentários nas páginas
<meta> Marcas Metas. Servem para você especificar o autor, palavras-chaves, descrição da página, etc..
Dentro do tag<meta>, tem os comandos name e o content. No comando name você especifica que informação você quer dar, e no content você descreve a informação
<hn> Marca um título. Sendo que n representa um valor que pode ser de 1 a 6, o tamanho muda de forma decrescente, ou seja, o número 1 é o maior tamanho do título.
<hr> Insere uma linha horizontal
<p> Marca um parágrafo e acrescenta uma linha em branco.
<br> Insere uma quebra de linha
Agora, que você viu o resultado do exemplo2.html a cada vez mais feliz, por está entendendo esta linguagem, vamos passar para o Exercício 3.
Exercício 3 – TAGS DE ALINHAMENTO
Assim, como num documento comum, há necessidade de melhorar a aparência do documento, e a primeira providência a tomar é cuidar do alinhamento do texto. O Alinhamento padrão que vem configurado nos navegadores, é a esquerda. Para entender isto, digite a listagem 1.4, e salve como exemplo3.html, e acompanhe o conceito de tag que marcam o alinhamento dos títulos e paragráfos nas páginas.
Listagem 1.4
<html> <head> <title>Tags para Alinhamentos</title> </head> <body> <h4 align=center>Título Centralizado</h4> <h4 align=right>Título À Direita</h4> <h4 align=left> Título À Esquerda</h4> <hr> <p align=center> Parágrafo ao Centro <p align=right>Parágrafo a direita <p align=left>Paragráfo a esquerda <p align=justify>Este é um texto justificado. Na linguagem HTML temos vários tipos de alinhamentos que você poderá aplicar em sua página. Nesta parte do livro,veremos como alinhar linhas, parágrafos e cabeçalhos. <br> <br> <hr width=50% align=center> <blockquote>Texto com mais margem</blockquote> <blockquote><blockquote>Tem com mais margem ainda</blockquote></blockquote> </body> </html>
Fim da Listagem 1.4
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço digite C:\Meus documentos\exemplo3.html. Veja a figura 1.4
Figura 1.4
CONCEITO DOS TAGS USADOS NESTE EXERCÍCIO
TAG O QUE FAZ
<center> Alinha o trecho (texto, imagem ou tabela ao centro>
align=center, right, left ou justify Atribuídos dentro do tag <p> que marca o início de um parágrafo modificam o alinhamento do título.
Center= alinha ao centro
Right = alinha a direita
Left = alinha a esquerda
Justify = faz a justificação do parágrafo.
<blockquote> Adiciona uma margem de cerca de um centímetro
<hr> Atributos
Size = define a altura da linha. Exemplo: <hr size=50>
Width = define a largura da linha horizontal.
Exemplo: <hr width=200>ou <hr width=50%>
Noshade = desenha a linha sem a sombra para dar o efeito de três dimensões. Exemplo: <hr noshade>
Exercício 4 – FORMATAÇÃO DE ESTILOS
Muito bem caro estudante, perceba que a cada exemplo sua página vai melhorando ainda mais sua aparência. Neste exemplo trabalharemos com a formatação das letras bem como cor, tamanho de fonte, estilo, e etc..
Bem, preparado? Vamos lá novamente para mais um estudo!
Para entender isto, digite a listagem 1.5, e salve como exemplo4.html,
Listagem 1.5
<html> <head> <title>Formatando Estilos</title> </head> <body> <center>Mudando o Estilo dos Caracteres</center> <p> <b>Texto em Negrito</b><br> <i>Texto em Itálico</i><br> <u>Texto sublinhado</u><br> <tt>Texto Monoespaçado</tt><br> <br><font color=red>Texto em Vermelho</font> <br><font size=5>Texto em Tamanho 5</font> <br><font face=verdana>Texto com a letra Verdana</font> <br><font face=arial black>Você pode fazer combinações</font> <br><center> <font color=blue face=verdana size=5><b>Editora Érica</b></font></center> <br>Você poderá os atributos para cada tipo de letra! <br> <font color=blue size=6>E</font><font color=red size=4>ditora Érica</font> <br> <pre> Estamos progredindo no curso de HTML. Este tag permite que todos os espaços feitos no código fonte sejam respeitados. Certo? </pre> </body> </html>
Fim da Listagem 1.5
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço digite C:\Meus documentos\exemplo4.html. Veja a figura 1.5
Figura 1.5
Créditos: gilvan do fórum Acemprol.
