Módulo 17E. Revisões de HTML. A) Noções básicas de HTML

Tamanho: px

Começar a partir da página:

Download "Módulo 17E. Revisões de HTML. A) Noções básicas de HTML"

Alexandra Franca Guimarães
6 Há anos
Visualizações:

1 Módulo 17E Revisões de HTML A) Noções básicas de HTML

2 Estrutura básica de um documento Um documento HTML começa com a tag de abertura <HTML> e termina com a tag de fecho </HTML>. De seguida, temos a considerar as duas partes principais que constituem um documento HTML: o cabeçalho que fica compreendido entre as tags <HEAD> e </HEAD>; o corpo que fica compreendido entre <BODY> e </BODY>. Nota: a escrita do código HTML pode ser feita indiferentemente em maiúsculas e minúsculas.

3 Estrutura básica de um documento Na parte do cabeçalho (entre as tags <HEAD> e </HEAD>), o principal elemento que é habitual incluir-se é o título da página que surge entre as tags <TITLE> e </TITLE>. Este título não aparece na página propriamente dita, mas na barra de título do browser em que ela for aberta. Toda a informação a apresentar na página texto, imagens e outros grafismos, etc. deverá ser incluída na secção delimitada entre as tags <BODY> e </BODY>.

4 Escrever e testar código HTML Um método muito simples para praticar a escrita de páginas HTML com a sua visualização imediata num browser pode ser o seguinte: 1. Abrir o Bloco de Notas do Windows 2. Escrever o código HTML para a página que se tem em vista e guardar o ficheiro com a extensão.htm; 3. Abrir o ficheiro acabado de criar, o que faz abrir o browser (Internet Explorer, no caso).

5 Escrever e testar código HTML Sempre que se efectuar alguma alteração no documento HTML e se quiser visualizá-la no browser, deve-se: 1. Guardar o ficheiro no Bloco de Notas, mantendo o seu local de gravação; 2. Passar ao Browser e clicar no botão Actualizar ou teclar F5.

6 Títulos e texto em documentos Neste exemplo pode ver-se uma página HTML simples, apenas com texto e duas linhas horizontais. Na secção cabeçalho <HEAD> </HEAD>, incluiu-se, para além de um título, um exemplo de um comentário. Os comentários, em HTML, são incluídos dentro de sinais especiais: . A sua finalidade é simplesmente dar alguma informação útil ao leitor do código e não têm qualquer interferência na página.

7 Títulos e texto em documentos Na secção do corpo da página <BODY> </BODY>, começou-se por incluir um título de nível máximo <H1> </H1> e um outro de segundo nível. São possíveis seis níveis de títulos de tamanho decrescente de <H1> até <H6>.

8 Títulos e texto em documentos Cada tag <P> define um novo parágrafo e não necessita de tag de fecho </P>. Aliás, se esta tag for incluída, o efeito será um novo parágrafo. A tag <HR> define uma linha horizontal e não tem tag de fecho.

9 Títulos e texto em documentos Um aspecto muito importante da linguagem HTML são os atributos. Estes são incluídos dentro das tags e permitem definir certas características do elemento a que a tag se refere. Por exemplo, na tag <HR Width=50%>: - o elemento HR define uma linha linha horizontal; - o atributo Width permite definir a extensão da linha na página; neste caso, 50% indica que a linha terá apenas 50% da largura da página. Cada atributo é seguido do sinal de igual e de um valor. Este valor pode ser um valor numérico ou de outro tipo.

10 Títulos e texto em documentos Geralmente os valores dos atributos são incluídos dentro de aspas. Ex.: <P Align= center > O atributo Align define o tipo de alinhamento do parágrafo. No caso do exemplo é center, ou seja, centrado. Os outros valores possíveis são: left e right (à esquerda e à direita, respectivamente).

