HTML Basico

Html Bsico - Parte 1
Objetivo:
O objetivo deste tutorial de ensinar a linguagem html bsica para que voc possa criar suas
pginas a internet.
Pr-requisito:
Para voc poder acompanhar o desenvolvimento deste tutorial, ser necessrio ter conhecimento
no
mnimo
do
de informtica bsica.
Nota:
Irei ensinar a linguagem de html de uma forma bem objetiva, ou seja, iremos aprender na
prtica atravs da criao pginas.
Para comear vamos falar um pouquinho sobre a internet , este universo virtual enorme que nos
possibilita obter vrias informaes entre outros, hoje muito dificil viver sem a internet, na maioria
das vezes o mundo gira sobre a internet, as empresas em grande maioria esto online vendendo seus
produtos ou prestando servios e a partir deste tutorial iremos comear aprender a criar as nossas
prprias pginas em pouco tempo estaremos com nosso site na rede mundial como conhecida a
internet.
Hoje para disponibilizar as pginas na internet precisamos de um servidor que fica responslve
por armazernar nossas paginas e disponibiliza-la 24 por dia, com isso podemos acessar os contedos de
qualquer computador conectado a internet. Podemos criar sites sobre qualquer assunto que quisermos,
por exemplo: site com informaes pessoais, site de prestao de servios, site sobre noticas entre
outros.
Existe tambm a intranet e extranet, a difrena entre um e outra a seguinte:
Intranet: Podemos dizer que uma internet interna, ou seja, pode ser utilizado por funcionrios
de uma empresa, no sendo possvel acessar fora da empresa.
Extranet: Usando as empresas que tenham filiais como exemplo as mesmas podem fazer um
interconexo para trocar de arquivos entre outros.
Para eu ensinar HTML a voc iremos trabalhar desde do inico com um projeto de criao de um
site, que ir comear bem simples e ao longo do apredizado iremos aperfeioando. Para iniciar vamos
saber o que significa HTML.
Html HyperText Markup Language (Linguagem de formatao de hipertexto), lembrando
sempre que html no uma linguagem de programao e sim de formatao.
Para edio de html, ou seja, para escrevermos html podemos usar o bloco de notas do windows
ou editores que entese facilita bastante, por que traz a maioria dos comandos e atributos prontos
cabendo a ns s definirmos os valores, em nosso caso que estamos aprendendo vamos utilizar o bloco
de notas para fixarmos bem os comandos.
Para iniciar a escrever html sempre comeamos pela estrura bsica da pgina que a seguinte:
<html> * Inicia a pgina
<head> * Inicia o cabealho
<title> * Inicia o nome do cabealho
* aqui voc coloca o nome que voc deseja que aparea
</title> * Aqui fecha o nome do cabealho
</head> * Fecha o cabealho
<body> * Inicia o corpo da pgina
* Aqui entre estas tags colocamos as imagens, textos e etc.
</body> * Fecha o corpo da pgina
</html> * Fecha a pgina
Vou explicar esta estrutura bsica acima, sempre comeamos utilizandos as tags <html> para
iniciar e </html> para fechar o documento, dentro destas tags colocamos as tags <head></head> e
dentro dessas colocamos <title></title> para definir o nome do cabealho da pgina e por ltimo dentro
das tags <body></body> colocamos imagens, textos, entre outros, prticamente tudo que colocamos
entre estas tags vai ser o que iremos visualizar na pgina.
Aps ter feito esta parte precisamos salvar a pgina sempre em um desses formatos html ou
htm, sempre aconselhavl salvar em html, ento para isso vamos dar um nome a esta pgina acima
que vai se chamar meusite.html.
Primeiramente crie uma pasta na area de trabalho do seu computador com o nome de Site,
dentro da mesma onde vamos salvar nossas pginas e projetos ao longo do desenvolvimento dos
tutoriais, irei mostrar passo a passo atravs das telas para que voc tenha um melhor entendimento.
Primeiramente copie esta estrutura da mostrada acima, s que sem os * que contm as explicaes
sobre as tags e cole dentro do bloco de notas e depois salve com o nome que definimos dentro da basta
que voc acabou de criar.Veja o procedimeto baixo:
Tela 001 (estrutura bsica inserida)
Tela 002 (Salve esta pgina dentro da pasta com o nome meusite.html)
Feito isso abra a basta e clique sobre icone para abrir a pgina que vai estar desta maneira
baixo:
Tela 003(Pagina aberta)

Note que acabamos de abrir a pgina dentro do internet explorer, mas a mesma no contem
nenhum contedo em seu corpo ou mesmo o nome do cabealho.
Ento vamos inserir um nome no cabealho que vai ser Meu Site para isso basta colocar entre
as tags <title></title>.
E dentro do corpo da pgina, ou seja, entre as tags <body></body> vamos escrever a seguinte
frase Esta a minha primeira pgina.
No necessrio abrir um bloco de notas vazio, porque iremos aprender a abrir o cdigo fonte da
pgina que acabamos de criar, com isso a estrutura da pgina j esta pronta apenas vamos alterar
conforme nossa necessidade.
Vou ensinar como voc deve abrir o cdigo fonte da pgina sendo que o processo muitoo
simples, abra o pagina que criamos, no internet explorer clique sobre o men exbir depois clique
novamente em exibir cdigo fonte, pronto vai ser aberto o bloco de nota com a estrura da pgina, veja
o procedimento abaxo:
Tela 004 (Clique no men exibir e depois em cdigo fonte)
Tela 005 (Vai ser aberto o bloco de notas com a estrutura da pgina)
Agora que estamos com o bloco de notas aberto iremos inserir a frase no cabealho e no corpo
da pgina, veja o procedimento abaixo:
Tela 006 ( Veja as frases inseridas no bloco de notas)

Depois que fizemos as alteraes basta voc salvar para que seja modificada a pgina, minimize
o bloco de notas e na pgina clique em atualizar para ver as alteraes, a pgina ir ficar da seguinte
maneira:
Tela 007 (Esta ser a pgina depois de modificada)
Concluso
Ensinei a criar uma pgina simples em html, utilizando as tags bsicas, tambm expliquei a
funo de cada tag desenvolve e onde deve ser colocado os textos, imagens, cabealho tudo uma forma
prtica e objetiva, na prxima parte iremos aperfeioar esta pgina.At a prxima parte.
Html Bsico. Parte 2

