Entendendo Alguns Comandos HTML Básicos
Entendendo Alguns Comandos HTML Básicos
A tag <p> representa a única forma mudança de parágrafo numa página HTML.
Equivale a pressionar a tecla Enter num edito de texto. Observe bem! Não adianta
pressionar a tecla Enter! Isso não produzirá nenhum resultado na página HTML!
A tag <br> quebra a linha sem iniciar um novo parágrafo. É como se o texto chegasse
no final da tela e continuasse na linha de baixo. Ou seja é diferente da tag <p>. Faça um
texte usando essas duas tags que você perceberá uma sutil diferença entre elas. Essa tag
não precisa ser fechada.
A tag <hr> pode ser usada para inserir linhas em branco na Home Page. Essa tag não
precisa ser fechada.
Existem seis tipos de fonte na seguinte ordem: <h1>, <h2>, <h3>, <h4>, <h5> e <h6>.
Vejamos possíveis resultados:
links
Ao invés de um texto, podemos indicar uma imagem para ser usada como link:
<a rhef="página_tal.htm"><img border=off src="imagem.gif">
É muito útil possibilitar aos visitantes de nossas páginas entrar contato conosco através
de email:
<p><a href="mailto:[email protected]">
Esse código gera um link que, ao ser clicado, abrirá o programa de e-mail padrão do
computador, com o endereço especificado.
Como dissemos, também podemos inserir um link que remeterá o usuário para outro
ponto da mesma página. para isso é necessário informar ao interpretador o local
desejado, através de uma "âncora":
<A NAME="nome da ancora">Ao ser clicado, o link para a mesma página vém para
cá...</A>
Importante notar que HTML não é case sensitive. Quer dizer, não diferencia
maiúsculas de minúsculas. Então tanto faz escrever <a href> como <A HREF>, </a>
como </A>, <p> como <P> e assim por diante. Entenda bem: no nosso estudo, apenas
HTML não é case sensitive, pois PHP, como veremos posteriormente, é case sensitive.
atributos de texto
Tente decifrar os comandos usados na formatação de uma página com o texto acima:
<HTML>
<HEAD>
<TITLE>Conhecendo atributos de fonte</TITLE>
</HEAD>
<BODY>
<P>texto,
<I><FONT SIZE=4>texto,</FONT></I>
<FONT SIZE=4><B>texto,</B>
<B><I>texto,</I></B></FONT>
<FONT SIZE=5><FONT COLOR="#0000ff">texto,</FONT></FONT>
<FONT SIZE=5 STYLE="font-size: 20pt"><FONT
COLOR="#ff0000">texto,</FONT></FONT>
<FONT SIZE=6 STYLE="font-size: 26pt">texto,</FONT></FONT>
<B><U><I><FONT SIZE=7 STYLE="font-size: 40pt"><FONT COLOR="#008000">
texto.
</FONT></FONT></I></U></B>
</P>
</BODY>
</HTML>
1 - itálico: <<I>texto,</I>;
2 - negrito: <<B>texto,</B>;
3 - negrito e itálico: <B><I>texto,</I></B>;
4 - sublinhado: <U>texto,</U>;
5 - negrito, itálico e sublinhado: <B><U><I>texto</I></U></B>;
6 - os tamanhos e as cores das fontes foram determinados pelas tags:
<FONT SIZE=7 STYLE="font-size: 40pt"><FONT
COLOR="#008000">texto.</FONT></FONT>;
7 - Poderíamos mudar a fonte: <FONT FACE="Courier New, monospace">texto</FONT>.
Como vocês puderam perceber, a tag </FONT> é muito versátil, permitindo-nos dar às
fontes praticamente qualquer formatação. Eis os atributos para a tag </FONT>:
Exemplo:
<FONT face="Lucida Handwriting" SIZE=7 COLOR="#008000">mais sobre
fontes</FONT>
cores
<SCRIPT LANGUAGE="JavaScript">
<!--
Uma vez obtida a cor, não se esqueça de colocar o símbolo # antes de sua
representação hexadecimal. Exemplo:
<BODY text="#0000FF" link="#00FFFF" bgcolor="#FFFFFF" alink="#FF6600"
vlink="#FFFF66">
imagens
Podemos colocar imagens com extensão ".gif" ou ".jpg" em nossos documentos. Eis
algumas formas:
1 - Para inserir uma imagem no local onde o código for colocado: <img
src="imagem.jpg">
Podemos definir o tipo de alinhamento que desejamos para as imagens. Para isso
usamos o atributo ALIGN :
<IMG SRC="floppy_disk.gif" ALIGN="top">O texto aparece ao lado, no topo da
imagem<p>
HTML aceita listas que podem ser numeradas, não numeradas e de definição, sendo possível,
inclusive, incluir sub-itens nas listas. Podemos usar as tags <ul> fechadas com </ul> para iniciar
listas não numeradas, marcadas apenas com pontos gráficos. Por exemplo,
produzirá:
• Primeiro item
• Segundo item
• Terceiro item
Essa tag também pode ser usada para criar sub-itens na lista:
<h3>Lista não numerada com sub-itens</h3>
<ul>
<li> Primeiro item
<li> Segundo item
<ul>
<li> Primeiro sub-item
<li> Segundo sub-item
<ul>
<li> Primeiro item de sub-item
<li> Segundo item de sub-item
</ul></ul>
<li> Terceiro item
</ul>
Eis o resultado:
• Primeiro item
• Segundo item
o Primeiro sub-item
o Segundo sub-item
Primeiro item de sub-item
Segundo item de sub-item
• Terceiro item
Quando desejamos tabular um parágrafo à direita, podemos usar uma lista de definição. Nas
listas de definição, podemos usar as seguintes tags: <dl> para iniciar e </dl> para fechar a lista;
<dt> para abrir e </dt> para fechar um título; e <dd> para iniciar e </dd> para encerrar um texto.
Obs. Essas tags devem ser usadas em conjunto:
<dl>
<dt>Esse é um título da lista</dt>
<dd>Eis aqui um primeiro texto</dd>
<dt>Eis outro Título</dt>
<dd>Novo texto para a lista</dd>
</dl>
resultado:
resultado:
Lista numerada
Salada de listas
Primeiro item da lista
Primeiro item da lista de definição
tabelas
Podemos usar tabelas em nossos documentos HTML. As tabelas são muito úteis
quando queremos organizar nossos textos em linhas e colunas, ou desejamos dar um
toque diferente no visual da página. As tabelas podem abrigar textos, imagens ou
outras tabelas. Eis as tags usadas na composição das tabelas:
Notas:
1º. a diferença básica entre <th> e <td> é que o texto de <th> é apresentado em negrito e centralizado;
2º. As tags de fechamento </tr>, </th> e <td> não são de uso obrigatório, mas ajudam na
compreensão da estrutura da tabela.
Podemos manipular bastante a aparência das tabelas, através de alguns atributos:
align - alinhamento da tabela: left, right ou center;
width - largura da tabela, em pixels ouu em porcentagem em relação ao tamanho da
janela;
height - altura da tabela, em pixels ou em porcentagem em relação ao tamanho da
janela;
border - espessura da borda da tabela;
bgcolor - cor do fundo da tabela;<
bordercolor - cor das bordas da tabela das bordas daas células;
bordercolorlight - cor das bordas esquerda e superior da tabela e das bordas inferiores
das células;
bordercolordark - cor das bordas direita e inferior da ttabela e das bordas superiores
das células;
rowspan - quantia de linhas que a célula pode ocupar;
colspan - quantia de colunas que a tabela pode oocupar;
Abaixo colocamos o código, facilmente assimilável, de uma tabela abordando o tema:
Perca alguns minutos comparando o código acima com o resultado produzido! Depois
disso, apenas delete o atributo border do código proposto e veja o resultado: uma tabela
sem quaisquer bordas!
O código deve ficar assim:
<TABLE align = center width="90%" bordercolorlight = 3300ff bordercolordark =
ff00CC bgcolor = ffffff>
Note que o interpretador simplesmente ignorará os atributos que especificam cores para
as bordas da tabela!
Veja agora um modo de escrever ao lado de uma tabela:
<table align="right" width="80%" height="50%" border="3" bgcolor="#ffff00">
<tr>
<th>Linha 1 Coluna 1</th>
<th>Linha 1 Coluna 2</th>
<tr>
<td>Linha 2 Coluna 1</td>
<td>Linha 2 Coluna 2</td>
</table>
Observe!!!<p>
escrevendo<br>
ao<br>
lado<br>
dessa<br>
tabela<br>
aí<br>
à<br>
direita!!!!!!!<br>
!!!!!!!!!!!!!!
Formulários HTML
Os formulários constituem-se numa matéria de extrema importância no HTML, uma
vez que são responsáveis pela interação entre um usuário e o servidor, possibilitando a
troca de dados ou informações.
Quem ainda não viu uma página com campos para entrada de texto, botões de
múltiplas escolhas ou menu de opções em listbox ou combobox?
Um formulario é iniciado com <form> e fechado com </form>. Internamente a essas
marcações especificamos o tipo de campo desejado para entrada de dados:
<input> : text (linha única para texto), password, checkbox, radio, submit (button) e
reset (button);
<select> : listbox, combobox;
<textarea> : campo de texto de múltiplas linhas.
1º. text:
<form method="post" action="teste.php">
Digite o nome de sua cidade:
<input type="text" name="Cidades" value=Araçatuba size="15" maxlenght="15">
</form>
A diferença entre text e password é que, sendo este último campo apropriado para
entrada de senhas, os caracteres são apresentados como asteriscos (*). Os parâmetros
value, size e maxlenght são opcionais.
3º. Um checkbox é um campo de múltipla escolha onde o usuário pode escolher mais
de uma opção:
Que outro curso você quer ver em nossas páginas:<p>
<input type="checkbox" name="preferencia" value="cbuilder" checked>C++Builder
<input type="checkbox" name="preferencia" value="php">PHP<p>
<input type="checkbox" name="preferencia" value="delphi">Delphi
<input type="checkbox" name="preferencia" value="vb">Visual Basic<p>
<input type="checkbox" name="preferencia" value="asm">Assembly
<input type="checkbox" name="preferencia" value="java">Java
4º. Radio é mais um formulário de múltipla escolha, mas nesse caso o usuário poderá
escolher apenas uma opção. Os parâmetros seguem o mesmo roteiro do checkbox:
Que outro curso você quer ver em nossas páginas:<p>
<input type="radio" name="preferencia" value="cbuilder" checked>C++Builder
<input type="radio" name="preferencia" value="php">PHP<p>
<input type="radio" name="preferencia" value="delphi">Delphi
<input type="radio" name="preferencia" value="vb">Visual Basic<p>
<input type="radio" name="preferencia" value="asm">Assembly
<input type="radio" name="preferencia" value="java">Java
5º. Um botão reset pode ser usado para restaurar o valor padrão de todos os campos de
um formulário:
<input type="reset">
São opcionais os parâmetro value que especifica o texto a ser exibido no botão e o
parâmetro name que determinará a transmissão do valor contido em value, permitindo a
colocação de vários botões.
Agora vamos conhecer os campos que podem ser construídos com <select>:
1º. Listbox ;
2º. Combobox;
parâmetros:
Listbox e Combobox podem ser considerados campos irmãos. A diferença básica entre
eles consiste na existência ou não do parâmetro size (que especifica o número de linha
exibidas). Se inserirmos esse parâmetro, estaremos construindo um listibox; se não
especificarmos, um combobox.
Um listbox:
Que outro curso você quer ver em nossas páginas:<p>
<select name="cursos" size = "10" multiple>
<option value="bcb">C++Builder</option>
<option value="php">PHP</option>
<option value="delphi">Delphi</option>
<option value="vb">Visual Vasic</option>
<option value="asm">Assembly</option>
<option value="java">Java</option>
</select>
Um Combobox:
Que outro curso você quer ver em nossas páginas:<p>
<select name="cursos"><> <option value="bcb">C++Builder</option>
<option value="php">PHP</option>
<option value="delphi">Delphi</option>
<option value="vb">Visual Vasic</option>
<option value="asm">Assembly</option>
<option value="java">Java</option>
</select>
<head><title>Conhecendo frames</title></head>
</FRAMESET>
<BODY>
</BODY>
</HTML>
</FRAMESET>
</FRAMESET>
<BODY>
</BODY>
</HTML>
iframe
Existe outra maneira mais elegante de inserir outras páginas dentro de nossos
documentos HTML, através do comando <iframe>. Nesse caso, devemos especificar o
tamanho do espaço que deverá ser aberto no documento para apresentação da outra
página. Abaixo um exemplo retirado do site DicasBCB, onde <iframe> foi colocado de
forma a abrir a página centralizada:
<CENTER>
<iframe src="http://www.dicasbcb.com.br/Forum/last_posts.php" width=740
height=255></iframe>
</CENTER>
Se você rodar esse exemplo, verá o fórum do site citado abrindo-se no meio de sua
página HTML.
Formatando sinais especiais
TAMBÉM = TAMBÉM