Help do Desenvolvedor

Plus

Outros comandos e algumas dicas que podem auxiliar na elaboração de sua homepage.

Você pode inserir uma barra horizontal na sua página, através da tag <hr>. Esse comando pode receber os seguinte atributos:

aling="alinhamento" : define o alinhamento da barra, que pode ser left, right e center, definindo alinhamento à direita, à esquerda e ao centro, respectivamente.

width="n" : define o comprimento da barra, onde n recebe valores absolutos em pixels (width="350") ou em porcentagem (width="80%").

size="n" : define a espessura da barra.

color="cor" : define a cor da barra.

Você pode destacar o seu texto utilizando os comandos blink, que produzirá um efeito de texto piscando, e marquee, que produz o efeito de texto "passando" na tela. Esses comando devem ser utilizados quando você desejar dar destaque a uma frase ou palavra.

Porém, devem ser utilizados com cautela, evitando exageros, para que a atenção do usuário não fique voltada somente para o destaque, deixando de lado o resto da página.

<blink>: define o efeito de "pisca-pisca" para o texto.</blink> encerra o efeito do texto piscante. O comando <blink> texto digitado</blink> resulta no seguinte exemplo:

texto digitado

Obs.: Não funciona no Internet Explorer e funciona somente no Netscape 7.02.

<marquee>: define o efeito de texto passando pela tela.</marquee> encerra o efeito do texto passante. O comando <marquee>texto digitado</marquee> resulta no seguinte exemplo:

texto digitado

Obs.: Funciona no Internet Explorer e no Netscape 7.02.

Tabelas em html

09:43

Tabelas

Organização de tabelas e a noção de como estruturar um documento utilizando as tags de tabela.

As tabelas são definidas pelas tags <table> </table>. Dentro dessas tags, você deve definir as linhas <tr> </tr> e as colunas <td> </td> da tabela.

Para definir uma tabela com duas linhas e duas colunas, por exemplo, você terá a seguinte estrutura:

<table> - inicializa a tabela

<tr> - inicializa a primeira linha

<td> conteúdo da célula </td> - inicializa e fecha coluna da esquerda

<td> conteúdo da célula </td> - inicializa e fecha a coluna da direita

</td> - fecha a primeira linha

<td> - inicializa a segunda linha

<td> conteúdo da célula </td> - inicializa e fecha a coluna da esquerda

<td> conteúdo da célula </td> - inicializa e fecha a coluna da direita

</tr> - fecha a segunda linha

</table> - fecha a tabela

As tags <taable> </table> podem ter os seguintes atributos:

border="n" : define a espessura da borda da tabela, onde n recebe um valor de 1 a 6.

cellspacing="n" : define o espaçamento horizontal entre as células.

cellpadding="n" : define o espaçamento vertical entre as células, sem refletir na largura da borda.

widht="n" : define a largura da tabela em relação à página. Pode ser dada em pixels (width="400") ou em porcentagem (width="80%").

height="n" : define a altura da tabela em relação à página. Pode ser dada em pixels (height="350") ou porcentagem (height="50%").

bgcolor="cor" : define a cor de fundo da tabela. Aqui, você também pode optar por escolher uma imagem como fundo da tabela, com o atributo background="imagem", que receberá um arquivo .gif ou .jpg.

AS tags <td> </td> e <tr> </tr> podem receber atributos também:

aling="alinhamento" : define o alinhamento da célula, que pode ser right, left e center, definindo um alinhamento à direita, à esquerda e ao centro, respectivamente.

valing="alinhamento_vertical" : define o alinhamento vertical da célula, ou seja, a distribuição do texto em relação à página. Esse texto pode ser definido como top, para o topo da célula; middle, para o meio da célula e bottom para a base da célula.

colspan="n" : define o número de colunas a serem agrupadas em uma única célula.

rowspan="n" : define o número de linhas a serem agrupadas em uma única célula.

Listas em html

09:43

Listas

Organização de listas numeradas e não-numeradas.

Uma outra maneira de organizar o seu texto é através da utilização de listas. Elas podem ser listas de tópicos ou listas numeradas, como nos exemplos:

•item 1

•item 2

•item 3

1. item 1

2. item 2

3. item 3

As tags para as listas não-numeradas são <ul> lista </ul>. Quando quisermos listas numeradas, usamos <ol> lista </ol>. Dentro dessas tags, cada linha será definida pelas tags <li> item </li>.

Essas listas podem receber diversos atributos, que definem o tipo de numeração e o tipo de marcador a serem usados.

