Sobrescrito e Subscrito

Muitas vezes, principalmente quando trabalhamos com números, necessitamos utilizar caracteres sobrescritos ou subscritos.

Caracteres sobrescritos ficam acima da base da linha e caracteres subscritos ficam abaixo.

Não existe uma forma de criarmos este efeito diretamente pelo teclado, portanto, devemos formatar tais caracteres para que o browser os renderize acima da linha ou abaixo.

Em HTML/XHTML quem faz esse papél são as tags SUP e SUB, sendo SUP sobrescrito e SUB subscrito.

Abaixo estão alguns exemplos que podemos nos deparar.

São Paulo tem 1.522,986Km2 de território.

A fórmula da água é H2O.

A url de TI Expert© é www.tiexpert.net.

112 equivale a 210. (lê-se: 11 na base binária equivale a 2 na base decimal).

Nos exemplos acima podemos ver a importância da prática do uso de SUP (sobrescrito) e SUB (subscrito). Isso fica bastante evidente principalmente no último exemplo, que fica indecifrável. Agora, vamos codificar estes 4 exemplos usando SUP e SUB no HTML/XHTML.

...
<P>São Paulo tem 1.522,986Km<SUP>2</SUP> de território.<BR>
A fórmula da água é H<SUB>2</SUB>O.<BR>
A url de TI Expert<SUP>&copy;</SUP> é www.tiexpert.net.<BR>
11<SUB>2</SUB> equivale a 2<SUB>10</SUB>.</P>
...

Isso é renderizado no browser da seguinte forma:

Exemplo de como é renderizado as tags SUP e SUB

Características - tag SUP (texto - formatação)
uso	HTML 4.01	<SUP>...</SUP>
	XHTML	<SUP>...</SUP>
	HTML 5	<SUP>...</SUP>
Formatação Padrão	Fonte	Serif
	Tamanho	13px
	Cor	#000000 (preto)
	Alinhamento Vertical	superior
	Margens	0px
	visualização	inline
Atributos Aceitos	id, class, lang, dir, title, style
Eventos Possíveis	onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Características - tag SUB (texto - formatação)

uso HTML 4.01 ...

XHTML ...

HTML 5 ...

Formatação Padrão Fonte Serif

Tamanho 13px

Cor #000000 (preto)

Alinhamento Vertical inferior

Margens 0px

visualização inline

Atributos Aceitos id, class, lang, dir, title, style

Eventos Possíveis onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Caminhos e URL

Os caminhos das páginas sempre serão definidos por URL (Uniform Resource Locators).

Esses caminhos podem ser completos utilizando desde seu recurso até o nome do servidor ou serviço.

Os recursos mais comuns são:

http:// - página da internet que usa protocolo de hipertexto.
https:// - página da internet que usa protocolo de hipertexto seguro, como por exemplo SSL.
mailto:// - endereço para enviar correspondência eletrônica.
ftp:// - endereço para transferência de arquivo.

Esses são apenas alguns exemplos. Essas designações de recurso são interessantes para acesso externo. Isso quer dizer que, quando quero acessar um recurso externo ou outra página que não está em meu servidor, nós devemos utilizar a nomenclatura de recurso.

Por exemplo: o seguinte link está errado e não irá funcionar.

1.<A HREF="www.tiexpert.net">TI Expert</A>

Isso porque www não é um recurso. Portanto, se quisermos acessar este site, devemos usar seu protocolo.

O exemplo abaixo está correto:

1.<A HREF="http://www.tiexpert.net">TI Expert</A>

Para acesso interno no servidor não é necessário o uso completo da URL. Nós podemos utilizar apenas endereços relativos ao documento ou endereços relativos à raiz (também conhecido como root). Isso nos poupa o trabalho de digitar longas URLs repetitivas.

Caminhos relativos à raiz

Caminhos relativos à raiz sempre começam com barra (/) e são simplesmente a URL escrita sem a parte inicial do domínio

Por exemplo, vamos imaginar que um site em a seguinte organização de pastas e arquivos.

Se eu quiser criar um link da página index.html para pagina2.html, teremos:http://www.tiexpert.net/pasta1/subpasta1/pagina2.html no qual retiraremos o domínio do servidor, ficando o link assim:

1.<A HREF="/pasta1/subpasta1/pagina2.html">Página 2</A>

