Aula de Programação Web (Progweb-02) - HTML Parte 1

IFPA
Tecnologia em Análise e Desenvolvimento de Sistemas (TADS)
Programação para web
02 – HTML (parte 1)
PROFESSOR: Claudio Roberto de Lima Martins

claudiomartins2000@gmail.com
1
Agenda - Assuntos
✧Compreender o uso da linguagem de marcação HTML

✧Criar páginas web em HTML
✧Exercícios
2
Linguagem HTML (Hypertext Markup Language)
✧Define a estrutura de uma página web estabelecendo seu

título, texto, listas, subtítulos, localização de imagens, etc.
✧A partir das páginas você cria uma aplicação web ou
website.
✧É uma linguagem de marcação, não oferecendo nenhum
recurso de programação.
✧A HTML é padronizada e suas especificações mantidas
pelo World Wide Web Consortium (w3c.org).
✧A versão atual (de 2010) é o HTML 5, assim definida em
https://dev.w3.org/html5/html-author/
3
Linguagem HTML
 O código HTML é transportado pelo protocolo HTTP

(HyperText Transfer Protocol) do servidor web ao
browser (cliente).
 HTTP é baseado em um protocolo de solicitação (request) e
resposta (response) entre o browser (cliente) e o servidor
web.
Cliente Servidor
Request
<http://xyz.com/pagina.html>
Browser Servidor Web
Response
<pagina.html>
Evolução do HTML
Criação de uma página HTML
✧ Uma página HTML pode ser criada com uso de qualquer
editor de textos (notepad, notepad++, sublime, etc).
✧O arquivo texto deve ter a extensão “.html” ou “.htm”
✧Para facilitar a construção das páginas, pode ser adotado
um editor para código HTML.
▪ Ex: Dreamweaver, NVU, etc.
✧ Outra forma é usar ambientes integrados de IDE, como
Eclipse, Netbeans e outros.
✧ Para testar um código sem usar um editor local ou
ambiente integrado, há vários websites que permitem
isso.
▪ Ex: JsFiddle (https://jsfiddle.net/ )
6
Estrutura básica de uma página HTML 5
Define o tipo do documento (HTML 5)
declara a codificação de caracteres
Cabeçalho
Documento HTML
Corpo
Estrutura de uma página HTML XHTML
O XHTML, ou eXtensible Hypertext Markup Language, é uma
reformulação da linguagem de marcação HTML 4, baseada em XML.
Representa a última versão antes do HTML 5.
Define o tipo do documento XHTML
Ao usar este modelo XHTML, deve-se usar UTF-8 ou UTF-16 ou

declarar a codificação correta para o documento XML.
Estrutura mínima para o HTML 5
•Este modelo aproveita a capacidade de omitir certas tags para alguns
elementos.
•No mínimo, adicione a declaração “DOCTYPE html” no início da
página.
•Recomendamos evitar esse modelo mínimo.
O que é HTML?
✧HTML (Hyper Text Markup Language) descreve a

estrutura da página/documento web usando marcações.
✧Elementos HTML são blocos de construção de
páginas/documentos HTML e são representados por
“tags” (marcações).
▪ Ex de tags: "heading", "paragraph", "table" .
✧Os browsers (navegadores) não exibem as tags HTML mas
usam os valores dos seus conteúdos para formatarem as
páginas.
10
Exemplos de elementos/tags (usadas no exemplo)
<! DOCTYPE html> declaração que define o documento como HTML5
<html> é o elemento raiz de uma página HTML
<head> elemento contém meta-informação sobre o

documento (serve para controle do browser)
<title> especifica um título para o documento
<body> contém o conteúdo da página visível
<H1> elemento que define um título “grande”
<P> elemento que define um parágrafo
Em HTML, os nomes das tags são insensíveis às maiúsculas e minúsculas

(HTML não é sensível ao “case”).
11
Tags e Atributos
✧Tags (marcações) são representadas por “<...>” e
normalmente finalizadas por </...>
<tag> conteúdo </tag>
Ex de tag com pares de início (abertura) e fim

(fechamento):
<p> texto do parágrafo </p>
Exemplos de tags autocontida (inicia e fecha nela mesma)
<br/>quebra de linha
<hr/>
<img src= "url-imagem" />
12
Elementos autocontidos devem ser fechados
✧Elementos autocontidos (vazios) devem ter uma tag de
fechamento ou a tag de abertura deve terminar com “/>”.
Como exemplo, <br /> para quebra de linha e <hr/> para
linha horizontal.
13
Tags e Atributos
✧Atributos são propriedades que certas tags oferecem. Os
atributos podem apresentar parâmetros.
▪ Exemplo:
<h1 align="center"> titulo 1 centralizado </h1>

atributo parâmetro
<a href = "url">Texto do link </a>

atributo parâmetro
14
Exemplos de tags
Use o jsFiddle para testar os exemplos.
Abra o jsFiddle em https://jsfiddle.net
Tags de Metadados do documento
Elemento Descrição
Representa uma coleção de metadados sobre o documento,
<head> incluindo links para as definições de scripts e folhas de
estilo.
Define o título do documento , apresentado na barra de
<title> título do navegador ou na guia da página. Ele só pode conter
texto e todas as tags contidas não são interpretadas.
<base> Define a URL base para URL relativa na página .
Usado para linkar JavaScript e CSS externos ao
<link>
documento HTML .
Define os metadados que não podem ser definidas
<meta>
usando outro elemento HTML .
<style> Tag usada para escrever CSS dentro do documento HTML.
Comentários em HTML
Os comentários HTML possuem o seguinte sintaxe:




Cabeçalhos com <Hn>
Cabeçalhos são definidos com as tags <h1> a <h6>.
<h1> define o cabeçalho de maior tamanho, enquanto <h6>

define o de menor tamanho.
<h1>Este é um cabeçalho Tipo 1 </h1>
<h2>Este é um cabeçalho tipo 2 </h2>
Tag <font>
A tag <FONT> permite formatar fontes e cores.
Esse elemento não é suportado no HTML5. Em vez disso, use
CSS.
Tags de formatação de frase no HTML5
Tag Descrição
<em> Enfatiza com itálico
<strong> Destaca um texto com negrito
<code> Define um trecho de código (de computador)
<samp> Formata o texto em forma de um programa de computador
<kbd> Formata como máquina de escrever ou de teclado
<var> Define uma formatação de variável.
Tags de formatação no estilos físicos do XHTML
 <b> (bold) negrito

 <i> (italic) itálico
 <tt> fonte de máquina de escrever (monoespaçada)
 <u> (underline, sublinhado) sublinhado
 <s> (strikethrough, tachado)
Tais elementos funcionam, mas não são recomendados

no HTML5. Em vez disso, use CSS.
Atividade prática 1 (cont)
• Agora baixe o arquivo “TEXTO-atividade1.txt” usando o conteúdo para
formatar a página como visto abaixo.
https://raw.githubusercontent.com/cmartins99/programacao-web2017/master/ativ/TEXTO-atividade1.txt
22
Exemplo de formatação usando CSS
✧ Cascading Style Sheets (CSS) é um mecanismo para adicionar estilo
(cores, fontes, espaçamento etc) a um documento web.
✧O CSS descreve como os elementos HTML devem ser exibidos.
https://www.w3schools.com/css/tryit.asp?filename=trycss_default
23
Tags de agrupamento de conteúdo
<p> Define um conteúdo a ser exibido como um parágrafo.
<hr> Representa uma quebra temática entre parágrafos.
<pre> Conteúdo pré-formatado que preserva o formato original.
<blockquote> Representa uma citação.
<ol> Define uma lista ordenada de itens.
<ul> Define uma lista não ordenada.
<li> Define um item de uma lista ol ou de uma ul.
<dl> Representa uma Lista de Definição.
<dt> Representa um item da Lista de Definição <dd>.
<dd> Representa a definição dos termos listados imediatamente antes dele.
<figure> (*) Representa um conteúdo de fluxo, opcionalmente com um subtítulo.
<figcaption> Representa a legenda da tag <Figure>.
<div> Representa um contêiner genérico sem nenhum significado especial.
(*) Elemento novo no HTML5

Tag <P> de parágrafo
✧A tag <P> formata o conteúdo como parágrafo, no qual os
navegadores adicionam automaticamente algum espaço
(margem) antes e depois de cada elemento <p>. As
margens podem ser modificadas com CSS (com as
propriedades da margem).
Atributo Valor Descrição
align left Não é suportado em HTML5 (use CSS).

right Especifica o alinhamento do texto dentro de um
parágrafo
center
justify
25
Linha ou quebra de linha com <HR>
✧ A tag <hr> gera uma quebra temática em HTML5. No
HTML legado <hr/> gera uma linha horizontal.
https://www.w3schools.com/tags/tag_hr.asp 26
<dl> - Lista de definição
✧ A tag <dl> é usada para definir termos, criar textos explicativos,
dicionários, entre outras funções.
Uma lista de definição é composta de duas partes:
▪ Termo com a tag <dt>
▪ Definição com a tag <dd>
Exemplo de Termo e definição única
27
Exemplos de listas de definição (dicionário)
Exemplo de múltiplos termos, definição única
28
Lista Ordenada com <ol>
✧A marca <ol> define uma lista ordenada. Uma lista ordenada pode ser
numérica ou alfabética.
✧ Use a marca <li> para definir os itens da lista.

compact compact Not supported in HTML5.
Formata a lista de forma compactada.
reversed reversed Especifica que a ordem da lista deve ser descendente
(9,8,7 ...)
start number Especifica o valor de início de uma lista ordenada
type 1 Especifica o tipo de marcador a ser usado na lista
A
a
I
i
29
Exemplos de Listas Ordenadas com <ol>
30
Lista não ordenada com <ul>
✧A marca <ul> define uma lista não ordenada.
✧ Use a marca <li> para definir os itens da lista que são rotulados, por
padrão, com “pontos” (bullets).
31
Atividade 2
✧ Use o documento da atividade 1.
✧ Formate as listas como lista não ordenada e ordenada.
Lista não ordenada
Lista ordenada
32
A tag de “link” <a> (anchor) e o atributo “href”
✧A tag <a> representa um hyperlink (link), ligando a outro recurso, que
pode ser uma página HTML, uma imagem, uma trilha sonora, um
clipe, etc.
✧Sintaxe : <a href="url">Texto para ser exibido</a>
Principais atributos
download filename Especifica que o destino será baixado quando um
usuário clicar no hiperlink.
href URL Especifica a URL da página alvo do link.
media media_query Especifica a mídia/dispositivo em que o
documento vinculado é otimizado.
target _blank Especifica onde abrir o documento do link.
_parent
_self
_top
framename
type media_type Especifica o tipo de mídia do documento do link.
33
Exemplos de link com <a>
Esta âncora define um link para o site do IFPA. O página será aberta na mesma
janela corrente :
Neste exemplo, usando target “_blank”, a página do IFPA abrirá em outra janela.
34
Sobre o atributo “href” da tag <a>
✧ O atributo “href” é responsável pelo link definido
na URL da marca <a href="URL">
✧Os seguintes valores de URL são possíveis em href:
▪ Uma URL absoluta - aponta para outro site
Por ex: href = "http://www.example.com/default.htm"
▪ Uma URL relativa - aponta para um arquivo dentro de um
site. Por ex: href = "default.htm“
▪ Vincula a um elemento com uma âncora com o “id”
especificado na página , como href = "# top"
▪ Outros protocolos, como https: //, ftp: //, mailto :, arquivo :,
etc.
▪ Um script , como href = "javascript: alert ('Hello');"
35
Exemplo de href para uma âncora na mesma
página
Ver exemplo em https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_href_anchor
36
Tag <img>
✧ A tag <img> inclui uma imagem em uma página HTML. Na prática, a
imagem não é inseri e sim é referenciada a partir do link da “src”.
✧ A tag <img> possui dois atributos obrigatórios: src e alt.
Dica: Para “linkar” uma imagem para outro recurso, basta pôr a tag <img> dentro de tags <a>.
37
Atributos da Tag <img> (apenas as válidas no HTML5)
alt text Define um texto alternative para tornar a imagem acessível (*)
title text Produz um texto como legenda da imagem (um “hint”).
height pixels Especifica a altura (em pixels) ea imagem.

Identifica uma imagem como sendo um mapa de imagem, no qual
ismap
certas regiões da imagem são mapeadas em coordenadas.
longdesc URL Especifica uma URL para uma descrição detalhada da imagem.
sizes Especifica tamanhos para diferentes layouts de página.
src URL Especifica a URL da imagem.
srcset URL Especifica a URL da image para usar em diferentes situações.
A image é mapeada em áreas na própria página com um marcador

usemap #mapname
<MAP>. O identificador de map é nomeado por “#mapname”.
width pixels Especifica o comprimento da imagem.
Os atributos align, border, hspace e vspace não são suportados no HTML5.
(*) https://tableless.com.br/o-poder-do-atributo-alt/
38
Atividade 3
✧ Baixe e acrescente a imagem “html-css-js-450x365.png”
no documento.
▪ https://raw.githubusercontent.com/cmartins99/programacao-web2017/master/ativ/html-css-js-450x365.png
✧ Crie no final do documento um texto com o seguinte

conteúdo:
▪ “Este curso é patrocinado pelo IFPA/Belém.”
✧ Utilize este texto para criar um “link” para a URL do
IFPA/Belém: http://belem.ifpa.edu.br/
39
Tag <iframe>
✧ A tag <iframe> define um quadro (frame) dentro da página.
✧ Um frame é usado para embutir outro documento dentro da página
HTML corrente.
✧ Seu uso é considerado uma má-prática pois eles não são acessíveis
nem indexáveis por motores de busca. Mas ainda assim são úteis
quando é necessário integrar vários conteúdos de forma simples e
segura em uma mesma página.
40
<div> e <canvas> como alternativas para <iframe>
✧ O uso de <iframe> cria alguns problemas técnicos (por
exemplo, acessibilidade). Como possíveis substitutos para
frames e iframes você pode adotar:
▪ <div>: fazendo bom uso de CSS e manipulação dos objetos da
página (DOM), divs tornam-se framesets mais flexíveis.
▪ <canvas>: ideal no caso de framesets para multimídia, que usam
vídeos e imagens dinâmicas (animações) e gráficos.
41
Tag <div>
✧ A tag <div> define uma divisão ou seção em um documento HTML.
✧ É usado para agrupar elementos em blocos e permitir a formatação
do conteúdo via CSS. É o elemento fundamental para o padrão
“tableless” ou também chamado “responsivo”.
Formata o texto do bloco na cor azul

(“FF” é o código hexadecimal da cor
azul em RGB)
42
Elementos de divisão com semântica
✧ A tag <div> permite dividir o conteúdo em seções/blocos mas são
genéricas, não fornecendo semântica (significado) de conteúdo.
✧O HTML5 fornece novos elementos para realizar a divisão de
conteúdo com semântica, como:
Define um grupo de títulos ou o cabeçalho de uma determinada
HEADER
seção.
FOOTER Define o rodapé das seções ou da página.
NAV Define um grupo ou bloco de links de navegação.
Define um elemento lateral que pode conter blocos de navegação

ASIDE (NAVs), citações e outras informações que costumamos colocar em
uma sidebar.
ARTICLE Define a área onde há um artigo, texto, redação, conteúdo e etc…
SECTION Define um bloco ou um grupo de um assunto específico.
https://tableless.com.br/sections-html5/
43
Atividade 4

✧ Para cada seção do documento crie uma divisão
semântica:
▪ Bloco “header”: seção do título “Curso para "Desenvolvedor Web”
▪ Bloco 1: seção “O que aprenderei?”
▪ Bloco 2: seção “Descrição”
44
Tabela com <table>
✧A tag <table> define uma tabela HTML.
✧Uma tabela HTML consiste no elemento <table> e um ou mais
elementos <tr>, <th> e <td>.
✧O elemento <tr> define uma linha de tabela, o elemento <th>
define um cabeçalho de tabela e o elemento <td> define uma
célula de tabela.
✧Uma tabela HTML mais complexa também pode incluir elementos
<subtítulo>, <col>, <colgroup>, <thead>, <tfoot> e <tbody>.
Tabelas HTML não devem ser usadas para o layout da página!
Historicamente, alguns designers web usaram tabelas HTML como forma de
controlar o layout da página. No entanto, há uma variedade de alternativas
para usar tabelas HTML para layout, principalmente usando CSS.
45
Tabulação de dados - elementos
Representa uma tabulação de dados - ex: uma tabela de informações
<table>
expressada em duas dimensões através de linhas e colunas.
<caption> Representa o título da tabela.
<colgroup> Representa um ou mais conjuntos de colunas em uma tabela.
<col> Representa uma coluna da tabela.
Representa o bloco de linhas que descreve os dados concretos de uma
<tbody>
tabela.
Representa o bloco de linhas que descreve os cabeçalhos de uma
<thead>
tabela
<tfoot> Representa o bloco de linhas que descreve o rodapé de uma tabela.
<tr> Representa uma linha de células em uma tabela.
<td> Representa uma célula de dados em uma tabela.
<th> Representa uma célula de cabeçalho em uma tabela.
46
Exemplo de tabela com elementos
47
Atributos da tag <table> e formatação CSS
✧ Os atributos "align", "bgcolor", "border", "cellpadding",
"cellspacing", "frame", "rules", "summary", e "width" não são
suportados em HTML5.
A formatação da tabela deve

ser feita com CSS.
Exempo de um estilo CSS para uma
<table> padrão
Disponível no w3Schools.com
Ver exemplos de tabela em https://www.quackit.com/html/tutorial/html_tables.cfm

48
Atividade prática: Usando o Netbeans
✧ Esta atividade você criará um projeto HTML5 no Netbeans.
✧Para isso, siga os passos a seguir.
▪ Selecione Arquivo > Novo Projeto para abrir o assistente de Novo
Projeto.
▪ Selecione Aplicação em HTML5 na categoria HTML/JavaScript. Clique
em Próximo.
49
•Especifique um Nome e um Local para o projeto. Clique em Finalizar.
Para este exercício, o nome não é importante.
50
• O Netbeans constrói a estrutura do projeto HTML5 e cria um
arquivo “index.html” na pasta “root” (raiz) do projeto.
51
• Para ver a página “index.html” no browser, execute a aplicação
clicando no botão “Executar” (Run)
52
Atividade 5
✧ Crie uma nova página HTML com o nome “grade.html”
que conterá a tabela com a grade de assuntos do curso:
•Crie um link na página principal do site para apontar para a grade curricular do curso
(grade.html)
53
Referências
✧ Documentação HTML5 da Microsoft. Disponível em
https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5
✧ Tutorial HTML5 da w3Schools. Disponível em
https://www.w3schools.com/html/default.asp
✧Apostila “APOSTILA DESENVOLVIMENTO WEB COM HTML, CSS E
JAVASCRIPT”da Caelum. Disponível em
https://www.caelum.com.br/apostila-html-css-javascript/
✧ Tutorial Netbeans com HTML5. Disponível em
https://netbeans.org/kb/docs/webclient/html5-gettingstarted_pt_BR.html
✧
54

Aula de Programação Web (Progweb-02) - HTML Parte 1

Enviado por

Dados do documento

Título original

Direitos autorais

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Aula de Programação Web (Progweb-02) - HTML Parte 1

Enviado por

Direitos autorais:

IFPA

Tecnologia em Análise e Desenvolvimento de Sistemas (TADS)

Programação para web

PROFESSOR: Claudio Roberto de Lima Martins

✧Compreender o uso da linguagem de marcação HTML

✧Define a estrutura de uma página web estabelecendo seu

 O código HTML é transportado pelo protocolo HTTP

declara a codificação de caracteres

Ao usar este modelo XHTML, deve-se usar UTF-8 ou UTF-16 ou

✧HTML (Hyper Text Markup Language) descreve a

<! DOCTYPE html> declaração que define o documento como HTML5

<html> é o elemento raiz de uma página HTML

<head> elemento contém meta-informação sobre o

Em HTML, os nomes das tags são insensíveis às maiúsculas e minúsculas

Ex de tag com pares de início (abertura) e fim

<h1 align="center"> titulo 1 centralizado </h1>

<a href = "url">Texto do link </a>

<h1> define o cabeçalho de maior tamanho, enquanto <h6>

 <b> (bold) negrito

Tais elementos funcionam, mas não são recomendados

(*) Elemento novo no HTML5

align left Não é suportado em HTML5 (use CSS).

Exemplo de Termo e definição única

Exemplo de múltiplos termos, definição única

Atributo Valor Descrição

Lista não ordenada

Ver exemplo em https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_href_anchor

title text Produz um texto como legenda da imagem (um “hint”).

height pixels Especifica a altura (em pixels) ea imagem.

srcset URL Especifica a URL da image para usar em diferentes situações.

A image é mapeada em áreas na própria página com um marcador

✧ Crie no final do documento um texto com o seguinte

Formata o texto do bloco na cor azul

Define um elemento lateral que pode conter blocos de navegação

ARTICLE Define a área onde há um artigo, texto, redação, conteúdo e etc…

SECTION Define um bloco ou um grupo de um assunto específico.

✧ Use o documento da atividade 1.

A formatação da tabela deve

Ver exemplos de tabela em https://www.quackit.com/html/tutorial/html_tables.cfm

Você também pode gostar