2015apostila HTML

CURSO
CONSTRUO DE WEBSITES
Aline Michelle Ellen Oliveira

Maria do Carmo Alves da Silva
Patrcia Virgnia de Souza Magalhes
Sueli Gonalves da Silva
APOSTILA DE INTRODUO LINGUAGEM HTML
HTML significa HyperText Markup Language - Linguagem de Formatao de Hipertexto.

Todo documento HTML apresenta elementos entre parnteses angulares (< e >). Esses
elementos so as etiquetas (tags) de HTML, que so os comandos de formatao da
linguagem. A maioria das etiquetas tem sua correspondente de fechamento, representada
com uma barra ( / ):
<etiqueta>...</etiqueta>
Isso necessrio porque as etiquetas servem para definir a formatao de uma poro de
texto, e assim
marcamos onde comea e onde termina o texto com a formatao
especificada por ela.

Exemplos de Tags
<html> - documento
<head> - cabealho
<title> - ttulo da pgina
<body> - corpo do documento
<h1> a <h6> - define ttulo nos tamanhos 1 a 6
<p> - novo pargrafo
<br> - quebra de linha
<hr> - define uma linha horizontal
<!--> - define um comentrio
HTML um recurso muito simples e acessvel para a produo de documentos. No
existem programas em HTML, pois HTML no uma linguagem de programao, mas de
formatao (marcao). Portanto, a rigor no existem "programadores" de HTML.
EDIO DE DOCUMENTOS HTML
Existem Editores HTML chamados WYSIWYG (what you see is what you get - o que voc
v o que voc tem). Eles oferecem ambiente de edio com um resultado final das
marcaes (pois o resultado final depende do browser1 usado para visitar a pgina).
Alguns bastante conhecidos so por
exemplo: FrontPage, Dreamweaver, Mozilla Composer, NVU e Quanta Plus.
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>
<FONT FACE="Arial" COLOR="green"> Fonte Arial Verde </FONT>

<FONT FACE="Courier New" COLOR="red"> Fonte Courier New Vermelha </FONT>
TABELA DE CORES PARA LINGUAGEM HTML
Os 16 nomes de cores aceitos segundo o HTML 3.2 so estes:
Aqua
Gray
Navy
Silver
Black
Green
Olive
Teal
blue
lime
purple
white
fuchsia
maroon
red
yellow
Os cdigos de cores so estes:

000000
003300
006600
009900
00CC00
00FF00
330000
333300
336600
339900
33CC00
33FF00
660000
663300
666600
669900
66CC00
66FF00
990000
993300
996600
999900
99CC00
99FF00
CC0000
CC3300
CC6600
CC9900
CCCC00
CCFF00
FF0000
FF3300
FF6600
FF9900
FFCC00
FFFF00
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
H seis nveis de cabealhos em HTML, de <H1> a <H6>:

<H1> Este um cabealho de nvel 1 </H1>
Esses cabealhos so mostrados no browser da seguinte forma:
Alinhamento de cabealhos - os cabealhos tm atributos de alinhamento:

<H2 ALIGN=CENTER>Cabealho centralizado</H2>
Cabealho centralizado
<H3 ALIGN=RIGHT>Cabealho alinhado direita</H3>
Cabealho alinhado direita
<H4 ALIGN=LEFT>Cabealho alinhado esquerda (default=padro)</H4>
Cabealho alinhado esquerda (default=padro)
SEPARADORES
Para organizar os textos, precisamos de separadores, apresentados a seguir.
Quebra de linha: Quando queremos mudar de linha, usamos o elemento <BR>. Isso s
necessrio quando queremos uma quebra de linha em determinado ponto, pois os
browsers j quebram as linhas automaticamente para apresentar os textos.
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> insere uma linha horizontal, como a apresentada abaixo:
Essa linha tem diversos atributos, oferecendo resultados diversos.

