Aula Pratica Html Modelos Cognitivos

HTML HTML CSS Javascript ASP ASP.NET PHP JAVA

HTML

O html é a linguagem básica da WWW. A maioria dos documentos da Internet encontar-se escrita em HTML, dai a sua importância.

O HTML é uma linguagem de marcas como

,

, , e outras cujo significado se ira explicar.

HTML

ESTRUTURA DO CODIGO O Código tem uma estrutura predefinida que utiliza marcas como , , . Estas devem ser fechadas usando / assim devemos fechar as marcas , ,

Os conteúdos HTML são colocados entre as marcas: e

HTML

Este é o seu primeiro documento feito em HTML. A estrutura inicia-se com e acaba com . O conteúdo do cabeçalho, entre e não e visível. O conteúdo, entre aparece na barra de titulo do navegador. O conteúdo apresentado, entre e é o texto : Este é o seu primeiro documento feito em HTML

HTML

FORMATAR TEXTO O texto pode ser formatado inserindo-o entre as marcas adequadas: Este texto aparece a negrito Este texto aparece em itálico O texto seguinte aparece <sup> sobrescrito

Todas as marcas devem ter o fecho correspondente é indiferente colocar as marcas na mesma linha ou não.

HTML

SEPARAR LINHAS NO TEXTO Para criar mudanças de linha, usamos marcas separadoras, como
, ou um par separador

esta linha e a seguinte não aparecem separadas

esta linha e a seguinte

já aparecem separadas

esta linha e a seguinte
também embora com um espaço mais pequeno <pre> A marca pre permite apresentar este texto tal e qual está escrito

HTML

TIPOS DE LETRA, TAMANHO E COR O Texto é formatado utilizando o parâmetro style na marca

O texto da linha seguinte

aparece formatado com outra cor e fonte

Ao parâmetro font-family atribui-se o valor Verdana Ao parâmetro font-size o valor 100% Ao parâmetro color o valor blue

HTML

CODIGOS DE CORES EM HTML Em Html utilizamos a especificação no formato RGB com a notação #RRGGBB

Isto é um parágrafo

<style type="text/css"> body {background-color: #CC00CC} p {margin-left: 20px}

Linha com texto vermelho

Pagina com cor de fundo

HTML

• Por aqui as cores

HTML

HIPERLIGAÇÕES

este texto liga a um ficheiro

este texto liga a um sítio na WWW

este texto liga a um ficheiro e abre uma janela nova

A marca (âncora) tem um parâmetro href=..., com a referencia da hiperligação, e fecha com a marca O parâmetro target=“_blank” abre o conteúdo numa nova janela

HTML

HIPERLIGAÇÕES PARA LOCAIS ESPECIFICOS Quando se pretende que a hiperligação aponte para um local especifico do documento temos que: -

No documento que é destino na hiperligação, definir o local do texto onde a ligação aponta

-

Definir a hiperligação para esse local

HTML

INSERIR IMAGENS As imagens são inseridas através da marca img e correspondente parâmetro src que indica a localização da imagem.

Inserir uma imagem:

Inserir uma imagem em movimento:

Inserir uma imagem de outra pasta:

Inserir uma imagem da WWW:

HTML

FORMATAR E ALINHAR IMAGENS COM TEXTO

uma imagem antes do texto

uma imagem depois do texto

Um parágrafo com uma imagem, em que a imagem está à esquerda graças ao atributo align="left".

Um parágrafo com uma imagem, em que a imagem está à direita graças ao atributo align="right".

Uma imagem no meio do texto alinhada por baixo

Uma imagem no meio do texto, a meia altura deste

Uma imagem no texto, alinhada por cima

Note-se que, por omissão, o alinhamento é feito por baixo:

uma imagem no texto

HTML

INSERIR IMAGENS COM HIPERLIGAÇÕES com a marca img e o correspondente parâmetro src

Imagem com uma hiperligação para um ficheiro na pasta:

Inserir uma hiperligação para um ficheiro noutra pasta:

Imagem com hiperligação para a WWW:

HTML

ENDEREÇOS ABSOLUTOS E RELATIVOS Existe muitas das veses a anecessidade de, a partir de um ficheiro, indicar a localização de um outro ficheiro. A localização de um ficheiro pode ser dada pelo seu URL ou seja pelo endereço na WWW. este texto Liga a um sitio na WWW.

HTML

Referencia a imagens ou outros objectos. As imagens podem ser indicadas pelo seu caminho obsoleto ou relativo.

Inserir uma imagem:

Inserir uma imagem de outra pasta:

Referência absoluta a uma imagem:

HTML

REFERENCIAS AO DOCUMENTO HTML Tal como as imagens as hiperligações podem ter um caminho relativo ou absoluto.

este texto liga-se a um ficheiro usando um caminho absoluto

este texto liga-se a um ficheiro usando um caminho relativo

HTML

Criar tabelas

aqui está uma tabela

verde	azul	branco
amarelo	branco

Uma tabela com 2 linhas e 3 colunas Para esconder as linhas da tabela substituir

HTML

Criar tabelas dentro de tabelas

aqui está uma tabela

Carlos	Ana

HTML

Tabelas mais complexas

aqui está a tabela

tem 3 linhas e 4 colunas

título 1	título 2
texto 1		texto2	texto 3
texto 4	texto 5	texto 6

HTML

Tabelas mais complexas

Telefone:	555 777 854
	222 888 818

Para dispor diversos elementos gráficos –blocos de texto imagens numa pagina recorre-se frequentemente a tabelas colocando esses elementos no interior das células.

HTML

Criar formulários Nome:
Apelido:

HTML

Receber informação do visitante através do formulário.

Nome:
Masculino:
Feminino:
<select name="auto"> Volvo Saab Audi

HTML

Molduras Para criar molduras horizontais substituir a linha 2 por:

HTML

Criar apenas 2 molduras Molduras com mecanismo de navegação:

HTML

O conteúdo do indice.htm é: Moldura 1
Moldura 2
Moldura 3