Idioma

Google-Translate-ChineseGoogle-Translate-Portuguese to FrenchGoogle-Translate-Portuguese to GermanGoogle-Translate-Portuguese to ItalianGoogle-Translate-Portuguese to JapaneseGoogle-Translate-Portuguese to EnglishGoogle-Translate-Portuguese to Spanish

Pesquisar no blog

Informações do site

Aviso!!! Site abandonado desde 16/11/2011, algumas postagem podem não funcionar

Oi galera vcs estão no invasores (dicas hackers)
Aqui vcs podem aprender a fazer o que quiser , só peço colaboração,comentem o que vcs souberem e os downloads que acharem PRINCIPALMENTE AS DUVIDAS .VLW.

Para fazer doações clique no pagseguro no lado direito da página.
Ainda não tem cadastro no pagseguro então cadastre-se agora mesmo clicando aqui

Acessem nossa comunidade:Invasores (Dicas Hackers)

EM BREVE COM DOMÍNIO PRÓPRIO (.com)

Contato:
Retirado contato

quinta-feira, 9 de junho de 2011

Aprenda HTML

Olá pessoal,
Eu vou postar aqui uma série de estudos HTML que é fundamental para quem está iniciando na programação para Web.
Vou seguir uma série cronológica começando no básico e indo para o avançado.

Lição 01

Na lição 01 vou apresentar algumas características do HTML e vamos conhecer a estrutura básica do HTML.
Características do HTML
É uma linguagem de marcação e não de programação;
Seus comandos recebem o nome de tags;
A maioria dessas tags aparece em pares, uma iniciando um determinado bloco e a outra encerrando esse bloco.
Ex:
Inicia encerra
<head> </head>
<title> </title>
<body> </body>
Algumas tags podem aparecer isoladamente não aos pares.
Ex:
<BR> e <hr>
As tags elas estão sempre contidas entre os sinais menores (<) e maiores (>).
Algumas tags possuem os atributos que tem como finalidade expandir a abrangência das tags.
As tags podem ser escritas com letras minúsculas ou maiúsculas.
Estrutura básica do HTML
Obs: Essa é tag de comentário:
<! — comentário — >
Tudo o que está entre a tag de comentário não será exibido na página.
<HTML> <!–inicia o HTML–>
<head> <!–inicia o cabeçalho da página–>
<title>Estrutura básica do HTML</title><!–<title> inicia o titulo </title> fecha o titulo–>
</head><!–fecha o cabeçalho–>
<body><!–inicia o corpo da página–>
Pessoal aqui é o corpo da página aonde é inserido o conteúdo da página.
</body><!–fecha o corpo da página–>
</HTML><!–fecha o HTML–>
Obs: É muito importante que seja inserido um titulo na página pois ele serve como referência para os sites de busca. Utilize um titulo criativo em suas páginas.
Para testar o nosso primeiro exemplo você poderá utilizar o bloco de notas do Windows como editor de texto para escrever as páginas HTML.
Copie o nosso exemplo acima e cole no bloco de notas.
Crie uma pasta para salvar.
Salve o exemplo como: Lição01.html não se do .html
Visualize como ficou o nosso primeiro exemplo.
Fim da Lição01!

Lição 02

Na lição 02 vamos estudar sobre os Atributos da tag <body> e vamos conhecer a tag <meta>.
Vamos ao que interessa!!!
Atributos da tag <body>
Bom pessoal a tag <body> ela pode conter alguns atributos para alterar a aparência da página.
Ex: cor de fundo, imagem de fundo, cor padrão do texto que será exibido na página.
Vamos conhecer agora dois atributos o Bgcolor e o atributo Text.
Bgcolor:
esse atributo define uma cor de fundo para a página. Podemos definir as cores de três maneiras diferentes: nome da cor em inglês, em hexadecimal ou em RGB.
Aconselho utilizar as cores em inglês.
Ex:
<body bgcolor= “nome da cor” >
<body bgcolor= “black”>
No nosso exemplo o fundo da página será Preto.
Text:
O atributo Text define uma cor para o texto exibido em toda a página.
Ex:
<body text=”nome da cor”>
<body text=”red”>
Nesse exemplo o texto da página será exibido na cor vermelha.
Exercício
<html>
<head>
<title>Atributos da Tag <body></title>
</head>
<body bgcolor=”black” text=”red”>
Fundo da página Preto<br><!– Br é quebra de linha mais a frente vamos estudar–>
Cor do texto Vermelho
</body>
</html>
Salve o nosso exercício. Não esqueça do .html
Veja o resultado como ficou.
Vamos agora conhecer a Tag <meta> !!!
A tag <meta> inserimos ela na tag <head> como já estudamos é o cabeçalho da página que contém o título.
Informo a vocês que não é obrigatório inserir a tag <meta> em suas páginas pois o uso dessa tag é útil para passar informações aos sites de busca e atualizar a página em um intervalo de tempo definido.
A tag <meta> possui três atributos:
name: indica um nome para a informação;
http-equiv: esse atributo faz uma correspondência com campos de cabeçalho do protocolo HTTP.
content: define o conteúdo.
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″>
<meta name=”keywords” content=”html,programação,web,”>
<title> Tag <meta></title>
</head>
Para o atributo http-equiv existem poucos valores sendo o mais content-type cuja função é indicar o conjunto de caracteres usado pela página que está sendo exibida, para que o navegador possa exibir corretamente os caracteres especiais.
Para exibição correta da língua portuguesa usamos charsetiso-8859-1.
Particularmente a melhor aplicação do http-equiv na minha opinião é o Refresh cujo o objetivo é fazer com que o navegador execute uma determinada página após um intervalo de tempo.
A página a ser executada é definida por quem está programando e o intervalo de tempo também.
Ex:
<meta http-equiv=”refresh” content=”3; url=http://www.forum-invasao.com.br”>
No nosso exemplo a página do fórum invasão será exibida após 3 segundos.
A palavra chave mais usada para o atributo name é keywords que tem como função ajudar os sites de busca.
<meta name=”keywords” content=”html,programação,web,”>
Palavras de busca: html,programação,web.
Exercício
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″>
<meta http-equiv=”refresh” content=”3; url=http://www.forum-invasao.com.br”>
<title>Tag <meta></title>
</head>
<body bgcolor=”yellow” text=”blue”>
Fórum invasão Após 3 segundos aguarde…<br>
E ai pessoal entenderam a tag <meta> ?<br>
Duvidas Postem Ok
</body>
</html>
Salve o nosso exercício.
Veja o resultado como ficou.
Fim da Lição 02!

Lição 03

Olá, nessa lição vamos entrar na parte de manipulação de textos aonde vamos estudar cabeçalhos, parágrafos, quebra de linha, linha horizontal.
Vamos ao que interessa!!!
Cabeçalhos
Cabeçalhos são usados para dividir textos em seções.
Eis a tag de cabeçalho:
<h1> cabeçalho nível 1 </h1>
<h2> cabeçalho nível 2 </h2>
<h3> cabeçalho nível 3 </h3>
<h4> cabeçalho nível 4 </h4>
<h5> cabeçalho nível 5 </h5>
<h6> cabeçalho nível 6 <h6>
Obs: O nível de cabeçalho varia de 1 a 6 depende o nível usado. Informo a vocês que o tamanho vai do menor para o maior, ou seja, o cabeçalho de nível 1 é maior do que o de nível 2 etc.
Exercício
<html>
<head>
<title> Cabeçalhos </title>
</head>
<body bgcolor=”black” text=”White”>
<h1> Administração </h1>
<h2> Moderador </h2>
<h3> Membro Elite </h3>
<h4> Estudante </h4>
<h5> Iniciante </h5>
</body>
</html>
Salve o exercício.
Visualize para ver como ficou.
Agora vamos aprender como alinhar cabeçalho. Alinhamento de cabeçalho ocorre devido a atributos que são inseridos na tag <h>.
conhecemos agora os atributos de alinhamento:
Align= “left”: esse atributo irá alinhar o texto a esquerda;
Align=”center” esse atributo centraliza o texto;
Align=”right” esse atributo irá alinhar o texto a direita.
Exercício
<html>
<head>
<title> Cabeçalhos </title>
</head>
<body bgcolor=”black” text=”White” >
<h1 align=”center”> Administração centralizado </h1>
<h2 align=”right”> Moderador alinhado à direita </h2>
<h3 align=”left”> Membro Elite alinhado à esquerda </h3>
<h4 align=”center”> Estudante centralizado </h4>
<h5 align=”center”> Iniciante centralizado </h5>
</body>
</html>
Salve o exercício.
Visualize para ver como ficou.
Parágrafos
Chegou a hora de conchermos as tags de parágrafos.
Antes de tudo quero deixar claro que o navegador não interpreta o ENTER como parágrafo. Você pode utilizar o ENTER apenas para ajustar o texto na hora em que você estiver digitando.
Eis a tag de parágrafo:
<p> Parágrafo </p>
Ex:
<p> Esse é um parágrafo aqui é onde eu então vou inserir todo o meu texto.
Perceba que eu inicio o texto com <p> e no final para fechar o parágrafo a tag de encerramento </p>.</p>
Obs: em parágrafos longos se utliza o mesmo esquema inicia com <p> e encerra com </p>.
Exercício
<HTML>
<head>
<title> Parágrafos <p> </p> </title>
</head>
<body bgcolor= “Orange” text= “White” >
<p> Gostaria de saber de você que está acompanhando o nosso estudo em HTMl se eu devo continuar.</p>
<p> Comente para que eu possa saber se eu devo continuar ou não postando as lições.</p>
<p> Ou então caso eu tenha que melhorar em algum aspecto para que a compreensão das lições possa ser melhor.</p>
<p> Ok galerinha vlw!!!</p>
</body>
</HTML>
Salve o exercício.
Visualize para ver como ficou.
Quebra de Linha
Como eu comentei em uma lição passada que iríamos estudar sobre quebra de linha chegou a hora!
Eis a tag de quebra de linha:
<BR>
Obs: essa tag não possui a tag de fechamento.
Com essa tag você vai apenas reinicia o texto na linha seguinte. Ou seja, você vai fazer uma quebra na linha do texto. Caso você queira colocar certa distância entre dois parágrafos você pode utilizar varias vezes a tag <BR>.
Vamos fazer agora um exercícios para um melhor entendimento.
Exercício
<HTML>
<head>
<title> Quebra de Linha </title>
</head>
<body bgcolor= “Black” text= “White” >
<p>Visitada através de um monitor, internet não é revista, não é rádio, não é TV.<br>
Apesar de transmitir mensagens sonoras ao vivo. Apesar dos clipes em vídeo.
Experimente mostrar um artigo de revista e suas fotos pela TV.<BR> Ou usar o rádio
para transmitir um filme.<BR> Ou transcrever a narrativa de um jogo de futebol em
uma revista.<BR> Ou fazer o layout de uma mensagem de secretária eletrônica.<BR>
Portanto, muito critério em usar uma a internet como algo que ela não é.</p>
</body>
</HTML>
Salve o exercício.
Visualize para ver como ficou.
Linha Horizontal
Bom pessoal a linha horizontal ela é usada para separar sessões em uma página Web.
Eis a tag para Linha Horizontal:
<hr>
Essa tag possui vários atributos:
Size: configura a espessura da linha em pixels.
Width: configura o comprimento em porcentagem ou em pixel.
width= “50%” – porcentagem
width= “50″ – pixel
Align: posicionamento da linha, podendo utilizar align=”left” , align=”right” e align=”center”.
Noshade: não terá efeito tridimensional.
Obs: você pode utilizar a tag <hr> com atributos ou sem.
Exercício
<html>
<head>
<title> Linha Horizontal </title>
</head>
<body bgcolor=”black” text=”White” >
<p>Visitada através de um monitor, internet não é revista, não é rádio, não é TV.<br>
Apesar de transmitir mensagens sonoras ao vivo. Apesar dos clipes em vídeo.
Experimente mostrar um artigo de revista e suas fotos pela TV.<BR> Ou usar o rádio
para transmitir um filme.<BR> Ou transcrever a narrativa de um jogo de futebol em
uma revista.<BR> Ou fazer o layout de uma mensagem de secretária eletrônica.<BR>
Portanto, muito critério em usar uma a internet como algo que ela não é.</p>
<hr size= “3″ width= “80%” align= “Center” noshade>
<p>A Internet é um veículo de comunicação, com características próprias.<br> Você
pode ver a rede a qualquer hora de onde desejar.<br> Imprimir um texto, pegar
uma imagem, mudar de assunto se desejar, enviar e-mail, pesquisar um tema,
se encontrar nos chats, grupos de discussão, mailing list enfim dá prá fazer de
tudo na Internet.<br>
A rede tem uma linguagem própria, mas poucos estão interessados nela.<br> A
maioria das pessoas que desenha interfaces adapta idéias do design gráfico,
da TV ou da propaganda.</p>
</body>
</html>
Agora faça você mesmo um exercício sem atributos utilize apenas <hr>.
Salve o exercício
Visualize para ver como ficou.
Fim da lição 03
Abraço!

0 comentários:

Postar um comentário