type="tipo_de_marcador" : define o tipo de marcador de lista não-numerada, sendo square para quadrado, disc para círculo preenchido (padrão) e circle para círculo transparente. Esse tipo só pode ser definido para listas com tags <ul> </ul>.

type="tipo_de_numeracao" : define o tipo de numeração a ser utilizado em uma lista numerada, sendo a para letras minúsculas, A para letras maiúsculas, I para romanos maiúsculos, i para romanos minúsculos e 1 para numeração padrão. Esse tipo só pode ser definido para listas com tags <ol> </ol>.

Links em html

09:42

Links

Inserção de links na sua homepage, organizando uma barra de navegação interna ou direcionando-a para uma homepage externa à sua.

As tags de links permitem que se defina uma palavra ou expressão como um vínculo para outra página. Assim que a palavra for clicada, o usuário será enviado para outra página, que pode ter sido criada por você ou ser externa ao seu documento. Quando a página for externa, é importante lembrar em colocar o link absoluto da URL, num formato tal qual http://www.cinted.ufrgs.br.

Os links devem ser definidos entre as tags <a> </a>. Essas tags podem receber os seguintes atributos:

href="endereco" : define o endereçco do link. Se externo, deve conter um endereço absoluto de uma URL, tal como http://www.cinted.ufrgs.br. Se interno, o link pode ser um endereço relativo, tal como nome_da_pagina.html, desde que essa página esteja na mesma pasta daquela que contém o link.

href="mailto:endereco_de_mail" : define o endereço de e-mail.

O link, além de uma palavra ou expressão, também pode ser uma imagem. Para isso, ao invés de colocar um texto entre as tags <a> </a>, você deve colocar uma imagem: <a href="pagina.html"><img src="imagem.gif"></a>.

Formatar imagem em html

09:42

Imagens

Ilustração da sua homepage, incluindo os comandos de imagens

Para ilustrar sua página, você pode utilizar a tag de imagem: <img>. Os arquivos devem ter as extensões .gif ou .jpg. Você pode preparar essas imagens no PaintShop.

Os atributos a serem utilizados na tag <img> são:

src="nome_do_arquivo" : define a imagem a ser mostrada. É importante lembrar que o link para a imagem deve ser absoluto. Para garantir isso, é recomendável que você coloque as imagens utilizadas na mesma pasta em que está sua página.

aling="alinhamento" : define o alinhamento da imagem, podendo ser left, right e center, para alinhamento à esquerda, à direita e ao centro.

alt="texto" : define um texto alternativo para caso do navegador não suportar a visualização de imagens. Esse texto também será mostrado quando passarmos o mouse por cima da imagem.

border="n" : define a espessura da borda que contorna a imagem. Se você não quer borda, deve escolher border="0".

width="n" : define a largura da imagem.

height="n" : define a altura da imagem.

Um exemplo de comando de imagem seria:

<img src="imagem.gif" aling="center" alt="Minha Imagem!" border="1" width="150" height="135">.

Editar texto em html

09:27

Texto

Formatações básicas de texto. Como alterar a fonte e incluir tags de marcação de linhas e parágrafos.

Agora que você já definiu as primeiras tags do seu documento HTML, não esqueça de salvá-lo. No Bloco de Notas, salve o arquivo como nome_do_arquivo.html ou nome_do_arquivo.htm. O navegador é capaz de interpretar qualquer uma dessas duas extensões. É importante lembrar que, se você está utilizando imagens, coloque-as na mesma pasta onde está sua página. Quando utilizar links, não esqueça de atribuir o endereço absoluto.

A cor do texto já foi definida, de uma forma geral, nas tags <body></body>, com o atributo TEXT. Porém, você pode querer alterar alguma parte do seu texto, um título, por exemplo. Para isso, é necessário que você conheça as tags e atributos dos comandos que definem a fonte da página.

O tipo de fonte a ser usado pode ser definido pelas tags <font> </font>. Essas tags têm os seguintes atributos:

face="nome_da_fonte" : define o tipo de fonte a ser utilizado. A fonte Verdana é considerada uma das melhores para leitura no monitor. Além dessa, qualquer outra fonte não serifada (sem contornos) é uma boa opção, como a Arial e a Helvetica.

color="cor" : define a cor da fonte. Como em qualquer outra atribuição de cor, o valor pode ser definido com o nome da cor em inglês ou através de um código.

size="n" : define o tamanho da fonte, sendo que n pode variar de 1 a 7. O valor 2 corresponde ao tamanho 10 para Arial e 12 para Times New Roman, os que normalmente utilizamos na formatação ABNT nos editores de texto.

