Docsity
Docsity

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

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


Ganhe pontos para baixar
Ganhe pontos para baixar

Ganhe pontos ajudando outros esrudantes ou compre um plano Premium


Guias e Dicas
Guias e Dicas

Html.exercicios.html, Exercícios de Informática

Um arquivo que tem varios tipos de exercicios para programar em html

Tipologia: Exercícios

2024

Compartilhado em 06/11/2024

usuário desconhecido
usuário desconhecido 🇧🇷

1 documento

1 / 14

Toggle sidebar

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

Não perca as partes importantes!

bg1
Aprendendo HTML
Página 1
Programação em HTML - Lição 1 – Introdução à Linguagem
O que é HTML ?
HyperText Markup Language ou Linguagem de Marcação HiperTexto, uma linguagem simples composta de
marcações de formatação e diagramação de hipertexto/hipermídia (informações em texto, imagens, sons e
ações ligadas umas às outras de uma forma complexa e não-sequencial através de chaves relacionadas).
É a linguagem da WWW (World Wide Web), justamente por essa capacidade de formatação e diagramação
de hipertexto/hipermídia. Atualmente existem muitas outras linguagens utilizadas concorrentemente com o
HTML (Java, ActiveX, etc...) mas a base da WWW ainda é , de longe, o HTML, que é interpretada por todos os
navegadores (browsers) disponíveis (Netscape, Internet Explorer, Mosaic, etc...).
O documento em HTML é um arquivo texto comum (ASCII) que pode ser escrito através de qualquer editor de
textos comum (Edit, E , Norton Editor, Notepad, ...) e tem a terminação .htm ou .html .
Como é uma linguagem interpretada, a partir do momento em que se salvou o arquivo HTML o mesmo já pode
ser aberto por qualquer navegador, que é o único software que pode determinar se o documento foi escrito
dentro dos padrões da linguagem. Atualmente estamos na versão 3.0 do HTML, mas o HTML 2.0 é a versão
reconhecida por todos os navegadores(Esta apostila está um pouco desatualizada já estamos na versão 4, e
hoje é a 3 que é reconhecida pela maior parte dos navegadores).
Os softwares básicos para a programação em HTML são apenas dois : um Editor de Textos e um
Navegador .
Se você está pensando em utilizar um Processador de Textos tipo Word, WordPad, etc... esteja seguro
de sempre gravar os arquivos no modo somente texto, mas recomendo utilizar o Bloco de
Notas(Notepad) do Windows.
Existem softwares específicos para a criação de documentos HTML(tipo o Front Page), que facilitam
bastante o trabalho, mas é muito importante conhecer a linguagem para que seja possível criar boas
páginas.
Dicas
Anatomia de um documento HTML
Dentro de um documento HTML temos elementos de marcação denominados TAGS . Uma TAG é definida
através de seu nome cercado pelos sinais de “menor” (<) e “maior” (>) e normalmente tem uma TAG
correspondente para finalização, com o mesmo nome e precedido por uma barra (/).
Ex.: <BODY> .... corpo do documento ... </BODY> (define o início e o fim do corpo do documento HTML)
Algumas TAGS admitem de atributos (parâmetros) que alteram a maneira como o navegador deve
interpretá-la e normalmente são colocados na TAG inicializadora.
Ex.: <BODY BACKGROUND=”fundo.gif”> .... corpo do documento </BODY> (define que o documento HTML
terá como fundo a figura fundo.gif )
Nem todos os navegadores suportam todas as TAGS. É interessante sempre criar o documento com o
conjunto mais básico de TAGS para que seja garantida a sua execução perfeita em qualquer
navegador.
Os navegadores também não interpretam todas as TAGS de maneira idêntica. É conveniente testar o
funcionamento de seu documento em mais de um navegador para conferir o comportamento.
O HTML não faz diferença entre letras maiúsculas e minúsculas. Mantenha um padrão em sua
programação apenas para seu controle (é importante!).
Dicas
pf3
pf4
pf5
pf8
pf9
pfa
pfd
pfe

Pré-visualização parcial do texto

Baixe Html.exercicios.html e outras Exercícios em PDF para Informática, somente na Docsity!

Programação em HTML - Lição 1 – Introdução à Linguagem

O que é HTML?

