Tecnologia para a Internet: teia html

Adicionar hiperligações
Fonte: Wikiversidade



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 | editar código-fonte]

  1. ↑ Vários exemplos de cores podem ser encontrados no artigo da Wikipédia Lista de cores e Tabela de cores.
Obtida de "https://pt.wikiversity.org/w/index.php?title=Tecnologia_para_a_Internet:_teia_html&oldid=17209"