quinta-feira, fevereiro 09, 2017

TPI 1 - HTML - Aula 11 - Formulários

TPI 1 - HTML - Aula 11 - Formulários



Os formulários permite que possamos interagir com o visitante, solicitando nome, e-mail e outras informações que você acredite ser necessário para o seu site.
Os formulários são dividos em 2 partes. Uma parte onde descrevemos o código fonte em HTML (os campos, identificadores, botões, textos, etc) e um script ou aplicativo que possa processar as informações enviadas, como por exemplo um script em CGI.
Sem um script você apenas consegue enviar as informações digitada para seu e-mail e não guardá-las em um banco de dados, ou outra ação mais complexa. A tag principal para iniciar um Formulário é a TAG FORM.
Esta tag tem vários parâmetros, vamos ver uma sintaxe completa desta TAG.
<form action="mailto:seumail@provedor?subject=assunto" method="post" enctype="text/plain" name="nome_do_formulario">
</form> Vamos entender esta TAG :
FORM
Indica que estamos iniciando um Formulário
ACTION
Indica a ação que formulário terá, neste caso, o formulário terá os dados enviados para seu e-mail. Pode ser indicado também um servidor e o programa CGI que irá processar o formulário.
SUBJECT
É o assunto do e-mail.
METHOD
É o metodo da troca de dados; qual método o servidor usará para recerber o formulário. Os métodos podem ser POST ou GET, neste caso é POST, porque estamos enviando informação para o provedor. Já o método GET, faz com que o conteúdo do formulário seja anexado ao endereço da URL.
ENCTYPE
É como o formulário será enviado, aqui os dados serão formatados como texto puro.
CAMPOS DO FORMULÁRIO
TIPO TEXTO
<INPUT>

