01 a Linguagem HTML

html HyperText Mark-up Language

Linguagem de formatao de documentos

Aplicaes a Instalar

Google Chrome (free)

https://www.google.com/intl/pt-BR/chrome/browser/?hl=pt-BR

Notepad++(free)

http://notepad-plus-plus.org/download/v6.2.html

Dreamweaver(trial)

http://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver

Linguagem e Documentos HTML Documento HTML

Ficheiro De

Texto Sem

codificao

Index.txt

Index.html

Documento HTML

DESMARCAR OPO

Linguagem e Documentos HTML

Documento HTML

Depois de guardar um ficheiro alterar a sua extenso:

Index.txt

Index.html

Cuidado para no ficar

Index.hml.txt


Documento HTML

HTML = HyperText Markup Language


Documento HTML


Texto em que se pode clicar para aceder a um novo documento. uma referncia capacidade da pginas Web conterem links umas para as outras.


Documento HTML


Marcadores (Tags) que aplicam formataes convencionadas a texto simples.


Documento HTML


Referncia ao facto de o HTML ser considerado uma linguagem de programao.


html 5 Web Technologies

html 5 Markup Language

CSS 3 Style Sheets

JavaScript

Browsers e os documentos html

Browsers

Internet

Servidores Web

Documento no formato html

Browsers e os documentos html

1. Criao do documento HTML

Notepad, DreamWeaver, VisualStudio,etc

2. Registar um nome de domnio

.com, .net, .pt

3. Contratar o Alojamento

Onde hospedar os ficheiros do seu site

Editores de documentos Alguns exemplos

Editores de texto

Notepad

Notepad ++

