Scribd
Carregar
18 visualizações65 páginas

E-Book HTML

O documento é um curso introdutório sobre HTML, abrangendo desde conceitos básicos da Internet e seus componentes até a prática de escrita em HTML. O curso é dividido em aulas que incluem tópicos como tags, formatação de texto, listas, imagens, tabelas, links, formulários e estilos CSS. Cada aula contém exercícios de fixação para reforçar o aprendizado.

Enviado por

Brendo Ribeiro
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
18 visualizações65 páginas

E-Book HTML

O documento é um curso introdutório sobre HTML, abrangendo desde conceitos básicos da Internet e seus componentes até a prática de escrita em HTML. O curso é dividido em aulas que incluem tópicos como tags, formatação de texto, listas, imagens, tabelas, links, formulários e estilos CSS. Cada aula contém exercícios de fixação para reforçar o aprendizado.

Enviado por

Brendo Ribeiro
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 65

<HTML>

SUMÁRIO

Introdução.............................................................................. 05

Aula 01....................................................................................06

Conhecimento mais sobre Internet seus Componentes..........06

Funcionamento da Internet.....................................................06

Protocolos................................................................................06

Funções do TCP e do IP............................................................07

Sabendo mais sobre Sites........................................................08

Servidor...................................................................................08

Conhecendo a linguagem HTML.............................................09

Iniciando a escrita em HTML..................................................09

Marcadores-Padrão da linguagem HTML..............................10

Praticando.............................................................................11

Exercícios de Fixação.............................................................13

Aula 02 15

Conhecendo as tags

Tag – O elemento Fundamental

Compreendendo a função de cada Tag

Atributos das Tags

Praticando

Exercícios de Fixação

Aula 03

Trabalhando com Textos


Inserindo Títulos e Subtítulos

Considerações sobre a Tag “H1”

Considerações sobre as demais Tags

Inserindo Parágrafos

Alinhamento do Texto

Quebra de Linha

Exercícios de Fixação

Aula 04

Outras formatações de Texto e Lista

Negrito, Itálico e Sublinhado

Outras Formatações

Pré-Formatações

Inserindo Citações

Determinando o estilo de Fonte

Exercícios de Fixação

Aula 05

Listas e Imagens

Listas

Listas Ordenadas

Listas Não Ordenadas

Listas Definidas

Linha Horizontal

Imagens

Exercícios de Fixação

Aula 06

Tabelas

Criando Tabelas
Atributos da Tabela

Cabeçalho da Tabela

Exercícios de Fixação

Aula 07

Links

Diretório Raiz

Criando o Link

Atributo HREF

Atributo Name

Atributo Target

Links Relativos e Absolutos

Links Relativos

Links Absolutos

Exercícios de Fixação

Aula 08

Formulários

O que são Formulários?

Criando os Formulários

Atributos Action e Method

Input

Campos do Texto

Campos de Senha

Campos de Validação

Botões de Escolha

Botões de Checked

Botões Submit e Reset

Tag Textarea
Tag Select

Seletor Único

Seletor Múltiplo

Exercícios de Fixação

Aula 09

Metas e Estilos CSS

Metas

Introdução ao CSS

Exercícios de Fixação

Aula 10

Avaliação Final

Exercícios de Fixação

Referências Bibliográficas

HTML
INTRODUÇÃO

Olá, aluno!

Seja bem-vindo ao curso de HTML.

Neste curso, você conhecerá e aprenderá como utilizar as linguagens codificadas. Essas
linguagens, juntamente com os processos de tecnologia modificaram vários campos da web.

As inovações da tecnologia nos propiciaram aprender linguagens novas que possibilitaram a


criação de novos produtos e equipamentos que facilitaram o nosso trabalho.

Durante o curso, discutiremos a respeito da criação da web e chegaremos aos parâmetros que
mais estão sendo utilizados no mercado.

E, para entendermos melhor esse contexto, vamos aprender a utilizar a linguagem HTML.

Esteja preparado, pois a partir de agora, você irá navegar por um mundo cheio de códigos.

Boa aula!
AULA 01

1 – Conhecendo mais sobre Internet e seus componentes.

Para iniciarmos a aula de hoje, vamos aprender os conceitos de funcionamento da Internet, os


protocolos utilizados, os servidores, entre outros.

1.1 – Funcionamento da Internet

A Internet é baseada no conceito arquitetura cliente-servidor, que é um sistema antigo de


computação.

O que é arquitetura cliente-servidor?

Arquitetura cliente-servidor nada mais do que um pedido e um recebimento, ou seja, o


usuário pede alguma informação (cliente) que é retornada (servidor) para ele.

1.2 – Protocolos

As transações entre cliente e servidor envolvem um protocolo que é definido por um conjunto
de regras que controla a comunicação entre eles.

O funcionamento da internet é baseado em um protocolo chamado TCPO/IP, sendo que:

TCP: Transmission Control Protocol

IP: Internet Protocol

Assim, a identificação 200.234.25.188 em um computador, por exemplo, é o TCP/IP.

As informações da internet, como na maioria das redes, são transmitidas em pacotes.

O que são pacotes?

Imagine pequenos envelopes com remetente e destinatário.

Os pacotes são assim.

1.3 – Funções do TCP e do IP

A função do TCP é dividir a informação em pacotes. Esses pacotes serão enviados pela rede e
têm, também, como função recebê-los, verificá-los e reagrupa-los.

O IP tem a função de encontrar o melhor caminho para o envio dos pacotes por meio da rede.

Cada pacote é independente, podendo, assim, seguir caminhos diferentes até chegar ao seu
destino.

Ao recebe-los, eles serão ordenados e obteremos a mesma informação enviada.

Cada pacote recebido é verificado por vez.


No caso de ocorrência de erro, ele terá que ser reenviado.

1.4 – Sabendo mais sobre sites

Os sites são conjuntos de páginas que formam um sistema de informação.

Podem ir desde sites simples, somente com informações pessoais, até sites complexos de
sistemas empresariais.

O tamanho do site varia de acordo com a condição e estilo agregado pela empresa ou
desenvolvedor.

Desta forma, um site pode ter apensar uma página ou milhares.

1.5 – Servidor

Quando o site é criado, ele deve ser armazenado em um servidor web chamado,
frequentemente, de host.

O servidor tem como função exibir as páginas para os clientes que a solicitarem.

Servidores são computadores normais com grande capacidade de armazenamento.

Eles ficam ligados o tempo todo à internet e a conexão a eles é dedicada, ou seja, ficam
conectados a uma rede exclusiva.

Deve ser instalado no servidor o web server, um software específico que faz com que o
computador entenda as solicitações de páginas que ele recebe da internet e as exibe aos
usuários que estão solicitando.

1.6 – Conhecendo a linguagem HTML

HTML – HiperText Markup Language – em português, Linguagem de Marcação de Hipertexto.


A linguagem HTML é responsável pela criação de documentos para web, que chamamos de
páginas. Elas são divididas na WWW (Word Wide Web).

A linguagem em HTML surgiu com a criação de Sir Tim Berners Lee, que foi o desenvolvedor da
Web. A ideia de Berners era disponibilizar textos científicos que deveriam ser disponibilizados
em um programa que iria compreendê-lo e exibi-lo de uma forma que todos pudessem
entender.

Um site pode ser todo desenvolvido em HTML como somente algumas páginas dele poder ser
desenvolvidas nessa linguagem.

Atenção:

Você sabe o significado de Web?


É Teia. Hoje esse significado é muito utilizado, já que os computadores estão interligados com
outros do mundo todo, formando, assim, uma teia de conexão.

1.7 – Iniciando a escrita em HTML

Como você já sabe, a linguagem HTML é baseada em textos e para desenvolvê-la é necessário
utilizar um programa que possibilite a criação desses textos.

Para desenvolver uma página em HTML, é importante utilizar um programa que consiga
interpretar essa linguagem, que mais tarde transformará o código fonte em conteúdo na
página.

Porém, não existe um programa propriamente dito que auxilia o desenvolvimento de uma
página nessa linguagem. Você pode utilizar um simples editor de texto, como o bloco de notas
disponível no Windows.

Durante o desenvolvimento da página, você conseguirá ver somente o código de fonte e não
como a página realmente ficará. Sendo assim, será necessário utilizar um programa específico
que converta o código fonte em conteúdo de leitura simples, e isso é feito por um navegador
de internet. Entre os navegadores, destacam-se: o Google Chrome, o Internet Explorer e o
Mozilla Firefox.

1.8 – Marcadores-Padrão da Linguagem HTML

Na linguagem HTML, em vez de instruções e comandos, existem elementos tag ou marcadores


usados para ativar e desativar uma determinada formatação de texto.

Um documento HTML pode ser dividido em várias seções, cada uma contendo um tipo
específico de informação.

Vamos conhecer cada elemento e sua função. Confira!

Estrutura Básica:

<html> - Início da linguagem.

<head> - Abertura do cabeçalho.

<title> - Abertura do título da página.

</title> - Fechamento do título da página.

</head> - Fechamento do cabeçalho.

