html HyperText Mark-up Language Linguagem de formatação de documentos

(1)

html

HyperText Mark-up Language Linguagem de formatação de documentos

(2)

Linguagem e Documentos HTML

Documento HTML

Index.txt

Index.html

(3)

HTML = HyperText Markup Language

Linguagem e Documentos HTML

(4)

HTML = HyperText Markup Language

T

exto em que se pode clicar para aceder a um novo documento.

É uma referência à capacidade das páginas Web conterem links umas para as outras.

Linguagem e Documentos HTML

(5)

Marcadores ( Tags ) que aplicam formatações convencionadas a texto simples.

Linguagem e Documentos HTML

(6)

Referência ao facto de o HTML ser considerado uma linguagem de programação.

Linguagem e Documentos HTML

(7)

HTML5

Web Technologies

html 5 Markup Language

CSS 3 Style Sheets

JavaScript

(8)

Fases para a criação de um website

1. Criação do documento HTML

Notepad, DreamWeaver, VisualStudio,etc 2. Registar um nome de domínio

.com, .net, .pt

3. Contratar o Alojamento

Onde hospedar os ficheiros do seu site

(9)

Editores de documentos - exemplos

 Editores de texto

 Notepad

 Notepad ++

 Editores WYSIWYG

("What You See Is What You Get“)

 Dreamweaver

 Visual Studio

(10)

Regras básicas

html é uma sequência de texto que se encontra definido entre um conjunto de símbolos que designam por tags ou marcadores.

(11)

Regras básicas

html é uma sequência de texto que se encontra definido entre um conjunto de símbolos que designam por tags ou marcadores.

Os tags indicam o local onde deve ser aplicada a formatação:

Todos os artigos em saldo

Itálico

(12)

Início da formatação em itálico

Regras básicas

html é uma sequência de texto que se encontra definido entre um conjunto de símbolos que designam por tags.

Todos os artigos em saldo

Fim da

formatação em itálico

(13)

Regras básicas

Todos os artigos em saldo

TAG ou Marcador

TAG

(14)

Regras básicas

Todos os artigos em saldo

ELEMENTO

(15)

Regras básicas

Um elemento provoca uma alteração na página html e pode ter um TAG inicial e um TAG final.

Formata o texto em itálico

(16)

Regras básicas

Para alguns elementos o tag final é opcional:

Formata o texto em itálico

Formata o texto em itálico

(17)

Regras básicas

Para alguns elementos o tag final é opcional e para outros é obrigatório.

<table>

…

</table>

(18)

Regras básicas

Para alguns elementos o tag final é opcional e para outros é obrigatório.

Outros elementos não têm tag final.

(19)

Elementos que contêm outros

Num documento html, uma tabela é um elemento. Esse elemento pode conter outros elementos, por exemplo, as linhas da tabela.

<table>

<tr>

</tr>

</table>

(20)

ELEMENTOS

 Uma lista numerada é um elemento. Cada item da lista é um elemento contido no elemento que

define a lista.

(21)

Regras básicas

 Um documento html é constituído por um

conjunto de elementos, representados por uma sequência de símbolos – TAG

(22)

Regras básicas

 Cada TAG é sempre escrita entre o símbolo < e o símbolo >

(23)

Regras básicas

 Grande parte das TAGs têm que ser iniciadas e finalizadas, utilizando o caracter /

 Uma TAG pode conter outras TAGs. A finalização das TAGs é na ordem inversa da sua criação

(24)

ELEMENTOS vs TAGS

Num documento html, cada elemento é representado por uma sequência de símbolos que o identificam. Essa sequência de símbolos é designada por tag.

Um parágrafo de texto é um elemento.

Esse elemento é representado pelo tag inicial e pelo tag final . Entre o tag inicial e o tag final, pode ser colocado o texto do parágrafo.

Este texto é um parágrafo.

TAG INICIAL

TAG FINAL

(25)

ELEMENTOS vs TAGS

BLOCO DE

CONTEÚDO ELEMENTO

Num documento html, cada elemento é representado por uma

sequência de símbolos que o identificam. Essa sequência de símbolos é designada por tag.

Um parágrafo de texto é um elemento.

Esse elemento é representado pelo tag inicial e pelo tag final

. Entre o tag inicial e o tag final, pode ser colocado o texto do parágrafo.

Este texto é um parágrafo.

(26)

Regras básicas

 Deve criar o hábito de escrever as TAGs com letra minúscula

 As linhas de comentário tem um tag inicial <! - - e um tag final - - >

Este é um parágrafo

(27)

Regras básicas

3 tipos de elementos:

 TAG FINAL obrigatório-explo:

<table>... </table>

 TAG FINAL opcional-explo:

... []

 Sem TAG FINAL – explo:

<hr/>

(28)

Elementos e Atributos

<ELEMENTO atributo1=valor1

atributo2=valor2...

atributon=valorn...>

...

</ELEMENTO>

Os elementos podem ter atributos e o seu respectivo valor

(29)

Elementos e Atributos

atributo2=valor2...atributon=valorn...>

...

</ELEMENTO>

<P ID=p1

CLASS=“Paragrafotexto” ALIGN=“left”

TITLE=“Parágrafo Importante”>Texto que aparece na página do documento.

(30)

Elementos e Atributos

...

</ELEMENTO>

<P ID=p1

As aspas não são obrigatórias mas devem ser utilizadas sobretudo

quando o valor do atributo é composto mais de uma palavra

(31)

Identificação Interna do parágrafo.

Útil quando utilizadas Style-Sheets.

...

</ELEMENTO>

<P ID=p1

Elementos e Atributos

(32)

...

</ELEMENTO>

<P ID=p1

TITLE=“ParagrafoImportante”>Texto que aparece na página do documento.

Define o formato de alinhamento do parágrafo.

Elementos e Atributos

(33)

...

</ELEMENTO>

<P ID=p1

TITLE=“ParagrafoImportante”>Texto que aparece na página do documento.

Elementos e Atributos

Cria uma etiqueta

(34)

Estrutura do documento base

html

head

body

Define o início e o fim do documento

Cabeçalho – informações sobre o documento

Contém o conteúdo do documento Define a versão do HTML doctype

(35)

Indica o tipo de standard ou versão do html a cuja conformidade o documento obedece.

<!DOCTYPE html>

html 5

1 doctype

Estrutura do documento base

(36)

<!DOCTYPE html>

<html>

</html>

html 5

Início e fim do documento html

Designa-se por elemento raíz ou root element.

2 html

Estrutura do documento base

(37)

<!DOCTYPE html>

</html>

html 5

Definir o idioma principal do documento.

Não indica a codificação de caracteres da página.

3 lang

Estrutura do documento base

(38)

<!DOCTYPE html>

<head>

</head>

</html>

html 5

Um documento encontra-se dividido em duas grandes secções:

HEAD

Esta secção pode incluir:

•Um titulo para o documento

•Scripts de diversas linguagens

•Estilos

•Metadata

•Links para outros documentos

•Não é uma secção obrigatória 4

head

Estrutura do documento base

(39)

<!DOCTYPE html>

<head>

<title>Meu documento html</title>

</head>

</html>

html 5

Titulo do documento

“Meu documento html” 5

title

Estrutura do documento base

(40)

<!DOCTYPE html>

<head>

</head>

<body>

Escrever directamente sobre o documento.

</body>

</html>

html 5 title

Estrutura do documento base

(41)

<!DOCTYPE html>

<head>

<link rel=“stylesheet”href=“estilo.css”>

</head>

</html>

html 5

Ligações para outros documentos, neste caso, uma página externa de estilos.

(Voltamos aos estilos mais tarde !!!!) 6

link

Estrutura do documento base

(42)

<!DOCTYPE html>

<head>

</head>

</html>

html 5

É também no HEAD que se inclui a codificação de caracteres.

A definição correcta da codificação de permite a utilização de símbolos específicos de um determinado idioma de acordo com um determinado layout de teclado.

7

Estrutura do documento base

(43)

<!DOCTYPE html>

<head>

<meta name=“description” content=“Descrição do conteúdo da página”>

<meta name=“keywords” content=“HTML, CSS, Aulas”>

<meta name=“author” content=“Jose Camara”>

</head>

</html>

html 5

Esta codificação é considerada

metainformação e por isso utiliza o elemento

<meta>.

Metainformação é um conjunto de

informações que descrevem um determinado conjunto de dados.

8

Estrutura do documento base

(44)

<!DOCTYPE html>

<head>

<meta charset=Latin-1>

</head>

</html>

html 5

Estrutura do documento base

O elemento <meta> permite também a especificação de caracteres em português.

Pode ser feita dando ao atributo charset um dos seguintes valores:

• Latin-1

• ISO-8859-1 9

(45)

<!DOCTYPE html>

<head>

<meta charset=Latin-1>

</head>

</html>

O elemento <meta> permite também a especificação de caracteres em português.

Pode ser feita dando ao atributo charset um dos seguintes valores:

• Latin-1

• ISO-8859-1 html 5

Para verificar os códigos de página para os diferentes grupos de caracteres consulte:

http://www.terena.org/activities/multiling/ml-docs/iso- 8859.html

Estrutura do documento base

9

(46)

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

html 5

No elemento BODY ficam todos os conteúdos principais como texto, imagens, vídeos, etc.

Estrutura do documento base

1 0

(47)

<!DOCTYPE html>

<head>

</head>

<body>

<p id=p1 class=”ParagrafoTexto” align=”left”

title=”Este parágrafo é importante”>

Este é o texto do parágrafo. É este texto que aparece na página do documento. Os atributos align e title têm um efeito visível na página. Os atributos id e class são utilizados apenas internamente.

</body>

</html>

A cada elemento está associado um conjunto de atributos. Esses atributos podem ser utilizados para identificar o elemento e para definir critérios de formatação.

Os atributos são inseridos no tag inicial, entre o símbolo < e o símbolo >.

Esquematicamente, os atributos podem ser representados do seguinte modo:

<ELEMENTO atributos1= ... atributo2= ... atributoN= ... </ELEMENTO>

(48)

Nested Elements

<!DOCTYPE html>

<head>

</head>

<body>

Nested Elements

</body>

</html>

Um elemento pode ficar contido dentro de outros elementos.

Nested Elements Nested Elements

(49)

Comentários

<!DOCTYPE html>

<head>

</head>

<body>

Este é o texto do parágrafo que aparece na janela do documento.

</body>

</html>

Num documento html podem ser incluídas linhas de comentário. Essas linhas têm como objectivo fornecer informação sobre o código do documento, mas não têm qualquer efeito em termos de formatação.

Um comentário tem um tag inicial e um tag final obrigatório. O tag incial é

(50)

Caracteres Especiais

Alguns caracteres não podem ser escritos

directamente no documento HTLM porque fazem parte da estrutura da linguagem sobretudo:

< < <

> > >

/ /

(51)

Hipertexto Links e URLs

 Link - Origem de uma ligação que pode conter:

 Apontador para novo recurso:

 Novo Documento html ou de outro tipo.

 Novo Endereço URL

 Endereço de E-Mail

(52)

Hipertexto Links e URLs

Link – Para endereço externo:

<!DOCTYPE html>

<head>

</head>

<body>

Para obter mais informações sobre este produto consulte o site da

<a href=”http://www.microsoft.com”>

Microsoft Corporation.

</a>

</body>

</html>

(53)

Hipertexto Links e URLs

Link – Para documento externo na mesma pasta:

<!DOCTYPE html>

<head>

</head>

<body>

Microsoft Corporation.

</a>

Aceda ao nosso

<a href=“form.htm”>formulário</a>

…

(54)

Hipertexto Links e URLs

Link –Para documento externo numa pasta dentro do local de origem- ficheiro index.html

</a>

Aceda ao nosso

Formulário

</a>

Pasta x

Index Pasta

Formularios

form1

(55)

Hipertexto Links e URLs

Link – Para um e-mail

</a>

Aceda ao nosso <a href=“formularios/form1.htm”>formulário</a>

(56)

Base

 Define o URL base do documento, a partir do qual são formados todos os URL relativos que fazem parte do documento.

<!DOCTYPE html>

<html>

<head>

<!--Em alguns casos a referência aos url ou ficheiros pode precisar de “”-

“http://abc.com/def/”-->

</head>

<body>

Para obter mais informações consulte

página1

</a>

</body>

</html>

(57)

Base

O URL definido neste exemplo é:

http://abc.com/def/ghi/pagina1.html

 Define o URL base do documento, a partir do qual são formados todos os URL relativos que fazem parte do documento.

<!DOCTYPE html>

<html>

<head>

<!--Em alguns casos a referência aos url ou ficheiros pode precisar de “”-

“http://abc.com/def/”-->

</head>

<body>

Para obter mais informações consulte

página1

</a>

</body>

</html>

Base

(58)

html 5

 3 Objectivos Principais da Especificação:

1. Definir alguns comportamentos do browser que podem ser personalizados

2. Definir o tratamento de erros pela primeira vez em html

3. Desenvolvimento da linguagem para facilitar a criação de web applications - aplicações

concebidas para serem acedidas pelos

utilizadores através de uma rede intranet ou da Internet.

(59)

html 5

1. Criar uma nova página de início definindo o tipo de documento como html 5

<!doctype html>

</html>

(60)

html 5

2. Definir o idioma da página utilizado o Atributo lang do Elemento <html>:

<!doctype html>

<html lang=“pt”>

</html>

Indica que a página foi escrita no

idioma português.

(61)

html 5

3. Definir a codificação de caracteres com um meta tag:

<!doctype html>

<html lang=“pt”>

<head>

<meta charset=ISO-8859-1>

</head>

</html>

Não indica a codificação de caracteres

(62)

html 5

4. Definir um título para a página:

<!doctype html>

<html lang=“pt”>

<head>

<meta charset=ISO-8859-1>

<title>Benvindo ao html</title>

</head>

</html>

(63)

Exemplos



O ELEMENTO TITLE

<!DOCTYPE html>

<head>

<title>Meu documento HTML</title>

</head>

<body>

</body>

</html>

(64)

ESCREVER DIRETAMENTE NO BROWSER

<!DOCTYPE html>

<head>

<title>Benvindo ao HTML</title>

</head>

<body>

Escrever Directamente no browser sem elemento

</body>

</html>

(65)

PARÁGRAFOS E COMENTÁRIOS

<!DOCTYPE html>

<head>

</head>

<body>

As armas e os barões assinalados,

Que da ocidental praia Lusitana,

Por mares nunca de antes navegados,

Passaram ainda além da Taprobana,

Em perigos e guerras esforçados,

Mais do que prometia a força humana,

E entre gente remota edificaram

Novo Reino, que tanto sublimaram;

</body>

</html>

(66)

ATRIBUTO TITLE

<!DOCTYPE html>

<head>

</head>

<body>

As armas e os barões assinalados,

Que da ocidental praia Lusitana,

Por mares nunca de antes navegados,

</body>

</html>

(67)

ATRIBUTO ALIGN

<!DOCTYPE html>

<head>

</head>

<body>

É pouco o que se sabe de Luís Vaz de Camões, e esse pouco é, ainda assim e na maioria dos casos, duvidoso. (…)

As armas e os barões assinalados,

Que da ocidental praia Lusitana,

Por mares nunca de antes navegados,

(68)

HEADINGS

<!DOCTYPE html> <html lang="pt">

<head>

<title>Headings de HTML</title>

</head>

<body>

<h1>Cabeçalho de nível 1</h1>

Parágrafo

</body>

</html>

(69)

LINHAS HORIZONTAIS

<!DOCTYPE html> <html lang="pt">

<head>

<title>Headings de HTML</title>

</head>

<body>

h1>Cabeçalho de nível 1</h1>

<hr>

Parágrafo

(…)

(70)

10/27/2018

1 O browser carrega o documento que incluiu elementos de marcação escritos em HTML e estilos escritos em CSS

(71)

10/27/2018

1 O browser carrega o documento que incluiu elementos de marcação escritos em HTML e estilos escritos em CSS

À medida que o browser carrega a página, cria um modelo interno

do documento que contém todos os elementos de HTML

2

html

head body

title script h1 p

em

(72)

10/27/2018

À medida que o browser carrega a página, cria um modelo interno

do documento que contém todos os elementos de HTML

2

html

head body

title script h1 p

em 3

Por cada elemento no documento HTML, o browser cria um objecto que o representa e coloca-o numa estrutura do tipo árvore com todos os outros elementos.

(73)

10/27/2018

4

html

head body

title script h1 p

em Chamamos a esta árvore hierárquica

o Document Object Model ou DOM (Mais tarde voltamos a falar dele!!)

(74)

10/27/2018

Existem algumas melhorias com a introdução dos novos

elementos da linguagem HTML5

Os estilos da página, caso existam são escritos na

lingaugem CSS3 e transformam a forma como os elementos de

HTML são apresentados na página.

(75)

10/27/2018

Enquanto o browser está a ler a página, está também a ler o código JavaScript que

normalmente começa a ser executado depois do HTML ter sido completamente carregado.

html HyperText Mark-up Language Linguagem de formatação de documentos

html

Linguagem e Documentos HTML

Linguagem e Documentos HTML

T

Linguagem e Documentos HTML

Marcadores ( Tags ) que aplicam formatações convencionadas a texto simples.

Linguagem e Documentos HTML

Referência ao facto de o HTML ser considerado uma linguagem de programação.

Linguagem e Documentos HTML

HTML5

Web Technologies

html 5 Markup Language

CSS 3 Style Sheets

JavaScript

Fases para a criação de um website

Editores de documentos - exemplos

Regras básicas

Regras básicas

Itálico

Regras básicas

Regras básicas

Regras básicas

Regras básicas

Regras básicas

Regras básicas

Regras básicas

Elementos que contêm outros

ELEMENTOS

Regras básicas

Regras básicas

Regras básicas

ELEMENTOS vs TAGS

ELEMENTOS vs TAGS

Regras básicas

<p>Este é um parágrafo</p>

Regras básicas

3 tipos de elementos:

Elementos e Atributos

Elementos e Atributos

Elementos e Atributos

Elementos e Atributos

Elementos e Atributos

Elementos e Atributos

Estrutura do documento base

Estrutura do documento base

Estrutura do documento base

Estrutura do documento base

Estrutura do documento base

Estrutura do documento base

Estrutura do documento base

Estrutura do documento base

Estrutura do documento base

Estrutura do documento base

Estrutura do documento base

Estrutura do documento base

Estrutura do documento base

Nested Elements

Comentários

Caracteres Especiais

Hipertexto Links e URLs

Hipertexto Links e URLs

Hipertexto Links e URLs

Hipertexto Links e URLs

Hipertexto Links e URLs

Base

Base

Base

html 5

html 5

html 5

html 5

html 5

Exemplos

O ELEMENTO TITLE