Aula Pratica Html Modelos Cognitivos

  • November 2019
  • PDF

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA


Overview

Download & View Aula Pratica Html Modelos Cognitivos as PDF for free.

More details

  • Words: 1,257
  • Pages: 26
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

um título para o documento 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 e 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

verdeazulbranco
amarelobranco


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 1título 2
texto 1 texto2texto 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">


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

Related Documents