Caminhos relativos ao documento

Caminhos relativos ao documento são baseados em níveis de diretório. Caminhos relativos ao documento sempre começam sem barra (/).

Ainda levando em consideração o diagrama de pastas acima, se quisermos criar um link da página index.html para pagina2.html faremos o seguinte:

Como estamos no primeiro diretório e a página pagina2.html está no diretório /pasta1/subpasta1/, então, devemos entrar na pasta1, depois na subpasta1 e assim acessar o arquivo pagina2.html. Vejamos o exemplo abaixo:

1.<A HREF="pasta1/subpasta1/pagina2.html">Página 2</A>

Agora, para criarmos um link do arquivo pagina2.html para pagina1.html faremos o seguinte:

Como podemos perceber o arquivo pagina1.html está dentro do diretório /pasta2/, ou seja, para conseguirmos chegar a este diretório devemos voltar dois níveis para, então, conseguirmos acessar o diretório /pasta2/ e posteriormente o arquivo pagina1.html.

Em caminhos relativos ao documento, usamos ponto-ponto-barra (../) para indicar que se deve voltar um nível.

Portanto, temos o seguinte caminho: http://www.tiexpert.net/pasta1/subpasta1/pagina2.html; e queremos ir para este caminho: http://www.tiexpert.net/pasta2/pagina1.html. Então, primeiramente, devemos voltar dois níveis para igualar ao nível da /pasta2/. Depois, basta acessarmos a pasta e o arquivo. Portanto, ficaria da forma abaixo:

1.<A HREF="../../pasta2/pagina1.html">Página 1</A>

Páginas com Imagens

Na medida em que a internet evoluia, mas multimídia ela se tornava. Hoje em dia, é inconcebível a visão de uma página da internet que não tenha imagens.

O código HTML/XHTML nos possibilita facilmente inserir imagens em páginas, assim como configurá-las.

Usamos a tag IMG para isso. Essa tag possui vários atributos que serão vistos logo abaixo.

Src

Src é o atributo mais importante da tag IMG.

O atributo src é responsável em informar onde está a imagem. Essa informação é dada por meio da uma URL, como no exemplo abaixo.

...
<IMG SRC="computador.jpg" />
...

Width e Height

Um dos principais atributos da tag IMG também são width e height. Esses atributos controlam a largura (width) e a altura (height) que a imagem será representada no documento. Se estes atributos forem omitidos, os browsers automaticamente usarão o tamanho original da imagem.

A imagem que está sendo utilizada como exemplo acima tem 300 pixels de largura por 300 pixels de altura.

...
<P ALIGN="center">Imagem Original (300x300)<BR />
<IMG SRC="computador.jpg" WIDTH="300" HEIGHT="300" /></P>
<P ALIGN="center">Imagem Original (150x300)<BR />
<IMG SRC="computador.jpg" WIDTH="300" HEIGHT="300" /></P>
<P ALIGN="center">Imagem Original (300x150)<BR />
<IMG SRC="computador.jpg" WIDTH="300" HEIGHT="300" /></P>
...

Imagem Original (300x300)

Imagem com Largura Modificada (150x300)

Imagem com Altura Modificada (300x150)

Alt

O atributo alt é obrigatório pela definição do HTML/XHTML. Este atributo define um texto para ser visualizado no lugar da imagem. Ou seja, caso a imagem não carregue, ou o browser que acessar esta página for apenas textual (por exemplo o Lynx), haverá uma forma alternativa de visualizar a informação daquela imagem.

Nos dias atuais, o atributo alt tem sido muito empregado em técnicas de SEO (Search Engine Optimization) para melhorar a posição de sites em mecanismos de busca como o Cadê do Yahoo e, principalmente, o Google.

...
<IMG SRC="computador.jpg" ALT="Computador Pessoal" />
...

Align

Align controla o alinhamento da imagem em relação ao texto.

Os valores possíveis são:

bottom: faz a parte de baixo da imagem ser alinhada verticalmente na linha base em que se encontra. Este é o valor padrão de todas as imagens.
middle: faz a parte central da imagem ser alinhada verticalmente na linha base em que se encontra.
top: faz a parte de cima da imagem ser alinhada verticalmente na parte de cima da linha do texto em que se encontra.
left: faz com que a imagem se fixe a esquerda, possibilitando o texto a ficar a direita.
right: faz com que a imagem se fixe a direita, possibilitando o texto a ficar a esquerda.

