html

x(html)

(X)HTMLhttp://www.w3schools.com/html/default.asp

(X)HTMLconceitos introdutrios

atualmente um documento HTML composto por uma srie de elementos formatados por CSS.

Em HTML (normalmente referimos como HTML o que XHTML) existe uma clara distino entre estrutura e forma.

O XHTML uma verso mais restrita e limpa do HTML e definido como uma aplicao XML. O XHTML uma combinao de HTML com XML, uma depurao do HTML tendo em conta a organizao estrutural do XML.


alm disso, o XHTML

uma linguagem de marcao / markup (e no programao!) usada nas pginas da web;

os documentos so escritos apenas com texto;

cada pgina um ficheiro que tem a extenso .htm (ou .html);

o nome do ficheiro tem de ser em minsculas, sem acentos e sem espaos (tal como todos os ficheiros utilizados no projeto web tais como imagens, scripts, pastas, etc...).

(X)HTMLconceitos introdutrios | identao do cdigo


um elemento HTML constitudo preferencialmente por 3 partes

marcador / etiquetas (tags) de inicio constituda pelos smbolos < e > e uma palavra reservada (p, form, img, etc...)

um contedo marcador (tags) de fim

html

contedo

elemento

(X)HTMLconceitos introdutrios | marca de inciocomo foi referido anteriormente, o marcador de inicio constituda pelos smbolos < e > e uma palavra reservada.

exemplo:

No entanto, alguns tm ainda atributos que o personalizam ou complementam e que podem ser obrigatrios ou opcionais. O seu valor colocado entre aspas.

exemplos:

contedo

contedo

(X)HTMLconceitos introdutrios | contedocontedo basicamente o texto que aparece nas pginas;Pode ser escrito em portugus, com maisculas, minsculas, acentos e espaos

contedo

(X)HTMLconceitos introdutrios | marca de fima marca de fim serve exclusivamente para indicar que o fim do elemento que estamos a utilizar

Usa-se o sinal /

Por exemplo:

contedo

o XHTML exige uma sintaxe limpa e apresenta as seguintes caractersticas:

Os elementos tm que ser claramente aninhados (nested) da seguinte forma: Isto um texto a bold e itlico e no desta Este um texto a bod e itlico

Os seus elementos devem ser sempre fechadosIsto um pargrafo

Os elementos vazios, tambm, devem ser fechados e com um espao extraantes da barra

Os seus elementos devem ser sempre em minsculas

(X)HTMLconceitos introdutrios | caractersticas do XHTML

exemplo da estrutura base de um documento HTML:

...

...

(X)HTMLestrutura da pgina

cabealho

corpo

luz do XHTML, um documento vazio teria ento o seguinte aspeto:

.... ....

(X)HTMLestrutura da pgina

cabealho

corpo

DOCTYPE O tipo de DTD (document type definition) indica ao browser qual o tipo de marcao que est a ser usada e um link para o documento.

Por defeito pomos a ltima mais usada:

(X)HTMLestrutura da pgina | definio do DTD

o cabealho do documento contm diversas informaes importantes para o correto funcionamento e formatao do contedo do documento (pode ser entendido como os bastidores do palco principal).

Por exemplo, nesta rea que se define o titulo que aparece na barra superior do navegador (ou mais recentemente, no separador). De que forma? Recorrendo etiqueta

Ex. atelier de multimdia

(X)HTMLestrutura da pgina | o cabealho | title

o elemento usado para conter meta-informao sobre os contedos do documento, de forma a que os mecanismos de pesquisa possam mais facilmente identificar e catalogar os documentos encontrados.

keywords (palavras chave para os motores de busca) tipo de contedos e de linguagem tipo de codificao dos caracteres autor descrio da pgina tempo de atualizao automtica entre outros...

(X)HTMLestrutura da pgina | o cabealho | meta

atelier de multimdia

ainda nesta zona que se definem os links para os ficheiros externos.

atelier de multimdia

o elemento body contm todos os elementos, atributos e informao que a pgina deve apresentar ao leitor.

O elemento body deve ser composto depois do elemento head e antes da tag de fecho do elemento html:

...

Todos os contedos do documento XHTML.

...

(X)HTMLestrutura da pgina | o corpo (body)

