quarta-feira, 30 de janeiro de 2013
Programação HTML
O que é HTML?
(Hypertext 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 scipting, 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.
·
Regas
básica que é necessário compreender antes de se começar com a criação de
páginas.
·
Todos
os “tgs” são inseridos entre o sinal
de menor e maior; <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 caracter “/”): <tag> </tag>
·
Todos os “tags”
obedecem a uma hierarquia, como no seguinte exemplo: <a> <b> <c> </c> </b> </a>
·
É
indiferente utilizar maiúsculas ou minúsculas nos “tags”. <tag> é
igual <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 HTML
começa com a tag de abertura <html>
e termina com a tag de fecho </html>
Exemplo:
<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>
Exemplo: <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…
Criação de páginas HTML
·
Para
criamos a nossa primeira página em HTML,
basta um simples editor 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: guardar o ficheiro com a
extensão. Htm (exemplo: índex.htm).
Vamos agora fazer a seguinte alteração:
<html>
<head>
<title>
A minha primeira página </title>
</head>
<body>
Olá sou Luís Paixão
<br>
Tmn até já!
<br>
=)
</body>
</html>
Este <br>
(de Break) dá instrução ao browser para fazer uma mudança de linha. Assim,
o resultado deverá ser este:
<body>
Olá sou Luís Paixão
<br>
Tmn até já!
<br>
=)
</body>
Comentários no HTML
São incluídos dentro de sinais especiais: <!--e-->
Sua finalidade é simplesmente dar alguma informação útil
ao leitor do código.
Títulos - Seis níveis de título.
·
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
paragrafo 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 de 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 o sinal de igual e de um valor.
Este valor pode ser um valor numérico ou de outro tipo. Actualmente, os valores
dos atributos devem ser incluídos dentro de aspas.
Exemplo:
<html>
<head>
<title> Página exemplo </title>
<!-- Isto é um comentário. não aparece. -->
</head>
<body>
<h1>Título de 1º nível </h1>
<h2> Título de 2º nível </h2>
<p> Parágrafo Normal </p>
<p>
<!-- Em cima um parágrafo em branco -->
<hr/> <!-- Isto é um 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 é um
´tag, experimentemos isto:
<BODY>
Olá mundo!
Chamo-me Luís Paixão.
</Body>
Tag <font>
Os browsers apresentam o texto dos parágrafos com uma
fonte tipográfica e um tamanho predefinido; porém, podemos alterar esses
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.
<fontface = “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 nenhum das fontes
indicadas estar instalada será usada a predefinida do browser.
<Font size=4> <font size=+1>
·
Em
princípio, 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”> - Equivalente a Red
·
<font
color = “00ff00”> - Equivalente a Green
·
<font
color = “0000ff”> - Equivalente a Blue
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 (RGB), dois
dígitos que podem ir de 00 a FF. Desta forma podem obter-se todas as
combinações possíveis das cores.
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 em 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.
Visão
geral sobre os principais tipos de tags HTML
|
Estrutura e conteúdos do documento HTML
|
|
|
Exemplo de tags que definem a estrutura do
documento
|
Exemplo de tags que assinalam conteúdos
|
|
<html>
<head>
…
</head>
<body>
…
</body>
</html>
|
<h1> Título </h1>
…
…
<p> Parágrafo</p>
…
…
<img src=”imagem”>
(etc.)
|
Elementos
de apresentação
Fontes
tipográficas; estilos; formatações; alinhamentos; etc.
<font>
Face size color
<b> --- </b>
<i> --- </i>
<u> --- </u>
<style>
(etc.)
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.
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 segunda grandeza;
<p>…</p> - Parágrafo do texto
</br> - Quebra de linha.
Algumas tags de formatação de texto
<font> … </font> - Define a font 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.
Atributos Descrição
·
Align
– Atributo usado com as tags <p> ou <hr> para definir alinhamentos;
·
Width
– Atributos usando com a tag <hr>
para definir largura da linha horizontal;
·
Face
– Atributo usando com a tag <font>
para definir a fonte tipográfica;
·
Size
– para definir o tamanho da fonte;
·
Color
– para definir a cor da fonte.
Tags que definem listas de elementos
<ol> … </ol> - Define uma
lista numerada;
<ul> … </ul> - Define um
lista não numerada;
<li>… </li> - item ou linha
dentro de uma linha;
<dll> … </dll> - define uma
lista de definições;
<dt> … </dt> - Indica um
título a definir;
<dd> … </dd> - Descreve o
item a definir.
Tags que definem tabelas
<table> … </table> - Define
o início e o fim de uma tabela;
<th> … </th> - Desine o
cabeçalho de uma tabela;
<tr> … </tr> - Define o
início e o fim de uma fila ou linha dentro de uma tabela:
<td> … </td> - Define o
conteúdo de cada célula.
Tags que permite inserir imagens
<img src=”ficheiro_imagem”>.
Tags que definem um link (ligação)
<a href=”endereço”> … </a> define uma ligação para um
endereço web ou um outro documento.
Exemplo de tags e atributos que permitem criar
formulários:
<form> …</form> - Define o início e fim de um
formulário;
<input type=”texto”…> - Definem 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 de comando para
envio de dados de um formulário;
<input type=”reset”…> - Define um botão de comando para
restabelecer (apagar) os dados.
Listas em HTML
<html>
<head>
<title> Listas </title>
</head>
<body>
<h2> lista ordenada </h2>
<ol>
<li> Primeiro item </li>
<li> Segundo item </li>
<li> Terceiro item </li>
</ol>
<h2> Lista não ordenada </h2>
<ul>
<li> Um item </li>
<li> Outro item </li>
<li> E mais outro </li>
</ul>
</body>
</html>
Vejamos o código HTML para um exemplo de uma lista de
definições (em que os itens dessa lista são comandos SQL):
<dl>
<dt> Insert </dt>
<dd>
comando para inserir dados </dd>
<dr> Delete </dt>
<dd>
Comando para apagar dados </dd>
<dt> Update </dt>
<dd>
Comando para actualizar dados
</dd>
</dl>
Tabelas em HTML
·
Na tag <table>
o atributo border permite definir a
espessura da linha; por exemplo, border=1
·
A tabela é constituída linha a linha. Cada nova
linha é definida com uma tag <tr>.
Em cada linha (após cada tag <tr>)
inserem-se 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 um célula com uma largura de 90
pixels)
·
O atributo
colspan permite indicar o número de colunas que uma célula ocupa. Por
exemplo: Por exemplo: <th
colspan=2> ou <td
colspan=2> faz com a célula ocupe duas colunas.
Tabela:
<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> Marcelo <td align="right">15
</table>
</body>
</html>
Resultado:
Tabela
|
Catálogo de
Preços
|
|
|
Artigos
|
Preços
|
|
Alicate
|
10
|
|
Marcelo
|
15
|
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 HRL, local do novo documento, etc.)
para onde se pretende efectuar ligação.
Ligação externa (um URL
externo)
<a href=http://www.google.com>Google</a>
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 +e apresentado na página. Esse documento pode ser outra página HTML ou outro tipo de documento. É
claro que se o documento se encontrar numa outra pasta ou directoria é
necessário ter isso em conta na indicação do nome.
Ligação
para um endereço de e-mail
<a
href=”paixao.felipe@hotmail.com” > Enviar mail para Felipe paixão </a>
Neste exemplo, o link criado
permite accionar a aplicação de e-mail que estiver configurada no computador para
enviar um mensagem de correio electrónico para paixao.felipe@hotmail.com.
Links:
<html>
<head>
<title>
links</title>
</head>
<body>
<h2>
Exemplificação de links </h2>
<p>
Segue-se um link para o Google </p>
<a
href="https://www.facebook.com/ryanfellp</a>
<p>
O link seguinte é para uma página local </p>
<a
href="multimedia.docx"> Mais informações </a>
</body>
</html>
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 é feira 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, termos 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 linha. Exemplo: <img src=”pirata.gif” border=”2”>.
·
O atributo height
permite definir a altura da imagem.
·
O atributo widht
permite definir a largura da imagem.
Páginas com imagens
<html>
<head>
<title> Imagens </title>
</head>
<body>
<h2> Páginas
com imagens </h2>
<p> Segue-se
uma imagem sem atributos definidos
<img src="music.jpg"></p>
<p> Uma
imagem Inserida
<img
src="music.jpg" align="middle" border="1"
no meio do
texto </p>
<p> Imagem
com dimensões alteradas</p>
<img src="music.jpg" height="100" width="200">
</body>
</html>
Cor de página
<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>
</p>
Frames
Para definir frames,
utiliza-se o “tag” <frameset>.
Como não se trata propriamente do corpo da página, este “tag” define uma área a
área <head>, mas não contido
dentro da “tag” <body>. Ao utilizar 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íveis no ecrã. As medidas das frames podem ser fornecidas em pixéis, em
percentagem 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 os links possam lá recair.
NORESIZE indica que a frame não pode ser redimensionar com o rato,
e FRAMEBORDER, o bordo da
frame.
Utiliza-se <frame frameborder> e <frameset border> por uma questão
de compatibilidade entre Internet Explorer e o Netscape Navigator. SROLLING pode ser definido com “yes” ou “No” para obrigar a barra de scroll a estar sempre visível ou
escondida.
Formulário
<html>
<head>
<title> Exemplo
de formulário </title>
</head>
<body>
<form>
nome:
<input
type="text" name="nome"> <br>
Sexo:
<input
type="radio" name="sexo" value="M">
Masculino
<input
type="radio" name="sexo" value="F">
Feminino <P>
Disciplinas de informática de que gosta: <br>
<input
type="checkbox" name="d1" value="p">
Programação
<input
type="checkbox" name="d2" value="a">
Aplicações
<input
type="checkbox" name="d3" value="t">
tecnologias <p>
Seleccione uma linguagem da seguinte lista:
<select
name="lista">
<option> Pascal
</option>
<option> VBasic
</option>
<option> C++
</option>
<option> Java
</option>
</select>
<br> <br>
<input
type="submit" value="Confirmar">
<input type="reset"
value="Limpar">
</form>
</body>
</html>
<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=”texto”
indica que o atributo type (tipo do
elemento) que se pretende é “text”,
ou seja, uma caixa de texto;
·
A expressão name=”nome”
indica que o atributo name (nome do
elemento) 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 indicar um
valor principal para uma caixa de texto e, por outro lado, captar o dado
escrito pelo utilizador;
·
Size=n –
Tamanho da caixa de texto, em que n
indica o número de caracteres da sua largura;
·
Maxlength
=n – Número máximo (n) de
caracteres permitidos.
Outro elemnto de input- “radio”
<input type=
“radio” name=”sexo” value=”M”
·
No exemplo anterior temos 3 atributos maus
usuais type;name;value. Repara-se
que a expressão value=”M” é uma
atribuição interna do código.
·
Um outro atributo que podemos usar com os
botões:
Checked[=”true|false”] – O atributo checked 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 checked=”false”.
Este
atributo também pode ser usado com os elementos do tipo checkbox – caixa de selecção.
Checkbox
<inpu 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 formal
fora da tag: Programação.
Formulário 2
<html>
<head>
<title> Exemplo de Formulário </title>
</head>
<body>
<form>
<fieldset>
<legend
align="left"> Dados do utilizador
</legend>
User Name:
<input
type="text" name="nome">
<br>
password:
<input
type="password" name="pass">
<br>
</fieldset>
<p>
<textarea cols=40 rows=5> Área de texto...
</textarea>
<fieldset>
<legend
align="left"> Botões de comando
</legend>
<input
type="submit" value="confirmar">
<input
type="reset" value="limpar">
</fieldset>
</form>
</body>
</html>
<textarea cols=40
rows=5>
O atributo cols=40 define que
a caixa de texto terá a largura de 40 colunas 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.
Subscrever:
Mensagens (Atom)