Docsity
Docsity

Prepare-se para as provas
Prepare-se para as provas

Estude fácil! Tem muito documento disponível na Docsity


Ganhe pontos para baixar
Ganhe pontos para baixar

Ganhe pontos ajudando outros esrudantes ou compre um plano Premium


Guias e Dicas
Guias e Dicas

Introdução a HTML - Fazendo um site, Notas de estudo de Informática

Aprensa a criar um site em pouco tempo

Tipologia: Notas de estudo

2010

Compartilhado em 09/03/2010

clodoaldo-antunes-garcia-1
clodoaldo-antunes-garcia-1 🇧🇷

5

(3)

7 documentos

1 / 10

Toggle sidebar

Esta página não é visível na pré-visualização

Não perca as partes importantes!

bg1
INTRODUÇÃO AO HTML - COMO FAZER UM SITE
Como fazer um site. Todos os códigos html: Como incluir flash, vídeos, imagens, músicas, inserir
links, download, e-mail, Meta Tags, link para download, Tabela de cores, Atributos, etc. Faça seu
site grátis com os códigos. O objetivo desta página é ensinar os princípios básicos para confecção
de um site em HTML para que você possa fazer seu primeiro site.
Aqui você aprenderá códigos HTML e saberá como inserir um vídeo, como inserir uma música,
como inserir um flash, Inserir imagens, Criar Links com imagens, Como fazer tabelas, Criar Links
para e-mail, Criar Âncora, Caixa de Texto, Meta-Tags, Letreiros e Linhas, Imagens de Fundo, Fazer
Listas, Links para Downloads, Formatar Textos, Tamanho e Cores de Fonte, Cabeçalhos, Atributos
de Body, enfim, será sua iniciação para fazer um site em HTML.
Existem editores HTML que oferecem comodidade para confecção das páginas, tais como:
FrontPage; Dreamweaver e outros. Mas não será necessário aprendendo os códigos abaixo e você
poderá fazer no Word ou Bloco de Notas e salvar como .html.
Toda página é composta por Tags, que são os comandos html. Toda página deve comerçar com a tag
<HTML> e terminar com </HTML>. Note que a barra "/" determina o fechamento da tag. Estas são
as Tags fundamentais de sua página, isto é, toda página contém estas tags:
Na medida do possível irei acrescentando mais dicas para você fazer um site bem legal. ITENS
BÁSICO EM HTML:
<HTML>
<HEAD>
<TITLE> Título da página </TITLE>
</HEAD>
<BODY> Texto; Imagens; Links; etc </BODY>
</HTML>
As tags podem ser escritas em Maiúscula ou Minúscula Ex.: <html> ou <HTML>.
O Título da página aparecerá no alto da janela do browser e será referenciado em buscas pela rede.
Ao ser adicionada à "Favoritos" (Bookmarks), o título será o atalho para ela.
ATRIBUTOS DE <BODY> :
Através de <BODY>, podemos definir cores dos textos, links e fundo das páginas, ou uma imagem
de fundo. Temos então:
BGCOLOR - Cor de fundo
TEXT - Cor da fonte dos textos
LINK - Cor dos links (padrão: azul)
ALINK - Cor dos links, quando clicados (padrão: vermelho)
VLINK - Cor dos Links, depois de visitados (padrão: roxo)
BACKGROUND - Imagem de fundo: Indica o URL da imagem.
Podemos definir tudo de uma só vez, colocando o seguinte código:
<BODY BGCOLOR="YELLOW" TEXT="BLACK" LINK="BLUE" ALINK="RED"
VLINK="PURPLE">
Não está no código acima o atributo BACKGROUND pois não é padrão.
C O R E S NO SEU SITE:
Você pode escrever as cores (em inglês) ou colocar seu código. Porém, para escrever só é aceito 16
cores, que são:
Preto = black - código = #000000
pf3
pf4
pf5
pf8
pf9
pfa

Pré-visualização parcial do texto

Baixe Introdução a HTML - Fazendo um site e outras Notas de estudo em PDF para Informática, somente na Docsity!

INTRODUÇÃO AO HTML - COMO FAZER UM SITE