<body> - Abertura do corpo do texto.

</body> - Fechamento do corpo do texto

</html> - Fim da linguagem.


1.9 – Praticando

Você já conheceu os termos e as estruturas. Agora, vamos praticar um pouco para


entendermos melhor como essa linguagem é desenvolvida.

Acesse o menu Iniciar, clique em Todos os Programas, abra a pasta Acessórios e clique em
Bloco de Notas.

Com o bloco de notas aberto, digite o seguinte código:

<html>

<head>

<title>Iniciando curso de HTML </title>

</head>

<body>Primeira aula do curso de HTML. Testando os códigos e as estruturas.</body>

</html>

Veja nessa imagem como deve ficar:

Clique no menu arquivo e depois em Salvar como.

Antes de salvar o documento, você precisa saber que as páginas de web criadas terão uma
extensão (extensão é o que distingue um arquivo de outro e identifica em qual programa
aquele arquivo pode ser aberto).

No caso da página HTML, devemos salvar com a extensão .htm ou .html.

Nesse caso, digite aula1.htm no campo Nome do Arquivo. Salve na área de trabalho.

Minimize o bloco de notas.

Na área de trabalho, note que o arquivo aula1 está disponível. Neste caso, ele está como ícone
do navegador Google Chrome, que é o navegador padrão desse computador.

Clique dias vezes sobre ele.


Repare que todo código digitado no bloco de notas foi convertido, aparecendo somente as
informações principais.

Note que na guia do navegador apareceu o título que digitamos dentro das tags <title> e
</title>

Considerações Finais

Encerramos a primeira aula. Nas próximas aulas, vamos trabalhar com mais códigos dentro da
linguagem HTML.

Até lá

1) Qual programa é o responsável por interpretar e mostrar uma página com as


informações desenvolvida em HTML?
2) Qual programa podemos utilizar para escrever uma página de internet?
3) As tags que vêm com o sinal de barra (/) são de:
4) Escreva a tag para abrir e fechar um título
5) O que acontece ao digitar a tag <head>?

Anotações:
AULA 02

2 – Conhecendo as Tags

Olá,

Na aula anterior, você conheceu brevemente o conceito de tags.

Agora, iremos nos aprofundar mais nesse assunto, pois a tag é um elemento fundamental no
desenvolvimento da linguagem HTML.

Boa aula!

2.1 – Tag – O elemento fundamental

Como mencionado anteriormente, a tag é o elemento fundamental no desenvolvimento de


páginas de internet.

Você viu que as estruturas básicas do HTML estão sempre entre os sinais < (menor) e >
(maior).

Todo o conteúdo digitado dentro desses sinais chamam-se tag.

Exemplos: <hr /> <br /> <p>

Para digitar a tag, devemos nos atentar a certos conceitos fundamentais.

Conheça-os!

A partir do HTML 4, foi convencionada a utilização das tags simples com um sinal de barra (/)
antes do sinao (>) no fechamento da tag.

Exemplo: <input name=”estado” type=”teste” />

Atenção:

Escreve-se tag, mas lê “tég”.

As tags de abertura e encerramento podem ser utilizadas juntas, ou seja, na mesma linha ou
no mesmo contexto.

Por exemplo: <body>Aprendendo mais sobre HTML</body>.

Isso pode variar de acordo com a estrutura do desenvolvimento da página.


2.2 – Compreendendo a função de cada tag

Pare entendermos melhor a leitura das tags , observe o exemplo:

Note que na primeira linha, temos a tag de abertura da linguagem HTML (<html>). Essa tag se
fechará na décima linha (</html>).

Ao utilizar essas tags, você estará limitando o início e o término da página da internet. Desta
forma, o navegador identificará que o conteúdo dentro desses códigos faz parte da página da
internet.

Veja agora a segunda linha:

A tag digitada nessa linha é <head>, que significa cabeçalho (em inglês). Tudo o que vier
dentro dessa tag será o cabeçalho da página da internet.

Antes de fechar essa tag, podemos determinar outra: <title>. Aqui, definiremos o título da
página da internet.

Identificado o título, você deve fechar a tag com seu respectivo par de fechamento </title>.

Observe a linha 3 e, na sequência, feche o cabeçalho </head>. Veja a linha 4.

Na linha 5, observe que iniciamos com tag <body>, que significa corpo (em inglês).

A partir da abertura dessa tag é possível colocar o corpo do texto da página da internet.

Ao finalizar a digitação da tag, feche-a com seu par </body>.

Veja o encerramento na linha 9.

2.3 – Atributos das tags

Vimos até agora as principais tags para o desenvolvimento de uma página de internet.

Essas tags podem vir com alguns atributos que modificarão suas características, como por
exemplo inserir negrito, sublinhado, itálico, cores, fontes, entre outras.

Confira na tabela a seguir os atributos que podem ser inseridos dentro do início da tag.
Observação: No lugar do ponto de interrogação (?) deverá ser identificado (em inglês) o nome
da cor. Exemplo: <body bgcolor=”blue”>. O mesmo segue para as demais tags.

2.4 – Praticando

Agora que você já conhece algumas tags, vamos praticar o conteúdo estudado.

Abra o Bloco de Notas.

Digite o conteúdo da imagem abaixo:

Ao concluir, salve na área de trabalho com o nome aula2.htm.

Abra o arquivo da área de trabalho e veja como ficou a página:

Você notou que o texto está em negrito, com uma parte em itálico, da cor vermelha e o fundo
da página em azul?

Isso aconteceu porque utilizamos as tags que definem cada uma dessas funções.

Por exemplo, note nesta linha que temos a tag da cor do texto, cor da fonte e a tag negrito

Agora, note que somente a frase “CursoProfissionalizante” está em itálico, pois abrimos e
fechamos a tag itálico somente entre ela.

Veja:

<body text=”red” bgcolor=”lightblue”><p><b>A<i> Curso Profissionalizante</i>

Considerações Finais

É bem simples trabalhar com a linguagem HTML; é só conhecermos e sabermos utilizar as tags
devidamente.

Na próxima aula, temos mais novidades para você!


Até lá!

Exercícios de Fixação

1) O conteúdo da tag <title> é mostrado em que parte do navegador da internet?


2) Qual par de tags é utilizada para mostrar o conteúdo textual da página da internet?
3) Ao utilizar essa tag: <body bgcolor=”yellow”>, o que ocorre com o texto?
4) Escreva a tag que coloca o texto em negrito e itálico.

3 – Trabalhando com textos

Olá,

Na aula de hoje, vamos aprender a trabalhar com textos dentro de uma página HTML. Na aula
anterior, você desenvolveu um pequeno texto e formatou.

Agora, vamos detalhar mais esses processos de formatação.

Boa aula!

3.1 – Inserindo Títulos e Subtítulos

Ao escrever uma redação, um artigo ou um simples texto é necessário identifica-lo com um


títulos para que as pessoas saibam do que se trata e tenham interesse em ler. Em alguns casos,
também é possível inserir um subtítulo.

Não é diferente quando se desenvolve uma página da internet, onde é possível, também, dar
um título e um subtítulo a ela.

Vamos, agora, aprender a fazer esse procedimento.

Para identificar um título e um subtítulo no desenvolvimento da página da internet, podemos


utilizar tags.

Essas tags fazem a diferenciação dos tamanhos dos títulos e subtítulos.

Existem seis níveis de título: o primeiro é o <h1>, que é o mais alto, indicando o título mais
importante da página.

Exemplo: <h1>Curso Profissionalizantes</h1>

As tags a partir de <h2> até <h6> classificando os demais níveis.

Assim, a tag <h2> será utilizada em um texto mais importante do que a tag <h3>, e assim por
diante.
Ao construir uma página, não é necessário usar todos os níveis, a não ser quando sua página
for classificada em várias seções.

Vamos ver como essas tags realmente funcionam.

Abra o bloco de notas.

Digite o conteúdo da imagem:

Em seguida, salve na área de trabalho com nome aula3.htm.

Abra o arquivo da área de trabalho.

Veja o resultado ao abrir o arquivo aula3.html.

Note como seu título ficará, caso utilize alguns desses níveis.

Atenção: Quanto maior o número, menor será o tamanho do título.

3.1.1 – Considerações sobre a tag H1

 A tag H1 sempre estará negritada.


 Esta tag, por se tratar de texto, poderá ser formatada por CSS das propriedades de
fonde, box model, borda, layout, entre outras.
 Pode ser utilizada no início.

3.1.2 – Considerações sobre as demais tags

 Essas tags também aparecem negritadas.


 Elas podem ser utilizadas mais de uma vez no decorrer da página.
 Elas também aceitam a formatação por CSS das propriedades de fonte, box model,
borda, layout, entre outros, por se tratar de uma tag de texto.

3.2 – Inserindo Parágrafos

Quando você está desenvolvendo uma página, todas as informações lançadas dentro da tag
<body> e </body> não serão separadas por parágrafos.

Por mais que você pressione a tecla Enter para pular uma linha, ao converter o conteúdo em
html, o navegador entenderá que tudo o que está escrito é somente parte de uma frase.

