SlideShare uma empresa Scribd logo
1 de 111
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 ser computadores, tablets, telefones
ou qualquer outro dispositivo com acesso à
Internet.
Como Funciona uma Web
Application
Para aceder os conteúdos dos servidores ligados à
Internet estes dispositivos utilizam um Web browser.
Web browser
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.
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.
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/
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 ficar
Index.hml.txt
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”
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
Linguagem e Documentos
HTML
• Marcadores (Tags) que aplicam
formatações convencionadas a texto
simples.
Documento HTML
HTML = HyperText Markup Language
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
Linguagem e Documentos
HTML
Referência ao facto de o HTML ser
considerado uma linguagem de programação.
Documento HTML
HTML = HyperText Markup Language
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 de domínio
.com, .net, .pt
3. Contratar o Alojamento
Onde hospedar os ficheiros do seu site
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
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:
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.
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
Editores de documentos - exemplos
Editores de texto
Notepad
Notepad ++
Editores WYSIWYG
("What You See Is What You Get“)
Dreamweaver
Visual Studio
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.
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
Componentes de uma página web
Todos estes componentes:
Texto
Referências a outros ficheiros
Marcadores
são criados utilizando apenas texto simples.
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
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.
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
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
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
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
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>
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
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>
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>
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>
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 – TAG
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 outras TAGs. A finalização
das TAGs é na ordem inversa da sua criação
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
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>
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 -->
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”>
Elementos e Atributos
<ELEMENTO atributo1=valor1
atributo2=valor2...
atributon=valorn...>
...
...
</ELEMENTO>
Os elementos podem ter atributos e o seu respectivo valor
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>
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
<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.
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.
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
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>
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 para
as aplicações de acessibilidade como os
leitores de texto (conversão para voz) ou
para os motores de busca:
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>
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
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
<!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
<!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
<!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
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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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”
<!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”
<!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”
<!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
<!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
<!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
<!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
<!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>
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>
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 -->
Caracteres Especiais
Alguns caracteres não podem ser escritos
directamente no documento HTLM porque fazem
parte da estrutura da linguagem sobretudo:
< &lt; &#60;
> &gt; &#62;
/ &#47;
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
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: //
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>
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>
…
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
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
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
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>
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.
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>
Indica que a página
foi escrita no
idioma português.
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
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>
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
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
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
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
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
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
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
Exemplos
Bold, Itálico e Sublinhado
Quebras de linha
Exemplo com vários elementos
Texto semântico
O elemento <em>
O elemento <strong>
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
À 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
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.
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!!)
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
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.
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
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
Opera 11 286
Mozilla Firefox 8 313
Apple Safari 5 293
Internet Explorer 9 141
Exercício
Crie website baseado na sua informação pessoal
com as seguintes páginas:
Dados Biográficos
Dados Escolares
Dados Profissionais
Interesses

Mais conteúdo relacionado

Mais procurados

Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTMLTales Augusto
 
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e ParágrafoIntrodução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e ParágrafoAlamo Saravali
 
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAndré Constantino da Silva
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Uni Buscapé Company
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Jose Augusto Cintra
 

Mais procurados (20)

Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTML
 
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e ParágrafoIntrodução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
 
Html5 em 15 minutos
Html5 em 15 minutosHtml5 em 15 minutos
Html5 em 15 minutos
 
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
 
Aula1
Aula1Aula1
Aula1
 
Html
HtmlHtml
Html
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Html 01
Html 01Html 01
Html 01
 
Programacao para Web I 03 HTML
Programacao para Web I 03 HTMLProgramacao para Web I 03 HTML
Programacao para Web I 03 HTML
 
Manual completo de_html 01
Manual completo de_html 01Manual completo de_html 01
Manual completo de_html 01
 
Curso html basico_aula-001
Curso html basico_aula-001Curso html basico_aula-001
Curso html basico_aula-001
 
Html manual
Html manualHtml manual
Html manual
 
Html5 primeiros passos
Html5 primeiros passosHtml5 primeiros passos
Html5 primeiros passos
 
HTML
HTMLHTML
HTML
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
W3 c
W3 cW3 c
W3 c
 
Aula 09
Aula 09Aula 09
Aula 09
 

