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 dode informtica bsica.

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:

* Inicia a pgina

* Inicia o cabealho

*Inicia o nome do cabealho

*aqui voc coloca o nome que voc deseja que aparea

*Aqui fecha o nome do cabealho

*Fecha o cabealho

*Inicia o corpo da pgina

* Aqui entre estas tags colocamos as imagens, textos e etc.

* Fecha o corpo da pgina

* Fecha a pgina

Vou explicar esta estrutura bsica acima, sempre comeamos utilizandos as tags para iniciar e para fechar o documento, dentro destas tags colocamos as tags e dentro dessas colocamos para definir o nome do cabealho da pgina e por ltimo dentro das tags 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 .

E dentro do corpo da pgina, ou seja, entre as tags 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:

Para voc poder acompanhar o desenvolvimento deste tutorial, ser necessrio ter conhecimento no mnimo dode informtica bsica e Parte 1 do tutorial html bsico.

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 do texto a esquerda;

Alinhamento do texto centralizado;

Alinhamento do texto a direita;

Alinhamento do 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.

Alinhamento de texto

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.

Veja como deve ficar esta pgina atravs da tela abaixo:

Tela 001

Para colocar o texto alinhado a esquerda utilizamos a seguinte tag:

* Aqui voc insere o texto

Para colocar o texto centralizado no meio da pgina utilize a seguinte tag:

*Aqui voce insere o texto

Para colocar o texto a direita utilize a seguinte tag:

* Aqui voc insere o texto

*Aqui voc insere o texto

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 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 , 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:

Para voc poder acompanhar o desenvolvimento deste tutorial, ser necessrio ter conhecimento no mnimo dode informtica bsica e Parte 1 e Parte 2 do tutorial html bsico.

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.

Cabealho

Estamos aprendendo 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 at o menor 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 para , sendo assim , irei mostrar s as telas.

Atravs da pgina cabealho abra o cdigo fonte da mesma e coloque o texto entre e depois salve.

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

Tela 003

Para cabealho no nvel dois .

Tela 004

Cabealho nvel trs .

Tela 005

Cabealho no nvel quatro

Tela 006

Cabealho no nvel cinco

Tela 007

Cabealho no nvel seis

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 e seus atributos que para representar o tamanho Size , entao a tag vai ficar assim o texto deve ficar entre as tags, veja o procedimento abaixo.

Abra o bloco de notas e copie, cole e salve a pgina baixo.

Formatao

Formatao de texto

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

Para voc poder acompanhar o desenvolvimento deste tutorial, ser necessrio ter conhecimento no mnimo dode informtica bsica e Parte 1, Parte 2 e Parte 3 do tutorial html bsico.

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.

Aprender Html

Estamos aprendendo html

Vamos continuar a formatao de texto, iremos colocar o texto em negrito atravs das tags , 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 , o procedimento o mesmo que acabamos de fazer para colocar o texto em negrito, sendo assim, vamos substituir as tag por , veja a tela abaixo:

Tela 003

Agora vamos deixar o texto sublinhado atravs das tag 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 iremos acrescentar o atributo bgcolor, o mesmo deve ficar desta maneira:

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

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 e Parte 4 do tutorial html bsico.

Para comear irei explicar a funo de cada um dos atributos link, vlink e alink dentro da tag :

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.

Definio de cor dos links

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

sendo que cada um dos elementos fica citado por outra etiqueta que sendo assim as memas ficaram:

Internet

Computador

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 sendo que podemos definir os seguintes tipos de marcadores e o mesmo ficaria assim:

CircleSquareDiscVamos 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:

Internet

Computador

Site

Tela 009Tela 010Agora utilizaremos os seguintes:

Internet

Computador

Site

Tela 011Tela 012ConclusoEnsinei 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 6Objetivo: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:Para voc poder acompanhar o desenvolvimento deste tutorial, ser necessrio ter conhecimento no mnimo dode informtica bsica e Parte 1, Parte 2, Parte 3 , Parte 4 e Parte 5 do tutorial html bsico.Nota:Irei ensinar a linguagem de html de uma forma bem objetiva, ou seja, iremos aprender na prtica atravs da criao pginas.Vamos aprender a criar listas ordenadas, ento crie uma pgina em branco com o nome de lista.hml:ListasListasTela 001Sua criao simples e para cria-las utilizamos as etiquetas

sendo que cada um dos elementos fica citado por outra etiqueta sendo assim as memas ficaram:

Internet

Computador

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

sendo que o mesmo ficaria assim:

Iremos ver os cada um desses tipos lista ,copie e cole no bloco de notas a lista abaixo, salve e depois atualize a pgina:

Internet

Computador

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 sem do utilizarenmos duas etiquetas para definio e , ento ficaria assim:

Html Basico

Aprender

Ou poderiamos definir da seguinte maneira:

Aprender

Sempre

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:

Para voc poder acompanhar o desenvolvimento deste tutorial, ser necessrio ter conhecimento no mnimo dode informtica bsica e Parte 1, Parte 2, Parte 3 , Parte 4, Parte 5 e Parte 6 do tutorial html bsico.

Vamos comear apreder a criar links internos, que so links utilizados dentro de uma mesma pgina, para isso utilizamos as etiquetas 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:

Listas

Links Internos

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.

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:

Dominar

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.

Pagina Dois

Links Locais

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:

Link Para A Pgina Dois

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:

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 e Parte 7 do tutorial html bsico.

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 pginawww.bol.com.br para esta pgina que iremos criar daremos o nome de linkremoto.html:

Links remotos

Links Remotos

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:

Clique aqui para ir para a pgina do bol.

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

Links Correios

Links a Correios Eletronicos

Contato

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:

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 e Parte 8 do tutorial html bsico.

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:

Links Arquivos

Aps ter criado esta pgina vamos inserir o link, e no mesmo vamos inserir o caminho para um arquivo.

O link ser o seguinte:

Clique aqui para fazer download

Nesta frase vamos atribuir o link que deve ficar assim:

Clique aqui para fazer o download.

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:

Documents

HTML Basico