Vamos criar um exemplo:
Mais abaixo uma sugestão de estrutura de arquivos afim de faciliar a manutenção do
nosso projeto e também mantê-lo organizado.
- Não deve conter acentuação,
- Se o nome tiver mais partes, junte-as com underline (
- Sempre escreva o nome dos arquivos ou magens com letras minúsculas.
Vamos criar a pasta
e a seguir outras sub-pastas como imagens, fotos_produtos
e demais arquivos.
Abaixo
|
|
+----- produto_01.jpg
|
+----- produto_02.png
|
+----- produto_03.gif
|
|
Para criar e editar códigos em HTML qualquer editor de texto comum como bloco de notas
serve.
Como estamos aprendendo "html" o nome do arquivo índice será:
Obs: Note que a tag sempre termina com uma barra inclinada para a direita.
04 - Servidor online - colocando a página na internet 
Para que a nossa página seja visualizada por qualquer pessoa na internet teremos que
localizar um servidor, de preferência gratuito para armazenar nossa página.
O servidor abaixo é gratuio é bem prático.
http://www.freewebhostingarea.com/
Precisaremos criar um alias ou um nome a ser preenchido no campo
wwww , aqui o nome
sugerido foi
aula1 e selecione
orgfree.com
Informações de configuração para enviar nossos arquivos via ftp para o servidor.
Painel com várias opções para gerenciarmos nossas páginas, vamos selecionar a opção
File Manager
Clique na opção
File Manager ( gerenciador de arquivos )
Agora vamos enviar o arquivo
index.html para o servidor.
Clique no botão abaixo
Escolher arquivo , escolha seu arquivo e clique o ícone verde
logo abaixo a palavra upload para iniciar o processo de envio do arquivo.
Selecione o arquivo
index.html e para enviar o arquivo para o servidor clique no ícone
verde ( check ).
Veja na imagem abaixo, arquivo enviado para o servidor com sucesso...
Esta é a nossa primeira página que foi postada na internet.
Abaixo nossa página na internet
No exemplo a seguir vamos mudar um pouco o arquivo
index.html e enviá-lo para o servi-
dor atualizando-o.
Para futuros acessos no servidor, siga os passos abaixo:
Abrir a página do servidor...:
http://www.freewebhostingarea.com/members/
Veja imagem abaixo:
No campo
username digite.....:
aula01.orgfree.com
Clique no botão..............:
Go to the Control Panel
Veja imagem abaixo:
No campo
username digite...:
aula01.orgfree.com
Password...................:
senha123
Veja imagem abaixo:
Acessando servidor de arquivos FTP para enviarmos os arquivos para internet...
FTP server:
aula01.orgfree.com
username :
aula01.orgfree.com
Password :
senha123
Clique no botão:
Login para acessar o painel...
Na tela seguinte que é a tela "
Member Area" clique no botão
File Manager, clique em
ulpload e clique no botão
Ecolher arquivo, selecione o novo aquivo
index.html e clique
no ícone verde check iniciar o envio do arquivo para o servidor.
Nova página atualizada na internet e todos poderão acessá-la.
[ Resultado ]
05 - Domínio
Notem o nome do nosso dominio informal ( gratuito ) é
http://aula01.orgfree.com/
Estamos usando este serviço gratuito e o nosso dominio gratuito é
orgfree.com
Registrar ou não um dominio?
O nome da sua marca representa a identidade e a reputação do seu negócio, seja ele
baseado em uma atividade de profissional liberal ou de uma empresa.
Um passo importante para proteger sua marca é registrá-la nos organismos de propriedade
intelectual dos mercados e países onde se pretende atuar.
Todos os dias, são registrados centenas de domínios no Brasil, caso alguma empresa ou
pessoa física registrar o domínio que lhe interessa, você não poderá mais utilizar
este nome, verifique agora se o domínio que lhe interessa ainda esta disponível no
link abaixo e registre-o, caso tenha inteção de registrar o seu.
http://registro.br/
Exemplos de dominio com emails.
nomex@nome_do_seu_dominio.com.br
A terminação mais comum no Brasil obviamente é
.com.br
.com = comercial ( organizações comerciais )
.br = brasil
Emails com dominio:
vendas@empresax.com.br
compras@empresax.com.br
contato@empresax.com.br
Existem várias outras terminações, por favor consulte o link abaixo:
http://registro.br/dominio/categoria.html
Exemplo:
Este é o meu dominio,
http://www.jurandir1967.co.uk/ , para eu mantê-lo pago R$ 30,00
por ano.
Após registrado o domínio voce precisará de um provedor / servidor para armazenar seu
site para estar disponivel na internet, acima usamos servidor gratuito mas note que
temos que usar o dominio
http://aula01.orgfree.com deles ( orgfree.com )
Para uso informal tudo bem mas ser for para uso formal sugiro um oficial registrar seu
dominio e contratar os serviços de um provedor oficial.
Continuando nosso tutorial sobre html ... :)
06 - Parágrafos
Tags: < p > e
< /p >
[ Resultado ]
07 - Níveis cabeçalhos
Tags: < h1 > e
< /h1 > até
< h6 > e
< /h6 >
[ Resultado ]
08 - Listas não numeradas
Tags: < ul > e
< /ul >
[ Resultado ]
09 - Listas numeradas
Tags: < ol > e
< /ol >
[ Resultado ]
10 - Lista com quadrinhos
Tags: < ul > e
< /ul >
[ Resultado ]
11 - Listas alternativas
Tags: < ul > e
< /ul > -
< li > e
< /li >
[ Resultado ]
12 - Tabela
Tags: < table > e
< /table >
[ Resultado ]
13 - Links
Criando link de texto e imagem.
[ Resultado ]
Mais exemplos:
Meu Link
Meu Link
Baixar arquivo
Titulo como link
14 - Ancora
Criando ancora para pular de um ponto para outro na página. Ao clicar em
Home o
ponteiro do mouse se deslocará mais para baixo da tela posicionando-se no tópico
home
e ao clicar em
[ Volta para o topo ] posicionará no topo da tela.
[ Resultado ]
Âncora para chamar outra página num ponto específico de outra página
Estamos na
page1.html e queremos chamar outra página, neste caso a
page2.html e
posicionar em uma linha específica ( tópico específico )
<a href="page2.html
#linhax"> abre page2.html e posiciona na ancora linhax </a>
Na page2.html - insira a linha abaixo onde deseja posicionar o cursor.
<a name="
linhax"> TopicoX </a>
15 - marquee - hr - mailto
[ Resultado ]
16 - Indexando nossa página no Google
Com os comandos abaixo o Google localizará nossa página
Código fonte
<html>
<head>
<title> Index </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- ---------------------------------------------------------------- -->
<!-- 4 linhas abaixo = especificamente para buscas -->
<meta name="robots" content="all" />
<meta name="keywords" content="html, css, javascript, excel, delphi, debian,
ifconfig, root, exit, shutdown, excel avancado" />
<meta name="description" content="jurandir1967.co.uk - Timbó - Santa Catarina
- Brasil" />
<meta name="Author" content="Jurandir" />
<!-- Linha abaixo = freqüência da atualizacao da pagina, em dias -->
<meta name="revisit-after" content="2" />
<!-- LInha abaixo = para documentos que podem ser modificados no futuro -->
<meta name="doc-class" content="Living Document" />
<!-- Linha abaixo = desabilitar recursos ruins do Internet Explorer -->
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="imagetoolbar" content="no" />
<!-- ---------------------------------------------------------------- -->
</head>
<body>
Adicione as linhas acima da "meta" entre <head> e </head> que servirão para <br>
indexar nossa página no Google, ou seja, nossa página será localizado pelo google.
</body>
</html>
|
Obs: Note que a tag sempre termina com uma barra inclinada para a direita. </html>
Pressione na tecla F12 para testarmos a página que criamos e visualizá-la no navegador padrão. [ Resultado ]
[ Resultado ]
Código fonte
Mais fontes de estudo passo a passo http://www.tutorialspoint.com/html/html_basic_tags.htm *** http://html.net/tutorials/html/ http://www.stepbystephtml.com/tut/15/html-tags/