Define um campo de entrada em que o usuário entra com as informações do formulário. Cada campo de um formulário atribui o seu conteúdo para uma variável, que possui nome e tipo específicos. Veja como seria :
&lt;FORM&gt; DIGITE SEU NOME &lt;input type="text" name="var_nome" size="35" maxlength="30" value="qq coisa"&gt; &lt;/FORM&gt;
TYPE="TEXT"
type = tipo - text = texto, ou seja o tipo de informação que aquele local receberá é do tipo texto.
NAME="VAR_NOME"
name = nome - var_nome é a variável que irá guardar o que for digitado naquele campo.
SIZE="35"
tamanho do objeto será de 35 pixels
MAXLENGTH="30"
comprimento máximo de caracteres será de 30.
VALUE = "QUALQUER COISA"
value = valor, ou seja, o campo já vem preenchido com o que vier neste parâmetro, neste caso virá escrito : qq coisa. Para alterar, basta selecionar o texto e escrever outro. Só utilize o value caso queira que um campo já venha preenchido com um valor, por exemplo : estado = SP, ai sim vale a pena.
Veja como ficaria :
DIGITE SEU NOME 
TIPO SENHA
E se você quiser que a pessoa entre com uma senha ? Pode usar o type="password" Este comando é idêntico ao comando INPUT TEXT. Sua única diferença é que, no lugar dos caracteres digitados, aparece um asterisco.
Vamos ver como seria :
&lt;FORM&gt; DIGITE A SENHA &lt;input type="password" name="var_senha" size="10" maxlength="6"&gt; &lt;/FORM&gt;
TYPE="PASSWORD"
type = tipo - password = senha, ou seja o tipo de informação que aquele local receberá é do tipo senha, exibirá asterisco ao invés do caracter digitado.
NAME="VAR_SENHA"
name = nome - var_senha é a variável que irá guardar o que for digitado naquele campo.
SIZE="35"
tamanho do objeto será de 10 pixels.
MAXLENGTH="6"
comprimento máximo de caracteres será de 6.
Veja como ficaria :
DIGITE A SENHA 
BOTÃO DE RADIO
E para fazer uma seleção exclusiva de uma lista de opções ? Precisamos inserir um "botão de rádio", que são associados a uma única variável. O conteúdo de um dos campos é atribuído à variável. Apenas um campo pode ser marcado, vamos ver um exemplo :
&lt;FORM&gt; Digite seu nome: &lt;input type = "text" name = "var_nome"&gt; Estado civil: &lt;input type= "radio" name="civil" value = "solteiro" checked&gt; Solteiro &lt;input type= "radio" name="civil" value = "casado"&gt; Casado &lt;input type= "radio" name="civil" value = "divorciado"&gt; Divorciado &lt;input type= "radio" name="civil" value = "viúvo"&gt; Viúvo&lt;br&gt; &lt;/FORM&gt;
Observe que todas as variáveis receberam o mesmo nome: CIVIL. Veja também que o único comando que tem o parâmetro CHECKED é o que contém a opção de solteiro,ou seja, esta opção já vem marcada como padrão.
Estas linhas reproduzirão :
Digite seu nome: 
Estado civil:  Solteiro  Casado  Divorciado  Viúvo
OS NOMES DAS OPÇÕES OBRIGATÓRIAMENTE DEVEM SER IGUAIS, SE FOREM DIFERENTES, ESTE POSSIBILITARÁ MARCAR VÁRIAS OPÇÕES !!!
CHECKBOX
Para poder selecionar várias opções, usamos o CHECKBOX. Ele se parece como Radio Button, mas tem uma diferença significativa. Nele mais de um campo associado a uma variável pode ser selecionado. Veja o exemplo:
&lt;FORM&gt; Digite seu nome: &lt;input type = "text" name="var_nome"&gt; Estado civil: &lt;input type="radio" name="civil" value = "solteiro" cheked&gt; Solteiro &lt;input type="radio" name="civil" value = "casado"&gt; Casado&lt; &lt;input type="radio" name="civil" value = "divorciado"&gt; Divorciado &lt;input type="radio" name="civil" value = "viúvo"&gt; Viúvo Documentos : &lt;INPUT TYPE="checkbox" name="teste" value="1"&gt; Carteira de Trabalho &lt;INPUT TYPE="checkbox" name="teste" value="2"&gt; CIC &lt;INPUT TYPE="checkbox" name="teste" value= 3"&gt; Carteira de Identidade &lt;/FORM&gt;
Veja o que isso reproduz :
Digite seu nome: Estado civil:
 Solteiro  Casado  Divorciado  Viúvo
Documentos :
 Carteira de Trabalho
 CIC
 Carteira de Identidade
LISTA DE OPÇÕES
o comando <SELECT> ... </SELECT> define e exibe uma lista de itens que podem ser selecionados pelo usuário.

Cargo pretendido: 
&lt;SELECT NAME="CARGO"&gt; &lt;OPTION&gt;ANALISTA SÊNIOR &lt;OPTION&gt; PROGRAMADOR CLIPPER &lt;OPTION&gt;PROGRAMADOR HTML &lt;OPTION&gt;OPERADOR &lt;OPTION&gt;USUARIO &lt;/SELECT&gt;
Veja como ficaria :

Fazer uma opção já vir selecionada :
Cargo pretendido:
&lt;SELECT NAME="CARGO"&gt; &lt;OPTION&gt;ANALISTA SÊNIOR &lt;OPTION SELECTED&gt; PROGRAMADOR CLIPPER &lt;OPTION&gt;PROGRAMADOR HTML &lt;OPTION&gt;OPERADOR &lt;OPTION&gt;USUARIO &lt;/SELECT&gt;
Reproduz:

Mostrar mais de uma linha.
Quando o parâmetro SIZE é omitido, a lista somente é aberta se a seta for pressionada. Se este parâmetro for especificado, ela é exibida aberta, mostrando a quantidade de linhas especificadas pelo parâmetro, independente da quantidade de itens da lista. 
&lt;SELECT NAME= "CARGO" size="3"&gt; &lt;OPTION&gt;ANALISTA SÊNIOR &lt;OPTION SELECTED&gt; PROGRAMADOR CLIPPER &lt;OPTION&gt;PROGRAMADOR HTML &lt;OPTION&gt;OPERADOR &lt;OPTION&gt;USUARIO &lt;/SELECT&gt;
Veja o resultado :

Selecionar mais de uma opção
&lt;SELECT NAME = "TESTE" SIZE="7" MULTIPLE&gt;&lt;br&gt; &lt;OPTION&gt;item 1&lt;br&gt; &lt;OPTION&gt;item 2&lt;br&gt; &lt;OPTION&gt;item 3&lt;br&gt; &lt;OPTION&gt;item 4&lt;br&gt; &lt;OPTION&gt;item 5&lt;br&gt; &lt;OPTION&gt;item 6&lt;br&gt; &lt;OPTION&gt;item 7&lt;br&gt; &lt;OPTION&gt;item 8&lt;br&gt; &lt;OPTION&gt;item 9&lt;br&gt; &lt;OPTION&gt;item 10&lt;br&gt; &lt;OPTION&gt;item 11&lt;br&gt; &lt;OPTION&gt;item 12&lt;br&gt; &lt;OPTION&gt;item 13&lt;br&gt; &lt;OPTION&gt;item 14&lt;br&gt; &lt;OPTION&gt;item 15&lt;br&gt; &lt;/SELECT&gt;
O Resultado será :

ÁREA DE TEXTO
Define uma caixa de digitaçao, onde o usuário pode digitar livremente um texto.
&lt;form&gt; digite seus comentários:&lt;br&gt; &lt;TEXTAREA NAME="comentarios" ROWS="7" COLS="50"&gt; &lt;/TEXTAREA&gt;
Abaixo, o resultado :
digite seus comentários:

ROWS
Número de linhas que terá a área d e texto.
COLS
Número de colunas que terá a área de texto.
ENVIANDO DADOS
O Botão SUBMIT é responsável por enviar os dados do formulário para o e-mail que está no parâmetro ACTION da TAG FORM.


 ou
LIMPANDO FORMULÁRIO
O Botão RESET limpa todo o formulário, voltando os valores aos padrões definidos inicialmente. 

TPI 1 - HTML - Aula 10 - Tabelas

TPI 1 - HTML - Aula 10 - Tabelas


Para fazer uma tabela as principais TAGS são TABLE, TR, TH e TD.
TABLE
Tabela é a principal para inserir a tabela, seus parâmetros são :
  • bgcolor="cor" = define uma cor de fundo para a tabela
  • background="arquivo.ext" - define uma figura de fundo para tabela
  • bordercolor="cor" - define uma cor para a borda
  • align="alinhament0" - define alinhamento para tabela (center, right ou left que é padrão).
  • bordercolordark="cor" - define uma cor para os lados mais escuros da tabela
  • bordercolorlight="cor" - define uma cor para os lados para claros da tabela
  • cellpadding="n" - define o espaçamento do texto e a borda da tabela
  • cellspacing="n" - define o espaçamento entre as células.
  • width="n%" define o tamanho da tabela em pixels ou porcentagem
TR
Table Row - Linha da Tabela, para cada linha nova é necessário abrir uma linha e colocar dentro dela todas as células.
  • BGCOLOR="cor" - define uma cor de fundo para a linha
TH
Table Head - Cabeçalho da Tabela - é usado para colocar título nas colunas, o texto já vem em negrito e centralizado.
  • BGCOLOR="cor" - define uma cor de fundo para a célula de cabeçalho
TD
Table Data - Dados da Tabela - é a tag que usamos para inserir os dados da tabela.
  • BGCOLOR="cor" - define uma cor de fundo para a célula.
  • BACKGROUND="arquivo.ext" define uma figura de fundo para célula.
  • COLSPAN="n" define a quantidade de colunas que devem ser mescladas.
  • ROWSPAN="n" define a quantidade de linhas que devem ser mescladas.
