HTML Basico

HTML
Básico
Senac – LAPA TITO

Docente Jeferson Ganda
Curso HTML Básico
Sumário
O que é INTERNET? ................................................................................................................. 4
O que é www?............................................................................................................................. 4
O que são servidores WEB....................................................................................................... 4
O que é INTRANET? ................................................................................................................. 5
O que é home page? ................................................................................................................. 5
O que são protocolos?............................................................................................................... 5
O que é uma URL? .................................................................................................................... 5
O que é linguagem de marcação? ........................................................................................... 6
Partes de um documento HTML .............................................................................................. 6
TAGs e seus “fechamentos” ..................................................................................................... 7
Outras TAGs (essas não precisam ser fechadas) ............................................................ 7
Codificação de caracteres......................................................................................................... 8
Importante ................................................................................................................................ 8
Visualizando a página WEB.................................................................................................. 9
Vamos Treinar?? ...................................................................................................................... 10
Exercício 01 ........................................................................................................................... 10
Inserir alguns efeitos para destacar TEXTO ........................................................................ 10
Fonte .......................................................................................................................................... 12
Vamos a alguns exemplos: ................................................................................................. 12
Cor da Fonte ............................................................................................................................. 13
Saiba mais... .......................................................................................................................... 14
Quebra de linha .................................................................................................................... 16
Inserindo linhas Horizontais .................................................................................................... 17
Criando subtítulos..................................................................................................................... 17
Adicionando comentários ao código HTML.......................................................................... 18
Vamos Treinar? ........................................................................................................................ 18
Exercício 02 ........................................................................................................................... 18
Listas (Tipos e Funções) ......................................................................................................... 20
Criando listas ordenadas..................................................................................................... 20
Criando lista não numeradas .............................................................................................. 21
Lista intercalada .................................................................................................................... 21
Personalizando listas ........................................................................................................... 22
Vamos Treinar? ........................................................................................................................ 22
Exercício 03 ........................................................................................................................... 22
Inserindo imagens .................................................................................................................... 23
Jeferson Ganda www.jganda.com.br Senac LAPA TITO - Página - 1

Curso HTML Básico
Usando o atributo de align .................................................................................................. 24

Atributo alt .............................................................................................................................. 25
Vamos Treinar? ........................................................................................................................ 26
Exercício 04 ........................................................................................................................... 26
O que são links ......................................................................................................................... 27
Usando a tag anchor ............................................................................................................ 27
Criando links para uma mesma página ou seção ........................................................... 28
Criando links com imagens ................................................................................................. 30
Cores em links ...................................................................................................................... 30
Vamos Treinar? ........................................................................................................................ 31
Exercício 05 ........................................................................................................................... 31
Metatags .................................................................................................................................... 32
Exemplos de metatags: ....................................................................................................... 32
Outra metatag importante ................................................................................................... 32
Tabelas....................................................................................................................................... 33
Veja um exemplo .................................................................................................................. 34
Formulários – Forms ................................................................................................................ 35
Como inserir um formulário HTML ......................................................................................... 35
Os métodos GET e POST .......................................................................................................... 35
O método GET ......................................................................................................................... 35
O método POST ....................................................................................................................... 36
Elementos de formulário HTML .............................................................................................. 36
A tag <input> ........................................................................................................................... 37
Os tipos de campos <input> .................................................................................................... 37
<input type=”checkbox”>........................................................................................................ 38
<input type=”color”>............................................................................................................... 39
<input type=”date”> ............................................................................................................... 39
<input type=”email”> .............................................................................................................. 40
<input type=”image”> ............................................................................................................. 40
<input type=”password”> ....................................................................................................... 41
<input type=”radio”> .............................................................................................................. 41
Exemplo de um Select ............................................................................................................. 42
<input type=”range”>.............................................................................................................. 42
<input type=”reset”>............................................................................................................... 42
<input type=”submit”>............................................................................................................ 43
<input type=”tel”>................................................................................................................... 43

Curso HTML Básico
<input type=”text”> ................................................................................................................ 43

A tag <textarea> ...................................................................................................................... 44
Criando um formulário HTML ..................................................................................................... 44
Código HTML do nosso formulário.......................................................................................... 45
O que é o CSS?............................................................................................................................. 47
Exemplo ............................................................................................................................. 47
O seletor de id CSS ............................................................................................................. 47
Exemplo de Uso de CSS ........................................................................................................... 48
Exemplo com ID....................................................................................................................... 49
O seletor de classe CSS ..................................................................................................... 49
Exemplo com class .................................................................................................................. 49
Outro Exemplo com class ........................................................................................................ 51
E mais outro Exemplo com class ............................................................................................. 51
O seletor universal CSS ................................................................................................................ 53
Exemplo seletor universal ....................................................................................................... 53
O seletor de agrupamento CSS ................................................................................................... 54
Exemplo seletor de agrupamento ........................................................................................... 54
CSS externo ................................................................................................................................. 55
Exemplo css externo.................................................................................................................... 55
Aqui está a aparência do arquivo "meu-estilo.css": ............................................................... 56
"meu-estilo.css" ................................................................................................................ 56
Atividade ..................................................................................................................................... 56
Pesquisa e testes ..................................................................................................................... 56
Referencias .................................................................................................................................. 57

