Des - Web - Aula 03 - HTML - Parte - 1 PDF

Linguagem de Programação II
Aula 03 – HTML – Parte 1
MSc. Elda Nunes de Carvalho

Lembrando
Lembrando
Lembrando
Samuel Morse
Lembrando
Lembrando
Lembrando
Lembrando
U. Califórnia
U. Stanford
Arpanet
Base Militar
Utah
U. Los Angeles
Lembrando
E-mail
Lembrando
Vinton Cerf
Lembrando
Lembrando
O que é HTML?
HTML é uma linguagem de marcação para descrever
documentos web (páginas web).
• HTML significa H Yper T ext M arkup L anguage
• Uma linguagem de marcação é um conjunto de tags de
marcação
• Os documentos HTML são descritos por tags HTML
• Cada tag HTML descreve diferente conteúdos do
documento
O que é HTML?
HTML é uma linguagem criada para publicação de
conteúdo na web, podendo conter texto, imagem, vídeo,
áudio entre outras formas de representação de conteúdo.
Os elementos não estão conectados linearmente como se

fossem textos de um livro, mas sim de forma imprevista
que permite a comunicação de dados, organizando
conhecimentos e guardando informações relacionadas.
Porque HTML?
Porque HTML?
Tim Berners-Lee
Porque HTML?
Histórico
A linguagem HTML (Tim Berners-Lee) surgiu em 1991 e até
o seu quinto ano de vida sofreu várias revisões e
alterações na sua especificação.
Após 1995, o padrão passou a ser regularizado pela W3C,

entidade que regula os padrões Web.
Histórico
A primeira versão do HTML foi baseada na linguagem SGML.
O SGML era utilizado para a estruturação de documentos e
foi dele que o HTML herdou diversas tags tais como: título
<h1> ao <h6>, cabeçalho <head> e parágrafo <p>. A maior
diferença entre essas duas linguagens de marcação é que o
HTML implementava a tag <a> com o atributo href,
permitindo assim a ligação (links) de uma página a outra. Esse
conceito de interligação entre documentos é a base do
funcionamento de toda Web.
Histórico
O sucessor do HTML foi o HTML 2.0, o qual foi apresentado
na primeira conferência mundial sobre Web, a World Wide
Web Conference.
Essa versão do HTML pode ser vista apenas como uma

correção da versão anterior, ou seja, apenas formalizava as
características do HTML que já estavam em uso.
Histórico
Dave Raggett escreveu o HTML 3.0 baseado em seu mais
recente rascunho do HTML+. Entretanto, mais uma vez, a
versão do HTML não foi implementada.
Esta especificação foi superada pela versão 3.2, a qual

novamente foi uma correção e providenciou total
compatibilidade com a versão 2. O HTML 3.2 implementou
características tais como tabelas, applets e texto flutuante ao
redor de imagens.
Histórico
Raggest foi co-author do HTML 4 e em dezembro de 1999 o
HTML 4.01 foi publicado trazendo como principal premissa a
compatibilidade com as suas versões anteriores através de 3
implementações:
• Scrict (estrita) – implementação na qual fica proibida a
utilização de elementos obsoletos da linguagem;
• Transitional (transitória) – implementação na qual os
elementos obsoletos são permitidos;
• Frameset – implementação direcionada para site que
usam frames.
Histórico
Ok e agora?
Como escrevo
código em
HTML?
Navegadores da Web
A finalidade de um navegador de internet (Chrome, IE,
Firefox, Safari) é ler documentos HTML e exibi-los.
O navegador não exibe as tags HTML, mas as usa para
determinar como exibir o documento:
Estrutura de Página HTML
O <! DOCTYPE> Declaração
A declaração <! DOCTYPE> ajuda o navegador a exibir uma
página web corretamente.
Existem diferentes tipos de documentos na web.
Para exibir um documento corretamente, o navegador deve
saber tanto o tipo e versão.
A declaração doctype não diferencia maiúsculas de

minúsculas. Todos os casos são aceitáveis:
O <! DOCTYPE> Declaração
A declaração doctype não diferencia maiúsculas de
minúsculas. Todos os casos são aceitáveis:
Elementos HTML
Elementos HTML são escritos com um tag início, com um tag fim, com o
conteúdo no meio:
<Tagname> conteúdo </ tagname>
O elemento HTML é tudo que está desde a tag de início até a tag de fim:
<P> Meu primeiro parágrafo HTML. </ P>
Estrutura de Página HTML
O elemento <html> define o documento inteiro.
Ele tem um começo tag <html> e um final tag </ html>.
O elemento de conteúdo é outro elemento HTML (o elemento <body>).

Elementos Aninhados HTML
Elementos HTML podem ser aninhados (elementos podem conter
elementos).
Todos os documentos HTML consistem em elementos HTML aninhados.
Este exemplo contém 4 elementos HTML:
Quais são?
Elementos HTML - Título
O <h1> elemento define um título.
Ele tem um começo tag <h1> e um final tag </ h1>.
O elemento de conteúdo é: Meu primeiro título.