HyperText Markup Language ou Linguagem de Marcação HiperTexto, uma linguagem simples composta de marcações de formatação e diagramação de hipertexto/hipermídia (informações em texto, imagens, sons e ações ligadas umas às outras de uma forma complexa e não-sequencial através de chaves relacionadas). É a linguagem da WWW (World Wide Web), justamente por essa capacidade de formatação e diagramação de hipertexto/hipermídia. Atualmente existem muitas outras linguagens utilizadas concorrentemente com o HTML (Java, ActiveX, etc...) mas a base da WWW ainda é , de longe, o HTML, que é interpretada por todos os navegadores (browsers) disponíveis (Netscape, Internet Explorer, Mosaic, etc...). O documento em HTML é um arquivo texto comum (ASCII) que pode ser escrito através de qualquer editor de textos comum (Edit, E , Norton Editor, Notepad, ...) e tem a terminação .htm ou .html. Como é uma linguagem interpretada, a partir do momento em que se salvou o arquivo HTML o mesmo já pode ser aberto por qualquer navegador, que é o único software que pode determinar se o documento foi escrito dentro dos padrões da linguagem. Atualmente estamos na versão 3.0 do HTML, mas o HTML 2.0 é a versão reconhecida por todos os navegadores(Esta apostila está um pouco desatualizada já estamos na versão 4, e hoje é a 3 que é reconhecida pela maior parte dos navegadores).

Os softwares básicos para a programação em HTML são apenas dois : um Editor de Textos e um Navegador. Se você está pensando em utilizar um Processador de Textos tipo Word , WordPad , etc... esteja seguro de sempre gravar os arquivos no modo somente texto, mas recomendo utilizar o Bloco de Notas(Notepad) do Windows. Existem softwares específicos para a criação de documentos HTML(tipo o Front Page), que facilitam bastante o trabalho, mas é muito importante conhecer a linguagem para que seja possível criar boas páginas.

Dicas

Anatomia de um documento HTML

Dentro de um documento HTML temos elementos de marcação denominados TAGS. Uma TAG é definida através de seu nome cercado pelos sinais de “menor” (<) e “maior” (>) e normalmente tem uma TAG correspondente para finalização, com o mesmo nome e precedido por uma barra (/).

Ex.: .... corpo do documento ... (define o início e o fim do corpo do documento HTML)

Algumas TAGS admitem de atributos (parâmetros) que alteram a maneira como o navegador deve interpretá-la e normalmente são colocados na TAG inicializadora.

Ex.: .... corpo do documento (define que o documento HTML terá como fundo a figura fundo.gif )

Nem todos os navegadores suportam todas as TAGS. É interessante sempre criar o documento com o conjunto mais básico de TAGS para que seja garantida a sua execução perfeita em qualquer navegador. Os navegadores também não interpretam todas as TAGS de maneira idêntica. É conveniente testar o funcionamento de seu documento em mais de um navegador para conferir o comportamento. O HTML não faz diferença entre letras maiúsculas e minúsculas. Mantenha um padrão em sua programação apenas para seu controle (é importante!).

Dicas

Meu primeiro documento HTML

Programação em HTML - Lição 2 – Tags Iniciais

Tags ...

Todo documento HTML fica contido entre as tags e . Dentro dessas tags temos duas seções : HEAD e BODY que indicam o cabeçalho do documento e o corpo, respectivamente.

Alguns navegadores não exigem a presença das tags e mas por motivo de compatibilidade, começe seu documento HTML sempre utilizando essas tags.

Dicas

Tags ...

Indicam o cabeçalho do documento e nelas estão contidas as informações de configuração da página. Entre as tags e temos as seguintes opções :

Tag Tag <ISINDEX> Tag <META> Tag <NEXTID></em></p> <p>Dessas tags, a mais normalmente usada é a <TITLE>, que é vista a seguir.</p> <p><strong><em>Tag <TITLE> ...

Essas tags devem ser utilizadas entre as tags de cabeçalho . Determinam o título que irá ser apresentado na barra de título da janela do navegador. Abaixo temos um exemplo que ilustra a utilização das tags vistas até agora :

Exemplo 2.1 – Um documento HTML mínimo.

Utilize sempre um título condizente com o conteúdo de sua página HTML. Ajuda o leitor e pode ser utilizado como nome para seus endereços favoritos (bookmarks).

Dicas

