GOVERNO DA REPÚBLICA PORTUGUESA gedit Bloco de notas Sistema Operativo Linux Tecnologias de Informação e Comunicação Professor: Joaquim Frias
Instruções básicas do HTML TAGS TAGS Uma tag é uma instrução que ao ser interpretada pelo browser vai ter efeitos sobre a estrutura da página, sobre o texto, sobre uma imagem, uma hiperligação ; As tags colocam-se sempre entre os sinais de < (menor) e > (maior); As tags dividem-se em dois grupos: Únicas-quando não existe a tag de fecho <TAG> Duplas quando existe uma tag de fecho, que é igual à de abertura, mas tem uma barra / a seguir ao sinal de menor <TAG> </TAG>
Instruções básicas do HTML TAGS As tags podem ser classificadas como: Simples quando são constituídas apenas pelo sinal de <, nome da tag, e sinal de > <html> Com argumentos quando a seguir ao nome da tag têm uma ou mais instruções com indicações complementares sobre a formatação do texto, do fundo, dos limites, etc <TAG argumento1= condição argumento2= condição >
Estrutura de um documento HTML <HTML>... </HTML> Dentro destas tags, temos duas secções básicas: HEAD controla as especificações do cabeçalho de uma página; Uma tag muito utilizada no HEAD é a tag TITLE, que permite escrever o título da página; BODY controla as especificações da parte principal de uma página.
Estrutura de um documento HTML <HTML> <HEAD> <TITLE> Primeira página em HTML </TITLE> </HEAD> <BODY> Esta é minha primeira página em HTML! </BODY> </HTML> De resolução Nome: Ex1.html
Resultado Ex1.html
Faça a alteração ao exercício 1
Resultado Ex2.html
Tags de formatação de texto <CENTER> </CENTER> Centra o texto e todos os elementos contidos entre o sua abertura e o seu fecho; <B> </B> Aplica o estilo negrito; <I> </I> Aplica o estilo itálico; <U> </U> Aplica o estilo sublinhado; <SUP> </SUP> Faz com que o texto fique sobrescrito; <SUB> </SUB> Faz com que o texto fique subscrito; <P> </P>Cria um parágrafo na página;
Tags de formatação de texto TAGS de títulos e subtítulos - H1 tem o tamanho maior, e H6 o mais pequeno: <H1> </H1> <H2> </H2> <H6> </H6>
Tags de formatação de texto <FONT ARGUMENTO= condição > </FONT> formatação do texto contido entre a sua abertura e o seu fecho. Argumentos mais utilizados: o COLOR permite alterar a cor do texto o SIZE permite alterar o tamanho do texto o FACE permite alterar o tipo de letra
Estrutura de um documento HTML
Estrutura de um documento HTML
Estrutura de um documento HTML
Estrutura de um documento HTML
Alinhamento do texto em títulos e parágrafos As tags de título (H1, H2,, H6) e a tag de parágrafo (P), podem ter como argumento a instrução ALIGN, cujos valores podem ser: Argumentos mais utilizados: o Left o texto fica alinhado à esquerda o Right o texto fica alinhado à direita o Center o texto fica alinhado ao centro o Justify - o texto fica justificado
Alinhamento do texto em títulos e parágrafos De resolução Nome: Ex5.html
Alinhamento do texto em títulos e parágrafos
Quebras de linha As quebras de linha são criadas através da utilização da tag <BR>; São utilizadas quando se pretende forçar uma mudança de linha, num determinado ponto do texto, sem criar um parágrafo; A tag <BR> não tem tag de fecho nem qualquer conteúdo.
Quebras de linha De resolução Nome: Ex6.html
Quebras de linha
Linhas divisórias Para dividir uma página com linhas horizontais utiliza-se a tag<hr>; Atributos da tag HR:
Linha horizontal De resolução Nome: Ex7.html
Linha horizontal
Hiperligações A tag para criar hiperligações é a tag A é uma tag dupla. <A ARGUMENTO="condição" >Texto da Hiperligação </A> Os principais argumentos são: HREF destino da hiperligação (pode ser uma página web, um ficheiro, etc ) TARGET especifica como vai ser aberta a hiperligação (se na mesma janela, numa janela nova, etc ) O valor do TARGET pode ser: _self : abre a hiperligação na mesma janela _blank: abre a hiperligação numa nova janela
Hiperligações De resolução Nome: Ex7.html
Imagens A inserção de imagens é a tag IMG. É uma tag única, pelo que não tem fecho. No entanto tem a barra antes do sinal de > <IMG ARGUMENTO="condição" /> Argumentos da tagimg são: SRC nome do ficheiro da imagem ALIGN alinhamento da imagem. Pode tomar os valores: left e right BORDER Serve para colocar um bordo na imagem, medido em pixéis. Ex: 15 px HEIGHT Serve para especificar a altura da imagem. Pode ser em pixéis ou em percentagem da altura original. Ex: 110 px; 90% WIDTH Serve para especificar a largura da imagem. Pode ser em pixéis ou em percentagem da altura original. Ex: 230 px; 120%
Imagens De resolução Nome: Ex8.html
Imagens animadas Além de imagens no formato JPG, também é possível inserir imagens em formato BMP e PNG, e imagens animadas em formato GIF De resolução Nome: Ex9.html
Listas As possibilidades que o HTML oferece em relação ao tratamento de texto, são enormes, incluindo-se nessas possibilidades as listas de itens; As listas de itens são marcadores que se colocam no início das frases para listar ou enumerar um conjunto de itens; As listas podem ser de 3 tipos: Listas não ordenadas (unordered lists) tag<ul>.. </UL> Listas ordenadas (ordered lists) tag<ol> </OL> Listas de definição (definition lists) tag<dl> </DL>
Listas não ordenadas De resolução Nome: Ex10.html
Listas ordenadas De resolução Nome: Ex11.html
Tabelas A tag de construção de uma tabela em HTML é a tag TABLE; É uma tag dupla, tendo uma tag abertura e uma de fecho; <TABLE> </TABLE> Argumentos da tag TABLE: ALIGN alinhamento da tabela na página. Pode tomar os valores: left, center, right; BGCOLOR serve para especificar a cor de fundo da tabela; BORDER serve para colocar um bordo na tabela, medido em pixéis. Ex: 10px;
Tabelas Argumentos (cont) CELLSPACING serve para definir o espaço entre as células, em pixéis; WIDTH - serve para especificar a largura da tabela. Pode ser em pixéis, ou em percentagem da largura original. Ex: 230px; 120%. Exemplo: <TABLE ALIGN="center BGCOLOR="blue BORDER="5px"> </TABLE>
Tabelas As tabelas dividem-se sempre em linhas e colunas; A tag para abrir uma nova linha é a tag <TR> </TR>; Dentro das linhas, a tag para definir as células das colunas é <TD> </TD>; As tabelas podem ter uma linha de título, substituindo na linha a tag TD pela tag <TH> </TH>.
Tabelas De resolução Nome: Ex12.html
Tabelas
Bibliografia Aplicações Informáticas B Dalila Fonseca, Deolinda Pacheco, Fernando Marques e Ricardo Soares, Porto Editora