Para que isso não aconteça, você deverá informar a tag referente a parágrafo, inserindo-a em
seu início e fim.

As tags de parágrafos são: <p> e </p>


Veja melhor como as tags de parágrafos funcionam. Apague o que estiver contido no Bloco de
Notas e digite:

Nopte que a frase “Em 2015 o Curso...” está na linha de baixo.

Em um editor de texto, isso indica um parágrafo, certo?

Mas vamos ver o que ocorre ao abrir o navegador.

Acesse a ferramenta Salvar Como e salve na área de trabalho com o nome aula.htm.

Em seguida, acesse o arquivo htm na área de trabalho e abra.

Veja que a frase ficou somente em um parágrafo.

Retorne ao Bloco de Notas.

Veja na imagem que as tags de parágrafos estão destacadas em determinados lugares do


texto.

Observe esses locais e inclua as tags no seu bloco de notas.

Salve novamente o arquivo.

Acesse-o na área de trabalho e, em seguida, abra.

Agora sim o texto foi dividido em parágrafos.

Muito simples, não é mesmo?

3.3 – Alinhamento do texto

Quando você digita um texto no word, por exemplo, é possível determinar sua disposição na
página, ou seja, do lado esquerdo, centralizado ou do lado direito.

Ao desenvolver uma página da internet, você também poderá fazer uso desse recurso.

Para alinhar o texto, você deverá utilizar a tag do parágrafo com outro recursos dentro dela.
Por exemplo, suponha que você queira alinhar o texto todo à direita.

Ao abrir a tag <p>, você deverá inserir outras informações antes de fechar. Desta forma, ela
ficará assim: <p align=”right”>.

O fechamento da tag será normal </p>.

“right” significa direita.

“left” significa esquerda.

“center” significado centro.

Você utilizará essas palavras para incluir junto à tag. Não se esqueça de antes acrescentar o
atributo “align=”.

Vamos praticar para entender melhor.

No texto que estamos utilizando como exemplo, clique dentro da tag do parágrafo “Contribuir
para o progresso...”, dê um espaço e digite align=”center”.

Clique dentro da tag do parágrafo “ Em 2015 o Curso...”, dê um espaço e digite align =”right”.

Veja como deverá ficar:

Salve o arquivo.

Acesse o arquivo html na área de trabalho e abra.

Veja que o primeiro parágrafo está centralizado e o segundo à direita.

Alinhar o texto na página da internet não tem segredo!

3.4 – Quebra de Linha

Muitas vezes, quando estamos digitando um texto no Bloco de Notas, é necessário dividir o
parágrafo em linhas, para que ele não fique tão grande na página da internet.

Para fazer a quebra dos parágrafos em linhas, podemos utilizar a tag <br />, que ao ser
inserida, desloca o texto que vem logo a seguir para a linha de baixo no momento da
visualização no navegador.

Vamos tentar?
Com o bloco de notas aberto clique na frente da fra “...uma empresa embasada...” e digite

<br / >.

Na sequência, clique na frente da frase “...franqueados e acionistas...” e digite <br />.

Veja como deverá ficar:

Salve o arquivo. Em seguida, abra o arquivo da área de trabalho.

Veja que as frases onde foram inseridas as tags pularam para a próxima linha.

A tag <br /> não precisa ter uma tag de fechamento.

Considerações Finais

Utilize as tags certas e formate seu texto para deixar a página da internet visualmente mais
atrativa. Na próxima aula, iremos ver mais assuntos interessantes.

Até lá!

Exercícios de Fixação

1) Qual a diferença entre as tags <h1> e <h6>?


2) Qual tag pode ser utilizada no início da página da internet?
3) Assinale Verdadeiro ou Falso.
O conjunto de tags de títulos tem seis níveis.
( ) Verdadeiro ( ) Falso

Para quebrar uma linha, pode ser utilizada a tecla “Enter”.


( ) Verdadeiro ( ) Falso

É possível utilizar a tag <h3> sem utilizar a tag <h2>.


( )Verdadeiro ( ) Falso

4) Qual tag não necessita ser inserido um fechamento?


5) Dentro de qual tag é necessário inserir atributos de alinhamento?
AULA 04

4 – Outras formatações de texto e lista

Olá,

Você já conheceu algumas tags usadas para formatar textos, e ainda verá muitas no decorrer
das aulas!

Nesta aula, vamos falar sobre mais algumas que auxiliam no desenvolvimento da página.

4.1 – Negrito, Itálico e Sublinhado

Na aula 2, você escreveu um texto em uma página e inseriu a tag negrito e itálico.

Como agora você já as conhece, vamos dar mais alguma informações referentes a elas e
também aprender como sublinhar o texto.

A tag para negrito é <b>, de bold (negrito, em inglês). Mas você também pode utilizar o par de
tag <strong> e </strong>.

Para colocar em itálico, você pode utilizar o par de tags <i> e </i>.

Para sublinhar, utilize o par de tags <u> e </u>.

Vamos testá-las.

Abra o bloco de notas.

Digite:

<html>

<head>

<title>Conheça mais sobre HTML</title>

</head>

<body>

<h1>Significado de HTML</h1>

<p> <strong>HTML</strong> -<i> HiperText Markup Language</i> - em português


<u>Linguagem de Marcação de Hipertexto</u>. A linguagem HTML é responsável pela criação
de documentos para a web chamados de páginas. Elas são divididas na <i> <u> <b>WWW
(World Wide Web)</b> </u> </i>

</body>
</html>

Salve na área de trabalho com o nome aula4.htm.

Abra o arquivo salvo na área de trabalho.

Veja como ele ficou.

No Bloco de Notas, observe que utilizamos a tag <strong> para negritar a palavra HTML, e a tag
<b> para negritar WWW (World Wide Web).

Observe, também, que foram utilizadas as três tags para negritar, italicizar e sublinhar o final
do texto.

4.2 – Outras formatações

Até agora, você conheceu algumas das tags mais utilizadas durante o desenvolvimento da
página.

Existem outras que não são tão utilizadas, mas que podem ser úteis em algumas partes do
texto. Por exemplo, deixar uma parte do texto com um risco no meio, chamado tachado.

Para isso, éutilizado o par de tag <strike> e </strike>.

Ao utilizar essa tag, o texto ficará assim: linguagem html.

Retorne ao Bloco de Notas. Insira o trecho “...em português...”, dentro da tag <strike> e
</strike>.

Salve o arquivo e, na sequência, visualize-o no navegador.

Veja como ficou:

Sabe aqueles textos de Química que você precisa colocar um número sobrescrito ou subscrito
na fórmula?

No desenvolvimento da página da internet é possível utilizar duas tags que lhe auxiliarão a
fazer isso. São elas:

 “<sup></sup>”: utilizada para alinhar o texto acima do que foi anteriormente escrito.
 “<sub></sub>”: utiliza-se essa tag para inserir o texto abaixo em relação ao que foi
anteriormente escrito.

Veja os exemplos:
4.3 – Pré-Formatações

Ao desenvolver uma página da internet, o navegador, algumas vezes, mudará a forma como as
informações serão codificadas, sendo este o caso da função Enter, que não é aceita por ele.

Mas existe um conjunto de tags que resolve esse problemas: são as chamadas tags para textos
pré-formatados, ou seja, ao utilizá-las o navegador deverá identificar a informação, do mesmo
modo que seu desenvolvimento da linguagem HTML.

As tags que fazem isso são: <pre> e </pre>.

Por exemplo, no Bloco de Notas, digite:

<html>

<head>

<title> Utilizando a pré-formatação</title>

</head>

<body>

<h1>Pré-Formação dos textos</h1>

<pre>

Utilizando essa tag, a formatação do texto ficará da forma que determinamos. A tecla Enter
terá sua função normal de pular para a próxima linha.

</pre>

</body>

</html>

Salve na área de trabalho com o nome aula.htm.

Abra o arquivo da área de trabalho e veja o resultado.

A formatação permaneceu inalterada, conforme digitamos no código.

4.4 – Inserindo Citações


Quando você desenvolve um trabalho científico ou até mesmo uma monografia, obviamente,
terá que citar alguns trechos de livros ou frases de alguma pessoa importante em certos
capítulos.

Ao fazer a citação, você deverá utilizar uma formatação especial e identificar o local de onde a
retirou.

Para criar uma página na internet é a mesma história: você também deverá utilizar
formatações especiais para fazer citações.

No desenvolvimento da página, a formatação ficará por conta do conjunto de tags


<blockquote> e </blockquote>.

Vamos ver como essa tag funciona.

Abra um novo arquivo de Bloco de Notas.

Digite:

<html>

<head>

<title>Utilizando a pré-formatação</title>

</head>

<body>

<h1>Citação</h1>

<blockquote>

<p><i>Os homens deviam ser o que parecem ou, pelo menos, não parecerem o quer não
são.</i></p>

<p><b>William Shakespeare</b></p>

</blockquote>

</body>

</html>

Salve com o nome citação.htm.

Na sequência, abra-o e veja como ficou.


4.5 – Determinando o estilo de fonte

