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 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 página</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 Inês
</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 InêsÁgua
</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.
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> - Inicio e fim do documento;
<head> … </head> - Inicio e fim do cabeçalho;
<title> … </title> - Titulo 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.
Tags que permite inserir imagens
<img src=”ficheiro_imagem”>
Exemplo de tags e atributos que permitem criar formulários:
<form> … </form> - Define o inicio e o fim de um
formulário;
<input type=”texto”…> - 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=”buttom”…> - 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.
<html>
<head>
<title>Tabelas</title>
</head>
<body>
<h2
align="center">Tabela</h2>
<table align="center"
border=2 cellpadding=1>
<tr><th
colspan=2>Catátolo 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
<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ágia 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 é feito 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 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 width permite definir a largura da imagem.
<html>
<head>
<title>Imagens</title>
</head>
<body>
<h2>Página com imagens</h2>
<p>Segue-se uma imagem sem atributos definidos<img
src="globo.jpg"></p>
<p>Uma imagem inserida
<img src="globo.jpg"align="middle"
border="1">no meio do texto </p>
<p> Imagem com dimensões alteradas </p>
<img
src="globo.jpg" height="100" width="200">
</body>
</html>
