NOME
PROJECTO
DATA CLIENTEDATA
HMTLHYPERTEXT MARK-UP LANGUAGELINGUAGEM DE FORMATAÇÃO DE DOCUMENTOS
COMO FUNCIONA UMA WEB APPLICATIONUm 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 InstalarWindows / 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 HTMLIndex.txt
Index.html
Linguagem e Documentos HTML
DESMARCAR OPÇÂO
Linguagem e Documentos HTMLDepois de guardar um ficheiro alterar a sua extensão:
Index.txt
Index.html
Cuidado para não ficar
Index.hml.txt
Linguagem e Documentos HTMLA 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
HTML5Web 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 EmpresaFerramentas 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 árvoresendo 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údo1. Colocar os visitantes em primeiro lugarConsidere aquilo que os seus visitantes deverão procurarno site em primeiro lugar, e coloque essa informação em primeiro lugar.2. Evite becos sem saídaTodas 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 directoAs 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 PessoalUm tom casual como o de conversação resulta bem na Internet - evite ser demasiado formal.
5. Utilize Imagens e VídeoQuando escolhidas de forma criteriosa as imagens e vídeos podem dar vida ao seu site.
6. Não se esqueça do seu ObjectivoCada 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ásicashtml é 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á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.
Outros elementos não têm tag final.
<br>
Elementos que contêm outrosNum 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 TAGSNum 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ásicas3 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 base
doctype
<!DOCTYPE html><html>
</html>
html 5
Início e fim do documento htmlDesigna-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-1ISO-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/multiling/ml-docs/iso-8859.html
Estrutura do documento base9
<!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 base10
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 base10
<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 base10
ParágrafosListas
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 base10
• 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 base10
<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 base10
<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 base10
<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 base10
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 EspeciaisAlguns caracteres não podem ser escritos directamente no documento HTLM porque fazem parte da estrutura da linguagem sobretudo:
< < <
> > >
/ /
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
HiperlinkEndereç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 [email protected] Subject=assunto: ?
file computador caminho/index.html: //
Hipertexto Links e URLsLink – 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 URLsLink – 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
</a>
</p>
Pasta x
IndexPasta
Formularios
form1
Hipertexto Links e URLsLink – Para um e-mail
<p>
Para obter mais informações sobre este produto consulte o site da
<a href=”mailto:[email protected]?subject=assuntoxpto?body=texto da msg”>
Microsoft Corporation.
</a>
</p>
<p>
Aceda ao nosso <a href=“formularios/form1.htm”>formulário</a>
VER
BaseDefine 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 53. 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>
VERfile://localhost/Users/vascosalada/Documents/Aulas ISTEC/Web MM1/Exercícios/02 A Linguagem HTML/00 Elemento TITLE.html
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 documentoque incluiu elementos de marcação
escritos em HTML e estilos escritosem CSS
11/22/13
1
O browser carrega o documentoque incluiu elementos de marcaçãoescritos em HTML e estilos escritos
em CSSÀ medida que o browser carrega a
página, cria um modelo internodo 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 todosos elementos de HTML
2
html
head body
title script h1 p
em
3Por cada elemento no documentoHTML, o browser cria um objecto
que o representa e coloca-o numaestrutura 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áginasRegras 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.htmlmeus-filmes-favoritos.html
3. Utilizar a extensão correctaDependendo do webserver deve utilizar a extensão
correctamente:.htm para linux ou unix.html para windows
URLsUniform Resource Locator
O URL básico contém:- Protocolo- Nome do Servidor- Caminho- Nome do Ficheiro
Ranking de Compatibilidade com HTML5Uniform 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