Ao digitar as informações da página da internet, será utilizado, como padrão, somente um


estilo de fonte.

Para diferenciar, ou seja, mudar o estilo da fonte de uma determinada função, você pode
utilizar as tags <font> e </fonte>.

Dentro da tag de abertura do estilo de fonte, é necessário inserir os atributos que


determinarão o seu estilo.

Esses atributos podem ser referentes ao estilo, ao tamanho ou à cor.

Veja o atributo para cada um:

- tipo de fonte – (face)

- tamanho do texto – (size)

- cor do texto – (color)

Para entender melhor, acesse o Bloco de Notas.

Na mesma codificação que utilizamos para citar, vamos inserir uma fonte diferente, uma cor
na fonte e alterar o tamanho dela.

Clique na frente do início da citação e digite: <fonte face=”Lucida Calligraphy” size=”14”


color=”blue”>.

Em seguida, clique no final da citação e insira a tag de fechamento </font>.

Veja como deve ficar:

<html>

<head>

<title>Utilizando a pré-formatação</title>

</head>

<body>

<h1>Citação</h1>

<blockquote.

<p><i><fonjt face=”Lucida Calligraphy” size=”14” color=”blue”>Os homens deviam ser o que


aparecem ou, pelo menos, não parecerem o que não são.</i></p></font>

<p><b>Willia, Shakespeare</b></p>
<blockquote>

</body>

</html>

Salve o arquivo e, na sequência, abra.

Veja como ficou.

Vamos entender o que aconteceu.

Considerações Finais

Assim fica mais fácil de aprender, não é?

Encerramos mais uma aula. É importante memorizar as tags que estamos aprendendo, pois
sã0o as mais utilizadas durante o desenvolvimento da página de internet.

Até a próxima aula!

Exercícios de Fixação

1) Explique a função das tags <pre> e </pre>.


2) Ao utilizar citações na página de Internet qual a tag que deve ser inserida?
3) Cite os atributos para cor da fonte, tamanbho da fonte e estilo da fonte.
4) Ao utilizar a seguinte tag <font face=”Arial” size=”16” color=”yellow”>, como o texto
ficará?
5) Dê as funções das seguintes tags:
A) <b> e </b> = __________________________________________
B) <i> e </i> = ___________________________________________
C) <u> e </u> = __________________________________________
D) <strike> e </strike> = ___________________________________
AULA 05

5 – Listas e Imagens

Olá,

Com o decorrer do curso você vai aprender a estilizar, ainda mais, a sua página de internet.
Hoje vamos falar de listas, e como desenvolvê-las. Você aprenderá, também como trabalhar
com imagens na linguagem HTML.

Boa aula!

5.1 – Listas

Você já foi ao supermercado ou levou, ou viu alguma pessoa com uma lista de compras, certo?

Esta lista mostra os produtos que a pessoa deve pegar no supermercado. Ao desenvolver uma
página de internet, também é possível listar algumas informações que você desejar.

Assim você poderá utilizar as listas ordenadas, as listas não ordenadas e as listas definidas.

Você vai aprender agora como utilizar cada um desses itens.

Acompanhe!

5.1.1 – Listas Ordenadas

A lista ordenada é representada por letras e números.

Para cria-la use as tags <ol> e </ol>. Antes de digitar os itens da lista utilize a tag <li> e ao
término dela digite </li>.

Também é possível utilizar o atributo type para listar por algarismos romanos ou por letras.

Vamos exemplificar para entendermos melhor.

Abra o bloco de notas.

Digite o seguinte comando:

<html>

<head>

<title>Listas</title>

</head>
<body>

<h1>Listas</h1>

<ol>

<li>Computador</li>

<li>Gabinete</li>

<li>Teclado</li>

<li>Mouse</li>

<li>Caixa de som</li>

</ol>

</body>

</html>

Salve na área de trabalho com o nome lista.htm.

Abra o arquivo salvo na área de trabalho.

Veja como ficou:

Retorne ao Bloco de Notas.

No final da tag </ol> pressione Enter e digite:

<h1>Pacote Office</h1>

<ol type=A>

<li>Word</li>

<li>Excel</li>

<li>PowerPoint</li>

</ol>

</body>

</html>
Salve o arquivo e na sequência abra-o.

Veja como a lista ficou ordenada:

Fique Sabendo: O atributo type da lista ordenada aceita os valores: “a”, “A”, “i”, “I”, e “1”.

5.1.2 – Listas Não Ordenadas

A lista não ordenada será indicada por marcadores que listam em forma de discos, círculos e
quadrados.

Para criar esse tipo de lista utilize as tags <ul> e </ul>. Assim como na lista ordenada os itens a
serem listados devem estar entre as tags <li> e </li>.

O atributo Type também é utilizado para mudar a forma de marcação. Vamos ver como
utilizamos essa lista?

Retorne ao Bloco de Notas. Vamos utilizar o mesmo exemplo de página de internet.

Nos locais em que tem a tag <ol> e </ol> apague e coloque <ul> e </ul>.

Na tag <ol type=”A”> troque pela tag <ul type=”circle”>.

Salve o comando.

Abra novamente a página de internet e veja como ficou:

Note que existem dois tipos de marcadores: o primeiro é um círculo com fundo preto e o
segundo não possui o fundo preto.

O primeiro círculo ficou preto, pois não determinamos qual era o marcador a ser utilizado,
deste modo, ele buscou o padrão.

No segundo identificamos pela tag <ul type=”circle”>, assim os marcadores foram inseridos da
maneira que identificamos no comando.

Bem simples, não é?

Fique Sabendo: O atributo Type na lista não ordenada aceita os valores: “disc”, “circle” e
“square”.
5.1.3 – Listas Definidas

Ao utilizar essa lista você poderá incluir uma descrição de cada item.

Para isso utilizamos as tags <DL> e </DL> e dentro do corpo definido por eles, são usadas as
tags <DT> e a <DD>.

No Bloco de Notas, apague os comando que utilizamos e digite os novos comandos a seguir:

<html>

<head>

<title>Listas</title>

</head>

<body>

<h1>Listas</h1>

<dl>

<dt>Windows</dt>

<dd>Sistema Operacional</dd>

<dt>Word</dt>

<dd>Editor de Textos</dd>

<dt>Excel</dt>

<dd>Editor de planilhas</dd>

<dt>PowerPoint</dt>

<dd>Desenvolver apresentações</dd>

<dt>Internet</dt>

<dd>Navegador</dd>

</dl>

</body>

</html>

Salve o arquivo.

Acesse a área de trabalho e abra-o.


Veja como ficou:

Vamos entender o que acabamos de fazer:

Utilizaremos uma parte do comando para explicar o que aconteceu:

Abertura da lista definida <dl>

Item da lista <dt>Windows</dl>

Subitem da lista <dd>Sitema Operacional</dd>

Então:

DT = a identificação do item.

DD = identificação da descrição do item.

5.2 – Linha Horizontal

A linha horizontal é um atributo que insere uma linha para dividir o texto, separando
diferentes tipos de informações.

Para utiliza-la, insira no comando a tag <hr />.

A linha horizontal também tem alguns atributos: Altura (size), largura (width) e alinhamento
(align).

Vamos continuar utilizando o exemplo do último item aprendido, retorne ao bloco de notas.

Clique no final do comando <h1>Listas</h1> e pressione Enter.

Digite: <hr />.

Clique no final do comando <dd>Sistema Operacional</dd> e pressione Enter.

Digite : <hr size=”3” width=”130” />.

Clique no final do comando <dd>Editor de Textos</dd> e pressione Enter.

Digite: <hr />.

Clique no final do comando <dd>Editor de Planilhas</dd> e pressione Enter.

Digite: <hr size=”5”>.

Clique no final do comando <dd>Desenvolver apresentações</dd> e pressione Enter.


Digite: <hr width=”50%” />.

Salve o arquivo.

Acesse a área de trabalho e abra-o.

Veja como ficou:

Note que as linhas foram inseridas de acordo com os dados que colocamos no comando.

Por exemplo, a linha que separa a descrição dop Excel com a do PowerPoint é mais alta, pois
definimos o atributo <hr size=”5” />, que é o tamanho da linha.

Já a linha que separa a palavra lista inserimos a tag sem o atributo.

E a linha que separa a descrição do Windows do Word ficou menor, porque inserimos o
atributo <hr size=”3” width=”130” />, que definia a altura e a largura.

5.3 – Imagens

Você já sabe que quando construímos uma página, utilizamos textos para definir qualquer
informação ou formatação.

No entanto, como será que podemos inserir uma imagem, já que ela não é um texto?

É isso que você vai ver agora.

Antes de tudo você precisa saber que existem vários tipos de extensões de imagens, sendo
que as mais conhecidas e utilizadas são: jpeg, bmp, png e gif. Essas são aceitas pela maioria
dos navegadores.

Então, o primeiro passo é saber se as imagens que você irá trabalhar estão em um destes
formatos.

Para inserir a imagem, também utilizaremos uma tag, a <IMG /> e junto a ela virá o atributo
SRC que identificará o caminho onde a imagem está localizada.