<HR SIZE=7> insere uma linha de largura 7 (pixels):
<HR WIDTH=50%> insere uma linha que ocupa 50% do espao horizontal
disponvel:
<HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere uma linha de comprimento

30% (do espao
horizontal
disponvel),
alinhada
direita,
sem
efeito
tridimensional:
<HR SIZE=70 WIDTH=2 ALIGN=LEFT> insere uma linha de largura 70

(pixels), comprimento 2 (pixels), alinhada esquerda (o Netscape,
aparentemente, no aceita esta formatao de <HR>):
Dica: Divises - outros elementos usados para separar pores de

texto so o <DIV> e o <CENTER>. <CENTER> centraliza os elementos
(textos, imagens, tabelas) que estiverem dentro de sua marcao.
<DIV> marca uma diviso lgica de um documento e uma formatao
bastante usada atualmente.
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:
Outras seqncias de escape suportam caracteres ISO Latin1. Aqui

est uma tabela com os caracteres mais utilizados em Portugus:
Como vemos, as seqncias de escape so sensveis caixa.

Os editores de HTML fazem essa traduo automaticamente.
ESTRUTURAO DE TEXTOS HTML
Para utilizarmos o editor de texto kwriter temos que abrir a tela
executar comando digite alt + f2
O comando a ser digitado : kwrite
ETAPAS
1 Abra o Kwrite..
2 Digite o seguinte texto:
<html>
Toda
pgina Html deve iniciar com essa tag.
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
processador de texto </p>

8 Colocando uma imagem :
Exemplo:
<img
src="brasil.gif"
alt="
imagem
do
Brasil"
height=270
width=240>
A imagem,
com extenso Gif ou Jpg, deve estar na mesma pasta que
o arquivo Html. Img src referente a imagem que precisar ser
indicado sua. Alt um texto alternativo enquanto a pgina
carregada ou quando se passa com o mouse sobre a figura.

Height e Width so as dimenses da figura em pixels, modifique a
seu gosto. Se voc no indicar as dimenses da figura, excluindo
height e width, sua imagem ter o tamanho original.
9 Feche o corpo do texto e terminar com a tag de fechamento.
Exemplo:
</body>
</html>
10 Salve com extenso .html ou .htm .
Exemplo:
teste.html ou teste.htm
Abrindo e vendo o resultado. Abra seu navegador, clique em Arquivo
/Abrir ou Abrir pgina/ Procurar . Abra a pasta onde voc salvou
sua
pgina
clique
no
arquivo
html
de
sua
pgina
de
Ok.
Lembrando que para atualizar sua pgina basta apenas abri- la no

navegador padro e clicar em Exibir/ Cdigo de Fonte e fazer as
modificaes
necessrias
no
cdigo
do
documento
Html
no
esquecendo de salva- lo.

Exemplo completo
<html>
<head>
<head>
<body>
<h1>Minha primeira Home Page</h1>
<p>Pginas
Html
podem
ser
criadas
em
qualquer
editor
ou
processador de texto </p>

<img src="brasil.gif" alt="Brasil"
height=150 width=120>
</body>
</html>
Tanto as figura como o texto ou mesmo os hyperlinks podem ser alinhados no canto
esquerdo, direito ou centralizados.