Editores WYSIWYG ("What You See Is What You Get)

Dreamweaver

Visual Studio

Outros

Regras bsicas

html uma sequncia de texto que se encontra definido entre um conjunto de smbolos que designam por tags ou marcadores.

Regras bsicas

html uma sequncia de texto que se encontra definido entre um conjunto de smbolos que designam por tags.

Os tags indicam o local onde deve ser aplicada a formatao:

Todos os artigos em saldo

Itlico

Regras bsicas




Incio da formatao em itlico

Fim da formatao em itlico

Regras bsicas




TAG TAG

Regras bsicas




ELEMENTO

Regras bsicas

Um elemento provoca uma alterao na pgina html e pode ter um TAG inicial e um TAG final.

Forma o texto em itlico

Regras bsicas


Para alguns elementos o tag final opcional:



Regras bsicas


Para alguns elementos o tag final opcional e para outros obrigatrio.

Regras bsicas


Para alguns elementos o tag final opcional e para outros obrigatrio.

Outros elementos no tm tag final.

Elementos que contm outros Num documento html, uma tabela um elemento. Esse

elemento pode conter outros elementos: as linhas da tabela.

.

ELEMENTOS

Uma lista numerada um elemento. Cada item da lista um elemento contido no elemento que define a lista.

Regras bsicas

Um documento html constitudo por um conjunto de elementos, representados por uma sequncia de smbolos TAG

Regras bsicas

Cada TAG sempre escrita entre o smbolo < e o smbolo >

Regras bsicas

Grande parte das TAGs tm que ser iniciadas e finalizadas, utilizando o caracter /

Uma TAG pode conter outras TAGs. A finalizao das TAGs na ordem inversa da sua criao

ELEMENTOS vs TAGS Num documento html, cada elemento representado por uma sequncia de smbolos que o identificam. Essa sequncia de smbolos designada por tag.

Um pargrafo 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 pargrafo.

Este texto um pargrafo.

TAG INICIAL TAG FINAL

ELEMENTOS vs TAGS Num documento html, cada elemento representado por uma sequncia de smbolos que o identificam. Essa sequncia de smbolos designada por tag.

Um pargrafo 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 pargrafo.

Este texto um pargrafo.

BLOCO DE CONTEDO

ELEMENTO

Regras bsicas Os elementos podem ter atributos e o seu respectivo

valor

Deve criar o hbito de escrever as TAGs com letra minscula

As linhas de comentrio tem um tag inicial

Este um pargrafo

Regras bsicas 3 tipos de elementos:

TAG FINAL obrigatrio-explo:

...

TAG FINAL opcional-explo:

... []

Sem TAG FINAL explo:

Elementos e Atributos

...

...


...

...

Texto que aparece na pgina do documento.

As aspas no so obrigatrias mas devem ser utilizadas sobretudo

quando o valor do atributo composto mais de uma palavra

Identificao Interna do pargrafo. til quando utilizadas Style-Sheets.

...

...



...

...


Define o formato de alinhamento do pargrafo.


...

...



Cria uma etiqueta

Estrutura do documento base

html

head

body

Define o incio e o fim do documento

Cabealho informaes sobre o documento

Contm o contedo do documento

Define a verso do HTML doctype

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

html 5

1 doctype


html 5

Incio e fim do documento html Designa-se por elemento raz ou root element.

2

html


html 5

Definir o idioma principal do documento. No indica a codificao de caracteres da pgina.

3

lang


html 5

Um documento encontra-se dividido em duas grandes seces. A primeira o HEAD. Esta seco pode incluir: Um ttulo para o documento Scripts de diversas linguagens Estilos Metadata Links para outros documentos No obrigatrio

4

head


Meu documento html

html 5

Titulo do documento Meu documento html

4

title


Meu documento html

html 5

Ligaes para outros documentos, neste caso, uma pgina externa de estilos. (Voltamos aos estilos mais tarde !!!!)

4

link


html 5

tambm no HEAD que se inclui a codificao de caracteres. A definio correcta da codificao de permite a utilizao de smbolos especficos de um determinado idioma de acordo com um determinado layout de teclado.

5


html 5

Esta codificao considerada metainformao e por isso utiliza o elemento . Metainformao um conjunto de informaes que descrevem um determinado conjunto de dados.

5


html 5

O elemento permite tambm a especificao de caracteres em portugus. Pode ser feita dando ao atributo charset um dos seguintes valores: Latin-1 ISO-8859-1

5


O elemento permite tambm a especificao de caracteres em portugus. Pode ser feita dando ao atributo charset um dos seguintes valores: Latin-1 ISO-8859-1

html 5

5

Para verificar os cdigos de pgina para os diferentes grupos de caracteres consulte:

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


html 5

No elemento BODY ficam todos os contedos principais como texto, imagens, vdeos, etc.

6


Este o texto do pargrafo. este texto que aparece na pgina do documento. Os atributos align e title tm um efeito visvel na pgina. Os atributos id e class so utilizados apenas internamente.

A cada elemento est associado um conjunto de atributos. Esses atributos podem ser utilizados para identificar o elemento e para definir critrios de formatao. Os atributos so inseridos no tag inicial, entre o smbolo < e o smbolo >. Esquematicamente, os atributos podem ser representados do seguinte modo:

Nested Elements Nested Elements

Um elemento pode ficar contido dentro de outros elementos.

Nested Elements Nested Elements

Comentrios

Este o texto do pargrafo que aparece na janela do documento.

Num documento html podem ser includas linhas de comentrio. Essas linhas tm como objectivo fornecer informao sobre o cdigo do documento, mas no tm qualquer efeito em termos de formatao. Um comentrio tem um tag inicial e um tag final obrigatrio. O tag incial

Caracteres Especiais

Alguns caracteres no podem ser escritos directamente no documento HTLM porque fazem parte da estrutura da linguagem sobretudo:

< < <

> > >

Hipertexto Links e URLs

Link - Origem de uma ligao que pode conter:

Apontador para novo recurso:

Novo Documento html ou de outro tipo.

Novo Endereo URL

Endereo de E-Mail

Hiperlink

Endereo protocolo Localizao do servidor Localizao do recurso no servidor : //

http www.istec.pt Web/index.html : //

ftp www.istec.pt Web/index.html : //

mailto [email protected] Subject=assunto : ?

file computador caminho/index.html : //

Hipertexto Links e URLs Link Para endereo externo:

Para obter mais informaes sobre este produto consulte o site da

Microsoft Corporation.

Hipertexto Links e URLs Link Para documento externo na mesma pasta:

Para obter mais informaes sobre este produto consulte o site da Microsoft Corporation. Aceda ao nosso

formulrio

Hipertexto Links e URLs Link Para documento externo numa pasta dentro do local de origem- ficheiro index.html

Para obter mais informaes sobre este produto consulte o site da Microsoft Corporation. Aceda ao nosso Formulrio

Pasta x

Index Pasta

Formularios

form1

Hipertexto Links e URLs Link Para um e-mail

Para obter mais informaes sobre este produto consulte o site da Microsoft Corporation. Aceda ao nosso formulrio

Base Define o URL base do documento, a partir do qual so formados todos os URL relativos que

fazem parte do documento.

Para obter mais informaes consulte pgina1.

Base Define o URL base do documento, a partir do qual so formados todos os URL relativos que

fazem parte do documento.

Para obter mais informaes consulte pgina1.

O URL definido neste exemplo : http://abc.com/def/ghi/pagina1.html

html 5

3 Objectivos Principais da na Especificao:

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 criao de web applications.

html 5

1. Criar uma nova pgina de incio definindo o tipo de documento como html 5

html 5

2. Definir o idioma da pgina utilizado o Atributo lang do Elemento

No indica a codificao

de caracteres

html 5

3. Definir a codificao de caracteres com um meta tag:

html 5 4. Definir um ttulo para a pgina:

Benvindo ao html

Exemplos O ELEMENTO TITLE

Meu documento HTML

Exemplo - O elemento TITLE

Exemplos ESCRERVER DIRECTAMENTE NO BROWSER Benvindo ao HTML Escrever Directamente no browser sem elemento

EXEMPLO

PARGRAFOS E COMENTRIOS

Benvindo ao HTML

As armas e os bares assinalados,

Que da ocidental praia Lusitana,

Por mares nunca de antes navegados,

Passaram ainda alm da Taprobana,

Em perigos e guerras esforados,

Mais do que prometia a fora humana,

E entre gente remota edificaram

Novo Reino, que tanto sublimaram;

Exemplo

ATRIBUTO TITLE

Benvindo ao HTML








Novo Reino, que tanto sublimaram;

Exemplo

ATRIBUTO ALIGN

Benvindo ao HTML

pouco o que se sabe de Lus Vaz de Cames, e esse pouco , ainda assim e na maioria dos casos, duvidoso. ()








Novo Reino, que tanto sublimaram; Exemplo

HEADINGS

Headings de HTML

Cabealho de nvel 1

Cabealho de nvel 2

Cabealho de nvel 3

Cabealho de nvel 4

Pargrafo

Cabealho de nvel 5

Cabealho de nvel 6

Exemplo

LINHAS HORIZONTAIS

Headings de HTML

h1>Cabealho de nvel 1

Cabealho de nvel 2

Cabealho de nvel 3

Cabealho de nvel 4

Pargrafo

()

Exemplo

Exemplos

Bold, Itlico e Sublinhado

Quebras de linha

Exemplo com vrios elementos

Texto semntico

O elemento em

01 a Linguagem HTML

Documents

Transcript of 01 a Linguagem HTML