Html

O que é o html ?

(hypertextmarkuplanguage- 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 (markuplanguage). 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> </title>. (este titulo aparece na barra de titulo
e
do browser em que a pagina for aberta.)

No corpo do documento (entre as tags <body> </body>é inserida
e
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 minhaprimeirapagina</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 minhaprimeirapagina</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:


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 <hrwidth=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>paginaexemplo</title>

</head>
<body>
<h1> titulo de 1º nivel</h1>
<h2> titulo de 2º nivel</h2>
<p> paragrafo normal </p>
<p>

<hr/>
<hrwidth="50%">
<hr/>

<palign="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-
BreakingSPace), que convem esclarecer que não é um „tag‟, experimentemos isto:

<BODY>
Olá!
       &nbsp
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:

 Face – define a fonte tipográfica;
 Size – define um tamanho entre 1 e 7 ;
 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.

<fontsize =4><fontsize=+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> …
… <imgsrc=”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

<imgsrc=”ficheiro_imagem”>

Tag que define um link (ligação)

<ahref=”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;
<inputtype=”text”…> - define uma caixa de texto para input;
<inputtype=”password”…> define uma caixa de texto para input de uma password;
<inputtype=”radio”…>- define um botao de opção
<inputtype=”checkbox”…>- define uma caixa de selecção
<inputtype=”button”…>- define um botão de commando
<inputtype=”submit”…>- define um botao de commando para envoi de dados de um
formulario;
<inputtype=”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:
<tdwidth = 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: <thcolspan=2> ou <tdcolspan=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><thcolspan=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
<ahref=”…”> … </a>
Qualquer tipo de ligação (link) é feita sempre com base na tag<a> …</a> também
chamada anchortag.
O principal atributo da tag<a>é o atributo href(de HypertextReference). É 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)
<ahref=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
<ahref=”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
<ahref=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>
<ahref="http://www.google.com">Google</a>
<p> Pagina Local</p>
<ahref="coise.htm"> Mais informações</a>
</body>
</html>

Inserção de imagens
<imgsrc=”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

<imgsrc=”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:
<imgsrc=”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 <imgsrc="lol.jpg"></p>
<p> Imagem inserida
<imgsrc="lol.jpg"align="middle"border="1">no meio do texto</p>
<p> Imagem com dimensões alternadas </p>
<imgsrc="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”>
<input>do tipo text, ou seja, uma caixa de
Este é um exemplo de um
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>
<textareacols=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>

<textareacols=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>
<tableborder=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>

<tableborder=0>
Com o atributo border igual a zero, a tabela não apresentará linhas de contorno.

Html

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Html

Último

Html