o elemento permite-nos inserir comentrios no cdigo HTML. Os comentrios no so lidos pelo browser, embora sejam visveis na source do documento.

(X)HTMLestrutura da pgina | os comentrios

ttulos (cabealhos)

existem 6 nveis de ttulos (headings).

o nvel de importncia definido por um nmero entre 1 e 6.

o mais importante ser o e o menos importante o . Esta importncia

Ex.

Mais importante

2 mais importante

ltimo

(X)HTMLestrutura da pgina | elementos do corpo | ...

pargrafo e quebra de linha

pargrafos: delimitam blocos de informao contedo do pargrafo

quebra de linha:

(elemento que no precisa de marca do fim)

Ex.

Em OM temos trs reas: HTML, CSS e Drupal. A UC tem 60 horas. O docente o Marco Pinheiro, quer gostem quer no!

(X)HTMLestrutura da pgina | elementos do corpo | ;

o elemento hr permite definir rguas horizontais que podem ser usadas para quebrar textos longos ou para estruturar melhor um documento.

o elemento hr um elemento vazio, logo, no tem tag de fecho, devendo ser fechado na tag de abertura, precedida de um espao.

Textos muito longos podem ser divididos emseces com headings ou, em alternativa,rguas horizontais Um headingtambm quebra o texto. Podendo um novotexto comear imediatamente a seguir.

As rguas so formatadas por defeito a toda a largura da janela do documento, com sombreado.

(X)HTMLestrutura da pgina | as rguas horizontais hr

negrito ...

itlico ...

sublinhado (underline)

Ex.

Em OM temos trs reas: HTML, CSS e Drupal. A UC tem 60 horas. O docente o Marco Pinheiro, quer gostem quer no!

(X)HTMLestrutura da pgina | elementos do corpo | formatao txt

e agora estaro a pensar: e como se formata o tipo de letra, tamanho, cor, etc.? >> CSS (mais adiante).

(X)HTMLestrutura da pgina | elementos do corpo | formatao txt

As imagens so normalmente usadas inline, ie, inseridas num bloco de texto.O elemento img sempre usado com o atributo src (source) que aponta para a url da imagem, no servidor que aloja o documento html ou outro e com o atributo alt, que fornece uma descrio em texto da imagem. O elemento img um elemento vazio, devendo portanto ser sempre fechado com />.

O atributo alt permite que os browsers possam apresentar texto em lugar da imagem caso o suporte de imagens esteja desligado, o browser apenas suporte texto, enquanto a imagem carregada, ou se a imagem estiver, por alguma razo, inacessvel.

As imagens so dimensionadas automaticamente pelo browser quando carregadas. Contudo, em documentos complexos, por vezes recomendvel utilizar tambm os atributos width e height para indicar ao browser a dimenso das mesmas, de forma a que a pgina possa ser formatada mesmo que estas estejam inacessveis ou demorem mais tempo a carregar.

(X)HTMLestrutura da pgina | elementos do corpo | imagens

imagem

nota: ter em ateno que o caminho e o nome do ficheiro da imagem tm de ser escritos partindo do ponto de partida do documento; ou seja, se a imagem estiver na directoria do documento HTML s se escreve o nome do ficheiro. Se estiver noutra directoria temos de seguir os mesmo cuidados que nas hiperligaes

mais uma vez: usar minsculas, no usar acentos e espaos nos nomes das imagens!


imagem

Uma imagem com o tamanho real:

no caso de se pretender apresentar a imagem com dimenses diferentes do original, podero ser utilizadas as propriedades width (largura) e height (altura) e especificar a medida (em pxeis).

Uma imagem com 48 pixeis de comprimento e 48 pixeis de altura

Uma imagem com 148 pixeis de comprimento e 48 pixeis de altura

(nota: caso no se especifique uma destas duas propriedades, o redimensionamento ser feito de forma proporcional, o que bastante til)


imagem

uma vez que a tarefa pode tornar-se demorada, existem diversas ferramentas que ajudam a fazer esta tarefa:

http://www.maschek.hu/imagemap/imgmap editores de html (dreamweaver, kompozer, etc.)

(X)HTMLestrutura da pgina | elementos do corpo | image maps

lista

elemento de uma lista

Ex.

Informatica Fotografia Video

(X)HTMLestrutura da pgina | elementos do corpo | listas numeradas

