Plus no site em html

No comments





Plus
Outros comandos e algumas dicas que podem auxiliar na elaboração de sua homepage.
Você pode inserir uma barra horizontal na sua página, através da tag <hr>. Esse comando pode receber os seguinte atributos:
aling="alinhamento" : define o alinhamento da barra, que pode ser left, right e center, definindo alinhamento à direita, à esquerda e ao centro, respectivamente.
width="n" : define o comprimento da barra, onde n recebe valores absolutos em pixels (width="350") ou em porcentagem (width="80%").
size="n" : define a espessura da barra.
color="cor" : define a cor da barra.

Você pode destacar o seu texto utilizando os comandos blink, que produzirá um efeito de texto piscando, e marquee, que produz o efeito de texto "passando" na tela. Esses comando devem ser utilizados quando você desejar dar destaque a uma frase ou palavra.


Porém, devem ser utilizados com cautela, evitando exageros, para que a atenção do usuário não fique voltada somente para o destaque, deixando de lado o resto da página.
<blink>: define o efeito de "pisca-pisca" para o texto.</blink> encerra o efeito do texto piscante. O comando <blink> texto digitado</blink> resulta no seguinte exemplo:
texto digitado
Obs.: Não funciona no Internet Explorer e funciona somente no Netscape 7.02.
<marquee>: define o efeito de texto passando pela tela.</marquee> encerra o efeito do texto passante. O comando <marquee>texto digitado</marquee> resulta no seguinte exemplo:
texto digitado       
Obs.: Funciona no Internet Explorer e no Netscape 7.02.

Leia Mais »

Criar Tabelas em html

No comments




Tabelas
Organização de tabelas e a noção de como estruturar um documento utilizando as tags de tabela.

As tabelas são definidas pelas tags <table> </table>. Dentro dessas tags, você deve definir as linhas <tr> </tr> e as colunas <td> </td> da tabela.


Para definir uma tabela com duas linhas e duas colunas, por exemplo, você terá a seguinte estrutura:
<table> - inicializa a tabela
  <tr> - inicializa a primeira linha
    <td> conteúdo da célula </td> - inicializa e fecha coluna da esquerda
    <td> conteúdo da célula </td> - inicializa e fecha a coluna da direita
  </tr> - fecha a primeira linha
  <tr> - inicializa a segunda linha
    <td> conteúdo da célula </td> - inicializa e fecha a coluna da esquerda
    <td> conteúdo da célula </td> - inicializa e fecha a coluna da direita
  </tr> - fecha a segunda linha
</table> - fecha a tabela

Exemplo de uma tabela: 

 

<html>
    <head>
        <title>Tabela</title>
    </head>
    <body>
        <table border="1">
            <tr>
                <td width="150" height="25">Célula 1</td>
                <td width="150" height="25">Célula 2</td>
            </tr>
            <tr>
                <td width="150" height="25">Célula 3</td>
                <td width="150" height="25">Célula 4</td>
            </tr>
        </table>
    </body>
</html>
As tags <taable> </table> podem ter os seguintes atributos:
border="n" : define a espessura da borda da tabela, onde n recebe um valor de 1 a 6.
cellspacing="n" : define o espaçamento horizontal entre as células.
cellpadding="n" : define o espaçamento vertical entre as células, sem refletir na largura da borda.
widht="n" : define a largura da tabela em relação à página. Pode ser dada em pixels (width="400") ou em porcentagem (width="80%").
height="n" : define a altura da tabela em relação à página. Pode ser dada em pixels (height="350") ou porcentagem (height="50%").
bgcolor="cor" : define a cor de fundo da tabela. Aqui, você também pode optar por escolher uma imagem como fundo da tabela, com o atributo background="imagem", que receberá um arquivo .gif ou .jpg.
AS tags <td> </td> e <tr> </tr> podem receber atributos também:
aling="alinhamento" : define o alinhamento da célula, que pode ser right, left e center, definindo um alinhamento à direita, à esquerda e ao centro, respectivamente.
valing="alinhamento_vertical" : define o alinhamento vertical da célula, ou seja, a distribuição do texto em relação à página. Esse texto pode ser definido como top, para o topo da célula; middle, para o meio da célula e bottom para a base da célula.
colspan="n" : define o número de colunas a serem agrupadas em uma única célula.
rowspan="n" : define o número de linhas a serem agrupadas em uma única célula.