E x e r c í c i o 2. 1 Digite o Exemplo 2.1 utilizando o Notepad e salve-o com o nome de exer21.html. Abra o seu navegador e utilize-o para verificar o resultado do exercício. Quando estiver OK, faça as seguintes alterações, testando uma a uma : Mude o título do seu documento Retire as tags e Retire a tag Retire as tags </p> <p>Crie sempre um diretório especial para seu projeto em HTML. Isso irá ajudá-lo a encontrar seus arquivos posteriormente.</p> <p><em>Dicas</em></p> <h2>Programação em HTML - Lição 4 – Texto do Documento</h2> <p>O texto que compõe o documento HTML deve estar contido entre as tags <em><BODY></em> e <em></BODY></em> e isso pode ser facilmente testado. Existem então algumas tags modificadoras para formatar esse texto, como a seguir.</p> <p><strong><em>Tag <BR></em></strong></p> <p>Faz uma quebra de linha no texto. O texto em um documento HTML não faz quebras de linha automáticas. Essas devem ser inseridas utilizando-se tags <em><BR>.</em></p> <p><em>E x e r c í c i o 4. 1</em> Digite o documento abaixo utilizando o Notepad e salve-o com o nome de exer41.html. Abra o seu navegador e utilize-o para verificar o resultado do exercício. Insira tags <em><BR></em> nesse documento para que seja melhor visualizado.</p> <p><HTML> <HEAD> <TITLE> Exemplo que mostra quebras de linhas

O HTML precisa de tags especiais de quebra de linha. Os ENTER’s colocados no texto não geram quebras de linhas.

Tags

...

Essas tags criam parágrafos no texto do corpo do documento, gerando uma quebra de linha maior que a da tag
. Admitem também atributo de alinhamento ALIGN=”left” (à esquerda), ALIGN=”right” (à direita) e ALIGN=”center” (ao centro).

Tags ...

Coloca em negrito o texto envolvido.

Tags ...

Coloca em itálico o texto envolvido.

Tags ...

Sublinha o texto envolvido.

Tags ... e ...

O texto envolvido fica Subscrito e Sobrescrito , respectivamente.

Evite usar o Sublinhado em palavras que não são links, pois isto confunde os visitantes de suas páginas, caso você precise realçar alguma palavra utilize os recursos de Itálico ou Negrito.

Dicas

E x e r c í c i o 4. 2 Altere o exercício anterior trocando as tags
por

e observe a diferença. Aumente o texto e deixe algumas linhas com
para facilitar a visualização. Utilize variações de alinhamento nos parágrafos. Coloque algumas tags de formatação de fontes para criar textos enfatizados ( negrito , itálico , sublinhado, (^) subscrito e sobrescrito)

Programação em HTML - Lição 6 - Tags de Formatação de Fontes

Tags ...

As tags ... fazem a formatação de fonte no texto que envolvem no documento HTML. Juntamente a essas tags utilizam-se os atributos SIZE , FACE e COLOR para definir tamanho, tipo do fonte e cor, respectivamente.

Os tamanhos de fontes podem variar entre 1 e 7 apenas(No HTML versão 4 não existe limite para o tamanho da fonte). Cuidado com a utilização excessiva de fontes, não é garantido que exista a fonte especificada no computador que está acessando a sua página na Internet. Se forem colocados vários tipos de fontes separados por vírgulas, o navegador utilizará a primeira fonte da lista que estiver disponível na máquina.

Dicas

E x e r c í c i o 6. 1 Digite o documento abaixo utilizando o Notepad e salve-o com o nome de exer61.html. Abra o seu navegador e utilize-o para verificar o resultado do exercício. Faça alterações nos atributos e coloque quebras de linhas onde for necessário.

Exemplo que mostra os possíveis variações com fontes.

Arial, tam. 1 Helvetica, tam. 3 Fonte de tamanho 5 Times é o padrão

Tag

Tem a finalidade de definir um padrão para a fonte que será utilizada no documento todo. Ainda assim é possível utilizar as tags ... para alterar esse padrão.

E x e r c í c i o 6. 2 Digite o documento abaixo utilizando o Notepad e salve-o com o nome de exer62.html. Abra o seu navegador e utilize-o para verificar o resultado do exercício. Faça alterações nos atributos e coloque quebras de linhas onde for necessário.

Exemplo que mostra os possíveis variações com fontes.

<BASEFONT SIZE=”4” COLOR=”#00FFFF” FACE=”arial, helvetica, times”> Todo esse texto deve estar em fonte Arial de tamanho 4 e cor azul claro. Se na máquina não tiver o fonte Arial, será utilizado o Helvetica e em último caso, Times.

Programação em HTML - Lição 7 – Linhas Horizontais

Tag


Desenha uma linha horizontal no documento. Pode ser modificada pelos seguinte atributos :

SIZE : Define a espessura, em pixels, da linha. WIDTH : Define a largura da linha, o que pode ser feito em pixels (número absoluto) ou em percentual da tela (com o símbolo de %) ALIGN : Alinhamento, como o que tem sido usado, pode ser LEFT , RIGHT e CENTER ou seja, esquerda, direita e ao centro, respectivamente. NOSHADE : Linha sem sombra. O padrão é a linha sombreada, utilizando esse atributo temos uma linha sem sombra.

