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
Linguagem e Documentos HTML
Documento HTML
HTML = HyperText Markup Language
Linguagem e Documentos HTML
Documento HTML
HTML = HyperText Markup Language
Texto em que se pode clicar para aceder a um novo documento. uma referncia capacidade da pginas Web conterem links umas para as outras.
Linguagem e Documentos HTML
Documento HTML
HTML = HyperText Markup Language
Marcadores (Tags) que aplicam formataes convencionadas a texto simples.
Linguagem e Documentos HTML
Documento HTML
HTML = HyperText Markup Language
Referncia ao facto de o HTML ser considerado uma linguagem de programao.
Linguagem e Documentos HTML
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
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
Incio da formatao em itlico
Fim da formatao em itlico
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
TAG TAG
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
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
Um elemento provoca uma alterao na pgina html e pode ter um TAG inicial e um TAG final.
Para alguns elementos o tag final opcional:
Forma o texto em itlico
Forma o texto em itlico
Regras bsicas
Um elemento provoca uma alterao na pgina html e pode ter um TAG inicial e um TAG final.
Para alguns elementos o tag final opcional e para outros obrigatrio.
Regras bsicas
Um elemento provoca uma alterao na pgina html e pode ter um TAG inicial e um TAG final.
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
...
...
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.
...
...
Texto que aparece na pgina do documento.
Elementos e Atributos
...
...
Texto que aparece na pgina do documento.
Define o formato de alinhamento do pargrafo.
Elementos e Atributos
...
...
Texto que aparece na pgina do documento.
Elementos e Atributos
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
Estrutura do documento base
html 5
Incio e fim do documento html Designa-se por elemento raz ou root element.
2
html
Estrutura do documento base
html 5
Definir o idioma principal do documento. No indica a codificao de caracteres da pgina.
3
lang
Estrutura do documento base
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
Estrutura do documento base
Meu documento html
html 5
Titulo do documento Meu documento html
4
title
Estrutura do documento base
Meu documento html
html 5
Ligaes para outros documentos, neste caso, uma pgina externa de estilos. (Voltamos aos estilos mais tarde !!!!)
4
link
Estrutura do documento base
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
Estrutura do documento base
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
Estrutura do documento base
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
Estrutura do documento base
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
Estrutura do documento base
html 5
No elemento BODY ficam todos os contedos principais como texto, imagens, vdeos, etc.
6
Estrutura do documento base
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
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 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. ()
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
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
Top Related