O que é HTML ?
(Hypertex Markup Language – Linguagem de Marcação de
Hipertexto) é a linguagem com que são codificadas as páginas da Web.
O funcionamento da Web tem como base:
- A linguagem HTML – que codifica a
estrutura de base das páginas Web;
- O protocolo http – que assegura a transferência dessas páginas através da Internet;
- A HTML não é uma linguagem de programação propriamente dita. É uma linguagem de estruturação e formatação de documentos (markup language). Como tal, a HTML não possui os recursos típicos das linguagens de programação, tais como: variáveis, operadores, funções, estruturas de controlo, etc;
- A utilização de HTML simples apenas produz páginas Web estáticas e sem interactividade com o utilizador. Para introduzir estas características nas páginas Web torna-se necessário combinar HTML com outras linguagens, nomeadamente as linguagens de scripting, como: Javascript; PHP; JSP; ASP; etc;
- A linguagem HTML utiliza Tags, marcas ou etiquetas de marcação para definir a estrutura e formatação das páginas Web.
- O protocolo http – que assegura a transferência dessas páginas através da Internet;
- A HTML não é uma linguagem de programação propriamente dita. É uma linguagem de estruturação e formatação de documentos (markup language). Como tal, a HTML não possui os recursos típicos das linguagens de programação, tais como: variáveis, operadores, funções, estruturas de controlo, etc;
- A utilização de HTML simples apenas produz páginas Web estáticas e sem interactividade com o utilizador. Para introduzir estas características nas páginas Web torna-se necessário combinar HTML com outras linguagens, nomeadamente as linguagens de scripting, como: Javascript; PHP; JSP; ASP; etc;
- A linguagem HTML utiliza Tags, marcas ou etiquetas de marcação para definir a estrutura e formatação das páginas Web.
Regras Básicas que é necessário
compreender antes de se
começar com a criação de páginas
Todos os “tags” são inseridos entre o sinal de menor e
maior:
<tag>
<tag>
Tirando aqueles que representam a posição de um objecto (a
inserção de uma imagem, por exemplo), todos os “tags” de formatação devem ser
abertos e fechados (utilizando o carácter ‘/’):
<tag> </tag>
<tag> </tag>
Todos os “tags” obdecem a uma hierarquia, como no seguinte exemplo:
<a> <b> <c> </c> </b> </a>
<a> <b> <c> </c> </b> </a>
O primeiro a abrir é o último a fechar, e vice-versa.
<a> <b> <c> </a> </b> </c>
<a> <b> <c> </a> </b> </c>
É indiferente utilizar maiúsculas ou minúsculas nos “tags”
<tag> é igual a <TAG> e a <Tag>
<tag> é igual a <TAG> e a <Tag>
Nota: No HTML
actual, as tags devem ser escritas em minúsculas.
ESTRUTURA BÁSICA DE
UM DOCUMENTO HTML
Um documento HMTL começa com a tag de abertura <html> e termina com a tag de fecho </html>
Um documento HMTL começa com a tag de abertura <html> e termina com a tag de fecho </html>
Exemplo:
<HTML>
-
-
-
</HTML>
-
-
-
</HTML>
As duas partes principais que constituem um documento:
- O cabeçalho (head) – que fica compreendido entre as tags <head> e </head>;
- O corpo do documento (body) – que fica entre as tags <body> e </body>
- O cabeçalho (head) – que fica compreendido entre as tags <head> e </head>;
- O corpo do documento (body) – que fica entre as tags <body> e </body>
Exemplo:
<HTML>
<HEAD>
-
-
</HEAD>
<BODY>
-
-
</BODY>
</HTML>
<HTML>
<HEAD>
-
-
</HEAD>
<BODY>
-
-
</BODY>
</HTML>
- O principal
elemento que é incluído no cabeçalho é o título da página – que surge entre as
tags <title> e </title>. (Este título aparece na
barra de título do browser em que a página for aberta.)
- No corpo do documento (entre as tags <body> e </body> é inserida toda a informação a apresentar na página – texto, imagens, etc.
- No corpo do documento (entre as tags <body> e </body> é inserida toda a informação a apresentar na página – texto, imagens, etc.
Criação de Páginas HTML
Para criarmos a nossa primeira página em HTML, basta um
simples editor de texto, como o Notepad ou Bloco de Notas. Podemos começar por
inserir o seguinte:
<HTML>
<HEAD>
<TITLE>a
minha primeira página</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
NOTA:
Vamos agora fazer a seguinte alteração:
<HTML>
<HTML>
<HEAD>
<TITLE>a minha primeira página</TITLE>
</HEAD>
<BODY>
Olá Mundo
</BODY>
</HTML>
Vamos agora fazer a seguinte alteração, para mudar de linha
( <BR> entre o texto ), este <BR> (be break) dá instruções ao
browser para fazer uma mudança de linha.
<HTML>
<HTML>
<HEAD>
<TITLE>a minha primeira página</TITLE>
</HEAD>
<BODY>
Olá Mundo
<BR>
Chamo-me Leonardo
<BR>
Chamo-me Leonardo
</BODY>
</HTML>
Comentários no HTML
- São incluídos dentro de sinais especiais:
<!--e-->
A sua finalidade é simplesmente dar alguma informação útil
ao leitor do código.
Títulos – seis níveis de títulos
- Nível máximo <h1> … </h1>
- Segundo nível <h2> … </h2>
- São possíveis seis níveis de títulos de tamanho decrescente de <h1> até <h6>
- A tag <p>…</p> define um parágrafo de texto
- A tag <hr> define uma linha horizontal e não tem tag de fecho. (actualmente, estas tags devem incluir a barra de fecho na própria tag: <hr/>.)
- Segundo nível <h2> … </h2>
- São possíveis seis níveis de títulos de tamanho decrescente de <h1> até <h6>
- A tag <p>…</p> define um parágrafo de texto
- A tag <hr> define uma linha horizontal e não tem tag de fecho. (actualmente, estas tags devem incluir a barra de fecho na própria tag: <hr/>.)
por
exemplo: o atributo WIDTH que permite definir a extensão da linha da página
<hr width = 50%>, que neste caso 50% indica que a linha terá apenas 50%
de largura de página.
- A tag <p align = “center”>, temos o atributo align
que define o tipo de alinhamento do parágrafo. Neste caso o valor do atributo é
“center”, ou seja, centrado. Os outros valores possíveis para o atributo align
são: “left” (à esquerda); “right” (à direita); “justify” (justificado).
Cada atributo é seguido do sinal de igual e de um valor.
Este valor pode ser um valor numérico ou de outro tipo. Atualmente, os valores
dos atributos devem ser incluídos dentro de aspas.
<html>
<head>
<title>Página
Exemplo</title>
<!--
Isto é um comentário. não aparece.-->
</head>
<body>
<h1>
Título de 1ºNivel </h1>
<h2>
Título de 2ºNivel </h2>
<p>
Parágrafo Normal </p>
<p>
<!--
Em cima um parágrafo em branco -->
<hr/>
<!-- Isto é uma linha horizontal -->
<hr
width = "50%">
<hr/>
<!--
Linha com 50% da largura de página -->
<p
align = "center"> Parágrafo centrado e com uma
<br>
quebra (br) ou mudança de linha a meio.
</body>
</html>
- Para contornar o breaks, utiliza-se uma referência
especial - (Non-Breaking SPace), que convém esclarecer que não é uma
tag.
<BODY>
Olá Mundo !
Chamo-me Eduardo.
</BODY>
Olá Mundo !
Chamo-me Eduardo.
</BODY>
TAG <font>
Os browsers apresentam o texto dos parágrafos com uma fonte tipográfica e um tamanho prefdefinidos; porém, podemos alterar essas definições com a tag <font> … </font>. Esta tag é 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.
Os browsers apresentam o texto dos parágrafos com uma fonte tipográfica e um tamanho prefdefinidos; porém, podemos alterar essas definições com a tag <font> … </font>. Esta tag é 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.
<font face = “helvética”, “futura”, “arial”>
- Neste exemplo, estamos a alterar a fonte normal para a futura ou, no caso de esta não estar instalada, para Helvética ou para Arial. No caso de nenhuma das fontes indicadas estar instalada, será usada a predefinida do browser
- Neste exemplo, estamos a alterar a fonte normal para a futura ou, no caso de esta não estar instalada, para Helvética ou para Arial. No caso de nenhuma das fontes indicadas estar instalada, será usada a predefinida do browser
<font size = 4>
<font size = +1>
- Em principio, terão o mesmo efeito, uma vez que, sendo 3 o tamanho predefinido, passar para 4 equivale a adicionar 1 (+1) ao anterior.
- Em principio, terão o mesmo efeito, uma vez que, sendo 3 o tamanho predefinido, passar para 4 equivale a adicionar 1 (+1) ao anterior.
Quanto às cores, podemos utilizar palavras reconhecidas pelo
browser, como: Red, Green ou Blue. Podemos também usar uma representação
codificada, por exemplo:
- <font color =
“ff0000”> - Red
- <font color = “00ff00”> - Green
- <font color = “0000ff”> - Blue
- <font color = “00ff00”> - Green
- <font color = “0000ff”> - Blue
Este é o método de RGB (red, green, blue). Neste são
atribuídos dois dígitos hexadecimais, a cada uma das 3 cores básicas – assim:
“RRGGBB”, dois dígitos que podem ir de 00 a FF. Assim podendo-se obter todas as
combinações de cores possíveis.
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. Por exemplo:
<b> Este texto vai aparecer em bold </b>
<p> Frase com um termo em <i>itálico</i>
<p> Frase com um termo <u>sublinhado</u>
<b> Este texto vai aparecer em bold </b>
<p> Frase 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 perlonga-se por todo o texto que se seguir.
<html>
<head>
<title> Formatação de
texto </title>
</head>
<body>
<h1
align ="center"> Título centrado </h1>
<h6
align ="right"> Título À direito </h6>
<p>
Parágrafo com as predefinições </p>
<font face = "arial"
size = +1 color = #ff0000>
<p> Parágrafo com
outras definições </p>
</font>
<p><b>
Parágrafo em bold (negro) </b></p>
<p><i>
Parágrafo em itálico </i></p>
<p><u>
Parágrafo com sublinhado </u></p>
</body>
</html>
Visão Geral sobre os principais tipos de tags HTMl
Estrutura e conteúdos do documento HTML
ELEMENTOS DE
APRESENTAÇÃO
- Fontes tipográficas; estilos; formatações; alinhamentos; etc.
- Fontes tipográficas; estilos; formatações; alinhamentos; etc.
<font>
face size color
<b> … </b>
<i> … </i>
<u> … </u>
style
face size color
<b> … </b>
<i> … </i>
<u> … </u>
style
Tags de estruturação
de um documento
<html> … </html> - Início e fim do documento;
<head> … </head> - Início e fim do cabeçalho;
<title> … </title> - Título da página do browser;
<body> … </body> - Corpo do documento.
<head> … </head> - Início e fim do cabeçalho;
<title> … </title> - Título da página do browser;
<body> … </body> - Corpo do documento.
Tags de títulos e
parágrafos de texto
<h1> … </h1> - Título de maior grandeza;
<h2> … </h2> - título de segunda grandeza;
…
<h6> … </h6> - Título de menor grandeza;
<p> … </p> - Parágrafo do texto;
<br/> - Quebra de Linha.
<h2> … </h2> - título de segunda grandeza;
…
<h6> … </h6> - Título de menor grandeza;
<p> … </p> - Parágrafo do texto;
<br/> - Quebra de Linha.
Algumas tags de
formatação de texto
<font> … </font> - Define a fonte tipográfica;
<b> … </b> - Define texto em bold ou negro;
<i> … </i> - Define texto em itálico;
<u> … </u> - Define texto sublinhado;
<sub> … </sub> - texto em subescrito;
<sup> … </sup> - texto em superescrito;
<strong> … </strong> - Texto em destaque.
<b> … </b> - Define texto em bold ou negro;
<i> … </i> - Define texto em itálico;
<u> … </u> - Define texto sublinhado;
<sub> … </sub> - texto em subescrito;
<sup> … </sup> - texto em superescrito;
<strong> … </strong> - Texto em destaque.
Atributos Descrição
Align – atributo usado com as tags <p> ou <hr>
para definir
Tags que definem
listas de elementos
<ol> … </ol> - define uma lista numerada;
<ul> … </ul> - define uma lista não numerada;
<li> … </li> - Item ou linha dentro de uma lista;
<dl> … </dl> - define uma lista de definições;
<dt> … </dt> - indica um titulo a definir;
<dd> … </dd> - Descreve o item a definir.
<ul> … </ul> - define uma lista não numerada;
<li> … </li> - Item ou linha dentro de uma lista;
<dl> … </dl> - define uma lista de definições;
<dt> … </dt> - indica um titulo a definir;
<dd> … </dd> - Descreve o item a definir.
Tags que definem
tabelas
<table> … </table> - Define o inicio e o fim de
uma tabela;
<th> … </th> - define o cabeçalho de uma tabela;
<tr> … </tr> - define o inicio e o fim de uma fila ou linha dentro de uma tabela;
<td> … </td> - Define o conteúdo de cada célula.
<th> … </th> - define o cabeçalho de uma tabela;
<tr> … </tr> - define o inicio e o fim de uma fila ou linha dentro de uma tabela;
<td> … </td> - Define o conteúdo de cada célula.
Tag que permite
inserir imagens
<img src = “nome_da_imagem”>
Tag que define um
link (ligação)
<a href = “endereço”> … </a> - define uma
ligação para um enderenço web ou um outro documento.
Exemplo de tags e
atributos que permitem criar formulários
<form> … </form> - Define o inicio e o fim de um
formulário;
<input type = “text” …> - Define uma caixa de texto para input;
<input type = “password” …> - Define uma caixa de texto para input de uma password;
<input type = “radio” …> - Define um botão de opção;
<input type = “text” …> - Define uma caixa de texto para input;
<input type = “password” …> - Define uma caixa de texto para input de uma password;
<input type = “radio” …> - Define um botão de opção;
<input type = “checkbox” …> - Define uma caixa de
selecção;
<input type = “button” …> - Define um botão de comando;
<input type = “submit” …> - Define um botão um botão de comando para envio de dados de um formulário;
<input type = “reset” …> - Define um botão de comando para restabelecer (apagar) os dados.
<input type = “button” …> - Define um botão de comando;
<input type = “submit” …> - Define um botão um botão de comando para envio de dados de um formulário;
<input type = “reset” …> - Define um botão de comando para restabelecer (apagar) os dados.
TABELAS
EM HTML
- Na tag <table> o atributo border permite definir a
espessura da linha; por exemplo, border = 1.
- A tabela é construída linha a linha. Cada nova linha é definida com uma tag <tr>. Em cada linha (após cada tag <tr>) inserem-se as tags que definem células da tabela (<th> ou <td>).
- O mais usual é utilizar-se a tag <td> para definir cada célula a inserir na linha. A tag <th> costuma ser utilizada nas primeiras linhas da tabela; apenas difere da tag <td> no seguinte: o conteúdo de uma célula definida com <th> é destacado a negro.
- Com as tags <th> e <td> podemos usar o atributo width para definir a largura das células; por exemplo: <td width = 90> Uma célula </td> (define uma célula com uma largura de 90 pixeis)
- O atributo colspan permite indicar o número de colunas que uma célula ocupa. Por exemplo: <th colspan = 2> ou <tdcolspan = 2> faz com que a célula ocupe duas colunas.
- A tabela é construída linha a linha. Cada nova linha é definida com uma tag <tr>. Em cada linha (após cada tag <tr>) inserem-se as tags que definem células da tabela (<th> ou <td>).
- O mais usual é utilizar-se a tag <td> para definir cada célula a inserir na linha. A tag <th> costuma ser utilizada nas primeiras linhas da tabela; apenas difere da tag <td> no seguinte: o conteúdo de uma célula definida com <th> é destacado a negro.
- Com as tags <th> e <td> podemos usar o atributo width para definir a largura das células; por exemplo: <td width = 90> Uma célula </td> (define uma célula com uma largura de 90 pixeis)
- O atributo colspan permite indicar o número de colunas que uma célula ocupa. Por exemplo: <th colspan = 2> ou <tdcolspan = 2> faz com que a célula ocupe duas colunas.
Comentários no HTML
- São incluídos dentro de sinais especiais:
<!--e-->
A sua finalidade é simplesmente dar alguma informação útil
ao leitor do código.
Títulos – seis níveis de títulos
- Nível máximo <h1> … </h1>
- Segundo nível <h2> … </h2>
- São possíveis seis níveis de títulos de tamanho decrescente de <h1> até <h6>
- A tag <p>…</p> define um parágrafo de texto
- A tag <hr> define uma linha horizontal e não tem tag de fecho. (actualmente, estas tags devem incluir a barra de fecho na própria tag: <hr/>.)
- Segundo nível <h2> … </h2>
- São possíveis seis níveis de títulos de tamanho decrescente de <h1> até <h6>
- A tag <p>…</p> define um parágrafo de texto
- A tag <hr> define uma linha horizontal e não tem tag de fecho. (actualmente, estas tags devem incluir a barra de fecho na própria tag: <hr/>.)
por
exemplo: o atributo WIDTH que permite definir a extensão da linha da página
<hr width = 50%>, que neste caso 50% indica que a linha terá apenas 50%
de largura de página.
- A tag <p align = “center”>, temos o atributo align
que define o tipo de alinhamento do parágrafo. Neste caso o valor do atributo é
“center”, ou seja, centrado. Os outros valores possíveis para o atributo align
são: “left” (à esquerda); “right” (à direita); “justify” (justificado).
Cada atributo é seguido do sinal de igual e de um valor.
Este valor pode ser um valor numérico ou de outro tipo. Atualmente, os valores
dos atributos devem ser incluídos dentro de aspas.
<head>
<title>Página
Exemplo</title>
<!--
Isto é um comentário. não aparece.-->
</head>
<body>
<h1>
Título de 1ºNivel </h1>
<h2>
Título de 2ºNivel </h2>
<p>
Parágrafo Normal </p>
<p>
<!--
Em cima um parágrafo em branco -->
<hr/>
<!-- Isto é uma linha horizontal -->
<hr
width = "50%">
<hr/>
<!--
Linha com 50% da largura de página -->
<p
align = "center"> Parágrafo centrado e com uma
<br>
quebra (br) ou mudança de linha a meio.
</body>
</html>
- Para contornar o breaks, utiliza-se uma referência
especial - (Non-Breaking SPace), que convém esclarecer que não é uma
tag.
<BODY>
Olá Mundo !
Chamo-me Eduardo.
</BODY>
Olá Mundo !
Chamo-me Eduardo.
</BODY>
TAG <font>
Os browsers apresentam o texto dos parágrafos com uma fonte tipográfica e um tamanho prefdefinidos; porém, podemos alterar essas definições com a tag <font> … </font>. Esta tag é 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.
Os browsers apresentam o texto dos parágrafos com uma fonte tipográfica e um tamanho prefdefinidos; porém, podemos alterar essas definições com a tag <font> … </font>. Esta tag é 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.
<font face = “helvética”, “futura”, “arial”>
- Neste exemplo, estamos a alterar a fonte normal para a futura ou, no caso de esta não estar instalada, para Helvética ou para Arial. No caso de nenhuma das fontes indicadas estar instalada, será usada a predefinida do browser
- Neste exemplo, estamos a alterar a fonte normal para a futura ou, no caso de esta não estar instalada, para Helvética ou para Arial. No caso de nenhuma das fontes indicadas estar instalada, será usada a predefinida do browser
<font size = 4>
<font size = +1>
- Em principio, terão o mesmo efeito, uma vez que, sendo 3 o tamanho predefinido, passar para 4 equivale a adicionar 1 (+1) ao anterior.
- Em principio, terão o mesmo efeito, uma vez que, sendo 3 o tamanho predefinido, passar para 4 equivale a adicionar 1 (+1) ao anterior.
Quanto às cores, podemos utilizar palavras reconhecidas pelo
browser, como: Red, Green ou Blue. Podemos também usar uma representação
codificada, por exemplo:
- <font color =
“ff0000”> - Red
- <font color = “00ff00”> - Green
- <font color = “0000ff”> - Blue
- <font color = “00ff00”> - Green
- <font color = “0000ff”> - Blue
Este é o método de RGB (red, green, blue). Neste são
atribuídos dois dígitos hexadecimais, a cada uma das 3 cores básicas – assim:
“RRGGBB”, dois dígitos que podem ir de 00 a FF. Assim podendo-se obter todas as
combinações de cores possíveis.
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. Por exemplo:
<b> Este texto vai aparecer em bold </b>
<p> Frase com um termo em <i>itálico</i>
<p> Frase com um termo <u>sublinhado</u>
<b> Este texto vai aparecer em bold </b>
<p> Frase 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 perlonga-se por todo o texto que se seguir.
<html>
<head>
<title> Formatação de
texto </title>
</head>
<body>
<h1
align ="center"> Título centrado </h1>
<h6
align ="right"> Título À direito </h6>
<p>
Parágrafo com as predefinições </p>
<font face = "arial"
size = +1 color = #ff0000>
<p> Parágrafo com
outras definições </p>
</font>
<p><b>
Parágrafo em bold (negro) </b></p>
<p><i>
Parágrafo em itálico </i></p>
<p><u>
Parágrafo com sublinhado </u></p>
</body>
</html>
Visão Geral sobre os principais tipos de tags HTMl
Estrutura e conteúdos do documento HTML
ELEMENTOS DE
APRESENTAÇÃO
- Fontes tipográficas; estilos; formatações; alinhamentos; etc.
- Fontes tipográficas; estilos; formatações; alinhamentos; etc.
<font>
face size color
<b> … </b>
<i> … </i>
<u> … </u>
style
face size color
<b> … </b>
<i> … </i>
<u> … </u>
style
Tags de estruturação
de um documento
<html> … </html> - Início e fim do documento;
<head> … </head> - Início e fim do cabeçalho;
<title> … </title> - Título da página do browser;
<body> … </body> - Corpo do documento.
<head> … </head> - Início e fim do cabeçalho;
<title> … </title> - Título da página do browser;
<body> … </body> - Corpo do documento.
Tags de títulos e
parágrafos de texto
<h1> … </h1> - Título de maior grandeza;
<h2> … </h2> - título de segunda grandeza;
…
<h6> … </h6> - Título de menor grandeza;
<p> … </p> - Parágrafo do texto;
<br/> - Quebra de Linha.
<h2> … </h2> - título de segunda grandeza;
…
<h6> … </h6> - Título de menor grandeza;
<p> … </p> - Parágrafo do texto;
<br/> - Quebra de Linha.
Algumas tags de
formatação de texto
<font> … </font> - Define a fonte tipográfica;
<b> … </b> - Define texto em bold ou negro;
<i> … </i> - Define texto em itálico;
<u> … </u> - Define texto sublinhado;
<sub> … </sub> - texto em subescrito;
<sup> … </sup> - texto em superescrito;
<strong> … </strong> - Texto em destaque.
<b> … </b> - Define texto em bold ou negro;
<i> … </i> - Define texto em itálico;
<u> … </u> - Define texto sublinhado;
<sub> … </sub> - texto em subescrito;
<sup> … </sup> - texto em superescrito;
<strong> … </strong> - Texto em destaque.
Atributos Descrição
Align – atributo usado com as tags <p> ou <hr>
para definir
Tags que definem
listas de elementos
<ol> … </ol> - define uma lista numerada;
<ul> … </ul> - define uma lista não numerada;
<li> … </li> - Item ou linha dentro de uma lista;
<dl> … </dl> - define uma lista de definições;
<dt> … </dt> - indica um titulo a definir;
<dd> … </dd> - Descreve o item a definir.
<ul> … </ul> - define uma lista não numerada;
<li> … </li> - Item ou linha dentro de uma lista;
<dl> … </dl> - define uma lista de definições;
<dt> … </dt> - indica um titulo a definir;
<dd> … </dd> - Descreve o item a definir.
Tags que definem
tabelas
<table> … </table> - Define o inicio e o fim de
uma tabela;
<th> … </th> - define o cabeçalho de uma tabela;
<tr> … </tr> - define o inicio e o fim de uma fila ou linha dentro de uma tabela;
<td> … </td> - Define o conteúdo de cada célula.
<th> … </th> - define o cabeçalho de uma tabela;
<tr> … </tr> - define o inicio e o fim de uma fila ou linha dentro de uma tabela;
<td> … </td> - Define o conteúdo de cada célula.
Tag que permite
inserir imagens
<img src = “nome_da_imagem”>
Tag que define um
link (ligação)
<a href = “endereço”> … </a> - define uma
ligação para um enderenço web ou um outro documento.
Exemplo de tags e
atributos que permitem criar formulários
<form> … </form> - Define o inicio e o fim de um
formulário;
<input type = “text” …> - Define uma caixa de texto para input;
<input type = “password” …> - Define uma caixa de texto para input de uma password;
<input type = “radio” …> - Define um botão de opção;
<input type = “text” …> - Define uma caixa de texto para input;
<input type = “password” …> - Define uma caixa de texto para input de uma password;
<input type = “radio” …> - Define um botão de opção;
<input type = “checkbox” …> - Define uma caixa de
selecção;
<input type = “button” …> - Define um botão de comando;
<input type = “submit” …> - Define um botão um botão de comando para envio de dados de um formulário;
<input type = “reset” …> - Define um botão de comando para restabelecer (apagar) os dados.
<input type = “button” …> - Define um botão de comando;
<input type = “submit” …> - Define um botão um botão de comando para envio de dados de um formulário;
<input type = “reset” …> - Define um botão de comando para restabelecer (apagar) os dados.
TABELAS
EM HTML
- Na tag <table> o atributo border permite definir a
espessura da linha; por exemplo, border = 1.
- A tabela é construída linha a linha. Cada nova linha é definida com uma tag <tr>. Em cada linha (após cada tag <tr>) inserem-se as tags que definem células da tabela (<th> ou <td>).
- O mais usual é utilizar-se a tag <td> para definir cada célula a inserir na linha. A tag <th> costuma ser utilizada nas primeiras linhas da tabela; apenas difere da tag <td> no seguinte: o conteúdo de uma célula definida com <th> é destacado a negro.
- Com as tags <th> e <td> podemos usar o atributo width para definir a largura das células; por exemplo: <td width = 90> Uma célula </td> (define uma célula com uma largura de 90 pixeis)
- O atributo colspan permite indicar o número de colunas que uma célula ocupa. Por exemplo: <th colspan = 2> ou <tdcolspan = 2> faz com que a célula ocupe duas colunas.
- A tabela é construída linha a linha. Cada nova linha é definida com uma tag <tr>. Em cada linha (após cada tag <tr>) inserem-se as tags que definem células da tabela (<th> ou <td>).
- O mais usual é utilizar-se a tag <td> para definir cada célula a inserir na linha. A tag <th> costuma ser utilizada nas primeiras linhas da tabela; apenas difere da tag <td> no seguinte: o conteúdo de uma célula definida com <th> é destacado a negro.
- Com as tags <th> e <td> podemos usar o atributo width para definir a largura das células; por exemplo: <td width = 90> Uma célula </td> (define uma célula com uma largura de 90 pixeis)
- O atributo colspan permite indicar o número de colunas que uma célula ocupa. Por exemplo: <th colspan = 2> ou <tdcolspan = 2> faz com que a célula ocupe duas colunas.
<html>
<head>
<title> Tabelas
</title>
</head>
<body>
<h2 align =
"center"> Tabela </h2>
<table align =
"center" border = 2 cellpadding = 3>
<tr>
<th colspan = 2> Catálogo de Preços
<tr> <th> Artigos
<th> Preços
<tr>
<td> Alicate <td align = "right"> 10
<tr>
<td> Martelo <td align = "right"> 15
</table>
</body>
</html>
Links ou ligações
<a href = “…”> … </a>
Qualquer tipo de ligação (link) é feita sempre com base na
tag <a> … </a> também chamada Anchor tag.
O principal atributo da tag <a> é o atributo href (de Hypertext Reference). É este atributo que define o local (endereço URL, local do novo documento, ect.) para onde se pretende efectuar ligação.
O principal atributo da tag <a> é o atributo href (de Hypertext Reference). É este atributo que define o local (endereço URL, local do novo documento, ect.) para onde se pretende efectuar ligação.
Ligação Externa (um URL externo)
O atributo HREF é igualado ao endereço URL que temos em
vista para a ligação externa. Entre as tags <a> e </a> colocamos o
texto que queremos que apareça na página.
Ligação interna para outro documento no mesmo computador
<a href = “doc2.htm”> Mais informações </a>
Neste caso, o atributo HREF é igualado ao nome do documento
HTML para onde queremos remeter o leitor quando ele clicar sobre o texto que é
apresentado na página. Esse documento pode ser outra pagina HTML ou outro tipo
de documento. É claro que se o documento se encontrar numa outra pasta ou
diretoria é necessário ter isso em conta na indicação do nome.
Ligação para um endereço de e-mail
<a href =mailto:nomedoaluno@gmail.com”>
Enviar mail para nomealuno </a>
Neste exemplo, o link criado permite accionar a aplicação de
e-mail que estiver configurada no computador para enviar uma mensagem de
correio electrónico para nomealuno@gmail.com.
Inserção de imagens
<img src = “globo.gif”>
A inserção de imagens em documentos html é feita através da
tag <img> (que não tem tag de fecho). A indicação do local e nome do
ficheiro da imagem é feita no atributo src (de source – que em inglês significa
fonte).
No caso de a imagem que pretendemos inserir na página se encontrar numa pasta diferente da corrente, teremos de indicar a sua localização. Por exemplo
<img src = “imagens/globo.gif”>
No caso de a imagem que pretendemos inserir na página se encontrar numa pasta diferente da corrente, teremos de indicar a sua localização. Por exemplo
<img src = “imagens/globo.gif”>
Atributos relativos a uma imagem
O atributo align permite definir a forma de alinhamento da
imagem. Os valores possíveis são: left; right; middle; bottom e top.
O atributo border permite definir uma linha rectangular de
contorno na imagem. Deve ser indicado um valor numérico para a espessura da
lnha. Exemplo: <img serc = “pirata.gif” border = “2”>.
O atributo height permite definir a altura da imagem.
O atributo width permite definir a largura da imagem.
O atributo width permite definir a largura da imagem.
CORES
<html>
<head>
<Title> Página com cor
</title>
</head>
<body bgcolor =
"blue">
</body>
</html>
Som numa página
<p align = “center”>
<bgsound src = “som1.mid”>
<embed src = “som1.mid”
width = “140” height = “25” autostart = “true” controls = “smallconsole” volume
= “60” loop = “false”>
</embed>
Para definer frames,
utiliza-se o “tag” <FRAMESET>.
Como não se trata propriamente do corpo da página, este “tag” define uma area após a area <HEAD>, mas não contido dentro do “tag” <BODY>. Ao utilizer o parâmetro COLS, divide a página em colunas, neste caso definidas por “160,*”. Isto significa que são criadas duas, uma com 160 pixéis de largura e outra que ocupa o resto do espaço disponível no ecrã. As medidas das frames podem ser fornecidas em pixéis, em percentage do espaço disponível ou por um asterisco, que significa “o resto”. Estas colunas são definidas da esquerda para a direita. Temos também BORDER e FRAMESPACING, que definem a borda e o espaçamento entre frames.
Como não se trata propriamente do corpo da página, este “tag” define uma area após a area <HEAD>, mas não contido dentro do “tag” <BODY>. Ao utilizer o parâmetro COLS, divide a página em colunas, neste caso definidas por “160,*”. Isto significa que são criadas duas, uma com 160 pixéis de largura e outra que ocupa o resto do espaço disponível no ecrã. As medidas das frames podem ser fornecidas em pixéis, em percentage do espaço disponível ou por um asterisco, que significa “o resto”. Estas colunas são definidas da esquerda para a direita. Temos também BORDER e FRAMESPACING, que definem a borda e o espaçamento entre frames.
O “tag” <FRAME>, que se
refere à primeira coluna (de 160 pixéis). SRC define qual o ficheiro HTML a ser
exibido nessa frame, NAME, muito importante, indica qual o nome da frame, para
que as links possam lá recair.
NORESIZE indica que a frame não poder ser redimensionada com o rato, e FRAMEBORDER, o bordo da frame.
Utiliza-se <FRAME FRAMEBORDER> e <FRAMESET BORDER> por uma questão de compatibilidade entre o browser e o Netscape Navigator. SCROLLING pode ser definido com “YES” ou “NO” para obrigar a barra de scroll a estar sempre visivel ou escondida.
NORESIZE indica que a frame não poder ser redimensionada com o rato, e FRAMEBORDER, o bordo da frame.
Utiliza-se <FRAME FRAMEBORDER> e <FRAMESET BORDER> por uma questão de compatibilidade entre o browser e o Netscape Navigator. SCROLLING pode ser definido com “YES” ou “NO” para obrigar a barra de scroll a estar sempre visivel ou escondida.
<input type = “text” name =
“nome”>
Este é um exemplo de um
<input> do tipo text, ou seja, uma caixa de texto. Nesta tag de input,
temos dois atributos:
-
A expressão
type = “text” indica que o atributo type (tipo de elemento) que se pretende é
“text”, ou seja, uma caixa de texto;
-
A expressão
name = “nome” indica que o atributo name (nome do element) será “nome”, ou seja, esta caixa de texto passa a
ser identificada pela palavra “nome”.
Outros atributos que podemos usar com as caixas de texto:
-
Value = “…”
– o atributo value permite indicar um valor inicial para uma caixa de texto e,
por outro lado, captar o dado escrito pelo utilizador;
-
Size = n –
tamanho da caixa de texto, em que o n indica o número de carateres da sua
largura;«
-
Maxlength =
n – número máximo (n) de caracteres permitidos.
Outro element de input – “radio”
<input type = “radio” name = “sexo” value = “M”>
- No exemplo anterior temos 3 atributos mais usuais type; name; value. Repare-se que a expressão value = “M” é uma atribuição interna do código.
- No exemplo anterior temos 3 atributos mais usuais type; name; value. Repare-se que a expressão value = “M” é uma atribuição interna do código.
-
Outro
atributo que podemos usar com os botões: Checked [= “true|false”] – permite
colocar um botão em estado de assinalado ou não assinalado; neste caso, a parte
que inclui o sinal de igual e o valor (true ou false) é opcional; se esse valor
não for indicado, é assumido true; para retirar a marca de assinalado,
escreve-se checed = “false”.
Este atributo também pode ser usado com os elementos do tipo checkbox – caixa de selecção.
Este atributo também pode ser usado com os elementos do tipo checkbox – caixa de selecção.
Checkbox
<input type = “checkbox”
name = “d1” value = “p”>
-
A caixa
checkbox fica identificada com o nome “D1” e o seu value é codificado com “P”.
A disciplina a que se refere é indicada em texto normal for a da tag:
Programação.
<textarea cols = 40 rows =
5>
O atributo cols = 40 define
que a caixa de texto terá a largura de 40 colunas de carateres.
O atributo rows = 5 define que a caixa de texto terá a altura de 5 linhas ou filas de caracteres.
O atributo rows = 5 define que a caixa de texto terá a altura de 5 linhas ou filas de caracteres.
<table border = 0>
Com o atributo border igual a
zero, a tabela não apresentará linhas de contorno.