HTML. Um documento HTML é constituído por um conjunto de TAGS (ex. html, head, body, etc.).

Tamanho: px

Começar a partir da página:

Download "HTML. Um documento HTML é constituído por um conjunto de TAGS (ex. html, head, body, etc.)."

Adelino de Caminha Sampaio
8 Há anos
Visualizações:

1 HTML Um documento HTML é constituído por um conjunto de TAGS (ex. html, head, body, etc.). Para se criar um novo documento HTML pode-se utilizar o Bloco de Notas, bastando para tal gravar o documento com a extensão.html. O documento tem que ser constituído obrigatoriamente com a seguinte estrutura inicial: <html> [Inicio do documento HTML] <head>[inicio do cabeçalho do documento HTML] </head>[fim do documento HTML] <body>[inicio do corpo(conteúdo) da página html] </body>[fim do corpo(conteúdo) da página html] </html>[fim do documento HTML] No cabeçalho, entre outras Tags, existe o título (TAG- <title>). Exemplo: <title>título da página de Internet</title> NOTA: Não esquecer que a Tag <title> tem que estar dentro da Tag <head>. BODY Vamos agora dar exemplos de várias Tags que podes existir no BODY: Parágrafo Tag Exemplo: aqui podemos escrever o conteúdo de um qualquer parágrafo. Negrito Bold Tag Exemplo: aqui podemos escrever o conteúdo a bold/negrito de um qualquer parágrafo. Itálico Tag Exemplo: aqui podemos escrever o conteúdo a itálico de um qualquer parágrafo. Sublinhado -Underline Tag Exemplo: aqui podemos escrever o conteúdo Sublinado de um qualquer parágrafo. Centrado Tag <center></center> Prof. Nuno Pena - 1 -

O documento tem que ser constituído obrigatoriamente com a seguinte estrutura inicial: <html> [Inicio do documento HTML] <head>[inicio do cabeçalho do documento HTML] </head>[fim do documento HTML]

2 Exemplo: <center>aqui podemos escrever o conteúdo centrado de um parágrafo</center>. Riscado - Strike Tag <s></s> Exemplo: <s>aqui podemos escrever o conteúdo riscado de um parágrafo</s>. Nível Inferior Tag Exemplo: nível Inferior. Nível Superior Tag Exemplo: nível Superior FONT FONTE Tag Na Tag Font existem 3 atributos: FACE Tipo de Letra; SIZE Tamanho e COLOR Cor. Exemplos: Fonte Times New Roman Fonte Arial Fonte Courier New A palavra terá o tamanho 3 A palavra terá a cor vermelha Também podemos combinar os atributos: palavra com tamanho 3 e em vermelho ALINHAMENTO DO PAGÁGRAFO Tag - A opção: LEFT Esquerda; RIGHT Direita; CENTER Centrado; JUSTIFY Justificado. EXEMPLOS: alinhamento ESQUERDA-LEFT alinhamento DIREITA-RIGHT alinhamento CENTRADO-CENTER justificado - JUSTIFY 2 de 9

Nível Superior Tag <sup></sup> Exemplo: <sub>nível Superior</sub> FONT FONTE Tag <font></font> Na Tag Font existem 3 atributos: FACE Tipo de Letra; SIZE Tamanho e COLOR Cor.

3 Exemplo de uma página: Código: <html> <head> <title>meo TELEMOVÉL!!!</title> </head> <body> Tipo de Letra Tipo de Letra Tipo de Letra negrito-tag B, Sublinhado-Tag U, Itálico-Tag I e Centralizado-Center bold-negrito itálico underline-sublinhado <center>centrado</center> <s>riscado-strike</s> h2o-água -SUB-Nível Inferior 5 metros quadrados 5m2 -SUP-Nível Superior alinhamento ESQUERDA-LEFT alinhamento DIREITA-RIGHT alinhamento CENTRADO-CENTER justificado - JUSTIFY </body> </html> RESULTADO: (VER Página Seguinte.) 3 de 9

Itálico-Tag I e Centralizado-Center </p> <p><b>bold-negrito</b></p> <p><i>itálico</i></p> <p><u>underline-sublinhado</u></p> <p><center>centrado</center></p> <p><s>riscado-strike</s></p>

4 - Quando se introduz esta marca, resulta numa quebra de linha(break).. Qualquer texto introduzido depois desta marca, aparecerá na linha imediatamente a seguir ao texto anterior. Também não necessita de ser fechada. LINKS Ligação - Hyperligação TAG - <a href= Moodle da ESSH </a> TAG - <a href=mailto:meumail@mail.pt> Manda-me 1 MAIL </a> IMAGENS Imagem de FUNDO: <body background=nomedaimagem.***></body> Cor de FUNDO: <body bgcolor=cor></body> Imagem: <img scr= NomeFoto.*** height=?? width=?? Border=?? Alt= Comentário > Onde SRC corresponde ao nome do ficheiro; height Altura; width-largura; Border Borda e ALT é um comentário. 4 de 9

LINKS Ligação - Hyperligação TAG - <a href=http://moodle.esec-sra-hora.net/> Moodle da ESSH </a> TAG - <a href=mailto:meumail@mail.

5 TABELAS Exemplo: <table width = 500 border=9> <th colspan=2>tabelas</th> <td>célula 1-1</td> <td>célula 1-2</td> <td colspan=2 align=center bgcolor=blue>linha 2 única</td> <td>homens</td> <td rowspan=2>duas células</td> <td>mulheres</td> </table> Uma tabela tem sempre as TAGS - <table></table> Pode-se reservar a 1ª linha da tabela para o título. Para tal, utiliza-se a TAG <th>título</th>. Também se pode definir o nº de colunas que a nossa tabela terá, para tal, utiliza-se o atributo colspan. O mesmo se aplica para as linhas; rowspan. As linhas são compostas pela TAG -. 5 de 9

<table></table> Pode-se reservar a 1ª linha da tabela para o título. Para tal, utiliza-se a TAG <th>título</th>.

6 As colunas são compostas pela TAG <td></td> Outros Exemplos: Código: Visualização <table border="1"> <td colspan="3">célula 1</td> <td>célula 2</td> <td>célula 3</td> <td>célula 4</td> </table> <table border="1"> <td colspan="2">célula 1</td> <td>célula 2</td> <td>célula 3</td> <td>célula 4</td> <td>célula 5</td> </table> <table border="1"> <td rowspan="3">célula 1</td> <td>célula 2</td> <td>célula 3</td> <td>célula 4</td> </table> 6 de 9

<td colspan="2">célula 1</td> <td>célula 2</td> <td>célula 3</td> <td>célula 4</td> <td>célula 5</td> </table>

7 MARCAS E NUMERAÇÃO Seguidamente vamos colocar marcas e numerações como exemplo e respectivas Tags/código. Código: Visualização <ul type=square> </ul> <ul type=disc> </ul> <ul type=circle> </ul> <ol type=1> </ol> <ol type=i> </ol> Outras TAGS: <hr> - Linha Horizontal. EXEMPLO: <hr color=blue size=10> 7 de 9

Código: Visualização <ul type=square> </ul> <ul type=disc> </ul> <ul

8 CORES: 8 de 9

9 9 de 9

Documentos relacionados

HTML. Conceitos básicos de formatação de páginas WEB

HTML. Conceitos básicos de formatação de páginas WEB HTML Conceitos básicos de formatação de páginas WEB HTML HyperText Markup Language Linguagem utilizada para criar hipertexto na web Ou seja, criar documentos estruturados utilizando para tal um conjunto