Como fazer um site. Todos os códigos html: Como incluir flash, vídeos, imagens, músicas, inserir links, download, e-mail, Meta Tags, link para download, Tabela de cores, Atributos, etc. Faça seu site grátis com os códigos. O objetivo desta página é ensinar os princípios básicos para confecção de um site em HTML para que você possa fazer seu primeiro site. Aqui você aprenderá códigos HTML e saberá como inserir um vídeo, como inserir uma música, como inserir um flash, Inserir imagens, Criar Links com imagens, Como fazer tabelas, Criar Links para e-mail, Criar Âncora, Caixa de Texto, Meta-Tags, Letreiros e Linhas, Imagens de Fundo, Fazer Listas, Links para Downloads, Formatar Textos, Tamanho e Cores de Fonte, Cabeçalhos, Atributos de Body, enfim, será sua iniciação para fazer um site em HTML. Existem editores HTML que oferecem comodidade para confecção das páginas, tais como: FrontPage; Dreamweaver e outros. Mas não será necessário aprendendo os códigos abaixo e você poderá fazer no Word ou Bloco de Notas e salvar como .html. Toda página é composta por Tags, que são os comandos html. Toda página deve comerçar com a tag e terminar com . Note que a barra "/" determina o fechamento da tag. Estas são as Tags fundamentais de sua página, isto é, toda página contém estas tags: Na medida do possível irei acrescentando mais dicas para você fazer um site bem legal. ITENS BÁSICO EM HTML: Título da página

Texto; Imagens; Links; etc As tags podem ser escritas em Maiúscula ou Minúscula Ex.: ou . O Título da página aparecerá no alto da janela do browser e será referenciado em buscas pela rede. Ao ser adicionada à "Favoritos" (Bookmarks), o título será o atalho para ela. ATRIBUTOS DE : Através de , podemos definir cores dos textos, links e fundo das páginas, ou uma imagem de fundo. Temos então: BGCOLOR - Cor de fundo TEXT - Cor da fonte dos textos LINK - Cor dos links (padrão: azul) ALINK - Cor dos links, quando clicados (padrão: vermelho) VLINK - Cor dos Links, depois de visitados (padrão: roxo) BACKGROUND - Imagem de fundo: Indica o URL da imagem. Podemos definir tudo de uma só vez, colocando o seguinte código: Não está no código acima o atributo BACKGROUND pois não é padrão. C O R E S NO SEU SITE: Você pode escrever as cores (em inglês) ou colocar seu código. Porém, para escrever só é aceito 16 cores, que são: Preto = black - código = #

Branco = white - código = #FFFFFF Azul = blue - código = #0000FF Amarelo = yellow - código = #FFFF Verde = green - código = # Lima = lime - código = #00ff Marron = maroon - código = # Oliva = olive - código = # Azul Celeste = aqua - código = #00ffff Lilás = fuchsia - código = #ff00ff Cinza = gray - código = # Azul escuro = navy - código = # Roxo = purple - código = # Verde escuro = teal - código = # Cinza claro = silver - código = #c0c0c Vermelho = red - código = #FF Mas você pode definir varias tonalidades e cores, basta ter a lista de códigos das cores, ou CLICAR AQUI CABEÇALHOS : O tamanho das letras ou fontes é definido pela tag - "Headings". A tag normalmente é usada em CABEÇALHOS e há seis níveis. Com esta tag você pode definir o tamanho das letras, mas não o tipo da fonte. Veja abaixo como fica: Este é o tamanho:

Este é o tamanho:

Este é o tamanho:

Este é o tamanho:

Este é o tamanho:

Este é o tamanho:
Pode-se alinhar os cabeçalhos

Texto centralizado

Texto alinhado à direita

Texto alinhado à esquerda

TAMANHO E CORES DAS LETRAS : Você também pode usar a tag para definir o tamanho, bem como sua cor e tipo da fonte. - Define o tipo de letra - Define a cor da letra - Define o tamanho da letra Veja abaixo alguns exemplos: Fica assim Fica assim Fica assim Fica assim

  • Note que você define com mais precisão o tamanho das letras do que a tag . COMO FORMATAR OS TEXTOS :