Objetivo:
O objetivo deste tutorial continuar aprendendo a linguagem html bsica, vamos aprender os
comandos para alinhamento de textos.
Pr-requisito:
no
mnimo
do
de informtica bsica e Parte 1 do tutorial html bsico.
Nota:
Vamos comear criando uma pgina na qual daremos o nome de index.html, inserir nesta
pgina uma pequena frase de minha autoria para que possamos fazer as alteraes quanto ao
alinhamento do texto, sendo que vou ensinar os seguintes posicionamento bsicos:
Alinhamento
Alinhamento
Alinhamento
Alinhamento
do
do
do
do
texto a esquerda;
texto centralizado;
texto a direita;
texto justificado.
Copie abaixo a pgina, cole dentro do bloco de notas e salve a mesma com nome que definimos
dentro da pasta site que deve se encontrar na area de trabalho do seu computador.
<html>
<head>
<title>Alinhamento de texto</title>
</head>
<body>
Nunca desista do seu sonho, lute por ele sempre que algum dia voc ir realiza-lo e se nessa
vida no conseguir fazer tudo faa tudo aquilo que pode.
</body>
</html>
Veja como deve ficar esta pgina atravs da tela abaixo:
Tela 001
Para colocar o texto alinhado a esquerda utilizamos a seguinte tag:
<p align=Left> * Aqui voc insere o texto </p>
Para colocar o texto centralizado no meio da pgina utilize a seguinte tag:
<p align=center> *Aqui voce insere o texto </center>
Para colocar o texto a direita utilize a seguinte tag:
<p align=Right> * Aqui voc insere o texto </center> </p>
<p align=Justify> *Aqui voc insere o texto </center>
Veja no texto acima que esta alinhado a esquerda, mas igual vamos colocar ele entre cada uma
das tags para podermos observar o seu posicionamento, veja estes procedimentos atravs das telas
baixos.
Primeiro vamos ver como fica o texto alinhado a esquerda, para isso atravs da pgina
index.html abra o cdigo fonte e depois coloque a tag <p align=left></P> de maneira que o texto fique
no meio e salve.
Tela 002 (Selcionado o cdigo fonte)
Tela 003 (Texto entre a tag de alinhamento a esquerda)
Tela 004 (Note que o texto quase no se altera porque mas o mesmo esta com a formatao de
alinhamento a esquerda)
Para as demais formataes o processo o mesmo que acabamos de fazer, ou seja, para o
prximo alinhamento que ser o centralizado, voc pode apenas subistituir o nome left por center e
assim para as demais tags, por isso vou mostrar apenas como deve ficar as telas com o alinhamento do
texto.
- Alinhamento centralizado.
Tela 005 (Note o texto centralizado)

- Alinhado a direita
Tela 006 (Texto a direita)

- Texto Justificado, nesta formatao irei mostrar em duas telas a primeira eu aumentei o texto e
deixei alinha a direita, na segunda tela eu coloquei o texto justificado para que voc possa notar a
diferna.
Tela 007
Tela 008 (Note que a palavra nunca no canto direito ficou com mais espao para a direita,
assim com a frase ficou mais espaos entre as palavras)
Concluso
Ensinei as formataes bsicas para texto, com a utilizao da tag <p align=></p> , expliquei
a funo de cada tag desenvolve de uma forma bem prtica e objetiva, mostrei atravs das telas para
que voc tenha uma melhor compreenso, na prxima parte iremos aprender a formatar o texto. At a
prxima parte.
Html Bsico. Parte 3

Objetivo:
O objetivo deste tutorial a utilizao de cabealhos e formatao de texto, sempre de uma
forma bem objetiva , tudo mostrado atravs das telas.
Pr-requisito:
no
mnimo
do
de informtica bsica e Parte 1 e Parte 2 do tutorial html bsico.
Nota:
Vamos comear criar uma pgina para inserir os cabealhos, vamos dar o nome de
cabecalho.html para a mesma, para isso abra o bloco de notas copie a pgina abaixo e cole, feito isso
salve a mesma sempre dentro da basta site.
<html>
<head>
<title> Cabealho </title>
</head>
<body>
Estamos aprendendo html
</body>
</html>
Veja como deve ficar esta pgina atravs da tela abaixo:
Tela 001
Cabealhos servem para formar um texto como na formula de um titulo de uma forma que
atribui o tamanho maior e colocam o texto em negrito. Existe vrios tipos de cabealhos sendo que vai do
maior <h1> at o menor <h6> tambem dentro desses cabealhos possivel inserir o atributo align para
fazer a alinhamento do mesmo, vamos ver como fica os texto que esta na pgina que criamos em forma
de cabealho.
Irei mostrar apenas como voc deve fazer para inserir o cabealho no nvel maior sendo que os
demais o procedimento o mesmo, ou seja, voc s ira mudar o nmero dentro da tag <h1> para
<h2>, sendo assim , irei mostrar s as telas.
Atravs da pgina cabealho abra o cdigo fonte da mesma e coloque o texto entre <h1></h1>
e depois salve.
Tela 002 (Coloque o texto entre as tag e salve)
Tela 003
Para cabealho no nvel dois <h2>.
Tela 004
Cabealho nvel trs <h3>.
Tela 005
Cabealho no nvel quatro <h4>
Tela 006
Cabealho no nvel cinco <h5>
Tela 007
Cabealho no nvel seis <h6>
Tela 008
Mostrado os 6 tamanhos de cabealhos vamos a aprender a formartar o texto, vamos criar outra
pgina e daremos o nome de formatacao.html, neste vamos colocar o nome da fonte, tamanho e cor.
Primeiro vamos colocar um tamanho no texto que ser 16, isso possivel atravs da tag
<Font></font> e seus atributos que para representar o tamanho Size , entao a tag vai ficar assim
<font size=16></font> o texto deve ficar entre as tags, veja o procedimento abaixo.
Abra o bloco de notas e copie, cole e salve a pgina baixo.
<html>
<head>
<title>Formatao</title>
</head>
<body>
Formatao de texto</body>
</html>
A pgina deve ficar assim:
Tela 009
Agora vamos inseri a tag font com seu atributo size, para isso abra o bloco de notas e coloque o
texo entre a tag <font size=16></font> e depois salve, conforme e mostrado abaixo:
Tela 010
Tela 011
Agora iremos inserir o tipo de font, ou seja, arial, verdana, times new roman entre outras, isso
possivel atravs do atributo face, o procedimento o mesmo que fizemos para inserir o tamanho do
texto.
Vamos colocar a font verdana, sendo que vamos deixar o mesmo tamanho do texto e aproveitar
a tag font, sendo assim em fez de acrescentarmos toda tag <font face=verdana acrescentamos s
face=verdana , vai ficar assim <font size=16 face=verdana></font>, veja o procedimento abaixo:
Tela 012
Tela 013 (texto formatado com a font verdana)