Elementos HTML - Paragrafo
O <p> elemento define um parágrafo.
Ele tem um começo tag <p> e um final tag </ p>.
O elemento de conteúdo é: Meu primeiro parágrafo.

Não se esqueça do Tag Final
Alguns elementos HTML serão exibidos corretamente, mesmo se você
esquecer a marca de fim:
O exemplo ao lado funciona

em todos os navegadores,
pois a tag de fechamento é
considerado opcional.
Nunca confie em isso. Pode

produzir resultados e / ou
erros inesperados se você
esquecer a tag fim.
Elementos Vazios HTML
Elementos HTML sem conteúdo são chamados de elementos vazios.
<br> é um elemento vazio, sem uma tag de fechamento (o <br> tag

define uma quebra de linha).
Os elementos vazios podem ser "fechado" na tag de abertura assim: <br

/>.
O HTML5 não requer que elementos vazios sejam fechados. Mas se

você quiser uma validação rigorosa, ou você precisa fazer o seu
documento legível por analisadores de XML, você deve fechar todos os
elementos HTML.
Dica: Use Etiquetas Minúsculas
Tags HTML não distinguem entre maiúsculas e minúsculas:

<P> significa o mesmo que <p>.
O padrão HTML5 não requer tags minúsculas, mas W3C

recomenda minúsculas em HTML4, e exige minúsculas para
mais estritas tipos de documentos como XHTML.
Nos nossos exemplos sempre usaremos Tags minúsculas

Vamos começar a criar
páginas Web?
Escrever HTML Usando Bloco de
Notas ou TextEdit
Escrever HTML Usando Bloco de
Notas ou TextEdit
Passo 1: Abra o bloco de notas (ou editor de

texto da sua escolha)
Passo 2: Faça Alguns HTML
Passo 3: Salve a página HTML
Passo 4: Ver página HTML no navegador
Exemplo 1 – Hello World
Hora de treinar!
Crie...
Uma página HTML que:
Contenha 3 seções:
Seção 1: 1 título e dois parágrafos separados por
uma linha
Seção 2: 2 títulos separados por três linhas
Seção 3: 4 parágrafos, uma linha entre os dois
primeiros parágrafos e os dois últimos.
* Cada seção deve ser separada por 5 linhas
Crie...
Uma página HTML que:
Contenha 4 seções:
Seção 1: 2 títulos e dois parágrafos separados por
uma linha cada
Seção 2: 1 título e 1 paragrafo separados por três
linhas
Seção 3: 3 parágrafos, uma linha entre cada
paragrafo.
Seção 4: 1 título e um paragrafo
* Cada seção deve ser separada por 5 linhas
Meta Tags
Metadados são dados (informações) sobre os dados.
A tag <meta> fornece metadados sobre o documento HTML.
Os metadados não serão exibidos na página, mas serão

entendidos pela máquina.
Meta Tags
Meta elementos tipicamente são usados para especificar
descrição da página, palavras-chave, autor do documento,
modificado pela última vez, e outros metadados.
Os metadados podem ser utilizados pelos navegadores (como

exibir conteúdo ou recarregamento da página), os motores
de busca (palavras-chave), ou outros serviços da web.
Meta Tags - Informações
Nota: <meta> tag sempre vai dentro do elemento <head>.
Nota: Os metadados são sempre passados como pares nome

/ valor.
Nota: O atributo de conteúdo deve ser definido se o nome ou

o atributo http-equiv está definido. Se nenhum destes são
definidos, não se pode definir o atributo de conteúdo.
Algumas Meta Tags
Exemplo 2 – Meta Tags
Hora de treinar!
Incremente sua página...
Coloque mais informações na sua página HTML:
Coloque o seu nome, palavras chave e descrição da

sua página.
Estilo do Texto
Cada elemento HTML tem um estilo padrão (cor de fundo é
branco e cor do texto é preto).
Mudar o estilo padrão de um elemento HTML, pode ser feito

com o atributo de estilo.
Estilo do Texto – Cor de Fundo
Este exemplo altera a cor de fundo padrão de branco para
lightgrey:
Estilo do Texto – Cor de Texto
A propriedade color define a cor do texto a ser usado para
um elemento HTML:
Estilo do Texto – Tamanho do texto
A propriedade font-size define o tamanho do texto a ser
usado para um elemento HTML:
Estilo do Texto – Alinhamento do texto
A propriedade text-align define o alinhamento do texto
horizontal para um elemento HTML:
Exemplo 3 – Estilos de Texto
Hora de treinar!
Exercícios:
Mude a cor do paragrafo para azul
Exercícios:
Mude a letra para courier
Exercícios:
Centralizar o paragrafo
Exercícios:
Aumente o tamanho da letra para 200%
Exercícios:
Crie uma página que:
O nome seja: “Uma página mais completa”

