E-Book HTML
E-Book HTML
SUMÁRIO
Introdução.............................................................................. 05
Aula 01....................................................................................06
Funcionamento da Internet.....................................................06
Protocolos................................................................................06
Servidor...................................................................................08
Praticando.............................................................................11
Exercícios de Fixação.............................................................13
Aula 02 15
Conhecendo as tags
Praticando
Exercícios de Fixação
Aula 03
Inserindo Parágrafos
Alinhamento do Texto
Quebra de Linha
Exercícios de Fixação
Aula 04
Outras Formatações
Pré-Formatações
Inserindo Citações
Exercícios de Fixação
Aula 05
Listas e Imagens
Listas
Listas 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
Links Absolutos
Exercícios de Fixação
Aula 08
Formulários
Criando os Formulários
Input
Campos do Texto
Campos de Senha
Campos de Validação
Botões de Escolha
Botões de Checked
Tag Textarea
Tag Select
Seletor Único
Seletor Múltiplo
Exercícios de Fixação
Aula 09
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!
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.
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.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.
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.
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.
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.
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.
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:
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.
Um documento HTML pode ser dividido em várias seções, cada uma contendo um tipo
específico de informação.
Estrutura Básica:
Acesse o menu Iniciar, clique em Todos os Programas, abra a pasta Acessórios e clique em
Bloco de Notas.
<html>
<head>
</head>
</html>
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).
Nesse caso, digite aula1.htm no campo Nome do Arquivo. Salve na área de trabalho.
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.
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á
Anotações:
AULA 02
2 – Conhecendo as Tags
Olá,
Agora, iremos nos aprofundar mais nesse assunto, pois a tag é um elemento fundamental no
desenvolvimento da linguagem HTML.
Boa aula!
Você viu que as estruturas básicas do HTML estão sempre entre os sinais < (menor) e >
(maior).
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.
Atenção:
As tags de abertura e encerramento podem ser utilizadas juntas, ou seja, na mesma linha ou
no mesmo contexto.
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.
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>.
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.
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.
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:
Considerações Finais
É bem simples trabalhar com a linguagem HTML; é só conhecermos e sabermos utilizar as tags
devidamente.
Exercícios de Fixação
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.
Boa aula!
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.
Existem seis níveis de título: o primeiro é o <h1>, que é o mais alto, indicando o título mais
importante da página.
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.
Note como seu título ficará, caso utilize alguns desses níveis.
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.
Acesse a ferramenta Salvar Como e salve na área de trabalho com o nome aula.htm.
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”>.
Você utilizará essas palavras para incluir junto à tag. Não se esqueça de antes acrescentar o
atributo “align=”.
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”.
Salve o arquivo.
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 / >.
Veja que as frases onde foram inseridas as tags pularam para a próxima linha.
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
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.
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>.
Vamos testá-las.
Digite:
<html>
<head>
</head>
<body>
<h1>Significado de HTML</h1>
</body>
</html>
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.
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.
Retorne ao Bloco de Notas. Insira o trecho “...em português...”, dentro da tag <strike> e
</strike>.
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.
<html>
<head>
</head>
<body>
<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>
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.
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>
Para diferenciar, ou seja, mudar o estilo da fonte de uma determinada função, você pode
utilizar as tags <font> e </fonte>.
Na mesma codificação que utilizamos para citar, vamos inserir uma fonte diferente, uma cor
na fonte e alterar o tamanho dela.
<html>
<head>
<title>Utilizando a pré-formatação</title>
</head>
<body>
<h1>Citação</h1>
<blockquote.
<p><b>Willia, Shakespeare</b></p>
<blockquote>
</body>
</html>
Considerações Finais
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.
Exercícios de Fixação
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.
Acompanhe!
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.
<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>
<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.
Fique Sabendo: O atributo type da lista ordenada aceita os valores: “a”, “A”, “i”, “I”, e “1”.
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?
Nos locais em que tem a tag <ol> e </ol> apague e coloque <ul> e </ul>.
Salve o comando.
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.
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.
Então:
DT = a identificação do item.
A linha horizontal é um atributo que insere uma linha para dividir o texto, separando
diferentes tipos de informações.
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.
Salve o arquivo.
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.
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?
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.
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).
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.
Hspace – Define uma margem em pixels entre a imagem e os outros elementos da página.
Digite:
<html>
<head>
<title>Imagem</title>
</head>
<body>
<h1>Inserindo Imagem</h1>
</body>
</html>
Salve o arquivo.
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.
Exercícios de Fixação
6 – Tabelas
Olá,
Os procedimentos são muito simples, por isso é de extrema importância que você tenha
atenção para memorizar as tags utilizadas.
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.
Dentro dessas tags utilizaremos outras tags que servirão para criar as linhas e colunas das
tabelas.
Tag para criar cada uma das células dentro da linha: <td> e </td>.
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>
Na sequência, abra-o.
Entenda o comando:
</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.
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:
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”.
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”.
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”.
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”>.
Retorne ao Bloco de Notas e apague o atributo que digitamos anteriormente. No lugar dele
digite cellspacing=”20”.
Retorne ao Bloco de Notas e apague o atributo que digitamos anteriormente. No lugar dele
digite width=”200px”
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”.
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.
<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>
<head>
<title>Tabela</title>
</head>
<body>
<h1>Tabela</h1>
<tr>
<td rowspan=”2”>Números</td”>
<td colspan=”2”>Quantidades</td>
</tr>
<tr>
<td>100</td>
<td>301</td>
</tr>
</body>
</html>
Note que nessa tabela inserimos os dois atributos, assim a coluna números e o item
quantidades ficarem em duas células.
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>.
Até lá!
Exercícios de Fixação
7 – Link
Olá,
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.
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.
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.
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>
,/body>
</html>
Observe que em A história de Vida tem um risco abaixo dela e sua cor está diferente.
Clique nele.
O arquivo historia.htm estava salvo no mesmo local do arquivo que fizemos, no caso, na Área
de Trabalho.
<a name=”cursos”>
<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.
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>
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”.
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.
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.
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.
Observe que dentro da tag de link foi inserida a referência “cursos/operador.htm”, onde:
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.
<p><a href=”../prepara.htm”>Voltar</a><p>
Sendo que:
“../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.
Os links absolutos direcionam o usuário para páginas de outros sites que não estão presentes
no diretório raiz.
Digite:
Salve o arquivo.
Veja que a frase foi inserida e a palavra site está com o link.
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.
Até lá!
Exercícios de Fixação
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!
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.
Como tudo na linguagem HTML é feito por tags, como o formulário não será diferente.
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.
Acompanhe!
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:
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.
Digite:
<html>
<head>
<title>Formulários</title>
</head>
<body>
<h1>Formulário de Contato</h1>
<p>
</p>
<p>
</p>
</form>
</body>
</html>
Abra o arquivo.
Entenda:
8.2.2.2 – Campos de Senha
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.
Você irá substituir o comando Nome: <input type=”text” name=”nome” size=”25” />, por
Usuário: <input type=”text” name=”nome” size=”25” />
Salve o arquivo.
Digite algo no campo “senha” e veja que a digitação não aparece, pois é substituída pelos
caracteres de pontos.
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.
Para criar o campo de validação, você deve atribuir o valor checkbox ao atributo type.
Na sequência, digite:
<p>
Salve o arquivo.
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.
</p>
<p>
</p>
<p>
Salve o arquivo.
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.
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:
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.
Pressione Enter.
Digite:
<p>
</p>
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.
Apague as informações:
<p>
</p>
<p>
</p>
<p>
</p>
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>.
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.
<p>
</p>
<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>
</p>
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.
Iremos agora fazer uma única alteração. Na tag <select> name”estado”> inclua antes de name
o atributo multiple.
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.
Exercícios de Fixação
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.
Por exemplo:
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á.
Para isso, foi definida a meta que recebe o valor “description” vinculado ao atributo name.
Cuidados
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.
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.
<html>
<head>
<title> CSS </title>
P{
color: yellow;
</style>
</head>
<body>
<p>
Exemplos de CSS
</p>
</body>
</html>
Entendendo:
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.
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.
Digite:
<html>
<head>
.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>
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
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.
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