Por ltimo vamos acrecentar cor ao texto atravs do atributo color o procedimento o mesmo,
s que existe duas maneiras de definirmos a cor, atravs do nome este tem que sem sempre em ingls,
ou seja, se vamos definir a cor Azul teriamos que escrever Blue, ou atravs de represento numrica a
cor Preta ficaria representada assim #000000, mas no se preocupe fcil, aproveitando a tag vamos
inserir a cor azul representada atravs do nome, existe uma tabela que ou alguns editores que trazem a
representao de cores atravs dos nmeros, a tag ficaria assim <font size=16 face=verdana
color=blue></font>, veja o procedimento baixo atravs das telas.
Tela 014
Tela 015 (Texto com as trs formataes)
Concluso
Ensinei a inserir tamanho, tipo de font e cor no texto, com a utilizao da tag < font></font> e
seus atributos Size, Face e Color, expliquei a funo da tag e do atributo desenvolve e tambm a
utilizao de cabealhos de forma objetiva, tudo atravs das telas para que voc tenha uma melhor
compreenso, na prxima parte continuaremos o nosso aprendizado sobre html.Bons Estudos.
Html Bsico. Parte 4

Objetivo:
O objetivo deste tutorial continuar ensinado sobre formatao de texto, iremos aprender a deixar
o texto em negrito, italico, sublinhado, linha sobre o texto e a combinar as trs opes mais importantes
de formatao, irei ensinar a inserir cor e imagens de fundo na pgina sempre de uma forma bem
objetiva , tudo mostrado atravs das telas.
Pr-requisito:
no
mnimo
do
de informtica bsica e Parte 1, Parte 2 e Parte 3 do tutorial html bsico.
Nota:
Vamos comear criar uma pgina com texto inserido para que possamos fazer as alteraes,
vamos dar o nome de aprender.html para a mesma, para isso abra o bloco de notas copie a pgina
abaixo e cole, feito isso salve a mesma sempre dentro da basta site.
<html>
<head>
<title> Aprender Html </title>
</head>
<body>
Estamos aprendendo html
</body>
</html>
Vamos continuar a formatao de texto, iremos colocar o texto em negrito atravs das tags
<b></b>, basta inserimos o texto que voc quer que fique em negrito entre as tags, veja o
procedimento abaixo:
Selecione o cdigo fonte da pgina que acabamos de criar, dentro do mesmo iremos inserir as
tags no texto que escrevemos.
Tela 001
Tela 002
Agora iremos deixar o texto em italico utilizando as tag <i></i>, o procedimento o mesmo que
acabamos de fazer para colocar o texto em negrito, sendo assim, vamos substituir as tag <b></b> por
<i></i>, veja a tela abaixo:
Tela 003
Agora vamos deixar o texto sublinhado atravs das tag <u></u> o procedimento o mesmo
que colocar o texto em negrito, veja o procedimento abaixo:
Tela 004
Agora digamos que queira deixar o texto com as trs formataes negrito, alinha e sublinhado,
basta inserir todas as formataes juntas, vamos ver os procedimentos:
Tela 005
Tela 006
Agora vamos inserir cor e imagem de fundo na pgina atravs dos atributos bdgcolor e
background, veja o procimento primeiro para inserir cor de fundo, vamos definir a cor azul para nossa
pgina.
Dentro da tag <body> iremos acrescentar o atributo bgcolor, o
maneira:
mesmo deve ficar desta
Tela 007 (Note como deve ficar a tag body acrescida do atributo bgcolor com o nome da cor)
Tela 008
Agora iremos inserir uma imagem de fundo na nossa pgina utilizando o atributo background,
sendo que a figura deve estar na mesma basta onde se encontra a pgina, este atributo vai ficar da
seguinte maneira:
Tela 009
Tela 010
Concluso
Ensinei a inserir tamanho, tipo de font e cor no texto, com a utilizao da tag < font></font> e
seus atributos Size, Face e Color, expliquei a funo da tag e do atributo desenvolve e tambm a
utilizao de cabealhos de forma objetiva, tudo atravs das telas para que voc tenha uma melhor
compreenso, na prxima parte continuaremos o nosso aprendizado sobre html. Bons Estudos.
Html Bsico. Parte 5

