Agora vamos ver sobre a utilização da etiqueta <body>.
A etiqueta <body> junto com seu par de fechamento </body> como já vimos, forma o corpo do nosso documento html.
Essa etiqueta ficará abaixo e depois da etiqueta </head>. Definitivamente.
Todo conteúdo do corpo da página criada estará dentro da etiqueta <body>.
Ou melhor entre as etiquetas do corpo do documento <body> e </body>.
Essa etiqueta contém atributos importantes.
E é através desses atributos que também podemos definir uma cor ou imagem para o fundo da página, definir a cor de um texto e dos links na página, etc.
Vamos ver agora um por um dos atributos da etiqueta <body>.
Os Atributos da etiqueta <body> são:
Bgcolor, background, text, link, alink, vlink, bottommargin, topmargin, leftmargin e rightmargin.
Esses atributos são incluídos dentro da etiqueta <body>, e não entre elas.
E seus valores são colocados com aspas (“ ”).
Bgcolor
Esse é o atributo que define a cor do fundo da página.
A cor padrão é cinza ou branco, caso você não indicar alguma cor nesse atributo.
Para inserir uma determinada cor você pode consultar uma tabela de cor com seus códigos respectivos.
Ou pode também colocar os nomes das cores (em Inglês).
Exemplo:
<html>
<head>
<title>Digite aqui o título<title/>
</head>
<body bgcolor=“#ccffff”>
</body>
</html>
Ou:
<html>
<head>
<title>Digite aqui o título<title/>
</head>
<body bgcolor=“red”>
</body>
</html>
Text
Essa é o atributo que define a cor do texto do documento.
O valor padrão é preto.
Aqui damos continuidade na criação desse documento acima,
incluindo os novos atributos que são mostrados aqui.
<html>
<head>
<title>Digite aqui o título</title>
</head>
<body bgcolor=”#ccffff” text=”#000080”>
</body>
</html>
Background
É o atributo que indica a cor ou um endereço (URL)
de uma imagem que será aplicada na página.
<html>
<head>
<title>Digite aqui o título</title>
</head>
<body bgcolor=”#ccffff” text=”#000080” background=”#48d1cc”>
</body>
</html>
Nota se que no atributo Background coloca se o valor de uma cor.
Mas pode se também colocar o nome da cor em inglês. Exemplo: "red".
E se for inserir uma imagem de fundo coloca se a URL desta; ou seja o endereço da imagem.
Veja:
<body bgcolor=”#ccffff”text=”#000080” background=”imagens/imag01.jpg”>
Tem que especificar a pasta de origem da imagem, o nome dela seguido de ponto, e o formato (extensão, exemplo: .png, .jpg, .gif).
Essa imagem tem que estar dentro da Pasta em que foi salva seu documento html.
Você também pode gostar de:
Como utilizar a etiqueta <body> - Dezegner
Como utilizar a etiqueta <h> - Dezegner
Como utilizar a etiqueta <p> - Dezegner
Link
Atributo que define a cor do link do documento.
Sua cor padrão é azul.
Alink
Define a cor do link ativo, quando clicado com o mouse.
Sua cor padrão é vermelho.
Vlink
Define a cor do link visitado.
A cor padrão é azul escuro ou roxo.
<html>
<head>
<title>Digite aqui o título</title>
</head>
<body bgcolor=”#ccffff” text=”#000080” background=”#48d1cc”
link=”#adff2f” alink=”#b22222” vlink=”#9400d3”>
</body>
</html>
Bottommargin
Define a margem de fundo da página, com um valor numérico.
Topmargin
Define a margem do topo da página, com um valor numérico.
Leftmargin
Define a margem da esquerda da página, com um valor numérico.
Rightmargin
Define a margem da direita da página, com um valor numérico.
Vamos ver adiante, mais detalhadamente cada etiqueta aqui mostrada.
Veja esse exemplo:
<html>
<head>
<title>Digite aqui o título</title>
</head>
<body bgcolor=”#ccffff” text=”#000080” background=”#48d1CC”
link=” #adff2f” alink=”#b22222” vlink=”#9400D3” bottommargin=”15”topmargin=”15”leftmargin=”15”rightmargin=”15”>
</body>
</html>
Esse valor (=”15”) Indica que a margem da página terá 15 pixel de largura.
Se for colocado zero ou não for colocado um valor em algum desses atributos, ou em todos; indicará que a margem vai se alinhar com a janela da página. OK!
Depois de criado esse documento com essa estrutura, e salvo, você pode visualizar ele, abrindo-o com o navegador.
Só que aparecerá somente um fundo azul sem mais nada, porque ainda não foi colocado um texto.
Se indicou uma imagem no atributo background é ela que irá aparecer.
Veja aqui um documento html, criado contendo texto, link e imagem de fundo, como exemplo.
<html>
<head>
<title>Digite aqui o Título</title>
</head>
<body background="band01.jpg" text="black" link="blue" alink="red" vlink="silver" topmargim="5" leftmargim="5" rightmargim="5" bottommargim="5">
<center>
<p><font size="30pt">Aqui vai o primeiro texto!!! </font></p>
<br><br>
<a href="C:\Users\home\html\site02\body.htm">Isso é um link para uma outra página!</a>
</body>
</html>
Copie ele e cole em um arquivo de texto do Bloco de Notas, e modifique o nome com a extensão da imagem, para uma imagem sua.
Modifique a cor do texto (text=), e do link; e também o numero da fonte (font size=).
Veremos mais sobre o link nas próximas postagens.
Agora...
Salve o arquivo como explicado anteriormente.
Depois abra-o com o seu navegador.
Verá a imagem que você colocou no background como fundo da página, e com a cor de texto e link que que definiu.
Veja uma página html aberta com o navegador, e contendo um fundo com uma imagem.
A etiqueta <body> junto com seu par de fechamento </body> como já vimos, forma o corpo do nosso documento html.
Essa etiqueta ficará abaixo e depois da etiqueta </head>. Definitivamente.
Todo conteúdo do corpo da página criada estará dentro da etiqueta <body>.
Ou melhor entre as etiquetas do corpo do documento <body> e </body>.
Essa etiqueta contém atributos importantes.
E é através desses atributos que também podemos definir uma cor ou imagem para o fundo da página, definir a cor de um texto e dos links na página, etc.
Vamos ver agora um por um dos atributos da etiqueta <body>.
Os Atributos da etiqueta <body> são:
Bgcolor, background, text, link, alink, vlink, bottommargin, topmargin, leftmargin e rightmargin.
Esses atributos são incluídos dentro da etiqueta <body>, e não entre elas.
E seus valores são colocados com aspas (“ ”).
Bgcolor
Esse é o atributo que define a cor do fundo da página.
A cor padrão é cinza ou branco, caso você não indicar alguma cor nesse atributo.
Para inserir uma determinada cor você pode consultar uma tabela de cor com seus códigos respectivos.
Ou pode também colocar os nomes das cores (em Inglês).
Exemplo:
<html>
<head>
<title>Digite aqui o título<title/>
</head>
<body bgcolor=“#ccffff”>
</body>
</html>
Ou:
<html>
<head>
<title>Digite aqui o título<title/>
</head>
<body bgcolor=“red”>
</body>
</html>
Text
Essa é o atributo que define a cor do texto do documento.
O valor padrão é preto.
Aqui damos continuidade na criação desse documento acima,
incluindo os novos atributos que são mostrados aqui.
<html>
<head>
<title>Digite aqui o título</title>
</head>
<body bgcolor=”#ccffff” text=”#000080”>
</body>
</html>
Background
É o atributo que indica a cor ou um endereço (URL)
de uma imagem que será aplicada na página.
<html>
<head>
<title>Digite aqui o título</title>
</head>
<body bgcolor=”#ccffff” text=”#000080” background=”#48d1cc”>
</body>
</html>
Nota se que no atributo Background coloca se o valor de uma cor.
Mas pode se também colocar o nome da cor em inglês. Exemplo: "red".
E se for inserir uma imagem de fundo coloca se a URL desta; ou seja o endereço da imagem.
Veja:
<body bgcolor=”#ccffff”text=”#000080” background=”imagens/imag01.jpg”>
Tem que especificar a pasta de origem da imagem, o nome dela seguido de ponto, e o formato (extensão, exemplo: .png, .jpg, .gif).
Essa imagem tem que estar dentro da Pasta em que foi salva seu documento html.
Você também pode gostar de:
Como utilizar a etiqueta <body> - Dezegner
Como utilizar a etiqueta <h> - Dezegner
Como utilizar a etiqueta <p> - Dezegner
Link
Atributo que define a cor do link do documento.
Sua cor padrão é azul.
Alink
Define a cor do link ativo, quando clicado com o mouse.
Sua cor padrão é vermelho.
Vlink
Define a cor do link visitado.
A cor padrão é azul escuro ou roxo.
<html>
<head>
<title>Digite aqui o título</title>
</head>
<body bgcolor=”#ccffff” text=”#000080” background=”#48d1cc”
link=”#adff2f” alink=”#b22222” vlink=”#9400d3”>
</body>
</html>
Bottommargin
Define a margem de fundo da página, com um valor numérico.
Topmargin
Define a margem do topo da página, com um valor numérico.
Leftmargin
Define a margem da esquerda da página, com um valor numérico.
Rightmargin
Define a margem da direita da página, com um valor numérico.
Vamos ver adiante, mais detalhadamente cada etiqueta aqui mostrada.
Veja esse exemplo:
<html>
<head>
<title>Digite aqui o título</title>
</head>
<body bgcolor=”#ccffff” text=”#000080” background=”#48d1CC”
link=” #adff2f” alink=”#b22222” vlink=”#9400D3” bottommargin=”15”topmargin=”15”leftmargin=”15”rightmargin=”15”>
</body>
</html>
Esse valor (=”15”) Indica que a margem da página terá 15 pixel de largura.
Se for colocado zero ou não for colocado um valor em algum desses atributos, ou em todos; indicará que a margem vai se alinhar com a janela da página. OK!
Depois de criado esse documento com essa estrutura, e salvo, você pode visualizar ele, abrindo-o com o navegador.
Só que aparecerá somente um fundo azul sem mais nada, porque ainda não foi colocado um texto.
Se indicou uma imagem no atributo background é ela que irá aparecer.
Veja aqui um documento html, criado contendo texto, link e imagem de fundo, como exemplo.
<html>
<head>
<title>Digite aqui o Título</title>
</head>
<body background="band01.jpg" text="black" link="blue" alink="red" vlink="silver" topmargim="5" leftmargim="5" rightmargim="5" bottommargim="5">
<center>
<p><font size="30pt">Aqui vai o primeiro texto!!! </font></p>
<br><br>
<a href="C:\Users\home\html\site02\body.htm">Isso é um link para uma outra página!</a>
</body>
</html>
Copie ele e cole em um arquivo de texto do Bloco de Notas, e modifique o nome com a extensão da imagem, para uma imagem sua.
Modifique a cor do texto (text=), e do link; e também o numero da fonte (font size=).
Veremos mais sobre o link nas próximas postagens.
Agora...
Salve o arquivo como explicado anteriormente.
Depois abra-o com o seu navegador.
Verá a imagem que você colocou no background como fundo da página, e com a cor de texto e link que que definiu.
Veja uma página html aberta com o navegador, e contendo um fundo com uma imagem.
Já sabemos bastante sobre a etiqueta <body>, mas ainda tem muito mais.
A seguir vamos ver as etiquetas <h> e <p>.
Espero que tenham gostado dessa postagem e deixem seu comentário.
Ah, e não se esqueça de se inscrever nesse Blogue.
Até a próxima postagem...