Há também outras opções, porém não são aceitas ou definidas pela W3C como absmiddle, absbottom, texttop e baseline.

Hspace e Vspace

Ao utilizarmos os alinhamentos left e right do atributo align o texto irá ficar junto a imagem, muitas vezes proporcionando um aspecto não muito amigável. Hspace e Vspace servirão para definir um espaço entre o texto e a imagem.

Hspace define o espaçamento horizontal e Vspace define o espaçamento vertical.

Usemap

Imagens também podem ser mapeadas. Ou seja, podem ter trechos definidos para executar alguma coisa, como por exemplo, um link ou script. O atributo usemap deve conter o nome da tag MAP que define a área a ser mapeada.

...
<IMG SRC="computador.jpg" USEMAP="#Map" />
<MAP NAME="Map"><!-- Aqui vem as definições da área mapeada --></MAP>
...

Links em Imagens

Também é possível usar imagens em links, porém há um detalhe a ser levado em conta.

Quando uma imagem for definida como hyperlink uma borda aparecerá ao redor dela. Para controlar a aparição dessa borda (ou, simplesmente, sumir com ela), podemos utilizar o atributo border.

Se definirmos o atributo border como 0, nenhuma borda irá aparecer.

Abaixo está um exemplo de como podemos definir um link para um site fictício usando a imagem dos exemplos acima.

...
<A HREF="http://www.lojafalsadepcs.com.br/">
<IMG SRC="computador.jpg" WIDTH="300" HEIGHT="300" ALT="Loja de Computadores"BORDER="0" />
</A>
...

Fonte: w3.org
Características - tag IMG (objeto - imagem)
uso	HTML 4.01	<IMG SRC="..." ALT="...">
	XHTML	<IMG SRC="..." ALT="..." />
	HTML 5	<IMG SRC="..." ALT="...">
Formatação Padrão	visualização	inline
Atributos Aceitos	id, class, alt, lang, dir, title, style, ismap, usemap, align, width, height, border, hspace, vspace
Eventos Possíveis	onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Listas

Um efeito muito utilizado em qualquer documento é a caracterização de listas.

Em HTML/XHTML, é possível utilizar dois tipos de listas as listas ordenadas e as não ordenadas.

Listas Não Ordenadas

Listas não ordenadas são determinadas pela tag UL.

Listas não ordenadas são marcadas com caracteres simbólicos como círculos, quadrados e discos.

O formato da lista é definido pelo atributo TYPE que pode ser:

circle: círculo;
square: quadrado;
disc: disco.

Todo item de uma lista fica enclausurado na tag LI.

...
<UL TYPE="circle">
<LI>Lista com círculo</LI>
</UL>
<UL TYPE="square">
<LI>Lista com quadrado</LI>
</UL>
<UL TYPE="disc">
<LI>Lista com disco</LI>
</UL>
...

Lista com círculo

Lista com quadrado

Lista com disco

Listas Ordenadas

Listas ordenadas são determinadas pela tag OL.

Listas ordenadas são marcadas com caracteres como números, letras e algarismos romanos.

O formato da lista é definido pelo atributo TYPE que pode ser:1AaIi

1: lista numerada;
A: lista com letras maiúsculas;
a: lista com letras minúsculas;
I: lista com algarismos romanos usando caracteres maiúsculos
i: lista com algarismos romanos usando caracteres minúsculos

Assim como a lista não ordenada, todo item da lista fica enclausurado na tag LI. A diferença é que não precisamos nos preocupar com a sequência, pois isso o próprio browser se encarrega de cuidar.

Tanto a tag OL quanto a tag UL são aninháveis, ou seja, uma pode existir dentro da outra. Nesses casos conseguimos um efeito em cascata com vários ítens. Veja o exemplo abaixo:

...
<OL type="I">
<LI>Seção I</LI>
<OL type="A">
<LI>tópico A</LI>
<UL TYPE="disc">
<LI>Ítem 1</LI>
<LI>Ítem 2</LI>
<UL TYPE="square">
<LI>Sub-ítem 1</LI>
<LI>Sub-ítem 2</LI>
</UL>
<LI>Ítem 3</LI>
</UL>
<LI>tópico B</LI>
<UL TYPE="disc">
<LI>Ítem 1</LI>
<UL>
<LI>Sub-ítem 1</LI>
<LI>Sub-ítem 2</LI>
<LI>Sub-ítem 3</LI>
</UL>
</UL>
</OL>
</OL>
...