Objetivo:
O objetivo deste tutorial ensinar a usar atributos para pgina link, vlink e alink e criar lista
desordenas sempre de uma forma bem objetiva , tudo mostrado atravs das telas.
Pr-requisito:
no mnimo do de informtica bsica e Parte 1, Parte 2, Parte 3 e Parte 4 do tutorial html bsico.
Nota:
Para comear irei explicar a funo de cada um dos atributos link, vlink e alink dentro da tag
<body>:
Link: podemos utilizar para definir a cor dos link que no foram visitados;
Vlink: podemos utilizar para definir a cor dos links j visitados;
Alink: podemos utilizar para ver a cor dos link ativos, ou seja, quando clicamos no link.
Abra o bloco de notas copie a pgina link.html abaixo para ver um exmplo de cada um.
<html>
<head>Links</head>
<body>
<A HREF="">Definio de cor dos links</A>
</body>
</html>
Vejamos como vai ficar a pgina:
Tela 001
Note que a cor do link esta azul mas agora utilizando o atributo link iremos definir a cor verde, o
mesmo deve ficar assim <body link=green> vamos inserir no bloco de notas:
Tela 002
Agora salve a pgina e atulize em seu navegador, a mesma deve ficar igual a tela abaixo:
Tela 003
Agora iremos inserir vlink, o procedimento o mesmo, vamos inserir a cor vermelha, veja o
procedimento abaixo:
Tela 004
Tela 005 (Clique sobre o link, o mesmo vai ficar desta cor)
Agora por ltimo iremos ver o alink para o mesmo vamos definir a cor preta, note que estou
colocando os tres atributos juntos na pgina:
Tela 006
No irei mostrar a tela seguinte para ver a cor do mesmo quando e clicado por que este
procedimento muito rpido para capturar a tela.
Agora iremos aprender a criar listas desordenadas que podem servir para definir e enumerar
elementos, cabealhos, titulos entre outros, sua criao simples e para cria-las utilizamos as etiquetas
<ul></ul> sendo que cada um dos elementos fica citado por outra etiqueta que <li></li> sendo assim
as memas ficaram:
<ul>
<li> Internet</li>
<li> Computador</li>
<li> Site</li> </ul>
Na mesma pgina que fizemos os exmplos de utilizaao dos atributos para link, iremos utilizar
para ver este exemplo.
Tela 007
Tela 008
Tambm podemos definir o tipo de marcador, para isso utilizamos mais um atributo que o
type que deve ser incluido dentro da etiqueta <u> sendo que podemos definir os seguintes tipos de
marcadores e o mesmo ficaria assim:
<ul type=Square>
Circle
Square
Disc
Vamos ver os tipos square e circle, na orde abaixo, sendo que o tipo disc o mesmo que
mostrei na tela 008 copie e cole no bloco de notas, salve e deposi atualize a pgina:
<ul type=square>
<li> Internet</li>
<li> Site</li>
</ul>
Tela 009
Tela 010
Agora utilizaremos os seguintes:
<ul type="circle">
<li> Internet</li>
<li> Site</li>
</ul>
Tela 011
Tela 012
Concluso
Ensinei a utilizar os atributos para o corpo da pgina, sendo esses link, vlink e alink e tambm a
criar lista desordenadas juntamente com a utilizao do atributo type para definir tipos de marcadores
dos quais utilizamos circle, disc e square, tudo de uma forma objetiva e mostrado atravs das telas para
que voc tenha uma melhor compreenso, na prxima parte continuaremos o nosso aprendizado sobre
html.Bons Estudos.
Html Bsico. Parte 6

Objetivo:
O objetivo deste tutoria a criar lista ordenas e lista de definio sempre de uma forma bem
objetiva , tudo mostrado atravs das telas.
Pr-requisito:
no
mnimo
do
de informtica bsica e Parte 1, Parte 2, Parte 3 , Parte 4 e Parte 5 do tutorial html bsico.
Nota:
Vamos aprender a criar listas ordenadas, ento crie uma pgina em branco com o nome de
lista.hml:
<html>
<head><title>Listas</title>
<body>
<center><h1>Listas</h></center>
</body>
</html>
Tela 001
Sua criao simples e para cria-las utilizamos as etiquetas <ol></ol> sendo que cada um dos
elementos fica citado por outra etiqueta <li></li> sendo assim as memas ficaram:
<ol>
<li> Internet</li>
<li> Site</li>
</ol>
Tela 002
Tela 003
Tambm podemos definir o tipo de estilo utilizado pela lista como nmeros ou at mesmo utilizar
letras (A, B, C) para isso utilizamos mais um atributo que o type que deve ser incluido dentro da
etiqueta <ol> sendo que o mesmo ficaria assim:
<ol type=a>
Iremos ver os cada um desses tipos lista ,copie e cole no bloco de notas a lista abaixo, salve e
depois atualize a pgina:
<ul type="a">
<li> Internet</li>
<li> Site</li>
</ul>
Tela 004(Por letra)
Tela 005
Agora iremos aprender a criar lista d definio o processo semelhante ao que acabamos de
aprender, portanto, para criar a a lista utilizamos as etiquetas <dl></dl> sem do utilizarenmos duas
etiquetas para definio <dt></dt> e <dd></dd>, ento ficaria assim:
<dl>
<dt>Html</dt>
<dd> Html Basico</dd>
<dt> Aprender</dt>
</dl>
Ou poderiamos definir da seguinte maneira:
<dl>
<dd>Aprender
<dl>
<dd>Html
<dl>
<dd> Sempre
</dl>
</dl>
</dl>
Veja como fica na pgina com o primeiro e segundo cdigo, para isso,copie e cole no bloco de
notas, salve para visulizar no brauser.
Tela 006
Tela 007
Segundo cdigo:
Tela 008
Tela 009
Concluso
Ensinei a utilizar a criar listar ordenadas e listas de definio , tudo de uma forma objetiva e
mostrado atravs das telas para que voc tenha uma melhor compreenso, na prxima parte
continuaremos o nosso aprendizado sobre html.Bons Estudos.
Html Bsico. Parte 7

Objetivo:
O objetivo deste tutorial ensinar a criar Links internos e Links locais, tudo mostrado atravs
das telas.
Pr-requisito:
no
mnimo
do
de informtica bsica e Parte 1, Parte 2, Parte 3 , Parte 4, Parte 5 e Parte 6 do tutorial html bsico.
Nota:
Vamos comear apreder a criar links internos, que so links utilizados dentro de uma mesma
pgina, para isso utilizamos as etiquetas <a></a> e dentro da abertura da mesmo colcamos o caminho
da pgina, ento vamos criar a pgina abaixo com um pequeno texto onde vamos repetir para que o
mesmo fique maior e iremos deixar a ltima parte em azul, porque iremos inserir o link fazendo
referncia ao mesmo, e vamos salvar a pgina com o nome de linkinterno.html:
<html>
<head><title>Listas</title>
<body>
<center><h1>Links Internos</h></center>
Dominar a internet hoje em dia muito importante, a maioria das empresas hojem tem internet
e realizam seus negcios atravs da mesma, comprando produtos do fornecedores e at mesmo vendo
seus produtos.
Muitas empresas tem equipes de funcionrios responsveis por comprar e vender na internet,
atendimento ao vivo, por isso e muito mais a importncia de voc dominar a internet.
<br><br>
seus produtos.
<br><br>
seus produtos.
<br><br>
<font color=blue>
seus produtos.
</font>
</body>
</html>
Tela 001
Tela 002 (Parte de baixo da pgina em azul)

