11º E Marcelo Ramos

O que é HTML?

(Hypertext Markup Language Linguagem de Marcação de Hipertexto) é a linguagem com que são codificadas as páginas da Web.

O funcionamento da Web tem como base:

· Alinguagem HTML-que codifica a estrutura de base das páginas Web;

· O protocolo http-que assegura a transferência dessas páginas através da Internet.

A HTML não é uma linguagem de programação propriamente dita. É uma linguagem de estruturação e formataçã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 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 defenir a estrutura e formação das páginas Web.

Regras básicas que é necessário compreender antes de se começar com a criação de páginas

Todos os”tags” são inseridos entre o sinal de menor de 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 “/”):

Todos os “tags” obedecem a uma hierarquia, como no seguinte exemplo:

O primeiro a abrir é o último a fechar, e vice-versa.

<a> <b> <c> </a> </b> </c> ERRADO

É indiferente utilizar maiúsculas ou minúsculas nos “tags”

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> </body>

Exemplo:

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

O principal elemento que é incluído no cabeçalho é o titulo da página – que surge entre as tags <title> e </title>.(Este título aparece na barra de título do browser em que a página for aberta.)

No corpo do documento (entre as tags <body> e </body> é inserida toda a informação a apresentar na página – texto, imagens, etc.

Criação de páginas HTML

Para criarmos a nossa primeira página 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 página</TITLE>

<BODY>

</BODY>

</HTML>

Nota: Guardar o ficheiro com a extensão.htm (exemplo:index.htm).

Vamos agora fazer a seguinte alteração:

<HTML>

<HEAD>

<TITLE>A minha primeira página</TITLE>

</HEAD>

<BODY>

Olá mundo

</BODY>

</HTML>

Este <BR>(de Break) dá instruções ao browser para fazer uma mudança de linha. Assim, o resultado deverá ser este:

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 parágrafo 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 extenção da linha de página <hr width=50%>, que neste caso 50% indica que a linha terá apenas 50% de largura da página.

A tag <p align=”center”>, temos o atributo align que define o tipo de alinhamento do parágrafo. 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 de igual e de um valor. Este valor pode ser um valor numérico ou de outro tipo. Atualmente, os valores dos atributos devem ser incluídos dentro de aspas.

<HTML>

<HEAD>

<title>página exemplo</title>

</HEAD>

<BODY>

<h1>Título de 1º nível</h1>

<h2>título de 2ºnível</h2>

<p>parágrafo normal</p>

<p>

<hr/>

<p align="center"> parágrafo centrado e com uma

<br> quebra (br) ou mundança de linha a meio.

</BODY>

</HTML>

Para contornar o breaks, utiliza-se uma referência especial -  (Non – Breaking SPace), que convém esclarecer que não é um tag, experimentamos isto:

<BODY>

Olá mundo!

Chamo-me Eduardo.

</BODY>

Tag <font>

Os browsers apresentam o texto dos parágrafos com uma fonte tipográfica e um tamanho predefinidos; porém, 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.

Neste exemplo, estamos a alterar a fonte normal 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.

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 ou 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; itálico; 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</bold>

<p> Frase com uma 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.

<HTML>

<HEAD>

<title>Formatação de texto</title>

</HEAD>

<BODY>

<h1 align="center">Título centrado</h1>

<h6 align="right">Título á direita</h6>

<p>parágrafo com as predefinições</p>

<p>parágrafo com outras definições</p>

</font>

<p><b>parágrafo em bold(negro)</b></p>

<p><i>parágrafo em itálico</i></p>

<p><u>parágrafo com sublinhado</u></p>

</BODY>

</HTML>

Visão geral sobre os principais tipos de tags HTML

Estrutura e conteúdos do documento HTML

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>Título</h1>

…

<p> Parágrafo</p>

…

(etc.)

Elementos de apresentação

Fontes tipográficas; estilos; formatações; alinhamentos; etc.

<font>

face size color

<style>

(etc.)

Tags de estruturação de um documento:

<html> … </html> - Início e fim do documento;

<head> … </head> - Início e fim do cabeçalho;

<title> … </title> - Título da página do browser;

<body> … </body> - Corpo do documento.

Tags de títulos e parágrafos de texto:

<h2> … </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.

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 em texto sublinhado;

<sub> … </sub> Texto em subescrito;

<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 título a definir;

<dd> … </dd> Descreve o item a definir;

Tags que definem tabelas

<table> … </table> Define o início e o fim de uma tabela;

<th> … </th> Define o cabeçalho de uma tabela;

<tr> … </tr> Define o início 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=”ficheiros_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 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=”button”…> Define um botão de commando;

<input type=”submit”…> Define um botão de comandos para envoi de dados de um formulário;

<input type=”reset”…> Define um botão de comando para restabelecer(apagar) os dados.

Listas em HTML

<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>Outro item</li>

</ul>

</body>

</html>

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>

<dl>insert </dt>

<dd> comando para inserir dados</dd>

<dt>Delete</dt>

<dd>Comando para apagar dados</dd>

<dt>Update</dt>

<dd>Comando para atualizar dados

</dd>

</dl>

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(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 casa célula a inserir na linha. A tag <th> costuma ser utilizada nas primeiras linhas da tabela; apenas difere da 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>Um célula</td>(define uma célula com uma largura de 90 píxeis)

O atributo colspan permite indicar o número de colunas que uma célula ocupa. Por exemplo: <th colspan=2>ou<td colspan=2> faz com a célula ocupe duas colunas.

CODIGO PARA FAZER TABELA:

<html>

<head>

<title>Tabelas</title>

</head>

<body>

<h2 align="center">Tabela</h2>

<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

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 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 do 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 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 nomealuno</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 nomealuno@gmail.com

Hiperligações:

<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="trololol.htm">Mais informações</a>

</body>

</html>

Inserção de imagens

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 inglês significa fonte).

No case de a imagem que prentendemos inserir na página se encontrar numa pasta diferente da corrente, teremos de indicar a sua localização. Por exemplo

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.

Cores:

<HTML>

<HEAD>

<TITLE>Página com cor</TITLE>

</HEAD>

</BODY>

</HTML>

Som:

<EMBED SRC="som1.mid"WIDTH="140"

HEIGHT="25" AUTOSTART="TRUE"

CONTROLS="SMALLCONSOLO"

VOLUME="60"LOOP="FALSE">

</EMBED>

</P>

Imagens:

<html>

<head>

<title>imagens</title>

</head>

<body>

<h2>Página com imagens</h2>

<p>Segue-se uma imagem sem atributos definidos<img src="imgres.jpg"></p>

<p> Uma imagem inserida

no meio do texto</p>

<p> Imagem com dimensões alteradas</p>

</body>

</html>

Som:

<EMBED SRC="Kalimba.mp3"WIDTH="300"

HEIGHT="400" AUTOSTART="TRUE"

CONTROLS="SMALLCONSOLO"

VOLUME="60"LOOP="FALSE">

</EMBED>

</P>

Para definir frames, utiliza-se o “o tag” <FRAMESET>.

Como não se trata propriamente do corpo da página, este tag define uma área após a área <HEAD>, mas não contido dentro do tag <BODY>. Ao utilizar o parâmetro COLS, divide a página 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 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 pixéis).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 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” “NO” para obrigar a barra de scroll a estar sempre visível ou escondida.