Curso HTML Básico
O que é INTERNET?
A Internet é um sistema global de redes de computadores interligadas que
utilizam um conjunto próprio de protocolos (Internet Protocol Suite ou TCP/IP)
com o propósito de servir progressivamente usuários no mundo inteiro.
O que é www?
A World Wide Web (em inglês: WWW, A Web) designa um sistema de
documentos em hipermídia (ou hipermédia) que são interligados e executados
na Internet.
Os documentos podem estar na forma de vídeos, sons, hipertextos e imagens.
Para consultar a informação, pode-se usar um programa de computador
chamado navegador (como Internet Explorer, Google Chrome, Mozilla
Firefox, Microsoft Edge, Opera, etc.), para descarregar informações
(chamadas "documentos" ou "páginas") de servidores web (ou "sítios") e mostrá-
los na tela do usuário. O usuário (utilizador) pode então seguir as hiperligações
na página para outros documentos ou mesmo enviar informações de volta para
o servidor para interagir com ele. O ato de seguir hiperligações é, comumente,
chamado "navegar" ou "surfar" na Web.
O que são servidores WEB

São computadores robustos com programas que processam pedidos recebidos
dos navegadores.

Curso HTML Básico
O que é INTRANET?
A intranet é uma rede de computadores semelhante à internet, mas de uso
exclusivo de uma determinada organização. Por isso, somente os computadores
daquela empresa podem acessá-la.
Apesar do uso interno, a intranet também permite que, computadores de uma
filial conectados à internet por meio de uma senha, tenham acesso a conteúdo
que estejam na matriz. Ou seja, essa tecnologia cria um canal de comunicação
direto entre a empresa “mãe”, seus funcionários/colaboradores e as filiais.
O que é home page?

É lugar em que “reside” ou está localizado o conteúdo inicial, a apresentação, a
fechada ou a primeira coisa que se vê no site quando acesso.
De forma simples, é a primeira página que o visitante tem acesso, quando digita
o domínio no navegador.
O que são protocolos?

São um conjunto de regras para a comunicação em rede. Els determinam como
computadores se comunicam na rede, segue alguns exemplos:
HTTP  Hyper Text Transfer Protocol (http) é o protocolo usado pelos
servidores web para transmitir documentos HTML pela internet / intranet.
FTP File transfer Protocol (ftp) é utilizado para transmitir arquivos, a interface
gráfica não é amigável como o http.
TCP Transfer Control Protocol (TCP) é um conjunto de protocolos para a
transmissão de informação pela web, tem a função de verificar se os dados são
transferidos de forma correta, na sequência apropriada e sem erros.
IP  Internet Procolol (IP) é um protocolo de endereçamento, que fornece o
endereço dos computadores na rede.
O que é uma URL?

O termo URL é a abreviação de Uniform Resource Locator, ou Localizador
Uniforme de Recursos. Significa endereço web, ou seja, o texto que você digita
na barra de do navegador para acessar uma determinada página ou serviço.

Curso HTML Básico
O que é linguagem de marcação?

HTML (Linguagem de Marcação de HiperTexto) é o bloco de construção mais
básico da web. Define o significado e a estrutura do conteúdo da web.
O HTML usa "Marcação" para anotar texto, imagem e outros conteúdos para
exibição em um navegador da Web. A marcação HTML inclui "elementos"
especiais conhecidos como TAGs, conheça algumas delas:
<head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>,
<span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>,
<nav>, <output>, <progress>, <video>, <ul>, <ol>, <li> e muitos outros.
Partes de um documento HTML

Curso HTML Básico
TAGs e seus “fechamentos”
Outras TAGs (essas não precisam ser fechadas)

Curso HTML Básico
Veja como fica a execução do código acima com o <BR>
Codificação de caracteres
Codificação de caracteres é o mecanismo que armazena os símbolos em forma
binária no computador, possibilitando a conversão de um símbolo em código e
um código em símbolo. A codificação UTF-8 é a recomendação atual para
codificação na web por ser amplamente suportada em navegadores e editores
de código, além de ser compatível com praticamente todos os idiomas do mundo.
Esta codificação utiliza um número variável de bytes para representar símbolos,
podendo usar de 1 a 4 bytes.
Importante

Curso HTML Básico
Visualizando a página WEB

Curso HTML Básico
Vamos Treinar??
Exercício 01
Digite o código abaixo em um BLOCO DE NOTAS e salve como exerc1.html
Inserir alguns efeitos para destacar TEXTO

Curso HTML Básico
Para destacar um texto, além de efeitos, também é possível alterar o

alinhamento da linha ou parágrafo, veja os alinhamentos disponíveis:

Curso HTML Básico
Fonte
Você deve ter observado, que independente da fonte na qual o código HTML é
digitado, a visualização da página web é sempre com a mesma fonte, Times
New Roman. Pois é, essa é a fonte padrão. Caso deseje utilizar outra fonte,
alterar o tamanho ou ainda a cor, será preciso fazer uso da tag. Esta tag
normalmente vem acompanhada dos atributos face, size e color. Eles servem
para alterar a fonte, o tamanho e a cor, respectivamente.
Vamos a alguns exemplos:

Curso HTML Básico
Cor da Fonte
a sintaxe fica assim:

<font color=”cor-que-deseja”>
Observação: a cor pode ser definida pelo nome ou pelo código hexadecimal, os
nomes estão restritos a imagem abaixo:

Curso HTML Básico
Saiba mais...

Curso HTML Básico
PS: Você pode encontrar

facilmente na Internet os
códigos de cores em
hexadecimal para uso em
suas páginas, segue alguns
códigos para testes.

Curso HTML Básico
Quebra de linha
Por padrão, os navegadores encaixam automaticamente o texto da página web
de acordo com o tamanho da janela, caso queira quebrar o texto independente
da largura da janela do navegador, pode-se utilizar a tag <p> </p> (paragrafo)
ou a tag <br> (break)

Curso HTML Básico
Inserindo linhas Horizontais