Vamos inserir o link, para que o mesmo possa ser criado teremos que ter um segundo link que
ser o destino, ou seja, iremos criar dois links, um para origem e outro para o destino.
Neste texto que criamos acima iremos colocar o link de origem , na palavra Dominar e vamos
especificar o destino a palavra empresas no ltimo texto, o link vai ficar assim:
<a href=#empresas>Dominar</a>
Tela 003 (Veja onde foi inserido o link de origem)
Tela 004 (O Link vira marcado)

Feito esta parte iremos criar o link de destino na palavra empresas o processo quase o
mesmo, apenas iremos substituir href por name e no iremos utilizar #, veja como deve ficar:
Tela 005
Quando voc clicar na palavra dominar que esta em outra cor, como mostrado na tela
abaixo:
Tela 006
A pgina deve descer a at a palavra que definimos:
Tela 007
Agora iremos criar link local, estes link se diregem a outra pgina do mesmo site, para isso
vamos criar outra pgina com o nome pgina2.html.
<html>
<head><title>Pagina Dois</title>
<body>
<center><h1>Links Locais</h></center>
seus produtos.
<br><br>
seus produtos.
<br><br>
</body>
</html>
Depois que criamos a pgina 2, iremos criar o link na pgina linkinterno.hml para quando for
clicado o mesmo acione a pgina2.html
Tela 008 (Pgina 2 criada)

Abra o bloco de notas atravs do codigo fonte da pgina linkinterno.html e insira o cdigo abaixo:
<br><br>
<a href="C:\Documents and Settings\infohelp\Desktop\site\pagina2.html">Link Para A Pgina
Dois</a>
<br><br>
A parte que esta entre aspas duplas o caminho da pgina2, ou seja, entre estas aspas voc
deve colcar sempre o caminho da pgina que voc deseja abrir, para achar este caminho muito fcil,
basta abrir a pgina que voc deseja chamar e copiar o caminho, veja abaixo o caminho acima:
Tela 009
Tela 010 (Criando o link na pagina linkinterno)
Tela 011
Pronto, terminamos, basta clicar no link acima e o mesmo vai mostar a pagina2.html.
Concluso
Ensinei como criar links internos e links locais , tudo de uma forma objetiva e mostrado atravs
das telas para que voc tenha uma melhor entendimento possvel, na prxima parte continuaremos o
nosso aprendizado sobre html.Bons Estudos.
Html Bsico. Parte 8

Objetivo:
O objetivo deste tutorial ensinar a criar Links remotos e Link a endereos de correio, tudo
mostrado atravs das telas.
Pr-requisito:
no mnimo do de informtica bsica e Parte 1, Parte 2, Parte 3 , Parte 4, Parte 5, Parte 6 e Parte 7 do
tutorial html bsico.
Nota:
Vamos comear a criar links remotos, que so links utilizados para fora da nossa pgina, ou
seja, para acessar pginas de outros sites. Estes links so fcil de criar atribuimos o caminho da pgina
desejada atravs da URL, vamos criar a pgina abaixo, para depois criarmos um link para a
pgina www.bol.com.br para esta pgina que iremos criar daremos o nome de linkremoto.html:
<html>
<head><title>Links remotos</title>
<body>
<center><h1>Links Remotos</h></center>
</body>
</html>
Depois de criado esta pgina vamos inserir um texto, e no mesmo criaremos o link para acessar
a pgina o bol.
O texto ser o seguinte:
Clique aqui para ir para a pgina do bol

Neste texto vamos criar o link que deve ficar assim:
<a href=http://www.bol.com.br> Clique aqui para ir para a pgina do bol.</a>
Acompanhe todos este procedimentos abaixo:
Tela 001
Tela 002 (Inserindo Texto)
Tela 003
Tela 004 (Inserindo Link no texto)
Tela 005
Agora iremos aprendr a criar links endereos de correios, que ao clicar no mesmo, abre uma
janela onde podemos digitar a mensagem ao e-mail determinado no link. para vamos ento, criar uma a
seguinte pgina abaixo com o seguinte nome:
Linkcorreios.html
<html>
<head><title>Links Correios</title>
<body>
<center><h1>Links a Correios Eletronicos</h></center>
<font face=arial size=3>Contato</a>
</body>
</html>
Aps ter criado esta pgina vamos inserir o link, para enviar o e-mail, acompanhe todos estes
procedimentos atravs das telas:
Tela 006
Tela 007
Tela 008
Concluso
Ensinei como criar links remotos e links para endereos de correios , tudo de uma forma
objetiva e mostrado atravs das telas para que voc tenha uma melhor entendimento possvel, na
prxima parte continuaremos o nosso aprendizado sobre html. Bons Estudos.
Html Bsico. Parte 9

Objetivo:
O objetivo deste tutorial ensinar a criar Links para downloadas de arquivos e a inserir imagens
na pgina, bem como modificar sua altura, largura, inserir borda e redimensiona-la para o centro e a
direita da pgina, tudo mostrado atravs das telas.
Pr-requisito:
no mnimo do de informtica bsica e Parte 1, Parte 2, Parte 3 , Parte 4, Parte 5, Parte 6, Parte 7 e
Parte 8 do tutorial html bsico.
Nota:
Vamos comear a criar links para arquivos, este link quae igual aos links remotos, a diferena
que neste link fazemos referencia a um tipo de arquivo. Estes links so fcil de criar atribuimos ao
mesmos o caminho do arquivo atravs da URL, vamos criar a pgina abaixo, para depois criarmos um
link para um determinado arquivo, para esta pgina que vamos colocar o nome de linkrarquivos.html:
<html>
<head><title>Links Arquivos</title>
<body>
<center><h1>Links Arquivos</h></center>
</body>
</html>
arquivo.
Aps ter criado esta pgina vamos inserir o link, e no mesmo vamos inserir o caminho para um
O link ser o seguinte:
Clique aqui para fazer download