Semelhante a Como funciona uma aplicação web

Html completo
Html completoHtml completo
Html completoEMSNEWS
 
Webpages
WebpagesWebpages
WebpagesEMSNEWS
 
Introdução de web
Introdução de webIntrodução de web
Introdução de webSedu
 
Portifolio net
Portifolio netPortifolio net
Portifolio netlaerciopds
 
Desenvolvimento para a Internet - Aula 02
Desenvolvimento para a Internet - Aula 02Desenvolvimento para a Internet - Aula 02
Desenvolvimento para a Internet - Aula 02Leandro Rezende
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfCesar Braz
 
Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...
Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...
Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...Mércia Regina da Silva
 
HTML5 - Tags semânticas
HTML5 - Tags semânticasHTML5 - Tags semânticas
HTML5 - Tags semânticasThiago Alvernaz
 
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor FranciosneyRevisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosneyfranciosney
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLFabio Moura Pereira
 
AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxJEANCLEVERSONPRATAS
 

Semelhante a Como funciona uma aplicação web (20)

Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 
Html completo
Html completoHtml completo
Html completo
 
Webpages
WebpagesWebpages
Webpages
 
Webpages
WebpagesWebpages
Webpages
 
Introdução de web
Introdução de webIntrodução de web
Introdução de web
 
Portifolio net
Portifolio netPortifolio net
Portifolio net
 
Desenvolvimento para a Internet - Aula 02
Desenvolvimento para a Internet - Aula 02Desenvolvimento para a Internet - Aula 02
Desenvolvimento para a Internet - Aula 02
 
Html
HtmlHtml
Html
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
 
Aula1web html
Aula1web htmlAula1web html
Aula1web html
 
Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...
Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...
Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...
 
W3C Web Standards HTML
W3C Web Standards HTMLW3C Web Standards HTML
W3C Web Standards HTML
 
Apostila html
Apostila htmlApostila html
Apostila html
 
Apostila html1
Apostila html1Apostila html1
Apostila html1
 
HTML5 - Tags semânticas
HTML5 - Tags semânticasHTML5 - Tags semânticas
HTML5 - Tags semânticas
 
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor FranciosneyRevisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
 
426 curso html
426 curso html426 curso html
426 curso html
 
AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptx
 

Mais de Vasco Ferreira

04 03 exercício bikes - escolher elementos
04 03 exercício bikes - escolher elementos04 03 exercício bikes - escolher elementos
04 03 exercício bikes - escolher elementosVasco Ferreira
 
04 01 estrutura de um documento
04 01 estrutura de um documento04 01 estrutura de um documento
04 01 estrutura de um documentoVasco Ferreira
 
02 a formatação de texto em HTML
02 a formatação de texto em HTML02 a formatação de texto em HTML
02 a formatação de texto em HTMLVasco Ferreira
 
ISCIA - Trabalho de Grupo 1
ISCIA - Trabalho de Grupo 1ISCIA - Trabalho de Grupo 1
ISCIA - Trabalho de Grupo 1Vasco Ferreira
 

Mais de Vasco Ferreira (9)

05 01 tabelas2
05 01 tabelas205 01 tabelas2
05 01 tabelas2
 
05 01 tabelas
05 01 tabelas05 01 tabelas
05 01 tabelas
 
04 03 exercício bikes - escolher elementos
04 03 exercício bikes - escolher elementos04 03 exercício bikes - escolher elementos
04 03 exercício bikes - escolher elementos
 
04 02 novos elementos
04 02 novos elementos04 02 novos elementos
04 02 novos elementos
 
04 01 estrutura de um documento
04 01 estrutura de um documento04 01 estrutura de um documento
04 01 estrutura de um documento
 
03 h iperlinks
03 h iperlinks03 h iperlinks
03 h iperlinks
 
02 a formatação de texto em HTML
02 a formatação de texto em HTML02 a formatação de texto em HTML
02 a formatação de texto em HTML
 
Iscia tg2
Iscia tg2Iscia tg2
Iscia tg2
 
ISCIA - Trabalho de Grupo 1
ISCIA - Trabalho de Grupo 1ISCIA - Trabalho de Grupo 1
ISCIA - Trabalho de Grupo 1
 

