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 BÁSICAS 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 carácter “/”):
<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
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 Filipa
</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 comentário, não aparece.-->
</head>
<body>
<h1> titulo de 1º nível </h1>
<h2> titulo de 2º nível </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 convém esclarecer que não é um ‘tag’, experimentemos
isto:
<BODY>
Olá!
 
Chamo-me
Filipa Patrício
</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:
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 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> 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.
Exemplo
de tags que definem a estrutura do documento
<html>
<head>
…
</head>
<body>
…
</body>
</html>
Exemplo
de tags que assinalam conteúdos (texto, imagem,etc)
<h1>
Elementos de
apresentação
Fontes tipográficas,
estilos, formatações, alinhamentos, etc.
<font>
Face size color
<b> --- </b>
<i> --- </i>
<u> ---</u>
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 de 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>
- Titulo de menor grandeza;
<p> … </p> -
Paragrafo do texto;
<br> … </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 subscrito;
<sup> …
</sup> Texto em super escrito;
<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 a 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
<u> …</u>
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 definem um link
(ligação)
<a
href=”endereço”>…</a> - define uma ligação para um endereço web ou um
outro documento.
Exemplos de tags e
atributos que permitem criar formulários:
<form> ..
</form> define o inicio e o fim de uma formulário
<input
type=”texto”…> define uma caixa de texto para input;
<input
type=”password”…> define uma caixa de texto para uma 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 envios de dados de um
formulário.
<input type=”reset”…>
define um botão de comando para restabelecer (apagar) dados.
Listas HTML
<html>
<head>
<title>LISTAS</title>
</head>
<body>
<h2> Lista
ordenada</h2>
<ol>
<li>Primeiro
item</h>
<li>Segundo
item</h>
<li>terceiro
item</h>
</ol>
<h2>Lista não
ordenada</h2>
<ul>
<li>Um
item</h>
<li>Outro
item</h>
<li>E mais
outro</h>
</h>
</body>
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>
<dt>Delete</dt>
<dd>
Comando para apagar dados </dd>
<dt>
Update </dt>
<dd>
Comando para actualizar dados </dd>
</dd>
</dl>
Na
tag <table> o atributo border permite definir na 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 a 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 colpan permite indicar o numero de colunas que uma célula ocupa.
Por exemplo: <th colspan
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>Martelo<td
align="right">15
</table>
</body>
</html>
Links
ou ligações
<a
href=”…”>…</a>
Qualquer
tipo de ligação (link) é sempre feita com base na tag <a>…</a>
também chamada Archor 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 pretende 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 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 de documento HTML para onde queremos
remeter o leitor
Quando
ele clicar sobre o texto que é apresentado na página. Esse documento pode ser
outra página de 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=”mailto:nomealuno@gmail.com”>Enviar mail para o nomealuno</a>
Neste
exemplo, o link criado permite accionar a aplicação de e-mail que estiver
configurado no computador para enviar uma mensagem do correio electrónico para nomealuno@gmail.com
Link
<html>
<head>
<title>Links</title>
</head>
<body>
<h2>Exemplificação
de Links</h2>
<p>Segue-se
um link para o Google</p>
<a
href="http://www.google.pt">Google</a>
<p>O
link seguinte é para uma página local</p>
<a
href="do2.html">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 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;
rigth; 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 width permite definir a largura da imagem.
Imagens
<html>
<head>
<title>imagens</title>
</head>
<body>
<h2>Página
com imagens</h2>
<p>Segue-se
uma imagem sem atributos definidos<img
src="Nissan_Skyline_R34_GT-R_Nür_001[2].jpg"></p>
<p>Uma
imagem inserida
<img
src="Nissan_Skyline_R34_GT-R_Nür_001[2].jpg"align="middle"border="1">
no
meio do texto</p>
<p>Imagem
com dimensões alteradas</p>
<img
src="Nissan_Skyline_R34_GT-R_Nür_001[2].jpg"height="100"
width="200">
</body>
</html>
Cor
<html>
<head>
<title>Página
cor</title>
</head>
<body
BGCOLOR="red">
</body>
</html>
MUSICA
<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>
Para
definir frames, utiliza-se a tag <FRAMESET>.
Como
não se trata propriamente do corpo da página, este tag define uma área apos a
á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 sao criadas duas, uma com 160 pixeis 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 FRAMEESPACING, que definem a borda e o espaçamentos entre
frames.
O
tag <FRAME> que se refere a 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 as links possam la 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 intente explorer e o Netscape Navigator. SCROLLING pode
ser definido com”YES” ou “NO” para obrigar a barra de scroll a estar visível ou
escondida.
<html>
<head><title>Página
com Frames</title>
</head>
<FRAMESET
COLS="160,*BORDER="0" FRAMESPACING="0">
<FRAME
SRC="esquerda.htm"NAME="cima"NORESIZE
SCROLLING="NO"FRAMEBORDER="NO"><FRAME
SRC="conteudo.htm"
NAME="conteudo"FRAMEBORDER="NO">
</FRAMESET>
</FRAMESET>
</NOFRAMES>
<BODY
BGCOLOR="#FFFFF">
Esta
pagina usa frames, mas o seu browser não as consegue visualizar.
</BODY>
</NOFRAMES>
</html>
<input type=”text”name=”home”>
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 texto (tipo de elemento) que se
pretende é “text”, ou seja, uma caixa de texto;
A
expressão name (nome do elemento) será “nome”;
Ou
seja, esta esta caixa de texto passa ser identificada pela a 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 o utilizador;
Size=n-
tamanho da caixa de texto, em que n indica o numero de caracteres da largura;
Maxlength=n-
numero máximo (n) de caracteres permitidos.
Outro
elemento de input – “radio”
<input type=”radio”name=”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 como botoes:
Checked[=”true|false”]
– o atributo checked permite colocar um botao 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
marca de assinalado, escreve-se checked=”false”.
Este
atributo também pode ser usado com elementos do tipo checkbox
Checkbox
<input
type=”checkbox”name=”d1”value=”p”>
A
caixa de 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.
<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 de 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 0, a tabela não apresentará linhas de contorno.
