Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Apresentação HTML

    Enviado por

    Dafne Nascimento
    5 visualizações41 páginas

    Título original

    apresentação.html

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    5 visualizações41 páginas

    Apresentação HTML

    Enviado por

    Dafne Nascimento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 41

    Linguagem HTML

    Leandro Machado - Abril 2011

    O que HTML?
    HTML, sigla para "Hypertext Markup Language", que significa (Linguagem de Marcao de Hipertexto) uma linguagem de marcao utilizada para produzir pginas na Web. Atualmente o HTML encontra-se na verso 5.

    O que so tags?
    So estruturas de linguagem de marcao que consistem em breves instrues, tendo uma marca de incio e outra de fim. H uma tendncia nos dias atuais para se usar as tags apenas como delimitadores de estilo e/ou contedo, tanto em HTML quanto em XML.

    Salvando em HTML
    Para salvar um documento em HTML siga os seguintes passos: 1. Abra o bloco de notas 2. Salve o nome do arquivo com o sufixo .html 3. Mude o tipo para todos os arquivos

    Salve um arquivo HTML com o nome PGINA 1 - HTML SIMPLES

    Tags HTML Bsicas


    Tag <html> Descrio Define um documento HTML

    <body>
    <h1> a <h6> <p> <br> <hr> <!-->

    Define o corpo do documento


    Define ttulo 1 a ttulo 6 Define um pargrafo Insere uma nica quebra de linha Define um filete horizontal Define um comentrio

    O Elemento Head (Cabealho)


    O elemento head contm informao geral, tambm chamado metainformao, sobre um documento. Meta significa "informao sobre.
    Tag Descrio

    <head>
    <title>

    Define informao sobre o documento


    Define o ttulo do documento

    Estrutura bsica

    Salve um arquivo HTML com o nome PGINA 2 - ESTRUTURA BSICA

    Tags de Formatao de Texto


    Tag Descrio

    <big> <em> <small>


    <strong> <sub> <sup>

    Define texto grande Define texto enfatizado (itlico) Define texto pequeno
    Define texto forte Define texto subescrito Define texto superescrito

    Salve um arquivo HTML com o nome PGINA 3 - FORMATAO DE TEXTOS

    Cabealhos
    Ttulos so definidos com as tags <h1> a <h6>. A <h1> define o ttulo maior. A <h6> define o ttulo menor. Tag
    <h1> </h1> <h2> </h2> <h3> </h3> Cabealho de nvel 1 Cabealho de nvel 2 Cabealho de nvel 3

    Descrio

    <h4> </h4>
    <h5> </h5> <h6> </h6>

    Cabealho de nvel 4
    Cabealho de nvel 5 Cabealho de nvel 6

    Salve um arquivo HTML com o nome PGINA 4 - CABEALHOS

    Formatando pargrafos
    Alinhamento Esquerda Centro Direita Utilizao da Tag <p align="left">Texto alinhado esquerda</p> <p align=center">Texto alinhado ao centro</p> <p align=right">Texto alinhado direita</p>

    Justificado

    <p align="justify">Texto justificado</p>

    Salve um arquivo HTML com o nome PGINA 5 PARGRAFOS . Utilize o site http://www.lipsum.com/ para copiar os textos.

    Tags de Citaes e Endereos


    Tag <address> <blockquote> Descrio Define um elemento de endereo Define uma citao longa

    Salve um arquivo HTML com o nome PGINA 7 - ENDEREO E CITAES. Utilize somente as tags <address> e <blockquote>.

    Caracteres Especiais
    Alguns caracteres tm significado especial na HTML, como o sinal de menor do que (<) que define o incio de uma tag de HTML. Se quisermos que o navegador exiba de fato estes caracteres devemos inserir entidades de caractere na fonte da HTML.
    Uma entidade de caractere tem trs partes: um e comercial (&), um nome de entidade ou um # e um nmero de entidade, e finalmente um ponto e vrgula (;).

    Consulte a tabela de caracteres especiais em http://www.lsi.usp.br/~help/html/iso.html

    Caracteres Especiais mais comuns


    Resultado < > & " Descrio espao no separvel menor do que maior do que e comercial aspas Nome da Entidade &nbsp; &lt; &gt; &amp; &quot;

    Salve um arquivo HTML com o nome PGINA 8 CARACTERES ESPECIAIS. Escreva: RVORE TOM & JERRY 4 < 8 GUA - No

    A Tag ncora e o Atributo Href


    A HTML usa a tag <a> (ncora) para criar um vnculo (link) com outro documento. Uma ncora pode apontar para qualquer recurso na Web: uma pgina em HTML, uma imagem, um arquivo de som, um filme, etc.

    Crie uma pgina com dois links, um que remeta para um site e outro que remeta para um arquivo HTML. Salve o arquivo HTML com o nome PGINA 9 NCORAS.

    O Atributo Alvo (Target)


    Com o atributo alvo, voc pode definir onde o documento vinculado ser aberto. A linha abaixo abrir o documento em uma nova janela do navegador:
    Target "_blank" "_self" "_top" Descrio O documento ser carregado em uma nova janela. O documento ser carregado mesmo frame ou pgina O documento ser carregado na mesma janela e vai para o topo da pgina.

    Crie uma pgina com quatro links. Cada link deve utilizar um atributo target diferente. Salve o arquivo HTML com o nome PGINA 10 - TARGETS.

    Exerccio de Reviso
    1. 2. 3. Crie um texto em negrito e alinhado direita; Crie um link centralizado; Crie um link para uma pgina interna e que abra em outra janela;

    Salve um arquivo HTML com o nome PGINA REVISO 1

    Marquee
    possvel animar alguns textos com tipos especiais de formatao, sempre diretamente no cdigo fonte.
    importante notar que recursos de animao devem ser utilizados com cuidado, pois em uma pgina que j apresenta vrios recursos que chamam a ateno do leitor (figuras, cores, fontes) os efeitos animados de marquee podem poluir o visual da pgina ocasionando um resultado final cansativo e confuso.

    Crie uma um efeito animado simples (maruee). Salve o arquivo HTML com o nome PGINA 11 MARQUEE SIMPLES

    Atributos do Marquee
    Marquee WIDTH e HEIGHT DIRECTION Descrio Altura e largura do marquee. Para que direo ir caminhar. (LEFT RIGHT UP - DOWN)

    SCROLLAMOUNT
    LOOP BGCOLOR

    Especifica a quantidade de pixels que ser usada para deslocar.


    Especifica quantas vezes ser executado a rolagem do texto. Especifica a cor de fundo.

    Crie uma um efeito animado (maruee) e insira os atributos acima. Salve o arquivo HTML com o nome PGINA 12 MARQUEE FORMATADO

    Listas No Ordenadas
    Uma lista no ordenada uma lista de itens. As listas de itens so marcadas com bullets (tipicamente pequenos crculos pretos).
    Uma lista no ordenada comea com a tag <ul>. Cada item da lista comea com a tag <li>. Dentro de um item de uma lista voc pode colocar pargrafos, quebras de linha, imagens, vnculos, outras listas, etc.

    Salve um arquivo HTML com o nome PGINA 13 LISTA NO ORDENADA.

    Listas Ordenadas
    Uma lista ordenada tambm uma lista de itens. As listas de itens so marcadas com nmeros ou letras. Uma lista ordenada comea com a tag <ol>. Cada item da lista comea com a tag <li>.

    Tipo Lista numerada Lista com letras Lista com nmeros romanos

    Utilizao <ol > <ol type="A"> <ol type="I">

    Salve um arquivo HTML com o nome PGINA 14 LISTAS ORDENADAS.

    Listas de definies
    Uma lista de definies no uma lista de itens. Esta uma lista de termos e explicaes dos termos. Uma lista de definies comea com a tag <dl>. Cada termo da lista de definies comea com a tag <dt>. Cada definio da lista de definies comea com a tag <dd>.
    Salve um arquivo HTML com o nome PGINA 15 LISTA DE DEFINIES.

    Tabelas
    As tabelas so definidas com a tag <table>. Uma tabela dividida em linhas (com a tag <tr>), e cada linha dividida em clulas de dados (com a tag <td>). As letras td significam "table data," que o contedo de uma clula de dados. Uma clula de dados pode conter texto, imagens, listas, pargrafos, formulrios, filetes horizontais, tabelas, etc.
    Tag <table> <tr> <td> Descrio Define uma tabela Define uma linha de tabela Define uma clula de tabela

    Salve um arquivo HTML com o nome PGINA 16 TABELA SIMPLES

    As Tabelas e o Atributo Border (Borda)


    Se voc no especificar um atributo border a tabela ser exibida sem qualquer borda. s vezes isto pode ser til, mas geralmente, voc ir querer que as bordas sejam mostradas.
    Salve um arquivo HTML com o nome PGINA 17 TABELA COM BORDA

    Clulas vazias
    Alguns navegadores no exibem clulas vazias, por isso sempre utilizaremos uma borda para que a clula fique visvel. O Dreanweaver insere automaticamente nas clulas vazias o cdigo &nbsp; que corresponde a um espaamento.
    Salve um arquivo HTML com o nome PGINA 18 TABELAS COM CELULAS VAZIAS.

    Enchimento de clula (cellpadding)


    Define um espao medido em pixels entre o contedo da clula e suas respectivas bordas.

    Salve um arquivo HTML com o nome PGINA 19 TABELA COM ENCHIMENTO.

    Espaamento de clula (cellspacing)


    Define um espao medido em pixels entre as bordas das clulas.
    Salve um arquivo HTML com o nome PGINA 20 TABELA COM ESPAAMENTO.

    Exerccio de Reviso
    1. 2. Crie uma tabela com 4 linhas e 3 colunas com enchimento 10 e borda 2 com altura 800 e largura 600; Na primeira clula crie uma lista no ordenada com 6 itens sendo que cada item deve ser uma ncora com alvos _blank para endereos externos e _self para pgina internas; Preencha as demais clulas com um contedo; Escolha contedo de uma clula e aplique um efeito marquee com fundo amarelo (yellow) largura 30 e altura 20;

    3. 4.

    Salve um arquivo HTML com o nome PGINA REVISO 2

    Tabelas com fundos


    Atributo <table bgcolor="red> <table background=Imagem.jpg> Descrio Define uma cor de fundo Define uma imagem de fundo

    Salve um arquivo HTML com o nome PGINA 21 TABELA COM FUNDOS

    Clulas com fundos


    Atributo <td bgcolor="red> <td background=Imagem.jpg> Descrio Define uma cor de fundo Define uma imagem de fundo

    Salve um arquivo HTML com o nome PGINA 22 CLULAS COM FUNDOS.

    Alinhar o contedo em uma clula


    Tag <td align="left"> <td align=right"> Descrio Alinha contedo da clula esquerda. Alinha contedo da clula direita.

    Salve um arquivo HTML com o nome PGINA 23 TABELAS COM ALINHAMENTOS.

    Mesclar clulas
    Tag <td colspan=2"> <td rowspan="2"> Descrio Para mesclar colunas de uma tabela. Para mesclar linhas de uma tabela.

    Salve um arquivo HTML com o nome PGINA 24 CLULAS MESCLADAS.

    A Tag Image e o Atributo Src


    Na HTML, as imagens so definidas com a tag <img>. A tag <img> vazia, o que significa que ela requer atributos alm disso, ela no tem tag de fechamento. Para exibir uma imagem em uma pgina, voc necessita usar o atributo src. Src significa "source" [fonte]. O valor do atributo src a URL da imagem que voc quer exibir na sua pgina.
    Salve um arquivo HTML com o nome PGINA 25 IMAGENS

    Outros Atributos da Tag IMG


    Artibuto <img width=20... <img height=20... Descrio Define uma largura para a imagem Define uma altura para a imagem

    <img alt=texto...

    Texto alternativo para navegadores somente de texto

    Salve um arquivo HTML com o nome PGINA 26 IMAGENS COM ATRIBUTOS

    Formulrios
    Um formulrio uma rea que pode conter elementos de formulrio. Os elementos de formulrio permitem o usurio inserir informao (como campos de texto, campos de rea de texto, menus drop-down, botes radiais, caixas de seleo, etc.) em um formulrio.

    ACTION: neste atributo devemos informar o nome da URL para a qual o contedo do formulrio ser submetido, se este atributo no for especificado, a URL corrente ser usada

    Atributos de Formulrios
    Tag NAME METHOD GET POST Define o nome do formulrio define o mtodo de envio dos dados. Aceita os valores GET e POST. Os dados do formulrio sero enviados pela URL da pgina (os dados enviados por este mtodo, possuem uma limitao de 256 bytes). Os dados sero enviados pelo meio de uma varivel de um ambiente oculto, (oculta aos olhos dos usurios). determina a URL de destino da informao. Descrio

    ACTION

    Tags de Formulrios
    Tag <form> <input> <textarea> <label> <fieldset> Descrio Define um formulrio para entradas do usurio Define um campo de entrada Define uma rea de texto (um controle de entrada de texto multi-linhas) Define um rtulo para um controle Define um conjunto de campos

    <legend>
    <select> <option>

    Define um ttulo para um conjunto de campos


    Define uma lista selecionvel (uma caixa drop-down) Define uma opo em uma caixa drop-down

    <button>

    Define um boto para pressionar

    Tipos de Formulrios
    Tag TYPE TEXT PASSWORD CHECKBOX RADIO SUBMIT RESET Descrio Determina o tipo de entrada de dados.

    Entrada de texto. Permite que um texto seja digitado em apenas uma linha. Utilizado para entrada de nome, endereo, e-mail, telefone, etc. Entrada de senha. Funciona como o campo text, mas no apresenta os dados digitados. No lugar deles so apresentados asteriscos (*). Caixa de mltiplas opes. Permite que o usurio responda questes de mltipla escolha, ou seja, com mais de uma resposta. Utilizado para enquetes e avaliaes on-line, entre outras. Caixa de opes simples. Possibilita que o usurio responda questes de mltipla escolha, em que ele escolhe apenas uma resposta. Boto de envio. o responsvel por enviar o formulrio para seu destino Boto de reset. Ele serve para limpar todos os dados inseridos pelo usurio.

    Campos de texto
    Os campos de texto "text", so utilizados quando voc quer que o usurio digite letras e nmeros em um formulrio.
    Salve um arquivo HTML com o nome PGINA 27 CAMPO DE TEXTO

    Botes Radiais
    Botes Radiais radio, so utilizados quando voc quer que o usurio selecione uma entre uma quantidade limitada de escolhas.
    Salve um arquivo HTML com o nome PGINA 28 BOTES RADIAIS

    Caixas de Seleo
    As Caixas de Seleo checkbox , so utilizadas quando voc quer que o usurio selecione uma ou mais opes.
    Salve um arquivo HTML com o nome PGINA 29 CAIXAS DE SELEO

    Caixas Drop Down


    As Caixas de Seleo select so utililadas quando voc quer que o usurio selecione uma ou mais opes de uma quantidade limitada de escolhas.
    Salve um arquivo HTML com o nome PGINA 30 DROPDOWN

    rea de texto
    Permite o controle de entrada de texto multi-linhas. Na rea de texto voc pode escrever uma quantidade ilimitada de caracteres.
    Salve um arquivo HTML com o nome PGINA 31 REA DE TEXTO

    Boto
    Ferramenta para criao de botes simples, voc pode definir o que ser escrito no seu boto.
    Salve um arquivo HTML com o nome PGINA 32 BOTO

    O Atributo Ao do Formulrio (Form's Action) e o Boto Enviar (Submit)


    Quando o usurio clica no boto "Enviar", o contedo do formulrio enviado para outro arquivo. O atributo de ao do formulrio define o nome do arquivo para o qual enviar o contedo. O arquivo definido no atributo action geralmente faz algo com a entrada recebida.
    Artibuto <input type="submit" <input type="reset" Descrio Define um boto para envio de formulrio Define um boto para limpar os campos do formulrio

    Salve um arquivo HTML com o nome PGINA 33 FORMULRIO DE EMAIL

    Exerccio de Reviso
    1. Crie uma tabela com 3 linhas e 4 colunas, utilize o colspan para mesclar as duas primeiras colunas, escolha duas clulas e aplique fundos de cor e imagem; Crie uma tabela com 600 de largura ,escolha duas clulas e utilize o rowspan para mescle 2 linhas; Crie uma tabela com 4 linhas e duas colunas, insira um formulrio simples com 2 campos de texto para nome e senha e no final um boto para enviar seu formulrio;

    2. 3.

    Salve um arquivo HTML com o nome PGINA REVISO 3

    Você também pode gostar