Ex. Lista numeradas:

Maas Bananas Limes Laranjas

Lista com letras:


...


Ex. Lista com letras minusculas: Maas Bananas Limes Laranjas

Lista com numeros romanos:


...


Ex. Lista com numeros romanos minusculos:



lista

elemento de uma lista

Ex.

Informatica Fotografia Video

(X)HTMLestrutura da pgina | elementos do corpo | listas n/ numeradas

O elemento a (anchor) define ligaes relativas ou absolutas. Ao contrrio da maior parte dos elementos, o elemento a requer sempre ou o atributo href ou o atributo name.

descrio descrio

(X)HTMLestrutura da pgina | elementos do corpo | ncoras

O elemento a (anchor) define ligaes relativas ou absolutas. Ao contrrio da maior parte dos elementos, o elemento a requer sempre ou o atributo href ou o atributo name.

O atributo name permite que seces de um documento XHTML sejam rotuladas com uma referncia especfica. O atributo name permite criar links para uma seco especfica dentro do documento. Assim, se tivermos um documento longo podemos criar dentro do documento um link para o topo, por exemplo.

A utilizao deste elemento apenas com o atributo name no resulta na criao de um link visvel mas sim na marcao de um alvo para criao de links.

(X)HTMLestrutura da pgina | elementos do corpo | ncoras (internas)

Assim, o link

Topo

remete-nos para o topo desta pgina. Quando os links so feitos dentro de um mesmo documento, devemos sempre especificar o name com #,

bla bla bla

mesmo quando queremos linkar ao topo do documento (e neste caso deveremos criar um name no topo), caso contrrio, especificando apenas o nome do documento, faremos com que o browser recarregue a pgina.

(X)HTMLestrutura da pgina | elementos do corpo | ncoras (internas)

hiperligao (link)faz a ligao a outros documentos

descrio

Ex.

J passaste pelo Moodle de OM? bastante til!

(X)HTMLestrutura da pgina | elementos do corpo | ncoras (externas)

hiperligao (link)faz a ligao a outros documentos

Ex.

Ligao de um ficheiro que est em w:\tm\ficheiro1.htm para um que est em w:\tm\ficheiro2.htm

Ligao de um ficheiro que est em w:\tm\ficheiro1.htm para um que est em w:\tm\teorica\ficheiro2.htm

Ligao de um ficheiro que est em w:\tm\ficheiro1.htm para um que est em w:\hj\ficheiro2.htm


a nova pgina abre na janela atual do navegador. Se desejarmos abrir uma nova janela em cima da j aberta, utilizar o atributo target=_BLANK

descrio

pode e deve ainda ser adicionada descrio hiperligao recorrendo ao atributo title

descrio


muitas vezes usada para estruturar a informao

tabela

linha (table row) clula (table data) (no caso de ser a primeira linha: ... - cabealho)

ttulo 1 ttulo 2

Clula da 2 linha e 1 Coluna Clula da 2 linha e 2 Coluna

(X)HTMLestrutura da pgina | elementos do corpo | as tabelas

tambm pode ser adicionada uma legenda tabelaLegenda Ex.

Esta tabela tem legenda e borda de 6:

Legenda da tabela... tit1 tit2 tit3

400 500 600

(X)HTMLestrutura da pgina | elementos do corpo | as tabelas

as iframes servem para abrir uma janela para outro local (ou documento) dentro do prprio documento. como que uma janela para outro local!

Ex.

(X)HTMLestrutura da pgina | elementos do corpo | iframes

(X)HTMLembeber contedos externos | widgets sociais

http://developers.facebook.com/docs/plugins/

http://web.appstorm.net/how-to/social-media-how-to/6-tools-to-create-a-google-plus-profile-widget-for-your-site/

youtube.com

twitter.com/about/resources/widgets/

(X)HTMLvalidao do cdigo escrito

http://validator.w3.org

(X)HTMLestrutura da pgina | formulrios

(X)HTMLestrutura da pgina | formulrios

http://www.w3schools.com/html/html_forms.asp

Dentro do grupo dos formulrios, o HTML oferece os seguintes elementos: Input

text fields (caixa de input de uma linha) file fields checkbox (liga/desliga) buttons (submit / reset) radio (caixa de opo) hidden fields (campos oculos)