Último

A horta do Senhor Lobo que protege a sua horta.
A horta do Senhor Lobo que protege a sua horta.A horta do Senhor Lobo que protege a sua horta.
A horta do Senhor Lobo que protege a sua horta.silves15
 
Apresentação | Eleições Europeias 2024-2029
Apresentação | Eleições Europeias 2024-2029Apresentação | Eleições Europeias 2024-2029
Apresentação | Eleições Europeias 2024-2029Centro Jacques Delors
 
Governo Provisório Era Vargas 1930-1934 Brasil
Governo Provisório Era Vargas 1930-1934 BrasilGoverno Provisório Era Vargas 1930-1934 Brasil
Governo Provisório Era Vargas 1930-1934 Brasillucasp132400
 
ABRIL VERDE.pptx Slide sobre abril ver 2024
ABRIL VERDE.pptx Slide sobre abril ver 2024ABRIL VERDE.pptx Slide sobre abril ver 2024
ABRIL VERDE.pptx Slide sobre abril ver 2024Jeanoliveira597523
 
A Arte de Escrever Poemas - Dia das Mães
A Arte de Escrever Poemas - Dia das MãesA Arte de Escrever Poemas - Dia das Mães
A Arte de Escrever Poemas - Dia das MãesMary Alvarenga
 
Recurso Casa das Ciências: Sistemas de Partículas
Recurso Casa das Ciências: Sistemas de PartículasRecurso Casa das Ciências: Sistemas de Partículas
Recurso Casa das Ciências: Sistemas de PartículasCasa Ciências
 
Habilidades Motoras Básicas e Específicas
Habilidades Motoras Básicas e EspecíficasHabilidades Motoras Básicas e Específicas
Habilidades Motoras Básicas e EspecíficasCassio Meira Jr.
 
D9 RECONHECER GENERO DISCURSIVO SPA.pptx
D9 RECONHECER GENERO DISCURSIVO SPA.pptxD9 RECONHECER GENERO DISCURSIVO SPA.pptx
D9 RECONHECER GENERO DISCURSIVO SPA.pptxRonys4
 
UFCD_10392_Intervenção em populações de risco_índice .pdf
UFCD_10392_Intervenção em populações de risco_índice .pdfUFCD_10392_Intervenção em populações de risco_índice .pdf
UFCD_10392_Intervenção em populações de risco_índice .pdfManuais Formação
 
LEMBRANDO A MORTE E CELEBRANDO A RESSUREIÇÃO
LEMBRANDO A MORTE E CELEBRANDO A RESSUREIÇÃOLEMBRANDO A MORTE E CELEBRANDO A RESSUREIÇÃO
LEMBRANDO A MORTE E CELEBRANDO A RESSUREIÇÃOColégio Santa Teresinha
 
Orações subordinadas substantivas (andamento).pptx
Orações subordinadas substantivas (andamento).pptxOrações subordinadas substantivas (andamento).pptx
Orações subordinadas substantivas (andamento).pptxKtiaOliveira68
 
Música Meu Abrigo - Texto e atividade
Música   Meu   Abrigo  -   Texto e atividadeMúsica   Meu   Abrigo  -   Texto e atividade
Música Meu Abrigo - Texto e atividadeMary Alvarenga
 
DESAFIO LITERÁRIO - 2024 - EASB/ÁRVORE -
DESAFIO LITERÁRIO - 2024 - EASB/ÁRVORE -DESAFIO LITERÁRIO - 2024 - EASB/ÁRVORE -
DESAFIO LITERÁRIO - 2024 - EASB/ÁRVORE -Aline Santana
 
COMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEM
COMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEMCOMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEM
COMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEMVanessaCavalcante37
 
Bullying - Texto e cruzadinha
Bullying        -     Texto e cruzadinhaBullying        -     Texto e cruzadinha
Bullying - Texto e cruzadinhaMary Alvarenga
 
Pedologia- Geografia - Geologia - aula_01.pptx
Pedologia- Geografia - Geologia - aula_01.pptxPedologia- Geografia - Geologia - aula_01.pptx
Pedologia- Geografia - Geologia - aula_01.pptxleandropereira983288
 