Veja Mais:
Leia Mais »

Criar Listas em html

No comments


Listas
Organização de listas numeradas e não-numeradas.

Uma outra maneira de organizar o seu texto é através da utilização de listas. Elas podem ser listas de tópicos ou listas numeradas, como nos exemplos:

<ul>
       <li>item 1</li>
       <li>item 2</li>
 <li>item 3</li> 
</ul>

•item 1
•item 2
•item 3

<ol>
       <li>item 1</li>
       <li>item 2</li>
 <li>item 3</li> 
</ol>

1. item 1
2. item 2
3. item 3
As tags para as listas não-numeradas são <ul> lista </ul>. Quando quisermos listas numeradas, usamos <ol> lista </ol>. Dentro dessas tags, cada linha será definida pelas tags <li> item </li>.
Essas listas podem receber diversos atributos, que definem o tipo de numeração e o tipo de marcador a serem usados.
type="tipo_de_marcador" : define o tipo de marcador de lista não-numerada, sendo square para quadrado, disc para círculo preenchido (padrão) e circle para círculo transparente. Esse tipo só pode ser definido para listas com tags <ul> </ul>.
type="tipo_de_numeracao" : define o tipo de numeração a ser utilizado em uma lista numerada, sendo a para letras minúsculas, A para letras maiúsculas, I para romanos maiúsculos, i para romanos minúsculos e 1 para numeração padrão. Esse tipo só pode ser definido para listas com tags <ol> </ol>.

Veja Mais:
Leia Mais »

Criar Links em html

No comments





Links
Inserção de links na sua homepage, organizando uma barra de navegação interna ou direcionando-a para uma homepage externa à sua.
As tags de links permitem que se defina uma palavra ou expressão como um vínculo para outra página. Assim que a palavra for clicada, o usuário será enviado para outra página, que pode ter sido criada por você ou ser externa ao seu documento. Quando a página for externa, é importante lembrar em colocar o link absoluto da URL, num formato tal qual http://www.cinted.ufrgs.br.



Os links devem ser definidos entre as tags <a> </a>. Essas tags podem receber os seguintes atributos:


href="endereco" : define o endereçco do link. Se externo, deve conter um endereço absoluto de uma URL, tal como http://www.cinted.ufrgs.br. Se interno, o link pode ser um endereço relativo, tal como nome_da_pagina.html, desde que essa página esteja na mesma pasta daquela que contém o link.
href="mailto:endereco_de_mail" : define o endereço de e-mail.
O link, além de uma palavra ou expressão, também pode ser uma imagem. Para isso, ao invés de colocar um texto entre as tags <a> </a>, você deve colocar uma imagem: <a href="pagina.html"><img src="imagem.gif"></a>.

Leia Mais »

Formatar imagem em html

No comments


Imagens
Ilustração da sua homepage, incluindo os comandos de imagens
Para ilustrar sua página, você pode utilizar a tag de imagem: <img>. Os arquivos devem ter as extensões .gif ou .jpg. Você pode preparar essas imagens no PaintShop.
Os atributos a serem utilizados na tag <img> são:
src="nome_do_arquivo" : define a imagem a ser mostrada. É importante lembrar que o link para a imagem deve ser absoluto. Para garantir isso, é recomendável que você coloque as imagens utilizadas na mesma pasta em que está sua página.
aling="alinhamento" : define o alinhamento da imagem, podendo ser left, right e center, para alinhamento à esquerda, à direita e ao centro.
alt="texto" : define um texto alternativo para caso do navegador não suportar a visualização de imagens. Esse texto também será mostrado quando passarmos o mouse por cima da imagem.
border="n" : define a espessura da borda que contorna a imagem. Se você não quer borda, deve escolher border="0".
width="n" : define a largura da imagem.
height="n" : define a altura da imagem.
Um exemplo de comando de imagem seria:
<img src="imagem.gif" aling="center" alt="Minha Imagem!" border="1" width="150" height="135">.
Leia Mais »

Formatar imagem em html

No comments



Imagens
Ilustração da sua homepage, incluindo os comandos de imagens

<img src="imagem.gif" aling="center" alt="Minha Imagem!" border="1" width="150" height="135">
 
Para ilustrar sua página, você pode utilizar a tag de imagem: <img>. Os arquivos devem ter as extensões .gif ou .jpg. Você pode preparar essas imagens no PaintShop.
Os atributos a serem utilizados na tag <img> são:

src="nome_do_arquivo" : define a imagem a ser mostrada. É importante lembrar que o link para a imagem deve ser absoluto. Para garantir isso, é recomendável que você coloque as imagens utilizadas na mesma pasta em que está sua página.


aling="alinhamento" : define o alinhamento da imagem, podendo ser left, right e center, para alinhamento à esquerda, à direita e ao centro.
alt="texto" : define um texto alternativo para caso do navegador não suportar a visualização de imagens. Esse texto também será mostrado quando passarmos o mouse por cima da imagem.
border="n" : define a espessura da borda que contorna a imagem. Se você não quer borda, deve escolher border="0".
width="n" : define a largura da imagem.
height="n" : define a altura da imagem.
Um exemplo de comando de imagem seria:
<img src="imagem.gif" aling="center" alt="Minha Imagem!" border="1" width="150" height="135">.

Veja Mais:
Leia Mais »

Formatar imagem em html

No comments


Imagens
Ilustração da sua homepage, incluindo os comandos de imagens
Para ilustrar sua página, você pode utilizar a tag de imagem: <img>. Os arquivos devem ter as extensões .gif ou .jpg. Você pode preparar essas imagens no PaintShop.
Os atributos a serem utilizados na tag <img> são:
src="nome_do_arquivo" : define a imagem a ser mostrada. É importante lembrar que o link para a imagem deve ser absoluto. Para garantir isso, é recomendável que você coloque as imagens utilizadas na mesma pasta em que está sua página.
aling="alinhamento" : define o alinhamento da imagem, podendo ser left, right e center, para alinhamento à esquerda, à direita e ao centro.
alt="texto" : define um texto alternativo para caso do navegador não suportar a visualização de imagens. Esse texto também será mostrado quando passarmos o mouse por cima da imagem.
border="n" : define a espessura da borda que contorna a imagem. Se você não quer borda, deve escolher border="0".
width="n" : define a largura da imagem.
height="n" : define a altura da imagem.
Um exemplo de comando de imagem seria:
<img src="imagem.gif" aling="center" alt="Minha Imagem!" border="1" width="150" height="135">.
Leia Mais »

Editar texto em html

No comments



Texto
Formatações básicas de texto. Como alterar a fonte e incluir tags de marcação de linhas e parágrafos.
Agora que você já definiu as primeiras tags do seu documento HTML, não esqueça de salvá-lo. No Bloco de Notas, salve o arquivo como nome_do_arquivo.html ou nome_do_arquivo.htm. O navegador é capaz de interpretar qualquer uma dessas duas extensões. É importante lembrar que, se você está utilizando imagens, coloque-as na mesma pasta onde está sua página. Quando utilizar links, não esqueça de atribuir o endereço absoluto.
Para facilitar o aprendizado foi criado uma aula sobre esse assunto. Você pode escolher seguir o tutorial escrito ou em formato vídeo aula.


Quer visualizar o curso completo acesse o seguinte link: Clique aqui ou https://www.youtube.com/watch?v=YI1uk98O2TA&list=PLZ2Dn-oHDuIPc1d0CPMaWpPaO_TNnOndU 







 


Quer visualizar o curso completo acesse o seguinte link: Clique aqui ou https://www.youtube.com/watch?v=YI1uk98O2TA&list=PLZ2Dn-oHDuIPc1d0CPMaWpPaO_TNnOndU  
 
A cor do texto já foi definida, de uma forma geral, nas tags <body></body>, com o atributo TEXT. Porém, você pode querer alterar alguma parte do seu texto, um título, por exemplo. Para isso, é necessário que você conheça as tags e atributos dos comandos que definem a fonte da página.

O tipo de fonte a ser usado pode ser definido pelas tags <font> </font>. Essas tags têm os seguintes atributos:
face="nome_da_fonte" : define o tipo de fonte a ser utilizado. A fonte Verdana é considerada uma das melhores para leitura no monitor. Além dessa, qualquer outra fonte não serifada (sem contornos) é uma boa opção, como a Arial e a Helvetica.
color="cor" : define a cor da fonte. Como em qualquer outra atribuição de cor, o valor pode ser definido com o nome da cor em inglês ou através de um código.
size="n" : define o tamanho da fonte, sendo que n pode variar de 1 a 7. O valor 2 corresponde ao tamanho 10 para Arial e 12 para Times New Roman, os que normalmente utilizamos na formatação ABNT nos editores de texto.

