Documente Academic
Documente Profesional
Documente Cultură
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)
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.
<html>
<head>
<title> </title>
</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>
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
<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>.
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>
<h2>Inserindo cabeçalho</h2>
<h3>Inserindo cabeçalho</h3>
<h4>Inserindo cabeçalho</h4>
<h5>Inserindo cabeçalho</h5>
<h6>Inserindo cabeçalho</h6>
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).
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.
(fim aula 1)
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".
O formato jpg ou jpeg (Joint Photografic Experts Group) é mais utilizado para
fotos.
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.
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>
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.
<a href="arquivo.html"> Texto Link </a> Cria link para outra página.
<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.
(fim aula 2)
Atributos da Página
<body bgcolor="cor_do_fundo" text="cor_do_texto" link="não_selecionado" vlink="link_selecionado">
Â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>
topo
corpo
menu
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>
Crie também os arquivos frame1.html, frame2.html, exemplo1, exemplo2 e exemplo3 com um conteúdo
qualquer.
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.
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
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)
<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>
<?php
$nome = $_POST['nome'];
$senha = $_POST['senha'];
echo $nome.' ola. Sua senha é ';
echo $senha;
?>
<?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.
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>
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>.
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.
Utilizado quando se deseja armazenar dados confidenciais que não aparecerão na tela ao
serem digitados, por exemplo uma senha.