O documento descreve o que é HTML, como funciona a estrutura básica de uma página web em HTML e alguns elementos e tags importantes como cabeçalho, corpo, títulos, parágrafos, links, imagens e tabelas.
1. O que HTML?
(Hypertext Markup Language- Linguagem de Marcação de
Hipertexto) é
A linguagem que são modificadas as paginas da web.
O funcionamento da web tem com base:
A linguagem HTML- que codifica a estrutura de base das paginas
da web;
O protocolo HTTP - que assegura a transferência dessa pagina
através da internet.
A HTML não é uma linguagem de programação propriamente dita.
É uma linguagem de estrutura e formatação de documentos
(Markup Language) . como tal a HTML não possui os recursos
típicos das linguagens de programações, tais co: variáveis
operadores, funções, estruturas de controlo. Etc.
A utilização de HTML simples apenas produz paginas web estáticas
e sem interactividades como o utilizador. Para introduzir essas
características nas paginas web torna-se necessário combinar HTML
com outras linguagens de scripting, como; PHP;JSP;ASP etc,
A linguagem HTML utiliza tags, marcas ou etiquetas de marcação
para definir a estrutura e a formatação das paginas web.
2.
Regras básicas que é necessário compreender antes de se começar com a criação de
paginas
Todos os ‗tags‘ são inseridos entre sinais de menos ou maior:
<tag>
Tirando aqueles que represnetão 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 (ultilizando o
carater‘/‘):
<tag> </tag>
Todos os ‗tags‘ obedecem a uma hiererquia, 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> errado
É indiferente utilizar maiúsculas ou minúsculas nos tags
<tag> é igual a <TAG> E A <Tag>
Nota: No HTML actual, as teclas devem ser escritas em minúsculas.
Estrutura basicasde um HTML
Um documento HTML começa com o tag de abertura <html> e termina com o tag de
fecho </html>
3. Exemplo:
<HTML>
.
.
.
</HTML>
As duas partes principais que constiue um documento:
O cabeçalho (head)-que fica compreendido entre as tags <head></head>;
O corpo do documento (body)-que fica entre as tags <body></body>
Exemplo
<HTML>
<HEAD>
.
.
</HEAD>
<BODY>
.
.
</BODY>
</HTML>
4. 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 tags <body> e </body>
é insirida toda a informação apresentar na pagina –
texto, imagem, etc.
5. Criando de paginas HTML
Para criarmos a nossa primeira pagina em HTML basta um
simples editor de texto, como o Notped ou Bloco de Notas
podemos momeçar por inserir o seguinte:
<HTML>
<HEAD>
<HEAD>
<TITLE>A minha primeira pagina</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
NOTA: Guardar o ficheiro com a extensão .html
(exemplos:index.html
6. Convem então esclarecer algo: em HTL os espaçamentos e
mudanças ..
<HTML>
<HEAD>
<HEAD>
<TITLE>A minha primeira pagina</TITLE>
</HEAD>
<BODY>
OI sou o Leonardo
<br>
Miguel
<br>
sou gordinho :p
</BODY>
</HTML>
7. Visão geral sobre os principais tipos de tags HTML
Estrututas e contoudo do documentos HTML
Exemplos de tags que Exemplo de tags que assinalam
define a estrutura do conteúdos (texto;imagen;etc.)
documento
<html> <h1>Titulo</h1>
<head> …
.., …
</head> <p>Titulo</p>
…
<Body> …
… <img src=‖imagens‖>
</body> (etc.)
</html>
8. Elementos de apresentação
Tags de estruturação de um documento
Fontes tipográficas ; estilos; formatação, alinhamento;etc.
<font>
Face size color
<b>---</b>
<i>---</i>
<u>---</u>
<style>
(Etc.)
<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
9. Tags de títulos e parágrafos de texto
Alguns tags de formatação de texto
<font>---</font> definição da fonte tipografica
<b>---</b>definição de texto em bold ou negro
<i>---</i>definição de testo italico
<u>---</u>definição de texto sublinhado
<sub>---</sub>texto de superescrito
<sup>---</sup>texto de destaque
<strong>---</strong>texto de destaque.
<h1>---</h1>titulo de maior grandeza;
<h2>---</h2> titulo de segunda grandeza;
…
<h6>---</h6>
<p>---</p>paragrafo de texto;
<br/> quebra de linha.
10. Atributos descrição
Tags que define listas de elementos
<ol>---</ol> define uma lista numerada;
Define uma lista não numerada ;
<ul>---</ul> item ou linha dentro de uma lista;
<li>---</li> define uma lista de definições
<dl>---</dl>indica um titulo a definição
<dt>---</dt> indica um titulo a definir.
<dd>---</dd>descreve o item definir
Align – atributo usados 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.
11. Tags que definem tabelas
Tag que permite inserir imagens
Tag que define um link (ligação)
<a href=”endereço”>..</a>- define uma ligação para endereço web ou um
outro documento.
<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
<tb>---</tb>define o conteúdo de cada célula.
<img src=”ficheiro imagem”>.
12. Exemplo de tags e atributos que permite criar formulários:
<form>---</form> define o inicio e o fim de um formulario
< input type =”texto”....>define uma caixa de texto para input;
< input type =”password”…>define uma caixa de texto para input de um 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 para um
formulário.
< input type =”reset”…> define um botão de comando para restabelecer (apagar) os
dados.
13.
Tabelas em HTML
Na tag <table> o atributo border permite definir as espessura da
linha ;por exemplo, border=1
A tabela é construída linha a linha . cada nova linha é definida
com um tag <tr>. Em cada linha (apos casa tag<tr>) inserem-se
as tags que define células de tabela (<th> ou <td>).
O mais usado e ultiliza-se tag<td> para definir cada selula a
definir na linha . A tag <th> costuma ser ultilizadas nas primeiras
linhas da tabela : apenas defere da tag <tag<td> no seguinte ; o
conteúdo de uma célula definida como <th> é destacada 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 a
largura de 90 pixéis )
O atributo colspan permite indicar o numero de colunas que uma
célula ocupa. Por exemplo:<th colspan=2>ou :<td colspan=2> faz
com a célula ocupa duas colunas.
15. LINKS OU LIGAÇOES
<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 hrtf (de
Hypertext referencie). É este atributo que define o local
(endereço URL, local de novo documento, etc.) para
onde se pretende efectuar a ligação.
16.
Ligaçao externa (um URL externo)
<a href=http://www.google.com>Google</a>
O atributo HREF é igualdado ao endereço URL que temos em vista
para a ligação externa. Entre as tags <a> </a> colocamos o texto que
queremos que apareça na pagina..
Ligação interna para outro documento no meso computador.
<a href=‖doc2.htm‖> mais informação</a>
Nesta caso, atributo HRER é igualdado ao nome do documento HTML
para onde queremos remeter o leitor quando ele crica sobre o texto é
apresentado na pagina. Esse documento pode ser outra pagina HTMl
ou outro tipo de documento se encontrar numa outra pasta ou
diretoria é necessário ter isso em conta na indicação do nome.
Ligação pa um endereço de e-mail
<a hraf=edu_gtnho@hotmail.com> Enviar mail para nome aluno </a>
Neste exemplo, o link o criado permite accionar a aplicação de e-mail
que estiver configurada no computador para enviar uma mensagens
de correio electrónico para edu_gtnho@hotmail.com.
17. Links para coisas
<html>
<head>
<title> Links </title>
</head>
<body>
<h2> Exemplificação de links</h2>
<p> segue-se um link para o Goolgle </p>
<a href="http://www.google.com"> google </a>
<p> o link seguinte é para uma pagina local </p>
<a href="o que HTML.docx"> mais informaçoes </a>
</body>
</html>
18.
Inserção de imagens
<img src=‖globo.gif‖>
A inseção de imagens em documentos html é feita através
de tag<img> (que não tem tag de feicho). A indicação do
local e nome do ficheiro da imagem é feita no atributo src
(de source__ que em inglês significa fonte).
No caso da imagem que pretendemos inserir na pagina se
emcontra numa pasta diferente da corrente, teremos de
indicar a sua localização . por exemplo:
<img src=‖imagens/global.gif‖>
19.
Atributos relativos a uma imagem
O atributo align permite definir a forma de alinhamento
da imagem. Os valores possíveis são :
Left; rigt; middle; bottom e top.
O atributo border permite definer uma linha retamgular
de contorno na imagem. Deve ser indicado um valor
numérico para espessura da linha .exemplo :<img
src=‖pirata.gif‖ border=‖2‖>
O atributo height permite definir a altura da imagem.
O atributo windht permite definir a largura da imagem.
Frames
Para definir frames, utiliza-se o o tag <FRAMESET>
20. Como não se trata propriamente do corpo da pagina , este ‗tag‘
define uma área apos a área <HEAD>, mas não contido dentro do
tag <BODY>. Ao utilizar parâmetros 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 espeço disponível no ecrã. As mediadas das frames
podem ser fornecidas em pixéis, em percentagem do espaço
disponível ou por um asteristico , que significa ‘o resto‘. Estas
colunas são definidas de esquerda para a direita. Temos também
BORDER e FRAMESPACING, que define a borda e o
espaçamento entre frames.
O ‗tag0‘ >FRAME>. Que se reefre a primeira coluna (de 160
pixeis). SRC define qual o ficheiro html a ser exibido nessa frame,
NAME, para que os links possam la recais.
NORESIZE indica que a frame não pode ser redimensionado com
o rato, e FRAMEBORDER, o bordo da frame.
Ultiliza-se FRAME FRAMEBORDER> e FRAMESET BORDER>
por uma questão de compatibilidade entre o internet Explorer e o
Netscape Navegador. SCROLLING pode ser definido com ―YES‖
OU ―NO‖ para obrigar a barra de scroll a estar sempre visível ou
escondida.
22.
<input type =‖text‖ name =‖name‖>
Este é um exemplo de um zinput> do tipo text. Ou seja uma caixa de
texto . neste tag de input, temos dos atributos:
A expressão type = ―texto‖ indica que o atributo type (tipo « de
elemento) que se pretende é ―text‖ ou seja uma caixa de texto;
A expressão name _‖name‖ indica que o atributo name(nome do
elemento) será ―name‖; ou seja , este esta caixa de testo passa a ser
identificada pela palavra ―name‖.
Outros atributos que podemos usar com as caxas de texto;
Value=‖…‖- o atributo value permite indicar um valor indicado para
uma caixa de texto por outro lado captar o dado escrito pelo utilizador;
Seze= n – tamanho da caixa de texto, em que n indica o número de
caracteres de sua largura;
Maxlength= n – numero máximo (n) de caracteres permitidos.
Outros elementos de imput – ―radio
<input type=”radio” name =”sexo” name =”sexo” value=”M”
No exemplo anterios temos 3 atributos mais usados type;name value.
Reparea-se que a expreção value=‖M‖ é um atributo que podemos usar
como os botões
23. ;
Checked[=”true|false”] – o atributo checked permite colocar
um botao em estado de assinalado ;neste caso , a parte que
inclue o sinal de igual é o valore (true ou false) é opcional ; se
esse valor não for indicado, é assumido true; para retirar a
marca de assinalado , escreve-se checked=‖false‖.
Esse atributo também pode ser usado com os elementos do
tipo checkbox—caixa de selecção.
Checkbox
<input tupe=‖checkbox‖ name=‖d1‖ value=‖P‖>
A Caixa Chexkbox Fica Indentificado Como O Nome ―D1‖ e o
seu value é codificado com ―P‖. a disciplina que se refere é
indicada entre texto normal fora da tag; programação.
25.
<textarea cols=40 rowa=5>
O atributo cols=40 define que a caixa de texto terá a
largura de 30 colunas de caracteres
O atriburo rowa =5 define que a caixa de texto terá
de 5 linhas ou filas de caractreres.
26.
<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 apresentaras linhas de controles.