11 Formatações de texto É usual que o texto de uma página comece com um título e, por vezes, também se utilizam subtítulos. Como já se viu, em HTML definem-se títulos com tags que vão desde <H1> </H1> até <H6> </H6>. Ex.: <H1> Este é o título maior </H1> <H6> Este é o subtítulo menor </H6> Esses títulos podem, também, ser alinhados, através do atributo Align.

12 Formatações de texto Os parágrafos de texto que não são títulos costumam ser sinalizados pela tag de parágrafo <P>. E podem, também, ser alinhados com o atributo Align. Os browsers apresentam o texto dos parágrafos com uma fonte tipográfica e um tamanho predefinidos; porém, é possível alterar essas definições com a tag <FONT> </FONT>.

13 Formatações de texto A tag <FONT> </FONT> é definida através dos seguintes atributos: - face define a fonte tipográfica; - size define um tamanho entre 1 e 7; - color define a cor do texto. Nota: No Internet Explorer, as predefinições do texto normal são: fonte Times New Roman com tamanho 3 e cor preta.

14 Formatações de texto Exemplo 1: <FONT Face = Futura > Neste caso, será alterada a fonte normal para Futura. No caso da fonte não estar instalada será usada a predefinida do browser.

15 Formatações de texto Exemplo 2: a) <FONT Size = 4> b) <FONT Size =+1> Em princípio terão ambos o mesmo efeito, uma vez que, sendo 3 o tamanho predefinido, passar para 4 equivale a adicionar 1 (+1) ao anterior.

16 Formatações de texto Quanto às cores, é possível utilizar palavras reconhecidas pelo browser, como: Red; Green ou Blue. Pode-se também usar uma representação codificada, por exemplo: <FONT Color= FF0000 > - equivale a Red <FONT Color= 00FF00 > - equivale a Green <FONT Color= 0000FF > - equivale a Blue

17 Formatações de texto Este método é conhecido como RGB (Red, Green, Blue). Nele são atribuídos dois dígitos hexadecimais a cada uma das três cores básicas assim: RRGGBB ou seja, para cada uma das três cores (RGB), dois dígitos que podem ir de 00 a FF. Desta forma podem obter-se todas as combinações possíveis das cores.

18 Tabela de códigos de cores

19 Formatações de texto Em HTML existem tags para aplicar os estilos tipográficos mais habituais, como sejam: bold ou negrito; itálico; sublinhado, etc. Estes estilos podem aplicar-se a parágrafos inteiros ou apenas a partes de texto, palavras ou caracteres. Exemplos: <B> Este texto vai aparecer em Bold </B> <P>Parágrafo com um termo em <I> Itálico </I> <P> Frase com um termo <U> sublinhado </U> Nota: neste caso as tags de fecho são muito importantes, uma vez que, enquanto não surgir a tag de fecho correspondente a uma tag aplicada, o efeito desta prolonga-se por todo o texto que se seguir.

20 Formatações de texto Exemplo 3: Uma página HTML com exemplificação de algumas formatações de texto: títulos, alinhamentos e fontes tipográficas.

21 Formatações de texto Exemplo 4: Uma página HTML com exemplificação de algumas formatações de texto: estilos tipográficos: bold, itálico, sublinhado, etc.

22 Formatações de texto As listas de itens em HTML podem ser criadas com duas opções possíveis: - <OL> </OL> - listas ordenadas, ou seja, em que os itens surgem numerados (1,2,3 ); - <UL> </UL> - listas não ordenadas. Em qualquer dos casos, cada elemento a incluir dentro de uma lista é inserido dentro das tags: <LI> </LI>.

23 Formatações de texto Exemplo 5: Uma página HTML com exemplos de listas: código e resultados no browser.

24 Tutoriais de HTML

Documentos relacionados

3. Construção de páginas web Introdução ao HTML

3. Construção de páginas web Introdução ao HTML 3. Construção de páginas web 3.1. Introdução ao HTML 1 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido para especificar a organização lógica de um documento com extensões de hipertexto,