Para criar uma linha horizontal, use a tag Horizontal Ruling <hr>, veja exemplo:
Criando subtítulos
Vamos adicionar títulos e subtítulos em uma página web. A tag Heading <hx>
onde x é um número que representa o nível do tópico. Tenha em mente que é
possível criar até 6 subtítulos. O uso de subtítulos facilita o entendimento do
conteúdo. Por exemplo, para conseguir o efeito do texto abaixo, você pode usar
o conjunto de tags. Vamos ao exemplo:

Curso HTML Básico
Adicionando comentários ao código HTML
Você pode inserir comentários para incluir

notas, sugestões e explicações que o
internauta não deva ver. Para isso, você usa a
tag Comment
Vamos Treinar?
Exercício 02
1. Abra o documento EXERC1 e salve-o com o nome de EXERC2.html.
2. Altere o título para EXERC2
3. Altere o texto do primeiro parágrafo para: Inserindo efeitos na minha página

web. Obs.: Não esqueça de deixar a palavra web em itálico.
4. Altere o estilo do primeiro parágrafo para:

a. Fonte: Verdana
b. Tamanho: 3
c. Cor: #FF0000
5. Nas informações que você inseriu, coloque os seguintes efeitos:

a. Nome: Negrito
b. Data de nascimento: Sublinhado
6. Insira uma linha horizontal antes e depois da frase: Muito legal!
7. Salve o documento novamente e execute-o para verificar se as formatações

solicitadas foram inseridas de forma correta.

Curso HTML Básico
Sua página web deve estar semelhante a imagem abaixo:
Caso alguma formatação não esteja de acordo com o solicitado, faça as

alterações e atualize a página web.
Dica:
Para visualizar as alterações na página web automaticamente, faça o

seguinte:
a. Mantenha o Bloco de Notas e a página web abertos lado a lado.

b. Faça as correções no documento HTML.
c. Clique sobre a página web e pressione a tecla <F5> para atualizá-la.

Curso HTML Básico
Listas (Tipos e Funções)
Lista é uma coleção de itens relacionados. Você usa uma lista para organizar
dados com uma sequência de passos ou para listar itens em um grupo.
O HTML possui 2 tipos principais de listas.
• Numeradas
• Não Numeradas
Exemplo de lista numerada ou ordenada
Criando listas ordenadas

Curso HTML Básico
Criando lista não numeradas
Lista intercalada

Curso HTML Básico
Personalizando listas
Vamos Treinar?
Exercício 03
1. Abra o Bloco de Notas.

2. Inicie o documento HTML.
3. Como título, deixe o seguinte texto: EXERC3 - Listas intercaladas.
4. Insira como primeiro parágrafo o texto abaixo, deixando-o com o estilo
solicitado.
a) Texto: Principais pontos turísticos:
b) Fonte: Verdana
c) Tamanho: 5
d) Cor: #FF0099
5. Digite os comandos necessários para criar a lista intercalada de acordo

com a imagem abaixo. A fonte dos itens deverá ser definida como Calibri,
tamanho 4.

Curso HTML Básico
6. Salve novamente o documento HTML e visualize seu resultado no

navegador.
Inserindo imagens
A tag utilizada para se inserir imagens é a <img>, utilizada com alguns atributos.
Será preciso infoirmar o endereço e o nome da imagem, para isso basta utilizar
o atributo src que é a abreviação de source (fonte)
sintaxe: <img src="local-da-imagem+nome-da-imagem+com-a-extensão-
da-imagem">

Curso HTML Básico
Usando o atributo de align

Veja nas imagens como alterar a posição da imagem.

Curso HTML Básico
Atributo alt
Utilizado para descrição alternativa a respeito de uma imagem. É inserido
através do atributo alt na tag <img>. Auxiliar o usuário em situações de erro no
carregamento da imagem, também é de suma importância para as pessoas com
deficiência visual. Visto que é pela descrição da imagem que as pessoas cegas
conseguem identificar do que se trata a imagem.

Curso HTML Básico
Vamos Treinar?
Exercício 04
1. Abra o documento EXERC3 e salve-o com o nome de EXERC4.html.

2. Como título, deixe o seguinte texto: EXERC4 - Inserindo imagens.
3. Insira as imagens Porto_Alegre.jpg e Manaus.jpg, que você salvou em
seu computador, de modo a deixar sua página web como ilustrado abaixo.
4. Salve novamente o documento HTML e visualize seu resultado no
navegador.
Salvar as Imagens Manaus.jpg e Porto_Alegre.jpg

Curso HTML Básico
O que são links

Links são conexões pelas quais uma página pode "chamar" outra página ou um
item no mesmo website.
Links podem ser textos ou imagens, clique nos links ao lado da imagem e veja a
mágica acontecer...
Google
Usando a tag anchor

Veja a imagem abaixo e entenda suas partes:

Curso HTML Básico
Veja o html com link externo para o www.google.com
Criando links para uma mesma página ou seção

A tag anchor também é utilizada para riar links de seção.
É possível especificar a URL do documento que deseja interligar, com o nome
da seção precedido pelo sinal #.
Será preciso utilizar um atributo que fará o navegador entender para onde deve
ir após o usuário clicar no link. Este atributo é o NAME. O navegador exite o link
e, quando selecionado, exibirá a seção que começa com o nome especificado.
veja exemplo:
Abaixo um exemplo mais completo:

Curso HTML Básico
Caso queira, copie o código abaixo em BLOCO DE NOTAS, salve e execute

para ver o resultado.
<HTML>
<HEAD>
<TITLE>Link para seção</TITLE>
</HEAD>
<BODY>
<P><FONT FACE="Calibri" SIZE="3">Inserindo <I>links</I> criando
seções.</P>
<P> Neste exemplo você verá que, quando o texto for muito grande,
você poderá criar <I>links</I> que levem o usuário diretamente ao ponto
desejado.</P>
<A href = "#Capítulo I">O que é HTML?</A><BR>
<A href = "#Capítulo II">Principais comandos</A>
<BR>
<BR>
<A name = "Capítulo I">
<H2>O que é HTML?</H2>