Slides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptx
Slides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptxSlides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptx
Slides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptxLuizHenriquedeAlmeid6
 
ALMANANHE DE BRINCADEIRAS - 500 atividades escolares
ALMANANHE DE BRINCADEIRAS - 500 atividades escolaresALMANANHE DE BRINCADEIRAS - 500 atividades escolares
ALMANANHE DE BRINCADEIRAS - 500 atividades escolaresLilianPiola
 
trabalho wanda rocha ditadura
trabalho wanda rocha ditaduratrabalho wanda rocha ditadura
trabalho wanda rocha ditaduraAdryan Luiz
 

Último (20)

A horta do Senhor Lobo que protege a sua horta.
A horta do Senhor Lobo que protege a sua horta.A horta do Senhor Lobo que protege a sua horta.
A horta do Senhor Lobo que protege a sua horta.
 
Apresentação | Eleições Europeias 2024-2029
Apresentação | Eleições Europeias 2024-2029Apresentação | Eleições Europeias 2024-2029
Apresentação | Eleições Europeias 2024-2029
 
Governo Provisório Era Vargas 1930-1934 Brasil
Governo Provisório Era Vargas 1930-1934 BrasilGoverno Provisório Era Vargas 1930-1934 Brasil
Governo Provisório Era Vargas 1930-1934 Brasil
 
ABRIL VERDE.pptx Slide sobre abril ver 2024
ABRIL VERDE.pptx Slide sobre abril ver 2024ABRIL VERDE.pptx Slide sobre abril ver 2024
ABRIL VERDE.pptx Slide sobre abril ver 2024
 
A Arte de Escrever Poemas - Dia das Mães
A Arte de Escrever Poemas - Dia das MãesA Arte de Escrever Poemas - Dia das Mães
A Arte de Escrever Poemas - Dia das Mães
 
Recurso Casa das Ciências: Sistemas de Partículas
Recurso Casa das Ciências: Sistemas de PartículasRecurso Casa das Ciências: Sistemas de Partículas
Recurso Casa das Ciências: Sistemas de Partículas
 
Habilidades Motoras Básicas e Específicas
Habilidades Motoras Básicas e EspecíficasHabilidades Motoras Básicas e Específicas
Habilidades Motoras Básicas e Específicas
 
D9 RECONHECER GENERO DISCURSIVO SPA.pptx
D9 RECONHECER GENERO DISCURSIVO SPA.pptxD9 RECONHECER GENERO DISCURSIVO SPA.pptx
D9 RECONHECER GENERO DISCURSIVO SPA.pptx
 
UFCD_10392_Intervenção em populações de risco_índice .pdf
UFCD_10392_Intervenção em populações de risco_índice .pdfUFCD_10392_Intervenção em populações de risco_índice .pdf
UFCD_10392_Intervenção em populações de risco_índice .pdf
 
LEMBRANDO A MORTE E CELEBRANDO A RESSUREIÇÃO
LEMBRANDO A MORTE E CELEBRANDO A RESSUREIÇÃOLEMBRANDO A MORTE E CELEBRANDO A RESSUREIÇÃO
LEMBRANDO A MORTE E CELEBRANDO A RESSUREIÇÃO
 
Orações subordinadas substantivas (andamento).pptx
Orações subordinadas substantivas (andamento).pptxOrações subordinadas substantivas (andamento).pptx
Orações subordinadas substantivas (andamento).pptx
 
Música Meu Abrigo - Texto e atividade
Música   Meu   Abrigo  -   Texto e atividadeMúsica   Meu   Abrigo  -   Texto e atividade
Música Meu Abrigo - Texto e atividade
 
DESAFIO LITERÁRIO - 2024 - EASB/ÁRVORE -
DESAFIO LITERÁRIO - 2024 - EASB/ÁRVORE -DESAFIO LITERÁRIO - 2024 - EASB/ÁRVORE -
DESAFIO LITERÁRIO - 2024 - EASB/ÁRVORE -
 
COMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEM
COMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEMCOMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEM
COMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEM
 
Bullying - Texto e cruzadinha
Bullying        -     Texto e cruzadinhaBullying        -     Texto e cruzadinha
Bullying - Texto e cruzadinha
 
