O que é HTML?

Desenvolvimento
em Ambiente
Web
HTML - Introdução
O que é HTML?
HTML é uma linguagem para descrever a estrutura de uma
página WEB. Ela permite:
Publicar documentos online com cabeçalhos, texto, tabelas, listas,
imagens, etc;
Recuperar informações online via links de hipertexto, com um
clique de botão;
Projetar formulários para conduzir transações de serviços remotos,
uso em busca de informações, fazer reservas, encomendas de
produtos, etc;
Incluir planilhas de informações, vídeos, sons e outras aplicações
diretamente em seu documento.
O que é HTML?
HTML significa Hyper Text Markup Language;
Uma linguagem de marcação é um conjunto de “etiquetas”
(tags) de marcação;
Os documentos HTML são descritos usando as tags HTML;
Cada
tag
HTML
descreve
um
conteúdo
diferente
do
documento.
Assim, o HTML nos permite descrever a estrutura das
páginas usando "marcações". Os elementos da linguagem que
indicam um "parágrafo", "lista", "tabela", entre outros.
Um pouco de história
A primeira versão do HTML foi descrita por Tim
Berners-Lee no final de 1991.
Sem seus 5 primeiros anos (1990-1995), o HTML
teve várias revisões e extensões, organizado
inicialmente pelo CERN (European Organization
for Nuclear Research) e posteriormente pelo
IETF (Internet Engineering Task Force).
Um pouco de história
Com a criação da W3C, o desenvolvimento mudou
novamente. Sendo lançado as versões 3.2, 4.01 e 5.
Versão
Ano
HTML
1991
HTML 2.0
1995
HTML 3.2
1997
HTML 4.01
1999
HTML 5
2014
O que é XHTML?
XHTML é uma variação do HTML que usa a
sintaxe XML
(Extensible Markup
Language).
XHTML tem os mesmos elementos do HTML
(como parágrafos, tabelas, etc), mas a forma de
escrever as marcações é ligeiramente diferente.
O que é CSS?
CSS é uma linguagem para descrever a apresentação de
páginas WEB, incluindo cores, leiaute e fontes. Ela
permite que a apresentação de uma página WEB se
adapte para diferentes tipos de dispositivos, como telas
grandes e pequenas. O CSS é independente do HTML.
A separação do CSS do HTML torna mais fácil a tarefa
de
alterar
sites,
compartilhar
aparências
entre
diferentes páginas e criar páginas sob medida para
diferentes ambientes. Este mecanismo é conhecido
como separação do conteúdo da apresentação.
Sintaxe das tags HTML
Uma tag é composta dos caracteres especiais <, > e /.
Os elementos HTML normalmente são descritos em pares.
Abertura de uma tag:
Fechamento de uma tag:
1. O caractere inicial <
1. Os caracteres iniciais </
2. Nome da tag (tagname)
2. Nome da tag (tagname)
3. O caractere final >
3. O caractere final >
Sintaxe das tags HTML
Exemplo:
<p>Este é um parágrafo.</p>
<p>
Início da tag
</p>
Fim da tag
Alguns elementos podem não ter um fechamento de
tag. Exemplo:
<br/>
Sintaxe das tags HTML
Uma tag pode ter atributos para refinar seu significado.
Os atributos são especificados no início da tag. Eles consistem
de um nome e um valor, separador pelo caractere "=".
Exemplo:
<a href="page.html">Link</a>
WEB Browsers
O propósito de um navegador WEB (WEB Browser) é ler
um documento HTML e mostrá-lo.
O navegador não mostra as tags HTML, mas ele as usa
para determinar como o documento é apresentado.
São
exemplos
de
navegadores:
Internet Explorer e Safari.
Chrome,
FireFox,
Ferramentas para edição de HTML
Não é necessário uma ferramenta especial para criar
uma página HTML. Pode-se escrever HTML "na mão",
usando um editor de texto como o Notepad.
Apesar das marcações HTML poderem ser escritas em
qualquer
editor
de
texto,
editores
especializados podem oferecer facilidades.
HTML
Criando uma página
Tente isso:
1. Abra o bloco de notas (notepad);
2. Digite o texto do exemplo 1;
3. Salve o documento com o nome
“exemplo1.html” e na opção “Codificação”
selecione “UFT-8”;
4. Dê dois cliques no arquivo salvo para abrir a
página no navegador padrão do computador.
Página no Notepad
Condificação UTF-8
Declaração <!DOCTYPE>
Declaração
ajuda
o
navegador
a
mostrar
o
documento corretamente.
Como há outros tipos de documentos na WEB, o
navegador precisa saber o tipo e a versão destes
documentos.
Esta declaração não é case sensitive, portanto
qualquer
combinação
de
minúsculas são aceitáveis.
letras
maiúsculas
e
Elemento html
O
elemento
html
representa
a
raiz
de
um
documento HTML.
O <html> ... </html> contém um elemento head
seguido de um elemento body.
Elemento head
O elemento head representa uma coleção de
metadados para o documento.
O
<head>
...
</head>
contem
o
título
e
informações sobre folhas de estilo e scripts.
O conteúdo no elemento head não é mostrado pelo
navegador.
Elemento body
O elemento body representa o conteúdo principal
do documento.
O <body> ... </body> contem as marcações visíveis
do documento.
Cabeçalhos HTML
Cabeçalhos são definidos com as tags <h1> até <h6>.
<h1> define o cabeçalho mais importante. <h6> define o
cabeçalho menos importante.
Observações
Não use cabeçalhos para fazer textos maiores ou negrito,
eles devem ser usados para identificar os "títulos" das
páginas;
Ferramentas de busca usam estes cabeçalhos para indexar a
estrutura e o conteúdo das páginas;
h1 deveria ser o cabeçalho principal, seguido do h2, depois
h3 e assim por diante.
Parágrafo HTML
Documentos HTML são divididos em parágrafos.
A tag <p> define um parágrafo.
Quebras de linha
A tag <br> define uma quebra de linha, sem iniciar um novo
parágrafo.
Divisões horizontais
A tag <hr> cria uma linha horizontal na página HTML.
Pode-se usar para separar conteúdos.
Comentários HTML
As tags de comentário <!-- e --> são usadas para inserir
comentários em uma página HTML.
Pode-se adicionar comentários com a seguinte sintaxe:
<!-- Isso é um comentário -->
Comentários não são mostrados pelo navegador, mas podem
ajudar a documentar o HTML.
Prática
Criação de páginas em laboratório para aplicação dos
conceitos discutidos.