Curso HTML Básico
<P>HTML é uma das linguagens de marcação mais conhecidas e utiliza

um formato simples de código, que pode ser gerado sem a ajuda de
aplicativos especiais.</P>
<P>Para criar um documento HTML, tudo o que você precisa é de um
editor de texto ASCII como o NotePad (Bloco de Notas), por exemplo. Se
você precisar verificar a formatação do documento durante a criação,
pode usar qualquer navegador, pois todos eles são capazes de interpretar
o código.</P>
</A>
<A name = "Capítulo II">
<H3>Principais comandos</H3>
<P>Os comandos são inseridos no código entre os sinais de menor
que "<" e maior que ">" e são chamados de <I>tags</I>.</P>
</A>
</FONT>
</BODY>
</HTML>
Criando links com imagens
Cores em links

Curso HTML Básico
Vamos Treinar?
Exercício 05
1. Abra o Bloco de Notas.

2. Inicie o documento HTML.
3. Como título, deixe o seguinte texto: EXERC5 – Criando links.
4. Insira as informações a seguir com as mesmas formatações, conforme
aprendeu anteriormente.
5. Insira links que levem o usuário direto ao tema que ele desejar consultar.
6. Visualize a página e veja se os links ficaram semelhantes à imagem
abaixo e se ao clicar sobre eles, o usuário visualizará o item desejado.

Curso HTML Básico
Metatags
As metatags são tags que fornecem dados aos navegadores e motores de busca
sobre o documento HTML em que estão inseridas.
As metatags não aparecem em sua tela, pois são informações específicas para
os navegadores.
Exemplos de metatags:
Código de caracteres, Descrição da página, palavras-chaves, autor do
documento.
<meta name="description" content="Descrição da página">
<meta name="keywords" content="Palavras-chaves">
<meta name="author" content="nome do Autor">
Outra metatag importante

Observe que a tag <meta> possui o atributo
charset e o valor ‘utf-8’. O atributo charset
informa ao navegador o tipo de codificação que
deve ser usada.
Com isso, precisamos informar ao navegador o
tipo de codificação de caracteres que ele deve
usar. O modelo de codificação UTF-8 pode representar qualquer caráter
universal padrão Unicode.

Curso HTML Básico
Tabelas
Iremos criar uma tabela básica. A ideia é entender o funcionamento e a

montagem de uma tabela em HTML.
Quando se tem um conjunto de dados e precisa-se apresentá-los

ordenadamente, uma boa maneira de fazê-lo é usando as tabelas. Elas são
basicamente compostas de linhas (<tr>...</tr>) e colunas (<td>...</td>).
Mas os cabeçalhos da tabela devem ser apresentados com a tag em <th>
A tag básica das tabelas é a <table></table>, ou seja, toda a informação da
tabela deve estar contida entre os delimitadores dessa tag.

Curso HTML Básico
Veja um exemplo
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Título da página</title>
</head>
<body>
<table border="1">
<tr>
<th>Frutas</th>
<th>Verduras</th>
<th>Grãos</th>
</tr>
<tr>
<td>Maçã</td>
<td>Alface</td>
<td>Arroz</td>
</tr>
<tr>
<td>Laranja</td>
<td>Beterraba</td>
<td>Trigo</td>
</tr>
</table>
</body>
</html>

Curso HTML Básico
Formulários – Forms
A interação de um site com o usuário pode ser feita de diversas maneiras. Por
exemplo, uma animação que chama atenção para um fato, um botão que aciona
músicas ou um formulário que envia mensagens, e-mails, chats e dados ao
servidor.
Você sabe o que é um formulário?

Como inserir um formulário HTML
O formulário HTML é representado pela tag de abertura <form> e a de
fechamento </form>. Dentro dessas tags, serão colocados todos os elementos
que compõem este formulário.
Para a tag <form> podem ser atribuídos o atributo method e o atributo action.
O atributo action define o local (através de uma URL) ao qual serão enviados
todos os dados recolhidos do formulário.
O atributo method define o método HTTP com que o formulário HTML irá lidar
com os dados recebidos. São eles: o método GET e o método POST.
Posteriormente vamos entender melhor como funcionam esses dois métodos.
Dessa forma, segue exemplos do uso da tag <form>


<form method="post" action="/receber_dados.php">
...
</form>


<form method="get" action="/receber_dados.php">
...
</form>
Os métodos GET e POST

Para entender a diferença entre esses dois métodos, é necessário compreender
como funcionam as requisições HTTP. De uma forma resumida, sempre que
você acessa um recurso através da web, o navegador envia uma requisição
através da URL. Portanto o HTTP é uma requisição que consiste em duas partes,
o cabeçalho e o corpo. O cabeçalho contém um conjunto de metadados globais
envolvendo os recursos do navegador. Já o corpo pode conter informações
necessárias para o servidor conseguir processar a solicitação anterior.
O método GET
O método GET é usado pelo navegador para solicitar que o servidor envie de
volta um determinado recurso. Portanto, é como se falássemos ao servidor
“Servidor, eu quero obter este recurso.”. Nesse caso, o navegador envia um

Curso HTML Básico
corpo vazio. Portanto, já que o corpo fica vazio, se um formulário for enviado
através do método GET, os dados serão reconhecidos pelo servidor através da
URL.
Dessa forma, podemos perceber que ao enviar um formulário com os campos

Nome e Idade, a URL iria se parecer com algo como:
url?nome=valor&idade=value.
Esse é o método padrão do formulário HTML. Caso não seja declarado o

atributo method, o formulário funcionará através do método GET.
Vejamos então, algumas observações a respeito do método GET:
• O tamanho de uma URL é limitado a cerca de 3000 caracteres;