Como fazer.
<p align="center">texto alinhado ao centro</p>
<p align="right">texto alinhado a direita</p>
Caso voc no escolha nenhuma dessas duas tags o alinhamento ser automtico.
Para tornar a Home Page mais atraente use as seguintes tags:
<h1> e <marquee>. Dessa forma seu ttulo vai ser um letreiro que vai passar de um lado
para outro. No esquea de fechar com a tag </marquee> e </h1>
E <font color="red"> junto a tag </font>. Assim seu texto vai ter a cor vermelha. Vamos
tambm centralizar a imagem. E Salvaremos como teste2.htm.
Com a tag<center>e fechar com a tag </center>
Exemplo:
<html>
<head>
<head>
<body>
<h1><marquee>Minha primeira Home Page</marquee></h1>
<center><font color="red"> Pginas Html podem ser criadas em qualquer editor ou
processador de texto </font></center>
<center>
<img src="brasil.gif" alt="Brasil" height=150 width=120>
</center>
</body>
</html>
Voc pode modificar tambm o fundo, colocando uma imagem ou uma cor.
Exemplo<body bgcolor="teal"> para ou
<body background="fundo2.gif"> para imagem.
Dicas:
No aconselhvel usar imagens .bmp ( Bitmap ) por ser bem maior (em KB) que as
imagens Gif e Jpg.
Utilize nomes em seus arquivos que tenham algumas normas bsicas :
- No utilize acentos, nem espaos, nem outros caracteres raros.
- Tambm lhe ajudar escrever sempre as letras em minsculas.
Isto no quer dizer que se deve fazer nomes de arquivos curtos, melhor faz-los
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
Cellpadding Espaamento dentro da tabela com cor de fundo
CSS CASCADING STYLE SHEETS (FOLHAS DE ESTILO EM CASCATA)

AS TAGS HTML PARA FORMULRIOS E SUA ESTILIZAO COM CSS
Os diferentes tipos de formulrios que voc insere em seu documento HTML so
apresentados com um formato e cores padro, que nem sempre esto de acordo com o
projeto visual da sua pgina.
Com uso de CSS voc pode alterar a apresentao dos diferentes objetos de formulrio.
As tags HTML para formulrios abordadas so as listadas abaixo:
input;
select;
textarea;
form;
CSS Cascading Style Sheets (Folhas de Estilo em Cascata)
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)
2. Criar dados - que recebero os itens do formulrio e salv-lo em PHP
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
Clicar na rea de trabalho do Mozilla Composer

Inserindo Uma Imagem Na Pgina
Menu Inserir Opo Imagem.
Buscar o arquivo na pasta.
Inserir dentro de uma tabela.
Clicar com o lado direito sobre a imagem.
Ir em - Propriedades da Imagem.
Guia Aparncia.
Opo Alinhamento do texto.
Selecione a melhor posio do texto em relao imagem.
Se for necessrio poderemos usar a ferramenta Posicionamento Absoluto para
melhor posicionar a imagem no site.
Adicionando Um Plano de Fundo
Voc pode utilizar como plano de fundo da sua pgina no Mozilla Composer, cores
ou imagens diversas
Menu Formatar
Plano de Fundo e Cores Opo Usar cores personalizadas
Na janela de dilogo que se abrir Voc poder escolher a cor do Texto cor
do Link cor do Link Ativo cor do Link Visitado cor do Plano de Fundo ou
Imagem para o Plano de Fundo.
Inserido Tabela So teis para a organizao do texto.
Clique no lugar onde queremos inserir a tabela.
Barra de ferramenta Tabela inserir tabela, Ou:
Menu Inserir - Tabela.
Na caixa de dilogo escolher o n de linhas e colunas.
Escolher a Largura 100 Pontos e no a opo % da Janela.
Se sem borda digite o Zero. Aparecer uma borda em forma de linha pontilhada e
vermelha que desaparece ao visualizarmos da pgina.
Inseriremos a tabela programada anteriormente.
Para alterarmos as propriedades da tabela.
Barra de Ferramenta Tabela Propriedades da tabela.
Adicionar clulas em uma Tabela:

Clique dentro da tabela onde deve ser modificado.
Clique em Tabela Inserir para adicionar
Deletando uma Clula (linha coluna, clula ou clula vizinha).
Selecione linha coluna, clula ou clula vizinha a ser deletada.
Para selecionar clulas individuais Mantenha pressionada a tecla Ctrl e clique
na clula que voc deseja excluir.
Menu Tabela Excluir.
Mesclando Clulas:
Selecione as clulas a serem mescladas.
Menu Tabela Combinar clulas.
Mesclando Clulas direita esquerda.
Clique na clula situada a direita.
Menu Tabela Combinar clula direita. (idem esquerda)
Dividindo Clulas:
Clique dentro da clula a ser dividida.
Menu Tabela Dividir Clula para clulas mescladas.
Para alterar o comportamento Editar Preferncias Mozilla Composer Edio
de Tabelas Marcar ou desmarcar a caixa de seleo conforme a preferncia.
Para maior facilidade na edio, recomenda-se que seja desabilitado a opo
Cascading Style Sheets ( CSS ).
Convertendo Texto em Tabela.
Selecione o texto.
Menu Tabela Criar tabela da seleo
Inserindo Linhas Horizontais
So usadas para separar diferentes sees de documento.
Menu Inserir Linhas horizontais
Clique duplo sobre ela, abrir uma caixa de dilogo para a sua formatao.
Criando as Demais Pginas:
Arquivo: Salvar Como

Formataremos a tabela da maneira que quisermos: borda, sombra, etc.
Menu Formatar Plano de fundo e cores
Clicar sobre os quatro quadradinhos, um cada vez, para personalizar as cores.
Menu Arquivo - Salvar (Ctrl + S)
OBS.: (Ctrl + B para negritar o texto)
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.
Menu Formatar > Par[agrafo, escolha o tamanho do ttulo que desejar.

EX: Ttulo 1 para o ttulo principal e Ttulo 2 para o nvel abaixo.
Formatando Listas:
Menu Formatar Listas
Escolha o estilo de lista.
Voc pode dar um clique duplo na lista para abrir a

caixa de dilogo Propriedade da lista
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: endereo de e-mail Ex:
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

2015apostila HTML

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

2015apostila HTML

Enviado por

Direitos autorais:

Formatos disponíveis

CURSO

Aline Michelle Ellen Oliveira

APOSTILA DE INTRODUO LINGUAGEM HTML

HTML significa HyperText Markup Language - Linguagem de Formatao de Hipertexto.

marcamos onde comea e onde termina o texto com a formatao

especificada por ela.

<FONT FACE="Arial" COLOR="green"> Fonte Arial Verde </FONT>

Os cdigos de cores so estes:

H seis nveis de cabealhos em HTML, de <H1> a <H6>:

Alinhamento de cabealhos - os cabealhos tm atributos de alinhamento:

<HR> insere uma linha horizontal, como a apresentada abaixo:

Essa linha tem diversos atributos, oferecendo resultados diversos.

<HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere uma linha de comprimento

<HR SIZE=70 WIDTH=2 ALIGN=LEFT> insere uma linha de largura 70

Dica: Divises - outros elementos usados para separar pores de

Outras seqncias de escape suportam caracteres ISO Latin1. Aqui

Como vemos, as seqncias de escape so sensveis caixa.

pgina Html deve iniciar com essa tag.

processador de texto </p>

com extenso Gif ou Jpg, deve estar na mesma pasta que

o arquivo Html. Img src referente a imagem que precisar ser

indicado sua. Alt um texto alternativo enquanto a pgina

carregada ou quando se passa com o mouse sobre a figura.

Lembrando que para atualizar sua pgina basta apenas abri- la no

esquecendo de salva- lo.

processador de texto </p>

esquerdo, direito ou centralizados.

Cellpadding Espaamento dentro da tabela com cor de fundo

CSS CASCADING STYLE SHEETS (FOLHAS DE ESTILO EM CASCATA)

CSS Cascading Style Sheets (Folhas de Estilo em Cascata)

2. Criar dados - que recebero os itens do formulrio e salv-lo em PHP

Clicar na rea de trabalho do Mozilla Composer

Adicionar clulas em uma Tabela:

Arquivo: Salvar Como

OBS.: (Ctrl + B para negritar o texto)

Menu Formatar > Par[agrafo, escolha o tamanho do ttulo que desejar.

Voc pode dar um clique duplo na lista para abrir a

mailto: endereo de e-mail Ex:

Você também pode gostar