Além desses atributos, podem ser utilizados outros, como:

Align – Utilizado para fazer o alinhamento da figura. Os valores aceitos por esse atributo são
top (topo), middle (meio), bottom (embaixo), left (esquerda) e right (direita).

ALT – Atributo utilizado para colocar uma legenda na imagem inserida.


A legenda aparecerá quando a imagem estiver sendo carregada pelo navegador. Pode ocorrer
de alguns navegadores mostrarem a legenda no momento em que posicionar o mouse na
imagem.

Uma função muito interessante de alguns navegadores é a opção de fala na legenda, mas isso
só ocorre se o navegador possuir sintetizador de voz para deficientes visuais, por exemplo.

Width e Height – Eles especificam, respextivamente, a altura (width) e largura (height).

Border – Determina o tamanho da borda da imagem em pixels.

Hspace – Define uma margem em pixels entre a imagem e os outros elementos da página.

Vamos exemplificar como utilizar a tag junto aos atributos.

Retorne ao Bloco de Notas e apague todo o comando digitado antes.

Digite:

<html>

<head>

<title>Imagem</title>

</head>

<body>

<h1>Inserindo Imagem</h1>

<img src=”Penguins.jpg” align=”top” />Pinguins

</body>

</html>

Salve o arquivo.

Em seguida abra-o e veja como ficou:

Entenda a tag:
Considerações Finais

Concluímos mais uma aula, mas não pense que os comando HTML acaram por aqui. Ainda
temos muito o que aprender. Não deixe de fazer algumas atividades práticas, assim você
memoriza as tags maisutilizadas.

Até a próxima aula!

Exercícios de Fixação

1) Escreva a tag utilizada para criação de listas não ordenadas.


2) Qual o atributo utilizado para as listas?
3) É possível alterar o símbolo de um item de uma lista não ordenada? Caso sim, quais
podem ser utilizados?
4) O que faz o atributo “hspace”?
5) Quais os valores utilizados para o atributo “align”?
AULA 06

6 – Tabelas

Olá,

Na auloa de hoje, vamos aprender a inserir tabelas em uma página HTML.

Os procedimentos são muito simples, por isso é de extrema importância que você tenha
atenção para memorizar as tags utilizadas.

6.1 – Criando Tabelas

As tabelas são utilizadas para organizar as informações.

Nas páginas HTML elas também possuem a mesma funcionalidade.

Utilizando as tabelas, você poderá organizar seu conteúdo sem deixá-lo solto na página, o que,
muitas vezes, dificulta a visualização e o entendimento por parte dos usuários.

Então, vamos saber como fazemos esse procedimento de criação de tabelas.

As tags utilizadas para criação da tabela são as seguintes: <table> e </table>.

Dentro dessas tags utilizaremos outras tags que servirão para criar as linhas e colunas das
tabelas.

Tag de linha: <tr> e </tr>.

Tag para criar cada uma das células dentro da linha: <td> e </td>.

Tag para coluna: <th> e </th>.

Vamos criar uma tabela, portanto, abra o bloco de notas.

Digite:

<html>

<head>

<title>Tabela</title>

</head>

<body>

<h1>Tabela</h1>

<table>
<tr>

<td>Número 1</td>

<td>Número 2</td>

<td>Número 3</td>

</tr>

<tr>

<td>100</td>

<td>301</td>

</tr>

</table>

</body>

</html>

Salve na Área de Trabalho o arquivo com o nome tabelas.htm.

Na sequência, abra-o.

Veja como ficou:

Entenda o comando:

<table> ------------------------- Início de tabela

<tr> ----------------------------- Início da primeira linha

<td>Número 1</td> --------

<td>Número 2</td> -------- Quantidades de células da primeira linha e o seu conteúdo.

<td>Número 3</td> --------

</tr> ---------------------------- Fim da primeira linha

<tr> ----------------------------- Início da segunda linha

<td>100</td> ---------------- Quantidades de células da segunda linha e seu conteúdo


<td>301</td>

</tr> -------------------- Fim da segunda linha

</table> --------------- Fim da tabela

</body>

</html>

Note que o número de células na primeira linha é maior que o da segunda porém, se
necessário, você poderá inserir mais uma célula na segunda linha.

6.2 – Atributos da Tabela

Depois de construir a tabela podemos formata-la. E para fazer esse procedimento utilizaremos
alguns atributos.

O primeiro deles é o de alinhamento, que é o mesmo utilizado nos demais comandos que
vimos nas aula passadas:

Atributos: align

Valores:

- left: alinha a tabela à esquerda.

- right: alinha a tabela à direita.

- center: alinha a tabela ao centro.

Retorne ao Bloco de Notas.

Dentro da tag <table, clique dentro dela, dê um espaço e digite align=”center”.

Deverá ficar assim: <table align=”center”.

Salve o arquivo e abra-o para ver como a tabela ficou.

Neste caso o valor do atributo foi center, ou seja, meio da página.

Outro atributo muito utilizado ao se trabalhar com tabelas nas páginas de internet é o border,
que insere uma espessura na borda da tabela.
Retorne ao Bloco de Notas e apague o atributo que digitamos anteriormente. No lugar dele
digite border=”3”.

Deverá ficar assim: <table border=”3”.

Salve o arquivo e abra-o para ver como a tabela ficou.

Observe que uma borda no tamanho 3 de espessura foi inserida em volta da tabela e suas
células também ficaram com bordas.

Também é possível inserir uma cor de fundo na tabela, através do atributo bgcolor.

Retorne ao Bloco de Notas e apague o atributo que digitamos anteriormente. No lugar dele
digite bgcolor=”yellow”.

Deverá ficar assim: <table bgcolor=”yellow”>.

Salve o arquivo e abra-o para ver como a tabela ficou.

Você viu que podemos inserir e também colorizá-la. Para isso utilizamos o argumento
bordercolcor.

Retorne ao Bloco de Notas e apague o atributo que digitamos anteriormente. No lugar dele
digite bordercolor=”red”.

Deverá ficar assim: <table bordercolor=”yellow”>.

Salve o arquivo e abra-o para ver como a tabela ficou.

Com o atributo cellpadding você definirá o espaço entre a borda de cada célula e seu
conteúdo.

Retorne ao Bloco de Notas e apague o atributo que digitamos anteriormente. No lugar dele
digite cellpadding=”10”>.

Deverá ficar assim: <table cellpadding=”10”>.

Salve o arquivo e abra-o para ver como a tabela ficou.

Note a diferença no espaçamento das células.


Agora, se você utilizar o atributo cellspacing irá definir um espaço entre a margem da tabela e
a margem de cada célula.

Retorne ao Bloco de Notas e apague o atributo que digitamos anteriormente. No lugar dele
digite cellspacing=”20”.

Deverá ficar assim: <table cellspacing=”20”>.

Salve o arquivo e abra-o para ver como a tabela ficou.

O atributo width é utilizado para definir a largura da tabela em pixels ou porcentagem.

Retorne ao Bloco de Notas e apague o atributo que digitamos anteriormente. No lugar dele
digite width=”200px”

Deverá ficar assim: <table width=”200”>.

Salve o arquivo e abra-o para ver como a tabela ficou.

Note que o espaço entre uma célula e outra ficou menor.

Se o atributo width é para definir a largura, então o atributo height irá definir a altura máxima
da tabela, também em pixels ou porcentagem.

Retorne ao Bloco de Notas e apague o atributo que digitamos anteriormente. No lugar dele
digite height=”90”.

Deverá ficar assim: <table height=”90”>.

Salve o arquivo e abra-o para ver como a tabela ficou.

Caso você precisar mesclar as células de uma coluna ou de uma linha, como deverá proceder?

Simples. Utilize os atributos colspan para mesclar as células de uma mesma linha e rowspan
para mesclar as células de uma coluna.
Antes de informar esses atributos é necessário ter a quantidade de células que serão
mescladas, para então montar a tag.

Para exemplificarmos esse atributo, apague o comando e digite esse, a seguir:

<html>

<head>

<title>Tabela</title>

</head>
<body>
<h1>Tabela</h1>
<table border=”2” width=”200px”>
<tr>
<td colspan=”2”>Números</td>
</tr>
<tr>
<td>100</td>
<td>301</td>
</tr>
</body>
</html>

Salve o arquivo e abra-o para ver como ficou.

Retorne o Bloco de Notas, apague esse comando e digite esse:


<html>

<head>
<title>Tabela</title>

</head>

<body>

<h1>Tabela</h1>

<table border=”2” width=”200px”>

<tr>

<td rowspan=”2”>Números</td”>

<td colspan=”2”>Quantidades</td>

</tr>

<tr>

<td>100</td>

<td>301</td>

</tr>

</body>

</html>

Salve o arquivo e abra-o para ver como ficou.

Note que nessa tabela inserimos os dois atributos, assim a coluna números e o item
quantidades ficarem em duas células.

6.3 – Cabeçalho da Tabela

Também é possível inserir um cabeçalho para identificar a tabela.