• Nunca use o GET para enviar dados confidenciais, pois esses dados
ficarão visíveis na URL;
• É útil para envios de formulários em que um usuário deseja marcar o
resultado;
• GET é melhor para dados não seguros, como strings de consulta no
Google.
O método POST
O método POST é utilizado no navegador para conversar com o servidor. Os
dados são enviados ao servidor através do corpo da solicitação HTTP. Também
é realizada uma solicitação de resposta. Portanto, é como se falássemos ao
servidor “Servidor, verifique esses dados e me retorne um resultado adequado”.
Dessa forma, ao enviar um formulário através do método POST, os dados serão
anexados ao corpo da solicitação HTTP.
Diferentemente do método GET, explicado anteriormente, o método POST não

inclui o corpo na URL. Portanto, os dados enviados não ficarão visíveis na URL.
Vejamos então, algumas observações a respeito do método POST:
• Anexa dados de formulário dentro do corpo da solicitação de HTTP.

Portanto, os dados não são mostrados na URL;
• Não tem limitações de tamanho;
• Os envios de formulários com o POST não podem ser marcados.
Elementos de formulário HTML

Os formulários HTML são compostos por diversos elementos, que compõem o
formulário. Dessa forma, é necessário entender como e quando utilizar cada um
deles. Os elementos de formulários utilizados no HTML são:
• <input> – Define um campo de entrada de dados;

• <textarea> – Define uma área de texto, podendo conter diversas linhas
de texto;
• <button> – Define um botão;
• <select> – Define uma lista selecionável, também conhecida como drop-
down;

Curso HTML Básico
• <option> – Define uma lista de opções dentro de um drop-down;

• <optgroup> – Define um grupo de opções;
• <fieldset> – Define um grupo de campos;
• <label> – Define um rótulo ou legenda para um campo ou controle do
formulário;
• <output> – Define elementos de saída para o formulário;
• <legend> – Define um título para o conjunto de campos.
Além dessas tags de elementos de formulário HTML, nada impede de utilizar

outras tags dentro da tag <form>.como por exemplo: <p></p>, entre outras.
Veremos agora os seguintes sub-tópicos:
• A tag <input>
• Os tipos de campos <input>
• A tag <textarea>
A tag <input>
A tag <input> é uma das mais utilizadas dentro de um formulário HTML e
considerada a principal. Esta tag representa os campos de entrada de dados de
um formulário.
Vejamos um exemplo de formulário:
<form method="get" action="envio_dados.php">

<input type="text" name="nome" placeholder="digite seu Nome aqui">
<input type="e-mail" name="email" required placeholder="Digite seu e-mail">
<input type="submit" name="enviar" value="Enviar">
</form>
No exemplo acima, o navegador renderizará o seguinte resultado:
Os tipos de campos <input>

Segue os possíveis valores do atributo type da tag <input>:
Type Descrição
button Define um botão
checkbox Define uma caixa de checagem
color Define uma caixa de cores
date Define um campo de data
datetime-
Define um campo de data e horário
local
email Define um campo de e-mail

Curso HTML Básico
Type Descrição
file Define uma campo para upload de arquivos
hidden Define um campo oculto
image Define uma imagem como botão de envio do formulário HTML
month Define um controle de mês e ano
number Define um campo de intervalo de número
password Define um campo de senha (mascarando-a)
radio Define um campo de opção (radio)
range Define um controle de intervalo
reset Define um botão para reiniciar aos valores iniciais
search Define um campo de pesquisa
submit Define um botão de envio do formulário HTML
tel Define um campo de telefone
text Define um campo de texto
time Define um campo de controle de horário
url Define um campo de URL
week Define um campo de controle de semana
<input type=”checkbox”>
O input do tipo checkbox define uma caixa de seleção. A caixa de seleção é
mostrada como uma caixa quadrada que pode ser marcada quando é ativada.
As caixas de seleção permitem que o usuário possa marcar uma ou mais opções.
Exemplo de como utilizar o input do tipo checkbox:
<form>
<input type="checkbox" name="veiculo1" value="bicicleta">Eu tenho uma
bicicleta<br>
<input type="checkbox" name="veiculo2" value="carro">Eu tenho um
carro<br>
<input type="checkbox" name="veiculo3" value="moto">Eu tenho uma moto
</form>
O exemplo acima será renderizado pelo navegador como na imagem abaixo:

Curso HTML Básico
<input type=”color”>
Este tipo de campo foi lançado no HTML5. Define uma caixa de cores, permitindo
a seleção de uma cor. Você pode utilizar um código hexadecimal de cor para
poder escolher uma cor selecionada inicialmente. Ao ser clicado, esse tipo de
campo abre uma caixa de seleção de cores. Portanto, vejamos o exemplo
abaixo, onde deixaremos o valor #0000FF (azul) como valor de cor inicial:
<form>
Selecione sua cor preferida: <input type="color" name="favcor"
value="#0000FF">
</form>
Dessa forma, o resultado do exemplo acima será o formulário HTML abaixo:
<input type=”date”>
Outro tipo que foi lançado no HTML5 é o “date”. O campo do tipo “date” define
um selecionador de data. Portanto, o valor resultante inclui o ano, o mês e o dia.
OBS: esse tipo de campo não é aceito por todos os navegadores, como por
exemplo no Safari.
Exemplo:
<form>
Data de nascimento: <input type="date" name="nascimento">
</form>
Com o exemplo acima, o resultado será o formulário da imagem abaixo:
Neste exemplo, repare que ao clicar no campo do tipo data, aparecerá um campo
de seleção de data como no do exemplo abaixo:

Curso HTML Básico
<input type=”email”>
Também é um tipo de campo que foi lançado no HTML5. Este tipo de campo
define um e-mail. Ele é muito útil porque já faz a validação adequada para os
campos de e-mail. Portanto, caso seja digitado um valor que não seja um
endereço de e-mail válido, o formulário irá recusar e informar que não é um e-
mail válido.
Exemplo de formulário HTML utilizando um input do tipo email:
<form>
E-mail: <input type="email" name="e-mail" placeholder="digite seu e-mail
aqui">
</form>
Portanto, no exemplo acima, o resultado será:
<input type=”image”>
O input do tipo “image” define uma imagem como botão de envio do formulário
HTML. Funciona como um input do tipo “submit”. Assim como na tag <img>, o
caminho para a imagem é especificado no atributo src.
<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
O resultado do exemplo acima será:

Curso HTML Básico
<input type=”password”>
O input do tipo “password” define um campo para digitação de senha. Os
caracteres são mascarados.
O exemplo mostra um campo de senha para o formulário HTML:
<form>
<input type="password" name="senha" placeholder="Digite sua Senha">
</form>
Posteriormente, ao digitar qualquer coisa no campo de senha, o conteúdo ficará

mascarado como no exemplo abaixo:
<input type=”radio”>
O input do tipo “radio” define um botão de opção. Muito utilizados em formas de
grupos, ou seja, um conjunto de opções relacionadas. Dessa forma, o usuário
poderá selecionar apenas um botão do tipo radio pertencente a um mesmo
grupo.
Exemplo:
<form>
<p>Qual sua idade?</p>
<input type="radio" name="idade" value="18_22">18 a 22 <br>
<input type="radio" name="idade" value="23_30">23 a 30 <br>
<input type="radio" name="idade" value="mais31">acima de 31<br>
</form>

Curso HTML Básico
Exemplo de um Select
<label> Escolha uma cor:</label>
<select>
<option value="verde">Verde</option>
<option value="vermelho">Vermelho</option>
<option value="azul">Azul</option>
<option value="alpha">Alpha</option>
</select>
<input type=”range”>
Este tipo de campo foi lançado com o HTML5. O input do tipo “range” define um
controle equivalente a um controle deslizante. O intervalo padrão é de 0 a 100.
Porém, através dos atributos, é possível alterar esse intervalo.
• max – especifica o valor máximo permitido;

• min – especifica o valor mínimo permitido;
• step – especifica os intervalos numéricos.
Exemplo de formulário HTML com o input do tipo range:
<form>
Defina seu nível de satisfação:<br>
pouco satisfeito
<input type="range" name="satisfacao" min="0" max="10">
muito satisfeito
</form>
Assim, o resultado do código de exemplo será:
<input type=”reset”>
O input do tipo “reset” define um botão para reiniciar os valores digitados pelo
usuário no formulário para seus valores iniciais, esse botão é muito útil.

Curso HTML Básico
Vejamos então o exemplo abaixo:
<form>
<input type="reset">
</form>
<input type=”submit”>
Um dos tipos de campos mais importantes do formulário HTML, o input do tipo
“submit” define um botão de envio. Ao clicar no submit, todos os valores do
formulário serão enviados para o servidor através do método escolhido na
tag <form>, e executando a ação definida no atributo action do <form>.
Exemplo de uso:
<form>
<input type="submit" value="Enviar Formulário">
</form>
<input type=”tel”>
Esse tipo de campo foi lançado junto ao HTML5. O input do tipo “tel” define um
campo para inserir um número de telefone. Porém, esse tipo de input ainda é
pouco aceito pelos navegadores. Nesse caso, os navegadores que não possuem
suporte para o “tel” transformam esse input no type=”text” padrão. Vejamos o
exemplo abaixo para utilizar o “tel” no formulário html:
<form>
Telefone: <input type="tel" name="usertel">
</form>
<input type=”text”>
Um dos campos mais importantes de um formulário HTML, é provavelmente o
mais utilizado e mais aceito por todos os navegadores. O input do tipo “text”
define um campo de preenchimento de texto de uma linha. Por padrão, este tipo
de campo costuma ter o comprimento equivalente a 20 caracteres.
Enfim, vejamos então o exemplo abaixo:
<form>
Nome: <input type="text" name="nome"><br>
Sobrenome: <input type="text" name="sobrenome"><br>
Endereço: <input type="text" name="endereco">
</form>
Dessa forma, com o exemplo acima, teremos como resultado o formulário html
abaixo:

Curso HTML Básico
A tag <textarea>
A tag <textarea> nada mais é do que uma área de texto. Ou seja, define um
controle de entrada de texto de várias linhas. Diferente do input do tipo “text”, a
tag textarea pode possuir várias linhas. Portanto, as áreas de texto podem conter
um número ilimitado de caracteres.
Segue um exemplo de formulário HTML utilizando duas áreas de texto:
<form>
<textarea></textarea>
<textarea>Area de texto com um texto inicial dentro</textarea>

</form>
Dessa forma, o resultado do exemplo acima será:
Criando um formulário HTML
Já sabemos como funciona um formulário HTML, iremos começar a criar o nosso

próprio formulário.
Inicialmente vamos definir os campos do nosso formulário HTML:
• Formulário com método POST;

• 2 campos de texto: nome e telefone (não utilizaremos o tipo “tel” por
questões de incompatibilidade);
• 1 campo de e-mail;
• 1 grupo radio para “deseja receber nossas novidades?” contendo duas
opções: sim e não;
• 1 área de texto (mensagem);
• 1 botão de enviar.

Curso HTML Básico
Código HTML do nosso formulário
Inicialmente, vamos desenvolver a estrutura do nosso HTML. Lembre-se de

salvar esse arquivo com a extensão .html.
Vejamos então o nosso código inicial:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Formulário HTML</title>
<meta charset="utf-8"/>