Frame:

<html>

<head> <title> Página com Frames</title>

</head>

frame src="GOOGLE.htm" name="esquerda" noresize frameborder="no">

<frame src="omg.htm" name="cima" noresize scrolling="no"

frameborder="no"><frame src="GOOGLE.htm" name="conteudo" frameborder="no">

</frameset>

</noframes>

Esta página use frames, mas o seu browser não as consegue visualizar.

</body>

</noframes>

</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=”texto” indica que o atributo type( tipo de elemento) que se pretende é “texto”, 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 número 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; 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

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

Exercio 1 :

<html>

<head>

<title> Exemplo de formulário </title>

</head>

<body>

<form>

nome:

Sexo:

Masculino

Feminino <P>

Disciplinas de informática de que gosta: <br>

Programação

Aplicações

tecnologias <p>

Seleccione uma linguagem da seguinte lista:

<option> Pascal </option>

<option> VBasic </option>

</select> <br> <br>

</form>

</body>

</html>

Exercicio 2 :

<html>

<head>

<title> Exemplo de Formulário </title>

</head>

<body>

<form>

<legend align="left"> Dados do utilizador

</legend>

User Name:

<br>

password:

<br>

</fieldset>

<p>

<textarea cols=40 rows=5> Área de texto...

</textarea>

<legend align="left"> Botões de comando

</legend>

</fieldset>

</form>

</body>

</html>

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.

Exercicio 3:

<html>

<head>

<title> Exemplo de Formulário </title>

</head>

<body>

<h2> Identificação </h2>

<form>

<tr>

<td> Primeiro nome: </td>

<tr>

<td> Segundo Nome: </td>

<tr>

<td> Nome composto: </td>

</table>

<p>

<input type="button" name="btnnomes"

value="Clique para juntar os nomes"

onclick="nomec.value

=nome1.value + ' ' + nome2.value">

</form>

</body>

</html>

Com o atributo border igual a zero, a tabela não apresentará linhas de contorno.

11º E Marcelo Ramos

quinta-feira, 24 de janeiro de 2013

<a href=mailto:nomealuno@gmail.com>Enviar mail para nomealuno</a>

Sem comentários:

Enviar um comentário