Para inserir o cabeçalho devemos utilizar as tags <caption> e </caption>.

Retorne ao bloco de notas e clique no final da tag <table border=”2” width=”200px”> pessione
enter e digite <caption><b><font face=”arial” size=”4”>Exemplo de tabela</b></caption>.

Salve o arquivo e abra-o para ver como ficou.


Considerações Finais

Muito bem, concluímos mais uma aula com muitas informações.

Na próxima aula vamos falar de links.

Até lá!

Exercícios de Fixação

1) Qual é a tag utilizada para criação de tabelas?


( ) - <table> e </table>.
( ) - <tab> e </table>.
( ) - <table> e </tab>.
2) Qual é a tag destinada para à criação de linha?
( ) - <th> e </th>.
( ) - <tr> e </tr>.
( ) - <td> e </td>.
3) Cite dois atributos que podem ser utilizados na tag <table> e </table>.
4) O que acontece ao utilizar o atributo bgcolor?
AULA 07

7 – Link

Olá,

Na aula de hoje, você vai aprender a criar links na linguagem HTML.

Os links são palavras, frases ou trechos do texto que armazenam um endereço de uma página
de internet. Esse endereço fica oculto e, ao ser clicado, nos direciona a outra página com as
informações que precisamos.

Vamos saber um pouco mais sobre os links. Boa aula!

7.1 – Diretório Raiz

O primeiro passo para inserção de links na linguagem HTML é ter toda a estrutura do site
pronta.

Todas as páginas que você criar e os arquivos que utilizar deverão estar dentro de uma mesma
pasta, onde você trabalhará no desenvolvimento do site. Esta pasta chama-se Diretório de
Raiz.

O nome da pasta não precisa ser necessariamente diretório raiz, podendo ser nomeada da
maneira que desejar. O importante é que o nome dela seja escrito com letras minúsculas, sem
espaços e sem caracteres especiais ou acentos. Essas mesmas considerações devem ser
utilizadas para todo o arquivo que será utilizado no site.

Dica: Utilize o underline (_) no lugar dos espaços, assim, você conseguirá identificar o nome da
pasta, sem problemas.

7.2 – Criando o Link

Para criar o link você utilizará as tags <a> e </a>.

A tag refere-se à anchor, que significa âncora, e é ela que vai “ligar” as páginas de internet.

Nesta tag também podemos utilizar alguns atributos. São eles: href, name, target.

Vamos conhecer mais detalhadamente cada um deles.

7.2.1 – Atributo HREF

Este atributo é utilizado para indicar o caminho ou a página aonde o usuário será
redirecionado ao clicar no link.
Abra o bloco de notas para exemplificarmos esse atributo.

Digite:

<html>

<head>

<title>Links</title>

</head>

<body>

<h1>Prepara Cursos Profissionalizantes</h1>

<a href=”história.htm”> A história de Vida</a>

,/body>

</html>

Salve com o nome vida.html.

Abra o arquivo salvo.

Observe que em A história de Vida tem um risco abaixo dela e sua cor está diferente.

Isso identifica que existe um link ali.

Clique nele.

Uma nova página foi aberta com as informações do link.

Entenda a tag inserida:

O arquivo historia.htm estava salvo no mesmo local do arquivo que fizemos, no caso, na Área
de Trabalho.

7.2.2 – Atributo name


Utiliza-se esse atributo para criar uma marcação dentro de um arquivo. Assim, o arquivo será
direcionado a essa marcação por meio de um link da mesma página.

Retorne ao Bloco de Notas, clique no final da tag <a href=”historia.htm”>A historia de


Vida</a>, pressione a tecla Enter e digite: <p>Conheça nossos cursos<a
href=”#cursos”>clicando aqui</p></a>

<a name=”cursos”>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<br /><br /><br /><br /><br /><br /><br /><br />

<br /><br /><br /><br /><br />

<p>

<ul>

<li>Operador de Computador</li>

<li>Rotinas Administrativas</li>

<li>Operador de Caixa</li>

<li>Operador de Telemarketing</li>

<li>Personal Cad</li>

</ul>

</p>

</a>

Salve o arquivo.

Abra o arquivo salvo.

Observe que o trecho clicando aqui aparece o link inserido.

Clique nele.

Assim, você irá para o final da página no local em que estão as informações dos cursos.

Entenda o comando:
<p> Conheça nossos cursos<a href=”#cursos”>clicando aqui</p><a>

Criamos um link utilizando o atributo “href” com o valor “#cursos”.

Observe que antes do nome da marcação foi utilizado o caractere “#”. O uso desse caractere
indica que esse link redireciona para outra área da mesma página.

<a name=”cursos”>

Foi criada a marcação utilizando a tag “<a></a>” com o atributo “name” na qual contém o
valor de “cursos”.

7.2.3 – Atributo target

O atributo target é utilizado para mostrar o local em que o local em que o link deve abrir a
página que será indicada no atributo href.

Por meio desse atributo, também é possível utilizar alguns valores, que são:

 _blank – utilizado para abrir página que foi indicada em uma nova janela do
navegador.
 _parent – a página indicada será aberta no mesmo frameset do link.
 _self – utilizado como um valor padrão de qualquer link, já que por meio dele, é
possível abrir a página indicada na mesma janela do link. Esse valor é comumente
excluído da definição de um link.
 _top – a página indicada será aberta na mesma janela onde estava o link, desta forma
qualquer frame que existia antes na janela será excluído.

O valor mais utilizado é o _blank. Os demais valores são mais comuns em páginas framesets,
porém, atualmente, esses tipos de páginas não são tão utilizadas.

7.3 – Links Relativos e Absolutos

Quando utilizamos links para ir para um local na mesma página ou outra página de outro site
utilizamos duas definições:

Links Relativos: utilizados para criar links que irão direcionar para páginas do mesmo site.

Links Absolutos: utilizados para criar links que irão direcionar para página de outro site.

Vamos conhecer mais detalhes deles:


7.3.1 – Links Relativos

Os modelos de atributos que conhecemos anteriormente são estilos de links relativos.

Agora, vamos aprender a criar um link relativo que buscará a informação de uma página de
internet que fica dentro de outra pasta, presente, também no diretório raiz.

Veja que nas tags de listagem inserimos outra tag de link com o atributo href.

Faça o mesmo no seu Bloco de Notas.

<li><a href=”cursos/operador.htm”>Operador de Computador</a></li>

<li><a href=”cursos/rotinas.htm”>Rotinas Administrativas</a></li>

<li><a href=”cursos/operador.htm”>Operador de Computador</a></li>

<li><a href=”cursos/operador.htm”>Operador de Computador</a></li>

<li><a href=”cursos/operador.htm”>Operador de Computador</a></li>

Observe que dentro da tag de link foi inserida a referência “cursos/operador.htm”, onde:

Cursos – é a pasta em que a página está armazenada;

Operador.htm – é o nome da página salva dentro da pasta.

Salve o arquivo e na sequência abra-o.

Note que os cursos já aparecem com o link. Clique no primeiro curso.

Veja que você foi direcionado para outra página onde estão as informações.

Leve a barra de rolagem até o final da página e note que tem uma opção chamada Voltar.

Clique nela.

Você foi direcionado para a página inicial.

Como isso aconteceu?

Quando digitamos os comandos da página com informações do curso de Operador de


Computador, inserimos o seguinte comando no final dela:

<p><a href=”../prepara.htm”>Voltar</a><p>
Sendo que:

<a – abre o link;

href – atributo ao link;

“../prepara.htm” – os dois pontos indicam que a página que vamos acessar está no diretório
superior ao da página com o link. O nome da página que retornará vai ser prepara.htm.

7.3.2 – Links Absolutos

Os links absolutos direcionam o usuário para páginas de outros sites que não estão presentes
no diretório raiz.

Retorne ao Bloco de Notas.

Clique no final da tag </a> e pressione Enter.

Digite:

<p> Saiba mais sobre os demais cursos acessando o <a


href=”http://www.cursosonline.com.br”>site.</a>></p>

Salve o arquivo.

Em seguida abra o arquivo salvo.

Veja que a frase foi inserida e a palavra site está com o link.

Clique na palavra site.

Assim você será direcionado ao site da Cursos.

Considerações Finais

Agora você já está bem preparado para iniciar a criação de várias páginas para um site.

Pratique, criando páginas com diversos assuntos e linchando com uma outra.

Na próxima aula vamos aprender sobre formulários.

Até lá!

Exercícios de Fixação

1) Explique o atributo href.


2) Qual a função de anchor ou âncora?
3) O que é o diretório raiz?
4) Qual link que direciona para uma mesma página do site:
( ) – Links Relativo.
( ) – Link Absoluto.
5) De qual atributo faz parte o valor _parent?
( ) – href.
( ) – name.
( ) – target.
AULA 08

8 – Formulários

Olá,

Espero que o andamento do curso esteja indo bem, já os comandos linguagem HTML são bem
simples e fáceis de serem memorizados. Na aula de hoje, vamos falar sobre formulários e
conhecer o processo para desenvolvê-los nas páginas de internet.