Veja como ficaria uma tabela simples, com borda espessura 2, alinhamento centralizado :
&lt;table border="2" align="center" width="60%"&gt; &lt;tr&gt; &lt;th bgcolor="red" rowspan="6"&gt;A&lt;br&gt;T&lt;br&gt;E&lt;br&gt;N&lt;br&gt;Ç&lt;br&gt;Ã&lt;br&gt;O&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th colspan="2"&gt; TABELA DE MATÉRIAS &lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt; PROFESSOR(A) &lt;/th&gt; &lt;th&gt; MATÉRIA &lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; Valéria &lt;/td&gt; &lt;td&gt; O.S.A. &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; Nelson &lt;/td&gt; &lt;td&gt; P.R.C. &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; Luiz &lt;/td&gt; &lt;td&gt; T.B.D.&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;
A
T
E
N
Ç
Ã
O
TABELA DE MATÉRIAS
PROFESSOR(A)MATÉRIA
ValériaO.S.A.
NelsonP.R.C.
LuizT.B.D.
TABELA DE ALUNOS
E
T
EM
A
U
Á
NOMEIDADE
Valéria20
Adallirio18
Renato22
PARÂMETRO FRAME NAS TABELAS
PARÂMETRORESULTADO
voidretira todas as bordas da tabela
aboveexibe apenas a borda do lado superior
hsidesremove as bordas laterais
vsidesexibe apenas as bordas laterais
lhsexibe apenas a borda esquerda
rhsexibe apenas a borda direita
boxexibe borda em todos os cantos
borderexibe as quatro bordas

TPI 1 - HTML - Aula 9 - IMAGENS

TPI 1 - HTML - Aula 9 - IMAGENS


Podemos inserir imagens no corpo de nossa página através da TAG IMG, esta TAG não tem fechamento.
A sintaxe do comando é
&lt;img src="arquivo.ext" width="numero" height="numero" alt="texto" vspace="numero" hspace="numero" border="numero" align="alinhamento" lowsrc="arquivo.ext"&gt; onde :
IMG = IMAGE
Imagem
SRC = SOURCE
Origem o nome e se necessário o caminho do arquivo da imagem.
WIDTH -> LARGURA
Define uma largura para a imagem, mas aqui o tamanho do arquivo não é reduzido, posso dizer que seria somente a visualização em menor ou maior escola como um zoom.
HEIGHT -> ALTURA
Define uma altura para a imagem, mas aqui o tamanho do arquivo não é reduzido, posso dizer que seria somente a visualização em menor ou maior escola como um zoom.
CUIDADO : Alterar apenas altura ou largura da figura pode deixá-la desproporcional.
ALT = TEXTO ALTERNATIVO
exibe o texto no espaço antes de carregar a imagem e ao apontar o mouse ele exibe o texto, como dica.
VSPACE = VERTICAL SPACE
Margem nas partes superior e inferior da imagem
HSPACE = HORIZONTAL SPACE
Margem nas partes esquerda e direita da imagem
BORDER = BORDAS
exibe ou não uma borda ao redor da imagem.
ALIGN = ALINHAMENTO
Define o alinhamento da imagem e de seu texto adjacente. Podem ser top - bottom - left - right - middle
LOWSRC = LOW SOURCE
Origem de definção mais baixa de uma figura, pode ser até uma em preto e branco. É usado se a figura principal é de alta definição, e enquanto a página carrega a figura principal, a especificada neste parâmetro aparece para dar uma idéia ao usuário o que ele irá ver.Abaixo, a figura foi inserida com alinhamento à esquerda, com a seguinte sintaxe :

