Curso Web Designer UTD · 2018-04-03 · Curso Web Designer UTD Aula 02. 3 Conhecendo o HTML....

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


Os documentos HTML podem ser criados utilizando qualquer editor de

texto, como por exemplo o Bloco de Notas.

Extensões: .html, .htm

7


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


9


<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


<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


<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


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;


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


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


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


17

Comentários

Podemos adicionar comentários em um documento HTML dentro das

tags . No entanto, esses comentários são ignorados pelos

navegadores.

18


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


Tıtulos

20


Parágrafos

<p></p>: tag para definição de parágrafo:

<p>Conteúdo</p>➢

21


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>


Links

23


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



25



<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



27


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


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” />


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


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


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


Exemplo - Lista Ordenada

33


Exemplo - Lista Não Ordenada

34


Exemplo - Lista de Termos

35


Listas alinhadas (Lista dentro da lista)

36


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.

http://www.w3schools.com/tags/


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;


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


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">

http://www.w3.org/TR/html4/strict.dtd

http://www.w3.org/TR/html4/loose.dtd

http://www.w3.org/TR/html4/frameset.dtd

http://www.w3.org/TR/html4/frameset.dtd


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">

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd

http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd


<!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


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

http://www.tabelaascii.com/


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


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


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.


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


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


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


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


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”.


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


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”/>


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


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


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


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


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


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 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 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

Curso Web Designer UTD · 2018-04-03 · Curso Web Designer UTD Aula 02. 3 Conhecendo o HTML....

Documents

Transcript of Curso Web Designer UTD · 2018-04-03 · Curso Web Designer UTD Aula 02. 3 Conhecendo o HTML....