Nesta frase vamos atribuir o link que deve ficar assim:
<a href= arquivo.zip> Clique aqui para fazer o download.</a>
Irei criar o link exemplo para fazer o download de uma pasta , para isso criei uma pasta com o
nome exemplo e dentro da mesma coloquei um arquivo com extenso exe. Compactei amesm
utilizando winzip e salvei a dentro da pasta htdocs, o motivo de eu ter salvado dentro desta pasta que
eu irei abrir a pgina links arquivos.html atravs do servidor apache que tenho instalado em minha
mquina, para que esse procedimento funcione corretamente. Para que voc possa testa-la poder
incluir esta pgina num servidor web, por exemplo o site do yahoo, oferece acesso gratuito para voc
criar e hospedar suas pginas atravs do geocities.
Acompanhe os procedimentos abaixo:
Tela 001 (Criando o Link)

Agora no momento que voc clicar neste link que acabamos de cria, ser aberta uma janela
perguntando se voc deseja abrir ou salvar o arquivo.
Tela 002
Agora irei ensinar a inserir uma imagem na mesma pgina, esta imagem deve estar dentro da
pgina site, para isso utilizamos o utlizamos a seguinte etiqueta:
<img src= aqui colocamos o caminho da imagem>
<IMG SRC="Montanhas azuis.jpg>
Tela 003
Podemos atribuir atributos a esta imagem, ou seja, podemos dimensionar altura e largura, inserir
borda, para isso usamos as atributos width (Largura) e height (Altura) e Border, veja o procedimento
abaixo:
Tela 004
Tela 005
Tambm podemos fazer o alinhamento desta imagem, veja que a mesma j aparece com
alinhamento a esquerda, voc pode centraliza-la utilizando as etiquetas <center></center>, colocar a
direita,usando as etiquetas <p align=></p> veja o procedimento.
Tela 006
Tela 007 (Alinhado ao centro)
Concluso
Ensinei como criar links para downloads de arquivos e tambem cmo iserir, e modificar altura,
largura e colocar borda na imagem , e coloca-la no modo centralizado e a direita da pgina, tudo de uma
forma objetiva e mostrado atravs das telas para que voc tenha uma melhor entendimento possvel, na
prxima parte continuaremos o nosso aprendizado sobre html. Bons Estudos.
Html Bsico. Parte 10

Objetivo:
O objetivo deste tutorial ensinar voc a criar tabelas, bem como trabalhar com esta tabela
utilizandos alguns dos seus atributos, tudo mostrado de forma simples e objetiva atravs das telas.
Pr-requisito:
no mnimo do de informtica bsica e Parte 1, Parte 2, Parte 3 , Parte 4, Parte 5, Parte 6, Parte 7, Parte
8 e Parte 9 do tutorial html bsico.
Nota:
Vamos comear criando uma pgina para a criao das tabelas a qual iremos chamar de
tabelas.html, copie o cdigo abaixo e salve dentro da pasta site que a nossa pasta de projetos.
<html>
<head><title>Tabelas HTML</title></head>
<body>
<center>
<h2>Criao de Tabelas Html</h2>
</center>
</body>
</html>
Veja a pgina abaixo:
Tela 001
Para
comear
<table></table>
criar
tabelas
utilizamos
as
seguintes
etiquetas:
Dentro dessas colocamos as outras etiquetas, os textos, imagens entre outros, ou seja,
utilizamos as etiquetas <tr></tr> para definir linha na tabela e as etiquetas <td>/<td> para definir a
coluna da mesma, vou mostrar um estrutura basica , onde vou mostrar uma tabela que tem duas linhas e
duas colunas. Para isso atravs da pgina tabelas.html voc deve exibir o codigo fonte, que o codigo
que relacionei logo acima para a criao da pgina que mostrada na tela 001 e copiar o codigo abaixo,
veja o procedimento.
<br><br>
<center>
<table>
<tr>
<td>Tabela</td>
<td>Tabela </td>
</tr>
<tr>
<td>Aprender</td>
<td>Aprender</td>
</tr>
</table>
</center>
Comecei inserindo uma quebra de pgina e depois as etiquetas para centralizar a tabela.Para
iniciar a tabela comeamos pelas etiquetas <table></table>, depois inseria etiquetas <tr></tr> para
criar a primeira linha e dentro da mesma inseri as etiquetas <td></td> para a criao da primeira e
segunda coluna, e ainda inseri um palavra na mesma.
Tela 002
Vamos comear a conhecer e a utilizar atributos dentro da tabela, o primeiro ser border este
serve para inserir um borda em volta da tabela, podemos especificar a espessura da mesma. Vamos
inserir uma borda nesta tabela que acabamos de criar com a espessura 2, veja o procedimento:
Border=2 esta a definio que vamos utilizar.
<table border=2>
<tr>
<td>Tabela</td>
<td>Tabela </td>
</tr>
<tr>
<td>Aprender</td>
<td>Aprender</td>
</tr>
</table>
Tela 004
Voc pode aumentar o tamanho da espessura para ver como fica, agora vamos inserir o atributo
Bordercolor este serve para inserir-mos uma cor a borda, vamos inserir a cor azul.
Bordercolor=blue
<table border=2 bordercolor=blue>
<tr>
<td>Tabela</td>
<td>Tabela </td>
</tr>
<tr>
<td>Aprender</td>
<td>Aprender</td>
</tr>
</table>
Tela 005
Agora vamos utilizar os atributos Widht e heigt para especificar altura e largura da tabela.Veja
que este aribustos estou ensirindo dentro da etiqueta <table>, mas pode ser inserido dentro das colunas
ou linhas.Vamos especificar a largura e altura da tabela em 100%.
<table border=2 bordercolor=blue
<tr>
<td>Tabela</td>
<td>Tabela </td>
</tr>
<tr>
<td>Aprender</td>
<td>Aprender</td>
</tr>
</table>
whidth= 80% height=80%>
Tela 006
Agora vamos aprender a inserir uma cor de fundo na tabela para isso utlizamos etiqueta Bgcolor,
vamos definir a cor verde.
bgcolor=green
<tr>
<td>Tabela</td>
<td>Tabela </td>
</tr>
<tr>
<td>Aprender</td>
<td>Aprender</td>
</tr>
</table>
whidth= 80% height=80% bgcolor=green>
Tela 007
Concluso:
Ensinei como criar tabelas e a utilizar alguns atributos , tudo de uma forma objetiva e mostrado
atravs das telas para que voc tenha uma melhor entendimento possvel, na prxima parte