&lt;img src="ma2anosp.jpeg" align="left"&gt; Todo texto inserido em volta da foto, que está alinhada à esquerda. Todo texto inserido em volta da foto, que está alinhada à esquerda. Todo texto inserido em volta da foto, que está alinhada à esquerda. Todo texto inserido em volta da foto, que está alinhada à esquerda. Todo texto inserido em volta da foto, que está alinhada à esquerda. Todo texto inserido em volta da foto, que está alinhada à esquerda. Todo texto inserido em volta da foto, que está alinhada à esquerda. Todo texto inserido em volta da foto, que está alinhada à esquerda.
Abaixo, a figura foi inserida com alinhamento à direita, espaçamento vertical e horizontal de 15 pixels, e borda espessura tamanho 4, com a seguinte sintaxe :

&lt;img src="ma2anosp.jpeg" align="right" vspace="15" hspace="15" border="4"&gt; Todo texto inserido em volta da foto, que está alinhada à esquerda. Todo texto inserido em volta da foto, que está alinhada à esquerda. Todo texto inserido em volta da foto, que está alinhada à esquerda. Todo texto inserido em volta da foto, que está alinhada à esquerda. Todo texto inserido em volta da foto, que está alinhada à esquerda. Todo texto inserido em volta da foto, que está alinhada à esquerda. Todo texto inserido em volta da foto, que está alinhada à esquerda. Todo texto inserido em volta da foto, que está alinhada à esquerda.

TPI 1 - HTML - Aula 8 - Links

TPI 1 - HTML - Aula 8 - Links


Links são ligações com outras páginas na Internet, com outros documentos ou com parte do mesmo documento.
A sintaxe correta do comando para fazer link com uma página na Internet é :
&lt;a href="URL" target="destino" title="texto"&gt; TEXTO &lt;/a&gt;
Onde :
A
Significa ANCHOR - Anchora.
HREF
Horizontal Reference - Referência Horizontal, é aqui que colocamos o nome do arquivo, local ou endereço da Internet que queremos abrir.
TARGET
Destino - é onde deverá ser aberta a URL.Os tipos são :
  1. _blank - abre uma nova janela do Browser para exibir o documento
  2. _parent - abre o documento no frame principal ou na janela que contém o link.
  3. _self - este é o padrão, abre o documento na janela do link, por ser o padrão não precisa ser especificado.
  4. _top - abre o documento na janela inteira do Browser, removendo todos os frames, se não existir frame ele age como o _self.
TITLE
Título, abre um texto, como a dica, ao apontar o mouse.
LINK PARA OUTRA PÁGINA DA INTERNET
Links são ligações com outras páginas na Internet, com outros documentos ou com parte do mesmo documento.
A sintaxe correta do comando para fazer link com uma página na Internet é :
&lt;a href="http://www.professoravaleria.fabbri.pro.br" target="destino" text="texto"&gt; TEXTO PARA O LINK &lt;br&gt; &lt;/a&gt;Aponte o mouse na frase abaixo. Repare que a seta do mouse se transforma em uma mãozinha. É o formato padrão. Repare que na Barra de Status, aparece o site de destino (neste caso).
ESTE TEXTO É UM LINK
Se você quiser, pode fazer um link para um outro arquivo, como estes que estou usando para abrir todos os arquivos referentes às aulas.

LINK PARA OUTRO ARQUIVO HTML
A sintaxe correta do comando para fazer link com outro arquivo é :

&lt;a href="arquivo.ext" target="destino" text="texto"&gt; TEXTO PARA O LINK &lt;br&gt; &lt;/a&gt;ESTE É UM LINK PARA OUTRO ARQUIVO


LINK PARA MESMA PÁGINA
Os links para a mesma página, devem ser utilizados, caso os assuntos referentes à eles não sejam muito extensos. Pois uma página não deve conter muitas informações, pois se torna cansativa. Usamos os links para separar os assuntos e assim organizar melhor o site.
Para fazer um link na mesma página, é necessário usar o comando do link e um outro comando que será o que indica o local do link.
Veja o exemplo abaixo :

