NOME
PROJECTO
DATA CLIENTE
DATA
HMTLHYPERTEXT MARK-UP LANGUAGE
LINGUAGEM DE FORMATAÇÃO DE DOCUMENTOS
COMO FUNCIONA UMA
WEB APPLICATION
Um conjunto de Clientes acede a um Web
Server para obter conteúdos. Os clientes
podem se...
Como Funciona uma Web
Application
Para aceder os conteúdos dos servidores ligados à
Internet estes dispositivos utilizam u...
Como Funciona uma Web
Application
Para criar conteúdos para a Web em HTML e CSS não
é necessário entender todo o funcionam...
Como Funciona uma Web
Application
Para se criar uma Web Application é necessário ter
uma rede um web server e um conjunto ...
Aplicações a Instalar
Windows / Mac
Google Chrome (free)
https://www.google.com/intl/pt-BR/chrome/browser/?hl=pt-BR
Dreamw...
Linguagem e Documentos
HTML
Documento HTML
Index.txt
Index.html
Linguagem e Documentos
HTML
DESMARCAR OPÇÂO
Linguagem e Documentos
HTML
Depois de guardar um ficheiro alterar a sua extensão:
Index.txt
Index.html
Cuidado para
não fi...
Linguagem e Documentos
HTML
A Linguagem HTML
HTML = HyperText Markup Language
Permite definir o conteúdo e a estrutura de ...
Linguagem e Documentos
HTML
Texto em que se pode clicar para aceder a um novo
documento.
É uma referência à capacidade das...
Linguagem e Documentos
HTML
• Marcadores (Tags) que aplicam
formatações convencionadas a texto
simples.
Documento HTML
HTM...
Linguagem e Documentos
HTML
• Os documentos HTML são descritos pelos
marcadores da linguagem.
• Cada marcador da linguagem...
Linguagem e Documentos
HTML
Referência ao facto de o HTML ser
considerado uma linguagem de programação.
Documento HTML
HTM...
HTML5
Web Technologies
html 5 Markup Language
CSS 3 Style Sheets
JavaScript
Fases para a criação de um website
1. Criação do documento HTML
Notepad, DreamWeaver, VisualStudio,etc
2. Registar um nome...
A Estrutura do Site
Antes de defina as páginas que precisa:
Home Page
Catálogo de Produtos
Informação da Empresa
Formulári...
Mapa do Site
Home Page
Produtos A Empresa
Ferramentas
da empresa
Contactos Novidades
Produto 1
Produto 2
O Nosso Blog
Os N...
Regras para a elaboração
do conteúdo
1. Colocar os visitantes em primeiro lugar
Considere aquilo que os seus visitantes de...
4. Seja Pessoal
Um tom casual como o de conversação resulta bem na
Internet - evite ser demasiado formal.
5. Utilize Image...
Editores de documentos - exemplos
Editores de texto
Notepad
Notepad ++
Editores WYSIWYG
("What You See Is What You Get“)
D...
Componentes de uma página web
Uma webpage é formada por 3 componentes básicos:
1. Texto:
Texto simples que aparece na pági...
Uma webpage é formada por 3 componentes básicos:
3. Marcadores:
Elementos da linguagem HTML que descrevem o
conteúdo da pá...
Componentes de uma página web
Todos estes componentes:
Texto
Referências a outros ficheiros
Marcadores
são criados utiliza...
Componentes de uma página web
Para além disso uma página inclui um conjunto de informações sobre a
própria página.
Esta in...
Regras básicas
html é uma sequência de texto que se encontra
definido entre um conjunto de símbolos que
designam por tags ...
Regras básicas
html é uma sequência de texto que se encontra
definido entre um conjunto de símbolos que
designam por tags ...
Regras básicas
html é uma sequência de texto que se encontra
definido entre um conjunto de símbolos que
designam por tags....
Regras básicas
html é uma sequência de texto que se encontra
definido entre um conjunto de símbolos que
designam por tags....
Regras básicas
html é uma sequência de texto que se encontra
definido entre um conjunto de símbolos que
designam por tags....
Regras básicas
Um elemento provoca uma alteração na página html
e pode ter um TAG inicial e um TAG final.
<i>Formata o tex...
Regras básicas
Um elemento provoca uma alteração na página html e
pode ter um TAG inicial e um TAG final.
Para alguns elem...
Regras básicasUm elemento provoca uma alteração na página
html e pode ter um TAG inicial e um TAG final.
Para alguns eleme...
Regras básicas
Um elemento provoca uma alteração na página html
e pode ter um TAG inicial e um TAG final.
Para alguns elem...
Elementos que contêm
outros
Num documento html, uma tabela é um elemento. Esse elemento
pode conter outros elementos, por ...
ELEMENTOS
Uma lista numerada é um elemento. Cada item da
lista é um elemento contido no elemento que define
a lista.
Regras básicas
Um documento html é constituído por um conjunto
de elementos, representados por uma sequência
de símbolos –...
Regras básicas
Cada TAG é sempre escrita entre o símbolo < e
o símbolo >
Regras básicas
Grande parte das TAGs têm que ser iniciadas e
finalizadas, utilizando o caracter /
Uma TAG pode conter outr...
ELEMENTOS vs TAGS
Num documento html, cada elemento é representado
por uma sequência de símbolos que o identificam.
Essa s...
ELEMENTOS vs TAGS
BLOCO DE
CONTEÚDO
ELEMENTO
Num documento html, cada elemento é representado por uma
sequência de símbolo...
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 <! -...
Regras básicas
3 tipos de elementos:
TAG FINAL obrigatório-explo:
<table>... </table>
TAG FINAL opcional-explo:
<p>... [</...
Elementos e Atributos
<ELEMENTO atributo1=valor1
atributo2=valor2...
atributon=valorn...>
...
...
</ELEMENTO>
Os elementos...
Elementos e Atributos
<ELEMENTO atributo1=valor1 atributo2=valor2...atributon=valorn...>
...
...
</ELEMENTO>
<P ID=p1
CLAS...
Elementos e Atributos
<ELEMENTO atributo1=valor1 atributo2=valor2...atributon=valorn...>
...
...
</ELEMENTO>
<P ID=p1
CLAS...
<ELEMENTO atributo1=valor1
atributo2=valor2...atributon=valorn...>
...
...
</ELEMENTO>
<p ID=p1
CLASS=“Paragrafotexto”
ALI...
Elementos e Atributos
<ELEMENTO atributo1=valor1 atributo2=valor2...atributon=valorn...>
...
...
</ELEMENTO>
<P ID=p1
CLAS...
Elementos e Atributos
<ELEMENTO atributo1=valor1 atributo2=valor2...atributon=valorn...>
...
...
</ELEMENTO>
<P ID=p1
CLAS...
Exemplos com atributos
Elemento de abertura com 1 atributo:
<a href=contacto.html>Contacto</a>
Elemento de abertura com 3 ...
Exemplos com atributos
Atributo LANG
Atributo TITLE
Atributo WIDTH e HEIGHT
Atributo ALT
Exemplos com atributos
Atributo LANG
Define o idioma de um elemento ou de uma
página.
A declaração do idioma é importante ...
Exemplos com atributos
Atributo LANG
<!DOCTYPE HTML>
<html lang="pt-PT">
<head>
<meta charset=UTF-8>
<title>Untitled Docum...
Estrutura do documento
base
html
head
body
Define o início e o fim do documento
Cabeçalho – informações sobre o documento
...
Indica o tipo de standard ou versão do html a cuja
conformidade o documento obedece.
<!DOCTYPE html>
html 5
1
Estrutura do...
<!DOCTYPE html>
<html>
</html>
html 5
Início e fim do documento html
Designa-se por elemento raíz ou root element.
2
html
...
<!DOCTYPE html>
<html lang=“pt”>
</html>
html 5
Definir o idioma principal do documento.
Não indica a codificação de carac...
<!DOCTYPE html>
<html lang=“pt-br”>
</html>
html 5
As duas primeiras letras indicam o idioma. Caso
exista um dialecto - co...
4
Estrutura do documento base
<!DOCTYPE html>
<html lang=“pt”>
<head>
…
</head>
<body>
…
</body>
</html>
Um documento enco...
<!DOCTYPE html>
<html lang=“pt”>
<head>
<title>Meu documento html</title>
</head>
</html>
html 5
Titulo do documento
“Meu ...
<!DOCTYPE html>
<html lang=“pt”>
<head>
<title>Meu documento html</title>
</head>
<body>
Escrever directamente sobre o doc...
<!DOCTYPE html>
<html lang=“pt”>
<head>
<title>Meu documento html</title>
</head>
<body>
<h1>O Cabeçlho da Página</h1>
<p>...
<!DOCTYPE html>
<html lang=“pt”>
<head>
<title>Meu documento html</title>
<link rel=“stylesheet” href=“estilo.css”>
</head...
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=“utf-8”>
</head>
</html>
html 5
É também no HEAD que se
inclui a cod...
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta name=“description” content=“Descrição do conteúdo da
página”>
<meta name=“ke...
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
</html>
html 5
Estrutura do documento
base O elemen...
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
</html>
O elemento <meta> permite também a especifi...
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
</body>
</html>
html 5
No elemento BODY fica...
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
</body>
</html>
html 5
No elemento BODY fica...
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
</body>
</html>
html 5
No elemento BODY fica...
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
</body>
</html>
html 5
No elemento BODY fica...
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
</body>
</html>
html 5
No elemento BODY fica...
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
</body>
</html>
html 5
No elemento BODY fica...
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
</body>
</html>
html 5
No elemento BODY fica...
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
</body>
</html>
html 5
No elemento BODY fica...
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
<p id=p1 class=”ParagrafoTexto” align=”left”...
Nested Elements
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
<b><i>Nested Elements</i></b...
Comentários
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
<!-- 0 elemento seguinte é um pa...
Caracteres Especiais
Alguns caracteres não podem ser escritos
directamente no documento HTLM porque fazem
parte da estrutu...
Hipertexto Links e URLs
Link - Origem de uma ligação que pode conter:
Apontador para novo recurso:
Novo Documento html ou ...
Hiperlink
Endereço
protocolo Localização do servidor Localização do recurso no servidor: //
http www.istec.pt Web/index.ht...
Hipertexto Links e URLs
Link – Para endereço externo:
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</hea...
Hipertexto Links e URLs
Link – Para documento externo na mesma pasta:
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charse...
Hipertexto Links e URLsLink – Para documento externo numa pasta dentro do local de
origem- ficheiro index.html
<p>
Para ob...
Hipertexto Links e URLs
Link – Para um e-mail
<p>
Para obter mais informações sobre este produto consulte o site da
<a hre...
Base
Define o URL base do documento, a partir do qual são
formados todos os URL relativos que fazem parte do
documento.
<!...
O URL definido neste exemplo é:
http://abc.com/def/ghi/pagina1.html
BASE
 Define o URL base do documento, a partir do qua...
html 5
3 Objectivos Principais da Especificação:
1. Definir alguns comportamentos do browser que
podem ser personalizados
...
html 5
1. Criar uma nova página de início definindo o tipo de
documento como html 5
<!doctype html>
</html>
html 5
2. Definir o idioma da página utilizado o Atributo lang do
Elemento <html>:
<!doctype html>
<html lang=“pt”>
</html...
html 5
3. Definir a codificação de caracteres com um meta tag:
<!doctype html>
<html lang=“pt”>
<head>
<meta charset=ISO-8...
html 5
4. Definir um título para a página:
<!doctype html>
<html lang=“pt”>
<head>
<meta charset=ISO-8859-1>
<title>Benvin...
Exemplos
O ELEMENTO TITLE
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Meu documento HTML</title>
</head>
<body>
</body>...
ESCREVER DIRECTAMENTE NO BROWSER
<!DOCTYPE html>
<html lang="pt">
<!-- Meramente Indicativo não indica a codificação de ca...
PARÁGRAFOS E COMENTÁRIOS
<!DOCTYPE html>
<html lang="pt">
<!-- Meramente Indicativo não indica a codificação de caracteres...
ATRIBUTO TITLE
Coloca um toolltip text no elemento:
<body>
<p title="E1V1">As armas e os barões assinalados,</p>
<p title=...
ATRIBUTO ALIGN
<!DOCTYPE html>
<html lang="pt">
<!-- Meramente Indicativo não indica a codificação de caracteres -->
<head...
HEADINGS
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset=ISO-8859-1>
<title>Headings de HTML</title>
</head>
<body>
...
LINHAS HORIZONTAIS
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset=ISO-8859-1>
<title>Headings de HTML</title>
</hea...
Exemplos
Bold, Itálico e Sublinhado
Quebras de linha
Exemplo com vários elementos
Texto semântico
O elemento <em>
O elemen...
11/22/13
OK, mas como
é que isto funciona
no browser ?
11/22/13
1
O browser carrega o documento
que incluiu elementos de marcação
escritos em HTML e estilos escritos
em CSS
11/22/13
1
O browser carrega o documento
que incluiu elementos de marcação
escritos em HTML e estilos escritos
em CSS
À me...
11/22/13
À medida que o browser carrega a
página, cria um modelo interno
do documento que contém todos
os elementos de HTM...
11/22/13
4
html
head body
title script h1 p
em
Chamamos a esta árvore hierárquica
o Document Object Model ou DOM
(Mais tar...
11/22/13
Existem algumas melhorias com a
introdução dos novos elementos da
linguagem HTML5
Os estilos da página, caso exis...
11/22/13
Enquanto o browser está a ler a
página, está também a ler o código
JavaScript que normalmente começa
a ser execut...
Os nomes das páginas
Regras para a definição dos nomes das páginas
HTML:
1. Usar nomes em letra minúscula
2. Separar diver...
URLs
Uniform Resource Locator
O URL básico contém:
- Protocolo
- Nome do Servidor
- Caminho
- Nome do Ficheiro
Ranking de Compatibilidade com HTML5
Uniform Resource Locator
Browser Versão
Pontuação
(Máximo 450)
Google Chrome 12 343
O...
Exercício
Crie website baseado na sua informação pessoal
com as seguintes páginas:
Dados Biográficos
Dados Escolares
Dados...
Próximos SlideShares
Carregando em…5
×

00 a linguagem html

372 visualizações

Publicada em

HTML5 Programming

Publicada em: Educação
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
372
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
18
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • p22
  • p22
  • p22
  • p22
  • p23
  • 00 a linguagem html

    1. 1. NOME PROJECTO DATA CLIENTE DATA HMTLHYPERTEXT MARK-UP LANGUAGE LINGUAGEM DE FORMATAÇÃO DE DOCUMENTOS
    2. 2. COMO FUNCIONA UMA WEB APPLICATION Um conjunto de Clientes acede a um Web Server para obter conteúdos. Os clientes podem ser computadores, tablets, telefones ou qualquer outro dispositivo com acesso à Internet.
    3. 3. Como Funciona uma Web Application Para aceder os conteúdos dos servidores ligados à Internet estes dispositivos utilizam um Web browser. Web browser
    4. 4. Como Funciona uma Web Application Para criar conteúdos para a Web em HTML e CSS não é necessário entender todo o funcionamento da Internet mas convém ter algumas noções básicas.
    5. 5. Como Funciona uma Web Application Para se criar uma Web Application é necessário ter uma rede um web server e um conjunto de dispositivos ligados a esse server que se designam por clientes.
    6. 6. Aplicações a Instalar Windows / Mac Google Chrome (free) https://www.google.com/intl/pt-BR/chrome/browser/?hl=pt-BR Dreamweaver(trial) http://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver Windows Notepad++(free) http://notepad-plus-plus.org/download/v6.2.html Mac TextWrangler(free) http://www.barebones.com/products/textwrangler/
    7. 7. Linguagem e Documentos HTML Documento HTML Index.txt Index.html
    8. 8. Linguagem e Documentos HTML DESMARCAR OPÇÂO
    9. 9. Linguagem e Documentos HTML Depois de guardar um ficheiro alterar a sua extensão: Index.txt Index.html Cuidado para não ficar Index.hml.txt
    10. 10. Linguagem e Documentos HTML A Linguagem HTML HTML = HyperText Markup Language Permite definir o conteúdo e a estrutura de uma webpage O código de uma página de designa-se por “Documento HTML”
    11. 11. Linguagem e Documentos HTML Texto 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. Documento HTML HTML = HyperText Markup Language
    12. 12. Linguagem e Documentos HTML • Marcadores (Tags) que aplicam formatações convencionadas a texto simples. Documento HTML HTML = HyperText Markup Language
    13. 13. Linguagem e Documentos HTML • Os documentos HTML são descritos pelos marcadores da linguagem. • Cada marcador da linguagem descreve um tipo de conteúdo diferente. Documento HTML HTML = HyperText Markup Language
    14. 14. Linguagem e Documentos HTML Referência ao facto de o HTML ser considerado uma linguagem de programação. Documento HTML HTML = HyperText Markup Language
    15. 15. HTML5 Web Technologies html 5 Markup Language CSS 3 Style Sheets JavaScript
    16. 16. 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
    17. 17. A Estrutura do Site Antes de defina as páginas que precisa: Home Page Catálogo de Produtos Informação da Empresa Formulário de Encomendas Página de Contactos Apoio e FAQ Notícias
    18. 18. Mapa do Site Home Page Produtos A Empresa Ferramentas da empresa Contactos Novidades Produto 1 Produto 2 O Nosso Blog Os Nossos Clientes As nossas Ferramentas Um de um site é normalmente apresentado numa estrutura em árvore sendo a Home Page colocada no topo da hierarquia que representa as páginas do site. É uma boa prática desenhar um mapa do site seja em papel ou em qualquer aplicação. Por exemplo:
    19. 19. Regras para a elaboração do conteúdo 1. Colocar os visitantes em primeiro lugar Considere aquilo que os seus visitantes deverão procurar no site em primeiro lugar, e coloque essa informação em primeiro lugar.2. Evite becos sem saída Todas as páginas têm de proporcionar ao visitante a possibilidade de navegar para um conteúdo - por exemplo, para comprar um produto, ou para contactar a empresa. 3. Seja directo As páginas não devem ter mais de 400 páginas. Estruture as ideias por tópicos de modo a que a informação seja mais facilmente absorvida.
    20. 20. 4. Seja Pessoal Um tom casual como o de conversação resulta bem na Internet - evite ser demasiado formal. 5. Utilize Imagens e Vídeo Quando escolhidas de forma criteriosa as imagens e vídeos podem dar vida ao seu site. 6. Não se esqueça do seu Objectivo Cada elemento do seu site deve ser utilizado tendo em vista o objectivo global do site definido à partida. Regras para a elaboração do conteúdo
    21. 21. Editores de documentos - exemplos Editores de texto Notepad Notepad ++ Editores WYSIWYG ("What You See Is What You Get“) Dreamweaver Visual Studio
    22. 22. Componentes de uma página web Uma webpage é formada por 3 componentes básicos: 1. Texto: Texto simples que aparece na página para mostrar informações sobre o site aos visitantes. 2. Referências a outros ficheiros: Conteúdos carregados para a página HTML através da referência a outros ficheiros como imagens, sons, vídeo, outras páginas HTML, ficheiros de CSS, ficheiros de JavaScript, ou outras.
    23. 23. Uma webpage é formada por 3 componentes básicos: 3. Marcadores: Elementos da linguagem HTML que descrevem o conteúdo da página e tornam possíveis as referências a outros documentos. Componentes de uma página web
    24. 24. Componentes de uma página web Todos estes componentes: Texto Referências a outros ficheiros Marcadores são criados utilizando apenas texto simples.
    25. 25. Componentes de uma página web Para além disso uma página inclui um conjunto de informações sobre a própria página. Esta informação destina a passar informação ao search engines e aos browsers. Exemplos: Descrição do conteúdo da página Definição do idioma da página Definição da codificação de página. Outros
    26. 26. 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.
    27. 27. 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: <i>Todos os artigos em saldo</i> Itálico
    28. 28. Regras básicas html é uma sequência de texto que se encontra definido entre um conjunto de símbolos que designam por tags. Os tags indicam o local onde deve ser aplicada a formatação: <i>Todos</i> os artigos em saldo Início da formatação Fim da formatação
    29. 29. Regras básicas html é uma sequência de texto que se encontra definido entre um conjunto de símbolos que designam por tags. Os tags indicam o local onde deve ser aplicada a formatação: <i>Todos</i> os artigos em saldo tag ou marcador inicial tag ou marcador final
    30. 30. Regras básicas html é uma sequência de texto que se encontra definido entre um conjunto de símbolos que designam por tags. Os tags indicam o local onde deve ser aplicada a formatação: <i>Todos</i> os artigos em saldo ELEMENTO
    31. 31. Regras básicas Um elemento provoca uma alteração na página html e pode ter um TAG inicial e um TAG final. <i>Formata o texto em itálico</i>
    32. 32. Regras básicas Um elemento provoca uma alteração na página html e pode ter um TAG inicial e um TAG final. Para alguns elementos o tag final é opcional: <p>Formata o texto em itálico</p> <p>Formata o texto em itálico
    33. 33. Regras básicasUm elemento provoca uma alteração na página html e pode ter um TAG inicial e um TAG final. Para alguns elementos o tag final é opcional e para outros é obrigatório. <table> … </table>
    34. 34. Regras básicas Um elemento provoca uma alteração na página html e pode ter um TAG inicial e um TAG final. Para alguns elementos o tag final é opcional e para outros é obrigatório. Outros elementos não têm tag final. <br>
    35. 35. 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> <td>…. </td> </tr> </table>
    36. 36. ELEMENTOS Uma lista numerada é um elemento. Cada item da lista é um elemento contido no elemento que define a lista.
    37. 37. Regras básicas Um documento html é constituído por um conjunto de elementos, representados por uma sequência de símbolos – TAG
    38. 38. Regras básicas Cada TAG é sempre escrita entre o símbolo < e o símbolo >
    39. 39. 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
    40. 40. 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 <P> e pelo tag final </P>. Entre o tag inicial e o tag final, pode ser colocado o texto do parágrafo. <P>Este texto é um parágrafo.</P> TAG INICIAL TAG FINAL
    41. 41. 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 <P> e pelo tag final </P>. Entre o tag inicial e o tag final, pode ser colocado o texto do parágrafo. <P>Este texto é um parágrafo.</P>
    42. 42. 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 - - > <p>Este é um parágrafo</p> <!-- Primeiro parágrafo -->
    43. 43. Regras básicas 3 tipos de elementos: TAG FINAL obrigatório-explo: <table>... </table> TAG FINAL opcional-explo: <p>... [</p>] Sem TAG FINAL – explo: <hr> <br> <img src=“logo.gif” alt=“Logo”>
    44. 44. Elementos e Atributos <ELEMENTO atributo1=valor1 atributo2=valor2... atributon=valorn...> ... ... </ELEMENTO> Os elementos podem ter atributos e o seu respectivo valor
    45. 45. Elementos e Atributos <ELEMENTO atributo1=valor1 atributo2=valor2...atributon=valorn...> ... ... </ELEMENTO> <P ID=p1 CLASS=“Paragrafotexto” ALIGN=“left” TITLE=“Parágrafo Importante”>Texto que aparece na página do documento. </P>
    46. 46. Elementos e Atributos <ELEMENTO atributo1=valor1 atributo2=valor2...atributon=valorn...> ... ... </ELEMENTO> <P ID=p1 CLASS=“Paragrafotexto” ALIGN=“left” TITLE=“Parágrafo Importante”>Texto que aparece na página do documento. </P> As aspas não são obrigatórias mas devem ser utilizadas sobretudo quando o valor do atributo é composto mais de uma palavra
    47. 47. <ELEMENTO atributo1=valor1 atributo2=valor2...atributon=valorn...> ... ... </ELEMENTO> <p ID=p1 CLASS=“Paragrafotexto” ALIGN=“left” TITLE=“Parágrafo Importante”>Texto que aparece na página do documento. </p> Elementos e Atributos Identificação Interna do parágrafo. Útil quando utilizadas Style- Sheets.
    48. 48. Elementos e Atributos <ELEMENTO atributo1=valor1 atributo2=valor2...atributon=valorn...> ... ... </ELEMENTO> <P ID=p1 CLASS=“Paragrafotexto” ALIGN=“left” TITLE=“ParagrafoImportante”>Texto que aparece na página do documento. </P> Define o formato de alinhamento do parágrafo.
    49. 49. Elementos e Atributos <ELEMENTO atributo1=valor1 atributo2=valor2...atributon=valorn...> ... ... </ELEMENTO> <P ID=p1 CLASS=“Paragrafotexto” ALIGN=“left” TITLE=“ParagrafoImportante”>Texto que aparece na página do documento. </P> Cria uma etiqueta
    50. 50. Exemplos com atributos Elemento de abertura com 1 atributo: <a href=contacto.html>Contacto</a> Elemento de abertura com 3 atributos: <a href=contacto.html alt=Contacto class=nav_click> Contacto </a> Elemento sem fecho com 2 atributos: <img src=imagem1.gif alt=logo>
    51. 51. Exemplos com atributos Atributo LANG Atributo TITLE Atributo WIDTH e HEIGHT Atributo ALT
    52. 52. Exemplos com atributos Atributo LANG Define o idioma de um elemento ou de uma página. A declaração do idioma é importante para as aplicações de acessibilidade como os leitores de texto (conversão para voz) ou para os motores de busca:
    53. 53. Exemplos com atributos Atributo LANG <!DOCTYPE HTML> <html lang="pt-PT"> <head> <meta charset=UTF-8> <title>Untitled Document</title> </head> <body> <p>Prágrafo número 1</p> </body> </html>
    54. 54. 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 HTMLdoctype
    55. 55. Indica o tipo de standard ou versão do html a cuja conformidade o documento obedece. <!DOCTYPE html> html 5 1 Estrutura do documento basedoctype
    56. 56. <!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
    57. 57. <!DOCTYPE html> <html lang=“pt”> </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
    58. 58. <!DOCTYPE html> <html lang=“pt-br”> </html> html 5 As duas primeiras letras indicam o idioma. Caso exista um dialecto - como brasileiro - então são utilizadas também as duas últimas letras. 4 lang Estrutura do documento base
    59. 59. 4 Estrutura do documento base <!DOCTYPE html> <html lang=“pt”> <head> … </head> <body> … </body> </html> Um documento encontra-se dividido em duas grandes secções o Head e o Body. O elemento HEAD pode incluir: •Um titulo para o documento •Scripts de diversas linguagens •Estilos •Metadata •Links para outros documentos •Não é uma secção obrigatória
    60. 60. <!DOCTYPE html> <html lang=“pt”> <head> <title>Meu documento html</title> </head> </html> html 5 Titulo do documento “Meu documento html” 5 Estrutura do documento base
    61. 61. <!DOCTYPE html> <html lang=“pt”> <head> <title>Meu documento html</title> </head> <body> Escrever directamente sobre o documento. </body> </html> Estrutura do documento base ver
    62. 62. <!DOCTYPE html> <html lang=“pt”> <head> <title>Meu documento html</title> </head> <body> <h1>O Cabeçlho da Página</h1> <p>O primeiro parágrafo.</p> </body> </html> Estrutura do documento base
    63. 63. <!DOCTYPE html> <html lang=“pt”> <head> <title>Meu documento html</title> <link rel=“stylesheet” href=“estilo.css”> </head> </html> Ligações para outros documentos, neste caso, uma página externa de estilos. (Voltamos aos estilos mais tarde !!!!) 6 Estrutura do documento base
    64. 64. <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=“utf-8”> </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
    65. 65. <!DOCTYPE html> <html lang=“pt”> <head> <meta name=“description” content=“Descrição do conteúdo da página”> <meta name=“keywords” content=“HTML, CSS, Aulas”> <meta name=“author” content=“Vasco Salada”> </head> 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
    66. 66. <!DOCTYPE html> <html lang=“pt”> <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
    67. 67. <!DOCTYPE html> <html lang=“pt”> <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/multilin g/ml-docs/iso-8859.html Estrutura do documento base 9
    68. 68. <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </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 10 SECÇÔES E CONTEÙDOS
    69. 69. <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </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 10 <header>, <footer>, <article>, <section>, <nav>, <aside> SECÇÕES – “document sectioning elements”
    70. 70. <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </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 10 Parágrafos Listas Citações (blockquotes) Listas Imagens CONTEÚDOS– “Content Grouping Elements”
    71. 71. <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </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 10 • Utilização dos <hn> • O elemento <section> • O elemento <article> • O elemento <aside> TEXTO SEMÂNTICO– “Text Level Semantics”
    72. 72. <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </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 10 <table> <tr> <td> <th> .. DADOS EM TABELAS
    73. 73. <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </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 10 <FORM> .. INTRODUÇÃO DE DADOS
    74. 74. <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </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 10 <EMBED> <AUDIO> <VIDEO> .. DADOS EMBEBIDOS
    75. 75. <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </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 10 PRECISAM DE JAVASCRIPT PARA FUNCIONAR .. ELEMENTOS INTERATIVOS
    76. 76. <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </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. </p> </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>
    77. 77. Nested Elements <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> <b><i>Nested Elements</i></b> </body> </html> Um elemento pode ficar contido dentro de outros elementos. <b><i>Nested Elements</i></b> <i><b>Nested Elements</i></b>
    78. 78. Comentários <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> <!-- 0 elemento seguinte é um parágrafo. Este texto é um comentário --> <P>Este é o texto do parágrafo que aparece na janela do documento.</P> </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 é <!-- . O tag final é --> <!-- comentário html -->
    79. 79. Caracteres Especiais Alguns caracteres não podem ser escritos directamente no documento HTLM porque fazem parte da estrutura da linguagem sobretudo: < &lt; < > &gt; > / /
    80. 80. 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
    81. 81. Hiperlink Endereço protocolo Localização do servidor Localização do recurso no servidor: // http www.istec.pt Web/index.html: // ftp www.istec.pt Web/index.html: // mailto vsf@istec.pt Subject=assunto: ? file computador caminho/index.html: //
    82. 82. Hipertexto Links e URLs Link – Para endereço externo: <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> <P> Para obter mais informações sobre este produto consulte o site da <a href=”http://www.microsoft.com”> Microsoft Corporation. </a> </P> </body> </html>
    83. 83. Hipertexto Links e URLs Link – Para documento externo na mesma pasta: <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> <p> Para obter mais informações sobre este produto consulte o site da <a href=”http://www.microsoft.com”> Microsoft Corporation. </a> </p> <p>Aceda ao nosso <a href=“form.htm”>formulário</a> </p> …
    84. 84. Hipertexto Links e URLsLink – Para documento externo numa pasta dentro do local de origem- ficheiro index.html <p> Para obter mais informações sobre este produto consulte o site da <a href=”http://www.microsoft.com”> Microsoft Corporation. </a> </p> <p> Aceda ao nosso <a href=“formularios/form1.htm”> Formulário Pasta x Index Pasta Formulario s form1
    85. 85. Hipertexto Links e URLs Link – Para um e-mail <p> Para obter mais informações sobre este produto consulte o site da <a href=”mailto:vsf@istec.pt?subject=assuntoxpto?body=texto da msg”> Microsoft Corporation. </a> </p> <p> Aceda ao nosso <a href=“formularios/form1.htm”>formulário</a> VER
    86. 86. 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> <base href=http://abc.com/def/> <!--Em alguns casos a referência aos url ou ficheiros pode precisar de “”-“http://abc.com/def/”--> </head> <body> <p>Para obter mais informações consulte <a href=ghi/pagina1.html> página1 </a> </p> </body> </html> VER
    87. 87. O URL definido neste exemplo é: http://abc.com/def/ghi/pagina1.html 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> <base href=http://abc.com/def/> <!--Em alguns casos a referência aos url ou ficheiros pode precisar de “”-“http://abc.com/def/”-- > </head> <body> <p>Para obter mais informações consulte <a href=ghi/pagina1.html> página1 </a> </p> </body> </html>
    88. 88. 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.
    89. 89. html 5 1. Criar uma nova página de início definindo o tipo de documento como html 5 <!doctype html> </html>
    90. 90. 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.
    91. 91. 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
    92. 92. 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>
    93. 93. Exemplos O ELEMENTO TITLE <!DOCTYPE html> <html lang="pt"> <head> <title>Meu documento HTML</title> </head> <body> </body> </html> st/Users/vascosalada/Documents/Aulas ISTEC/Web MM1/Exercícios/02 A Linguagem HTML/00 E
    94. 94. ESCREVER DIRECTAMENTE NO BROWSER <!DOCTYPE html> <html lang="pt"> <!-- Meramente Indicativo não indica a codificação de caracteres --> <head> <meta charset=ISO-8859-1> <!-- Codificação simplificada de caracteres em Português --> <title>Benvindo ao HTML</title> </head> <body> Escrever Directamente no browser sem elemento </body> </html> EXEMPLO
    95. 95. PARÁGRAFOS E COMENTÁRIOS <!DOCTYPE html> <html lang="pt"> <!-- Meramente Indicativo não indica a codificação de caracteres --> <head> <meta charset=ISO-8859-1> <!-- Codificação simplificada de caracteres em Português --> <title>Benvindo ao HTML</title> </head> <body> <!--Estrofe 1, Canto I --> <p>As armas e os barões assinalados,</p> <p>Que da ocidental praia Lusitana,</p> <p>Por mares nunca de antes navegados,</p> <p>Passaram ainda além da Taprobana,</p> <p>Em perigos e guerras esforçados,</p> <p>Mais do que prometia a força humana,</p> <p>E entre gente remota edificaram</p> <p>Novo Reino, que tanto sublimaram;</p> </body> </html> VER
    96. 96. ATRIBUTO TITLE Coloca um toolltip text no elemento: <body> <p title="E1V1">As armas e os barões assinalados,</p> <p title="E1V2">Que da ocidental praia Lusitana,</p> <p title="E1V13">Por mares nunca de antes navegados,</p> <p>Passaram ainda além da Taprobana,</p> <p>Em perigos e guerras esforçados,</p> <p>Mais do que prometia a força humana,</p> <p>E entre gente remota edificaram</p> <p>Novo Reino, que tanto sublimaram;</p> </body> </html> Exemplo
    97. 97. ATRIBUTO ALIGN <!DOCTYPE html> <html lang="pt"> <!-- Meramente Indicativo não indica a codificação de caracteres --> <head> <meta charset=ISO-8859-1> <!-- Codificação simplificada de caracteres em Português --> <title>Benvindo ao HTML</title> </head> <body> <!--Estrofe 1, Canto I --> <p align="justify">É pouco o que se sabe de Luís Vaz de Camões, e esse pouco é, ainda assim e na maioria dos casos, duvidoso. (…)</p> <p title="E1V1" align="center">As armas e os barões assinalados,</p> <p title="E1V2" align="right">Que da ocidental praia Lusitana,</p> <p title="E1V13" align="left">Por mares nunca de antes navegados,</p> <p>Passaram ainda além da Taprobana,</p> <p>Em perigos e guerras esforçados,</p> <p>Mais do que prometia a força humana,</p> <p>E entre gente remota edificaram</p> <p>Novo Reino, que tanto sublimaram;</p> Exemplo
    98. 98. HEADINGS <!DOCTYPE html> <html lang="pt"> <head> <meta charset=ISO-8859-1> <title>Headings de HTML</title> </head> <body> <h1>Cabeçalho de nível 1</h1> <h2>Cabeçalho de nível 2</h2> <h3>Cabeçalho de nível 3</h3> <h4>Cabeçalho de nível 4</h4> <p>Parágrafo</p> <h5>Cabeçalho de nível 5</h5> <h6>Cabeçalho de nível 6</h6> </body> </html> Exemplo
    99. 99. LINHAS HORIZONTAIS <!DOCTYPE html> <html lang="pt"> <head> <meta charset=ISO-8859-1> <title>Headings de HTML</title> </head> <body> h1>Cabeçalho de nível 1</h1> <hr> <h2>Cabeçalho de nível 2</h2> <hr width=50%> <h3>Cabeçalho de nível 3</h3> <hr size=30> <h4>Cabeçalho de nível 4</h4> <hr noshade> <p>Parágrafo</p> <hr width=50% align=right> (…) Exemplo
    100. 100. Exemplos Bold, Itálico e Sublinhado Quebras de linha Exemplo com vários elementos Texto semântico O elemento <em> O elemento <strong>
    101. 101. 11/22/13 OK, mas como é que isto funciona no browser ?
    102. 102. 11/22/13 1 O browser carrega o documento que incluiu elementos de marcação escritos em HTML e estilos escritos em CSS
    103. 103. 11/22/13 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
    104. 104. 11/22/13 À 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.
    105. 105. 11/22/13 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!!)
    106. 106. 11/22/13 Existem algumas melhorias com a introdução dos novos elementos da linguagem HTML5 Os estilos da página, caso existam são escritos na linguagem CSS3 e transformam a forma como os elementos de HTML são apresentados na página. HTML5 WEB TECHNOLOGIES
    107. 107. 11/22/13 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.
    108. 108. Os nomes das páginas Regras para a definição dos nomes das páginas HTML: 1. Usar nomes em letra minúscula 2. Separar diversas palavras com um traço: historia-da-empresa.html meus-filmes-favoritos.html 3. Utilizar a extensão correcta Dependendo do webserver deve utilizar a extensão correctamente: .htm para linux ou unix .html para windows
    109. 109. URLs Uniform Resource Locator O URL básico contém: - Protocolo - Nome do Servidor - Caminho - Nome do Ficheiro
    110. 110. Ranking de Compatibilidade com HTML5 Uniform Resource Locator Browser Versão Pontuação (Máximo 450) Google Chrome 12 343 Opera 11 286 Mozilla Firefox 8 313 Apple Safari 5 293 Internet Explorer 9 141
    111. 111. Exercício Crie website baseado na sua informação pessoal com as seguintes páginas: Dados Biográficos Dados Escolares Dados Profissionais Interesses

    ×