gedit Bloco de notas

Tamanho: px

Começar a partir da página:

Download "gedit Bloco de notas"

Salvador Fartaria Belmonte
7 Há anos
Visualizações:

1 GOVERNO DA REPÚBLICA PORTUGUESA gedit Bloco de notas Sistema Operativo Linux Tecnologias de Informação e Comunicação Professor: Joaquim Frias

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

sinais de < (menor) e > (maior); As tags dividem-se em dois grupos: Únicas-quando não existe a tag de fecho <TAG>

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

a seguir ao nome da tag têm uma ou mais instruções com indicações complementares sobre a

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

especificações do cabeçalho de uma página; Uma tag muito utilizada no HEAD é

5 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

6 Resultado Ex1.html

7 Faça a alteração ao exercício 1

8 Resultado Ex2.html

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

estilo itálico; <U> </U> Aplica o estilo sublinhado; <SUP> </SUP> Faz com que o texto fique

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

11 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

Argumentos mais utilizados: o COLOR permite alterar a cor do texto o

12 Estrutura de um documento HTML

13 Estrutura de um documento HTML

14 Estrutura de um documento HTML

15 Estrutura de um documento HTML

16 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

Argumentos mais utilizados: o Left o texto fica alinhado à esquerda o Right o texto fica

17 Alinhamento do texto em títulos e parágrafos De resolução Nome: Ex5.html

18 Alinhamento do texto em títulos e parágrafos

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

uma mudança de linha, num determinado ponto do texto, sem criar

20 Quebras de linha De resolução Nome: Ex6.html

21 Quebras de linha

22 Linhas divisórias Para dividir uma página com linhas horizontais utiliza-se a tag<hr>; Atributos da tag HR:

23 Linha horizontal De resolução Nome: Ex7.html

24 Linha horizontal

25 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

26 Hiperligações De resolução Nome: Ex7.html

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

28 Imagens De resolução Nome: Ex8.html

29 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

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

31 Listas não ordenadas De resolução Nome: Ex10.html

32 Listas ordenadas De resolução Nome: Ex11.html

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

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

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

36 Tabelas De resolução Nome: Ex12.html

37 Tabelas

38 Bibliografia Aplicações Informáticas B Dalila Fonseca, Deolinda Pacheco, Fernando Marques e Ricardo Soares, Porto Editora

Documentos relacionados

CEEP-CENTRO ESTADUAL DE EDUCAÇÃO PROFISSIONAL PEDRO BOARETTO NETO INTERNET E PROGRAMAÇÃO WEB INICIO DE HTML

CEEP-CENTRO ESTADUAL DE EDUCAÇÃO PROFISSIONAL PEDRO BOARETTO NETO INTERNET E PROGRAMAÇÃO WEB INICIO DE HTML INICIO DE HTML Neste tutorial usaremos o já conhecido Notepad++ ou Bloco de Notas e um Browser (Chrome, Mozilla ou Internet Explorer). Para nossos exemplos usaremos o Chrome. A estrutura básica de uma