</head>
<body>
<form>
<p> Envie uma mensagem preenchendo o formulário abaixo</p>
<label for="nome">Seu Nome:</label>

<input type="text" id="nome" name="nome" placeholder="Digite seu
nome*" required><br>
<label for="telefone">Seu Telefone:</label>

<input type="text" id="telefone" name="telefone" placeholder="Digite
seu Telefone"><br>
<label for="email">Seu E-Mail:</label>

<input type="email" id="email" name="email" placeholder="Digite seu E-
Mail*" required><br>
<span>Deseja receber nossas novidades?</span>

<input type="radio" name="novidades" id="sim" value="sim"
checked><label for="sim">Sim</label>
<input type="radio" name="novidades" id="nao" value="nao"><label

for="nao">Não</label><br>
<label for="mensagem">Sua mensagem:</label>

<textarea name="mensagem" id="mensagem"
placeholder="Mensagem*" required></textarea>
<input type="button" name="acao" value="Enviar">

</form>
</body>
</html>
Observe que no exemplo acima, utilizamos o metadados charset, também já

definimos nosso título (“Formulário HTML”).

Curso HTML Básico
Portanto, inicialmente, nosso formulário se parecerá como a imagem abaixo:

Curso HTML Básico
O que é o CSS?
CSS é a linguagem que usamos para criar estilos (formatar) um documento

HTML.
CSS descreve como os elementos HTML devem ser exibidos.
Sintaxe CSS
O seletor aponta para o elemento HTML que você deseja estilizar.
O bloco de declaração contém uma ou mais declarações separadas por ponto

e vírgula.
Cada declaração inclui um nome de propriedade CSS e um valor, separados

por dois pontos.
Várias declarações CSS são separadas por ponto e vírgula e os blocos de

declaração são cercados por chaves.
Exemplo
Neste exemplo, todos os elementos <p> serão alinhados ao centro, com uma
cor de texto vermelha:
p{
color: red;
text-align: center;
}
O seletor de id CSS
O seletor id usa o atributo id de um elemento HTML para selecionar um

elemento específico.
O id de um elemento é único dentro de uma página, então o seletor de id é

usado para selecionar um elemento único!
Para selecionar um elemento com um id específico, escreva um caractere hash

(#), seguido do id do elemento.

Curso HTML Básico
Exemplo de Uso de CSS

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Meu primeiro exemplo de CSS</h1>

<p>Isso é um parágrafo</p>
</body>
</html>
Uma regra CSS consiste em um seletor e um bloco de declaração.

Curso HTML Básico
Exemplo com ID
A regra CSS abaixo será aplicada ao elemento HTML com id="para1":
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Olá Mundo! </p>
<p>Este parágrafo não é afetado pelo estilo. </p>
</body>
</html>
O seletor de classe CSS
O seletor de classe seleciona elementos HTML com um atributo de classe

específico.
Para selecionar elementos com uma classe específica, escreva um caractere

ponto (.), seguido do nome da classe.
Exemplo com class
Neste exemplo, todos os elementos HTML com class="center" serão vermelhos

e alinhados ao centro:

Curso HTML Básico
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center"> Estou em vermelho e alinhado ao centro </h1>

<p class="center"> Estou em vermelho e alinhado ao centro. </p>
</body>
</html>
Você também pode especificar que apenas elementos HTML específicos

devem ser afetados por uma classe.

Curso HTML Básico
Outro Exemplo com class
Neste exemplo, apenas os elementos <p> com class="center" serão vermelhos

e alinhados ao centro:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Não serie afetado</h1>
<p class="center"> Estou em vermelho e alinhado ao centro. </p>
</body>
</html>
Elementos HTML também podem se referir a mais de uma classe.
E mais outro Exemplo com class
Neste exemplo, o elemento <p> será estilizado de acordo com class="center" e

class="large":
<!DOCTYPE html>
<html>
<head>

Curso HTML Básico
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">Não serei afetado</h1>

<p class="center">Estou em vermelho e alinhado ao centro</p>
<p class="center large"> Estou em vermelho, alinhado ao centro e minha fonte
é “grande”</p>
</body>
</html>

Curso HTML Básico
O seletor universal CSS
O seletor universal (*) seleciona todos os elementos HTML na página.
Exemplo seletor universal
A regra CSS abaixo afetará todos os elementos HTML na página:
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Olá Mundo!</h1>
<p>Todo elemento nessa página será afetado por esse estilo. </p>
<p id="para1">Eu também!</p>
<p>e também eu...!</p>
</body>
</html>

Curso HTML Básico
O seletor de agrupamento CSS
O seletor de agrupamento seleciona todos os elementos HTML com as

mesmas definições de estilo.
Veja o seguinte código CSS (os elementos h1, h2 e p têm as mesmas

definições de estilo):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p{
text-align: center;
color: red;
}
Será melhor agrupar os seletores, para minimizar o código.
Para agrupar seletores, separe cada seletor com uma vírgula.
Exemplo seletor de agrupamento
Neste exemplo agrupamos os seletores do código acima:
<!DOCTYPE html>
<html>
<head>

Curso HTML Básico
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
CSS externo
Com uma folha de estilo externa, você pode alterar a aparência de um site
inteiro alterando apenas um arquivo!
Cada página HTML deve incluir uma referência ao arquivo de folha de estilo
externo dentro do elemento <link>, dentro da seção head.
Exemplo css externo
Estilos externos são definidos dentro do elemento <link>, dentro da seção

<head> de uma página HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="meu-estilo.css">

Curso HTML Básico
</head>
<body>
<h1>Isso é um Título em H1</h1>

<p>Isso é um parágrafo. </p>
</body>
</html>
Aqui está a aparência do arquivo "meu-estilo.css":

"meu-estilo.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Atividade
Acessar o site da w3schools (https://www.w3schools.com/css/default.asp)
Pesquisa e testes
Comentários  https://www.w3schools.com/css/css_comments.asp
a) Cores  https://www.w3schools.com/css/css_colors.asp
b) Planos de fundo (cor, imagem, repetição de imagem) 
https://www.w3schools.com/css/css_background.asp
c) Bordas  https://www.w3schools.com/css/css_border.asp
d) Margens  https://www.w3schools.com/css/css_margin.asp
e) Padding  https://www.w3schools.com/css/css_padding.asp
f) Texto, alinhamento, transformação, identação, espaço, sombra 
https://www.w3schools.com/css/css_text.asp
g) Altura e Largura  https://www.w3schools.com/css/css_dimension.asp
h) Fontes  https://www.w3schools.com/css/css_font.asp
i) Adicionar Icones  https://www.w3schools.com/css/css_icons.asp
j) Adicionar links  https://www.w3schools.com/css/css_link.asp
k) Posicionamento  https://www.w3schools.com/css/css_positioning.asp
l) Alinhamento  https://www.w3schools.com/css/css_align.asp
m) Barra de navegação  https://www.w3schools.com/css/css_navbar.asp