Em tempo de Quaresma .
Em tempo de Quaresma                            .Em tempo de Quaresma                            .
Em tempo de Quaresma .
 
Pedologia- Geografia - Geologia - aula_01.pptx
Pedologia- Geografia - Geologia - aula_01.pptxPedologia- Geografia - Geologia - aula_01.pptx
Pedologia- Geografia - Geologia - aula_01.pptx
 
Slides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptx
Slides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptxSlides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptx
Slides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptx
 
ALMANANHE DE BRINCADEIRAS - 500 atividades escolares
ALMANANHE DE BRINCADEIRAS - 500 atividades escolaresALMANANHE DE BRINCADEIRAS - 500 atividades escolares
ALMANANHE DE BRINCADEIRAS - 500 atividades escolares
 
trabalho wanda rocha ditadura
trabalho wanda rocha ditaduratrabalho wanda rocha ditadura
trabalho wanda rocha ditadura
 

Como funciona uma aplicação web

  • 1. NOME PROJECTO DATA CLIENTE DATA HMTLHYPERTEXT MARK-UP LANGUAGE LINGUAGEM DE FORMATAÇÃO DE DOCUMENTOS
  • 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. Como Funciona uma Web Application Para aceder os conteúdos dos servidores ligados à Internet estes dispositivos utilizam um Web browser. Web browser
  • 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. 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. 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. Linguagem e Documentos HTML Documento HTML Index.txt Index.html
  • 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. 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. 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. Linguagem e Documentos HTML • Marcadores (Tags) que aplicam formatações convencionadas a texto simples. Documento HTML HTML = HyperText Markup Language
  • 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. 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. HTML5 Web Technologies html 5 Markup Language CSS 3 Style Sheets JavaScript
  • 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. 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. 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. 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. 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. Editores de documentos - exemplos Editores de texto Notepad Notepad ++ Editores WYSIWYG ("What You See Is What You Get“) Dreamweaver Visual Studio
  • 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. 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. Componentes de uma página web Todos estes componentes: Texto Referências a outros ficheiros Marcadores são criados utilizando apenas texto simples.
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. ELEMENTOS Uma lista numerada é um elemento. Cada item da lista é um elemento contido no elemento que define a lista.
  • 37. Regras básicas Um documento html é constituído por um conjunto de elementos, representados por uma sequência de símbolos – TAG
  • 38. Regras básicas Cada TAG é sempre escrita entre o símbolo < e o símbolo >
  • 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. 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. 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. 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. 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. Elementos e Atributos <ELEMENTO atributo1=valor1 atributo2=valor2... atributon=valorn...> ... ... </ELEMENTO> Os elementos podem ter atributos e o seu respectivo valor
  • 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. 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. <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. 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. 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. 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. Exemplos com atributos Atributo LANG Atributo TITLE Atributo WIDTH e HEIGHT Atributo ALT
  • 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. 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. 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. 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. <!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. <!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. <!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. 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. <!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. <!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. <!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. <!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. <!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. <!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. <!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. <!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. <!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. <!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. <!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. <!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. <!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. <!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. <!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. <!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. <!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. 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. 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. Caracteres Especiais Alguns caracteres não podem ser escritos directamente no documento HTLM porque fazem parte da estrutura da linguagem sobretudo: < &lt; &#60; > &gt; &#62; / &#47;
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. html 5 1. Criar uma nova página de início definindo o tipo de documento como html 5 <!doctype html> </html>
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Exemplos Bold, Itálico e Sublinhado Quebras de linha Exemplo com vários elementos Texto semântico O elemento <em> O elemento <strong>
  • 101. 11/22/13 OK, mas como é que isto funciona no browser ?
  • 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. 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. 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. 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. 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. 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. 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. URLs Uniform Resource Locator O URL básico contém: - Protocolo - Nome do Servidor - Caminho - Nome do Ficheiro
  • 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. Exercício Crie website baseado na sua informação pessoal com as seguintes páginas: Dados Biográficos Dados Escolares Dados Profissionais Interesses

Notas do Editor

  1. p22
  2. p22
  3. p22
  4. p22
  5. p23