Apostila Rogerio2003 HTML

Linguagem HTML
(primeiras 8 pag. baseado em material de Ronni M. Madeira)
HTML - Hypertext Markup Language, na sigla em inglês, significa Linguagem de

Marcação de Hipertexto. É uma linguagem dedicada à construção de Página Web.
Os objetivos básicos da HTML são: formatar o conteúdo de uma página Web criar ligações entre
várias páginas HTML. É baseada em códigos especiais denominados tags.
Tags (é um comando que diz como o texto ou a informação de uma página Web deve ser exibido)
Hipertexto é o conceito que possibilita a "navegação" entre segmentos de texto

independentemente de sua seqüência linear ou de sua localização.
Página Web é um documento criado através do código HTML, que

pode ser visualizado na internet. Possuem: textos, imagens, animações,
sons e vídeos.
O código HTML, utilizado na criação da página Web, pode ser escrito em qualquer editor
de textos, desde que o arquivo salvo tenha extensão .htm ou .html.
Exemplo:
<html>
<head>
<title>Primeira Pagina</title>
</head>
<body>
<font size="7">
<center>Visite Corumbá</center>
<img src="corumba_vista_do_rio1.jpg" >
</font>
</body>
</html>
É obrigatório salvar a página no formato HTML (.htm .html), para que você possa
visualizá-la em um browser.
Importante : Salve todos os arquivos (páginas html, imagens, etc.) dentro da

mesma pasta, para que a página html carregue-os em seu conteúdo.
Tags são as instruções que o navegador precisa executar para apresentar a

página.
As tags são identificadas facilmente por serem envolvidas pelos sinais "< >" (menor e
maior) e "</ >" (menor barra, maior).
O formato de uma tag: <nome da tag> texto </nome da tag>.
A barra indica que a tag está sendo fechada. As tags são utilizadas aos pares. Elas "cercam" uma
faixa de texto e o altera.
Exemplo: <i>texto em itálico</i> faz com que o texto entre as tags apareça em itálico. A tag
com a barra "</" indica que ali fecha-se o cerco que envolve um texto.
 Estrutura de uma página HTML

Vamos conhecer a estrutura de uma página HTML.
As tags <html> e </html> são a identificação de uma página HTML, ou seja,
fazem com que a página não seja considerada um documento de texto comum.
Você deve utilizar a tag <html> para iniciar a estrutura de uma página HTML e a tag
</html> para encerrar esta estrutura.
O par de tags <head> e </head> é usado para especificar o cabeçalho da página. O
cabeçalho contém informações sobre a página que não aparecem no navegador.
Entre as tags <body> e </body> se constrói o corpo da página HTML, ou seja, entre elas
são colocados os textos, imagens e links.
Visualize, logo abaixo, a estrutura básica de uma página HTML.
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
 Principais elementos de uma página HTML

Uma página HTML é composta basicamente por título, texto, imagem e Links.
Esses elementos são posicionados na página através de comandos HTML.
 Texto em uma página HTML

Para inserir texto em uma página, inicie um arquivo "iniciando.html" e crie uma
estrutura básica.
<html>
<head>
</head>
<body>
</body>
</html>
Insira um título em sua página digitando entre as tags <head> e </head> o comando:
<title>Curso de HTML</title>. O título será exibido na barra de títulos do navegador.
Insira um texto em sua página digitando: Meu curso de HTML entre as tags
<body> e </body>. Após inserido o título e o texto, a estrutura do arquivo ficará assim:
<html>
<head>
<title>Curso de HTML</title>
</head>
<body>Meu curso de HTML</body>
</html>
Cuidado para não deixar tag aberta.

 Visualizando a página em um navegador
Para visualizar o resultado em seu navegador. Salve o arquivo "iniciando.html".
Em seguida, execute o arquivo no Windows Explorer.
 Alinhando o texto
Após inserir o texto, aprenda como alinhá-lo em sua página HTML.
As tags de alinhamento do texto são: <div> e </div>
O atributo de alinhamento é: align
As opções de alinhamento são:
center - texto centralizado
right - texto à direita
left - texto à esquerda
Digite o comando para centralizar o texto: <div align="center">Meu curso de HTML</div>
<html>
<head>
<title>Curso de HTML</title>
</head>
<body>
<div align="center">Meu curso de HTML</div>
<div align="left">Meu curso de HTML</div>
<div align="right">Meu curso de HTML</div>
</body>
</html>
Note que a tag <div> foi finalizada com a tag </div>. O recurso align=center, não precisa ser
repetido no fechamento do comando, pois ele não é uma tag e sim um atributo da tag <div>.
 Inserindo parágrafos
