Escolar Documentos
Profissional Documentos
Cultura Documentos
2015apostila HTML
2015apostila HTML
CONSTRUO DE WEBSITES
Alm dos editores especficos para HTML, Editores de Textos bastante utilizados, como o
Word, e o writer entre outros, permitem a exportao de seus documentos prprios para o
formato HTML (menu
Arquivo, Salvar como, Salvar_como Tipo).
Um documento HTML, normalmente ter extenso .html ou .htm
As etiquetas (tags) HTML no so sensveis caixa, ou seja, tanto faz escrever <HTML>,
<Html>, <html>, <HtMl>, etc. No tem diferena entre maisculas e minsculas.
Os documentos se dividem em duas sees principais, que veremos a seguir.
SEO <HEAD>
<HEAD> contm informaes sobre o documento. O elemento <TITLE>, por exemplo,
define um ttulo, que mostrado no alto da janela do browser. Exemplo:
<HEAD> <TITLE> Pgina do Fulano de Tal </TITLE> </HEAD>
Todo documento WWW deve ter um ttulo; esse ttulo referenciado em buscas pela
rede, dando uma identidade ao documento. Ao adicionar uma pgina aos seus Favoritos
(Bookmarks), o ttulo da pgina se torna a ncora de atalho para ela. Por isso sugerido
que os ttulos dos documentos sejam sugestivos, evitando-se ttulos genricos como
"Introduo", por exemplo. O ttulo tambm bastante significativo para a listagem de
uma pgina nos resultados de pesquisas nos sites de busca da Internet
SEO <BODY>
Tudo que estiver contido em <BODY> ser mostrado na janela principal do browser,
sendo apresentado ao leitor. <BODY> pode conter cabealhos, pargrafos, listas, tabelas,
links para outro documentos, imagens, formulrios, animaes, vdeos, sons e scripts
embutidos.
Atributos de <BODY>
Atravs de atributos de <BODY>, podemos definir cores para os textos, links e para o
fundo das pginas, bem como uma imagem de fundo (marca dgua):
<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb"
VLINK="#rrggbb" BACKGROUND="URL">
Onde:
BGCOLOR: Background Color, ou seja, cor de fundo da pgina. Quando no indicada a
cor de fundo, o browser ir mostrar uma cor padro, geralmente cinza ou branco.
TEXT: Cor dos textos da pgina (padro: preto).
LINK: Cor dos links (padro: azul).
ALINK: Cor dos links quando acionados, clicados (padro: vermelho).
VLINK: Cor dos links depois de visitados (padro: azul escuro ou roxo).
Seus valores so dados em hexadecimal, equivalentes a cores no padro RGB (Red,
Green, Blue).
Existem tabelas de cores com esses valores, mas grande parte dos editores j oferece
uma interface bem amigvel atravs da qual escolhemos as cores desejadas, sem nos
preocuparmos com nmeros esdrxulos tais como #FF80A0.
Browsers que seguem a definio de HTML 3.2 em diante, tambm aceitam 16 nomes de
cores, tirados da paleta VGA do Windows - por exemplo, podemos escrever
BGCOLOR="BLUE".
Porm, browsers mais antigos no apresentaro as cores indicadas.
BACKGROUND: Indica o URL3 da imagem a ser replicada no fundo da pgina, como
uma marca dgua.
Dica: O nome das cores - os 16 nomes de cores aceitos desde a verso 3.2 da HTML so
estes: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver,
teal, white, yellow.
CORES E FONTES
Cores - As cores so introduzidas atravs do elemento <FONT>, usando o sistema RGB
para cores (da mesma forma que vimos para cores de documentos), como mostrado no
exemplo a seguir:
<FONT COLOR="red"> Texto </FONT>
Produzir na pgina: a palavra Texto escrita na cor vermelha.
Assim, um trecho de texto pode ter uma cor diferente da definio geral de cores, feita
atravs dos atributos de <BODY>.
Tamanho - Veja a formatao a seguir:
<FONT SIZE=3> Texto </FONT>
Produzir na pgina: a palavra Texto como o tamanho 3.
Este comando permite que o autor do documento altere o tamanho das letras em trechos
especficos de texto. O tamanho bsico dos textos 3 (padro). Podemos indicar
tamanhos relativos a esse, por exemplo:
<FONT SIZE=+2> Letra maior </FONT>
<FONT SIZE=-2> Letra menor </FONT>
Fontes - Uma evoluo que permite a escolha da fonte para os textos, o atributo FACE:
<FONT FACE="Arial"> Texto </FONT>
Produzir: a palavra Texto com a fonte (tipo de letra) Arial.
Mais exemplos:
<FONT FACE="Verdana" COLOR="blue"> Fonte Verdana Azul </FONT>
Aqua
Gray
Navy
Silver
Black
Green
Olive
Teal
blue
lime
purple
white
fuchsia
maroon
red
yellow
000033
003333
006633
009933
00CC33
00FF33
330033
333333
336633
339933
33CC33
33FF33
660033
663333
666633
669933
66CC33
66FF33
990033
993333
996633
999933
99CC33
99FF33
CC0033
CC3333
CC6633
CC9933
CCCC33
CCFF33
FF0033
FF3333
FF6633
FF9933
FFCC33
FFFF33
000066
003366
006666
009966
00CC66
00FF66
330066
333366
336666
339966
33CC66
33FF66
660066
663366
666666
669966
66CC66
66FF66
990066
993366
996666
999966
99CC66
99FF66
CC0066
CC3366
CC6666
CC9966
CCCC66
CCFF66
FF0066
FF3366
FF6666
FF9966
FFCC66
FFFF66
000099
003399
006699
009999
00CC99
00FF99
330099
333399
336699
339999
33CC99
33FF99
660099
663399
666699
669999
66CC99
66FF99
990099
993399
996699
999999
99CC99
99FF99
CC0099
CC3399
CC6699
CC9999
CCCC99
CCFF99
FF0099
FF3399
FF6699
FF9999
FFCC99
FFFF99
0000CC
0033CC
0066CC
0099CC
00CCCC
00FFCC
3300CC
3333CC
3366CC
3399CC
33CCCC
33FFCC
6600CC
6633CC
6666CC
6699CC
66CCCC
66FFCC
9900CC
9933CC
9966CC
9999CC
99CCCC
99FFCC
CC00CC
CC33CC
CC66CC
CC99CC
CCCCCC
CCFFCC
FF00CC
FF33CC
FF66CC
FF99CC
FFCCCC
FFFFCC
0000FF
0033FF
0066FF
0099FF
00CCFF
00FFFF
3300FF
3333FF
3366FF
3399FF
33CCFF
33FFFF
6600FF
6633FF
6666FF
6699FF
66CCFF
66FFFF
9900FF
9933FF
9966FF
9999FF
99CCFF
99FFFF
CC00FF
CC33FF
CC66FF
CC99FF
CCCCFF
CCFFFF
FF00FF
FF33FF
FF66FF
FF99FF
FFCCFF
FFFFFF
CABEALHOS
Com sucessivos <BR>, podemos inserir diversas linhas em branco nos documentos. Esse
elemento tem um atributo especial, que ser apresentado no item sobre insero de
imagens.
Pargrafos
Para separar blocos de texto, usamos o elemento <P>, por exemplo:
Pargrafo 1; <P> Pargrafo 2.
que produz o seguinte:
Pargrafo 1;
Pargrafo2.
Combinando pargrafos e quebras de linha, temos por exemplo:
Pargrafo 1;<br> linha 1 do pargrafo 1, <br>linha 2 do pargrafo 1.<P>Pargrafo 2;<br>
linha 1 do pargrafo 2, <br>linha 2 do pargrafo 2. O resultado da marcao acima :
Pargrafo 1;
linha 1 do pargrafo 1,
linha 2 do pargrafo 1.
Pargrafo 2;
linha 1 do pargrafo 2,
linha 2 do pargrafo 2.
<P> tem atributo de alinhamento, semelhante aos cabealhos, como nos exemplos a
seguir:
<P ALIGN=CENTER> Assim como os trens, as boas idias s vezes chegam com atraso.
<BR>(Giovani Guareschi)
Assim como os trens, as boas idias s vezes chegam com atraso.
(Giovani Guareschi)
<P ALIGN=RIGHT>Como diz o provrbio chins: melhor passar por ignorante uma
vez do que permanecer ignorante para sempre.</P>
Como diz o provrbio chins: melhor passar por ignorante uma
vez do que permanecer ignorante para sempre.
<P ALIGN=LEFT>Este o alinhamento padro (default), e por isso no vou colocar
nenhuma frase especial.</P>
Este o alinhamento padro (default), e por isso no vou colocar
nenhuma frase especial
LINHA HORIZONTAL
<HR WIDTH=50%> insere uma linha que ocupa 50% do espao horizontal
disponvel:
direita,
sem
efeito
tridimensional:
CARACTERES ESPECIAIS
HTML permite que caracteres especiais sejam representados por
seqncias de escape, indicadas por trs partes: um & inicial, um
nmero ou cadeia de caracteres correspondente ao caractere
desejado, e um ; final.
Trs caracteres ASCII - <, >, e & tm significados especiais em
HTML e so usados dentro de documentos seguindo a correspondncia:
ETAPAS
1 Abra o Kwrite..
2 Digite o seguinte texto:
<html>
Toda
3 Digite :
<head>
O cabealho deve ser delimitado pelas tags <head> e </head>
4 Digite:
<title>
Onde deve ficar o ttulo da pgina.
Feche com </title>.
Exemplo:
<title>teste html</title>
5 Digite:
</head> para fechar o cabealho da pgina
6 Digite:
<body>
Onde ficar o corpo da sua pgina.
Depois insira o ttulo para o texto. Para isso, use as tags <h1> e
</h1>
Exemplo<h1>Minha primeira Home Page</h1>
O tamanho vai de <h1> tamanho maior para <h6> tamanho menor.
7 Para colocar um texto digite :
<p>Texto aqui
Feche com </p>
Exemplo:
<p>Pginas
Html
podem
ser
criadas
em
qualquer
editor
ou
src="brasil.gif"
alt="
imagem
do
Brasil"
height=270
width=240>
A imagem,
pgina
clique
no
arquivo
html
de
sua
pgina
de
Ok.
necessrias
no
cdigo
do
documento
Html
no
Html
podem
ser
criadas
em
qualquer
editor
ou
height=150 width=120>
</body>
</html>
Tanto as figura como o texto ou mesmo os hyperlinks podem ser alinhados no canto
descritivos para que se possa lembrar o que h dentro. Algum caracter como o trao "-"
ou o trao baixo (underline) "_" pode ajudar a separar as palavras.
Por exemplo: homepage_maria
LISTA NUMERADA E LISTA NO NUMERADAS
CRIANDO HIPERLINKS
FRAMES NO HTML
TABELAS
FORMULRIO HTML
CAIXAS CHECKBOX
INTRODUO AO JAVASCRIPT
Javascript o seguinte passo, depois do HTML, que pode dar um programador da web
que decida melhorar suas pginas e a potncia de seus projetos. uma linguagem de
programao bastante simples e pensado para fazer as coisas com rapidez, s vezes
com leveza.
<html>
<head>
<script type=text/javascript>
</script>
</head>
</html>
ndice de massa corporal
INTRODUO AO PHP
Php passo a passo sequencial
1. Criar formulrio salvar como html (formulrio.html)
3. Aps a criao dos dados php, copiar os arquivos formulario.html e dados.php e colar
no arquivo do servidor smb://xxx.xxx.x
4. Abrir o Firefox e digitar o endereo do servidor.
5. Clicar em formulario.html, preencher e enviar os dados.
6. Voltar no servidor smb://xxx.xxx.x e clicar em recarregar pgina. Ser criado o
arquivo.txt
7. Clicar com o boto direito no arquivo txt, em seguida clicar em previsualizar em e
componente integrado ao editor de texto.
Resultado:
Aparecero todos os nomes com os devidos dados que foram preenchidos no formulrio.
MOZILLA COMPOSER
Contribuio de : Walkyria Mota Alvarenga NTE MG 20 Coronel. Fabriciano
CRIANDO PGINAS WEB COM O MOZILLA COMPOSER
Mozilla na verso 7.0 possui o Composer
O Mozilla Firefox no o contm.
O programa leve apenas 12 megas, porm, d para fazer uma boa pgina.
Abrir a Internet no Mozilla Web Browser(navegador) ou simplesmente Mozilla.
Menu S ou Menu K
Acessrios
Comunicao
Navegador Mozilla de Internet
Acessar o Mozilla Composer: (h trs formas de acess-lo):
Menu Arquivo Novo Composer.
Menu Janela Composer.
Tecla de Atalho Ctrl + Shift + N
Tecla de Atalho Ctrl + 4.
Criando Pginas Web
Criar uma pasta na rea de trabalho Desktop
Salvar a pasta com Tema da pgina que estamos criando, para facilitar.
Nunca colocar letra maiscula.
Nunca rotular a pgina com palavras grandes.
Nunca escrever caracteres ou smbolos.
Se o nome for duplo, automaticamente o Mozilla acrescentar hander line (linha
abaixo) entre os nomes.
Teremos que saber em qual Site iremos hospedar a pgina:
Se no http://geocities.com.br, a extenso ser .HTML ou Defoult (padro do site).
1 pgina dever possuir sempre o nome INDEX
O prprio Mozilla coloca a extenso .html na 1 pgina. Ficar: index.html.
Salvar como na pasta criada no Desktop:
Nas demais pginas ns teremos que colocar a extenso HTML aps o nome da
pgina.
Salvar Todos os Arquivos Usados na Pgina:
As imagens, textos e arquivos que sero usados em sua pgina, devero ser
salvos dentro da pasta no Desktop.
As imagens devero ter a extenso .gif, .jpeg, .jpn ou .bmp.
Ao scannear uma imagem que ser usada na WEB, salv-la sempre entre 72 a 96
DPI.
bom lembrar sempre, que teremos apenas 15 MG livres, no Geocities, para
hospedar.
Provedores gratuitos: http://br.geocities.yahoo.com ou http://www.hpg.ig.com.br
Buscando Uma Imagem na WEB
Acessamos um buscador. Ex: www.giffs.hpg.ig.com.br www.gifanimations.com
www.melhoresgifsanimados.rg3.net
www.criarweb.com
www.artifice.web.pt/tutoriais/cntd/tut_html1.html
Acessar a imagem prendida.
Visualizar imagem do tamanho natural.
Menu Arquivo Salvar como imagem
Marcar a opo No usar texto substituto
Opo Abrir
Salvar na pasta que contm os arquivos da pgina que est sendo criada.
Observar seus pixels
Se a imagem aparecer estourada (cheia de furos furada) no servir.
Criando a 1 Pgina
Criar um esboo da pgina a ser hospedada na WEB em uma folha de rascunho
Descrever as tabelas com suas linhas e colunas, textos, links, imagens, todas as
pginas necessrios em seu projeto.
Clicar na rea de trabalho do Mozilla Composer.
Dar enter, at aparecer uma barra de rolagem no canto direito da pgina.
Dar enter at chegarmos a um tamanho razovel para o site. (Uns 30 a 40 cm + ou
-)
Se for necessrio, poderemos usar a ferramenta Posicionamento Absoluto
Clicar na barra de ferramenta no item Posicionamento Absoluto
Nas demais pginas ns teremos que colocar a extenso HTML aps o nome da
pgina. Menu Visualizar.
Para voltar ao Mozilla Composer, aps visualizar a pgina, basta fechar o
navegador no X canto superior direito da pgina.
Criando um LINK Para Outra Pgina.
Selecione um texto ou imagem que servir para o link.
Menu Inserir Link ou Clique no boto Link.
Caixa de dilogo Propriedades de Link
Defina se link
Digitar o texto que ser o link.
Endereo do Link Digite o endereo da pgina ou um arquivo de computador ou
uma ncora para os quais ser direcionado o Link.
Clique em Selecione Arquivo.
Para pginas remotas pode-se digitar o endereo da URL da pgina no campo de
endereos do navegador. (Ou copiar e colar a URL da pgina).
Criando LINKS Dentro da Mesma Pgina.- deve-se criar uma ncora.
Clique em um ponto, no incio da linha, onde dever inserir a ncora ou selecione
uma palavra/texto.
Menu Inserir ncora Nomeada
Caixa de dilogo Propriedades da ncora.
Insira um nico nome para ncora no campo nome da ncora - OK
Um cone de ncora aparecer em seu documento marcando a sua localizao.
Criando um LINK Para Ir Para a ncora
Selecione um texto ou imagem que se deseja linkar para a ncora.
Menu Inserir LINK (ou no boto link)
Caixa de dilogo Propriedades do LINK ser iniciada.
Se o LINK for para uma ncora nomeada selecione a ncora disponvel na
pgina.
Se o LINK for para um arquivo em seu computador em HTML Basta procurar o
arquivo em Selecionar arquivo e localiza-lo.
Se o LINK for para um ttulo nivelado, ex: Ttulo 6, selecione o ttulo nivelado OK.
Renomeando A Pgina Para Que No Aparece O Rtulo Index No Navegador De
Internet
Abrir o arquivo index.
Menu formatar.
Propriedades da pgina.
Entre com o ttulo correto para sua pgina.
O ttulo que voc digitar aparecer na barra de ttulos da janela do navegador
OBS.:
Voc poder ir at a guia do Mozilla Composer <html> Cdigo Fonte
Procurar na escrita HTML a TAG <Title> index </Title>
Deletar a palavra index
Renomear, colocando um ttulo que ir aparecer na barra de ttulo de seu
navegador de Internet.
Salvar Voltar guia Normal
Navegando Entre as Pginas Criadas, os arquivos de texto, imagens etc...
Abrir todos os arquivos que sero usados.
Usar o atalho Ctrl + E.
Copiar os textos digitados e inserir as imagens programadas.
Formatando Textos (Aps digitados)
Barra de Ferramenta Formatar
Normal Aplica a formatao padro
Pargrafo: Insere uma tag de pargrafo - O pargrafo inclui margens superiores e
inferiores.
Ttulo 1 Ttulo 6: formata o pargrafo como ttulo - Ttulo 1: ttulo maior - Ttulo
6: ttulo menor.
Formatando Textos Como Ttulo.
Clique em qualquer posio do texto o qual deseja formatar.
Com marcador.
Numeradas.
Alinhando Listas ou Pargrafos.
Menu Formatar Alinhamento Opo Alinhamento
OBS.: Se voc quiser que alguma palavra de sua pgina se movimente
Acessar a guia <html> Cdigo Fonte
Procurar a palavra que deseja movimentar
Escrever antes dela a TAG <marquee> e depois da palavra </marquee>
Salvar
Voltar guia Nomal do Mozilla Composer - Visualizar
Inserindo LINK um para um endereo de e-mail MAIS SIMPLES
Digite o endereo de e-mail e selecione-
Menu Editar Copiar.
Ainda com o endereo e-mail e selecionado.
Menu Inserir - Opo LINK
Na janela que se abrir.
A janela Texto do Link j estar preenchido.
Na janela Endereo do Link
digitar
mailto:jlima@ig.com.br.
OK - OBS no dar espao entre mailto e o e-mail.
Informaes Retiradas:
Tutorial Criando Pginas na Web com Mozilla Composer - UFMG - Baixado da
Internet.
Apostila INTEL EDUCAO PARA O FUTURO
Anotaes durante o Curso da SEE/MG no perodo 29/05 09/06/06 BH