Uma maneira mais fácil de definir títulos é utilizar as tags <h></h>, onde n pode assumir os valores de 1 à 6, que especificam o tamanho da fonte. O alinhamento à esquerda, à direita, ao centro e justificado podem ser definidos pelos atributos aling="left" ou align="right" ou align="center" ou align="justify", respectivamente.

Título definido por <h3 align="center"> título </h3>
Para organizar o texto, você pode utilizar as tags de parágrafo <p></p> ou a quebra de linha <br>. A marca de linha define um 'enter' no texto, enquanto a marca de parágrafo vai definir um 'enter' seguido de uma nova linha. Para entrada de parágrafo no texto, você pode utilizar as tags <dd> </dd>. As tags de parágrafo também podem receber o atributo ALIGN.
Para definir estilos de texto, você pode utilizar as tags <b> texto </b> para negrito, <i> texto </i> para itálico e <u> texto </u> para sublinhado. Um texto em negrito, em itálico e sublinhado ficaria assim: <b><i><u> texto com estilo </u></i></b>. Para sobrescrito, utlizamos as tags <sup> texto </sup>. Para subscrito, utilizamos <sub> texto </sub>.

Veja mais:
Leia Mais »

Editar texto em html

No comments


Texto
Formatações básicas de texto. Como alterar a fonte e incluir tags de marcação de linhas e parágrafos.
Agora que você já definiu as primeiras tags do seu documento HTML, não esqueça de salvá-lo. No Bloco de Notas, salve o arquivo como nome_do_arquivo.html ou nome_do_arquivo.htm. O navegador é capaz de interpretar qualquer uma dessas duas extensões. É importante lembrar que, se você está utilizando imagens, coloque-as na mesma pasta onde está sua página. Quando utilizar links, não esqueça de atribuir o endereço absoluto.
A cor do texto já foi definida, de uma forma geral, nas tags <body></body>, com o atributo TEXT. Porém, você pode querer alterar alguma parte do seu texto, um título, por exemplo. Para isso, é necessário que você conheça as tags e atributos dos comandos que definem a fonte da página.
O tipo de fonte a ser usado pode ser definido pelas tags <font> </font>. Essas tags têm os seguintes atributos:
face="nome_da_fonte" : define o tipo de fonte a ser utilizado. A fonte Verdana é considerada uma das melhores para leitura no monitor. Além dessa, qualquer outra fonte não serifada (sem contornos) é uma boa opção, como a Arial e a Helvetica.
color="cor" : define a cor da fonte. Como em qualquer outra atribuição de cor, o valor pode ser definido com o nome da cor em inglês ou através de um código.
size="n" : define o tamanho da fonte, sendo que n pode variar de 1 a 7. O valor 2 corresponde ao tamanho 10 para Arial e 12 para Times New Roman, os que normalmente utilizamos na formatação ABNT nos editores de texto.
Uma maneira mais fácil de definir títulos é utilizar as tags <h></h>, onde n pode assumir os valores de 1 à 6, que especificam o tamanho da fonte. O alinhamento à esquerda, à direita, ao centro e justificado podem ser definidos pelos atributos aling="left" ou align="right" ou align="center" ou align="justify", respectivamente.
Título definido por <h3 align="center"> título </h3>
Para organizar o texto, você pode utilizar as tags de parágrafo <p></p> ou a quebra de linha <br>. A marca de linha define um 'enter' no texto, enquanto a marca de parágrafo vai definir um 'enter' seguido de uma nova linha. Para entrada de parágrafo no texto, você pode utilizar as tags <dd> </dd>. As tags de parágrafo também podem receber o atributo ALIGN.
Para definir estilos de texto, você pode utilizar as tags <b> texto </b> para negrito, <i> texto </i> para itálico e <u> texto </u> para sublinhado. Um texto em negrito, em itálico e sublinhado ficaria assim: <b><i><u> texto com estilo </u></i></b>. Para sobrescrito, utlizamos as tags <sup> texto </sup>. Para subscrito, utilizamos <sub> texto </sub>.
Leia Mais »

 
Design by Wordpress Theme | Bloggerized by Free Blogger Templates | JCPenney Coupons