H T M L - ( )

Nesta pagina mostrarei como usar as linguagens acima atraves de exemplos basicos afim 
de ilustrar, mostrar o que ha por baixo de uma pagina da internet. 

Ha muitaaaa coisa a ser documentada mas citarei alguns exemplos afim de contribuir 
para com as pessoas que estao iniciando este aprendizado.

 

* Página melhor visualizada no " navegador Chrome "

Index


01 - Sobre HMTL

02 - Editor de página html

03 - Estrutura de arquivos

04 - Servidor online

05 - Dominio

06 - Paragrafos

07 - Niveis de cabeçalhos

08 - Lista não numeradas 

09 - Listas numeradas

10 - Listas com quadrinhos

11 - Listas com alternativas

12 - Tabelas

13 - Links

14 - Ancora

15 - Marquee - hr - mailto

16 - Indexando página no google

17 - Enviando email

18 - Tutoriais online



Objetivo  

O propósito deste tutorial: - Criar uma página simples e html e conhecer commandos de html; - Para criar páginas de internet você vai precisar de um de um editor de páginas, pode ser o bloco de notas do Windows Sugestão: Tente o editor gratuito Notepad++ , na minha opinião o editor DreamWeaver é o the best, muito intuitivo... ( pago ) - Criar uma conta em um servidor gratuito para armazenar as páginas; Adiante é mostrado como criar conta em servidor gratuito. As páginas em html podem rodar na máquina local ( no seu computador ), mas quando criar um site oficial você precisará de um servidor oficial para armazenar seu site e registrar um domínio ( para seu negócio ). Ex: http://www.jurandir1967.co.uk/html_01.asp Domínio: jurandir1967.co.uk Página : html_01.asp ( arquivo ou página ) htt:// = Hypertext Transfer Protocol = Protocolo de Transferência de Hipertexto url = Uniform Resource Locator = Localizador-Padrão de Recursos - Enviar a(s) página(s) para o servidor para que todos possam acessá-la via internet. Quando você cria um arquivo em html e abre no navegador ( browser ) Chrome, Firefox ou Safari, serão visualizadas apenas no seu computador e não na internet para visualização de todos. Lembre-se, para que todos possam visualizar sua(s) página(s) você terá que fazer upload de todos os arquivos html ou outros para um servidor online ( pago ou gratuito ) para seu servidor online. - Noções dos vários comandos ( tags ) usados em uma página HTML; Paciência e tudo fluirá...

01 - Sobre HTML 

H T M L - HyperText Markup Language

Linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores. Os documentos em HTML são arquivos de texto simples que podem ser criados e editados em qualquer editor de textos comum, como o Bloco de Notas do Windows ou editores de páginas profissionais como DreamWeaver etc. O HTML foi a primeira linguagem de nível mundial, porem não é a única. Existem muitas outras linguagens destinadas á criação de paginas da web, porém o HTML ainda prevalece. Atualmente já é possível integrar varias linguagens na mesma pagina da Web ( asp, php, python etc ), sendo possível usar mais linguagens no mesmo site. Para o testar código em html basta termos um navegador padrão ( IE, chrome ou firefox ) Além de podermos testar os códigos no computador local veremos como enviar esta página em um servidor.

02 - Editor de página html

Para criar e editar códigos em HTML é necessário qualquer editor de texto comum, como bloco de notas. Para testar os códigos, basta salvar o arquivo em formato .HTML e executar. Sugiro usar o DreamWeaver pois possui mais recursos mas o bloco de notas do windows lhe ajudará caso não queira usar o Dreamweaver. Download DreamWeaver: clique arqui para baixar

03 - Estrutura de arquivos

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. Observações: Nomes das pastas e arquivos: - Não deve conter acentuação, - Se o nome tiver mais partes, junte-as com underline ( aula_01 , primeiro_arquivo ) - Sempre escreva o nome dos arquivos ou magens com letras minúsculas. Vamos criar a pasta aula_01 e a seguir outras sub-pastas como imagens, fotos_produtos e demais arquivos. Abaixo estrutura de arquivos do nosso primeiro projeto em html: Pastas / sub-pastas / arquivos aula_01 | | | css | +----- estilos.css | Javascript | | +----- jscript.js | | imagens | | +----- img_01.jpg | +----- fundo_01.png | | fotos_produtos | | +----- produto_01.jpg | +----- produto_02.png | +----- produto_03.gif | | index.html clientes.html produtos.html Todos os websites possuem um arquivo index.html, index.asp ou index.php 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á: index.html Agora vamos criar nossa primeira página index.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 ]

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 Download
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>

17 - Enviando email

Enviando e-mail clicando num link. [ Resultado ] Código fonte

<html>

<head>

<title> Index </title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

<a href="mailto:linux1.noip@gmail.com,linux2.noip@gmail.com?subject=Mailto Reuniao X
&cc=linux3.noip@gmail.com
&bcc=linux4.noip@gmail.com
&body=Aprendendo HTML">Enviando e-mail</a>

</body>

</html>

18 - Tutoriais online

O W3Schools é um site criado por uma empresa norueguesa com conteúdos educacionais na área de desenvolvimento em tecnologias web. Tornou-se um dos principais sites do segmento de treinamento e curso online para estudantes e entusiastas de criação de websites. É uma fonte muito interessante e útil para a consulta da referência a diversas linguagens de marcação e de scripts. Além disso oferece excelentes tutoriais sobre diversos temas relacionados a linguagens web, com exemplos e editor de código on-line para testes dos exemplos. http://www.w3schools.com/ 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/
http://htmldog.com/guides/html/beginner/tags/
http://www.comofazerumsite.com/criarsite/tutorial_html.html
Download HTML manual

"Wisdom is like a river, the deeper it is the less noise it makes"

Afim de aprender mais? Fale comigo: linux1.noip@gmail.com