Aula de Programação Web - HTML 3 Hitskin_logo Hitskin.com

Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema

Aldeia RPG
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

Suporte ao desenvolvimento de jogos


Aula de Programação Web - HTML 3

2 participantes

Aldeia RPG :: Centro de aprendizagem :: Programação :: Web

Ir para baixo

Aula de Programação Web - HTML 3 Empty Aula de Programação Web - HTML 3

Mensagem por 『 』 Sáb Nov 15, 2014 2:15 pm

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:

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:
OBS¹: Não estarei dando Exemplos sobre estes em um Site, pois não faria sentido, é mais fácil ir no Google colocar qualquer coisa que se possa pesquisar e ver.




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

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:

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



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">
Como poder ver não á necessidades de Fechar o <hr>.
Explicações:

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:

  1. Listas Ordenadas.
  2. Listas sem Ordenação.
  3. 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).


Caso não deseje que a lista fique numerada com Números ( 1, 2, 3, ...) então use
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.


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


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.




A Tabela possui alguns Comandos que são:
Comandos:


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:


Bom, por hoje é só.
Mas antes de ir, aqui está um Site feito com alguns dos elementos desta Aula. Site Razz

Espero que tenham gostado da Aula, e até a Próxima Successful.

<< Aula 2.2 - Aula 3 - Aula 4 >>


Última edição por Dawnmetal em Seg Dez 15, 2014 5:09 pm, editado 4 vez(es)
『 』
『 』
Iniciante
Iniciante

Mensagens : 66
Créditos : 13

Ir para o topo Ir para baixo

Aula de Programação Web - HTML 3 Empty Re: Aula de Programação Web - HTML 3

Mensagem por Komuro Takashi Sáb Nov 15, 2014 4:03 pm

Éra isso q eu estava falando agora sim parabéns e +1 pra incentivar novas aulas.

_________________
Aula de Programação Web - HTML 3 Takashi_komuro_by_minato8-d51g9o4

Paga um café? Patreon
Komuro Takashi
Komuro Takashi
Colaborador
Colaborador

Mensagens : 1047
Créditos : 130

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

Aldeia RPG :: Centro de aprendizagem :: Programação :: Web

 
Permissões neste sub-fórum
Não podes responder a tópicos