html - telecentros.sp.gov.br · textos - writer, editor de planilhas - calc, digitação, gÌmp,...

of 77 /77
HTML www.idort.com.br www.telecentros.sp.gov.br Realização

Author: ngoquynh

Post on 21-Sep-2018

225 views

Category:

Documents


0 download

Embed Size (px)

TRANSCRIPT

  • HTML

    www.idort.com.br

    www.telecentros.sp.gov.br

    Realizao

    http://www.idort.com.br/http://www.telecentros.sp.gov.br/

  • Rev00 17/07/12

    i | P g i n a

    Com a disseminao das redes de computadores e, principalmente,

    com o aparecimento da Internet, ficou claro o impacto social das chamadas

    Tecnologias da Informao e Comunicao, as TICs. Ao trabalhar e se

    comunicar por meio dessas redes as pessoas e as organizaes transformam

    o modo como produzem, trocam e consomem bens materiais e imateriais.

    Abre-se para essas pessoas um enorme leque de oportunidades tanto de

    negcios, trabalho, educao, cultura, lazer, quanto relacionamento.

    Nessa perspectiva, percebendo as particularidades de uma proposta

    de Incluso Digital, foi implantado o Programa Telecentro pela Prefeitura

    Municipal de So Paulo com acesso livre aos servios de informtica, voltado

    populao que vive em situao de vulnerabilidade social.

    O IDORT/SP contribui ativamente com o programa Telecentro desde

    2005, quando assumiu a responsabilidade pelo gerenciamento do Programa

    e, consequentemente, a administrao dos 355 postos do Telecentro,

    atravs de servio de planejamento e atividades de incluso digital, sendo

    responsvel por sua operao e controle. A incluso digital realizada

    atravs de cursos de capacitao, incluso e educao digital, que visam

    fortalecer o aprendizado dos jovens no ensino fundamental e a capacitao

    profissional para melhor insero no mercado de trabalho.

  • Rev00 17/07/12

    ii | P g i n a

    Centro de Treinamento

    O Centro de Treinamento Incluso Digital o departamento do

    IDORT responsvel por promover e ampliar o desenvolvimento profissional

    de todos os colaboradores que atuam, principalmente, no Programa

    Telecentros da Cidade de So Paulo, cujo objetivo a Incluso Social e

    Digital de todos cidados. So oferecidos cursos tcnicos, pedaggicos e

    oficinas para aprimorar os servios prestados populao.

    O Centro de Treinamento oferece cerca de 4 mil capacitaes por

    ano, com vinte e oito treinamentos diferenciados:

    rea Pedaggica: oferece 7 cursos comportamentais: Integrao

    Pedaggica e Cidadania, Plano de Aula, Elaborao de Projetos, Organizao

    no Trabalho, Atendimento ao Pblico, Competncia e Liderana e Integrao

    Pedaggica e Cidadania - Mapeamento Social.

    rea Tcnica: oferece 11 cursos tcnicos que explora os recursos e

    software disponibilizados: Introduo Informtica - GNU/LINUX, Editor de

    Textos - Writer, Editor de Planilhas - CALC, Digitao, GMP, GIFS, Lgica de

    Programao, HTML, PHP/ Mysql, CSS, IMPRESS - Apresentao e Marketing

    Pessoal.

    rea Oficina: oferece 11 oficinas que exploram os temas atravs

    dos recursos e software disponibilizados: Comunidade e Meio Ambiente,

    Telemarketing, Blog, Prticas de Escritrio, Tcnicas de Vendas, E-mail,

    Pesquisa na Rede, Telecriana, Mercado de Trabalho, Introduo Arte

    Digital, Atendimento ao Cliente.

    A inscrio e participao dos funcionrios so definidas pelo

    Supervisor Tcnico de acordo com as vagas disponibilizadas pelo Centro de

    Treinamento. Somente os funcionrios capacitados possuem autorizao

    para ministrar os contedos oficiais nos Telecentros.

    O IDORT disponibiliza alguns workshops e palestras gratuitamente,

    nos quais os funcionrios podero se inscrever, desde que tenham

    autorizao do Supervisor Tcnico I.

  • Rev00 17/07/12

    iii | P g i n a

    Sumrio

    1 Objetivo ............................................................................... 6

    2 Justificativa ......................................................................... 6

    3 Pginas Web ........................................................................ 7

    4 Home Page .......................................................................... 7

    5 O que so Browsers? ........................................................... 8

    6 Protocolo HTTP .................................................................... 8

    7 URL ...................................................................................... 9

    8 Como Planejar seu Site ....................................................... 9

    9 Criando o Tipo Certo de Site .............................................. 11

    10 O que HTML? .................................................................. 11

    10.1 O que voc pode fazer com o HTML? .......................... 12

    10.2 O que necessrio para trabalhar com HTML? ............ 12

    11 Sintaxe dos comandos HTML ............................................ 12

    11.1 Como Exibir o Cdigo HTML de uma Pgina da Internet 13

    12 Estrutura Bsica do HTML ................................................. 13

    12.1 Elementos Bsicos do HTML ....................................... 14

    13 Ttulos e Subttulos ........................................................... 15

    13.1 Exerccio 01 ............................................................... 16

    14 Acentuao ........................................................................ 16

    14.1 Exerccio 02 ............................................................... 17

    15 Inserindo comentrios ...................................................... 18

    16 Formatao de Textos ....................................................... 19

    16.1 Marcao FONT ......................................................... 19

  • Rev00 17/07/12

    iv | P g i n a

    16.2 Exerccio 03 ............................................................... 21

    16.3 Os principais Comandos de Estilo de Texto: ................. 22

    16.4 Movimentando o texto Marquee ............................... 22

    16.5 Exerccio 04 ............................................................... 23

    17 Formatao de Pargrafos ............................................... 24

    17.1 Exerccio 05 ............................................................... 25

    18 Linhas Horizontais ............................................................ 25

    18.1 Exerccio 06 ............................................................... 26

    19 Imagens ............................................................................ 27

    19.1 Principais Diferenas entre as Imagens GIF e JPEG ....... 28

    19.2 Qual Formato Escolher? .............................................. 29

    19.3 Exerccio 07 ............................................................... 30

    19.4 Definir uma Imagem no Plano de fundo ....................... 30

    19.5 Exerccio 08 ............................................................... 31

    20 Hyperlinks ......................................................................... 31

    20.1 Definir um Link Externo .............................................. 32

    20.2 Exerccio 09 ............................................................... 33

    20.3 Definindo um Link Interno........................................... 33

    20.4 Exerccio 10 ............................................................... 34

    20.5 Definir um Link de Correio Eletrnico Mailto .............. 35

    20.6 Acrescentar no Exerccio 10......................................... 36

    20.7 Definir um Link para Outro Site ................................... 36

    20.8 Acrescentar no Exerccio 10......................................... 36

    20.9 Definir uma Imagem como Link ................................... 37

    21 Listas ................................................................................ 37

    21.1 Listas Ordenadas ........................................................ 37

    21.2 Exerccio 11 ............................................................... 39

    21.3 Listas No Ordenadas ................................................. 40

    21.4 Exerccio 12 ............................................................... 40

  • Rev00 17/07/12

    v | P g i n a

    21.5 Lista de Definio ....................................................... 42

    21.6 Exerccio 13 ............................................................... 42

    22 Tabelas .............................................................................. 43

    22.1 Atributos de uma Tabela............................................. 44

    22.2 Exerccio 14 ............................................................... 45

    22.3 Atributos da marcao ................................ 46

    22.4 Acrescentar no Exerccio 14 a linha abaixo:.................. 47

    22.5 Atributos da marcao ....................................... 48

    22.6 Atributos das marcaes e ...................... 48

    22.7 Exerccio 15 ............................................................... 49

    23 Formulrios ....................................................................... 51

    23.1 Atributos da marcao ................................. 52

    23.2 Exerccio 16 ............................................................... 58

    24 Frames ............................................................................... 60

    24.1 Atributos HTML para frames ....................................... 61

    24.2 Exerccio 17 ............................................................... 64

    24.3 Links em Frame alvo .................................................. 66

    25 Iframe Inline Frame ....................................................... 67

    25.1 Exerccio 18 ............................................................... 68

    26 Plano de Aula ..................................................................... 70

    27 Bibliografia ........................................................................ 74

  • Rev00 17/07/12

    6 | P g i n a

    1 OBJETIVO

    Possibilitar e contribuir para o conhecimento dos colaboradores que

    atuam no Programa Telecentros da Prefeitura de So Paulo para que

    possam se apropriar, criar e elaborar homepages utilizando a linguagem

    HTML (Hyper Text Markup Language), Desta forma, podero multiplicar os

    contedos aos usurios para que estes possam explorar sua criatividade

    alm de ampliar os conhecimentos sobre os diversos recursos da WEB.

    2 JUSTIFICATIVA

    Com o avano da tecnologia muitas vezes condiciona os cidados a

    se apropriarem cada vez mais das informaes disponibilizadas na rede.

    Diariamente so acessados milhares de endereos na internet, por esta

    razo os usurios necessitam mais conhecimentos para que, alm de terem

    acesso rede, possam criar e publicar uma pgina na web.

    O HTML possibilitar aos futuros desenvolvedores a criao e o

    desenvolvimento da estrutura das pginas web e, como base de

    conhecimento, condies para que possam futuramente aprimorar suas

    pginas utilizando outros recursos.

  • Rev00 17/07/12

    7 | P g i n a

    3 PGINAS WEB

    Pginas Web, documentos HTML ou mesmo pginas na Internet,

    so documentos localizados em um servidor especfico e acessveis

    mundialmente atravs da Internet. As pginas podem ser simples, com

    algumas linhas de texto, ou ter milhares de pginas em um nico site.

    A publicao de uma pgina, ao contrrio do que se pensa, no

    complicada, tampouco dispendiosa. Alguns provedores de acesso fornecem

    espao em seu servidor para que os usurios ou os assinantes do sistema

    possam hospedar seu site e, mesmo quando pago, no to caro.

    Em uma pgina pessoal, possvel disponibilizar diversas

    informaes, tais como: poemas, fotos do animal de estimao, desenhos

    dos filhos, comentrios relativos ao trabalho, dentre outros. O limite a

    imaginao do usurio e o espao em disco disponibilizado pelo provedor

    de hospedagem.

    4 HOME PAGE

    a pgina inicial ou a pgina de entrada de um site. Uma

    apresentao da Web um conjunto de pginas estruturadas sobre um

    determinado contedo que pode ser composto por textos, imagens,

    diagramas. Esta apresentao fica armazenada em um local chamado Site,

    traduo literal de Stio, ou seja, um lugar na internet.

  • Rev00 17/07/12

    8 | P g i n a

    5 O QUE SO BROWSERS?

    Browser, tambm conhecido como navegador uma ferramenta

    primordial que tem como funo localizar e interpretar documentos na

    internet. Com o passar do tempo os browsers foram ficando cada vez mais

    sofisticados com incluso de imagens, novos mtodos de formatao de

    texto, reconhecimento de novos formatos de dados, capacidade de

    comunicao por voz e recepo de vdeo e udio. H dezenas de browsers

    diferentes, sendo o Mozilla Firefox um dos mais usados no Linux.

    6 PROTOCOLO HTTP

    Os protocolos so lnguas usadas entre o computador que acessa

    a informao e o que a transmite. uma forma de padronizar os

    processos, evitando que cada programa use uma linguagem diferente.

    O HTTP, sigla que significa Hyper Text Transfer Protocol -

    Protocolo de Transferncia de Hipertexto trata-se de uma linguagem usada

    na WWW, onde, atravs dele, qualquer browser pode se comunicar com

    qualquer servidor, independente dos fabricantes dos softwares envolvidos.

    Os browsers mais modernos so compatveis com vrios tipos de

    protocolos, alm do HTTP. O mais conhecido o FTP, sigla que significa

    File Transfer Protocol Protocolo de Transferncia de Arquivos, onde se

    trata de um mtodo prtico de ter acesso a arquivos de servidores de todo

    o mundo.

  • Rev00 17/07/12

    9 | P g i n a

    7 URL

    URL significa Universal Resource Locator - Localizador Universal de

    Recursos. A URL um conjunto de informaes que descreve um recurso

    qualquer na Internet, seja e-mail, FTP, telnet ou WWW. Assim, os

    programas sabem que protocolos devem utilizar e podem tambm orientar

    o usurio, quando o recurso solicitado estiver alm das possibilidades do

    programa. Veja abaixo, exemplos de algumas URLs vlidas:

    http://pobox.com/~cardoso

    ftp://ftp.unikey.com.br

    telnet:bbs.unikey.com.br

    mailto:[email protected]

    8 COMO PLANEJAR SEU SITE

    Projetar um site demanda um considervel planejamento prvio

    sendo que no basta somente decidir qual ser seu pblico e o que incluir

    no site, mas ter que planejar como apresentar essa informao no site.

    Planejar seu site o passo mais importante. Sem um bom plano, seu site

    poder no ser bem-sucedido, o que significa no pior dos casos, que

    ningum desejar visit-lo.

    Fazer a si mesmo algumas perguntas importantes e desenvolver

    um plano baseado em suas respostas ir ajud-lo a criar um site bem-

    sucedido. Tendo em mente o propsito do site que ser criado, de

    extrema importncia o desenvolvedor fazer as seguintes perguntas:

  • Rev00 17/07/12

    10 | P g i n a

    1. Por que estou criando esse site? O que eu quero que as pessoas

    faam ou saibam aps visitarem meu site?

    fundamental identificar o principal objetivo do site e depois

    manter essa meta em mente enquanto o projeta. Se estiver criando um

    site para negcios, certifique-se de obter a opinio de todos os envolvidos

    no projeto e nas decises sobre o contedo.

    2. Qual o pblico que quero atingir?

    Voc deve decidir quem ir visitar seu site e depois planejar um

    site que atraia essas pessoas. Para focalizar seu pblico, faa a si mesmo

    algumas perguntas mais especficas. Qual a formao de seus amigos, de

    sua famlia ou de seus clientes? Quais grupos etrios esto representados?

    Quais so seus interesses? O que eles fazem?

    3. Quais informaes quero compartilhar com os visitantes de meu

    site?

    Muitas informaes esto disponveis sobre voc como pessoa, sua

    empresa ou organizao, ou sobre seu tpico. Determine quais

    informaes voc quer tornar disponveis aos seus visitantes. Seja muito

    cuidadoso ao determinar qual informao voc no deseja compartilhar. A

    melhor maneira de decidir o que voc quer no seu site observar outros

    sites na Internet.

    4. Que tipo de informao voc quer obter dos visitantes?

    A Internet uma grande fonte, tanto para dar como para receber

    informaes. Voc precisa decidir se apenas quer compartilhar informaes

    com aqueles que vm seu site ou se tambm quer obter informaes

    deles, como por exemplo, opinies sobre seu site ou informaes dos

    clientes.

  • Rev00 17/07/12

    11 | P g i n a

    5. Quanto tempo e dinheiro voc pode gastar mantendo seu site?

    Quanto mais complexo o site, mais tempo e dinheiro ele

    consome em sua manuteno.

    9 CRIANDO O TIPO CERTO DE SITE

    Existem dois tipos principais de sites: os sites pessoais e os sites

    profissionais onde que possuem finalidades diferentes.

    Os sites pessoais normalmente contm informaes sobre a pessoa

    que criou informaes sobre hobbies, interesses e amigos ou famlia e so

    sites menores.

    Os sites profissionais anunciam aquilo que uma empresa ou

    organizao faz, produz, vende e pode ser usado tanto para fazer

    publicidade de uma empresa na Web quanto para agir como ponto de

    vendas, permitindo que os usurios comprem produtos via Internet.

    10 O QUE HTML?

    HTML significa Hyper Text Markup Language, que pode ser

    traduzido como Linguagem de Marcao de Hipertexto. uma linguagem

    de descrio de pgina e no uma linguagem de programao. Hipertexto

    um mtodo de organizao que permite que textos, imagens, sons e

    aes fiquem interligados.

  • Rev00 17/07/12

    12 | P g i n a

    10.1 O QUE VOC PODE FAZER COM O HTML?

    A funo do HTML criar pginas na Internet. Voc pode criar

    textos nas pginas, fazer formatao, criar listas, criar tabelas, criar

    formulrios, trabalhar com imagens, etc. O HTML cria pginas estticas,

    sem animao.

    10.2 O QUE NECESSRIO PARA TRABALHAR COM HTML?

    Voc precisar de:

    Um Editor de textos qualquer ou voc poder usar um editor web

    como, por exemplo, o BlueFish.

    E o Browser (navegador) Mozilla Firefox.

    Os arquivos devem ser salvos no formato texto e salvos com

    extenso .htm ou .html. - Pode-se escolher a extenso em

    qualquer pgina criada do site.

    Observao: Os arquivos de um projeto devem ser colocados

    dentro de uma mesma pasta (diretrio).

    11 SINTAXE DOS COMANDOS HTML

    Nos comandos so utilizadas duas marcas ou tags que so:

    < > - Marca de abertura - Marca de fechamento.

  • Rev00 17/07/12

    13 | P g i n a

    Os atributos somente devem ser digitados na marca de abertura.

    As marcas de fechamento no aceitam atributos.

    Exemplos de marcas:

    ... - Coloca negrito no texto.

    ... - Centraliza o texto na pgina.

    ... - Permite definir o tipo, tamanho, cor,

    estilo da fonte.

    11.1 COMO EXIBIR O CDIGO HTML DE UMA PGINA DA INTERNET

    Dar um duplo clique no cone do Mozilla.

    Acessar uma pgina qualquer.

    Clicar no menu View e Page Source.

    12 ESTRUTURA BSICA DO HTML

    A estrutura bsica de um documento HTML a seguinte:

    Ttulo da Pgina

    ...

  • Rev00 17/07/12

    14 | P g i n a

    12.1 ELEMENTOS BSICOS DO HTML

    ... - Indicam respectivamente o incio e o

    fim de um documento HTML. Todos os outros elementos devem estar

    entre estas marcas.

    ... - Delimitam a seo de cabealho do

    documento. Trata-se da primeira seo do documento.

    ... - Indicam o ttulo do documento, que

    ser exibido na barra de ttulo do navegador. Estas marcas devem constar

    na seo do cabealho.

    ... - Representam o corpo do documento.

    Entre estas marcas estar contida a maior parte do contedo a ser exibido

    com textos e imagens. Este elemento pode conter cinco atributos

    opcionais, que so:

    Atributo BACKGROUND: Especifica uma imagem como fundo da

    pgina.

    Exemplo: .

    Atributo BGCOLOR: Configura a cor de fundo da pgina.

    Exemplo:

    Atributo TEXT: Configura a cor do texto da pgina.

    Exemplo:

    Atributos LINK, ALINK, VLINK: Configuram as cores dos links

    da pgina. ALINK configura a cor do link ativo, isto , quando clicado.

    VLINK configura a cor do link j visitado.

  • Rev00 17/07/12

    15 | P g i n a

    Exemplo:

    Por padro, este exemplo configura uma pgina com links azuis,

    links ativos em vermelho e links visitados em roxo.

    Como o HTML no uma linguagem de programao, voc nunca

    ser avisado de erros que tenha cometido na digitao ou na edio do seu

    documento. O simples esquecimento de uma barra pode gerar efeitos

    colaterais inesperados na visualizao de uma pgina e estes efeitos sero

    o nico sinal de que algo est errado.

    13 TTULOS E SUBTTULOS

    O destaque para ttulos e subttulos importante, porque mostra

    ao leitor uma viso geral sobre o que trata o texto em questo. Voc pode

    utilizar at seis nveis de ttulos, que so numerados de 1 (o maior) a 6 (o

    menor). So tags do tipo incio-fim. Exemplos:

    Em HTML A sada ser

    H1 H1

    H2 H2

    H3 H3

    H4 H4

    H5 H5

    H6 H6

  • Rev00 17/07/12

    16 | P g i n a

    13.1 EXERCCIO 01

    Primeira Pagina

    Primeira Pagina

    Salvar o arquivo no formato texto, com o nome exercicio01.html e

    executar a pgina no navegador.

    Observao.: Para executar uma pgina html no navegador pode-

    se abrir diretamente pelo navegador (menu Arquivo / Abrir) ou atravs do

    gerenciador de arquivos.

    14 ACENTUAO

    Como cada navegador lida com os caracteres de uma forma

    diferente, boa prtica no acentuar os textos, pois impossvel saber

    qual tabela de caracteres o usurio dispe, e nem a partir de qual

    equipamento a pgina ser acessada.

    Um dos mecanismos utilizados para solucionar esse impasse a

    tabela de caracteres padro desenvolvida pela ISO (International

    Standards Organization) que uma organizao que desenvolve e

    administra padres.

  • Rev00 17/07/12

    17 | P g i n a

    Veja os exemplos a seguir:

    Para conseguir Deve-se digitar

    &Agrave

    14.1 EXERCCIO 02

    Exerccio 02

    Esta Pgina contm

    textos acentuados e com o marcador de cabealho

    H2

    Salvar o arquivo no formato texto, com o nome exercicio02.html e

    executar a pgina no navegador.

  • Rev00 17/07/12

    18 | P g i n a

    15 INSERINDO COMENTRIOS

    As tags servem para inserirmos comentrios na pgina

    com o propsito de organizar o programa e possibilitar fcil visualizao

    dos cdigos html. Como so utilizadas para informar, as linhas onde consta

    essa marcao no sero processadas pelo navegador.

    Exemplo:

    Exerccio 02

    Esta Pgina contm textos

    acentuados e com o marcador de cabealho H2

  • Rev00 17/07/12

    19 | P g i n a

    16 FORMATAO DE TEXTOS

    Todos os comandos que alteram o estilo do texto so do tipo liga-

    desliga, ou seja, precisam ser especificados em pares, marcando o incio e

    o fim do trecho que sofrer a formatao.

    16.1 MARCAO FONT

    A sintaxe

    ... - Respectivamente, define o tipo, o tamanho e a cor da

    fonte. No necessrio usar todos os atributos juntos e no h uma ordem

    para utiliz-los.

    Atributo FACE: O atributo FACE define o tipo de letra (fonte).

    Atributo SIZE: O atributo SIZE define o tamanho da fonte. A

    relao dos tamanhos vlidos :

    SIZE

    Editor de Textos HTML

    8 pt 1

    10 pt 2

    12 pt 3

    14 pt 4

    24 pt 5

    36 pt 6

    72 pt 7

  • Rev00 17/07/12

    20 | P g i n a

    Atributo COLOR: O atributo COLOR especifica a cor do texto. Seu

    valor especificado atravs de um nome predefinido de cores ou no

    formato hexadecimal. Veja a tabela das principais cores:

    Nome da Cor (Ingls)

    Nome da Cor (Portugus)

    Hexadecimal

    Beige Bege #F5F5D

    Black Preta #000000

    Blue Azul #0000FF

    Cyan Ciano #00FFFF

    Gold Ouro #FFD700

    Green Verde #008000

    Gray Cinza #808080

    Yellow Amarela #FFFF00

    Magenta Magenta #FF00FF

    Maroon Marrom #800000

    Olive Verde oliva #808000

    Orange Laranja #FFA500

    Red Vermelha #FF0000

    Pink Rosa #FFC0CB

    Purple Prpura #800080

    Observao: Pode-se usar o formato hexadecimal.

  • Rev00 17/07/12

    21 | P g i n a

    16.2 EXERCCIO 03

    Exerccio 03

    Formatao de textos

    Esta

    linha est com a fonte courier, tamanho 5 e na

    cor vermelha

    Salvar o arquivo no formato texto, com o nome exercicio03.html e

    executar a pgina no navegador.

  • Rev00 17/07/12

    22 | P g i n a

    16.3 OS PRINCIPAIS COMANDOS DE ESTILO DE TEXTO:

    COMANDO SINTAXE FUNO

    Negrito texto Aplica negrito.

    Itlico texto Aplica itlico.

    Sublinhado texto Aplica sublinhado.

    Big texto Aumenta o tamanho da fonte e

    aplica negrito.

    Tachado texto Aplica tachado.

    Small texto Reduz e altera a fonte.

    Sobrescrito texto Aplica sobrescrito.

    Subscrito texto Aplica subscrito.

    Pisca-pisca texto Faz o texto piscar.

    Observao: Em alguns navegadores o atributo BLINK pode no

    funcionar.

    16.4 MOVIMENTANDO O TEXTO MARQUEE

    A marcao MARQUEE Faz o texto rolar pela tela.

    O atributo WIDTH define a largura de rolagem do texto.

    O atributo HEIGHT define o comprimento de rolagem do texto.

    O atributo DIRECTION define a direo de rolagem. Pode ser

    left, right, down e up.

    O atributo SCROLLAMOUNT define a velocidade de rolagem do

    texto.

  • Rev00 17/07/12

    23 | P g i n a

    O atributo BEHAVIOR define o tipo de movimento. Pode ser

    scroll, slide e alternate.

    Exemplo:

    texto

    16.5 EXERCCIO 04

    Formatao de Textos

    Formatao de Textos

    Negrito

    Itlico

    Sublinhado

    Aumenta a fonte e aplica negrito

    Reduz e altera a fonte

    Texto tachado

    H 2 O

    X 2

  • Rev00 17/07/12

    24 | P g i n a

    Texto em

    Arial, tamanho = 6 e na cor vermelha

    Faz o texto rolar pela tela

    Salvar o arquivo no formato texto, com o nome exercicio04.html e

    executar a pgina no navegador.

    17 FORMATAO DE PARGRAFOS

    Comando

    ...

    - Delimita um pargrafo.

    possvel omitir o elemento de fim

    sem danos ao resultado final. O

    efeito visual uma linha em branco antes do incio do prximo pargrafo.

    O atributo opcional ALING configura o alinhamento do pargrafo e pode

    conter os valores left (esquerda), center (centro), right (direita) ou justify

    (justificado).

    O marcador ... - Centraliza texto e

    pargrafos o nico marcador de alinhamento que pode ser usado sem

    o auxlio da tag

    ...

    Comando ... - Este comando

    destaca um bloco de texto citado de outra fonte atravs de uma

    endentao direita. utilizado na criao de citaes longas que no

    devem ser aninhadas em pargrafos.

  • Rev00 17/07/12

    25 | P g i n a

    17.1 EXERCCIO 05

    Trabalhando com pargrafos

    Este pargrafo est

    centralizado

    J este est alinhado

    direita

    Salvar o arquivo no formato texto, com o nome exercicio05.html e

    executar a pgina no navegador.

    18 LINHAS HORIZONTAIS

    As Linhas Horizontais so utilizadas para dar destaque a ttulos ou

    para gerar a sensao de quebra entre uma informao e outra. Trata-se

    de uma marca solitria, que pode ser utilizada com alguns atributos

    opcionais.

    Marcao para criao de linha padro sem nenhum

    atributo.

    O atributo SIZE configura a espessura da linha.

  • Rev00 17/07/12

    26 | P g i n a

    O atributo WIDTH configura a largura da linha, e pode ser

    especificado em pixels ou percentual.

    O atributo ALIGN configura o alinhamento da linha. Pode ser: left,

    center e right.

    O atributo COLOR define a cor da linha.

    Exemplo:

    :

    18.1 EXERCCIO 06

    Linhas Horizontais

    Linhas Horizontais



    Linha Horizontal simples



    Linha Horizontal - largura de 50% da pgina

  • Rev00 17/07/12

    27 | P g i n a



    Linha Horizontal altura de 10 pixel's



    Linha Horizontal com cor de preenchimento

    Salvar o arquivo no formato texto, com o nome exercicio06.html e

    executar a pgina no navegador.

    19 IMAGENS

    Alm de texto, possvel colocar imagens em pginas Web. Os

    formatos grficos padres da Internet so: JPEG e GIF. Cada um deles tem

    vantagens e desvantagens. A escolha entre qual deles voc usar vai

    depender da imagem desejada.

    a) GIF -Graphics Interchange Format - O formato GIF usa

    uma tcnica de compresso no mesmo estilo de programas como o Winzip.

    Os arquivos GIF podem ter um mximo de 256 cores, e para a grande

    maioria dos usurios mais do que suficiente, j que a grande maioria das

    pessoas tem suas placas de vdeo configuradas com este nmero de cores.

    uma extenso de imagens muito utilizada para criar animaes

    na pgina web. GIF o formato de imagem mais utilizado na Internet.

  • Rev00 17/07/12

    28 | P g i n a

    Esse padro tem duas grandes vantagens: utilizar fundos transparentes e

    animaes.

    b) JPEG -Joint Photografic Experts Group - O formato JPEG

    foi criado para que imagens true-color (com 16 milhes de cores)

    pudessem ser armazenadas em arquivos pequenos. O formato JPEG

    consegue isso usando um sistema onde a qualidade da imagem reduzida

    de forma que o arquivo fique menor. S que, na maioria das vezes, a

    perda de qualidade, no notada na tela de um monitor, da o seu grande

    sucesso. Ao contrrio do GIF, que tem uma compresso padro (que no

    pode ser alterada), o JPEG tem uma compresso varivel. Porm, quanto

    mais voc comprime, maior ser a perda de qualidade.

    19.1 PRINCIPAIS DIFERENAS ENTRE AS IMAGENS GIF E JPEG

    CARACTERSTICA GIF JPEG

    Animao Sim No

    Tamanho do arquivo Maior Menor

    Resoluo Menos cores (256) Mais cores (16

    milhes)

    Transparncia Sim No

    Velocidade de download

    Mais rpido Mais lento

    Exibio Monta distorcida Monta por faixas

  • Rev00 17/07/12

    29 | P g i n a

    19.2 QUAL FORMATO ESCOLHER?

    O que vai determinar o formato a ser escolhido o nmero de

    cores de sua imagem. Normalmente, voc deve usar o GIF para desenhos

    ou logotipos, e usar JPEG para fotos ou imagens com muita variao de

    cores.

    Para que uma imagem seja apresentada em um documento HTML,

    necessrio fazer uma referncia ao nome do arquivo da imagem, atravs

    da marcao:

    .

    Caso a imagem esteja em um diretrio diferente do documento

    HTML, o nome do diretrio deve ser includo na referncia. Lembre-se que

    voc pode tambm usar uma imagem como link. Neste caso, combine os

    elementos de link e imagem.

    Exemplo:

    .

    O atributo BORDER serve para definir uma borda para a imagem.

    Caso a imagem no possa ser carregada pelo navegador o atributo ALT

    servir para definir uma legenda para a imagem com no mximo 255

    caracteres.

  • Rev00 17/07/12

    30 | P g i n a

    19.3 EXERCCIO 07

    Trabalhando com Imagens

    Imagem Simples



    Imagem com borda e legenda

    Salvar o arquivo no formato texto, com o nome exercicio07.html e

    executar a pgina no navegador.

    19.4 DEFINIR UMA IMAGEM NO PLANO DE FUNDO

    Para ir alm de um segundo plano inserindo apenas uma cor, o

    HTML permite atribuir uma imagem, para ser exibida no segundo plano de

    sua da pgina Web. O atributo BACKGROUND deve ser inserido na

    marcao BODY conforme exemplo abaixo:

  • Rev00 17/07/12

    31 | P g i n a

    Exemplo:

    19.5 EXERCCIO 08

    Trabalhando com Imagens no plano de

    fundo

    Contedo da pgina

    Salvar o arquivo no formato texto, com o nome exercicio08.html e

    executar a pgina no navegador.

    20 HYPERLINKS

    Os Hyperlinks so construes HTML que permitem o acesso a

    outras pginas construdas ou a recursos na Internet com um simples

    clique. possvel programar um hyperlink que permitir o usurio visualizar

    o topo da pgina atual, abrir outra pgina construda ou at mesmo

  • Rev00 17/07/12

    32 | P g i n a

    acessar o contedo de pginas armazenadas em outro servidor de outro

    pas.

    Os hyperlinks podem ter a forma de hipertexto ou hipermdia onde,

    na maioria dos navegadores, o hipertexto exibido como um texto azul e

    sublinhado e a hipermdia inclui hiperimagens. Estas so simples imagens

    grficas incorporadas, tais como fotografias ou cones, que aceitam

    vnculos.

    Os destinos de um hyperlink so:

    Um indicador (um local na mesma pgina);

    Uma pgina interna;

    Um e-mail;

    Um site externo;

    20.1 DEFINIR UM LINK EXTERNO

    Um Web site consiste de algumas pginas separadas, onde, para

    torn-las acessveis entre si e convenientes para os visitantes, preciso

    definir os links entre as pginas. Costuma-se colocar estes links no incio ou

    no final de cada pgina.

    Exemplo:

    Link para a Pgina 2

    Neste exemplo criado um link para a pgina de nome

    pgina2.html.

  • Rev00 17/07/12

    33 | P g i n a

    20.2 EXERCCIO 09

    Trabalhando com Link's

    Criando um link para uma pgina

    Exerccio 01br

    Criando um link para um site na internet

    Google

    Salvar o arquivo no formato texto, com o nome exercicio09.html e

    executar a pgina no navegador.

    20.3 DEFININDO UM LINK INTERNO

    Um link dentro de uma pgina uma ligao que aponta para

    outro local dentro da mesma pgina possuindo duas partes: o link onde o

    usurio deve clicar e o ponto (regio) na pgina para o qual o cursor deve

    saltar.

    Para este tipo de vnculo, preciso definir uma ncora com o nome

    do local de destino seguindo o formato: , onde no

    exemplo, topo o nome atribudo ao local de destino.

  • Rev00 17/07/12

    34 | P g i n a

    Observao.: O nome do local de destino deve iniciar com uma

    letra e no pode comear com nmero e nem com caractere especial.

    Exemplo: ...

    Para a criao do link que permitir o usurio clicar para acessar o

    ponto da pgina em questo, dever direcion-lo para o nome criado no

    exemplo anterior.

    Exemplo: Voltar para o Incio

    Onde #topo o indicador do local de destino. O smbolo #

    sustenido indica ao navegador a posio do indicador nomeado. Voltar

    para o Incio a frase que os navegadores exibem como hyperlink.

    20.4 EXERCCIO 10

    Trabalhando com Link's

    Link's

    1Ir para n

    120

  • Rev00 17/07/12

    35 | P g i n a

    2

    3

    50Ir para n

    1

    120Ir para n

    1

    Salvar o arquivo no formato texto, com o nome exercicio10.html e

    executar a pgina no navegador.

    20.5 DEFINIR UM LINK DE CORREIO ELETRNICO MAILTO

    Um link Mailto permite que os visitantes enviem mensagens para o

    endereo de e-mail definido, simplesmente clicando no hyperlink. Quando

    o usurio clica no link mailto, o aplicativo de correio eletrnico padro abre

    uma janela de mensagem endereada para o mailto de destino.

    A seo de rodap um bom local para se colocar um link mailto.

    Observao.: Para este link funcionar corretamente, necessrio

    que os programas de correio estejam configurados.

  • Rev00 17/07/12

    36 | P g i n a

    Exemplo:

    Contato

    20.6 ACRESCENTAR NO EXERCCIO 10

    Criando um link para contato

    Contato

    20.7 DEFINIR UM LINK PARA OUTRO SITE

    Os hyperlinks externos fazem vnculos com outros sites na

    Internet. So eles que tornam a Internet possvel. Deve-se incluir uma URL

    completa quando voc definir um hyperlink externo.

    Exemplo:

    Telecentros

    20.8 ACRESCENTAR NO EXERCCIO 10

    Criando um link para contato

    Telecentros

  • Rev00 17/07/12

    37 | P g i n a

    20.9 DEFINIR UMA IMAGEM COMO LINK

    Um link em uma imagem tambm chamado de vnculo de

    hipermdia, que um grfico que funciona com um hyperlink. Uma maneira

    de utilizar vnculos em imagens criar botes e adicion-los barra de

    navegao da pgina web.

    Exemplo:

    21 LISTAS

    Na linguagem HTML existem elementos especficos para a criao

    de listas, que podem ser listas ordenadas (OL), listas sem ordenao (UL),

    ou listas de definies (DL).

    Um detalhe interessante que podem ser criadas listas aninhadas,

    ou seja, listas dentro de listas. A seguir, veremos as caractersticas de cada

    uma delas.

    21.1 LISTAS ORDENADAS

    So estruturas sequenciais inseridas atravs da marcao OL

    Ordered Lists (listas Ordenadas).

    A estrutura das listas ordenadas bastante simples, onde os itens

    da lista so definidos pelos elementos e .

  • Rev00 17/07/12

    38 | P g i n a

    Exemplo:

    Elemento 1

    Elemento 2

    Elemento 3

    Elemento 4

    Atributos de

    Type: o atributo opcional TYPE define como ser o tipo de

    numerao de cada linha. Os tipos disponveis so: A (A, B, ..., Z), a (a,

    b, ..., z), I (I, II, ..., V), e 1 (1, 2, ..., 5). Se omitido, utilizado o tipo

    padro (1, 2, 3).

    Start: o atributo opcional START define o incio da numerao de

    cada elemento, ou seja, a partir de que elemento a lista deve se iniciar. No

    exemplo abaixo, a lista ter incio na letra e:

    Exemplo:

    Elemento 1

    Elemento 2

    Elemento 3

    Elemento 4

  • Rev00 17/07/12

    39 | P g i n a

    21.2 EXERCCIO 11

    Abrir um arquivo novo e digitar os comandos abaixo.

    Listas Ordenadas

    Lista ordenada por nmeros

    Elemento 1

    Elemento 2

    Elemento 3

    Lista ordenada por letras, iniciando em D

    Elemento 1

    Elemento 2

    Elemento 3

    Salvar o arquivo no formato texto, com o nome exercicio11.html e

    executar a pgina no navegador.

  • Rev00 17/07/12

    40 | P g i n a

    21.3 LISTAS NO ORDENADAS

    So estruturas que no possuem sequncia e so inseridas atravs

    da marcao UL Unordered Lists (listas No Ordenadas).

    A estrutura das listas sem ordenao a mesma das listas

    ordenadas, sendo que, na apresentao, os itens sero precedidos por um

    marcador (bullet). No caso de listas sem ordenao aninhadas (listas

    dentro de listas), o paginador utilizar um marcador (bullet) diferente para

    os itens de cada lista.

    O atributo TYPE pode ser:

    square: um quadrado preenchido.

    circle: um crculo vazado.

    disc: um crculo preenchido.

    Observao.: Se omitido, utilizado o tipo padro (disc).

    21.4 EXERCCIO 12

    Abrir um arquivo novo e digitar os comandos abaixo.

    Listas No Ordenadas

    Lista No ordenada

  • Rev00 17/07/12

    41 | P g i n a

    Elemento 1

    Elemento 2

    Elemento 3

    Duas listas No ordenadas aninhadas

    Elemento 1

    Elemento 2

    Elemento 2.1

    Elemento 2.2

    Elemento 2.3

    Elemento 3

    Elemento 4

    Salvar o arquivo no formato texto, com o nome exercicio12.html e

    executar a pgina no navegador.

  • Rev00 17/07/12

    42 | P g i n a

    Observao.: Como j mencionado, ... o

    elemento que define cada item de uma lista ordenada ou no ordenada. O

    seu contedo pode ser texto, outras listas, imagens ou links.

    21.5 LISTA DE DEFINIO

    As Listas de Definio so estruturas que englobam uma lista de

    definies, ideais para a criao de glossrios e coisas do gnero. So

    inseridas atravs da marcao DL Definition Lists (listas de Definio)

    onde sua estrutura diferente das outras, pois existem dois elementos o

    termo a ser definido (DT), e a definio propriamente dita (DD). Na

    exibio cada termo aparece em uma linha, e a respectiva definio na

    linha seguinte, deslocada para a direita.

    21.6 EXERCCIO 13

    Abrir um arquivo novo e digitar os comandos abaixo.

    Listas de Definio

    Listas de Definio

    HTML

    HyperText Markup Language

  • Rev00 17/07/12

    43 | P g i n a

    OL

    Listas Ordenadas

    UL

    Listas Sem Ordenao

    LI

    Elemento da Lista

    Salvar o arquivo no formato texto, com o nome exercicio13.html e

    executar a pgina no navegador.

    Observao.: Ao fazer suas listas, lembre-se sempre que voc

    pode combinar tipos diferentes para chegar ao resultado esperado.

    22 TABELAS

    Assim como as listas, no HTML existem elementos especficos para

    a criao e formatao de tabelas. O recurso de tabelas muito

    interessante e muito usado nas pginas Web. As tabelas so formadas por

    linhas e colunas, e na interseo delas esto as clulas.

    Na linguagem HTML, voc pode inserir nas clulas tudo que

    normalmente faz parte do corpo de um documento, como textos, links,

    imagens, listas e at outras tabelas.

  • Rev00 17/07/12

    44 | P g i n a

    22.1 ATRIBUTOS DE UMA TABELA

    As marcas que englobam a definio de uma tabela so:

    - Comando ... - Todas as outras marcas

    referentes s tabelas - linhas e clulas somente sero consideradas se

    includas entre estas marcas.

    - Comando ... - Trata-se de um

    elemento opcional que define o ttulo da tabela, e deve constar entre as

    marcas que definem a tabela, mas separado das marcas que definem

    linhas e colunas. Sem parmetros, o ttulo apresentado acima da tabela e

    centralizado.

    - Comando ... - Table Row ou Linha de Tabela.

    Este o elemento utilizado na definio de linhas das tabelas. As tabelas

    so definidas em linhas, sendo as linhas compostas de clulas.

    - Comando ... - Table Data ou Dado de Tabela.

    Estas marcas delimitam as clulas que compem as linhas, e assim sendo

    devem estar inseridas entre marcas de linhas.

    O alinhamento padro de uma clula esquerda horizontalmente

    e centralizado verticalmente, e caso o nmero de clulas varie de uma

    linha para outra, as linhas com menos clulas so completadas direita

    com clulas em branco.

    - Comando ... - Table Header ou Cabealho de

    Tabela. o elemento que define as clulas de cabealho. As clulas de

    cabealho tm as caractersticas idnticas s clulas de dados definidas por

    , a no ser pelo alinhamento padro horizontal, que centralizado, e

    pela utilizao de fonte em negrito.

  • Rev00 17/07/12

    45 | P g i n a

    22.2 EXERCCIO 14

    Abrir um arquivo novo e criar a tabela da figura abaixo.

    Tabela Simples

    Tabela Simples

    Nome

    Idade

    Maria

    14

    Eduardo

    11




  • Rev00 17/07/12

    46 | P g i n a

    Salvar o arquivo no formato texto, com o nome exercicio14.html e

    executar a pgina no navegador.

    22.3 ATRIBUTOS DA MARCAO

    Estes elementos bsicos possuem alguns parmetros que permitem

    um maior controle sobre alguns detalhes da apresentao da tabela.

    - BORDER: A apresentao padro de uma tabela sem bordas.

    A presena do parmetro BORDER indica justamente que deve ser

    desenhada uma borda em torno de cada clula da tabela. Pode ser usado

    para indicar a espessura da borda em pixels.

    Exemplo:

    - WIDTH: Especifica a largura da tabela, que pode ser definida em

    pixels ou em percentual referente largura da janela. Caso no seja

    especificado, o prprio browser se encarrega de determinar a largura mais

    adequada de acordo com o contedo inserido nas clulas.

    Exemplo:

    - CELLSPACING: Define o espao entre as clulas, ou seja, a

    largura das linhas de grade (as bordas que envolvem as clulas).

    especificado em pixels.

    Exemplo:

  • Rev00 17/07/12

    47 | P g i n a

    - CELLPADDING: Determina em pixels, o espao entre o

    contedo e as bordas da clula.

    Exemplo:

    - ALIGN: Configura o alinhamento horizontal da tabela em relao

    aos outros elementos da pgina. Pode conter valores LEFT (esquerda),

    CENTER (centro) ou RIGHT (direita). Este parmetro no funciona em

    alguns browsers.

    - BGCOLOR: Define a cor de fundo da tabela.

    - BORDERCOLOR: Define a cor da borda da tabela

    - BACKGROUND: Define imagem de fundo na coluna da tabela.

    Observao.: Para alterar a cor das bordas internas da tabela

    somente utilizando estilos.

    22.4 ACRESCENTAR NO EXERCCIO 14 A LINHA ABAIXO:

    ...

  • Rev00 17/07/12

    48 | P g i n a

    22.5 ATRIBUTOS DA MARCAO

    - ALIGN: Configura o alinhamento horizontal dos elementos

    contidos nas clulas de toda linha. Pode conter os valores LEFT (esquerda),

    CENTER (centro), RIGHT (direita) ou JUSTIFY (justificado). Se omitido, o

    alinhamento padro esquerda para as clulas de dados (), e

    centralizado para clulas de cabealho ().

    - VALIGN: Define o alinhamento vertical dos elementos contidos

    nas clulas de uma linha. Pode conter os valores TOP (topo), MIDDLE

    (meio) ou BOTTOM (abaixo). Se omitido, o alinhamento ao meio.

    22.6 ATRIBUTOS DAS MARCAES E

    - ALIGN: Configura o alinhamento horizontal dos elementos

    contidos na clula. Pode conter os valores LEFT (esquerda), CENTER

    (centro), RIGHT (direita) ou JUSTIFY (justificado). Se omitido, o

    alinhamento esquerda para as clulas de dados (), e centralizado

    para clulas de cabealho ().

    - VALIGN: Define o alinhamento vertical dos elementos contidos

    na clula. Pode conter os valores TOP (topo), MIDDLE (meio) ou BOTTOM

    (abaixo). Se omitido, o alinhamento ao meio.

    - NOWRAP: Quando este parmetro encontra-se associado a uma

    clula, o browser entende que o texto dentro daquela clula no pode ser

    dividido em mais de uma linha. Este parmetro deve ser utilizado com

    cuidado, para evitar colunas demasiadamente largas.

  • Rev00 17/07/12

    49 | P g i n a

    - COLSPAN : Define o nmero de colunas de uma tabela a ser

    ocupado por uma clula, ou seja, mesclar as clulas. Deve ser utilizado

    para expandir uma clula horizontalmente. Ao atribuir COLSPAN=2 a uma

    clula, ela ocupar o seu espao e o de mais uma clula para a direita.

    - ROWSPAN: Define o nmero de linhas a ser ocupado por uma

    clula. Deve ser utilizado para expandir uma clula verticalmente (para

    baixo). Ao atribuir rowspan=2 a uma clula, ela ocupar seu espao e o

    de mais uma clula abaixo, ou seja, outra linha.

    22.7 EXERCCIO 15

    Abrir um arquivo novo e digitar os comandos abaixo, para criar

    uma tabela complexa.

    Tabela Complexa

    Tabela

    Complexa

  • Rev00 17/07/12

    50 | P g i n a

    Coluna 1

    Coluna 2

    Linha 1

    Clula 1-1

    Clula 1-2

    Linha

    2

    Clula 2-1

    Clula 2-2

    Linha

    3

    Clula 3-1

    Clula 3-2

  • Rev00 17/07/12

    51 | P g i n a

    Salvar o arquivo no formato texto, com o nome exercicio15.html e

    executar a pgina no navegador.

    23 FORMULRIOS

    Com certeza voc j deve ter preenchido algum formulrio em suas

    viagens pela internet, seja para cadastros, pesquisas ou mesmo envio de

    comentrios. Os formulrios aumentam o poder de interao da web e so

    formas diferenciadas de receber dados dos visitantes de sua pgina.

    Atualizao ou consultas a base de dados, envio de dados por email, ou

    simplesmente a construo de uma nova pgina (gerada a partir de novos

    dados) so algumas das aplicaes mais comuns.

    Os elementos que delimitam os formulrios em uma pgina so:

    ...

  • Rev00 17/07/12

    52 | P g i n a

    23.1 ATRIBUTOS DA MARCAO

    Todos os formulrios contidos nas pginas devem estar entre as

    marcaes ... para que possam ser direcionados

    corretamente para seu destino. Os atributos utilizados para essas

    marcaes so:

    - ACTION (ao): deve conter o endereo do programa ou

    pgina que vai receber os dados do formulrio (escrito em PHP, por

    exemplo).

    - METHOD (mtodo): define como as informaes coletadas no

    formulrio sero enviadas para a URL indicada no atributo ACTION. Ele

    deve ter os valores GET ou POST. O valor mais comum o POST, que

    envia todas as informaes separadamente. O GET envia todos os dados

    do formulrio em uma sequncia de caracteres concatenados.

    - TARGET (alvo): opcional e s necessrio quando voc est

    usando frames, e deseja que a resposta ao formulrio seja exibida em um

    frame diferente do que est o formulrio.

    INPUT

    INPUT significa entrada de dados, logo este um dos elementos

    que determina como ser a entrada de dados nos campos de um

    formulrio. usado para montar caixas de texto, botes e at caixas de

    verificao de senhas.

  • Rev00 17/07/12

    53 | P g i n a

    Exemplo:

    - O atributo TYPE (tipo) muito importante, pois define o tipo do

    elemento: caixas de texto, botes de escolha ou botes simples. Para ficar

    mais claro, mostraremos um de cada vez explicando quais parmetros

    devem ser usados.

    - O atributo NAME deve conter o nome do formulrio para que

    possa ser identificado posteriormente, quando for enviado para outro

    programa ou pgina.

    - O atributo VALUE pode conter um valor pr-definido para o

    campo.

    Tipos do elemento INPUT

    - TEXT (texto): especificado no parmetro TYPE indica que o

    campo ser de texto, ou seja, um campo onde voc digita os dados:

    O parmetro VALUE (valor), neste caso, pode ser usado se voc

    quiser definir um valor prvio para o campo, de tal forma que, quando a

    pgina for carregada, este valor j venha preenchido.

  • Rev00 17/07/12

    54 | P g i n a

    O parmetro SIZE (tamanho) configura o tamanho do campo e

    baseado no nmero de caracteres. Se voc quiser um campo com tamanho

    de 40 caracteres dever digitar SIZE=40. Note que este valor no limita o

    campo em 40 caracteres, ele somente define o tamanho que ser

    mostrado na pgina.

    O que define o nmero mximo de caracteres que podem ser

    digitados o parmetro MAXLENGTH (comprimento mximo), que

    opcional.

    - PASSWORD (senha): no parmetro TYPE tudo funciona da

    mesma forma que o valor TEXT, exceto que todas as informaes digitadas

    aparecem como um asterisco (*) - tal como quando digita-se uma senha

    para se conectar internet.

    - RADIO: no parmetro TYPE define botes de escolha. Eles so

    usados em situaes onde somente uma opo pode ser selecionada. Em

    nosso exemplo, este tipo de elemento serve para construir as opes para

    a pergunta Voc gostou da minha pgina?.

    O parmetro NAME, neste caso, deve ser igual para todos os

    campos deste tipo, pois estar identificando a questo formulada.

    O parmetro VALUE deve conter o valor do campo, que ser

    passado ao programa interpretador do formulrio.

    O parmetro CHECKED deve ser usado quando voc desejar que

    uma das opes esteja selecionada como padro ao carregar a pgina.

  • Rev00 17/07/12

    55 | P g i n a

    - CHECKBOX: no parmetro TYPE define botes de verificao. A

    traduo do termo checkbox meio difcil, mas, ao contrrio dos botes de

    escolha (do tipo RADIO), ele deve ser usado quando uma ou mais opes

    so vlidas. No nosso exemplo usamos este tipo na pergunta Voc

    gostaria que eu respondesse a este seu comentrio?.

    O parmetro NAME, neste caso, deve ser diferente para cada

    campo.

    O parmetro VALUE deve conter o valor do campo, que ser

    passado ao programa interpretador do formulrio.

    O parmetro CHECKED deve ser usado quando voc desejar que

    uma das opes esteja selecionada como padro ao carregar a pgina.

    - RESET: no parmetro TYPE define um boto que limpa todos os

    campos, colocando os mesmos valores de quando a pgina foi carregada.

    No parmetro VALUE, pode-se definir o que estar escrito no boto. Caso

    nenhum valor seja definido, aparecer escrito somente reset. Em nosso

    exemplo usamos este elemento no boto Limpar todos os campos.

  • Rev00 17/07/12

    56 | P g i n a

    - SUBMIT: no parmetro TYPE define um boto que aciona o

    envio das informaes preenchidas no formulrio ao programa

    interpretador (aquele definido no parmetro ACTION do elemento FORM).

    O parmetro VALUE define o que estar escrito no boto. Caso

    nenhum valor seja definido, aparecer escrito submit. Para definir o

    boto Enviar comentrios de nosso exemplo, usamos este tipo de

    elemento.

    - IMAGE: no parmetro TYPE, assim como o boto tipo SUBMIT,

    aciona o envio das informaes preenchidas no formulrio utilizando uma

    imagem. Neste caso, passam a existir os parmetros SRC e ALT

    normalmente usados no elemento que define uma imagem.

    O parmetro SRC define o endereo ou nome do arquivo da

    imagem.

    O parmetro ALT opcional e define o texto que ser mostrado

    caso a imagem no seja carregada.

    - SELECT: possibilita definir uma lista de opes para o visitante

    escolher.

    O parmetro NAME define o nome desta lista, e SIZE define

    quantos elementos sero exibidos na tela simultaneamente. Se for omitido,

    somente uma opo aparece por vez.

  • Rev00 17/07/12

    57 | P g i n a

    Cada opo da lista definida atravs de um elemento OPTION e o

    parmetro VALUE deste elemento o que determinar o valor de cada

    opo. Em nosso exemplo, usamos este elemento para criar a lista de

    opes para a resposta da pergunta Qual a pgina de que voc mais

    gostou?.

    ...

    - TEXTAREA: (rea de texto) permite definir um campo de texto

    com vrias linhas. Ele til para colher comentrios e depoimentos dos

    visitantes.

    O parmetro ROWS define o nmero de linhas da caixa de texto, e

    o parmetro COLS define quantos caracteres (colunas) cada linha possui.

    O parmetro NAME define o nome da caixa de texto.

    ...

  • Rev00 17/07/12

    58 | P g i n a

    23.2 EXERCCIO 16

    Abrir um arquivo novo e digitar os comandos abaixo, para criar um

    formulrio.

    Formulrio 1

    Cadastro de Clientes

    Nome:

    Digite o seu E-mail:

    Senha do E-mail:

    Sexo

    Masculino

    feminino


    Produtos Comprados:

    Computador

  • Rev00 17/07/12

    59 | P g i n a

    Monitor

    teclado



    Estado

    AM

    MG

    PE

    RJ

    SP



    Histrico do Cliente:




    Salvar o arquivo no formato texto, com o nome exercicio16.html e

    executar a pgina no navegador.

  • Rev00 17/07/12

    60 | P g i n a

    24 FRAMES

    Atravs do framing, um recurso poderoso, a janela de um browser

    pode ser dividida em diversas partes. Cada uma dessas partes chamada

    de frame.

    Cada um destes frames pode ser manipulado separadamente, onde

    cada um pode conter um documento diferente. Alm disso, um frame pode

    ordenar ao browser para que este atualize, com a URL indicada em um

    frame diferente.

    Assim como todos os recursos mais avanados para a construo

    de Home Pages, os frames devem ser utilizados com o mximo de cuidado.

    Sua utilizao deve obedecer ao critrio de necessidade. Os casos de real

    necessidade de frames no so tantos, mas quando surgem, podem

    melhorar significativamente o site.

    Os casos mais comuns em que utilizao de frames pode ser

    indicada na criao de ndices e tutoriais para efeitos de design podendo

    alterar suas diversas caractersticas atravs de recursos como a omisso de

    barra de rolagem e bordas.

    Com a definio de frames, os documentos escritos em HTML com

    as extenses .htm e .html podem ser classificados em dois tipos:

    Documentos de Layout:

    Contm informaes sobre a estrutura de frames dos documentos.

    Cada frame declarada em documento de layout contm uma referncia

    implcita ou explcita para outro documento que ser exibido no frame. Este

    documento filho ser exibido independentemente da existncia de outras

    frames na janela do browser. O documento filho pode ser um documento

    de contedo ou mesmo outro documento de layout encadeado.

  • Rev00 17/07/12

    61 | P g i n a

    Documentos de Contedo:

    So arquivos HTML convencionais. Um documento de contedo

    pode ser visto em um frame (de um documento de layout) ou

    independente na janela do browser.

    24.1 ATRIBUTOS HTML PARA FRAMES

    ... definem a diviso da janela em

    duas ou mais linhas ou em duas ou mais colunas. Pode haver

    vrias tags encadeadas, fazendo-se desta maneira,

    subdivises da pgina.

    Exemplo:

    Observao.: Neste exemplo foram criadas duas frames, a

    primeira (30%) divide a tela em duas colunas, na primeira coluna ser

    carregado o arquivo pagina1.html, na segunda coluna (70%) foi criado

    mais uma diviso em 2 linhas, na primeira linha (20%) ser carregado o

    arquivo pagina2.html e na segunda linha (80%) ser carregado o arquivo

    pagina3.html.

  • Rev00 17/07/12

    62 | P g i n a

    COLS: O atributo cols divide a janela ou (frames) em diversas

    janelas verticais, tantas quantas forem os valores descritos. Os valores

    podem estar expressos em pixels, percentuais ou relativamente uns aos

    outros.

    Exemplo:

    ROWS: O atributo rows divide a janela ou (frames) em diversas

    janelas horizontais, tantas quantas forem os valores descritos. Os valores

    podem estar expressos em pixels, percentuais ou relativamente uns aos

    outros.

    Exemplo:

    FRAMEBORDER: O atributo frameborder indica se ser exibida ou

    no uma borda 3D para as frames. O parmetro pode assumir os valores

    1 (default, indica a exibio da borda) ou 0 para no exibir a borda.

    Exemplo:

    FRAMESPACING: O atributo framespacing cria um espao

    adicional em pixels entre as frames.

    Exemplo:

    Observao.: Os atributos FRAMESPACING e FRAMEBORDER

    funcionam igualmente por toda a cadeia de FRAMESETs encadeados,

    bastando que sejam declarados no primeiro comando FRAMESET a ser

    utilizado.

    A definio de frames atravs de percentuais interessante, pois a

    diagramao da janela preservada no importando a resoluo em que

    se estiver visualizando a pgina.

  • Rev00 17/07/12

    63 | P g i n a

    Define as pginas que sero carregadas nas divises

    determinadas nas FRAMESETs.

    SRC: O atributo src define o contedo de cada frame do

    documento, onde o parmetro src associa uma URL ao frame.

    Exemplo:

    SCROLLING: O atributo scrolling define a presena, ausncia ou

    atribuio automtica pelo browser das barras de rolagem sendo

    respectivamente: YES, NO ou AUTO.

    Exemplo:

    NORESIZE: O atributo noresize impede que o usurio altere o

    tamanho da frame.

    Exemplo:

    NAME: O atributo name associa um nome janela.

    Exemplo:

    NOFRAME: A marcao permite a criao de uma

    opo de navegao para browsers mais antigos, que no interpretam

    frames, pois ignoram toda a rea de influncia de sendo

    assim, pginas com frames podem conter mensagens que somente sero

    lidas pelos browsers mais antigos, provavelmente avisando aos usurios

    que no conseguiram visualizar, que adquiram uma verso mais atualizada

    ou que sigam um determinado link para pgina escrita sem uso de frames.

  • Rev00 17/07/12

    64 | P g i n a

    Exemplo:

    Esta pgina usa FRAME e seu browser no os

    suporta

    24.2 EXERCCIO 17

    1- Abrir um arquivo novo e digitar os comandos abaixo, para criar

    o primeiro arquivo para construo do frame.




    AZUL

    Salvar o arquivo no formato texto, com o nome azul.html

    2- Abrir um arquivo novo e digitar os comandos abaixo, para criar

    o segundo arquivo para construo do frame.

  • Rev00 17/07/12

    65 | P g i n a



    Verde

    Salvar o arquivo no formato texto, com o nome verde.html

    3- Abrir um arquivo novo e digitar os comandos abaixo, para criar

    o terceiro arquivo para construo do frame.




    Vermelho

    Salvar o arquivo no formato texto, com o nome vermelho.html

  • Rev00 17/07/12

    66 | P g i n a

    4- Abrir um arquivo novo e digitar os comandos abaixo para criar

    o arquivo que contenha os frames.

    Pgina de Frames

    Salvar o arquivo no formato texto, com o nome frame.html e

    executar a pgina no navegador.

    24.3 LINKS EM FRAME ALVO

    Quando o usurio pressiona um link qualquer em uma frame, o link

    pode utilizar sua prpria frame para carregar o documento contido em sua

    URL ou utilizar outra frame. Para que seja possvel a atualizao de outras

    frames foi introduzido o atributo TARGET na tag .

  • Rev00 17/07/12

    67 | P g i n a

    Exemplo:

    Telecentros

    Clicando

    neste link o arquivo teste.html ser aberto na frame

    pgina1

    25 IFRAME INLINE FRAME

    A IFRAME utilizada para inserir um documento ou site dentro de

    uma janela configurvel dentro de uma pgina html. A desvantagem

    principal desse recurso, embora d um visual atrativo para as pginas,

    ter que criar vrios clones de uma pgina e alterar o endereo especificado

    da tag de cada uma. A tag no dinmica e sim

    esttica, ou seja, cada tag desta pgina deve ter um endereo prprio.

    Exemplo:

  • Rev00 17/07/12

    68 | P g i n a

    25.1 EXERCCIO 18

    1- Abrir um arquivo novo e digitar os comandos abaixo, para criar

    o primeiro arquivo para construo do frame.




    TESTE

    Salvar o arquivo no formato texto, com o nome teste.html

    2- Abrir um arquivo novo e digitar os comandos abaixo para criar

    o arquivo que contenha o iframe.

    Pgina contendo IFRAME

    Esta pgina tem um iframe

  • Rev00 17/07/12

    69 | P g i n a

    Salvar o arquivo no formato texto, com o nome exercicio18.html e

    executar a pgina no navegador.

  • Rev00 17/07/12

    70 | P g i n a

    26 PLANO DE AULA

    1 aula

    - Pginas Web

    - Home Page

    - O que so Browsers?

    - Protocolo HTTP

    - URL

    - Como Planejar seu Site

    - Criando o Tipo Certo de Site

    - O que HTML?

    - O que voc pode fazer com o HTML?

    - O que necessrio para trabalhar com HTML?

    - Sintaxe dos comandos HTML

    - Como Exibir o Cdigo HTML de uma Pgina da Internet

    - Estrutura Bsica do HTML

    - Elementos Bsicos do HTML

    - Ttulos e Subttulos

    - Exerccio 01

    - Acentuao

    - Exerccio 02

    2 aula

    - Inserindo comentrios

  • Rev00 17/07/12

    71 | P g i n a

    - Formatao de Textos

    - Marcao FONT

    - Exerccio 03

    - Os principais Comandos de Estilo de Texto so:

    - Movimentando o texto Marquee

    - Exerccio 04

    - Formatao de Pargrafos

    - Exerccio 05

    - Linhas Horizontais

    - Exerccio 06

    3 aula

    - Imagens

    - Principais Diferenas entre as Imagens GIF e JPEG

    - Qual Formato Escolher?

    - Exerccio 07

    - Definir uma Imagem no Plano de fundo

    - Exerccio 08

    - Hyperlinks

    - Definir um Link Externo

    - Exerccio 09

    - Definindo um Link Interno

    - Exerccio 10

    - Definir um Link de Correio Eletrnico Mailto

  • Rev00 17/07/12

    72 | P g i n a

    - Acrescentar no Exerccio 10

    - Definir um Link para Outro Site

    - Acrescentar no Exerccio 10

    - Definir uma Imagem como Link

    4 aula

    - Listas

    - Listas Ordenadas

    - Exerccio 11

    - Listas No Ordenadas

    - Exerccio 12

    - Lista de Definio

    - Exerccio 13

    5 aula

    - Tabelas

    - Atributos de uma Tabela

    - Exerccio 14

    - Atributos da marcao

    - Acrescentar no Exerccio 14 a linha abaixo:

    - Atributos da marcao

    - Atributos das marcaes e

    - Exerccio 15

  • Rev00 17/07/12

    73 | P g i n a

    6 aula

    - Formulrios

    - Atributos da marcao

    - Exerccio 16

    7 aula

    - Frames

    - Atributos HTML para frames

    - Exerccio 17

    - Links em Frame alvo

    - Iframe Inline Frame

    - Exerccio 18

    8 aula

    - Projeto final: Desenvolvimento do tema (escolhido pela turma)

    para elaborao do projeto.

    - Incio da Elaborao do projeto

    9 aula

    - Elaborao do projeto

    10 aula

    - Concluso do projeto

    - Hospedagem do site

  • Rev00 17/07/12

    74 | P g i n a

    27 BIBLIOGRAFIA

    Sites

    www.openoffice.org/pt-br/

  • Rev00 17/07/12

    75 | P g i n a

    Esta obra pode ser reproduzida e distribuda parcial ou

    integralmente desde que citada a fonte.

    Venda Proibida.

    Realizao: Secretaria Municipal de Participao e Parceria do

    Municpio de So Paulo

    CID Coordenadoria de Incluso Digital

    IDORT - Instituto de Organizao Racional do Trabalho

    Gestor Responsvel: Roberta Taconi Ferraz

    Pedagogo Responsvel: Mariana Garcia Anunciato

    Redao: Equipe de Capacitao rea tcnica

    Audre Eller

    Douglas Diniz Alves

    Nanci Furtado

    Paulo Jordo da Silva Boccatto

    Fale conosco: [email protected]

    [email protected]

    (011) 3277-2408

    mailto:[email protected]:[email protected]