Scribd Logo
Carica

Benvenuto in Scribd!

  • HTML

    Caricato da

    Sandro X Andréa
    21 visualizzazioni15 pagine

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    21 visualizzazioni15 pagine

    HTML

    Caricato da

    Sandro X Andréa

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 15

    TUTORIAL HTML

    http://shibolete.tripod.com/Passo1.html

    TUTORIAL BSICO HTML


    O QUE HTML? O QUE HIPERTEXTO? USANDO UM EDITOR DE TEXTO AS TAGS O ESQUELETO DE UMA PGINA HTML O CABEALHO DO DOCUMENTO O TTULO DO DOCUMENTO A DESCRIO DO DOCUMENTO AS PALAVRAS CHAVES DO DOCUMENTO INSERINDO COMENTRIOS NO DOCUMENTO O CORPO DO DOCUMENTO USANDO PADRES DE FUNDO AS CORES DO TEXTO USANDO OS LINKS A NATUREZA DOS LINKS LINKS RELATIVOS LINKS ABSOLUTOS AS CORES DOS LINKS O SUBTTULO A FORMATAO DO TEXTO TEXTO PR-FORMATADO LISTAS NO NUMERADAS LISTAS NUMERADAS LISTAS DE DEFINIO COMO INSERIR IMAGENS COMO POSICIONAR IMAGENS INFORMAES DE COMO INSERIR SEU EMAIL COMO INSERIR BARRAS TAGS ESPECIAIS

    Close Ad

    O QUE HTML? Um documento escrito em HTML (Hiper Textos Markup Language) um texto comum no formato ASCII.

    O QUE HIPERTEXTO? Hipertexto so aqueles itens marcados numa pgina WEB que, quando clicados, levam a imagens ou informaes mais detalhadas sobre o assunto. O Hipertexto um texto (ou uma imagem) grifado e destacado na pgina por uma cor diferente da cor do texto no qual est inserido. Quando se coloca o cursor sobre o hipertexto, o cursor muda seu formato para um cone representado por uma mo. Exemplo de Hipertexto: Clique aqui para...

    1 de 15

    16/07/2013 08:33

    TUTORIAL HTML

    http://shibolete.tripod.com/Passo1.html

    CRIANDO UMA PGINA HTML USANDO UM EDITOR DE TEXTO Uma pgina HTML pode ser criada em qualquer editor de texto (Bloco de Notas, WordPad, etc), desde que seja salvo no formato ASCII. Por exemplo: Se voc criar um documento usando Bloco de Notas, deve salv-lo no formato .txt. Ao salv-lo modifique a extenso .txt para .htm ou .html. Se seu documento, no formato .txt se chama Index.txt altere-o para Index.htm ou Index.html. Porm, lembre-se que o documento somente pode ser considerado HTML se nele houver o esqueleto da linguagem HTML. AS TAGS As marcas utilizadas para produzir o hipertexto so chamadas tags. Uma tag consiste dos sinais < (menor que) e > (maior que) e um texto dentro deles. A notao <title> por exemplo uma tag para o ttulo do documento. As tags devem ser usadas em pares, devendo haver uma tag que inicia a marcao e uma tag que a finaliza. A tag de finalizao deve ter uma barra "/" antes do texto. Por exemplo, a marcao completa para o ttulo de um documento : <title>Ttulo do Documento</title> Algumas marcaes, no entanto, como as tags de incio de pargrafo <p>, quebra de linha <br> e insero de barra <hr> no necessitam de seus pares. Todo documento HTML deve iniciar com a tag <html> e finalizar com o seu par </html>. Um documento HTML no faz diferena entre maisculas e minsculas. Portanto tanto faz usar <TITLE> como <title>.

    O ESQUELETO DE UMA PGINA HTML Um documento HTML divide-se em 2 partes essenciais: cabealho e corpo. Veja o exemplo abaixo:
    <html> <head> (cabea do documento) <title>ttulo do documento</title> </head> (final de cabea do documento) <body> (tag de incio do corpo) <h1>Primeiro nvel de cabealho</h1> <h2>Segundo nvel de cabealho</h2> </body> (tag de final do corpo) Tag de incio do documento

    CABEALHO

    CORPO

    </html>

    Tag de final do documento

    2 de 15

    16/07/2013 08:33

    TUTORIAL HTML

    http://shibolete.tripod.com/Passo1.html

    CABEALHO DO DOCUMENTO A cabea do documento deve conter as informaes mais essenciais da pgina. Coloca-se no cabealho o Ttulo do documento, a descrio, palavras chaves e comentrios O TTULO Todo documento HTML deve ter um ttulo que servir para identificar o documento. O ttulo do documento no visualizado na pgina mas aparece na barra de ttulo do browser de navegao. O ttulo no o mesmo que cabealho. O ttulo o nome do arquivo. atravs do ttulo que sua home page ser procurada pelos catlogos de busca. A tag de ttulo : <title></title> Por exemplo: minha pgina tem o ttulo CINCO PASSOS PARA CONSTRUIR SUA HOME PAGE. Ento a tag para o ttulo de minha pgina : <title> CINCO PASSOS PARA CONSTRUIR SUA HOME PAGE</title> A DESCRIO A cabea do documento deve conter uma descrio da pgina. Sobre o que ela trata e o que tem a oferecer. A tag para a descrio : <meta name="description" content="descrio"> Por exemplo: minha pgina trata de HTML. A notao para minha pgina a seguinte: <meta name="description" content="Tutorial sobre HTML, dicas para construir homepage"> PALAVRAS CHAVES As palavras chaves tambm serviro para a busca de sua home page. A tag de palavras chaves : <meta name="keywords"content="palavras chaves"> A notao acima para minha pgina : <meta name="keywords"content="HTML, tutorial, gif, homepage">

    3 de 15

    16/07/2013 08:33

    TUTORIAL HTML

    http://shibolete.tripod.com/Passo1.html

    COMENTRIOS Voc pode inserir comentrios adicionais na cabea do seu documento usando a marcao <!> Portanto o cabealho de um documento HTML ficaria assim: <head> (incio da cabea) <title>Como Fazer uma Home Page</title> <meta name="description" content="dicas de linguagem HTML, endereos de imagens gifs, download de editores HTML."> <meta name="keywords"content="home page, html, barras, gifs, programao"> <!Home Page criada por...usando o programa... > </head> (final de cabea)

    O CORPO O corpo do documento a parte que aparece na Home Page. O texto de algumas tags colocadas nesta sesso do documento no so visualizados na tela, mas sim os seus efeitos. o caso, por exemplo, das tags de padro de fundo, cor de texto e cores de link, vlink e alink.

    PADRES DE FUNDO Uma Home page pode conter uma textura como padro de fundo, um arquivo no formato gif ou jpg, ou utilizar as cores do padro RGB. A notao para os dois padres de fundo so: (1)<body background="arquivo.gif"></body> Esta notao indica fundos com textura. Se o arquivo gif estiver no mesmo servidor, mas em outro diretrio, deve ser indicado o seu caminho path/name. Se estiver em outro servidor, sua URL deve ser indicada: Tipo://host.domnio[:porta]/path/NomeDoArquivo.

    4 de 15

    16/07/2013 08:33

    TUTORIAL HTML

    http://shibolete.tripod.com/Passo1.html

    Dica: Use <bgproperties="fixed"> para fixar o fundo da pgina na tela. (2)<body bgcolor="#rrggbb"></body> Esta notao indica fundos no padro RGB. Usa-se um cdigo no formato hexadecimal precedido pela tralha #. Clique em Tabela de Cores para ver as cores com seus respectivos cdigos RGB.

    CORES DO TEXTO As cores do texto so indicadas, usando-se o mesmo cdigo hexadecimal dos padres de fundo RGB. A notao para indicar a cor do texto : <body text="#rrggbb"></body> OS LINKS Os termos que aparecem em destaque na pgina, geralmente sublinhados e em cores diferentes, so textos que indicam uma ligao hipertexto. A NATUREZA DOS LINKS (1) Pode-se ligar partes de um texto ou imagens no mesmo documento. Este tipo de link encaixa-se na categoria de link relativo. (2) Pode-se ligar partes de um texto ou imagens de outros documentos localizados no mesmo diretrio. Este tipo de link encaixa-se na categoria de link relativo. (3) Pode-se ligar partes de um texto ou imagens de outros documentos localizados em diretrio diferente. Este tipo de link encaixa-se na categoria de link relativo. (4) Pode-se ligar partes de um texto ou imagens de outros documentos localizados em Provedor diferente. Este tipo de link encaixa-se na categoria de link absoluto. A tag que faz a ligao hipertexto <a>, que chamada de ncora. A notao completa para um link : <a href="texto ou imagem vinculada"></a> LINKS RELATIVOS (1) Links no mesmo documento: Para interligar parte de um texto a outro texto no mesmo documento, usa-se uma ncora de nome, para identificar o primeiro trecho do texto, e uma ncora interna para identificar a outra parte do texto.

    5 de 15

    16/07/2013 08:33

    TUTORIAL HTML

    http://shibolete.tripod.com/Passo1.html

    A ncora de nome e a ncora interna devem possuir uma palavra chave, idntica em ambas. Aps as aspas da ncora interna e antes da palavra chave, usa-se a tralha (#). No primeiro trecho, usa-se uma ncora de nome, cuja notao : <a name="PalavraChave"> No segundo trecho, usa-se uma ncora interna, cuja notao : <a href="#PalavraChave">Nome do Link</a> (2) Links para outros documentos: A notao utilizada para links em diretrios diferentes igual a anterior, devendo, entretanto indicar-se o nome do arquivo na ncora interna. A notao : <a href="NomeDoArquivo#PalavraChave"> (3) Links para documentos em diretrios diferentes: A notao idntica a do item (2), devendo, entretanto, indicar-se o nome do diretrio. Exemplo: <a href="Diretrio/NomeDoArquivo#PalavraChave"> LINKS ABSOLUTOS Quando se interliga textos ou imagens de provedores diferentes, usa-se links absolutos. Os links absolutos devem ser indicado pelo uso da URL (Uniform Resource Locators). A notao para links absolutos : protocolo://servidor[:port]/path/filename Por exemplo, para fazer um link absoluto em sua homepage com a pgina inicial deste documento, usa-se: <a href="http//members.tripod.com/~shibolete/Index.html">CINCO PASSOS PARA CONSTRUIR SUA HOME PAGE</a>

    CORES DOS LINKS 1 Links Pode-se utilizar qualquer cor para o link, no entanto recomenda-se a cor padro azul (blue) indicada pelo cdigo rgb=#0000FF.

    6 de 15

    16/07/2013 08:33

    TUTORIAL HTML

    http://shibolete.tripod.com/Passo1.html

    Isto porque quando se clica sobre um link sua cor alterada para indicar ao usurio que aquele link j foi consultado. Se no for indicada a cor do link, ele ser automaticamente exibido na cor padro configurada no seu browser, geralmente na cor azul. 2 Vlink Indica a cor dos links j consultados. 3 Alink Indica a cor do links ativados na pgina. A notao para indicar as cores dos links, alinks e vlinks : <body link="#rrggbb" vlink="#rrggbb" alink="#rrggbb></body> A notao completa para as cores de textos e links : <body background="arquivo.gif" text="#rrggbb" link="#0000FF" vlink="#rrggbb" alink="#rrggbb"></body> ou <body bgcolor="#rrggbb" text="#rrggbb" link="#0000FF" vlink="#rrggbb" alink="#rrggbb"></body>

    O SUBTTULO o ttulo que aparece na Home Page. No deve ser confundido com o ttulo do documento, que no visualizado na pgina, mas aparece no alto da tela. O ttulo inserido na seo do cabealho <head><title></title></head> enquanto o subttulo colocado na seo do corpo documento HTML <body></body> O subttulo possui 6 nveis de tamanho, numerados de 1 a 6. Usa-se a tag <hy>, onde "y" um nmero entre 1 a 6. Os nveis para subttulo so em nmero de seis, conforme tabela abaixo:

    <h1>nvel 1</h1>

    nvel 1

    7 de 15

    16/07/2013 08:33

    TUTORIAL HTML

    http://shibolete.tripod.com/Passo1.html

    FORMATAO DO TEXTO O documento HTML no segue o padro de formatao da maioria dos editores de texto. Ele no possui recursos para aumentar o espao entre as palavras e entrelinhas nem para forar a justificao do texto. Para obter esses recursos preciso utilizar a tag apropriada. A listagem a seguir mostra a funo de cada tag: Quebra de Linha <br> faz uma quebra de linha, mas no acrescenta espao entre as linhas. Exemplo: O documento HTML no segue<br> o padro de formatao... O texto acima visualizado da seguinte forma: O documento HTML no segue (quebra de linha) o padro de formatao... Quebra de texto sem alinhamento O alinhamento de imagens muitas vezes fora o texto a acompanhar o alinhamento, tornando difcil o seu posicionamento. A tag <br clear=right> ou <br clear=left> libera o texto desse alinhamento. Para posicionar o texto em ambas as margens use <br clear=all> Pargrafo <p> inicia um novo pargrafo acrescentando espao entre as linhas. Exemplo: O documento HTML no segue<p> o padro de formatao... O texto acima aparece da seguinte forma: O documento HTML no segue (espao entre linhas) o padro de formatao... <b></b> coloca o texto em negrito.

    8 de 15

    16/07/2013 08:33

    TUTORIAL HTML

    http://shibolete.tripod.com/Passo1.html

    <i></i> coloca o texto em itlico. <center></center> centraliza o texto. TEXTO PR-FORMATADO Existe um recurso para apresentar o texto exatamente na forma em que ele foi digitado. Usando-se a tag <pre></pre> sero mantidos os espaos e tabulaes. Exemplo: <pre> Existe um recurso para apresentar o texto exatamente na forma em que ele foi digitado </pre> Este texto ser mostrado na forma como foi digitado. Existe um recurso para apresentar o texto exatamente na forma em que ele foi digitado Para inserir espao entre palavras usa-se &nbsp; e <p> &nbsp;</p> para espaos entre linhas. LISTAS NO NUMERADAS Para apresentar uma lista de opes no numeradas use as seguintes tags: <ul> (tag de incio de lista no numerada) <li> item 1 <li> item 2 <li> item 3 </ul> (tag de fim de lista no numerada)

    9 de 15

    16/07/2013 08:33

    TUTORIAL HTML

    http://shibolete.tripod.com/Passo1.html

    LISTAS NUMERADAS Para apresentar uma lista de opes numeradas automaticamente, use as seguintes tags: <ol> (tag de incio de lista numerada) <li> item 1 <li> item 2 <li> item 3 </ol> (tag de fim de lista numerada) LISTAS DE DEFINIES Apresenta uma srie de definies, cada uma com um termo abreviado em destaque. Exemplo: <dl> (tag de incio de lista de definies) <dt> (tag de termo abreviado) <dd> (definino) <dt> (tag de termo abreviado) <dd> (definino) </dl> (tag de fim de lista de definio) O exemplo acima poderia ser de uma lista de alimentos: <dl> <dt> Frutas <dd> So alimentos comestveis adocicados... <dt> Legumes <dd> So frutos secos... constitudos de um s carpelo. </dl> Ento este exemplo mostrado assim: Frutas So alimentos comestveis adocicados... Legumes So frutos secos... constitudos de um s carpelo. INSERINDO IMAGENS

    10 de 15

    16/07/2013 08:33

    TUTORIAL HTML

    http://shibolete.tripod.com/Passo1.html

    Para inserir imagens use a seguinte notao: (1) Arquivos de imagens que esto no mesmo diretrio: <img src="NomeDoArquivo"> Ex. <img src="email.gif"> (2) Arquivos de imagens que esto em diretrios diferentes: <img src="Diretrio/NomeDoArquivo"> Ex. <img src="Imagens/email.gif"> (3) Arquivos de imagens externos: <img src="protocolo://servidor[:port]/path/filename"> <img src="http://members.tripod.com/~shibolete/constru.gif"> Para inserir imagens use a seguinte notao: (1) Arquivos de imagens que esto no mesmo diretrio: <img src="NomeDoArquivo"> Exemplo: <img src="email.gif"> (2) Arquivos de imagens que esto em diretrios diferentes: <img src="Diretrio/NomeDoArquivo"> Exemplo: <img src="Imagens/email.gif"> (3) Arquivos de imagens externos: <img src="protocolo://servidor[:port]/path/filename"> <img src="http://members.tripod.com/~shibolete/constru.gif"> Moldura em imagens Use <img src="imagem.gif" vspace="30" para espao vertical entre o texto e a imagem. Use <img src="imagem.gif" hspace="30" para espao horizontal entre o texto e a imagem.

    11 de 15

    16/07/2013 08:33

    TUTORIAL HTML

    http://shibolete.tripod.com/Passo1.html

    Dica: Use <img src="imagem" Alt="descrio"> para uma descrio alternativa da imagem. Para usar uma imagem como link, sem borda, use < img src="imagem" border="0"> POSICIONANDO IMAGENS Para definir a posio das imagens, usa-se 5 notaes:
    (1) Imagem esquerda: posiciona a imagem esquerda do texto: <img align="left" src="http://www... imagem.gif"> (2) Imagem direita: posiciona a imagem direita do texto: <img align="right" src="http://www... imagem.gif"> (3) Texto alinhado ao topo da imagem: <img align="top" src="http://www... imagem.gif"> Texto com imagem alinhada esquerda

    Texto com imagem alinhada direita

    Texto no topo da imagem

    (4) Texto alinhado ao rodap da imagem: <img align="bottom" src="http://www... imagem.gif"> Texto no rodap da imagem (5) Texto alinhado ao centro da imagem: <img align="middle" src="http://www... imagem.gif">

    Texto no centro da imagem

    INFORMAES DE RODAP Para inserir seu endereo na pgina, utilize a seguinte marcao: <address></address> Coloca-se no endereo o nome do autor do documento e o endereo para contato. COMO INSERIR SEU EMAIL Para inserir o endereo eletrnico usa-se a URL e a notao mailto. A URL indica para onde deve ir a mensagem. A notao mailto abre o programa de correio configurado no seu navegador.

    12 de 15

    16/07/2013 08:33

    TUTORIAL HTML

    http://shibolete.tripod.com/Passo1.html

    A sintaxe para o link de endereo eletrnico : <a href="mailto:logon@servidor">Nome do Link</a> Exemplo: O meu endereo eletrnico s2705933@yahoo.com Para inser-lo em minha pgina usei a seguinte notao: <a href="mailto:s2705933@yahoo.com">Envie-me um email</a> Para usar uma imagem como link para seu email, use a seguinte notao: <a href="mailto:login@provedor.com"><img src="imagem.gif"></a> No se esquea de alterar o texto login@provedor.com pelo seu login e pelo nome do seu provedor de email, bem como alterar "imagem.gif pelo nome de sua imagem. INSERINDO BARRAS Para inserir barras horizontais basta utilizar a seguinte tag: <hr>. Esta tag mpar e no possui par. Para exibir uma barra normal, use: <hr>

    Grossura das Barras Para exibir barras mais grossas, use o termo size (volume) em conjunto com a tag <hr> <hr <hr <hr <hr size=5> size=10> size=15> size=20>

    Largura das Barras Para controlar a largura das barras use a palavra width e a porcentagem com o sinal de igual. Exemplo: <hr align="Left" Width="50%"> Alinhando as Barras

    13 de 15

    16/07/2013 08:33

    TUTORIAL HTML

    http://shibolete.tripod.com/Passo1.html

    Para alinhas as barras use as palavras Left, Right ou Center para alinhar esquerda, direita ou centralizar a barra. Exemplo: <hr align="Left" Width="50%"> <hr align="Right" Width="50%"> <hr align="Center" Width="50%"> Barras Animadas Para inserir barras animadas (imagens gifs) use a sintaxe de insero de imagens: <img src="http://www... barra.gif">

    TAGS ESPECIAIS As notaes presentes em marcaes, devem ser representadas com notaes especiais para que possam ser exibidas na tela. Estas notaes especiais sempre se iniciam por & (E comercial) e encerram-se com ; (ponto e vrgula).

    Notao &lt; &gt; &amp; &quot; &reg; &copy

    Descrio Maior que Menor que E comercial Aspas duplas Marca registrada Copyrights

    Aparncia > < & "

    possvel utilizar padres de acentuao do Windows em documentos HTML, no entanto apenas poder visualizar a acentuao o computador que reconhecer este padro especfico.

    14 de 15

    16/07/2013 08:33

    TUTORIAL HTML

    http://shibolete.tripod.com/Passo1.html

    Para permitir a visualizao de caracteres das marcaes, por um grande nmero de mquinas, use o padro ISO-Latin Alphabet, conforme tabela abaixo:

    Caracter Acento agudo Acento grave

    Notao &xacute; onde x uma letra qualquer, maiscula ou minscula &xgrave; onde x uma letra qualquer, maiscula ou minscula

    Acento circunflexo &xcirc; onde x uma letra qualquer, maiscula ou minscula Letra com til Letra com trema Cedilha Letras unidas Letra com argola N com til O cortado &xtilde; onde x uma letra qualquer, maiscula ou minscula &xuml; onde x uma letra qualquer, maiscula ou minscula &Ccedil; = ou &ccedil; = &Aelig; = ou &aelig; = &Aring; = ou &aring; = &Ntilde; = ou &ntilde; = &Oslash; = ou &Oslash; =
    Todos os Direitos Reservados, 1996 Segunda-feira, 9 de dezembro de 1996. ltima reviso: Quarta-feira, 22 de julho de 1998.

    Curso de TI Online
    www.treinaweb.com.br Estude na empresa lder em cursos online com foco em TI no Brasil!

    15 de 15

    16/07/2013 08:33

    Potrebbero piacerti anche