Tenha informações sobre o autor, keywords e
descrição.
Tenha cor de fundo azul.
Tenha 2 títulos e para cada um 4 parágrafos. Cada
seção (titulo e seus parágrafos) deverá ser separado
por 3 quebras de linha.
Exercícios:
Para a primeira seção:
O título deve ser verde.
Os 2 primeiros parágrafos devem ser centralizados.
O parágrafo 3 deve ter letra courier.
O parágrafo 4 deve ter tamanho de letra 350%.
Para a primeira seção:

O título deve ter tamanho 150%.
Os 3 primeiros parágrafos devem ser laranjas.
O parágrafo 4 deve ter letra courier.
Formatação de Elementos de Texto
HTML também define elementos especiais, para definir o
texto com um significado especial.
HTML usa elementos como <b> e <i> para formatação de

saída, como negrito ou itálico texto.
Elementos de formatação foram projetados para exibir

especiais tipos de texto.
Formatação de Elementos de Texto
Formatação - Negrito
O elemento HTML <b> define texto negrito, sem
qualquer importância extra.
Formatação – Forte (Importante)
O elemento HTML <strong> define texto forte, com adição de
importância semântica "forte".
Formatação – Itálico
O elemento HTML <i> define texto itálico, sem qualquer
importância extra.
Formatação – Enfatizado (Importante)
O elemento HTML <em> define texto enfatizado, com
importante valor semântico acrescentado.
Formatação – Forte e Enfatizado
Formatação – Pequeno
O elemento HTML <small> define texto pequeno:
Formatação – Marcado
O elemento HTML <mark> define texto marcado ou
destacado:
Formatação – Tachado
O elemento HTML <del> define texto excluído
(removida):
Formatação – Inserido
O elemento HTML <ins> define texto inserido (adicionado):
Formatação – Subscrito
O elemento HTML <sub> define texto subscrito.
Formatação – Sobrescrito
O elemento HTML <sup> define texto sobrescrito.
Formatação – Resumo
Exemplo 4 – Formatação de Texto
Hora de treinar!
Exercícios:
Crie uma página Web com um paragrafo de 10 linhas
sobre a história/propriedades do HTML.
Dentro deste paragrafo utilize todas as tags de

formatação. Utilize cada tag pelo menos uma vez.
Sendo que:
1) Deverá usar cada tag sozinha para formatar um
trecho do paragrafo.
2) Deverá combinar duas ou mais tags para formatar
o mesmo texto mais de uma vez.
Obrigada!
Perguntas?
Email: elda-nunes@hotmail.com

Des - Web - Aula 03 - HTML - Parte - 1 PDF

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

Des - Web - Aula 03 - HTML - Parte - 1 PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Linguagem de Programação II

Aula 03 – HTML – Parte 1

MSc. Elda Nunes de Carvalho

Os elementos não estão conectados linearmente como se

Após 1995, o padrão passou a ser regularizado pela W3C,

Essa versão do HTML pode ser vista apenas como uma

Esta especificação foi superada pela versão 3.2, a qual

A declaração doctype não diferencia maiúsculas de

Ele tem um começo tag <html> e um final tag </ html>.

O elemento de conteúdo é outro elemento HTML (o elemento <body>).

Todos os documentos HTML consistem em elementos HTML aninhados.

Este exemplo contém 4 elementos HTML:

Ele tem um começo tag <h1> e um final tag </ h1>.

O elemento de conteúdo é: Meu primeiro título.

Ele tem um começo tag <p> e um final tag </ p>.

O elemento de conteúdo é: Meu primeiro parágrafo.

O exemplo ao lado funciona

Nunca confie em isso. Pode

<br> é um elemento vazio, sem uma tag de fechamento (o <br> tag

Os elementos vazios podem ser "fechado" na tag de abertura assim: <br

O HTML5 não requer que elementos vazios sejam fechados. Mas se

Tags HTML não distinguem entre maiúsculas e minúsculas:

O padrão HTML5 não requer tags minúsculas, mas W3C

Nos nossos exemplos sempre usaremos Tags minúsculas

Passo 1: Abra o bloco de notas (ou editor de

Uma página HTML que:

A tag <meta> fornece metadados sobre o documento HTML.

Os metadados não serão exibidos na página, mas serão

Os metadados podem ser utilizados pelos navegadores (como

Nota: Os metadados são sempre passados ​como pares nome

Nota: O atributo de conteúdo deve ser definido se o nome ou

Coloque mais informações na sua página HTML:

Coloque o seu nome, palavras chave e descrição da

Mudar o estilo padrão de um elemento HTML, pode ser feito

O nome seja: “Uma página mais completa”

Para a primeira seção:

HTML usa elementos como <b> e <i> para formatação de

Elementos de formatação foram projetados para exibir

Dentro deste paragrafo utilize todas as tags de

Você também pode gostar

Nota: Os metadados são sempre passados como pares nome