Aldeia RPG

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

Suporte no desenvolvimento de jogos


2 participantes

    Aula de Programação Web - HTML 3

    『 』
    『 』
    Iniciante
    Iniciante

    Mensagens : 66
    Créditos : 12

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

    Mensagem por 『 』 Sab 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:

    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


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

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

    CorCor (Inglês)CódigoExemplo
    Pretoblack#000000 Exemplo Black
    Brancowhite#FFFFFF Exemplo White
    Azulblue#0000FF Exemplo Blue
    Amareloyellow#FFFF00 Exemplo Yellow
    Verdegreen#008000 Exemplo Green 
    Limalime#00ff00 Exemplo Lime
    Marrommaroon#800000 Exemplo Maroon 
    Olivaolive#808000 Exemplo Olive
    Azul Celesteaqua#00ffff Exemplo Aqua 
    Lilásfuchsia#ff00ff Exemplo Fuchsia
    Cinzagray#808080 Exemplo Gray
    Azul Escuronavy#000080 Exemplo Navy
    Roxopurple#800080 Exemplo Purple
    Verde Escuroteal#008080 Exemplo Teal
    Cinza Clarosilver#c0c0c0 Exemplo Silver
    Vermelhored#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>.



    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:

    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.


    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:



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



    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.



    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)
    Komuro Takashi
    Komuro Takashi
    Colaborador
    Colaborador

    Mensagens : 1045
    Créditos : 130

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

    Mensagem por Komuro Takashi Sab 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

      Data/hora atual: Ter Out 19, 2021 11:54 pm