PROGRAMAÇÃO WEB I

Prévia do material em texto

PROGRAMAÇÃO WEB I
Prof. Esp. Aldo José
E-mail: aldojose27@yahoo.com.br
ESTILOS HTML
Cada elemento HTML tem um estilo padrão (cor de fundo é branco, cor do texto é preto, de
tamanho texto é 12px entre outros). Mudar o estilo padrão deum elemento HTML, pode ser feito
com o atributo de style. Este exemplo altera acor de fundo padrão do branco ao cinza.
Exemplo:
< body style = "background-color: lightgrey">
CORES DE TEXTO EM HTML
A propriedade color define a cor do texto a ser usada para um elemento
HTML.
Exemplo:
FONTE DE TEXTO HTML
A propriedade font-family define a fonte a ser usada para um elemento HTML.
Exemplo:
ELEMENTOS DE FORMATAÇÃO HTML
O HTML utiliza elementos como <b> e <i> para a
formatação de saída, como texto em negrito ou itálico. Elementos de formatação
foram projetados para exibir tipos especiais de texto:
• texto em negrito;
• texto importante;
• texto em itálico;
• texto enfatizado;
• texto marcado;
• texto pequeno;
• texto excluído;
• texto inserido;
• sobescrito;
• subscrito. (FREEMAN; FREEMAN, 2008).
FORMATAÇÃO HTML NEGRITO E ÊNFASE
O HTML <b> define o texto em negrito, sem qualquer importância extra.
Exemplo:
HTML ITÁLICO E FORMATAÇÃO ENFATIZADO
O HTML <i> define o texto em itálico, sem qualquer importância extra.
Exemplo:
Os navegadores exibem <strong> como <b>, e
<em> como <i>. No entanto, há uma diferença no
significado dessas tags: <b> e <i> define o texto
em negrito e itálico, mas <strong> e <em> significa
que o texto é "importante".
O HTML <em> define texto enfatizado, com importância semântica.
Exemplo:
OUTRAS FORMATAÇÕES
O HTML <small> define pequeno texto.
Exemplo:
O HTML <mark> define marcado ou texto destacado.
Exemplo:
O HTML <del> define excluída (retirada) de texto.
Exemplo
O HTML <ins> define sublinhado no texto inserido.
O HTML <sub> define o texto subscrito.
O HTML <sup> define o texto sobrescrito.
COMENTÁRIOS EM HTML
No HTML podemos inserir comentários dentro do código-fonte, o qual não resultará em nenhum
comando a ser interpretado pelo browser. Tags de comentário <! - E -> usados para inserir
comentários em HTML (COSTA;
TODESSCHINI, 2006). Você pode adicionar comentários a sua fonte HTML
usando a seguinte sintaxe.
Exemplo:
<! – Escreva aqui seus comentários ->
Observe que há um ponto de exclamação na tag de 
abertura, mas não
na tag de fechamento (!). Com os comentários você pode 
colocar notificações e
lembretes em seu HTML.
LINKS E FRAMES
Os links são encontrados em quase todas as páginas da web. Links permitem aos usuários clicar em
seu caminho a partir de uma página para outra. Links em HTML são hiperlinks. Um hiperlink é um
elemento, um texto ou uma imagem que você pode clicar e ir para outro documento. Os links em
HTML possuem uma sintaxe. Em HTML, os links são definidos com a tag <a>. Link Sintaxe: <a
href="URL"> texto do link </a> .
O atributo href especifica o endereço de destino. O texto do link é a parte visível (Visite a página). Ao
clicar no texto do link, vai mandar você para o endereço especificado. O texto do link não precisa ser
um texto. Ele pode ser uma imagem de
HTML ou qualquer outro elemento HTML. O exemplo acima foi utilizado uma URL absoluta, ou seja,
um endereço web completo. Uma ligação local (link para o mesmo site) é especificado com uma
URL relativa, sem http: // www....
Nos links em HTML temos o atributo alvo. Este atributo de destino especifica onde abrir o documento
vinculado. Este exemplo irá abrir o documento vinculado em uma nova janela do navegador ou em uma
nova aba.
FORMULÁRIOS
Formulários HTML são usados para selecionar diferentes tipos de entrada do
usuário. Um formulário HTML pode conter elementos de entrada, como campos de texto,
caixas de seleção, botões de rádio, apresentar botões e mais. Um formulário também pode
conter listas de seleção, área de texto, legenda e elementos de rotulagem.
A tag <form> é usado para criar um formulário HTML:
<form>
.
Insira os elementos
.
</form>
O elemento mais importante forma o elemento <input>. O elemento <input> é usado para selecionar as
informações do usuário. Um elemento <input> pode variar de muitas formas, dependendo do tipo de atributo.
Um elemento <input> pode ser do tipo de campo de texto, caixa de seleção, senha, botão de rádio, botão de
enviar e muito mais. Os tipos mais comuns de entrada encontram - se descritos a seguir.
• Campo de texto:
<input type = "text"> define um campo de entrada de uma linha que um
usuário pode inserir texto:
• Campo de senha
<input type = "password"> define um campo de senha:
• Botões de rádio
<input type = "radio"> define um botão de rádio. Os botões de rádio permitem que um usuário 
selecione apenas uma opção de um número limitado de opções:
• Caixas de seleção
<type = "checkbox" input> define uma caixa de seleção. As caixas de seleção permitem que 
o usuário selecione zero ou mais opções de um número
limitado de opções:
• Botão enviar
<input type = "submit"> define um botão de envio. Um botão enviar é usado para enviar dados de
formulário para um servidor. Os dados são enviados para a página especificada no atributo action do
formulário. O arquivo definido no atributo action geralmente faz algo com a entrada recebida:
Como o HTML acima aparece no navegador:
Se você digitar alguns caracteres no campo de texto acima e clicar no botão "Enviar", o navegador
irá enviar o seu contributo para uma página chamada "demo_form_acao.php". A página irá mostrar-
lhe a entrada recebida.
Vejamos a seguir tags para formulários em HTML:
TABELA 5 – TAGS PARA FORMULÁRIOS HTML
Tag Descrição
<form> Define um formulário HTML para entrada do usuário.
<input> Define um controle de entrada.
<textarea> Define um controle de entrada de várias linhas (área de texto).
<label> Define um rótulo para um elemento <input>.
<fieldset> Grupos relacionados a elementos em um formulário.
<legend> Define uma legenda para um elemento <fieldset>.
<select> Define uma lista drop-down.
<optgroup> Define um grupo de opções relacionadas em uma lista drop-down.
<option> Define uma opção em uma lista suspensa
<button> Define um botão clicável.
LISTAS EM HTML
HTML pode ter listas não ordenadas, listas ordenadas, ou descrição Listas:
Lista HTML não ordenada:
• primeiro item;
• segundo item;
• terceiro item;
• quarto item;
Lista Ordenada HTML
1) primeiro item;
2) segundo item;
3) terceiro item;
4) quarto item;
Descrição de Lista HTML
Primeiro item
Descrição do item
Segundo item
Descrição do item
Uma lista não ordenada começa com a tag <ul>. Cada item da lista começa com a tag <li>. Os 
itens da lista serão marcados com bolas, ou seja, pequenos
círculos pretos.
Exemplo:
Um atributo de estilo pode ser adicionado a uma lista não ordenada, 
para definir o estilo do marcador. Vejamos os estilos:
Estilo Descrição
list-style-type:disc Os itens da lista serão marcados com bolas.
list-style-type: circle Os itens da lista serão marcados com círculos.
list-style-type:square Os itens da lista serão marcados com quadrados.
list-style-type:none Nenhum dos itens da lista não será marcado.
O navegador exibirá da seguinte maneira:
Uma lista ordenada começa com a tag <ol>. Cada item da lista começa com a tag <li>. Um tipo de 
atributo pode ser adicionado a uma lista ordenada, para definir o tipo de marcador. Vejamos os 
tipos:
LISTA ORDENADA
Tipo Descrição
type = "1" Os itens da lista serão numerados com números (padrão).
type = "A" Os itens da lista serão numerados com letras maiúsculas.
type = "a" Os itens da lista serão numerados com letras minúsculas.
type = "I" Os itens da lista serão numerados com números romanos em maiúsculo.
type = "i" Os itens da lista serãonumerados com números romanos em letra minúscula.