Uma das diferenças na construção de páginas HTML e textos tradicionais
é que não é possível adicionar parágrafo em HTML apenas pressionando
a tecla Enter. É necessário forçar o fim do parágrafo ou a quebra de linha
utilizando comandos especiais.
As tags de parágrafos são: <p> e </p>.
1. Posicione o cursor dentro de uma tag <div>.

2. Digite: <p>Definindo parágrafo na página HTML</p>
A tag <p> não precisa do fechamento para funcionar. No entanto, em

documentos que usam componentes avançados da linguagem, a
correspondente de fechamento é necessária. Por isso é melhor se habituar a
colocar o par de tags.
 Inserindo quebra de linha

A tag para quebra de linha é: <br>
Esta tag pode ser inserida em qualquer ponto do corpo de sua página HTML.
1. Após a tag </p> digite:

quebra de linha <br>
quebra de linha.
Obs.: A tag <br> não utiliza a tag de fechamento.
Note que entre as duas frases, houve uma quebra de linha automática.
 Usando cabeçalho
O cabeçalho é uma tag que define o tamanho de cada linha de um texto
da página. O tamanho do cabeçalho pode ser diferenciado.
1. Após o texto "quebra de linha" digite:
<h1>Inserindo cabeçalho</h1>
A tag cabeçalho possui 6 opções de tamanho: de <h1> até <h6>.
Formatando uma página HTML

Altere a aparência do texto, mudando as fontes e atributos como tamanho, cor e estilo.
 Definindo fonte, tamanho e cor do texto

A HTML permite que você deixe o texto mais atrativo, atribuindo cores,
fontes e tamanhos. Formate um texto de acordo com a seqüência:
Use uma única tag e diferentes atributos para tamanho, cor e tipo de fonte.
A sintaxe da tag e seus atributos é:
<font size="n" face="nome da fonte" color="#000000">texto aqui</font>.
Onde:
Size define o tamanho da fonte (n varia de 1 a 7).
Face define o tipo da fonte.
Color define a cor da fonte (em valores hexadecimais).
1. Após a tag <body> digite:

<font size="4" color="#0000ff" face="courier new">Curso de HTML</font>.
 Definindo o estilo para o texto (Negrito, Itálico e Sublinhado)

Além das formatações vistas no tópico anterior, aplique estilos variados
em seu texto.
Use as tags:
<b> e </b> para o estilo Negrito no texto.
<i> e </i> para o estilo Itálico ao texto.
<u> e </u> para o estilo Sublinhado ao texto.
As tags de estilo podem ser aplicadas simultaneamente, isto é, você poderá

aplicar no mesmo texto o estilo negrito, itálico e sublinhado.
(fim aula 1)
Acrescentado Links, Imagens e Cor de Fundo

Inclua Links e imagens na página HTML e adicione cor e imagem ao fundo da página.
 Links
Link é um "atalho" que pode levá-lo a outras partes do documento ou a
outros documentos. Em páginas HTML, os links são representados por
textos sublinhados ou imagens. Quando você aponta o mouse para um link, o
cursor se transforma em uma mãozinha apontando.
 Inserindo links
A tag link é: <a> e </a>.
O atributo é: href.
O par de tags <a> e </a> cria o link entre as páginas e o atributo "href"
informa o endereço da página de destino.
1. Crie uma nova página HTML com a estrutura básica.
2. Após a tag <body>, digite: experiência profissional.
3. Salve este arquivo com o nome: experiencia.html.
4. Crie uma outra página HTML com a estrutura básica.
5. Digite após a tag <body>:
<a href="experiencia.html">Entrar na página experiência profissional</a>.
6. Salve este arquivo com o nome "curriculo.html".
Existem algumas restrições quanto à nomeação de páginas HTML:

- Evite acentos ortográficos ao nomear uma página.
- Ao atribuir o comando link, digite ao "pé da letra" o nome dado à página.
 Tipos de imagens permitidas

Os dois tipos de imagens que podem ser inseridas em uma página
são: formato .jpg e formato .gif.
O formato jpg ou jpeg (Joint Photografic Experts Group) é mais utilizado para
fotos.
O formato gif (Graphics Interchange Format) é mais utilizado