Curso HTML Básico
n) Galeria de imagens  https://www.w3schools.com/css/css_form.asp

o) Formulários  https://www.w3schools.com/css/css_form.asp
Referencias
https://www.w3schools.com/html/
https://pt.wikipedia.org/wiki/Internet
https://pt.wikipedia.org/wiki/World_Wide_Web
https://tecnoblog.net/responde/o-que-e-intranet/
https://www.hostmidia.com.br/blog/home-page-do-site/
https://tecnoblog.net/responde/o-que-e-url/

HTML Basico

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML Basico

Enviado por

Direitos autorais:

Formatos disponíveis

HTML

Senac – LAPA TITO

Jeferson Ganda www.jganda.com.br Senac LAPA TITO - Página - 1

Usando o atributo de align .................................................................................................. 24

Jeferson Ganda www.jganda.com.br Senac LAPA TITO - Página - 2

<input type=”text”> ................................................................................................................ 43

Jeferson Ganda www.jganda.com.br Senac LAPA TITO - Página - 3

O que são servidores WEB

Jeferson Ganda www.jganda.com.br Senac LAPA TITO - Página - 4

O que é home page?

O que são protocolos?

O que é uma URL?

Jeferson Ganda www.jganda.com.br Senac LAPA TITO - Página - 5

O que é linguagem de marcação?

Partes de um documento HTML

Jeferson Ganda www.jganda.com.br Senac LAPA TITO - Página - 6

TAGs e seus “fechamentos”

Outras TAGs (essas não precisam ser fechadas)

Jeferson Ganda www.jganda.com.br Senac LAPA TITO - Página - 7

Veja como fica a execução do código acima com o <BR>

Jeferson Ganda www.jganda.com.br Senac LAPA TITO - Página - 8

Visualizando a página WEB

Jeferson Ganda www.jganda.com.br Senac LAPA TITO - Página - 9

Digite o código abaixo em um BLOCO DE NOTAS e salve como exerc1.html

Inserir alguns efeitos para destacar TEXTO

Jeferson Ganda www.jganda.com.br Senac LAPA TITO - Página - 10

Para destacar um texto, além de efeitos, também é possível alterar o

Jeferson Ganda www.jganda.com.br Senac LAPA TITO - Página - 11

Vamos a alguns exemplos:

Jeferson Ganda www.jganda.com.br Senac LAPA TITO - Página - 12

a sintaxe fica assim:

Jeferson Ganda www.jganda.com.br Senac LAPA TITO - Página - 13

Jeferson Ganda www.jganda.com.br Senac LAPA TITO - Página - 14

PS: Você pode encontrar

Jeferson Ganda www.jganda.com.br Senac LAPA TITO - Página - 15

Jeferson Ganda www.jganda.com.br Senac LAPA TITO - Página - 16

Inserindo linhas Horizontais

Jeferson Ganda www.jganda.com.br Senac LAPA TITO - Página - 17

Adicionando comentários ao código HTML

Você pode inserir comentários para incluir

2. Altere o título para EXERC2

3. Altere o texto do primeiro parágrafo para: Inserindo efeitos na minha página

4. Altere o estilo do primeiro parágrafo para:

5. Nas informações que você inseriu, coloque os seguintes efeitos:

6. Insira uma linha horizontal antes e depois da frase: Muito legal!

7. Salve o documento novamente e execute-o para verificar se as formatações

Jeferson Ganda www.jganda.com.br Senac LAPA TITO - Página - 18

Sua página web deve estar semelhante a imagem abaixo:

Caso alguma formatação não esteja de acordo com o solicitado, faça as

Para visualizar as alterações na página web automaticamente, faça o

a. Mantenha o Bloco de Notas e a página web abertos lado a lado.

Jeferson Ganda www.jganda.com.br Senac LAPA TITO - Página - 19

Listas (Tipos e Funções)

Exemplo de lista numerada ou ordenada

Criando listas ordenadas

Jeferson Ganda www.jganda.com.br Senac LAPA TITO - Página - 20

Criando lista não numeradas

Jeferson Ganda www.jganda.com.br Senac LAPA TITO - Página - 21

1. Abra o Bloco de Notas.

5. Digite os comandos necessários para criar a lista intercalada de acordo

Jeferson Ganda www.jganda.com.br Senac LAPA TITO - Página - 22

6. Salve novamente o documento HTML e visualize seu resultado no

Jeferson Ganda www.jganda.com.br Senac LAPA TITO - Página - 23