Boa aula!

8.1 – O que são formulários?

Formulários nada mais são do que campos de cadastros. Por meio deles, é possível criar
páginas com campos para os usuários inserirem suas sugestões, opiniões, reclamações e afins.

De um modo geral, os formulários são meios de comunicação entre os desenvolvedores do site


ou a empresa, com o usuário.

Ao criar um formulário em HTML, geralmente, é necessário a inserção de scripts, que


processem os campos que o usuário preencheu. Desta forma, eles armazenam as informações
preenchidas em um banco de dados, podendo também enviar essas informações para um e-
mail que tenha sido previamente cadastrado pelo desenvolvedor do site para recebimento das
informações.

8.2 – Criando os formulários

Como tudo na linguagem HTML é feito por tags, como o formulário não será diferente.

As tags utilizadas para cria-los são: <form> e </form>.

Pode-se também, inserir atributos dentro da tag, porém, você precisa saber que não é possível
inserir uma tag <form> e </form> dentro de uma tag de formulário que já esteja aberta.

Vamos conhecer detalhadamente cada atributo inserido na tag.

Acompanhe!

8.2.1 – Atributos action e method

Para que o formulário criado por você tenha funcionalidade na página de internet, você fará o
uso de dois atributos muito essenciais. São eles:
Atributo action: Esse atributo é responsável por receber o endereço (URL) do script que é o
responsável por fazer o processamento das informações inseridas no formulário.

Atributo method: Esse atributo faz a remessa de informações do site. Nele, é possível inserir
dois valores, que são:

 Get – Ao utilizar esse valor, todas as informações que forem inseridas no formulário
serão enviadas pela URL do site. Pode-se utilizar este valor se o volume de
informações enviadas for pequena, caso contrário, a URL não suportará, pois seu
tamanho máximo será insuficiente, o que poderá resultar em um erro na página e a
consequente perda de informações.
 Post – Ao utilizar esse valor todas as informações serão passadas pela mensagem do
protocolo HTTP. Nele, não há um limite de envio de informações. É aconselhável
utilizar esse valor para formulários com mais de um campo, assim você evitará erros
de página e a eventual perda das informações.

8.2.2 – Input

A tag <input /> é utilizada para criar campos para os usuários inserirem os dados.

Para essa tag, também é possível inserir alguns atributos. São eles:

 Type – receberá o tipo do elemento a ser criado.


 Value – criará um valor padrão para os campos.
 Name – definirá um nome para o campo.
 Size – determinará qual o tamanho do campo quando for do tipo “text”.

Vamos ver como utilizá-los.

8.2.2.1 – Campus de Texto.

Para determinar como um campo ficará utilize o atributo type.

Para criar o campo de texto é necessário que, junto ao atributo type seja inserido o valor text.

Ao utilizar o atributo name o script que processa o formulário conseguirá identificar os campos
que precisarão ser processados.

É importante que os nomes dados aos elementos sejam únicos.

Vamos criar um formulário para você entender melhor:

Abra o bloco de notas.

Digite:
<html>

<head>

<title>Formulários</title>

</head>

<body>

<h1>Formulário de Contato</h1>

<form action=”dados.php” method=”post”>

<p>

Nome: <input type=”text” name=”nome” size=”25”/>

</p>

<p>

Sobrenome<input type=”text” name=”sobrenome” size=”40” />

</p>

</form>

</body>

</html>

Salve na área de trabalho com o arquivo com o nome de formulário.htm.

Abra o arquivo.

Veja como ele ficou:

Entenda:
8.2.2.2 – Campos de Senha

Agora você aprenderá a criar campos de senha.

Para isso, será utilizado o valor password, atribuído ao type.

Quando os usuários digitam os valores campos de senha eles serão substituídos por caracteres
que ocultam o valor digitado, igual os asteriscos na tela dp leitor de cartão.

Retorne ao Bloco de Notas.

Você irá substituir o comando Nome: <input type=”text” name=”nome” size=”25” />, por
Usuário: <input type=”text” name=”nome” size=”25” />

Em seguida, substitua o comando Sobrenome <input type=”text” name=”sobrenome”


size=”40” /> por Senha <input type=”password” name=”senha” size=”25” />.

Salve o arquivo.

Abra-o em seguida e veja como ficou.

Digite algo no campo “senha” e veja que a digitação não aparece, pois é substituída pelos
caracteres de pontos.

8.2.2.3 – Campos de Validação

Pode acontecer que, em alguns sites, você note uma informação parecida com essa: Li e aceito
os termos, e ao lado um pequeno quadrado ou círculo para marcar a opção.

Esse quadrado ou círculo chama-se Validação e para passar para a próxima página é
necessário marca-lo.

Agora, você aprenderá como inserir esses campos.

Para criar o campo de validação, você deve atribuir o valor checkbox ao atributo type.

Retorne ao Bloco de Notas.

No final da última tag que fecha o último parágrafo, pressione Enter.

Na sequência, digite:

<p>

<input type=”checkbox” name=”aceite” site=”25” />Ativar Proteção de Senha</p>

Salve o arquivo.

Abra-o em seguida e veja como ficou.


8.2.2.4 – Botões de Escolha

Os botões de escolha são utilizados para inserir várias opções no formulário para que o usuário
responda somente uma.

Quando somente um dos botões pode ser selecionado, o atributo name precisa ser igual para
todas as alternativas.

Retorne ao Bloco de Notas para testarmos esse procedimento.

Apague o comando apresentado a seguir:

Usuário: <input type=”text” name=”nome” size=”25” />

</p>

<p>

Senha <input type=”password” name=”senha” size=”25” />

</p>

<p>

<input type=”checkbox” name=”aceite” size=”25” /> Ativar Proteção de Senha

No lugar dele digite:

Estado Civil /<br>

<input type=”radio”name=”estado”value=”solteiro” />Solteiro<br />

<input type=”radio”name=”estado”value=”casado” />Casado<br />

<input type=”radio”name=”estado”value=”divorciado” />Divorciado<br />

<input type=”radio”name=”estado”value=”viuvo” /> Viuvo <br />

Salve o arquivo.

Abra-o em seguida e veja como ficou.


8.2.2.5 – Botões de checked

O atributo checked é utilizado para fzer com que os elementos do formulário sejam checados
antes de qualquer outra ação que o usuário for fazer.

Esse atributo pode ser utilizado nas caixas de validação ou nos botões de escolha.

Retorne ao bloco de notas.

No comando da opção Solteiro inclua, no final da tag, o atributo checked.

Veja como tem que ficar: <input type=”radio” name=”estado” value=”solteiro” checked
/>Solteiro<br />.

Clique no final da última tag que fecha o último parágrafo. Pressione Enter.

Digite:

<input type=”checkbox” name=”aceito” checked />Ok

Salve o arquivo e na sequência abra-o.

Veja como ficou.

8.2.2.6 – Botões Submit e Reset

O botão Submit é o responsável por enviar a informação para o local onde ela ficará
armazenada. Local, este, inserido no atributo action.

Já o botão Reset limpa as informações que o usuário digitou ou selecionou.

Clique no final da última tag que fecha o último parágrafo.

Pressione Enter.

Digite:

<p>

<input type=”submit” value=”Enviar” />

<input type=”reset” value=”Cancelar” />

</p>

Salve o arquivo e na sequência abra-o.

Veja como ficou.


8.3 – Tag textarea

Em alguns formulários será necessário que tenha um campo maior para que o usuário digite os
textos e as mensagens que deseja enviar.

Para inserir esse campo você utilizará a tag <textarea> e </textarea>.

O tamanho do campo é definido utilizando os atributos rows (linhas) e cols (colunas).

Ao inserir a tag, é necessário incluir, também, o atributo name.

Retorne ao Bloco de Notas.

Apague as informações:

<p>

Estado Civil<br />

<input type=”radio” name=”estado” value=”solteiro” checked />Solteiro<br />

<input type=”radio” name=”estado” value=”casado” checked />Casado<br />

<input type=”radio” name=”estado” value=”divorciado” checked />Divorciado<br />

<input type=”radio” name=”estado” value=”viuvo” checked />Viúvo<br />

</p>

<p>

<input type=”checkbox” name=”aceito” checked />Ok

</p>

No lugar delas digite:

<p>

<textarea name”mensagem” rows=”4” cols=”20”> Digite sua mensagem aqui.</textarea>

</p>

Salve o arquivo e na sequência abra-o.


Veja como ficou:

8.4 – Tag select

A tag <select> e </select> é utilizada para inserir várias informações em um único campo.

Por meio dela, é possível criar dois tipos de seletores: único ou múltiplo.

Ao inserir a tag, é necessário inserir outra para criar as opções dos seletores. Essa tag é a
<option> e </option>.

Vamos conhecer um pouco mais sobre os tipos de seletores.

8.4.1 – Seletor único

Ao acessar o formulário com seletor único, você vai ver somente uma das opções, mas
clicando sobre ele, as demais opções focarão visíveis.

Retorne ao Bloco de Notas.

Apague as seguintes informações:

<p>