textareas (reas de texto) select (caixas de combinao / listagem) fieldsets (delimitao e agrupamento de campos)

(X)HTMLestrutura da pgina | formulrios | tags essenciais

Qualquer formulrio criado em HTML delimitado com as tags (e ...) A tag form tem as seguintes propriedades:

action - ficheiro que ir receber / processar os dados method - tipo de envio (GET ou POST) enctype - tipo de dados a ser enviado pode ser de dois tipos:

application/x-www-form-urlencoded - envio apenas de texto multipart/form-data - envio de texto / ficheiro (binrio)

Ex. upload de uma foto, documento, etc.

Ex.

(X)HTMLestrutura da pgina | formulrios | tags essenciais | form

A tag desenha uma caixa de texto Tem a seguinte propriedade:

size - nmero de caracteres que mostrar antes de desaparecerem Ex.

(X)HTMLestrutura da pgina | formulrios | tags essenciais | input

As tags criam um campo cujo valor definido apenas no cdigo html e como tal, nunca aparecer desenhado junto dos outros campos.

Obs. se o utilizador tiver curiosidade e for ver o cdigo fonte da pgina, ter acesso ao valor declarado no mesmo!

Ex.


A tag criam uma caixa cujo valor ser de uma lgica booleana, ou seja, sim ou no

Caso o utilizador active esta caixa, ser enviado para o servidor o valor atribuido mesma (value). Caso contrrio, a varivel passada para o servidor com valor nulo

Caso o programador queira ter a caixa activada de forma predefinida, dever adicionar a propriedade checked com o valor checked

Ex.


A tag criam uma caixa cujo valor ser de uma lgica booleana, ou seja, sim ou no Caso o programador queira ter a caixa activada de forma predefinida, dever adicionar a propriedade

checked.

Nota importante: Se for dado o mesmo nome s tags (neste caso - prato), o utilizador pode apenas escolher uma opo! Caso contrrio, poderia activar diversas tags radio.

Exemplos:PeixeCarneSalada


A tag desenha uma caixa que permite seleccionar um ficheiro do computador do cliente (que mais tarde ser enviado para o servidor)

Ex.


As tags e desenham um boto no formulrio A nica diferena entre eles apenas o fim a que se destinam.

reset - limpa todos os campos que constam do formulrio submit - envia os dados do formulrio para o servidor para ser processado

Ex. Ex.


A tag criam uma caixa se listagem capaz de mostrar diversos valores sempre que o utilizar clicar na mesma.

S ser enviado para o servidor a opo seleccionada pelo utilizador. Exemplo:

M F H

(X)HTMLestrutura da pgina | formulrios | tags essenciais | select

Ao contrrio da tag que cria uma caixa de uma s linha, a tag permite que o utilizador tenha uma caixa de introduo de dados mas desta feita com vrias linhas ao seu dispor.

Tem as seguintes propriedades: cols - nmero de caracteres que mostrar em largura rows - nmero de linhas que a caixa ter

Ex.

!! ao contrrio das outras caixas de input, esta tag necessita ser fechada!

(X)HTMLestrutura da pgina | formulrios | tags essenciais | textarea

A tag cria um rtulo para o campo de input de forma a que o utilizador tenha conhecimento do que se pretende com o mesmo.

Ex.

nome do utilizador

(X)HTMLestrutura da pgina | formulrios | tags essenciais | label

A tag desenha uma moldura em volta de um ou vrios campos do formulrio de forma a agrup-los visualmente com uma moldura em torno dos mesmos;

Acrescenta ainda uma pequena legenda que descreve o tema a que os campos se referem. Ex. dados profissionais ... (campos aqui!) ...

(X)HTMLestrutura da pgina | formulrios | tags essenciais | fieldset

cheat sheet de HTML:http://elearning.esev.ipv.pt/moodle1112/file.php/613/html/html-cheat-sheet.pdf

(X)HTMLreferncias

http://www.w3schools.com/html http://www.leonelcunha.net/aulas12p/recursos/ppm_2_XHTML_CSS.pdf

tutoriais vdeo: http://www.guanabara.info/category/lp/html/

(X)HTMLreferncias

o futuro?

HTML5http://www.w3schools.com/html5/html5_reference.asp

CSS3http://html5-showcase.com/

html

Documents

Transcript of html