E x e r c í c i o 7. 1 Digite o documento abaixo utilizando o Notepad e salve-o com o nome de exer71.html. Faça alterações nos atributos para desenvolver mais sobre essa tag, experimente combinar os atributos.

Exemplo que mostra a utilização de linhas horizontais

Linha comum

Linha com a espessura modificada
Linha com largura especificada em percentual
Linha com largura absoluta e sem sombra

A tag
não precisa de terminador .

Dicas

E x e r c í c i o 8. 3

Crie um documento HTML que faça um espécie de menu com os exercícios feitos até agora, utilizando um link para cada um deles. Gaste o que você aprendeu, utilize a variação de cores, fontes e efeitos em fontes. Tudo o que for escrito entre as tags e será considerado parte do link.

Programação em HTML - Lição 9 - Imagens

Tag

Insere uma imagem dentro de um documento HTML. As imagens, assim como em , devem estar nos formatos GIF ou JPEG. Os atributos normalmente utilizados são : SRC : Especifica o nome do arquivo de imagem. Sem esse atributo a tag não tem finalidade. ALT : Texto alternativo para a imagem (muito útil quando o usuário não está exibindo as figuras. O texto auxilia no entendimento do significado daquela imagem). ALIGN : Alinhamento do texto em relação à imagem. HEIGHT : Altura da figura em pixels (se não utilizada, a figura será mostrada em sua altura original). WIDTH : Largura, semelhante a HEIGHT.

Existem ainda os atributos HSPACE, VSPACE, BORDER, ISMAP, USEMAP e UNITS disponíveis para a tag .

Dicas

E x e r c í c i o 9. 1 Digite o documento abaixo utilizando o Notepad e salve-o com o nome de exer91.html. Encontre algumas figuras em seu disco e substitu-a os nomes “figura” colocados nas tags do documento. Abra o seu navegador e utilize-o para verificar o resultado do exercício. Faça experiências com a combinação de atributos e crie links utilizando as imagens para os exercícios anteriores..

Mostrando figuras no documento HTML.


Veja uma figura no documento...


Essa figura tem o texto alinhado acima


Texto alternativo Passe o mouse sobre a figura


Essa figura esta com a altura modificada

É possível colocar imagens como links. Basta incluí-la entre as tags e .

Dicas

Tags

...
Tag
Tag

Uma lista definição

é uma lista de termos
e suas definições
. Cada definição é usualmente mostrada identada em relação ao termo correspondente.

HTML
HyperText Markup Language
SGML
Standard Generalized Markup Language

HTML HyperText Markup Language SGML Standard Generalized Markup Language

Exemplo Resultado

E x e r c í c i o 1 0. 1

Utilizando as tags desse capítulo você deve criar a seguinte página. De acordo com suas preferências.

Utilizando lista definição:

As coisas que eu mais gosto de fazer :

Sábado Pela manhã XXXXXXX YYYYYYYY À tarde XXXXXXX YYYYYYYY À noite XXXXXXX YYYYYYYY

Domingo XXXXXXXXXXX YYYYYYYYYYYY

Utilizando lista não ordenada:

Minhas bebidas preferidas AAAAAAA BBBBBBB CCCCCCC

Utilizando lista ordenada:

Quando eu acordo de manhã, essa é a sequência das coisas que faço :

AAAAAAAAA BBBBBBBBB CCCCCCCC

Programação em HTML - Lição 11 – Texto Pré-formatado

Tags

 ... 

Delimita um texto a ser exibido com fonte de largura fixa, da maneira como foi previamente formatado. Com a utilização desse elemento, todos os espaços e saltos de linha são considerados de acordo com o que é inserido no documento.

E x e r c í c i o 1 1. 1 Escreva um documento em HTML que apresente uma pequena tabela conforme mostrada abaixo :

| Tabela de Preços | +--------------------------+-------------+ | Maça argentina | R$ 10,00 | | Laranja Pera | R$ 5,00 | | Banana Nanica | R$ 2,50 | +--------------------------+-------------+

Programação em HTML - Lição 12 – GIF’s Animados

Os GIF’s animados, imagens que se alteram com o tempo nas páginas HTML não são um recurso específico da linguagem. Na verdade, essas figuras são montadas a partir de uma seqüência de imagens (GIF’s) estáticas, que, colocados em ordem e com um tempo entre as mudanças causam a impressão de animação. Isso pode ser feito facilmente com ferramentas específicas para essa finalidade. Muitas podem ser encontradas na própria Internet, mas uma ferramenta bastante utilizada e conhecida é o GIF Construction Set, que possui inclusive um assistente (Wizard) de criação de GIF’s animados.