<textarea name”mensagem” rows=”4” cols=”20”> Digite sua mensagem aqui.</textarea>

</p>

No lugar dela digite:

<p>

Estado Civil

<select name”estado”>

<option value=”solteiro”>Solteiro</option>

<option value=”casado”>Casado</option>

<option value=”divorciado”>Divorciado</option>

<option value=”viuvo”>Viúvo</option>
</select>

<p>

<input type=”submit” value=”Enviar” />

<input type=”reset” value=”Cancelar” />

</p>

Salve o arquivo e na sequência abra-o.

Veja como ficou.

Caso clique na caixa de opções as demais serão exibidas.

8.4.2 – Seletor Múltiplo

Ao acessar o formulário no seletor único, você vai notar que ele exibirá apenas uma respota.
Para ver as demais, é necessário clicar na caixa de resposta.

Já o seletor múltiplo mostra de uma única vez todas as opções, não sendo preciso abrir caixa.

Retorne ao Bloco de Notas.

Iremos agora fazer uma única alteração. Na tag <select> name”estado”> inclua antes de name
o atributo multiple.

Deverá ficar assim: <select multiple name”estado”>.

Salve o arquivo e na sequência abra-o.

Veja como ficou.

Considerações Finais

Criar um formulário exige apenas atenção aos comandos que serão inseridos na linguagem
html.
O processo é bem simples e facilita bastante a comunicação entre usuário e desenvolvedor do
site ou empresa.

Até a próxima aula!

Exercícios de Fixação

1) Explique o atributo checked.


2) Informe o atributo type inserido na tag input para utilizar o botão reset.
3) Qual tipo de seletor é preciso que se clique para mostrar as demais opções?
4) Qual a tag utilizada para inserir uma caixa com linhas e colunas?
5) Qual o atributo que armazena as informações enviadas pelo formulário?
AULA 09

9 – Metas e Estilos CSS

Olá,

Nesta aula, vamos falar sobre metas e folhas e estilos, também conhecidas como CSS.

Boa aula!

9.1 – Metas

Utiliza-se a tag meta para que os navegadores de internet busquem informações sobre a
página em que você está trabalhando.

A tag meta também é conhecida como etiqueta e é muito utilizada por sites como Google, por
exemplo. Sabe por quê?

Porque por meio dessas etiquetas é possível indexar as páginas às pesquisas quando realizadas
por algum usuário. Desta forma, o assunto que o usuário pesquisar e que tiver referência à
página criada será exibido para conferência.

Também é possível localizar etiquetas que armazenam informações técnicas sobre as


características das páginas HTML criadas.

Ao utilizar a tag meta, é necessário inseri-la dentro da tag head.

Por exemplo:

<meta http-equiv=”Content-Type” contente=”text/html; charset=utf-8”>

<meta name=”generator” contente=”bloco de notas”>

<meta name=”author” contente=”Cursos Online”>

<meta name=”description” contente=”Curso de HTML”>

<meta name=”keywords” contente=”HTML1, HTML 2, HTML 3”>

Entenda:

Na primeira linha foi inserida uma etiqueta que será responsável por informar ao navegador
qual a codificação do arquivo HTML que ele interpretará.

No exemplo utilizado, a codificação é UTF-8.


Na linha dois é informado o programa onde foi criada a página HTML.

No caso o Bloco de Notas.

Na terceira linha foi definido o autor da página, no caso, Curso Online.

Na quarta linha foi identificado a descrição do conteúdo da página. Aqui, é a localização do


texto que informará os elementos presentes na página.

Para isso, foi definida a meta que recebe o valor “description” vinculado ao atributo name.

E, por fim, a última página que contém as palavras-chave do assunto da página.

Cuidados

Tome muito cuidado ao definir a quantidade de palavras-chave e o tamanho do texto da


descrição, pois esses elementos devem resumir as informações tratadas na página. Com uma
quantidade grande de palavras-chave e uma descrição extensa, os sites de buscas veem isso
como um elemento ruim para a página, não mostrando, assim, seu site nas primeiras posições
de busca.

9.2 – Introdução ao CSS

A tecnologia CSS (Cascading Style Sheet), ou também chamada de Folhas de Estilo em Cascata,
foi criada para juntar as definições de layout e deixa-las em outra parte que não seja junto ao
código de qualquer página HTML.

Essa tecnologia também pode ser utilizada para definir rapidamente estilos aplicados a alguns
elementos iguais da página da internet, o que ajudará nas modificações que podem ser feitas
futuramente.

Exemplo: Suponha que você queira alterar o estilo de fonte de uma página da internet. Se
fizéssemos da forma normal, seria necessário digitar a tag <font> e </font> para cada um dos
parágrafos. No entanto, utilizando a CSS, podemos definir o estilo de fonte e alterar de uma
única vez para todo o conteúdo da página.

Podemos utilizar duas formas para a CSS. São elas:

 Definindo as tags <style> e </style> dentro das tags <head> e </head>, incluindo no
mesmo arquivo .html os estilos da página.
 Utilizar um link .css, que seja externo. Este pode ser reaproveitado em todas as
páginas do site.

Veja esse exemplo:

<html>

<head>
<title> CSS </title>

<style type=”text/css” media=”screen”>

P{

color: yellow;

</style>

</head>

<body>

<p>

Exemplos de CSS

</p>

</body>

</html>

Entendendo:

Na quinta linha do comando, digitamos <style type=”text/css” media=”screen”>. Primeiro, note


que este comando está dentro da tag <head>.

Na tag <style> utilizamos o atributo type, que recebeu um valor: text/class. Este valor indica
que o conteúdo da tag será uma definição CSS.

Foi inserido, ainda, o atributo media que recebe outros valores os quais indicarão qual será o
dispositivo que o estilo escrito na tag corresponderá. Para o exemplo foi utilizado screen, que é
o navegador de internet.

Agora veja esse comando:

p{

color: yellow;

Foi criada uyma definição de estilo para o parágrafo, em que a cor definida foi o amarelo.

Ao inserir a CSS você pode inserir um atributo em todas as tags HTML; esse atributo se chama
class. O valor atribuído a ele será utilizado para especificar quais elementos que receberão o
estilo desejado.
Para entendermos melhor, vamos praticar.

Abra o Bloco de Notas.

Digite:

<html>

<head>

<title> Curso HTML </title>

<style type=”text/css” media=”screen”>

.diferente {

color: blue;

</style>

</head>

<p>

Aprendendo HTML

</p>

<p class=”diferente”>

Utilizando o HTML

</p>

<p>

Tags HTML

</p>

<p class=”diferente”>

Utilizando as tags

</p>

Finalizando o HTML

</p>

</body>
</html>

Salve na área de trabalho com o nome aula.htm.

Abra o arquivo salvo.

Veja como ficou:

Quando você utilizou o valor diferente ao atributo class dentro da tag <p> foi possível,
por meio do CSS, colocar a cor azul somente nos parágrafos desejados. Os parágrafos
que não foram atribuídos a class não estão com estilos.

Além de definir cor, você também pode definir camadas, links e títulos utilizando a CSS.

Considerações Finais

Você viu nessa penúltima aula a importância da utilização da tag meta e as folhas de
estilos em cascata.

Estude as lições aprendidas, pois na próxima aula você irá fazer uma avaliação final do
curso.

Até lá!

Exercícios de Fixação

1) Explique a tag meta.


2) As etiquetas devem vir dentro de qual outra tag?
3) O que significa CSS?
4) Qual a tag utilizada para definição de folhas de estilos?
5) Por que não devemos abusar do uso de palavras-chave na tag meta?
AULA 10

10 – Avaliação Final

Olá,

Esta é a última aula do curso de HTML e você fará uma avaliação final com todos os assuntos
aprendidos até agora.

Muita atenção às questões!

Boa sote!

Exercício de Fixação

1) Primeiramente, você deverá definir o seu Diretório Raiz. Portanto, crie uma pasta na
área de trabalho com o nome projeto_site.
2) Você criará páginas para um site de Curiosidades. Este site deverá ter cinco páginas,
cada uma com um assunto:
1° Página – Inicial
2° Página – Curiosidades do mundo animal
3° Página – Curiosidades do ser humano
4° Página – Curiosidades sobre marcas
5° Página – Opinião
3) A página Inicial deverá ter um texto de abertura do site e os links para acessar as suas
demais páginas.
4) As demais páginas deverão conter informações referentes a cada assunto. Você poderá
retirar as informações da internet.
5) Formate as páginas de tal forma que chame a atenção dos usuários.
6) Na quinta página, crie um formulário para os usuários enviarem suas opiniões sobre o
site.

Ao concluir todos os passos, solicite a presença do seu instrutor para que ele avalie, o seu
projeto.
Referências Bibliográficas

Sites

http://cursosonlinegratis.com.br/apostilas/apostila-de-html-gratis-aprenda-a-programar-
em-html

http://www.oficinadanet.com.br/apostilas/225/html

http://ww.maujor.com/w3ctuto/firstcss.html

http://www.linhadecodigo.com.br/artigo/81/html-basico.aspx

Você também pode gostar