Objetivo:
O objetivo deste tutorial ensinar voc a criar tabelas, bem como trabalhar com esta tabela
utilizandos alguns dos seus atributos, tudo mostrado de forma simples e objetiva atravs das telas.
Pr-requisito:
8 e Parte 9 do tutorial html bsico.
Nota:
Vamos comear criando uma pgina para a criao das tabelas a qual iremos chamar de
tabelas.html, copie o cdigo abaixo e salve dentro da pasta site que a nossa pasta de projetos.
<html>
<head><title>Tabelas HTML</title></head>
<body>
<center>
<h2>Criao de Tabelas Html</h2>

</center>
</body>
</html>
Tela 001
Para
comear
<table></table>
criar
tabelas
utilizamos
as
seguintes
etiquetas:
Dentro dessas colocamos as outras etiquetas, os textos, imagens entre outros, ou seja,
utilizamos as etiquetas <tr></tr> para definir linha na tabela e as etiquetas <td>/<td> para definir a
coluna da mesma, vou mostrar um estrutura basica , onde vou mostrar uma tabela que tem duas linhas e
duas colunas. Para isso atravs da pgina tabelas.html voc deve exibir o codigo fonte, que o codigo
que relacionei logo acima para a criao da pgina que mostrada na tela 001 e copiar o codigo abaixo,
veja o procedimento.
<br><br>
<center>
<table>
<tr>
<td>Tabela</td>
<td>Tabela </td>
</tr>
<tr>
<td>Aprender</td>
<td>Aprender</td>
</tr>
</table>
</center>
Comecei inserindo uma quebra de pgina e depois as etiquetas para centralizar a tabela.Para
iniciar a tabela comeamos pelas etiquetas <table></table>, depois inseria etiquetas <tr></tr> para
criar a primeira linha e dentro da mesma inseri as etiquetas <td></td> para a criao da primeira e
segunda coluna, e ainda inseri um palavra na mesma.
Tela 002
Vamos comear a conhecer e a utilizar atributos dentro da tabela, o primeiro ser border este
serve para inserir um borda em volta da tabela, podemos especificar a espessura da mesma. Vamos
inserir uma borda nesta tabela que acabamos de criar com a espessura 2, veja o procedimento:
Border=2 esta a definio que vamos utilizar.
<table border=2>
<tr>
<td>Tabela</td>
<td>Tabela </td>
</tr>
<tr>
<td>Aprender</td>
<td>Aprender</td>
</tr>
</table>
Tela 004
Voc pode aumentar o tamanho da espessura para ver como fica, agora vamos inserir o atributo
Bordercolor este serve para inserir-mos uma cor a borda, vamos inserir a cor azul.
Bordercolor=blue
<table border=2 bordercolor=blue>
<tr>
<td>Tabela</td>
<td>Tabela </td>
</tr>
<tr>
<td>Aprender</td>
<td>Aprender</td>
</tr>
</table>
Tela 005
Agora vamos utilizar os atributos Widht e heigt para especificar altura e largura da tabela.Veja
que este aribustos estou ensirindo dentro da etiqueta <table>, mas pode ser inserido dentro das colunas
ou linhas.Vamos especificar a largura e altura da tabela em 100%.
<tr>
<td>Tabela</td>
<td>Tabela </td>
</tr>
<tr>
<td>Aprender</td>
<td>Aprender</td>
</tr>
</table>
whidth= 80% height=80%>
Tela 006
Agora vamos aprender a inserir uma cor de fundo na tabela para isso utlizamos etiqueta Bgcolor,
vamos definir a cor verde.
bgcolor=green
<tr>
<td>Tabela</td>
<td>Tabela </td>
</tr>
<tr>
<td>Aprender</td>
<td>Aprender</td>
</tr>
</table>
whidth= 80% height=80% bgcolor=green>
Tela 007
Concluso:
Ensinei como criar tabelas e a utilizar alguns atributos , tudo de uma forma objetiva e mostrado
atravs das telas para que voc tenha uma melhor entendimento possvel, na prxima parte

Objetivo:
O objetivo deste tutorial sobre html ensinar voc a criar formulrios, irei ensinar as etiquetas
necessrias para a criao do mesmo bem como adiconar os atributos a mesma, tambm ira aprender a
utilizar caixas de texto e seus atributos, tudo mostrado de forma simples e objetiva atravs das telas.
Pr-requisito:
8, Parte 9 e Parte 10 do tutorial html bsico.
Nota:
Vamos comear criando uma pgina para a criao do formulrio a qual iremos chamar de
formulario.html, copie o cdigo abaixo e salve dentro da pasta site que a nossa pasta de projetos.
<html>
<head><title>Criao de Formulrios</title></head>
<body>
<center>
<h2>Criao de Formulrios</h2>
<br><br>
</center>
</body>
</html>
Tela 001
Para
comear
<form></form>
criar
os
formulrios
utilizamos
as
seguintes
etiquetas:
Sendo que entre esta duas etique vamos inserir os botes,campos que fazem parte deste
formulrio, sendo que dentro das etiquetas <form></fomr> utlizamos alguns atributos como action:
Action serve para definir o tipo de aao que o formulrio deve seguir, ou seja, podemos enviar o
formulrio para um endereo de correio ou uma pgina de script, sendo que para enviar para um e-mail a
sintaxe fica assim:
<form action=Endereo de e-mail que voc deseja enviar>
Em outro caso a sintaxe para chamar uma pgina de script fica desta forma:
<form action=Nome do arquivo a ser chamado>
Outro atributo que utilizamos o method, o mesmo fica encarregado de espcificar a forma que o
mesmo enviado.
Vou mostrar na tela abaixo como ficaria a sintaxe completa para envio de um formulrio:
Tela 002
Agora iremos aprender a inserir caixa de texto, a mesma serve para darmos entrada de
registros, estas caixas so inseridas atravs da etiqueta <input> e dentro desta etiqueta podemos inserir
atributos como type que podemos definir como texto e name para inserir um nome a caixa de texto, vou
inseri um caixa de texto com a definio type como texto e name como formulrio, veja nas telas abaixo
o procedimento.
Tela 003
Tela 004
Podemos ainda dentro desta caixa de texto inserir o atributo size para definir o tamanho da
mesma, vamos colocar um tamanho 60.
Tela 005
Tela 006
Agora vamos inserir o atributo maxlength que serve para definir quanto carecteres o caixa pode
aceitar, ou seja, vmos definir o tamanho 10, isso vai segnificar que s podermos digitar um texo com no
mximo 10 letras, tambm vamos inser a atributo value, este serve para caso voc queira definir um
nome que aparece dentro da caixa assim que o formulrio for aberto, pode ser um smbolo tambm,
vamos definir um tamanho para o texto de 20 e vamos colocar o seguinte nome aprendendo html para
ser visualizado dentro da caixa.
Tela 007
Tela 008
Outro atributo muito til o type password que serve para ocultar o texto, colocamos o mesmo
dentro do atributo type, substituindo pelo text, utilizado muito dentro de um campo para digitao de
senhas.
Tela 009
Tela 010
Se necessitar de utilizar um texto longo, ou seja, que vai ocupar varias linhas podemos utilizar a
atique <textarea></textarea> e dentro da mesma definir linhas atravs de Rows e colunas atravs de
Cols.
Tela 011
Tela 012
Concluso:
Mostrei as etiquetas para a ciao de formulrios e seus atributos e a utilizar a criar a caixa de
texto para entrada de registros juntamente com seus atributos, tudo de forma bem objetiva e mostrado
atravs das telas para que voc tenha uma melhor entendimento possvel, na prxima parte ensinarei a
ultima parte do tutorial sobre html com a continuao do uso de formulrio.Bons Estudos.
Html Bsico. Concluso

