O que é o html ?
(hypertext markup language- linguagem de marcação de
hipertexto) é a linguagem com que são codificadas as páginas 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
paginas através da internet.
A HTML não é uma linguagem de programação propriamente dita.
É uma linguagem de estruturação e formaçã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 de 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 formação de páginas web.
REGRAS BASICAS que é necessário compreender atem de se
começar com a criação de páginas.
Todos os “tags” são inseridos entre o sinal de menos 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>
O primeiro a abrir é o ultimo a fechar, e vice – versa
<a><b><c></a></b></c>
É indiferente utilizar maiúsculas ou minúsculas nos tags.
<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 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 titulo da pagina – que surge entre as tags <title> e </title>. (este titulo aparece na barra
de titulo do browser em que a pagina for aberta.)
·
No corpo do documento (entre as tags <body> e </body> é
inserida toda a informação a apresentar na pagina – texto, imagens,etc)
Criação de paginas HTML
v
Para criarmos a nossa primeira pagina 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 pagina</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 pagina</title>
</HEAD>
<BODY>
Olá mundo
</BODY>
</HTML>
Mudar de linha usa se <BR>
EXEMPLO:
<HTML>
<HEAD>
<TITLE> a minha primeira pagina</title>
</HEAD>
<BODY>
Olá mundo
<BR>
chamo-me João
</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 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 pagina <hr width=50%> ,
que neste caso 50% indica que a linha terá apenas 50% de largura de
pagina.
Ø
A tag <p align=”center”>, temos
o atributo align que define o tipo de alinhamento do
paragrafo. 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 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.
Exercício
<html>
<head>
<title> pagina exemplo
</title>
<!-- Isto é um comentario,
nao aparece.-->
</head>
<body>
<h1>
titulo de 1º nivel </h1>
<h2>
titulo de 2º nivel </h2>
<p>
paragrafo normal </p>
<p>
<!-- em
cima um paragrafo em branco -->
<hr/><!--
isto é uma linha horizontal -->
<hr
width="50%">
<hr/>
<!--
linha com 50% da largura de pagina -->
<p align="center">
paragrafo centrado e com uma
<br>
quebra (br) ou mudança de linha a meio.
</body>
</html>
ü
Para contornar o breaks, utiliza-se uma
referencia especial - (Non-Breaking SPace), que convem esclarecer
que não é um ‘tag’, experimentemos isto:
<BODY>
Olá!
 
