00 a linguagem html

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


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.


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/

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

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

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

http://www.barebones.com/products/textwrangler/

Linguagem e Documentos HTML

Documento HTMLIndex.txt

Index.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”


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



• Marcadores (Tags) que aplicam formatações convencionadas a texto simples.

Documento HTML



• Os documentos HTML são descritos pelos marcadores da linguagem.

• Cada marcador da linguagem descreve um tipo de conteúdo diferente.

Documento HTML



Referência ao facto de o HTML ser considerado uma linguagem de

programação.

Documento HTML


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.



Todos estes componentes:

Texto

Referências a outros ficheiros

Marcadores

são criados utilizando apenas texto simples.


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:

Todos os artigos em saldo

Itálico

Regras básicashtml é uma sequência de texto que se encontra definido entre um conjunto de símbolos que designam por tags.


Todos 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.



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.



ELEMENTO

Regras básicas

Um elemento provoca uma alteração na página html e pode ter um TAG inicial e um TAG final.

Formata o texto em itálico

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:

Formata o texto em itálico

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.

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 e pelo tag final . Entre o tag inicial e o tag final, pode ser colocado o texto do parágrafo.

Este texto é um parágrafo.

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 e pelo tag final . Entre o tag inicial e o tag final, pode ser colocado o texto do parágrafo. Este texto é um

parágrafo.

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 - - >

Este é um parágrafo

Regras básicas3 tipos de elementos:

TAG FINAL obrigatório-explo:

<table>... </table>

TAG FINAL opcional-explo:

... []

Sem TAG FINAL – explo:

<hr>

 

<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>

Texto que aparece na página do documento.

<ELEMENTO atributo1=valor1 atributo2=valor2...atributon=valorn...>

...

...

</ELEMENTO>

Texto que aparece na página do documento.



As aspas não são obrigatórias mas devem ser utilizadas sobretudo

quando o valor do atributo é composto mais de uma palavra

...

...</ELEMENTO>

Texto que aparece na página do documento.




Identificação Interna do parágrafo.

Útil quando utilizadas Style-Sheets.

...

...

</ELEMENTO>

Texto que aparece na página do documento.



Define o formato de alinhamento do parágrafo.

...

...

</ELEMENTO>

Texto que aparece na página do documento.



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>


Atributo LANG

Atributo TITLE

Atributo WIDTH e HEIGHT

Atributo ALT


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:

Atributo LANG

<!DOCTYPE HTML>

<html lang="pt-PT">

<head>

<meta charset=UTF-8>

<title>Untitled Document</title>

</head>

<body>

Prágrafo número 1

</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


doctype

<!DOCTYPE html><html>

</html>

html 5

Início e fim do documento htmlDesigna-se por elemento raíz ou root

element.

2

html

<!DOCTYPE html><html lang=“pt”>

</html>

html 5

Definir o idioma principal do documento.Não indica a codificação de caracteres da

página.

3

lang

<!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

4



<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

<head> <title>Meu documento html</title></head>

</html>

html 5

Titulo do documento“Meu documento html”

5

<body>Escrever directamente sobre o documento.

</body>

</html>


ver

http://livepage.apple.com/

<body>

<h1>O Cabeçlho da Página</h1>

O primeiro parágrafo.

</body></html>

<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

<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

<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

<head><meta charset=Latin-1>

</head></html>

html 5


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

</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

</head><body>

</body>

</html>

html 5

No elemento BODY ficam todos os conteúdos principais como texto, imagens,

vídeos, etc.


SECÇÔES E CONTEÙDOS

</head><body>

</body>

</html>

html 5


vídeos, etc.


<header>, <footer>, <article>, <section>, <nav>, <aside>

SECÇÕES – “document sectioning elements”

</head>

<body>

</body>

</html>

html 5


vídeos, etc.


ParágrafosListas

Citações (blockquotes)Listas

Imagens

CONTEÚDOS– “Content Grouping Elements”

</head>

<body>

</body></html>

html 5


vídeos, etc.


• Utilização dos <hn>• O elemento <section>• O elemento <article>• O elemento <aside>

TEXTO SEMÂNTICO– “Text Level Semantics”

</head>

<body>

</body></html>

html 5


vídeos, etc.


<table><tr><td><th>

..

DADOS EM TABELAS

</head>

<body>

</body></html>

html 5


vídeos, etc.


<FORM>..

INTRODUÇÃO DE DADOS

</head>

<body>

</body></html>

html 5


vídeos, etc.


<EMBED><AUDIO><VIDEO>

..

DADOS EMBEBIDOS

</head>

<body>

</body></html>

html 5


vídeos, etc.


PRECISAM DE JAVASCRIPT PARA FUNCIONAR..

ELEMENTOS INTERATIVOS

</head> <body>

 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.



</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> <body>

Nested Elements </body>

</html>

Um elemento pode ficar contido dentro de outros elementos.

Nested Elements

Nested Elements

Comentários



</head> <body>

 Este é o texto do parágrafo que aparece na janela do documento.

</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 é

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>



Para obter mais informações sobre este produto consulte o site da

<a href=”http://www.microsoft.com”>

Microsoft Corporation.

</a>



</body>

</html>

Hipertexto Links e URLsLink – Para documento externo na mesma pasta:

<!DOCTYPE html>


<head>

<meta charset=Latin-1>

</head>

<body>






</a>



Aceda ao nosso

<a href=“form.htm”>formulário</a>



…

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






</a>





Aceda ao nosso

<a href=“formularios/form1.htm”>

Formulário

</a>



Pasta x

IndexPasta

Formularios

form1

Hipertexto Links e URLsLink – Para um e-mail




<a href=”mailto:[email protected]?subject=assuntoxpto?body=texto da msg”>


</a>





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/> </head><body> Para obter mais informações consulte <a href=ghi/pagina1.html> página1 </a> </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/></head><body>

Para obter mais informações consulte<a href=ghi/pagina1.html>página1</a>

</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>

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>


<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>


<head>


<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">



<head>




<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">


<head>




</head>

<body>



As armas e os barões assinalados,

Que da ocidental praia Lusitana,

Por mares nunca de antes navegados,

Passaram ainda além da Taprobana,

Em perigos e guerras esforçados,

Mais do que prometia a força humana,

E entre gente remota edificaram

Novo Reino, que tanto sublimaram;

</body>

</html> VER

ATRIBUTO TITLE

Coloca um toolltip text no elemento:

<body>

As armas e os barões assinalados,

Que da ocidental praia Lusitana,

Por mares nunca de antes navegados,






</body>

</html>

Exemplo

ATRIBUTO ALIGN

<!DOCTYPE html>

<html lang="pt">


<head>




</head>

<body>



É pouco o que se sabe de Luís Vaz de Camões, e esse pouco é, ainda assim e na maioria dos casos, duvidoso. (…)

As armas e os barões assinalados,

Que da ocidental praia Lusitana,

Por mares nunca de antes navegados,






Exemplo

HEADINGS

<!DOCTYPE html>

<html lang="pt">

<head>


<title>Headings de HTML</title>

</head>

<body>

<h1>Cabeçalho de nível 1</h1>




Parágrafo



</body>

</html>

Exemplo

LINHAS HORIZONTAIS

<!DOCTYPE html>

<html lang="pt">

<head>


<title>Headings de HTML</title>

</head>

<body>

h1>Cabeçalho de nível 1</h1>

<hr>


<hr width=50%>


<hr size=30>


<hr noshade>

Parágrafo

<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 

O elemento

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

00 a linguagem html

Education

Transcript of 00 a linguagem html