para desenhos vetoriais, como os cliparts.
 Inserindo imagens
Para incluir uma imagem na página HTML use:
<img src="nome da imagem"> Não é necessário fechar esta tag.
A imagem criada deve ser salva na mesma pasta que contém as páginas HTML para
que o navegador possa abri-la, ou o caminho completo deve ser incluído no nome.
Para dimensionar a imagem use atributos width="número" height=" número".
Em número pode ser colocado valor percentual, que se ajustará conforme o tamanho da
página.
 Inserindo cor de fundo

Personalize sua página alterando a cor do fundo. O comando de cor de fundo "bgcolor", é
um atributo da tag <body>.
1. Digite como exemplo: <body bgcolor="#FFFF00">O fundo desta página é amarelo</body>.
Consulte a Tabela de Cores , substitua a cor amarela (#FFFF00) por outros

valores hexadecimais e atualize a página. Note que a cor de fundo da página é
alterada.
 Inserindo imagem de fundo

É possível inserir uma imagem de fundo na página HTML, caso não queira
utilizar uma única cor.
O comando de inserção de imagem "background", é um atributo da tag <body>.
Ao digitar a estrutura básica, substitua a tag <body> por este comando:
<body background= "nome da imagem.gif ou .jpg">.
A imagem precisa estar arquivada na pasta onde se encontra a página HTML

correspondente, ou o caminho completo deve estar escrito no nome da imagem.
 Tabelas
Podemos montar tabelas para organizar melhor a informação na pagina.
O comando de inserção de tabela é: <table border="2" cellpadding="2"
cellspacing="1" width="80%">
Para inserir novas linhas use: <tr> e </tr>
Para inserir novas colunas (dentro das linhas) use: <td> e </td>
<table border="2" cellpadding="2" cellspacing="1" width="80%">

<caption> Tabela de Preços </caption>
<tr>
<td width="33%">Apostila</td>
<td width="33%">Atributos</td>
<td width="33%">Valor em reais</td>
</tr>
<tr>
<td>Delphi 3</td>
<td>Aprenda a programar em Delphi</td>
<td>R$ 20, 00 </td>
</tr>
Atributos:
BORDER ="valor" define a largura da borda externa da tabela (contorno). Se não
incluir a atribuição da borda aparecerá uma tabela sem bordas.
CELLSPACING="valor" define o espaçamento horizontal entre uma célula e outra.
Refletirá na largura da borda.
CELLPADDING="valor" define o espaçamento vertical entre uma célula e outra.
Sem refletir na largura da borda.
WIDTH="valor %" define a quantos % de largura deverá conter a tabela em relação à largura da
tela.
HEIGHT="valor %" define quantos % de altura deverá conter a tabela em relação à altura da
tela.
BGCOLOR="#cor" define a cor de fundo da tabela.
BACKGROUND="imagem" define uma imagem como fundo da tabela.
Início e fim da estrutura de uma página HTML.

<html> e </html>
Todo o documento deve estar entre estas tags.
Agrupa informações da página, como o título,

por exemplo. Com exceção do título,
<head> e </head>
informações contidas nestas tags não são
exibidas no navegador.
<title> e </title> Digite o título da página entre estas tags.

Os comandos entre estas tags são visíveis no
<body> e /body>
navegador.
<i> texto itálico </i> <u> texto sublinhado </u>
<b> texto negrito </b> <strike> texto riscado </strike>
<sub>texto subescrito</sub> <sob>texto sobrescrito</sob>
<big>texto em fonte maior</big> <small>texto em fonte menor</small>
<center>texto centralizado.</center> Centralizar um texto na página.
Texto com tamanho de letra pré formatado: h1

<h1>Texto de Cabeçalho</h1>
maior, h2 menor até h6.
<br> Utilize para quebrar linhas.
Alinha o texto. Os atributos são "center",

<div align= "center"> e </div>
"right" e "left".
<a href="arquivo.html"> Texto Link </a> Cria link para outra página.
<a href = mailto:

"rguths@gmail.com"> Envie e-mail</a> Cria link para enviar email.
Insere imagem na página com extensões .gif

<img src= "imagem" alt="texto">
ou .jpg, alt (exibe uma mensagem).
<font size=10 face="Arial black" Define tamanho, tipo, cor. Pode-se utilizar o
color=#000000>Texto </font> nome da cor em inglês em vez do código.
<body bgcolor=#000000> Define a cor de fundo da página.
Insere imagem de fundo na página com

<body background= "img.gif">
extensões .gif ou .jpg
<bgsound src="som.mid" loop="infinite">

Insere uma música instrumental na sua página.
<pre>Texto Pré Formatado</pre> Exibe um texto com a formatação digitada.
<addrees>Texto final</addrees> Insere um texto para final da página.
<hr> Insere uma linha horizontal.

<p> Insere um parágrafo, não utiliza </p>.
(fim aula 2)
Efeitos para sua Página da Internet

 Mensagem Animada
<MARQUEE behavior=alternate height=36 scrollAmount=3 width=344> Mensagem </MARQUEE>

alternado altura Velocidade largura
 Atributos da Página
<body bgcolor="cor_do_fundo" text="cor_do_texto" link="não_selecionado" vlink="link_selecionado">
 Personalizando suas Figuras

<IMG src="figura.gif" alt="Mensagem a ser exibida" width=100% height=6 align="botton" hspace=5>
largura altura alinhar espaço hor.
Alinhar: botton  base middle  meio top  topo left  esquerda right  direita
Âncoras Internas
(encontrar um texto na página)
Para Linkar:
<A HREF="#Texto">Clique para ir para o Texto</A>
Para marcar:
<A NAME="Texto"><!- -></A>
Texto a ser encontrado.
Âncora para outra página: (segue para próxima página e para em determinado ponto "Texto")
<A HREF="pag2.htm#Texto">Página 2, Texto</A>
Quadros (Frames) para sua página.

logo
topo
corpo
menu
Digitar abaixo do </HEAD> e antes to <BODY>.

<frameset cols="20%,*">  Coluna c/ 20% e * (indica o restante 80%).
<frameset rows="33%,*">  Linha c/ 33% e * (indica o restante 67%).
<frame src="pag1.html" name="logo">  1ª Página a ser exibida (a esquerda)
<frame src="pag2.html" name="menu">  2ª Página a ser exibida (a direita).
</frameset>  final do 1º frameset.
<frameset rows="33%,*">  final do 2º frameset.
<frame src="pag3.html" name="topo">
<frame src="pag4.html" name="corpo">
</frameset>
</frameset>
Na pag1.html:( abaixo do </HEAD> e antes to <BODY>)

<base target="ver">
Frames atualizando outros Frames
Um frame pode comandar a alteração de outro frame através de atributo da tag <a> e atributo target=”nome
do frame”.
Use: <a href="nome do arquivo.html" target="nome do frame"> texto </a>
Exemplo: crie arquivo inicio.html com o código abaixo.
<html>
<head>
<title>Frames</title>
</head>
<frameset cols="20%,*">
<frameset rows="33%,*">
<frame src="menu.html" name="indice">
<frame src="frame1.html" name="ver">
</frameset>
<frame src=" frame2.html" name="ver2">
</frameset>
<body>
</body>
</html>
Em seguida crie o arquivo menu.html com código abaixo.

<font size="4">
<center>Menu Principal</center>
<a href="exemplo1.html" target="indice">Portal</a> </br>
<a href="exemplo2.html" target="ver">Produtos </a> </br>
<a href="exemplo3.html" target="ver2">Contato</a> </br>
<div> texto </div>
</font>
Crie também os arquivos frame1.html, frame2.html, exemplo1, exemplo2 e exemplo3 com um conteúdo
qualquer.
Valores para o atributo Target

Podemos utilizar outros valores para o atributo target na tag <a> além do nome do frame que desejamos
atualizar. Entre os possíveis cabe destacar:
_blank força a abertura do link em uma nova página (em branco)
_parent abre o link na janela pai (ou na janela em que estamos trabalhando se não houver um
pai)
_top abre a janela eliminando a composição em frames.
Algumas Dicas Importantes:

 A primeira página deve-se chamar index.htm ou (html).
 Os arquivos devem ser gravados em minúsculo sem utilizar acentos e cedilha.
 Pesquise sites que hospedem gratuitamente sua página.
(fim aula 3 e 4)
CSS (2 aulas)
HTML Dinâmico
HTML Dinâmico (texto traduzido por Miguel Angel Alvarez)
À medida que vamos avançando na programação de páginas web, vamos fixando novos objetivos
para criar a cada dia webs mais excitantes. Seguindo este caminho, chega um momento em que a
linguagem HTML se torna curta e temos que nos servir de alguma tecnologia superior, que nos
permita realizar esses desenvolvimentos mais complexos e dinâmicos.
Imagine por um momento que você tivesse em suas mãos um grande projeto, um projeto que se
supõe a criação massiva de páginas, como pode ser um jornal, onde a cada dia há que mudar completamente
os conteúdos, ou uma enciclopédia on-line, com milhares de páginas e referências, como por exemplo. Se
utilizássemos unicamente HTML necessitaríamos um regimento de planejadores web para poder chegar
finalmente ao trabalho de criar tantas e tantas páginas e sua atualização.
Mesmo assim, se quiséssemos desenvolver uma aplicação na web onde o usuário tivesse que
interagir com a página, ou uma aplicação que oferecesse algum serviço, como um buscador ou um gestor de
correio através da web, também nos veríamos muito limitados com o HTML.
Ademais, também estamos muito limitados com o HTML na hora de criar efeitos nas páginas,
animações que chamem um pouco a atenção do usuário e que permitam fazer com que as páginas web sejam
mais divertidas.
DHTML é o que torna possível criar páginas web que superam todas as limitações do HTML
como as comentadas anteriormente. Como vemos, o DHTML é muito amplo e engloba muitas técnicas
que podem ser realizadas com uma infinidade de linguagens de programação e programas distintos .
Vamos fazer uma classificação de DHTML para delimitar um pouco seus raios de ação e para que o
conceito se limite em áreas da programação web que já podemos conhecer.
DHTML de cliente
Por um lado temos o DHTML que se desenvolve no âmbito de uma página web, quando a
página está sendo vista na tela dos usuários, ou seja, nos navegadores. Nestes casos, para realizar
qualquer tipo de efeito ou interatividade na página temos como recurso ao navegador, por isso se chama de
cliente.
A programação no cliente serve para muitas coisas, exemplos disso são efeitos diversos nas páginas,
áudios, vídeos, menus interativos, controle e resposta às ações de um usuário na página, controle sobre os
formulários, etc. Para fazer muitas destas coisas podemos utilizar diversas linguagens de programação como
Javascript e VBScript, ou inclusive podemos botar aqui programas como Flash.
Não obstante, está mais próxima a idéia do DHTML de programar scripts dentro da página com as
linguagens ao lado do cliente. Javascript para todos os navegadores e VBScript para Internet Explorer. Estas
linguagens trabalham, como foi dito, integradas com o navegador e dependem do modelo e da versão deste.
Estas linguagens não permitem o desenvolvimento de qualquer projeto na Internet, já que ao serem
executadas no navegador do cliente, não têm acesso a todos os recursos do sistema do usuário, para evitar
buracos na segurança, e nem aos recursos do servidor onde estão hospedadas as páginas. Esta limitação,
acrescentada ao que já foi comentado sobre sua dependência do navegador, faz destas linguagens
insuficientes para desenvolvimentos avançados, sendo mais um complemento de programação que o núcleo
de verdadeiras aplicações na web.
DHTML de servidor
Por outro lado, existe uma série de linguagens que se baseiam no servidor para executar seus
scripts, assim como a programação do cliente se baseia no navegador. Quando uma página é solicitada
por parte de um cliente, o servidor executa os scripts e gera uma página resultado, que envia ao
cliente. A página resultado contém unicamente o código HTML, pelo que pode ser interpretada por
qualquer navegador sem lugar para erros, independentemente de sua versão.
Esta independência do navegador já é uma vantagem significativa em relação à programação no
cliente, mas é ainda mais que contamos com todos os recursos do servidor onde estão hospedadas as
páginas. Estes recursos, como poderiam ser gerenciadores de bancos de dados, servidores de correio ou o
próprio sistema de arquivos do servidor, são os que nos vão permitir construir todo tipo de aplicações.
Como vantagens adicionais pode se destacar que o código das páginas com os scripts nunca chega ao
cliente, recordamos que ao navegador somente lhe chega HTML, e isto implica que nossos visitantes nunca
vão poder acessar ao coração das aplicações que tivermos desenvolvido, ou seja, aos scripts do lado do
servidor.
Linguagens do lado do servidor são ASP, desenvolvido por Microsoft, PHP de código livre, JSP para
programar em Java, ou alguma outra interface como CGI, que se desenvolve em linguagens como C ou Perl.
Esquema do funcionamento das páginas com scripts do servidor
Questionário de Reforço:
1. Quais as principais limitações do Html Dinâmico de Cliente?
2. Quais as vantagens do Html Dinâmico de Servidor?
3. O que é necessário para executar cada um destes casos?
4. Por que pode ser interessante que o cliente não veja os scripts, no caso Servidor?
HTML Dinâmico
Exemplos DHTML de Cliente

(Introdução ao DHTML - Parte III.html)
(Plugweb Internet.mhtml)
(Plugweb Internet1.mhtml)
Introdução a ActionScripts.
HTML Dinâmico
Introdução a ActionScripts.
Utilização de Templates Prontos (2 aula)
Utilização do DreamWeaver
HTML Dinâmico
Instalação do Xamp.
Inclusão de PHP (http://localhost/sistemaTeste/formulario_login.html)
Exemplo de Formulário que envia informações a arquivo .php para tratamento.
<html>
<head><title>Cadastro</title>
</head>
<body>
<h3> Digite Nome </h3>
<form name="form" method="post" action="cadastro.php">
<input type="text" name="nome" />
<h3> Digite Senha </h3>
<input type="password" name="senha" />
<input type="submit" value="Envia"/>
</form>
</body>
</html>
Em seguida o arquivo cadastro.php, que recebe os valores nome e senha.
<?php
$nome = $_POST['nome'];
$senha = $_POST['senha'];
echo $nome.' ola. Sua senha é ';
echo $senha;
?>
Exemplo de página PHP com código HTML incluído.
<?php
$var = 'SUPER teste';
?>
<html>
<head></head>
<body>Isto é um <b><?=$var;?></b></body>
</html>
*0 Formulário
Formulário é uma forma de colher dados que nos interessam.
Funciona como um questionário ou uma ficha de inscrição, onde o proprietário da página faz
perguntas e o usuário responde.
Como é o webmaster da página que está fazendo as perguntas, ele pode coletar os dados que precisa e
posteriormente poderá estar cadastrando esses dados num banco de dados ou usando para manipular alguns
elementos da página.
Ao termino do preenchimento do formulário, o usuário direciona o formulário ao seu destino final. Para que
isso seja possível, é necessário que exista uma rotina, algumas linhas de código, normalmente fornecidas
pelo provedor que vai hospedar o site.
Os comandos de formulário são basicamente três:
TEXTAREA: define uma área onde o usuário poderá digitar linhas de texto.
SELECT: define opção em um quadro de rolagem, um lista drop down, permitindo que o usuário
selecione a opção desejada.
INPUT: define botões e caixas de seleção, botões para limpar ou enviar os dados, linhas de texto, etc.
As tags de formulário são do tipo início e fim.
<FORM> Define o início do formulário, atributos:

1. METHOD="POST" o método mais utilizado é o POST, que envia cada informação do formulário de
forma separada para o URL (endereço de origem).
2. ACTION="email ou página que receberá as informações" fique atento pois cada provedor pode
disponibilizar bibliotecas que conterão as ferramentas para que o envio dos dados do formulário sejam
possíveis.
ENTRE O <FORM> E O </FORM> SERÃO INSERIDAS AS TAGS TEXTAREA, SELECT E INPUT.
Essa será a primeira linha do formulário.
</FORM>
Finaliza as operações de formulário.
Na construção de formulários um comando que pode ser muito útil é o <PRE> ele é do tipo início fim.
Você ainda não viu esse comando porque existe um inconveniente ele usa uma fonte padrão não muito
bonita e não permitir a formatação.
Em um formulário porém, ele pode ser de grande utilidade, evitando que você tenha que usar diversos
<BR> ou <P>.
<INPUT TYPE="HIDDEN" NAME="email" VALUE= "email@servidor.com.br">
No tipo HIDDEN podem ser utilizados os seguintes atributos:
1. NAME define o Nome dos dados.

2. VALUE indica para onde serão enviados os dados de todo o formulário.
OBS: Deve ser colocado logo abaixo do elemento FORM.

Dica para todos os atributos input:
Em vários tipos de INPUT que você verá a seguir (PASSWORD, RADIO, TEXT,
CHECKBOX) o atributo NAME, apesar de não ser um campo obrigatório, seu uso é indicado,
pois é ele que define o nome dos dados, significa muito mais. É ele que no e-mail recebido pelo
proprietário do site aparece do lado esquerdo, na frente do que foi marcado ou digitado no
campo pelo usuário.
Utilizado quando se deseja armazenar dados comuns digitados pelo usuário, email,
username, idade, etc.
<INPUT TYPE="TEXT" NAME="EMAIL" SIZE="15" MAXLENGTH="35">
No tipo TEXT podem ser utilizados os seguintes atributos:
NAME = define o Nome dos dados.
SIZE = define o tamanho do campo que aparecerá na tela.
MAXLENGTH = define o tamanho máximo de caracteres que podem ser digitados no

campo pelo usuário.
Utilizado quando se deseja armazenar dados confidenciais que não aparecerão na tela ao
serem digitados, por exemplo uma senha.
<INPUT TYPE="PASSWORD" NAME="SENHA" SIZE="10" MAXLENGTH="6">
No tipo PASSWORD podem ser utilizados os seguintes atributos:
NAME = define o Nome dos dados.
SIZE = define o tamanho do campo que aparecerá na tela.

Apostila Rogerio2003 HTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Apostila Rogerio2003 HTML

Transféré par

Droits d'auteur :

Formats disponibles

Linguagem HTML

(primeiras 8 pag. baseado em material de Ronni M. Madeira)

HTML - Hypertext Markup Language, na sigla em inglês, significa Linguagem de

Hipertexto é o conceito que possibilita a "navegação" entre segmentos de texto

Página Web é um documento criado através do código HTML, que

Importante : Salve todos os arquivos (páginas html, imagens, etc.) dentro da

Tags são as instruções que o navegador precisa executar para apresentar a

 Estrutura de uma página HTML

 Principais elementos de uma página HTML

 Texto em uma página HTML

Cuidado para não deixar tag aberta.

Digite o comando para centralizar o texto: <div align="center">Meu curso de HTML</div>

1. Posicione o cursor dentro de uma tag <div>.

A tag <p> não precisa do fechamento para funcionar. No entanto, em

 Inserindo quebra de linha

1. Após a tag </p> digite:

Obs.: A tag <br> não utiliza a tag de fechamento.

A tag cabeçalho possui 6 opções de tamanho: de <h1> até <h6>.

Formatando uma página HTML

 Definindo fonte, tamanho e cor do texto

1. Após a tag <body> digite:

 Definindo o estilo para o texto (Negrito, Itálico e Sublinhado)

As tags de estilo podem ser aplicadas simultaneamente, isto é, você poderá

Acrescentado Links, Imagens e Cor de Fundo

Existem algumas restrições quanto à nomeação de páginas HTML:

 Tipos de imagens permitidas

O formato gif (Graphics Interchange Format) é mais utilizado

 Inserindo cor de fundo

Consulte a Tabela de Cores , substitua a cor amarela (#FFFF00) por outros

 Inserindo imagem de fundo

A imagem precisa estar arquivada na pasta onde se encontra a página HTML

<table border="2" cellpadding="2" cellspacing="1" width="80%">

Início e fim da estrutura de uma página HTML.

Agrupa informações da página, como o título,

<title> e </title> Digite o título da página entre estas tags.

<i> texto itálico </i> <u> texto sublinhado </u>

<b> texto negrito </b> <strike> texto riscado </strike>

<sub>texto subescrito</sub> <sob>texto sobrescrito</sob>

<big>texto em fonte maior</big> <small>texto em fonte menor</small>

<center>texto centralizado.</center> Centralizar um texto na página.

Texto com tamanho de letra pré formatado: h1

<br> Utilize para quebrar linhas.

Alinha o texto. Os atributos são "center",

<a href = mailto:

Insere imagem na página com extensões .gif

<body bgcolor=#000000> Define a cor de fundo da página.

Insere imagem de fundo na página com

<bgsound src="som.mid" loop="infinite">

<pre>Texto Pré Formatado</pre> Exibe um texto com a formatação digitada.

<addrees>Texto final</addrees> Insere um texto para final da página.

<hr> Insere uma linha horizontal.

Efeitos para sua Página da Internet

<MARQUEE behavior=alternate height=36 scrollAmount=3 width=344> Mensagem </MARQUEE>

 Personalizando suas Figuras

Quadros (Frames) para sua página.

Digitar abaixo do </HEAD> e antes to <BODY>.

Na pag1.html:( abaixo do </HEAD> e antes to <BODY>)

Frames atualizando outros Frames

Em seguida crie o arquivo menu.html com código abaixo.

Valores para o atributo Target

Algumas Dicas Importantes:

Esquema do funcionamento das páginas com scripts do servidor

Exemplos DHTML de Cliente