Chamo-me João Pratas
</BODY>
Tag <font>
Os browers apresentam o texto dos
parágrafos com uma fonte tipográfica e um tamanho predefinidos; porem, podemos
alterar essas definições com a tag <font>…</font>.
Esta tag é definida através dos seguintes atributos:
v
Face – define a
fonte tipográfica;
v
Size – define um
tamanho entre 1 e 7 ;
v
Color – define a
cor do texto
<font face = “helvetica”,”futura”,”arial”>
·
Neste exemplo, estamos a alterar a fonte natural
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 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; Blue. Podemos 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
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.
Em HTML existem tags para aplicar os estilos tipográficos mais habituais,
como sejam: bold ou negrito; italico; 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>italico</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 HMTL
Exemplo de tags que definem exemplo de tags que assinalam
A estrutura do
documento conteúdos
(texto; imagens; etc)
<html> <h1>titulo</h1>
<head> …
… …
</head> <p> paragrafo </p>
…
<body> …
… <img src=”imagem”>
</body> (etc.)
</html>
Elementos de apresentação
Fonts tipográficas; estilos; formatação; alinhamentos; etc.
<font>
Face size
color
<b>--</b>
<i>--</i>
<u>--</u>
<style>
(etc)
Tags de estruturação de um documento
<html>…</html> - inicio e fim do documento;
<head>…</head> - inicio e fim do cabeçalho;
<title>…</title> - titulo da pagina do browser;
<body>…</body> - corpo do documento.
Tags de títulos e parágrafos de texto
<h1>…</h1> - titulo de maior grandeza;
<h2>…</h2> - titulo de segunda grandeza;
…
<h6>…</h6> - titulo de menos grandeza;
<p>…</p> - paragrafo 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 italico;
<u>…</u>- define texto sublinhado
<sub>…</sub> - texto em subscrito
<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 – atributo usado com a tag <hr> para definir
largura da linha horizontal;
Face – atributo usado 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 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.
Tag que permite inserir imagens
<img src=”ficheiro_imagem”>
Tag que define 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 inicio 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 botao de opção
<input type=”checkbox”…>- define uma caixa de selecção
<input type=”button”…>- define um botão de commando
<input type=”submit”…>- define um botao de commando
para envoi de dados de um formulario;
<input type=”reset”…>- define um botao de comando para
restabelecer (apagar) os dados.
Exercício
de listas
<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</i>
</ul>
</body>
</html>
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 (apos 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 celula a inserir na linha., a tag <th> custuma ser utilizada
nas primeiras linhas da tabela; apenas difere da tag <td> no seguinte: o
conteúdo de uma celula 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 celula
</td> (define uma celula com a largura de 90 pixeis)
·
O atributo colspan permite indicar o numero de
colunas que uma celula ocupa. Por exemplo: <th colspan=2> ou <td
colspan=2> faz com a celula ocupe duas colunas.
exercicio
<html>
<head>
<title>Tabelas</title>
</head>
<body>
<h2 align="center">
Tabela </h2>
<table align="center"
border=2 cellpadding=3>
<tr><th
colspan=2> Catalogo 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>
Link’s 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 ,etc.) para
onde se pretender efectuar a 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 pagina.
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 pagina. 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 email
<a href=mailto:joao_pedro_pratas@hotmail.com>
Enviar mail para JoaoPratas</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 joao_pedro_pratas@hotmail.com
Exercicio
de links
<html>
<head>
<title> Links </title>
</head>
<body>
<h2> Exemplificação de
Links </h2>
<p> Link Google</p>
<a href="http://www.google.com">Google</a>
<p> Pagina
Local</p>
<a
href="coise.htm"> 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 é feita no atributo src (de source – que em ingles 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”>
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.
Exercicio
com imagens
<html>
<head>
<title>Imagens</title>
</head>
<body>
<h2> Pagina com imagens
</h2>
<p>
imagem sem atributos definidos <img src="lol.jpg"></p>
<p>
Imagem inserida
<img
src="lol.jpg"align="middle"border="1">no meio
do texto</p>
<p>
Imagem com dimensões alternadas </p>
<img src="lol.jpg"
height="100" width="200">
</body>
</html>
Cor de
pagina
<html>
<head>
<title>Pagina
com cor</title>
</head>
<body
bgcolor=”red”>
</body>
</html>
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 apos área <head>, mas não contido dentro do ‘tag’
<body>. Ao utilizar o parâmetro COLS, divide a pagina 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 do 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 pixeis). 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 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 internet explorer e o
Netscape navigator. SCROLLING pode ser definido com “YES” ou “NO” para obrigar
a barra de scroll a estar sempre visível ou escondida.
exemplo
<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=”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
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 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 N
indica o número de caracteres da sua largura;
·
Maxlength=n – numero máximo (n) de caracteres
permitidos
Outro
elemento 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.
·
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
<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
fora da tag: Programação.
Exercício
<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.
exemplo
<html>
<head>
<title>
Exemplo de Formulário </title>
</head>
<body>
<h2> Identificação </h2>
<form>
<table border=0>
<tr>
<td> Primeiro nome: </td>
<td>
<input type="text" name="nome1">
<tr>
<td> Segundo Nome: </td>
<td>
<input type="text" name="nome2">
<tr>
<td> Nome composto: </td>
<td>
<input type="text" name="nomec" readonly>
</table>
<p>
<input
type="button" name="btnnomes"
value="Clique para juntar os nomes"
onclick="nomec.value
=nome1.value
+ ' ' + nome2.value">
</form>
</body>
</html>
<table border=0>
·
Com o atributo border igual a zero, a tabela não
apresentará linhas de contorno.
Sem comentários:
Enviar um comentário