O que resultaria em:

Seção I

tópico A

Ítem 1
Ítem 2

Sub-ítem 1
Sub-ítem 2

Ítem 3

tópico B

Ítem 1

Sub-ítem 1
Sub-ítem 2
Sub-ítem 3

Características - tag UL (texto - lista não ordenada)
uso	HTML 4.01	<UL><LI>...</LI></UL>
	XHTML	<UL><LI>...</LI></UL>
	HTML 5	<UL><LI>...</LI></UL>
Formatação Padrão	estilo de marcação	disco
	compensação à esquerda	40px
	visualização	bloco
Atributos Aceitos	id, class, lang , dir, title, style
Eventos Possíveis	onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Fonte: w3.org
Características - tag OL (texto - lista ordenada)
uso	HTML 4.01	<OL><LI>...</LI></OL>
	XHTML	<OL><LI>...</LI></OL>
	HTML 5	<OL><LI>...</LI></OL>
Formatação Padrão	estilo de marcação	decimal
	compensação à esquerda	40px
	visualização	bloco
Atributos Aceitos	id, class, lang , dir, title, style
Eventos Possíveis	onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Autor: Denys William Xavier
Este artigo está sob Licença Creative Commons.

‹ HWTL

Tabelas

Um item muito utilizado em páginas HTML/XHTML é a tabela.

Tabelas são compostas por três tags diferentes, cada uma controlando uma função diferente.

A tag principal é a TABLE. Nesta tag serão definidos os comportamentos de nossa tabela como alinhamento, largura, espaçamento, etc.

Dentro da tabela deve haver pelo menos uma linha que é definida pela tag TR.

Dentro de toda linha deve haver pelo menos uma célula que é definida pela tag TD. Se mais de uma célula for inserida dentro de uma linha, então, será criado uma coluna para separá-las. O que estiver escrito dentro da tag que controla a célula será apresentado no browser.

Abaixo está uma tabela padrão com apenas uma linha e uma célula.

...
<TABLE>
<TR>
<TD>Célula 1</TD>
</TR>
</TABLE>
...

O que demonstra o seguinte:

Célula 1

Agora, uma tabela com duas linhas e duas células.

...
<TABLE>
<TR>
<TD>Célula 1</TD>
<TD>Célula 2</TD>
</TR>
<TR>
<TD>Célula 3</TD>
<TD>Célula 4</TD>
</TR>
</TABLE>
...

Célula 1	Célula 2
Célula 3	Célula 4

Modificando Aspecto da Tabela

Existem atributos em uma tabela que podem ser modificados que afetam diretamente sua aparência.

WIDTH: Controla a largura da tabela como um todo. Tabelas são renderizadas, por padrão, a se auto-ajustarem ao conteúdo das células e ao tamanho do elemento ao qual está aninhada. O atributo WIDTH da tag TABLE aceita dois tipos de valores:

Fixo: um número inteiro que repesenta a largura fixa em pixels.
Porcentagem: um número inteiro seguido de porcentagem que representa a porção do elemento que deve ser preenchida pela tabela. (Ex.: WIDTH="50%" faria com que a tabela ocupasse metade do elemento ao qual está aninhada)

CELLSPACING: Determina o espaçamento entre uma célula e outra.
CELLPADDING: Configura o espaçamento interno da célula. Por padrão, o valor de CELLPADDING é 0, ou seja, as bordas da célula estão sempre justas no conteúdo.
BORDER: Modifica a largura da borda. Se o atributo BORDER for definido como 0, então, nenhuma borda será apresentada.
ALIGN: É um atributo possível, porém, está definido como antiquado (deprecated) pelo W3C. Possui apenas três opções:

left:
center
right

Veja os exemplos abaixo:

...
<TABLE WIDTH="400" CELLSPACING="10" CELLPADDING="0" BORDER="4">
<TR>
<TD>Célula 1</TD>
<TD>Célula 2</TD>
</TR>
<TR>
<TD>Célula 1</TD>
<TD>Célula 2</TD>
</TR>
</TABLE>
...

