Baixe Introdução à Criação de Páginas Web: HTML e Formatos de Imagem e outras Resumos em PDF para Informática, somente na Docsity!
HTML Básico
Publicado em: 28/04/ Como funciona uma página? O espaço para sua página na Internet fica em um computador, onde estão todos os seus arquivos de HTML, som, imagem, etc. O computador onde fica a sua home page é chamado de Servidor, pois a qualquer hora do dia ou da noite ele vai estar ligado para as pessoas poderem acessar sua home page. Quando a pessoa entra na sua home page, ela está acessando este espaço. As páginas são feitas usando a linguagem HTML (HyperText Markup Language). Trata- se de uma linguagem simples e bem leve, por isso ela é o padrão da Internet. Nas páginas você coloca sons, imagens, cores. Além disso, as páginas da Web podem ser ligadas entre si, formando o que se chama de Link. Com isso, você pode criar uma página sobre um assunto que lhe agrade a partir de uma outra, com sua foto e um link entre elas. Quando uma pessoa clica neste link, ela vai diretamente para aquela página que você definiu. Vamos passar agora às aulas de HTML para você poder começar a construir seu site. Para visualizar as páginas é necessário um navegador. Os mais conhecidos e utilizados são o Internet Explorer e o Netscape. Estes navegadores fazem basicamente a mesma coisa - mostrar as páginas -, mas devido a algumas diferenças de programação, alguns recursos são visíveis em um e no outro não. O mesmo acontece com versões mais antigas. Navegadores versão 3 não conseguem mostrar uma página HTML corretamente. Por isso, durante a construção do seu site, procure testá-lo nos dois navegadores para verificar se a visualização está correta. Introdução ao HTML Todo documento HTML é composto de Tags. Este é o nome dados aos comandos HTML. Você deve começar sua página com a tag , na primeira linha do código, e terminar com na última linha do documento. Perceba que a barra "/" sinaliza o fechamento da tag. Este fechamento é necessário para que ela possa ser interpretada pelo navegador. A estrutura das tags é formada por: : Este é o inicio da tag;* : Este é o fechamento da tag para que ela possa funcionar.**
- xxx é apenas uma representação de uma tag, não é uma tag HTML. ** Algumas tags não necessitam do fechamento. Neste caso você será avisado. Entre o início da tag e o seu fechamento ficam os textos, parâmetros, atributos e até outras tags que vão formando a sua página. Se você não fechar corretamente as tags, a página não irá ser mostrada direito ou nem mesmo irá aparecer. Após iniciar o documento com a tag você deve incluir o cabeçalho que é feito com as tags . E também um título usando o par ... . Geralmente, o título não é mostrado na página, porém os navegadores o utilizam para entitular a janela de visualização. Coloque um título bem claro e explicativo para seus documentos.
O "corpo" do documento deve ser demarcado pelo par ... . Nesta parte do documento serão colocados todos os comandos para apresentação de uma página HTML. Entre as tags e é que você vai colocar todos os códigos para sua página. Um documento simples seria digitado da seguinte maneira:
Meu documento HTML
Aqui você coloca os comandos em HTML.
Os espaços em branco são ignorados quando o navegador "lê" o código. Assim o código acima poderia ser escrito da seguinte forma: Meu documento HTML Aqui você coloca os comandos em 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.
- Atributos do Através de atributos de , podemos definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (papel de parede da página):
Onde:
- BGCOLOR Cor de fundo (padrão: cinza ou branco)
- TEXT Cor dos textos da página (padrão: preto)
- LINK Cor dos links (padrão: azul)
- ALINK Cor dos links, quando acionados (padrão: vermelho)
- VLINK Cor dos links, depois de visitados (padrão: azul escuro ou roxo)
- BACKGROUND Imagem de fundo. Saiba como colocar uma imagem de fundo clicando aqui. Em "cor", você pode colocar os valores de cores em inglês como: Preto = black Branco = white
tipo de tag é a mais usada, pois você pode definir mais facilmente o tamanho do texto e fonte que você deseja, e personalizar ainda mais a sua página. A tag é , e dentro dela você pode definir vários parâmetros, como cor, tamanho e tipo de letra. Veja agora como usar as tags de fontes:
- Atributo FACE
- FACE: Uma evolução que permite a escolha da fonte (tipo de letra) para os textos, a tag é feita assim: Texto Exemplo: Fonte Times New Roman Fonte Times New Roman Fonte Arial Fonte Arial Fonte Courier New Fonte Courier New
- Atributo COLOR e SIZE
- COLOR e SIZE: Atributos cor e tamanho: A palavra terá o tamanho 3
A palavra terá o tamanho 3
A palavra terá a cor vermelha A palavra terá a cor vermelha. Podemos também combinar as tags acima: Palavra com tamanho 3 e em vermelho
O resultado final será:
Palavra com tamanho 3 e em vermelho
Formatando textos Você pode formatar o texto, colocando-o em negrito, itálico, sublinhado e centralizado. Assim:
- Tags , , e Texto - Texto fica em Negrito. Texto - Texto Sublinhado. Texto - Texto em Itálico. Texto Texto centralizado. Os códigos também podem ser escritos uns sobre os outros, acumulando seus efeitos, como por exemplo:
Teste 1 e Teste 2 O resultado é:
Texto alinhado à esquerda
Texto alinhado à direita
Texto centralizado
Texto justificado
**Incluindo imagens** Agora que você já sabe incluir e formatar os textos de sua página, é possível que você queira dar mais vida à sua página, incluindo imagens e fundos nela. Você faz as imagens em programas separados, em seu editor gráfico preferido. Ou pode usar imagens de outros sites. Mas os formatos ideais para home pages são GIF e JPG. Você não poderá usar o formato BMP. A tag para inserir uma imagem em sua página é a seguinte:
Em "imagem que vai aparecer" você coloca o nome da imagem .gif ou .jpg ou o URL onde ela está para ser mostrada. Na verdade, apenas já seria o suficiente, mas com o tempo você vai precisar usar os outros atributos.
- Atributos de Imagem
- Width e Height São os atributos de largura e altura da imagem (Width: Largura da imagem - Height: Altura da imagem). Se você não incluí-los, não se preocupe. A imagem vai aparecer assim mesmo. Mas definindo os tamanhos da imagem ela carregará mais
seu site tenha uma boa apresentação gráfica. Entre os mais usados estão o Corel Draw, Adobe Photoshop e Paint Shop Pro.
- O FORMATO GIF: Formato dominante na Internet, o GIF é um tipo de arquivo gráfico relativamente compacto (quando comparado com o BMP por exemplo) e o GIF pode ser transparente, não transparente ou animado. Um GIF transparente é aquele onde uma cor pode ser escolhida para ser transformada em transparente quando vista por um navegador e mostrar o que há embaixo. Os programas que são mais usados para criar gifs e permitem que se crie transparências são o Photoshop e o Fireworks. Os GIFS animados são aqueles que têm movimento. Nada mais são que uma seqüência de GIFS previamente preparados. O criador do GIF animado, usando um programa como o GIF Animator, escolhe as imagens que formarão a seqüência que dará a idéia de movimento.
- O FORMATO JPEG (jpg): Grandes fotos geralmente são salvas neste formato pois, nestes casos, se consegue reduzir bastante o tamanho em bytes da imagem, sem prejudicar sua qualidade. É aconselhável, antes de mandar um arquivo GIF grande para Web, testar como ficaria se salvo como JPG.
- O FORMATO BMP: Esses bitmaps, apesar de muito utilizados no Windows, são muito pesados para a Web. Se quiser colocar alguma imagem que estiver neste formato, salve-a antes como GIF ou JPG usando um editor de imagens como o Paint Shop Pro, Photoshop ou FireWorks. Alinhando as imagens Você pode usar muitos recursos para fazer o alinhamento de textos e imagens em sua página, e dar uma organização e visual diferentes. Para fazer os alinhamentos, você inclui parâmetros do alinhamento dentro da tag de imagem. Assim: Veja como o texto fica na imagem. Este é um exemplo de alinhamento padrão; você não precisa incluir nenhuma tag. Agora veja como o texto fica no topo da imagem. Este é um exemplo de alinhamento de texto no topo da imagem. Para fazer este tipo de alinhamento, a tag de imagem deve ficar assim:
Repare que só incluímos o align="top" na tag de imagem.
Veja como o texto fica no meio da imagem. Este é um exemplo de alinhamento no meio da imagem. Para este efeito a tag de imagem deve ficar assim:
Repare que só incluímos o align="middle" na tag de imagem. Veja que agora você tem um efeito onde o texto fica ao redor da imagem, igual ao texto em jornais. Trata-se de um ótimo recurso para quando você deseja colocar um texto ao lado de uma foto que destaque mais o assunto do texto. A tag para este alinhamento é:
Veja que agora a imagem está alinhada do lado direito e o texto fica ao redor. É exatamente o oposto do alinhamento à esquerda. A tag para este alinhamento é:
- Para se ter uma imagem centralizada:
O resultado é: Criando links Links são os pontos clicáveis do documento HTML que levam a qualquer outro documento da sua página ou site na Internet. Podemos fazer links internos, para documentos no mesmo servidor, links externos para qualquer lugar na Web, ou até mesmo links para um mesmo ponto dentro de uma página. Ambos dependem da tag: descrição
- "Nome-do-lugar-a-ser-levado" você coloca o arquivo html que você quer que seja visitado, por exemplo dados.htm ou por um URL como http://www.starmedia.com.
- "Descrição" é o que vai aparecer sublinhado na home page indicando que pode ser clicado. Por exemplo, se a descrição fosse "Clique aqui para visitar a StarMedia", você colocaria este código: Clique aqui para visitar a StarMedia
Repare que, além da tag "comum" de imagem, colocamos outros atributos como "border=1" (borda da imagem) , tamanho e o texto alternativo. Tudo isso você aprendeu na seção "Incluindo imagens".
- Como fazer links para download de arquivos Para saber como fazer links para download de arquivos, você deve visitar a seção "Criar links para download" e descobrir todos os detalhes e dicas para criar os links. Criar links para download É provável que, depois de criar suas páginas, você queira colocar arquivos para que os visitantes façam download em sua home page. Este é um recurso bem fácil e simples. Vamos explicar. Não existe um comando que faça o download. O que acontece é que, sempre que aparece um tipo de arquivo que o navegador não reconhece, ele automaticamente inicia o download. Exemplo: Se o navegador não consegue abrir um arquivo "zip" (compactado), ele automaticamente inicia o download. Os links normalmente são direcionados a arquivos html. Se você deseja colocar um arquivo para download, tudo que você precisa fazer é direcionar o link para ele como se estivesse colocando um link para uma página. Exemplo: Para o download de um arquivo "exemplo.exe", o código de um link simples ficaria assim: Descrição do link Observações Existem alguns tipos de arquivos que você pode querer disponibilizar para download, mas que os navegadores, em vez de fazer o download, abrem com programas que você já tenha instalado. Se você, por exemplo, colocar um link para um arquivo de vídeo ".avi" ou ".mpg", o navegador abrirá o programa para exibir esse vídeo. Para evitar isso, a melhor solução é compactar estes arquivos para o formato .zip. Assim, não haverá problemas. Além disso, a compactação do arquivo faz com que ele fique menor e o download demore menos tempo para ser feito. Listas Você usa listas para criar menus simples ou organização de temas e textos em sua página. O HTML permite definir três categorias distintas de listas:
- Ordenadas,
- Sem ordenação
- E uma especial, chamada lista de definição.
- Listas Ordenadas As listas ordenadas são numeradas e só usam um bullet (marca de · ) para demarcar cada uma das linhas. Em listas ordenadas, o navegador se encarrega de colocar os números que referenciam cada lista. Uma lista ordenada deve ser envolvida pelo par ... .
Exemplo 1:
Primeiro item de uma lista ordenada Segundo item de uma lista ordenada Terceiro item de uma lista ordenada
Produz o seguinte resultado:
- Primeiro item de uma lista ordenada
- Segundo item de uma lista ordenada
- Terceiro item de uma lista ordenada
- Listas sem Ordenação Em listas não ordenadas é utilizado algum símbolo gráfico. Este tipo de lista será envolvido pelo par ... . Para que o interpretador distinga um trecho de texto de uma lista deverá ser colocado no início de cada linha a diretiva , não havendo a necessidade de fechar esta tag com . Alguns exemplos: Exemplo 2:
Primeiro item de uma lista não ordenada Segundo item de uma lista não ordenada Terceiro item de uma lista não ordenada
Produz o seguinte resultado: Primeiro item de uma lista não ordenada Segundo item de uma lista não ordenada Terceiro item de uma lista não ordenada
- Listas Encadeadas O próximo exemplo será de uma lista encadeada. Você pode encadear tantas listas quantas quiser, desde que envolva cada nível de encadeamento com ... ou ... .
Primeiro item de uma lista encadeada. Segundo item de uma lista encadeada.
Terceiro item de uma lista encadeada. Quarto item de uma lista encadeada.
Quinto item de uma lista encadeada.
Produz o seguinte resultado:
- Primeiro item de uma lista encadeada.
- Segundo item de uma lista encadeada. o Terceiro item de uma lista encadeada. o Quarto item de uma lista encadeada.
- Quinto item de uma lista encadeada.
- Em "WIDTH" você pode definir o tamanho que o letreiro vai ocupar na tela. Veja : Texto Resulta em:
- Linhas Com as linhas é possível que você crie separações entre textos e imagens. É muito simples criar uma linha. Basta incluir a tag (não é preciso fazer o fechamento dela). Veja o resultado: Atributos da linha: Você pode definir atributos para a linha, como alinhamento, largura e cor. Veja como fazer: - WIDTH Você define a largura da régua, em pixels ou em porcentagem. Veja: insere uma linha que ocupa 50% do espaço disponível na tela.
- ALIGN Define o alinhamento da régua que pode ser "Left" (esquerda), "Right" (direita) ou "Center" (centralizado): insere uma linha de comprimento 100% (do espaço disponível na tela) e alinhada à direita.
- COLOR Define a cor para a linha, este recurso não funciona no Netscape 4x. Para colocara cor, basta incluir ela na tag da seguinte forma:
Insere uma linha de comprimento 100% (do espaço disponível), alinhada à direita, sem efeito tridimensional (feito pelo atributo NOSHADE) e com cor vermelha.