Veja alguns exemplos: Seu texto Seu texto Seu texto Note que no ultimo exemplo especificamos o tamanho da imagem. Não definindo este tamanho, a imagem aparecerá no tamanho original. Você pode especificar um tamanho menor do que a original, pois não acarretará perda de qualidade da imagem, mas se fizer ao contrário, isto é, definir um tamanho maior que a original perderá qualidade de imagem. O correto é você ter a imagem do tamanho certo que deseja que apareça na página. Evite colocar imagens maiores que 50 Kb. Quanto maior a imagem mais tempo leverá para carregar. Alinhamento texto de imagens: Há também os atributos de moldura, que definem o espaço vertical e horizontal entre as imagens e os textos circundantes, onde: Ex.: COMO FAZER OS LINKS : Links são pontos clicáveis que levam a qualquer site da internet ou qualquer página do site e até mesmo qualquer ponto da própria página. A TAG usada é: descrição do lugar Exemplos Conheça Extrema-MG Resultado: Conheça Extrema-MG Note que formou-se um link para um determinado site que foi descrito no código acima. Se você clicar abrirá o referido site em uma outra janela, isto é, sem que você saia deste site, isto porque foi adicionado o atributo "TARGET", então na verdade, para você não fechar esta janela, o código inserido aqui foi: Conheça Extrema-MG Para fazer um link para uma outra página do seu site use: Clic aqui - Note que após o nome da página é colocado a extensão .html COMO FAZER IMAGEM COM LINK : É simples fazer uma imagem ter um link. Ao invés de colocar o texto com a descrição do lugar, coloque a TAG de imagem. Veja o exemplo: Sendo que: http://www.extremaonline.com é o URL (endereço) do site. local é caso você tenha armazenado suas imagens em uma pasta. Ex. Pasta "Imagens".

nome da imagem + extensão Exemplo: minhafoto.jpg ou barra.gif Veja o exemplo abaixo, note que formou um link na figura e o levará ao referido site acima. Lembre-se: foi usado a target"_blank" para abrir em uma nova janela. COMO FAZER LINKS PARA DOWNLOAD : Na verdade não existe o comando específico. O que acontece é que quando criamos um link para um arquivo que o navegador não reconhece, ele automaticamente inicia o download, por exemplo, o navegador não reconhece os arquivos com extensão ZIP, EXE, RAR, etc., nestes casos ele inicia o download. Veja exemplos: Clic aqui para baixar Clic aqui para baixar Certas extensões de arquivos fazem com que os navegadores, em vez de fazer o download, abrem com programas instalados no computador. Se você fazer um link para um arquivo de vídeo ".avi" o navegador abrirá o programa para exibir esse vídeo. Para que isso não aconteça, sempre compacte seus arquivos para download no formato zip ou rar, por exemplo, tornando-os mais leves (menores) e download será mais rápido. L I S T A S : Nesta página já existem várias listas. Logo abaixo já tem outra lista com os nomes: Listas Ordenadas Listas sem ordenação Listas Encadeadas Exemplos: A lista acima (Ordenada) foi feita com os seguintes códigos:

Os números são inseridos automaticamente. Se você quiser trocar os números por letras, Ex.: A, B, C. ao invés de usar só
    use
      - Onde "1" indica para começar pela primeira letra do alfabeto. Lista Sem Ordenação:
      Resultado: Primeiro item. Segundo item. Terceiro item. As "bolinhas" são inseridas automaticamente. Listas Encadeadas:
      Produz resultado misto. COMO INSERIR IMAGEM DE FUNDO NO SEU SITE: Para você colocar uma imagem de fundo no seu site é só colocar um atributo dentro da TAG , assim: . Quando a imagem é menor que o tamanho da tela, o navegador duplica essa imagem tantas vezes forem necessárias para cobrir todo o espaço da tela. Existem vários tamanhos de telas. Lembre-se: imagens grandes demoram à carregar. COMO FAZER LETREIROS E LINHAS : Para colocar um letreiro na página é utilizado a TAG Veja o código: TEXTO Resultado TEXTO

      Valign="middle" -Alinha o texto no meio da célula. Valign="bottom" -Alinha o texto na parte inferior da célula. ADICIONANDO UMA LISTA DENTRO DA CÉLULA:

      lista dentro da célula
      • 1 item
      • 2 item
      • item
      Resultado: lista dentro da célula 1 item 2 item 3 item SITE COM FRAMES : Resume-se em mais de uma página em uma só tela. É necessário criar três páginas para criar uma página com dois frames, ou seja, uma página principal onde terá as tags referente ao frame que deverá ser salva como: index.html e as outras duas serão abertas dentro desta página principal. Exemplo: Título da página Os códigos acima só serão colocados na página principal que será salva como "index.html". Normalmente nesse tipo de frame a página1.html é usada para os menus e a página2.html para conteúdo geral do site. Neste caso o atributo COLS divide as colunas ou seja, 20% do lado esquerdo e 80% do lado direito da página. Sempre da esquerda para direita. Então a página1.html ocupará 20% do espaço e a página2.html ocupará 80% (espaço vertical). Copie o código acima, cole no Bloco de Notas e salve como "index.html" depois dê 2 cliques nesse arquivo para visualizá-lo aberto em seu browser. As tags e é usado somente para avisar usuário que utiliza browser muito antigo que a página contém frames, que não as conseguirá visualizar (muito difícil acontecer). Exemplo 2: Título da página

      Copie o código acima, cole no Bloco de Notas e salve como "index.html" depois dê 2 cliques nesse arquivo para visualizá-lo aberto em seu browser. Exemplo 3: Título da página

      Copie o código acima, cole no Bloco de Notas e salve como "index.html" depois dê 2 cliques nesse arquivo para visualizá-lo aberto em seu browser. COMO INSERIR MÚSICA NO SITE: Para inserir uma música em sua página, antes de fechar a tag coloque a tag: .A Extensão do arquivo pode ser .mid ou .wav. Para que a música toque novamente, sempre, acrescente: loop="-1" Assim: No exemplo acima a música tocará sem que apareça o "display" na tela. O internauta não terá como parar, pausar ou iniciar. Para que apareça o display na tela, como você vê abaixo, coloque está tag: * Note que você terá que acionar PLAY para iniciar a música. * Para que abra a página já tocando a música, coloque este código: * Você ainda pode definir o tamanho do display, assim: COMO INSERIR FLASH NO SITE: Para inserir um flash (arquivo com extensão .swf), como abaixo, coloque este código depois da tag :

      Indica que você escreveu normalmente seus textos nas páginas html (com acentuação, etc) sem usar caracteres especiais (ASCII), e a META TAG acima indica isto (palavras originarias do Latim). Existe outras META TAGS, mas as principais e necessárias estão aqui. COMO FAZER UM LINK PARA ENVIAR E-MAIL : Código:Clic Aqui Note que ao ser clicado no link (Clic Aqui), abrirá o programa que está instalado no computador, exemplo: Outlook, Incredimail, etc. Porém nem todos tem esses programas instalados, vão buscar seus e-mails diretamente nos sites, motivo pelo qual você deve sempre deixar visível seu endereço de e-mail, como abaixo: Meu e-mail é: fulano@provedor.com.br se preferir, Clic Aqui COMO FAZER UMA CAIXA DE TEXTO : Código: Fica assim: ESCREVA AQUI O SEU TEXTO COMO FAZER UMA ÂNCORA : Repare que ao clicar ir para âncora você foi redirecionado à outro ponto desta página. Isto é chamado "ÂNCORA". Você pode redirecionar o usuário para qualquer ponto de sua página ou para outro ponto de outra página. O código de destino, isto é, o ponto de chegada ao ser clicado é: Código: E o código do comando "ir para" é: Código:ir para ancora Você pode criar vários pontos, como: e ir para ancora2 Para fazer o usuário " " não é necessário uma âncora como acima, tem um código especial para isto: Código: Para ir à outra página: Código: ir para ancora Utilizando uma imagem como âncora: Código: