Portal
Hi pessoal da Aldeia RPG, neste tópico estarei mostrando diversas tags HTML. Á muitas outras TAG'S alem destas que mostrarei nesta aula, mas elas ficarão para as Próximas aulas. Porém vou mostrar o máximo possível sobre os temas desta Aula. Então sem Enrolação vamos lá!
Atributos do Body
Os Atributos do Body, ficão dentro de <body>, podemos definir cores dos textos, links e fundo das páginas( Tanto em Cor quanto em Imagem). Temos Então:
- Código:
bgcolor, text, link, alink, vlink, background
- Explicações:
Explicações:- bgcolor - Cor de fundo. Ex: Clique Aqui
- text - Cor da fonte dos textos. Ex: Clique Aqui
- link - Cor dos links ( Padrão é Azul ). Ex: Clique Aqui
- alink - Cor dos links, quando clicados ( Padrão é Vermelho ). Ex: Clique Aqui
- vlink - Cor dos links, quando visitados ( Padrão é Roxo ). Ex: Clique Aqui
- background - Imagem de fundo ( URL da Imagem ). Ex: Clique Aqui
- bgcolor - Cor de fundo. Ex: Clique Aqui
Alguns dos Links estão iguais. Pois estão relacionados á mesma coisa.
Para defini-los coloque-os dentro da tag <body>, Ex:
- Código:
<body bgcolor="blue"> ou <body bgcolor = #FFFFFF>
Ou então se quiser vários / todos juntos:
- Código:
<body bgcolor="#FFFFFF" text="#000000" link="white" alink="black" vlink="#FFF">
Meta Tags
Após fazer seu site, não basta apenas coloca-lo na Internet somente com o título, é preciso os buscadores ( Google, Yahoo, bing, etc. ) achem o seu site, por isto, você deve inserir as Metas Tags. Elas devem Ficar entre as Tags do <head>, e são:
- Código:
<meta name="keywords">, <meta name="description">, <meta name="author">, <meta http-equiv="content-language">, <meta name="generator">, <meta http-equiv="content-type">
- Explicações:
Explicações:- <meta name="keywords"> - Serão as "Palavras Chaves", que os Buscadores utilizarão para encontrar seu Site.
- <meta name="description"> - É a Descrição do seu Site.
- <meta name="author"> - Coloca o nome do Autor do Site.
- <meta http-equiv = "content-language"> - Instrui os Navegadores, que o seu Site é feito na Linguagem definida.
- <meta name="generator"> - Indica que programa você utilizou. Bloco de Notas, DW, Notepad++, etc.
- <meta http-equiv="content-type"> - Indica que você escreve, seus textos normalmente nas páginas HTML, com Acentuação, etc. Porém sem a utilização de caracteres especiais (ASCII).
- <meta name="keywords"> - Serão as "Palavras Chaves", que os Buscadores utilizarão para encontrar seu Site.
Exemplos de sua Utilização:
- Código:
<head>
<title>Exemplo</title>
<META NAME="keywords" CONTENT="exemplo, da, aula, 3, DE, META, TAGS, aqui, são, as, palavras, chaves">
<META NAME="description" CONTENT="Aqui ficará a Descrição do seu Site">
<META NAME="author" CONTENT="Dawnmetal">
<META HTTP-EQUIV="content-language" CONTENT="pt">
<META NAME="generator" CONTENT="Bloco de Notas">
<META HTTP-EQUIV="content-type" CONTENT="text/html: charset=iso-8859-1">
</head>
OBS²: Á muitas outras Meta Tags, porém estarei colocando apenas estas aqui, para ver mais Meta Tags, estarei colocando 2 Sites abaixo.
- Link 1:
- http://www.extremaonline.com/meta_tags.html
- Link 2:
- http://www.linhadecodigo.com.br/artigo/3595/codigo-tag-o-que-e-meta-tag.aspx
Cores
Bom estarei colocando abaixo uma, lista de cores para vocês utilizarem. Só lembrando que é possível tando utilizar o Código da Cor (#000000 que é preto) quanto seu Nome em Inglês.
- Cores:
Cor Cor (Inglês) Código Exemplo Preto black #000000 Exemplo Black Branco white #FFFFFF Exemplo White Azul blue #0000FF Exemplo Blue Amarelo yellow #FFFF00 Exemplo Yellow Verde green #008000 Exemplo Green Lima lime #00ff00 Exemplo Lime Marrom maroon #800000 Exemplo Maroon Oliva olive #808000 Exemplo Olive Azul Celeste aqua #00ffff Exemplo Aqua Lilás fuchsia #ff00ff Exemplo Fuchsia Cinza gray #808080 Exemplo Gray Azul Escuro navy #000080 Exemplo Navy Roxo purple #800080 Exemplo Purple Verde Escuro teal #008080 Exemplo Teal Cinza Claro silver #c0c0c0 Exemplo Silver Vermelho red #FF0000 Exemplo Red
Letreiros e Linhas
Bom, os são aquelas Letras que vão passando por um Certo local.
Ex: Clique Aqui.
Bem para fazer isto que fiz no Exemplo, utilizaremos a TAG <marquee>. Veja:
- Código:
<marquee behavior=scroll direction="right" bgcolor="green" width = 50%> Texto </marquee>
- Explicações:
- Explicações:
- behavior - Scroll ou Slide. Scroll O texto fica Passando(Ex: Scroll), já Slide o texto fica parado no final.(Ex: Slide)
- direction - Right ou Left. Diz se vai para a Direita (Right) ou para a Esquerda (Left)
- bgcolor - A cor da "caixa", aonde o Texto irá passar.
- width - Tamanho da Caixa em Largura
Para adicionar mais Linhas no Letreiro basta dar 1 <br/> acada linha, ainda entre as tags do <marquee>. - behavior - Scroll ou Slide. Scroll O texto fica Passando(Ex: Scroll), já Slide o texto fica parado no final.(Ex: Slide)
Agora para adicionar uma linha é necessário utilizar a tag <hr>. Ex: Exemplo HR. É muito simples utilizar o <hr> Veja:
- Código:
<hr size=1 width=100% color="red">
- Explicações:
Explicações:- size - Insere uma Linha de largura Definida aqui.
- width - Insere uma linha que ocupa um certo espaço da tela
- color - Edita a cor da Linha.
- size - Insere uma Linha de largura Definida aqui.
Listas
Uma lista como o Nome já diz é uma Lista, eu já coloquei variadas listas na pagina. E aqui vai mais uma, com seus nomes:
- Listas Ordenadas.
- Listas sem Ordenação.
- Listas Encadeadas.
Lista Ordenada:
Para criar uma lista Ordenada utilizaremos a Tag <ol>, Veja:
- Código:
<ol>
<li> Mensagem 1 </li>
<li> Mensagem 2 </li>
<li> Mensagem 3 </li>
</ol>
Acesse o Exemplo do Código acima, Clicando Aqui.
Explicação: Os <li> serão encontrados em todas as Listas, eles criam as Linhas dessas listas ou seja necessita do <li> para que aquela linha seja parte, da lista. Um Exemplo para se entender melhor: Veja (Neste exemplo o "Mensagem 1", está sem o <li> e os demais com).
- Código:
<ol start=1 type=A>
Explicações:
- Onde 1 Indica que começará com a Primeira letra do Alfabeto
- Onde A é que utilizará o Alfabeto
Exemplo, Clique Aqui.
Lista sem Ordenação
Para criar uma Lista sem Ordenação Utilizaremos a Tag <ul>, Veja:
- Código:
<ul>
<li> Mensagem 1 </li>
<li> Mensagem 2 </li>
<li> Mensagem 3 </li>
</ul>
Acesse o exemplo do Código acima, Clicando aqui.
Lista encadeada
Para criar uma Lista Encadeada, utilizaremos tando a Tag <ol> quanto a tag <ul>, Veja:
- Código:
<ol>
<li>
<ul>
<li> Mensagem 1 </li>
<li> Mensagem 2 </li>
</ul>
</li>
</ol>
Veja o Exemplo do código acima, aqui.
Imagens
Uma coisa muito Utilizada agora, as Imagens. Para incluir uma imagem a nosso site vamos utilizar a tag <img src="imagem + extensão ou URL da Imagem">
Esta tag possui Diversos atributos entre eles:
- Atributos:
- width - Define a Largura da Imagem
- height - Define a Altura da Imagem
- alt - Texto que aparece quando se passa o Mouse sobre a Imagem
- border - Define a largura da Borda / Contorno da Imagem.
- width - Define a Largura da Imagem
Veja dois Exemplos:
Exemplo 1:
- Código:
<img src="http://aulasweb.esy.es/aula3/img-background.jpg" width="800" height="400" alt="Papel de Parede" border="1">
Exemplo 2:
- Código:
<img src="http://aulasweb.esy.es/aula3/img-background.jpg" alt="Papel de Parede" border="1">
Links para ver ambos:
Exemplo 1: Veja.
Exemplo 2: Veja.
Também se pode Alinhar as Imagens:
Também se pode Alinhar as Imagens:
- Alinhar:
- align - Alinha a Imagem, podendo ser top, middle, left, right.
- vspace - Define um espaço Vertical entre as imagens e os textos circundantes.
- hspace - Define um espaço Horizontal entre as imagens e os textos circundantes.
- align - Alinha a Imagem, podendo ser top, middle, left, right.
Não darei exemplo, para os mesmos.
Tabelas
Para fazer Tabelas utilizaremos a Tag <table> que possui os Seguintes atributos:
- Atributos:
- border - Define a largura da Borda / Contorno da Tabela.
- cellspacing - Define o espaço horizontal entre as células.
- cellpadding - Define o espaço vertical entre as células.
- width - Define a largura da Tabela em Pixels ou Porcentagem.
- height - Define a Altura da tabela em Pixel ou Porcentagem.
- bgcolor - Define a cor de fundo da tabela.
- bordercolor - Defini a cor da Borda da Tabela.
- background - Define uma imagem de fundo.
- border - Define a largura da Borda / Contorno da Tabela.
A Tabela possui alguns Comandos que são:
- Comandos:
- <tr> - Define uma Linha da tabela.
- <th> - Define um Cabeçalho da tabela
- <td> - Define uma coluna de Informações.
- <caption> - Define o título da Tabela.
- <tr> - Define uma Linha da tabela.
Veja um Exemplo:
- Código:
<table border="1" bordercolor="black" cellspacing="5" cellpadding="3" width="50%" height="20%" bgcolor="blue">
<tr>
<td>1ª Coluna</td>
<td>2ª Coluna</td>
<td>3ª Coluna</td>
</tr>
<tr>
<td>Texto 1</td>
<td>Texto 2</td>
<td>Texto 3</td>
</tr>
</table>
Veja como Ficará, Aqui. (Detalhe: Coloquei no <body> pro texto ficar Branco.)
As tabelas também podem ser Alinhadas com o Comando Align que pode ser:
- Aling:
- Left - Alinha á Esquerda.
- Right - Alinha á Direita.
- Center - Centraliza.
- Top - Alinha no topo.
- Middle - Alinha no Meio.
- Bottom - Alinha embaixo.
- Left - Alinha á Esquerda.
Bom, por hoje é só.
Mas antes de ir, aqui está um Site feito com alguns dos elementos desta Aula. Site 
Espero que tenham gostado da Aula, e até a Próxima
.<< Aula 2.2 - Aula 3 - Aula 4 >>
Última edição por Dawnmetal em Seg Dez 15, 2014 5:09 pm, editado 4 vez(es)