&lt;html&gt; &lt;head&gt; &lt;title&gt; LINKS PARA MESMA PÁGINA &lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;center&gt; Vamos aprender link para mesma página &lt;/center&gt; &lt;a href="#link1"&gt;Clique para ir para o local desejado&lt;/a&gt; Perceba que a URL acima tem um nome precedido do numeral (#), que indica que o link é na mesma página. Se você tiver bastante texto, o link ficará um pouco afastado do link que o chamará, mas não tem importância, porque é interessante deixar uma área sem texto, para que o link fique claro. &lt;a name="link1"&gt;&lt;/a&gt;Este é o Local do LINK1 Aqui deve ser inserido tudo referente ao Link1, ou seja, ao assunto que você está se referindo. Aqui termina explicação de link local. &lt;/body&gt; &lt;/html&gt; Vamos entender :

#LINK1
É um nome qualquer, de prefência que seja condinzente com o assunto que você estará escrevendo.
A NAME=LINK1
É o lugar onde você inicia a digitação do assunto.
ATENÇÃO : Os nomes devem ser escritos igualmente no HREF e no NAME, se escrever maiúsculo na HREF e minúsculo no A NAME, ele não irá funcionar.Aqui termina a aula de link. Continue com o curso.

TPI 1 - HTML - Aula 7 - Listas

TPI 1 - HTML - Aula 7 - Listas


As listas nos ajudam a organizar a página. Como no Word, você pode usar as listas numeradas e não numeradas e ainda pode usar as listas de definição, que fazem a indentação do texto automaticamente.

LISTA NÃO NUMERADA

A lista não numerada tem a seguinte sintaxe :
&lt;ul type="tipo"&gt; &lt;li&gt; Primeiro item &lt;li&gt; Segundo item &lt;li&gt; Terceiro item &lt;/ul&gt;onde :
UL = UN-NUMERED LIST
Define que está usando lista não numerada.
TYPE = TIPO
Define o tipo a ser usado : circle, disc (padrão) ou square
LI = LIST ITEM
Item da Lista, para cada item a ser inserido use o LI, é como se fosse o ENTER no Word.
Veja Resultado Abaixo
  • Primeiro Item da Lista
  • Segundo Item da Lista
  • Terceiro Item da Lista
  • Quarto Item da Lista

LISTA NUMERADA

A lista numerada tem a seguinte sintaxe :
&lt;ol type="tipo" start="n"&gt; &lt;li&gt; Primeiro item &lt;li&gt; Segundo item &lt;li&gt; Terceiro item &lt;/ol&gt;onde :
OL = ORDERED LIST
Define que está usando lista numerada.
TYPE = TIPO
Define o tipo a ser usado : Numeros Cardinais (1,2,3,4,5..) - Romanos (I, II, III, IV, V ...) ou (i,ii,iii,iv,v...) - Letras (A, B, C, D, E ...) ou (a, b, c, d, e ...)
LI = LIST ITEM
Item da Lista, para cada item a ser numerado use o LI, é como se fosse o ENTER no Word.
START = INICIO
Deve ser ignorado se quiser iniciar a lista do 1, I, i, A ou a. Caso queira que ele inicie no número 5 utilize start="5", se for letra utilize também o número 5 pois ele irá iniciar na letra V ou E.
Abaixo um exemplo iniciando em Algarismo Romando no item 5.
&lt;ol type="I" start="5"&gt; &lt;li&gt; Primeiro Item da Lista &lt;li&gt; Segundo Item da Lista &lt;li&gt;Terceiro Item da Lista &lt;li&gt; Quarto Item da Lista &lt;/ol&gt;
que resulta :
  1. Primeiro Item da Lista
  2. Segundo Item da Lista
  3. Terceiro Item da Lista
  4. Quarto Item da Lista
Abaixo um exemplo do Alfabeto iniciando o no item 1=A.
&lt;ol type="A"&gt; &lt;li&gt; Primeiro Item da Lista &lt;li&gt; Segundo Item da Lista &lt;li&gt;Terceiro Item da Lista &lt;li&gt; Quarto Item da Lista &lt;/ol&gt;
que resulta :
  1. Primeiro Item da Lista
  2. Segundo Item da Lista
  3. Terceiro Item da Lista
  4. Quarto Item da Lista
Abaixo um exemplo simples.
&lt;ol&gt; &lt;li&gt; Primeiro Item da Lista &lt;li&gt; Segundo Item da Lista &lt;li&gt;Terceiro Item da Lista &lt;li&gt; Quarto Item da Lista &lt;/ol&gt;
que resulta :
  1. Primeiro Item da Lista
  2. Segundo Item da Lista
  3. Terceiro Item da Lista
  4. Quarto Item da Lista

LISTA DE DEFINIÇÃO

As listas de definição são utilizadas quando queremos explicar algo. A lista de definição tem a seguinte sintaxe :
&lt;dl&gt; &lt;dt&gt; Defina o Termo &lt;dd&gt; Primeiro termo a ser definido dentro da lista &lt;dt&gt; Defina o segundo Termo &lt;dd&gt; Defina aqui o segundo termo na lista qu estamos testando &lt;/dl&gt;
onde :
DL - DEFINE LIST
Inicio da lista de definição
DT - DEFINE TERM
Termo a ser definido, aqui vai o texto ou palavra a ser definida
DD - DEFINE DATA
Dados da Definição - aqui você explica o que significa o termo que você quer definir. Se você prestou atenção até aqui nas aulas, tudo que está de cor laranja é a TAG DT, e tudo o que está com a margem mais à direita e na cor ciano é a TAG DD.
Veja o exemplo abaixo :
&lt;dl&gt; &lt;dt&gt; Defina o Termo &lt;dd&gt; Primeiro termo a ser definido dentro da lista &lt;dt&gt; Defina o segundo Termo &lt;dd&gt; Defina aqui o segundo termo na lista qu estamos testando &lt;/dl&gt;
Que produz :
DEFINA O TERMO
Primeiro termo a ser definido dentro da lista
DEFINA O SEGUNDO TERMO
Defina aqui o segundo termo na lista qu estamos testando

TPI 1 - HTML - Aula 6 - HR

TPI 1 - HTML - Aula 6 - HR


HR - Horizontal Row (Linha Horizontal)
Insere uma linha para separar textos, figuras, etc. a sintaxe padrão é :
<hr color="cor" width="n" size="n" noshadow>
onde :
COLOR
Define a cor da linha, caso seja omitido este parâmetro, a cor da linha fica transparente.
NOSHADE
Retira a sombra padrão da linha, tornando-a sólida.
WIDTH
Define a largura da linha, pode especificar número relativos (%) ou em pixels.
SIZE
Define a espessura da linha.
ALIGN
Alinha a linha para esquerda ou direitaVeja os exemplo abaixo :
A linha abaixo foi inserida com o comando simples <HR>.

Linha com cor vermelha

<hr color="red">Linha com espessura 7 e cor laranja

<hr size="7" color="orange">Linha com espessura 10, largura ocupando 50% da tela

<hr size="10" width="50%">Linha com espessura 30 sem sombra, alinhada à direita, largura 10%.

<hr size="6" noshade width="10%" align="right">

TPI 1 - HTML - Aula 5 - Marquee

TPI 1 - HTML - Aula 5 - Marquee


O comando marquee é utilizado para exibir um texto rolante na tela. Sua sintaxe é : 
<span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: x-small;">&lt;marquee width="n" bgcolor="cor" direction="direção" scrolldelay="n" scrollamount="n" behavior="tipo"&gt;</span>
onde :


TPI 1 - HTML - Aula 4 - Formatos Fisicos

TPI 1 - HTML - Aula 4 - Formatos Fisicos


<B> ... </B>
Formato em Negrito - B = Bold
O Resultado é o seguinte -> Professora Valéria

<I> ... </I>
Formato em Itálico - I = Italic
O Resultado é o seguinte -> Professora Valéria

<TT> ... </TT>
Formato em espaçamento fíxo. - TT = TypewriTer
O Resultado é o seguinte -> Professora Valéria

<U> ... </U>
Formato em Sublinhado - U = Underline (linha em baixo)
O Resultado é o seguinte -> Professora Valéria

<STRIKE> ... </STRIKE>
Formato em Risco. É utilizado para indicar alteração em textos, ou em cartas para evitar leitura através do envelope.
O Resultado é o seguinte -> Professora Valéria

<BIG> ... </BIG>
Aumenta a letra e negrita - BIG = Grande
O Resultado é o seguinte -> Professora Valéria

<SMALL> ... </SMALL>
Diminui a Letra - SMALL = Pequeno
O Resultado é o seguinte -> Professora Valéria

<SUB> ... </SUB>
Formato em Subscrito
O Resultado é o seguinte -> H2O

<SUP> ... </SUP>
Formato em Sobrescrito
O Resultado é o seguinte -> X2

TPI 1 - HTML - Aula 3 - Formatos Lógicos

TPI 1 - HTML - Aula 3 - Formatos Lógicos


As tags deste tipo indicam como o texto destacado deve ser utilizado e não 
como será apresentado. Este estilo não indica como o texto será formatado e sim como será utilizado no documento. Não é possível garantir que um texto destacado que utilize tags deste tipo sempre será apresentado em negrito ou itálico, por exemplo. Dependerá do browser. 
Algumas tags de estilo lógico utilizadas em HTML padrão:

<CITE> ... </CITE>
Para Título de filmes, livros e citações curtas.
O Resultado é o seguinte -> Professora Valéria

<CODE> ... </CODE>
Para trechos de código fonte de programas.
O Resultado é o seguinte -> Professora Valéria

<DFN> ... </DFN>
Usado para definições, o normal é o texto aparecer em itálico.
O Resultado é o seguinte -> Professora Valéria

<EM> ... </EM>
É usado para dar ênfase, também aparecer geralmente emitálico.
O Resultado é o seguinte -> Professora Valéria

<KBD> ... </KBD>
É usado para indicar entrada via teclado.
O Resultado é o seguinte -> Professora Valéria

<SAMP> ... </SAMP>
É usado para indicar uma mensagem de erro ou resultado.
O Resultado é o seguinte -> Professora Valéria

<STRONG> ... </STRONG>
Dá ênfase, normalmente coloca o texto em negrito.
O Resultado é o seguinte -> Professora Valéria

<VAR> ... </VAR>
Usado para indicar variáveis ou valores que devem ser digitados pelo usuário, também é mostrado em itálico (geramlmente).
O Resultado é o seguinte -> Professora Valéria

TPI 1 - HTML - Aula 2 - Títulos

TPI 1 - HTML - Aula 2 - Títulos


Os títulos são inseridos através de uma TAG especial <Hn> :
onde :
H
Significa Head (Cabeçalho)
N
É um número que vai de 1 a 6, o número 1 é o cabeçalho maior e o 6 o cabeçalho menor.
ALIGN
Define um tipo de alinhamento. Os valores podem ser left ou right.
Cada vez que você abre um H ele pula automaticamente de linha. Veja os exemplos :
&lt;H1&gt;

É um Título de Tamanho H1, alinhado á direita.

&lt;H2&gt;

É um Título de Tamanho H2

&lt;H3&gt;

É um Título de Tamanho H3

&lt;H4&gt;

É um Título de Tamanho H4

&lt;H5&gt;
É um Título de Tamanho H5
&lt;H6&gt;
É um Título de Tamanho H6