Mostra a seguinte tabela:

Célula 1	Célula 2
Célula 1	Célula 2

Modificando um pouco os atributos, temos uma nova tabela:

...
<TABLE WIDTH="200" CELLSPACING="2" CELLPADDING="5" BORDER="1">
<TR>
<TD>Célula 1</TD>
<TD>Célula 2</TD>
</TR>
<TR>
<TD>Célula 1</TD>
<TD>Célula 2</TD>
</TR>
</TABLE>
...

O que mostra a seguinte tabela:

Célula 1	Célula 2
Célula 1	Célula 2

Resumo (summary)

Um recurso recomendado pelo W3C, porém pouquíssimo utilizado, é o resumo. O resumo é definido pelo atributoSUMMARY que pertence a tag TABLE.

Resumos são utilizados principalmente para leitores virtuais ou sintetizadores que são utilizados para converter textos em som.

Como demonstração, usaremos uma tabela estatística retirada do site do IBGE sobre População residente - Brasil - 1997-2003.

...
<TABLE WIDTH="250" CELLSPACING="0" CELLPADDING="2" BORDER="1"
SUMMARY="Esta tabela demonstra a população residente no Brasil entre 1997 e 2003">
<TR>
<TD>Ano</TD>
<TD>População residente</TD>
</TR>
<TR>
<TD>1997</TD>
<TD>163 470 521</TD>
</TR>
<TR>
<TD>1998</TD>
<TD>165 687 517</TD>
</TR>
<TR>
<TD>1999</TD>
<TD>167 909 738</TD>
</TR>
<TR>
<TD>2000</TD>
<TD>169 799 170</TD>
</TR>
<TR>
<TD>2001</TD>
<TD>172 385 826</TD>
</TR>
<TR>
<TD>2002</TD>
<TD>174 632 960</TD>
</TR>
<TR>
<TD>2003</TD>
<TD>176 876 443</TD>
</TR>
</TABLE>
...

Em um browser gráfico apareceria assim:

Ano	População residente
1997	163 470 521
1998	165 687 517
1999	167 909 738
2000	169 799 170
2001	172 385 826
2002	174 632 960
2003	176 876 443

Mas um sintetizador ou leitor digital converteria a tabela em forma sonora da seguinte forma:

"Esta tabela demonstra a população residente no Brasil entre 1997 e 2003 - Ano - População residente - 1997 - 163 470 521 - 1998 - 165 687 517 - 1999 - 167 909 738 - 2000 - 169 799 170 - 2001 - 172 385 826 - 2002 - 174 632 960 - 2003 - 176 876 443"

Fonte: w3.org
Características - tag TABLE (tabela)
uso	HTML 4.01	<TABLE><TR><TD> ... </TD></TR></TABLE>
	XHTML	<TABLE><TR><TD> ... </TD></TR></TABLE>
	HTML 5	<TABLE><TR><TD> ... </TD></TR></TABLE>
Formatação Padrão	fonte	Serif, 16px
	cor	#000000 (Preto)
	cor de fundo	transparente
	largura	ajustado ao conteúdo
	altura	ajustado ao conteúdo
	borda	nenhuma
	visualização	tabela
Atributos Aceitos	id, class, lang, dir, title, style, bgcolor, frame, rules, border, cellspacing, cellpadding
Eventos Possíveis	onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Autor: Denys William Xavier
Este artigo está sob Licença Creative Commons

Enquete

Programadores

segunda-feira, 22 de dezembro de 2014

C/C++/JAVA/ALGORITIMOS/HTML

Tutorial completo

Algorítmo

Tutorial completo

Java

Tutorial completo

JavaScript

Tutorial completo

HTML/XHTML

Tutorial completo

HTML/XHTML 2 Part

Sobrescrito e Subscrito

Hyperlink ou link

Criação de Âncoras

Ligação para âncoras

Ligação entre páginas

Direcionar link

Caminhos e URL

Caminhos relativos à raiz

Caminhos relativos ao documento

Páginas com Imagens

Src

Width e Height

Alt

Align

Hspace e Vspace

Usemap

Links em Imagens

Listas

Listas Não Ordenadas

Listas Ordenadas

Tabelas

Modificando Aspecto da Tabela

Resumo (summary)

Quem sou eu