Scribd Logo
Carica

Benvenuto in Scribd!

  • 01 - Introdução HTML

    Caricato da

    Evelyn Krm
    29 visualizzazioni29 pagine

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    PPTX, 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 PPTX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    29 visualizzazioni29 pagine

    01 - Introdução HTML

    Caricato da

    Evelyn Krm

    Copyright:

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

    ______________________________________________________________________ ETEC DR JOS LUIZ VIANA COUTINHO - JALES

    Tcnico em Informtica para Internet

    Prof.: Evelyn K. R. Matos | email: evelynkrm@gmail.com Face: facebook.com/evelynbbl

    HTML; Tags; Atributos das Tags; Bons hbitos de digitao; Comandos bsicos do html;

    Uma pgina HTML gerada por um simples arquivo de texto. Esse arquivo de texto pode ser editado at pelo Bloco de Notas e deve ser salvo com a extenso .html ou .htm. O arquivo deve possuir obrigatoriamente alguns comandos que fazem o navegador enxergar o texto como uma pgina HTML. Esses comandos so marcaes tambm chamadas de etiquetas (tags, em ingls).
    3

    As tags, que servem para definir os elementos da pgina, so iniciadas pelo smbolo "menor que" (<) e finalizadas pelo smbolo "maior que" (>). Em geral, uma tag aparece duas vezes, abrindo e fechando um contedo, mas a que fecha contm uma barra (/).

    Se quisermos, por exemplo, inserir dois elementos (um cabealho e um pargrafo), fazemos assim: <h1>Isto um cabealho</h1> <p>Isto um pargrafo</p>

    H tambm os elementos que no possuem tag de fechamento. So chamados de elementos vazios. Neste caso, a tag de fechamento no existe porque no h contedo a ser fechado.

    Um exemplo de uma tag que cria um elemento vazio a que introduz uma quebra de linha: <p>Aqui temos um pargrafo<br> que continua na linha seguinte.</p>

    neste exemplo, que o contedo do elemento pargrafo tudo que est entre as tags <p> e </p>. J o elemento quebra de linha <br> no possui contedo.
    7

    Uma tag pode conter um ou mais atributos que so colocados somente na de abertura, obedecendo ao formato: atributo="valor". O valor pode ser colocado entre aspas ou no. Exemplo de uma tag, onde align o atributo: <p align="center">pargrafo centralizado</p>

    Veja agora um exemplo em que colocamos mais de um atributo na mesma tag:


    <font face="arial" size="2">texto</font>.
    8

    Mesmo sabendo que no so uma exigncia da linguagem HTML, considere como bons hbitos:

    1) Utilizar sempre as tags de fechamento; 2) Colocar sempre os valores dos atributos entre aspas; 3) Utilizar sempre letras minsculas nas tags e atributos.
    9

    <html> <head> <title> </title> </head> <body> </body> </html>

    <html> e </html> marcam o incio e o final do documento HTML.


    <head> e </head>, o cabealho do documento, traz informaes sobre o contedo da pgina e pode ser constitudo de vrios elementos, dentre os quais, temos o ttulo do documento, entre as tags <title> e </title>. <body> e </body> o corpo da pgina e contm as informaes que efetivamente sero exibidas pelo navegador. Nele, so inseridos elementos, tais como, cabealhos, pargrafos, listas, links, imagens e tabelas. 10

    Deve ser inserido entre as tags <title> e </title>. D uma identidade ao documento e utilizado em buscas na rede. Aparece fora da pgina, na barra de ttulo do navegador. No podemos confundir esse ttulo com aqueles ttulos que so exibidos dentro da pgina.

    11

    O texto de um cabealho deve ser especificado com a utilizao das tags a seguir. So seis nveis: de 1 (o maior tamanho) a 6 (o menor tamanho). <h1> e </h1> <h2> e </h2> <h3> e </h3> <h4> e </h4> <h5> e </h5> <h6> e </h6>
    12

    A tag <p> utilizada para definir o incio de um novo pargrafo, deixando uma linha em branco. A tag de fechamento </p> dispensvel, mas, como j disse, aconselhvel a sua utilizao. H situaes em que precisamos mudar de linha sem deixar linha em branco. Para fazer isso, devemos aplicar uma quebra de linha atravs da tag <br/>.

    13

    H muitas situaes em que precisamos mudar de linha sem deixar linha em branco. Para fazer isso, devemos aplicar uma quebra de linha atravs da tag <br/>.
    14

    As ordenadas (ordered lists) so criadas com as tags <ol> e </ol>. E as no ordenadas (unordered lists) com <ul> e </ul>. Em ambas, utilizamos <li> e </li> para introduzir cada item.

    15

    16

    Podemos inserir um link numa pgina HTML atravs das tags <a> e </a>. E, no atributo href, colocamos o seu destino. <a href="destino">contedo</a>

    Destino = Pode ser um nome de um arquivo, um caminho completo do arquivo, um ponto localizado no interior de um arquivo, uma URL, ou ainda um endereo de e-mail. Contedo = Pode ser um texto ou uma imagem e nele que o usurio d um clique para fazer o acesso.
    17

    1) Links com outras pginas do site; 2) Links com outros sites; 3) Links com endereos de email(para que o visitante possa enviar uma mensagem); 4) Links com arquivos para downloads.

    18

    So links que estabelecem conexo entre as pginas do mesmo site. <a href=contato.html">contato</a>

    19

    So links que se dirigem a pginas de outro site.

    <a href=http://www.siteabc.com>siteabc</a>

    20

    Os links a endereos de email so aqueles que permitem ao visitante remeter uma mensagem via correio eletrnico (e-mail).
    <a href="mailto:abc@gmail.com">abc@gmail.com</a>

    O visitante da pgina necessitar ter uma conta de e-mail configurada em seu sistema. Se no tiver, esse sistema de contato no funcionar.
    21

    Este tipo de link permite que voc coloque disposio do visitante arquivos para serem baixados (downloads). O mecanismo o mesmo dos outros links, s que, em vez de dirigirse a uma pgina web, dirige-se a um arquivo de outro tipo.
    <a href="arq.zip">clique aqui para fazer o download</a>
    22

    Colocando o atributo target na tag <a>, podemos definir em qual janela (ou frame) dever ser exibido o resultado do link. Se esse atributo no for especificado, a exibio ser feita na prpria janela onde est o link.

    23

    _blank - A exibio ser feita em uma nova janela. _self - A exibio ser feita na prpria janela onde est o link (padro). _parent - A exibio ser feita na janela que contm o frame onde est o link. _top - A exibio ser feita na janela que ocupa posio mais alta na hierarquia, quando h frames.
    24

    Esses efeitos so obtidos com a utilizao das seguintes tags e seus respectivos fechamentos:
    <b> - texto em negrito (bold) </b> <i> - texto em itlico </i> <u> - texto sublinhado (underline) </u> <tt> - texto monoespaados </tt> <sup> - texto sobrescrito </sup> <sub> - texto subscrito </sub>
    25

    As imagens so armazenadas em arquivos que podemos criar utilizando editores grficos ou podemos j t-los prontos. Existem vrios formatos de arquivos de imagens, ou seja, vrios tipos. Os principais so: .jpeg (ou .jpg), .gif e .png.

    26

    Para inserir uma imagem numa pgina HTML utilizamos a tag <img>. Essa tag uma das que introduzem elementos vazios, ou seja, no possui contedo nem fechamento. Possui apenas atributos. Abaixo, apresentamos uma lista de seus principais atributos:
    27

    Src
    Especifica o arquivo de imagem ou o caminho

    completo (path), src vem de source (fonte).

    Alt
    Especifica um texto que aparecer dentro de

    uma rea retangular que a imagem dever ocupar, at que ela seja baixada. alt vem de alternative (texto alternativo).

    Border
    Define que a imagem ter bordas, ou seja, ser

    colocada dentro de um retngulo, e o valor atribudo em pixels estabelece a sua espessura. Se for definida como zero no ter bordas e, se no for definida, ter bordas com 1 pixel (padro).
    28

    width e height
    Definem a largura e a altura da imagem em

    pixels. Deve-se colocar exatamente as medidas que a imagem possui.

    hspace e vspace
    Definem as margens da imagem, em pixels. O

    atributo hspace define as margens esquerda e direita (sentido horizontal) e o vspace acima e abaixo (sentido vertical). teis para distanciar texto ou outro elemento da extremidade da imagem.

    Align
    Define o alinhamento da imagem dentro da

    pgina e controla o fluxo do texto ao seu redor. Tal texto o que digitado imediatamente aps a tag <img>.
    29

    Potrebbero piacerti anche