Uma maneira mais fácil de definir títulos é utilizar as tags <h></h>, onde n pode assumir os valores de 1 à 6, que especificam o tamanho da fonte. O alinhamento à esquerda, à direita, ao centro e justificado podem ser definidos pelos atributos aling="left" ou align="right" ou align="center" ou align="justify", respectivamente.

Título definido por <h3 align="center"> título </h3>

Para organizar o texto, você pode utilizar as tags de parágrafo <p></p> ou a quebra de linha <br>. A marca de linha define um 'enter' no texto, enquanto a marca de parágrafo vai definir um 'enter' seguido de uma nova linha. Para entrada de parágrafo no texto, você pode utilizar as tags <dd> </dd>. As tags de parágrafo também podem receber o atributo ALIGN.

Para definir estilos de texto, você pode utilizar as tags <b> texto </b> para negrito, <i> texto </i> para itálico e <u> texto </u> para sublinhado. Um texto em negrito, em itálico e sublinhado ficaria assim: <b><i><u> texto com estilo </u></i></b>. Para sobrescrito, utlizamos as tags <sup> texto </sup>. Para subscrito, utilizamos <sub> texto </sub>.

Veja mais:

HTML

09:02

Criando Páginas na Web

Umas das grandes vantagens da Internet é ser muito acessível. Qualquer pessoal com um computador possui as ferramentas básicas necessárias para criar a sua própria página na web.

A linguagem HTML é marcada por tags que serão identificadas pelo navegador, escritas entre os sinais "<" e ">". Dentro dessas tags você encontra comandos para formatação da fonte dos textos <font face="arial">, parágrafos <p>, imagens <img src="imagem.gif">, entre outros.

Como começar a criar a página de internet

Vamos criar a nossa primeira pagina.

Primeira etapa:

Criar um aquivo de texto "txt". Clicar com botão direito do mouse, selecionar "criar novo documento", escolher arquivo de texto. Conforme a figura:

Salvar o arquivo em formato de página de internet, vamos salvar a nossa página com o nome de "primeirapagina.html", conforme a figura:

Agora vamos criar o conteúdo da nossa página, primeiro abrir a nossa pagina para editar: Primeiro clicar com botão direito no arquivo "html" que foi criado com botão direito do mouse, escolher a opção "Abrir com", depois escolher a opção "abrir com bloco de texto", conforme a figura:

Aberta nossa pagina vamos digitar o código:

Estrutura Básica

Comandos básicos do documento HTML, incluindo as tags de Título e de formatação do Corpo da página.

Como o navegador precisa dessas tags para interpretar o código, antes de qualquer coisa, temos que criar o documento com uma tag dupla de inicialização: <html> </html>.

Entre essas duas tags, vai todo o conteúdo da página. Esse conteúdo vai ser dividido em duas partes: o cabeçalho, que será colocado entre as tags <head> </head> e o corpo da página, que será colocado entre as tags <body> </body>. A tag de título da página, <title> Título da Página </title> vai dentro do cabeçalho.

Assim, no Bloco de Notas, a estrutura básica de um documento HTML será:

<html>

<head><title> Título da Página </title> </head>

<body>

Aqui vai o conteúdo da página!

</body>

</html>

Vamos ver o resultado: Primeiro clicar com botão direito no arquivo "html" que foi criado com botão direito do mouse, escolher a opção "Abrir com", depois escolher algum navegar "Internet Explorer", "Firefox" ou outro navegador: conforme a figura:

Resultado:

As tags <body></body>, que definem a estrutura do corpo da página, podem receber atributos especiais de formatação que definem, por exemplo, a cor de fundo da página. Esses atributos são colocados dentro da tag: <body bgcolor="yellow"> conteúdo </body>.

Os atributos das tags <body> </body> são:

bgcolor="cor" : define a cor de fundo da página, que pode ser expressa em inglês ou através de um código específico, onde, por exemplo, o branco é definido por #ffffff e o preto por #000000.

background="imagem" : define uma imagem como fundo da página. Essa imagem pode ser uma arquivo .gif ou .jpg. Você pode preparar uma imagem para sua página no PaintShop.

text="cor" : define a cor do texto utilizado na página. Assim como o fundo, pode ser expresso em inglês ou através de um código.

link="cor", alink="cor" e vlink="cor" : definem as cores dos link inativos, links ativos e links visitados, respectivamente.

Voltar
Editar texto em html
Formatar imagem em html
Links em html
Listas em html
Tabelas em html
Plus no site em html