Objetivo: O objetivo deste ltimo tutorial dar continuida ao desenvolvimento do formulrio,
vou ensinar a utilizar outros elementos necessrios para um formulrio e seus atributos, tudo mostrado
de forma simples e objetiva atravs das telas.
Pr-requisito: Para voc poder acompanhar o desenvolvimento deste tutorial, ser necessrio ter
conhecimento no mnimo do de informtica bsica e Parte 1, Parte 2, Parte 3 , Parte 4, Parte 5, Parte 6,
Parte 7, Parte 8, Parte 9, Parte 10 e Parte 11 do tutorial html bsico.
Nota: Irei ensinar a linguagem de html de uma forma bem objetiva, ou seja, iremos aprender na
Vamos utilizar a mesma pgina formulrio.html que criamos no tutorial parte11.
<html>
<head><title>Criao de Formulrios</title></head>
<body>
<center>
<h2>Criao de Formulrios</h2>
<br><br>
</center>
</body>
</html>
Tela 001
Vamos utilizar um elemento para a criao de uma lista de opes, para isso utilizamos as
etiquetas <select></select> e dentro das mesma utilizamos a etiqueta <option></option>, nesta
inserirmos o texto, por exemplo, digamos que voc tenha queira disponibilizar ao seu cliente que ele
selecione qual dia da semana prefere sair de frias, logo, vamos criar uma lista com os dias da semana,
que vai ficar da seguinte maneira:
Tela 002
Tela 003
Podemos utilizar o atributo multiple para selecionar varios registros ao mesmo tempo, veja o
procedimento.
Tela 004
Tela 005
Podemos utilizar os botes de radio, atravs das etiques <input>inserindo no atributo Type a
palavra radio, este vai fazer com que o cliente selecione apenas uma opo por vez.
Tela 006
Tela 007
Tambm podemos utilizar a caixa de validao, a nica diferena que podemos selecionar mais
de uma opo ao mesmo tempo, e podemos ativa-la pelo atributo checkbox.
Tela 008
Tela 009
Agora iremos aprender a criar o boto submit, que serve para enviar o formulrio para o lugar
determinado no atributo action, onde utilizamos a atributo value para determinar o nome do mesmo.
Tela 010
Tela 011
Por ultimo criamos um boto para limpar os campos de um deteminado formulrio, irei criar um
pequeno formulrio, sua sintaxe a seguinte.
Tela 012
Tela 013
Concluso:
Mostrei as etiquetas para a criao de elementos para utilizao em formulrios bem como seus
atributos, tudo de forma bem objetiva e mostrado atravs das telas para que voc tenha uma melhor
entendimento possvel, acabei a srie de tutoriais sobre html, espero que os mesmo possam ajuda-lo no
seu aprendizado, embreve estarei lanando outros tutoriais onde voc tera que ter o conhecimento sobre
html.Bons Estudos.

HTML Basico

Transféré par

Informations du document

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

HTML Basico

Transféré par

Droits d'auteur :

Formats disponibles

Html Bsico - Parte 1

Tela 001 (estrutura bsica inserida)

Tela 003(Pagina aberta)

Tela 004 (Clique no men exibir e depois em cdigo fonte)

Tela 006 ( Veja as frases inseridas no bloco de notas)

Tela 007 (Esta ser a pgina depois de modificada)

Html Bsico. Parte 2

Tela 002 (Selcionado o cdigo fonte)

Tela 003 (Texto entre a tag de alinhamento a esquerda)

Tela 005 (Note o texto centralizado)

Tela 006 (Texto a direita)

Html Bsico. Parte 3

Tela 002 (Coloque o texto entre as tag e salve)

Tela 013 (texto formatado com a font verdana)

Tela 015 (Texto com as trs formataes)

Html Bsico. Parte 4

mesmo deve ficar desta

Html Bsico. Parte 5

Html Bsico. Parte 6

Tela 004(Por letra)

Html Bsico. Parte 7

Tela 002 (Parte de baixo da pgina em azul)

Tela 003 (Veja onde foi inserido o link de origem)

Tela 004 (O Link vira marcado)

Tela 008 (Pgina 2 criada)

Tela 010 (Criando o link na pagina linkinterno)

Html Bsico. Parte 8

Clique aqui para ir para a pgina do bol

Tela 002 (Inserindo Texto)

Tela 004 (Inserindo Link no texto)

Html Bsico. Parte 9

O link ser o seguinte:

Clique aqui para fazer download

Tela 001 (Criando o Link)

Tela 007 (Alinhado ao centro)

Html Bsico. Parte 10

whidth= 80% height=80%>

whidth= 80% height=80% bgcolor=green>

Html Bsico. Parte 10

<h2>Criao de Tabelas Html</h2>

whidth= 80% height=80%>

whidth= 80% height=80% bgcolor=green>

Html Bsico. Parte 11

Html Bsico. Concluso

Vous aimerez peut-être aussi