Curso Web DesignerUTDAula 02
3
Conhecendo o HTML
Objetivos da Aula
parte 1/2
4
➢ Conhecendo a sintaxe;
➢ Evolução HTML x HTML5;
➢ O futuro e o presente da Web com o HTML5;
➢ Conhecendo suas características;
➢ Tags doctype, head e body;
➢ Diferenças entre as versões de HTML;
Objetivos da Aula
parte 2/2
5
➢ Criando sua primeira página HTML;
➢ Novos elementos e atributos;
➢ Elementos que saíram ou foram descontinuados;
➢ Criando um markup semântico;
➢ Conhecendo elementos block e inline;
➢ Criando listas.
6
Conhecendo a sintaxe
Conhecendo a sintaxe
Os documentos HTML podem ser criados utilizando qualquer editor de
texto, como por exemplo o Bloco de Notas.
Extensões: .html, .htm
7
Conhecendo a sintaxe
Todo documento HTML possui uma estrutura básica:
➢ <html></html>: marca o início e o fim do documento HTML;
<head> </head>: delimita a área de cabeçalho do documento;➢
<title></title>:
documento;
utilizada dentro da tag <head>, define o título do➢
<body></body>: marca o início e o fim do conteudo (corpo), onde
estarão textos, imagens e links da sua página.➢
8
Conhecendo a sintaxe
9
Conhecendo a sintaxe
<HTML> Os elementos HTML, com exceção do DOCTYPE,
devem ser inseridos no conteudo do elemento html.
<HEAD> Esse elemento e aberto
deve conter exatamente
e fechado com a tag <html> e
um elemento head seguido de
um elemento body.<BODY>
10
Conhecendo a sintaxe
<HTML> A Tag HEAD e onde fica toda a parte inteligente da página.
No HEAD ficam os metadados que são informações sobre
a página, e o conteudo ali publicado.<HEAD>
O elemento HEAD e aberto e fechado pelas tags <head> e
</head>, respectivamente.
<BODY>Obrigatoriamente, salvo poucas exceções, o corpo do
head deve conter uma ocorrencia do elemento title.
11
Conhecendo a sintaxe
<HTML> O conteudo de uma página
corpo do elemento body.
web deve ser definido no
Por exemplo, podemos inserir no corpo do body:<HEAD>cabeçalhos,
componentes.
textos, listas, tabelas, entre outros
<BODY> Esse elemento e
pela tag </body>.
aberto pela tag <body> e fechado
12
Conhecendo a sintaxe
Criando um documento HTML:
13
Salve o documento nas
extensões .html ou .htm;
Abra o arquivo no seu
navegador (browser).
Escreva a estrutura de
um documento HTML;Abra um editor de texto;
Conhecendo a sintaxe
O texto em HTML e formatado Tambem podemos utilizar
como:
atributosclasses
únicosde acordo com os chamados de vários tipos,elementos
eles:
da formatação. São (Class)
(ID).
ou Identificadores
Marca de IInnííccio
Conteudo
Marca de Fim
im
14
Conhecendo a sintaxe
Tags
As tags dizem ao web browser como o texto e as imagens serão
exibidas. Elas são representadas pelos sinais < >.
O fechamento de uma tag deve ser feito usando a barra / ,
Exemplos:
indicando
que a tag está finalizando a marcação de um texto.
<p> Texto
<b> Texto
<br/>
</p>
</b>➢➢
➢
15
Conhecendo a sintaxe
Pontos importantes:
A ordem das tags devem ser obedecidas;➢➢
➢
As tags devem ser abertas e fechadasCada elemento do HTML possui um
definido.
corretamente;
proposito bem
Nem todas as tags fecham com </nomedatag>,➢ algumas fecham na declaração dela mesma.
16
Conhecendo a sintaxe
17
Conhecendo a sintaxe
Comentários
Podemos adicionar comentários em um documento HTML dentro das
tags <!-- e -->. No entanto, esses comentários são ignorados pelos
navegadores.
18
<!-- Seu comentário -->
Conhecendo a sintaxe
Tıtulos
Assim como em um livro, uma página web pode conter uma hierarquia de
títulos para estabelecer uma divisão do seu conteudo:
<h1>Título</h1>➢➢
➢
➢
➢
➢
<h2>
<h3>
<h4>
<h5>
<h6>
SubtítuloSubtítulo
Subtítulo
Subtítulo
Subtítulo
nívelnível
nível
nível
nível
2</h2>
3</h3>
4</h4>
5 </h5>
6</h6>
19
Conhecendo a sintaxe
Tıtulos
20
Conhecendo a sintaxe
Parágrafos
<p></p>: tag para definição de parágrafo:
<p>Conteúdo</p>➢
21
Conhecendo a sintaxe
Links
<a></a>: tag que cria um link com outro documento ou âncoras:
href= Destino do link
Para envio de e-mail, utilizar o valor “mailto:” na propriedade href;
link externo, utilizar a URL absoluta.
e, para
22
➢ <a href=”url”>Texto</a>
Conhecendo a sintaxe
Links
23
Conhecendo a sintaxe
Formatação de caracteres
<b></b>: tag para texto em negrito;
<i></i>: tag para texto em itálico;
<u></u>: tag para texto sublinhado;
<strong></strong>: tag para enfase em
➢➢
➢
➢
➢
➢
negrito;
<em></em>: tag para enfase em itálico;
<br />: tag para quebra de linha.
24
Conhecendo a sintaxe
Formatação de caracteres
25
Conhecendo a sintaxe
Formatação de caracteres
<small></small>: tag para texto pequeno;
<big></big>: tag para texto grande;
<sub></sub>: tag para texto subscrito;
<sup></sup>: tag para texto sobrescrito;
<code></code>: tag para codigo de programa;
➢➢
➢
➢
➢
➢<pre></pre>: tag para texto pre-formatado.
26
Conhecendo a sintaxe
Formatação de caracteres
27
Conhecendo a sintaxe
Outros Elementos
<div></div>: tag que define um bloco de elementos na página HTML;➢➢<span></span>: tag que, em conjunto
um texto. Ela por si só não faz alteração<address></address>: tag que define
proprietario/autor da página;
com o estilo, pode formatar
alguma no codigo;
informações de contato do➢
<blockquote></blockquote>:
margens.
tag que define uma citação longa com➢
28
Conhecendo a sintaxe
Imagens
<img />: tag que insere uma imagem:
src = [URL] – Indica o caminho da imagem.
alt = [texto] – Especifica um texto para imagem.
height = [pixel ou %] – Especifica a altura da imagem (opcional);
width = [pixel ou %] – Especifica a largura da imagem (opcional).
29
➢ <img src=”imagem.jpg” alt=”Descrição” width=”200” height=”100” />
Conhecendo a sintaxe
Imagens
O browser procura a imagem no diretorio atual. Caso a imagem esteja em
um diretorio diferente ao do documento, será necessário indicar o
diretorio.
30
Conhecendo a sintaxe
Imagens
Caso o
definido
arquivo HTML não
“alt”:
encontre a imagem e exibido o que foi
na propriedade
Ela tambem e utilizada por leitores de tela, ajudando assim na
acessibilidade.
31
Conhecendo a sintaxe
Listas
Existem alguns tipos de listas no HTML com seus respectivos
são eles:
elementos,
➢ <ol></ol>: tag para criar listas ordenadas (ol = ordered list);<ul></ul>: tag para criar listas não ordenadas (ul = unordered
<li></li>: tag para criar os itens da lista;
list);➢➢
➢
➢
➢
<dl></dl>: tag para criar as listas definidas / listas
<dt></dt>: tag que define o termo da lista;
<dd></dd>: tag que define o subitem do termo.
de termos;
32
Conhecendo a sintaxe
Exemplo - Lista Ordenada
33
Conhecendo a sintaxe
Exemplo - Lista Não Ordenada
34
Conhecendo a sintaxe
Exemplo - Lista de Termos
35
Conhecendo a sintaxe
Listas alinhadas (Lista dentro da lista)
36
Conhecendo a sintaxe
As TAGs HTML possuem alguns tipos de atributos que definem as
características de cada TAG. São eles:
http://www.w3schools.com/tags/
37
Atrtribibutotos Padrrões
Atrtribibutotos Opcionaisis
AAtrtribibuutotossReeq
quueerrididoosAtrtribibutotos de Eventoto
➢ Id;➢ Class;➢ Title;➢ Style e etc.
➢ Name;➢ Type;➢ Value e etc.
➢ Src;➢ Alt e etc;
➢ Onmouseover;➢ Onkeypress;➢ Onclick e etc.
Conhecendo a sintaxe
A linguagem HTML e regida por um DTD (Document Type Definition).
Este documento define os elementos, atributos e entidades que fazemparte do vocabulário de uma linguagem de marcação. Ele identifica:
38
Quais entidades existentes e suas representações.
Quais atributos podem ser usados com cada elemento;
Como os elementos podem ser utilizados em conjunto;
Quais elementos compõem o vocabulário de uma linguagem de marcação;
Conhecendo a sintaxe
Atenção
Todos os documentos HTML devem ter uma
declaração do DOCTYPE. E, para um navegador
devemosexibir corretamente uma página web,
informar o tipo
DOCTYPE>.
de documento com a declaração <!
39
Conhecendo a sintaxe
Veja a declaração <!DOCTYPE> para os principais tipos de documentos:
HTML
4.01 XHTML
1.0 e 1.1
40
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Conhecendo a sintaxe
Veja a declaração <!DOCTYPE> para os principais tipos de documentos:
HTML
4.01 XHTML
1.0 e 1.1
41
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Conhecendo a sintaxe
<!DOCTYPE html>
Para uma apresentação correta, o browser precisará
caracteres que utilizará no documento. São eles:
saber os tipos de
UTF
TransformationISO-8859-1 UTF-8 (Unicode Format)
42
Conhecendo a sintaxe
ISO-8859-1
Numeros de 0 a 9, caracteres UPPERCASE & Lowercase
ASCII (http://www.tabelaascii.com/) e Símbolos.North America, Western Europe, Latin America, the Caribbean, Canada
da tabela
e Africa.
UTF (Unicode Transformation Format) padroniza todos os caracteres,
numeros e símbolos existentes nas ISOs.
UTF-8 e o mais conhecido e utilizado para codificar caracteres de
páginas e e-mail. Use o UTF-8 !
43
Conhecendo a sintaxe
Tag meta
A tag meta define as informações do conteudo da página (metadados).
Esses valores
apresentados
nãona
vez,
sãotela,
são É necessário que estejam
head.mas por sua
sempre dentro da taglidos pelos servidores,
serviços de buscas, etc.
44
Conhecendo a sintaxe
Propriedades da tag html
A propriedade lang especifica o codigo da linguagem para o documento:
A propriedade dir especifica a direção do codigo para o documento:
45
ltr (Left to Right) ou rtl (Right to Left)
“pt” = Portugues; “en” = English
Faça agora os exercícios propostos para a sala de aula
• Acesse o site neloliveira.com.br/• Acesse o link Cruso Web Designer que está no menu
Projetos• Realize o exercício Aula 01
46
Evolução HTML x HTML5
Evolução HTML x HTML5
HTML5 esuas mudanças
47
Enquanto o W3C focava suas atenções para a
criação da segunda versão do XHTML, um grupo
chamado Web Hypertext Application Technology
Working Group ou WHATWG trabalhava em uma
versão do HTML que trazia mais flexibilidade para a
produção de websites e sistemas baseados na web.
Evolução HTML x HTML5
Em 2004, o WHATWG foi fundado por desenvolvedores de empresas
como: Mozilla, Apple e Opera.
Eles não estavam felizes com o caminho que a Web
tomava e nem com o rumo dado ao XHTML. Por essemotivo, estas organizações se juntaram para escrever o que
seria chamado hoje de HTML5.
48
Evolução HTML x HTML5
Por volta de 2006, o trabalho do WHATWG passou a ser conhecido no
mundo e principalmente pelo W3C. Ambas trabalhavam separadamente,mas com o tempo o W3C passou a reconhecer o trabalho do grupo.
Em Outubro de 2006, Tim Berners-Lee
anunciou que trabalharia juntamente
com o WHATWG
na produção do
HTML5,
em detrimento do XHTML2.
49
Evolução HTML x HTML5
Mesmo
com as
com a junção, o XHTML seria mantido paralelamente de acordo
mudanças causadas no HTML.
Em 2009 o grupo que estava
do XHTML2 foi descontinuado.
cuidando
E hoje o HTML5 e a nova versão do HTML4.
50
Evolução HTML x HTML5
Enquanto o WHATWG define as regras de marcação que usaremos no
daHTML5 e no XHTML, eles tambem definem APIs
arquitetura web.
que formarão a base
Um dos principais objetivos do HTML5 e:
Facilitar a manipulação do
as
elemento, possibilitando o
dedesenvolvedor a modificar características dos objetos
forma não intrusiva, e que seja transparente para o usuário final.
51
Evolução HTML x HTML5
Ao contrário das versões anteriores, o HTML5 fornece ferramentas paraa CSS e ao Javascript para fazerem seu trabalho da melhor maneira
possível.
O HTML5
permite, por meio de suas APIs, a manipulação das
características destes elementos, de forma que o website ou a aplicação
continue
scripts.
leve e funcional, sem a necessidade de criar grandes blocos de
52
HTML5 = Website leve e funcional.
Evolução HTML
x HTML5
O que se seguiu foi uma onda de indignação publica a partir de alguns
web designers e desenvolvedores. Eles"recomendação" significava, mas sabiam ate
o ano de 2022.
não
que
entendiam o que essa
não poderiam esperar
53
Em uma entrevista, Ian Hickson mencionou que no
ano de 2022, o HTML5 se tornaria uma “proposta
de recomendação”.
Evolução HTML x HTML5
A data que realmente importa para o HTML5
e 2012,
um
quando a
especificação
recomendação."
foi devidamente tornar-se "candidato
O WHATWG tem mantido o foco para manter a retrocompatibilidade.➢Nenhum site precisará ser refeito totalmente para se adequar aos
novos conceitos e regras.
O HTML5
está sendo criado para que
a
seja compatível com os➢ browsers recentes, possibilitando utilização
primordial
das novas
características imediatamente. A regra entre os
desenvolvedores web Don’t Break The Web e seguida a risca.
54
Evolução HTML x HTML5
Alem de disso, o HTML passou por várias mudanças na declaração de
alguns elementos, entre eles a nossa Metatag Charset, Tag Link, Tag
Script entre outras novas features.
55
Metatag CharsetNas versões anteriores ao HTML5, essa tag era escrita dessa forma:<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”/>
O novo codigo para o HTML5 resumiu bastante as coisas, retirou todo
o codigo inutil e deixou a linha seguinte assim:
<meta charset=”utf-8”/>
Evolução HTML x HTML5
A estrutura básica do HTML5 continua sendo praticamente a mesma das
versões anteriores, mas com menos codigo. Veja a estrutura básica
implementada na versão 5:
56
57
HTML5 e o futuro da Web
HTML5 e o futuro da Web
O futuro e o presente da Web com o HTML5
Desde que os primeiros sites foram
exibidos no domínio publico da internet,
muita coisa já mudou e evoluiu.
Mas, o que se mantem daquele tempo ate hoje e o HTML. A linguagem
de marcação utilizada para exibir os dados formatados, de forma
estruturada como vemos hoje, pode ser considerado um sobrevivente.
58
Pad ões
HTML5 e o futuro da Web
Atualmente cada vez mais navegadores implementam recursos em
HTML5.
Ficou claro que todos compraram a ideia, consequencia disso,
e que já existem muitas coisas em HTML5.
59
Padrões
➢ É possível ter uma unica web onde todos podem desenvolver
seguindo o mesmo padrão.
➢ O mais importante e que esses padrões trabalham
individualmente com uma rede de conexão ligada com CSS,
mais um motivo para que todos aceitem a linguagem.
Visualiz
de pági
HTML5 e o futuro da Web
Para o usuário comum, a principal mudança e que o HTML5 dispensa a
instalação de plugins para as seguintes atividades:
Estas e outras atividades ficaram mais simples com a linguagem. Em
dispositivos moveis, por exemplo, e possível acessar a internet com
muita rapidez.
60
Assistir vídeos em
diferentes formatos.
Visualizar Elementos de páginas da web
HTML5 e o futuro da Web
O HTML5 conta com tags canvas para as seguintes ações:
11
Renderizar
22
33Codigos que incorpore vídeos APIs de
imagens; em páginas da internet; geolocalização;
44
55
66Caching de aplicações Bancos de dados com Palavras-chave
e SQL.(que permite o acesso a
aplicativos mesmo offline);entradas de valores;
Tudo utilizando um sistema mais simples e padronizado.
61
65
Novos Elementos
Novos Elementos
Elementos de Seção
O DIV tem a função de criar divisões e quando
dividimos as áreas do layout em seções.
criamos um website
O problema do DIV, e que ele não tem nenhum significado semântico.
Os sistemas de busca,
trata de um rodape, um
por exemplo, não permitem saber quando se
cabeçalho ou um sidebar; porque tudo e feitocom DIVs. Com isto, colocamos o mesmo nível hierárquico de
informação para todas as seções.
66
Novos Elementos
Para resolver esse problema, foi criado um conjunto novos de
elementos que alem de dividir as áreas do layout, tambem entrega o
significado. Esses elementos são chamados de Conteúdos
ou Sectioning Content.
de Seções
Esse conjunto de tags tem a seguinte função:
Dividir as áreas do layout como fazıamos
com os DIVs, mas cada uma delas
carregando um significado especıfico.
67
Novos Elementos
Entenda agora o que significa cada um destes elementos:<main></main>: a tag main e específica para o principal
do documento (site);
conteudo➢
<section></section>: a tag section define uma nova seção generica
no documento;
<nav></nav>: o elemento nav representa uma seção da página que
contem links para outras partes do website. Nem todos os grupos de
links devem ser elementos nav, apenas aqueles grupos que contem
links importantes;
<article></article>: o elemento article e onde colocamos o texto ou
a informação principal.
➢
➢
➢
68
Novos Elementos
<aside></aside>: o
informação relativo ao
<header></header>:
elemento aside representa um bloco de➢ conteudo principal;
o elemento header representa um grupo de➢ introdução ou de elementos de navegação. Ele pode ser utilizado
para agrupar índices de conteudos, campos de busca ou ate mesmo logos;
<footer></footer>: o elemento footer representa literalmente o➢ rodape
HTML.
seção.
da
Ele
página. Seria o ultimo elemento antes
não precisa aparecer necessariamente
de
no
fechar a tag
final de uma
69
70
Elementos descontinuados
Elementos descontinuados
Elementos que saıram ou foram descontinuados
Esses elementos foram descontinuados porque os seus
apenas visuais:
efeitos são
basefont, big, center, font, s, strike, tt, u
Já esses elementos foram descontinuados porque ferem os princípios
de acessibilide e usabilidade:
frame frameset, noframes
71
72
Elementos block e inline
Elementos block e inline
Todos os elementos HTML, podem
comportamento visual CSS:
ser separados em dois grupos de
Elementos bloco (block) Elementos em linha (inline)
Seja em bloco ou em linha, o comportamento visual do elemento e
outras características mudam.de exibição de cada elemento a
outro grupo.
Apesar da possibilidade de mudar o modo
com o CSS, cada tag por padrão pertence
73
Elementos block e inline
Elementos bloco (block) ocupam todo o espaço horizontal disponível, e
iniciam uma nova linha no documento. Novos elementos
proxima linha livre.
irão começar na
Veja alguns exemplos de elementos bloco:
div (division, ou divisão, tag bloco generica);
h1 ate h6 (títulos);
p (parágrafo);
➢➢
➢
➢ul e ol (lista não ordenada / lista ordenada), dentre outros.
74
Elementos block e inline
Elementos em linha (inline) ocupam apenas o espaço necessário e não
iniciam uma nova linha.
porque podem aparecer
São chamados elementos em linha, justamente
na mesma linha de outros elementos.
Exemplos de elementos em linha:
span (tag em linha generica);
strong (destaca importância,
a (âncora, links);
img (imagem), dentre outros.
➢➢
➢
➢
enfase);
75
Próximos Passos
Para que voce tenha um melhor
seguintes atividades:
aproveitamento do curso, participe das
Aula: HTML5 e suas APIs
Faça a leitura dos slides;Assistir a Videoaula; Realizar
Laboratorio e Teste Faça os
exercício propostos
➢➢
➢
➢
de
do
Conhecimento;
Projeto Dexter.
Mãos à obra!
76
Top Related