Tecnologia para a Internet: teia html
A linguagem HTML é uma linguagem muito simples usada na configuração de página da Web (um exemplo muito simples é clicar com o botão direito do mouse sobre a página que você está e selecionar Código fonte). HTML é uma linguagem de alto nível, ou seja, mais próxima da "compreensão" humana, diferente de Assembly, por exemplo, que é uma linguagem de baixo nível, mais próxima a "linguagem do computador".
Voltando ao HTML, tem-se as estruturas básicas do HTML, as que usamos paa configurar uma página. Para "simplificar" a explicação, abaixo são citados exemplos:
- <html> (inicia a configuração html).
- <head> (como se fosse o "cabeçalho". Aqui definimos o título entre outras coisas).
- <title> -*Wikilivros!*- </title> (título da página. Indicado entre <title> e </title>).
- </head> (fim do cabeçalho indicado por </head>).
- <body bgcolor = #000000 text = #1F9F1F> (iniciamos a configuração do "corpo" da página.
Na expressão acima, "body bg color =" indica a cor da página ou a cor de fundo que também poderia ser uma imagem. E "text =" indica a cor do texto, ou seja, tudo o que escrevermos na página, será exibido com esta cor. Um exemplo seria o seguinte: "<body bgcolor = #000000 text = #1F9F1F> fundo preto (#00000 e a cor das letras em verde "limão" rs #1f9f1f) [1].
- <bgsound src = "a.mp3"> </bgsound> (determina-se que música tocará na página).
É importante lembrar que tanto as imagens quanto a música que forem exibidos na página devem estar na mesma pasta que depois deve ser compactada. Os sons são indicados por "bgsound src ="a música qua você vai colocar"><bgsound>).
- <h1> Wikilivros! </h1> (este é o primeiro parágrafo que será exibido com uma letra maior).
Podemos ter até seis parágrafos [h6] no entanto o texto do h6 seria exibido com uma letra muito pequena, o que não é nada bom para quem está lendo. Exemplo, <h2> Bem vindos ao Wikilivros! (segundo parágrafo <h2></h2> e assim por diante).
- O Wikilivros (do inglês Wikibooks) é dedicado ao desenvolvimento <p>
(perceba que o comanda <p> gera um parágrafo).
Este comando não indica uma quebra de linha como <br> mas sim um parágrafo, não como os "h1" mas um parágrafo "normal". Ele já "formata" o texto com um espaço antes da frase, como se estivéssemos escrevendo um parágrafo no caderno, e chegando ao fim deste, ocorre a quebra de linha. Não determinamos <p> no início da frase ou parágrafo, apenas ao fim desta colocamos o <p> que indica ser um parágrafo).
- <br> <br> (aqui ocorrem duas quebras de linha para deixar um espaço entre os textos ou imagens, em geral por questões estéticas).
- <center> (centraliza o texto ou a foto, ou ainda ambos).
- <img src="exemplo!.gif"> (esta é a imagem que será exibida).
Lembre-se que esta imagem deve estar na mesma pasta que a página, com exatamente o mesmo nome que se coloca entre aspas, pois é ele que vai indicar para o brownser o caminho da imagem.
- </center> (indica o fim da "centralização").
É importante lembrar que nestas configurações apenas imagens no formado "gif" ou "jpeg" serão exibidas. Caso não tenha uma imagem nestes formatos é fáci: mande-a para o paint e mude o formato dela lá . Basta ir em "salvar como" e embaixo de onde colocamos o nome da imagem, definir o tipo de imagem que ela será. Então, você coloca ou ".gif" ou ".jpeg" e salva. O problema do gif é que ele deixa a imagem meio opaca.
- <ul> (indica o início de uma lista não numerada, onde só aparecem aquelas "bolinhas" que indicam cada item).
- <li> (cada <li> é uma nova "bolinha" ou seja, devemos colocar <li> a cada novo item).
- <b>Exemplo!! (<b> significa "bold" que é negrito. Então <b> deixa o texto em negrito até onde se determinar, o que pode ser feito, "fechando a chave" com </b>).
- </ul> (determina o fim da lista, embora alguns "comandos" funcionem dentro da lista como o <b></b> e o <i></i> que determina textos em itálico).
- <marquee behavior = "alternate" diretion = "right"> Exemplo!!!</marquee> (este comando faz com que as palavras que são "determinadas" entre "marquee behavior = "alternate" diretion = "right"></marquee> fiquem "andando" da direita para a esquerda).
- <pre></pre> (o comando <pre></pre> deixa o texto justamente como você o digita, com as quebras de linha sem serem indicadas e com os parágrafos que você cria sem serem indicados por <p>.
- <adress></adress> (indica o autor)
- </body> (indica o fim do corpo.).
- </html> (e o fim completo do código </html>).
Notas
editar- ↑ Vários exemplos de cores podem ser encontrados no artigo da Wikipédia Lista de cores e Tabela de cores.