Formatando Textos Com HTML

Formatando textos com HTML
Marcadores: HTML
Hoje vou ensinar a vocs como formatar textos em HTML. Lembrando que utilizaremos algumas tags de formatao padro dos navegadores e no utilizaremos CSS ainda, este ser o assunto de outra postagem. Anteriormente, aprendemos como criar uma pgina HTML e inserir um texto ou uma frase que apareceria no navegador Web de forma no formatada. Ento chegamos ao seguinte cdigo: <!DOCTYPE html> <html> <head> <title>Digite seu ttulo aqui!</title> </head> <body> Esta minha primeira pgina HTML! </body> </html> Agora abra o arquivo index.html, que criamos na postagem N 1, com o Notepad++ e comearemos a editar o mesmo. No esquecendo de que todas as tags abaixo devem ser aplicadas somente entre <body> e </body>, ou seja, no corpo da pgina HTML.
Ttulos:
As tags padro para ttulos que j esto pr-formatadas nos navegadores Web so: <h1>, <h2>, <h3>, <h4>, <h5> e <h6>. Estas tags j esto formatadas em negrito e com uma letra maior do que a do texto convencional. A nica diferena entre estas tags que a <h1> possui a maior tamanho de letra e a letra vai diminuindo de tamanho at chegar at a <h6>, que possui o menor tamanho de letra. A sua utilizao comum a das tags explicadas na postagem N1, devendo ser abertas e fechadas com a utilizao de uma barra (/). Veja os exemplos: <h1>Seu ttulo aqui!</h1> <h2>Seu ttulo aqui!</h2> <h3>Seu ttulo aqui!</h3> <h4>Seu ttulo aqui!</h4> <h5>Seu ttulo aqui!</h5> <h6>Seu ttulo aqui!</h6>
Quebras de linha:
Voc j deve ter percebido que no importa quantidade de enters que voc aplica a uma determinada linha de seu texto a quebra de linha nunca acontece. Isso ocorre porque esta funo de quebra de linha designada a tag <br />, cuja a sua utilizao diferenciada, pois a mesma indica uma tag "completa", aberta e fechada. Exemplo: Este o meu texto <br /> com quebra de linha. Note que mesmo digitando tudo em uma nica linha, a hora que o arquivo aberto no navegador a quebra de linha acontece aonde a tag <br /> foi colocada.
Pargrafos:
A tag que tem a funo de formatar um bloco de texto como pargrafo a tag <p>. Ela utilizada da mesma forma que as tags dos ttulos. Exemplo: <p>Este o meu pargrafo em HTML que aprendi a formatar utilizando a linguagem de programao HTML, explicada nos artigos do site do Maik Basso.</p>
Outras tags para a formatao de textos:
Aqui em baixo citarei vrias outras tags para a formatao de textos em HTML, e em seguida seus respectivos exemplos de utilizao.
1- Estilos de texto:
Tag
Funo
Exemplo <b>Texto em negrito.</b> <strong>Texto em negrito.</strong> <i>Este texto est em itlico.</i>
<b>,<strong> Colocam o texto em negrito. <i> <u> <sub> <sup>

2- Fontes:
Coloca o texto em itlico.
Coloca um sublinhado no texto. <u>Texto sublinhado.</u> Coloca o texto como subscrito. Texto <sub>subscrito.</sub> Coloca o texto como sobrescrito. Texto <sup>sobrescrito.</sup>
Em HTML possvel alterar o tipo da fonte, a sua cor e o seu tamanho, tudo com a tag <font>.
>>>Tipo da fonte:
Usa-se o comando face para designar o tipo da fonte dentro da tag <font>. Os valores a serem aplicados no comando face so: Arial, Verdana entre outros nomes de letras. Exemplo: <font face="Arial">Texto com fonte do tipo Arial."</font>
>>>Cor da fonte:
Usa-se o comando color para designar a cor da fonte dentro da tag <font>. Seus possveis valores so: nome de cores em ingls (blue, black, yellow, ...), cores representadas por cdigos hexadecimais (#FF0000 (cdigo da cor vermelha em hexadecimal)), entre outras formas. Mas no preciso sair decorando nmeros de cores, para isto existem tabelas e softwares que auxiliam no processo. Exemplo:
<font color="red">Texto com fonte em cor vermelha.</font>

>>>Tamanho da fonte:
Usa-se o comando size para designar o tamanho da fonte dentro da tag <font>. Os possveis valores so: valores em Pixel (exemplo: 12px); valores em Keyword (xx-small, small, medium, large, x-large, e xx-large); valores EM (1em (lembrando que 1em=16px)); valores em Porcentagem (15%); valores em PT (12pt (usado somente para pginas que sero impressas)). Exemplo: <font size="20px">Texto com fonte em tamanho de 20 pxeis.</font>
>>>Combinao de comandos:
Tambm possibilidade de se combinar comandos dentro de tags, sem a necessidade de uma ordem especfica. Exemplo: <font color="blue" face="Verdana" size="12px">Texto com fonte azul do tipo Verdana e tamanho de 12 pxeis.</font>
3- Tags pr-formatadas de tamanho do texto:
<small> - Coloca o texto em uma letra de menor tamanho. Exemplo: <small>Texto com letra reduzida.</small> <big> - Coloca o texto em uma letra de maior tamanho. Exemplo: <big>Texto com letra grande.</big>
4- Alinhamento de texto:
>>>Tag pr-formatada:
<center> - Centraliza o texto. Exemplo:
<center>Texto centralizado.</center>
>>>Alinhando com as tags <p> ou <div>:
Como eu j havia explicado acima possvel inserir comandos dentro de tags. O comando responsvel pelo alinhamento o comando align que pode assumir quatro valores: center (alinhar no centro); left (alinhar esquerda); right (alinhar a direita); justify (texto justificado). Para alinhar textos geralmente utilizamos o comando align nas tags <p> e <div> (div vem de diviso, ou seja, tag que cria blocos.). Exemplos: <p align="center">Texto centralizado.</p> <div align="right">Texto alinhado direita.</div>
5- Outros:
<hr /> - Cria um separador, ou seja, uma linha horizontal. Exemplo: Aqui embaixo aparecer um separador.<hr />
Combinao de tags:
Tambm temos a possibilidade de combinar quaisquer tipos de tags, gerando estilos diferenciados. As tags podem ser abertas e fachadas sem a necessidade de uma ordem. Exemplo: <center><font color="red" size="15px"><b><i>Texto centralizado com letra vermelha, tamanho 15px, negrito e itlico.</i></b></font></center> Ou: <font color="red" size="15px"><b><center><i>Texto centralizado com letra vermelha, tamanho 15px, negrito e itlico.</font></center></i></b>
Leia mais em: http://www.maikbasso.com.br/2011/12/formatando-textoscom-html.html#ixzz2YcpkMlPh
Maik Basso HTML Introduo ao HTML e estrutura bsica

Introduo ao HTML e estrutura bsica
Marcadores: HTML
HTML (HyperText Markup Language, em portugus, Linguagem de Marcao de Hipertexto), uma linguagem de programao utilizada na construo de web sites, blogs entre outros. Arquivos HTML so interpretados por navegadores Web, tais como, Mozilla Firefox, Google Chrome, Internet Explorer, Opera entre outros. Sem dvida alguma, o HTML a linguagem de programao mais fcil de aprender.
Estrutura bsica de uma pgina HTML:

Bom, para entender como funciona uma pgina Web feita em HTML iremos criar um exemplo bem simples. Primeiramente voc deve escolher um editor de texto de sua preferncia (no pode ser editores de texto que possuem corretor ortogrfico, ex.: Microsoft Office.) eu recomendo o Notepad++ que possui destaque a diversas linguagens de programao e pode ser baixado gratuitamente no site: http://notepad-plusplus.org/, mas quem preferir pode usar o prprio bloco de notas do Windows. Abra o seu editor de texto, e para comear, digite o cdigo abaixo que indica ao navegador que este um documento do tipo HTML. <!DOCTYPE html> Agora iremos prosseguir digitando as tags bsicas para a construo de uma pgina HTML: <html> <head> </head> <body> </body> </html>
Voc deve observar duas coisas. A primeira que todas as tags comeam com um sinal de <(menor) e terminam com um sinal de >(maior), e as mesmas devem ser abertas e fechadas. Por exemplo, para abrir a tag HTML digitamos <html>, depois colocamos dentro todo o contedo que deve ficar na tag, logo aps a fechamos digitando a mesma tag, s que agora com uma barra(/) logo aps o sinal de menor(<), ficando assim: </html>. A segunda que a linguagem deve ser digitada em forma tabulada, ou seja, de forma organizada para um melhor entendimento. Imagine uma pgina com mais ou menos trs mil linhas de cdigo, se o cdigo fosse digitado de forma desorganizada ningum o entenderia no caso de uma futura alterao. Prosseguindo com o nosso cdigo, agora iremos digitar uma outra tag entre <head> e </head> que adiciona um titulo a pgina, aquele que aparece na aba do navegador. <title>Digite seu ttulo aqui!</title> A nossa pgina est quase pronta, agora s falta colocar o texto que ir aparecer no contedo principal do seu navegador, ou seja, no body(corpo). Ento digite qualquer frase ou texto entre as tags <body> e </body> de sua pgina. Lembrando que o texto ficara s em uma linha e em uma letra padro, pois no estaremos formatando-o agora, isto ser assunto para futuras postagens. O nosso cdigo j est pronto, veja como ficou: <!DOCTYPE html> <html> <head> <title>Digite seu ttulo aqui!</title> </head> <body> Esta minha primeira pgina HTML! </body> </html> Com o cdigo pronto chegou a hora de salvar a nossa pgina. Ento clique no menu arquivo e em salvar como. Agora adicione o nome ao nosso arquivo, por padro usa-se o nome index para a pgina inicial de um site. O nome tem que terminar com .html ou .htm. Salve com o nome index.html. Agora v at a pasta que voc salvou o arquivo e de um duplo clique nele. Pronto! A sua pgina foi aberta no seu navegador Web padro.
Leia mais em: http://www.maikbasso.com.br/2011/12/introducao-ao-html-eestrutura-basica.html#ixzz2Yct6I4Y4

post favorito comentrios
HTML bsico - cdigos HTML

O objetivo desta pgina ensinar os princpios bsicos para confeco de um site em HTML para que voc possa fazer seu primeiro site.
54
Gostei (1)
(0)
Neste artigo sero mostrados os principais cdigos HTML necessrios para voc criar sua pgina web bsica. Sero apresentadas as tags (marcadores de cdigo responsveis por uma funo especfica) para incluir objetos como imagens, links, ttulos, tabelas. Veremos ainda como formatar textos, definir o plano de fundo da pgina, alm de uma tabela contendo as principais cores utilizadas. Atualmente existem vrios editores com interface grfica que permitem criar pginas web facilmente, arrastando e soltando componentes na tela. Porm, conhecendo os cdigos que esto por trs da interface (que os editores geram quando montamos a interface manualmente), possvel criar pginas usando um simples editor de texto como o Bloco de Notas do Windows. Basta salvar o arquivo com extenso .html e manter a sintaxe correta da linguagem. Por exemplo, o contedo da pgina deve estar entre as tags <html> e </html>.
Observao importante: toda tag aberta deve ser fechada em algum ponto. Para isso se usa a barra / dentro de uma tag semelhante a de abertura. Por exemplo, a tag <table> deve ser fechada com a tag </table>. Existem ainda as tags que so abertas e fechadas em um nico marcador, por exemplo, a tag <br/> que representa uma quebra de linha, no precisa de outra de fechamento, pois ela fecha a si prpria com a barra posta no final.
Estrutura bsica de uma pgina HTML

Uma pgina HTML deve manter sempre uma estrutura bsica, a partir da qual so inseridos outros elementos com formataes avanadas. A Listagem 1 mostra a estrutura base de toda pgina HMTL. Listagem 1: Estrutura bsica da pgina HTML
<html> <head> <title>Ttulo da pgina</title> </head> <body> Corpo do documento. Texto, imagens, tabelas, etc. </body> </html>
O contedo da tag <title>, ou seja, o ttulo da pgina, ser exibido no topo da janela/aba do browser. Quando a pgina for adicionada aos favoritos, esse ttulo tambm ser sugerido como atalho.
Atributos da tag <body>

Atravs da tag <body> (corpo) podemos definir propriedades gerais para toda a pgina. Por exemplo, possvel determinar a cor do
plano de fundo da pgina, ou usar uma imagem para essa funo, e a cor dos links em vrias situaes (visitados, no visitados, clicados). Os atributos dessa tag so os seguintes:
o
bgcolor: cor do plano de fundo. Deve ser usado o cdigo hexadecimal ou o nome da cor (conforme tabela vista mais adiante), assim como em todos os atributos de cores.
o o
background: URL de uma imagem para ser usada como plano de fundo. link: cor natural dos links, ou seja, enquanto eles ainda no foram clicados (o padro azul).
o o o
alink: cor dos links quando so clicados (o padro vermelho). vlink: cor dos links aps serem visitados (o padro roxo). text: cor do texto da pgina.
A listagem a seguir mostra um exemplo de definio de alguns desses atributos. Listagem 2: Definindo atributos da tag body
<body text=black bgcolor=blue link=yellow></body>
Cores em Html
Ao atribuir valores aos atributos de cores da pgina (plano de fundo, cor do texto, etc), possvel usar o nome das cores em ingls (apenas algumas cores) ou o cdigo hexadecimal destas. Usando o cdigo hexadecimal possvel aplicar vrias cores alm das que possuem nome padro, que so listadas abaixo.
Cor Nome (no html) Cdigo hexadecimal
Preto
black
#000000
Branco
white
#ffffff
Azul
blue
#0000ff
Amarelo
yellow
#ffff00
Verde
green
#009000
Lima
lime
#00ff00
Marrom
maroon
#800000
Oliva
olive
#00ffff
Azul celeste
aqua
#ff00ff
Lils
fuchsia
#808080
Cinza
gray
#000080
Azul escuro
navy
#000080
Roxo
purple
#800080
Verde escuro teal
#008080
Cinza claro
silver
#c0c0c0
Vermelho
red
#ff0000
Tabela 1: Nomes e cdigos hexadecimais das principais cores
A lista completa com todas as cores e seus cdigos hexadecimais podem ser encontradas em Cdigo Cor: Infogrfico dos cdigos das cores em HTML.
Cabealhos
A linguagem HTML permite adicionar cabealhos (ou ttulos) no corpo da pgina, diferenciando-os do restante do texto pelo tamanho da fonte. Para isso existem as tags h, que possuem seis nveis, de 1 a 6. A seguir tem-se um exemplo de utilizao dos seis nveis de cabealho, seguido do resultado do cdigo na Figura 1. Listagem 3: Utilizando cabealhos
<h1>Ttulo de nvel 1</h1> <h2>Ttulo de nvel 2</h2> <h3>Ttulo de nvel 3</h3> <h4>Ttulo de nvel 4</h4> <h5>Ttulo de nvel 5</h5> <h6>Ttulo de nvel 6</h6>
Figura 1: Cabealhos visualizados no browser possvel alterar o alinhamento dos ttulos definindo seu atributo align com um dos seguintes valores: center, left e right, conforme se v na Listagem 4. Listagem 4: Alinhando os cabealho
<h1 align=center>Ttulo de nvel 1 - centralizado</h1> <h2 align=left>Ttulo de nvel 2 - esquerda</h2> <h3 align=right>Ttulo de nvel 3 - direita</h3>
Figura 2: Cabealhos alinhados
A tag <font> - definindo o tamanho e cor do texto

Usando a tag <font> possvel alterar algumas das caractersticas primordiais do texto como o tipo da fonte (Arial, Times New Roman, etc), a cor e o tamanho. Essas propriedades so alteradas com a definio dos atributos face, color e size, respectivamente, da tag font.
O cdigo seguinte um exemplo de uso desses atributos, logo aps so apresentados os resultados. Listagem 5: Uso da tag <font>
<font face="Arial" size="3" color="blue">Arial 3 Azul</font> <font face="Times" size="4" color="green">Times 4 Verde</font> <font face="Courier" size="5" color="red">Courrier 5 Vermelho</font>
Figura 3: Caractersticas da fonte alteradas
Formatao adicional do texto

Existem algumas tags bastante teis que permitem aplicar uma formatao a um trecho do texto, apenas adicionando as tags de abertura e fechamento antes e depois do texto a ser formatado, assim como foi visto para a tag <font>.
o o o o o o
<b></b>: marca o texto como em negrito (bold). <i></i>: marca o texto como em itlico (italics). *<u></u>: marca um texto como sublinhado (underlined). *<s></s> ou <strike></strike>: marca um texto como riscado. <sub></sub>: marca um texto como subscrito. <sup></sup>: marca o texto como sobrescrito.
*<center></center>: centraliza o texto.
Observao: as tagas marcadas com asterisco (*) foram descontinuadas na verso 5 da HTML, ou seja, seu uso no mais indicado. possvel ainda usar essas tags em conjunto, devendo-se apenas manter a ordem de abertura e fechamento, como ser mostrado na Listagem 6. Listagem 6: Usando tags de formatao de texto
<b>negrito</b> <i>itlico</i> <sub>subscrito</sub> <sup>sobrescrito</sup> <b><i>negrit itlico</i></b>
O que gera o seguinte resultado, quando aberto no browser:
Figura 4: Aplicao de formataes no texto
Pargrafos e quebras de linha

Geralmente, quando escrevemos textos mais extensos, preciso dividi-los em pargrafos, de forma a separar e organizar melhor as informaes. Durante a codificao (escrita do cdigo) de uma pgina HTML, podemos usar a tecla Enter para organizar o texto no editor, mas essas quebras de linha no sero interpretadas pelo navegador. Para isso preciso utilizar as devidas tags <br/> para
quebrar a linha e passar para a linha de baixou, ou <p></p> para definir um pargrafo. Por questo de organizao do cdigo, indicado usar a definio correta de pargrafos no lugar das quebras de linha. Por exemplo, a listagem a seguir mostra um texto extenso com vrias quebras de linha onde deveriam haver divises de pargrafos. Em seguida mostrada a forma correta de estruturar o cdigo para o mesmo texto. Listagem 7: Texto com vrias quebras de linha
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida sagittis porta. <br/>
Donec vestibulum lacus eget odio fermentum viverra. Pellentesque hendrerit pulvinar ve ipsum faucibus lobortis. <br/>
Fusce quis magna ante, sed tempus lorem. Sed lacus ipsum, tempus ac aliquet a, digniss
O resultado o seguinte:
Figura 5: Texto com quebras de linha no browser
Agora o mesmo texto definido em pargrafos. Listagem 8: Texto com vrios pargrafos
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida sagittis por
<p>Donec vestibulum lacus eget odio fermentum viverra. Pellentesque hendrerit pulvinar faucibus lobortis.</p>
<p>Fusce quis magna ante, sed tempus lorem. Sed lacus ipsum, tempus ac aliquet a, dign
Agora, vemos que o resultado inclusive visualmente mais organizado (Figura 6), como deve ser o texto realmente.
Figura 6: Texto dividido em pargrafos Sabendo como dividir o texto corretamente em pargrafos, podemos ainda alterar seu alinhamento para atender s diversas situaes que surgem no dia-a-dia. Isso pode ser feito com a definio do atributo align da tag <p>, com um dos seguintes valores: left (alinhado esquerda), right (alinhado direita), Center (centralizado) e justify (justificado). O valor padro para essa propriedade left, ento todo texto fica naturalmente alinhado esquerda.
Imagens em Html
Inserir imagens na pgina uma das necessidades mais comuns e, por esse motivo, tambm consideravelmente simples de ser feito. Para esse fim existe a tag <img>, cujos atributos so mostrados a seguir:
o
src: caminho completo do arquivo de imagem (incluindo a extenso do arquivo).
alt: texto alternativo para a imagem, geralmente uma descrio da mesma.
o o
width: largura da imagem em pixels. height: altura da imagem em pixels.
Observao: os atributos src e alt so obrigatrios para a tag <img>. Alm disso, a tag deve ser fechada nela mesma, ou seja, a sintaxe mnima <img src=caminho alt=texto/>. A seguir temos um exemplo de cdigo para a insero de imagens seguido do resultado visualizado no browser. Listagem 9: Inserindo imagens
<img src="Java_05.png" alt="Imagem 1"/> <img src="Java_05.png" alt="Imagem 2" width="100"/> <img src="Java_05.png" alt="Imagem 3" height="200"/>
Figura 7: Exemplos de imagens com a tag img importante fazer algumas observaes:
o
Caso no sejam definidas a largura e/ou a altura, a imagem ser adicionada pgina em seu tamanho original.
Ao alterar apenas uma das dimenses, a outra redefinida proporcionalmente. Caso se deseje alterar tanto a largura quanto a altura com valores especficos, os dois atributos devem ser definidos.
Criando links em Html

Como em toda pgina web, podemos precisar inserir links para outras pginas, para downloads, e-mails, etc. A HTML possui uma tag chamada ncora (anchor, em ingls) representada por <a> que nos permite criar links facilmente, apenas definindo seu atributo href com o endereo para o qual o usurio deve ser redirecionado. A sintaxe bsica da tag <a> apresentada na listagem a seguir, onde criamos um link para o endereo http://www.meusite.com.br com o texto Meu Link, onde o usurio pode clicar para ser redirecionado. Listagem 10: Sintaxe de criao de links
<a href="http://www.meusite.com.br">Meu Link</a>
No lugar do texto Meu Link podem ser inseridos outros elementos como, por exemplo, imagens, ttulos, etc. Basta manter a ordem de abertura e fechamento correta das tags. No atributo href informamos o caminho para o qual o link deve levar o usurio, o que no necessariamente precisa ser outro site. Podemos tambm criar links para download de arquivos ou para envio de emails. Para downloads, basta indicar o caminho do arquivo a ser baixado e para enviar emails, preciso usar mailto:email_desejado. A seguir veremos vrios exemplos de links para sites e arquivos, usando imagens e textos comuns. Listagem 11: Exemplos de links
<a href="www.meusite.com.br">Meu Link</a> <a href="arquivo.zip">Baixar arquivo</a> <a href="arquivo.zip"><img src="download.png" alt="Download"/></a> <a href="www.meusite.com.br"><h1>Titulo como link</h1></a>
O que gera o seguinte resultado:
Figura 8: Links na pgina Conhecendo a sintaxe da tag <a>, basta utilizar as demais tags corretamente e criar os arranjos desejados com imagens, ttulos, formatando a fonte, entre outras modificaes.
Listas em Html
Outra estrutura bastante comum de ser utilizada em pginas web a lista, que serve pra organizar um conjunto de itens, sequencialmente ou no. As listas podem ser ordenadas ou no, ou seja, cada item podem ou no ter um nmero/letra/smbolo que o identifique sequencialmente. As tags para listas ordenadas e no ordenadas so, respectivamente, <ol></ol> e <ul></ul>. Entre essas marcaes devem ser inseridos os itens, que levam a tag <li></li>, conforme os exemplos abaixo. Listagem 12: Usando listas
<ol>
<li>Primeiro item</li> <li>Segundo item</li> <li>Terceiro item</li> </ol>
<ul> <li>Primeiro item</li> <li>Segundo item</li> <li>Terceiro item</li> </ul>
Nesse cdigo temos duas listas, uma ordenada e uma no ordenada, que no browser tm a seguinte aparncia.
Figura 9: Lista numerada e no numerada Existe ainda um terceiro tipo de lista: a lista de definio, que como o nome sugere, usada para apresentar itens com um ttulo seguido de sua definio. A tag principal desse tipo de lista a <dl></dl>, enquanto os itens so compostos por duas tags: <dt></td> para o ttulo e <dd></dd> para a definio. O exemplo a seguir torna mais fcil a compreenso desse elemento. Listagem 12: Uso de lista de definio
Figura 10: Lista de definio vista no browser
Tabelas em Html
As tabelas, por muito tempo foram usadas incorrectamente para montar toda a estrutura do site. Ou seja, a pgina era uma grande tabela e todo seu contedo era organizado dentro das clulas. Isso era usado pela facilidade de se montar o layout usando essa estrutura, afinal, as tabelas tinham suas clulas bem definidas e fceis de manipular. Porm, forma no era correta e isso foi sendo visto ao longo dos anos e passou-se a utilizar o conceito de tableless (sem tabelas). Comeou-se a incentivar o uso das tags corretas para estruturao do layout e das tabelas para seu objetivo real: apresentao de dados tabulares. As tabelas so criadas sobre a tag base <table></table> e dividida em linhas <tr></tr> e colunas <td></td>. A ordem de hierarquia essa: table > tr > td, uma dentro da outra. Ou seja, a tabela dividida em linhas que, por sua vez, so divididas em colunas. A tag table possui o atributo border, que define a borda das clulas com um nmero inteiro representando a espessura. A Listagem 13 apresenta um exemplo bsico de tabela. Listagem 13: Exemplo de tabela
<dl> <dt>Item 1</dt> <dd>Definicao do item 1</dd> <dt>Item 2</dt> <dd>Definicao do item 2</dd> <dt>Item 3</dt> <dd>Definicao do item 3</dd> </dl>
Nessa tabela temos duas linhas (tr) com trs colunas (td) cada, como vemos na figura a seguir.
Figura 11: Tabela com duas linhas e trs colunas
Leia mais em: HTML bsico - cdigos HTMLhttp://www.devmedia.com.br/html-basico-codigoshtml/16596#ixzz2YcwcCP5s
Efeitos animados
possvel animar alguns textos com tipos especiais de formatao, sempre diretamente no cdigo fonte. importante notar que recursos de animao devem ser utilizados com cuidado e parcimnia, pois em uma pgina que j apresenta vrios motivos que chamam a ateno do leitor (figuras, cores, fontes) os efeitos animados so mais um deles, e seu uso pode ocasionar um resultado final cansativo e confuso.
Blink A formatao Blink permite que um certo texto fique piscando em uma pgina, como no exemplo abaixo, centralizado e em amarelo. Pode-se aplicar outros formatos como cores, negrito, italic e alterar a fonte e o seu tamanho, normalmente. O cdigo : <blink>Texto que deve piscar</blink>
Novo!
Exemplo 1: Acima foi utilizado: <center><font color=#FFFF00><blink>Novo!</blink></font></center> Exemplo 2: Segue um cdigo para a o texto aparecer em azul "Deep Sky Blue" e em negrito: <font color=#00BFFF><b><blink>Novo!</b></blink></font> Novo! recomendvel que o comando blink seja usado somente em pequenos detalhes (palavras ou setas), mas no em grande nmero na mesma pgina, pois gera muito cansao visual. Deve-se ressaltar que nem todos os navegadores mostram o efeito dessa formatao.
Marquee
Um texto pode entrar na pgina e percorr-la da direita para a esquerda ou em sentido contrrio, como um letreiro. Isso obtido usando-se a formatao Marquee. O cdigo : <marquee>Texto que deve se movimentar</marquee>. Esse comando admite atributos de direo e largura do efeito as quais possibilitam vrias formas de apresentao. Tambm pode-se aplicar cores, negrito, italic e alterar a fonte e o seu tamanho, normalmente. O deslocamento pode ser s da direita para a esquerda:
Exemplo 3: Acima foi utilizado: <span style="color: rgb(255, 0, 0);"><marquee behavior=scroll>T nem a!</marquee></span> Pode ser utilizada uma imagem:
Acima foi utilizado: <marquee behavior="alternate"><img src="../fig/estrel01.gif"></marquee> O atributo behavior="alternate" faz com que o elemento movimentado v e volte. Exemplo 4: Veja um exemplo de uso do tag Marquee com uma foto grande, clicando aqui.
Outros exemplos: 1. Interferindo na direo: a. Da esquerda para a direita. O atributo slide direction="right" faz com que o elemento siga para a direita. <marquee behavior=slide direction=right>Elemento que se movimenta</marquee>
Exemplo 5: Acima foi utilizado: <marquee style="font-family: arial;" slide direction="right"><span style="color: rgb(255, 160, 120);">A gente somos
inútil!</span></marquee>
b. Da direita para a esquerda. O atributo slide direction="left" faz com que o elemento siga para a esquerda. <marquee behavior=slide direction=left>Elemento que se movimenta</marquee>
Exemplo 6: Acima foi utilizado: <marquee style="font-family: arial;" slide direction="left"><span style="color: rgb(0, 190, 255);">Por isso corro demais: só pra te ver, meu bem!</span></marquee>
2. Interferindo na velocidade: A especificao scrollDelay=um nmero indica a velocidade da rolagem: quanto menor for o nmero, mais rapidamente o texto corre. Exemplos:
Exemplo 7: Acima foi utilizado: </marquee><marquee scrolldelay="300"><img src="../fig/estrel01.gif"></marquee>
Exemplo 8: Acima foi utilizado: <marquee scrollDelay=50><img src="../fig/estrel01.gif"></marquee> Se o que vai se movimentar um texto evidentemente ele pode ser formado: Cor, tipo e tamanhos de fonte etc.
Acima foi utilizado: <marquee scrollDelay=150><font color=#00FF7F>Tomara que voc volte depressa!</em></font></marquee> 3. Interferindo no sentido: A especificao direction=up faz com que o texto fique na vertical. Nesse caso foi tambm centralizado e aparece na cor lils (MediumSlateBlue). Exemplo:
Exemplo 9: Acima foi utilizado: <marquee direction=up <P align="center"><center> <font
color=#7B68EE>Subindo!</font></p></marquee>
Onde obter mais informao http://www.icmc.usp.br/ensino/material/html/blink.html http://www.icmc.usp.br/ensino/material/html/marquee.html
COMO FAZER TABELAS :

As tabelas valorizam o Layout das pginas, pois do harmonia e organizao dos textos, imagens, listas, etc. A tabela representada pelas Tags <TABLE> e </TABLE> e possue os seguintes atributos: border="valor" -Onde o "valor" define a largura da borda (contorno). cellspacing="valor" -Onde o "valor" define o espao horizontal entre as clulas. cellpadding="valor" -Onde o "valor" define o espao vertical entre as clulas. width="valor" -Onde o "valor" define a largura da tabela em pixels ou em porcentagem. height="valor" -Onde o "valor" define a altura da tabela em pixels ou em porcentagem. bgcolor="#cor" -Define a cor de fundo da tabela. bordercolor="#cor" -Define a cor da borda. background="imagem.jpg" -Define uma imagem de fundo. A tabela possui alguns comandos que so: <TR> e </TR> -Define uma linha da tabela. <TH> e </TH> -Define um cabealho da tabela. <TD> e </TD> -Define a coluna de informaes. <CAPTION> e </CAPTION> -Define o ttulo da tabela. Veja um exemplo: <TABLE BORDER="2" BORDERCOLOR="RED" CELLSPACING="10" CELLPADDING="6" WIDTH="50" HEIGHT="20" BGCOLOR="YELLOW" <TR> <TD> 1a.coluna </TD> <TD>2a.coluna </TD> <TD> 3a.coluna </TD> </TR> <TR> <TD> 1a.linha </TD> <TD> 1a.linha </TD><TD> 1a.linha </TD> </TABLE> </BR> Voc pode colocar o cdigo acima em apenas uma linha. Resultado:
1a.coluna 1a.linha
2a.coluna 1a.linha
3a.coluna 1a.linha
Para que a tabela fique centralizada, como acima, use a tag <CENTER> antes do cdigo e </CENTER> depois do cdigo. Tambm pode-se alinhar o texto dentro das clulas, utilizando os seguintes atributos: Align="left" -Alinha o texto esquerda. Align="right" -Alinha o texto direita. Align="center" -Alinha o texto no centro. Valign="top" -Alinha o texto no topo da clula. Valign="middle" -Alinha o texto no meio da clula. Valign="bottom" -Alinha o texto na parte inferior da clula. ADICIONANDO UMA LISTA DENTRO DA CLULA:
<TABLE BORDER="1" <TR> <TD>lista dentro da clula<UL> <LI>1 item<LI>2 item<LI>3 item</UL> </TD> </TABLE>Resultado:
lista dentro da clula

1 item 2 item 3 item
Ir para o topo
SITE COM FRAMES :

Resume-se em mais de uma pgina em uma s tela. necessrio criar trs pginas para criar uma pgina com dois frames, ou seja, uma pgina principal onde ter as tags referente ao frame que dever ser salva como: index.html e as outras duas sero abertas dentro desta pgina principal. Exemplo: <HTML> <HEAD> <TITLE> Ttulo da pgina </TITLE> </HEAD> <FRAMESET COLS="20%, 80%"> <FRAME SRC="pagina1.html"> <FRAME SRC="pagina2.html"> <NOFRAME> </NOFRAME> </FRAMESET> <BODY> </BODY> </HTML> Os cdigos acima s sero colocados na pgina principal que ser salva como "index.html". Normalmente nesse tipo de frame a pgina1.html usada para os menus e a pgina2.html para contedo geral do site. Neste caso <FRAMESET COLS="20%, 80%"> o atributo COLS divide as colunas ou seja, 20% do lado esquerdo e 80% do lado direito da pgina. Sempre da esquerda para direita. Ento a pgina1.html ocupar 20% do espao e a pgina2.html ocupar 80% (espao vertical). Copie o cdigo acima, cole no Bloco de Notas e salve como "index.html" depois d
2 cliques nesse arquivo para visualiz-lo aberto em seu browser. As tags <NOFRAME> e </NOFRAME> usado somente para avisar usurio que utiliza browser muito antigo que a pgina contm frames, que no as conseguir visualizar (muito difcil acontecer). Exemplo 2: <HTML> <HEAD> <TITLE> Ttulo da pgina </TITLE> </HEAD> <FRAMESET COLS="20%, 80%"> <FRAME SRC="pagina1.html"> <FRAMESET ROWS="20%, 80%"> <FRAME SRC="pagina3.html"> <FRAME SRC="pagina2.html"> <NOFRAME> </NOFRAME> </FRAMESET> <BODY> </BODY> </HTML> Copie o cdigo acima, cole no Bloco de Notas e salve como "index.html" depois d 2 cliques nesse arquivo para visualiz-lo aberto em seu browser. Exemplo 3: <HTML> <HEAD> <TITLE> Ttulo da pgina </TITLE> </HEAD> <FRAMESET ROWS="20%, 80%"> <FRAME SRC="pagina1.html"> <FRAME SRC="pagina2.html"> <NOFRAME> </NOFRAME> </FRAMESET> <BODY> </BODY> </HTML> Copie o cdigo acima, cole no Bloco de Notas e salve como "index.html" depois d 2 cliques nesse arquivo para visualiz-lo aberto em seu browser. Ir para o topo
COMO INSERIR MSICA NO SITE:

Para inserir uma msica em sua pgina, antes de fechar a tag <HEAD> coloque a tag: <BGSOUND SRC="musica.mid">.A Extenso do arquivo pode ser .mid ou .wav. Para que a msica toque novamente, sempre, acrescente: loop="-1" Assim: <BGSOUND SRC="musica.mid" loop="-1"> No exemplo acima a msica tocar sem que aparea o "display" na tela. O internauta no ter como parar, pausar ou iniciar. Para que aparea o display na tela, como voc v abaixo, coloque est tag:
<EMBED SRC="musica.mid" AUTOSTART="FALSE" LOOP="TRUE"> * Note que voc ter que acionar PLAY para iniciar a msica. * Para que abra a pgina j tocando a msica, coloque este cdigo: <EMBED SRC="musica.mid" AUTOSTART= LOOP="TRUE"> * Voc ainda pode definir o tamanho do display, assim:
<EMBED SRC="musica.mid" AUTOSTART= LOOP="TRUE" WIDTH=145 HEIGHT=25>
Ir para o topo
COMO INSERIR FLASH NO SITE:

Para inserir um flash (arquivo com extenso .swf), como abaixo, coloque este cdigo depois da tag <BODY>: <OBJECT CLASSID="FLASH" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/ flash/swflash.cab#version=6,0,0,0 "> <EMBED SRC="arquivo.swf" WIDTH="200" HEIGHT="200" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"</EMBED> </OBJECT> Note no cdigo acima que voc pode especificar o tamanho da imagem. Se voc no colocar os atributos "WIDTH e HEIGHT" a imagem ficar no tamanho original (tamanho que foi criada). Ir para o topo
COMO INSERIR VDEO NO SITE:

Para inserir um vdeo (arquivo com extenso .avi), como abaixo, coloque este cdigo depois da tag <BODY>: <EMBED SRC="arquivo.avi" </EMBED> <="" embed=""> Note que est no tamanho reduzido, pois foi utilizado "WIDTH e HEIGHT", mas no preciso, pois o tamanho padro, a menos que lhe seja til. Ir para o topo
META TAGS :
Aps feito seu site, no basta apenas coloca-lo na internet somente com a tag ttulo, <TITLE> Ttulo da pgina</TITLE>, preciso que os buscadores, como o Google, Yahoo, etc "achem" o seu site, e outras informaes, por isso, voc deve inserir as METAS TAGS necessrias, entre <HEAD> e </HEAD> conforme abaixo: <META NAME="keywords" CONTENT="palavras chaves"> Note que onde est escrito "palavras chaves" voc deve colocar as palavras pelo qual os buscadores encontraro seu site quando procurado na pesquisa pelo Google, Yahoo, por exemplo. As palavras devero ser escritas em minsculas e separadas por uma vrgula e logo aps um espao. Ex.: "bonito, fotos, casamento, dicas, downloads, etc".
<META NAME="Description" CONTENT="descrio do seu site"> Informe do que se trata seu site, coerente com o ttulo e as palavras chaves. Ex.: "Site bonito, com fotos de casamento, downloads e dicas". <META NAME="AUTHOR" CONTENT="seu nome"> Coloque seu nome, pois tico e fornece confiana ao site. <META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">Sendo: "index,follow" - Indexa a pgina inicial e todas as pginas nela indicadas. "noindex,follow" - No indexa a pgina inicial, mas indexa as pginas nela indicada. "index,nofollow" - Indexa a pgina inicial, mas no os links que ela indique. "noindex,nofollow" - No indexa nem a pgina inicial e nem os links. Se seu primeiro site, est aprendendo, use o primeiro exemplo "index,follow". Aconselho voc que fez um site com FRAMES usar "index,follow" somente na pgina que voc salvou como index.html, e nas outra pginas "noindex,nofollow" ou simplesmente no use essa tag nessas pginas. <META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="pt"> Coloque em todas as pginas do site, instruindo os navegadores que seu site feito em lingua portugusa. <META NAME="GENERATOR" CONTENT="Microsoft FrontPage 5.0"> Indique que programa usou para fazer o site, FrontPage, Bloco de Notas, etc. <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=iso-8859-1"> Indica que voc escreveu normalmente seus textos nas pginas html (com acentuao, etc) sem usar caracteres especiais (ASCII), e a META TAG acima indica isto (palavras originarias do Latim). Existem outras Meta Tags que voc deve verificar:
Cliando aqui
Ir para o topo
COMO FAZER UM LINK PARA ENVIAR E-MAIL :

Cdigo:<a href="mailto:seuemail@provedor.com.br">Clic Aqui</a> Note que ao ser clicado no link (Clic Aqui), abrir o programa que est instalado no computador, exemplo: Outlook, Incredimail, etc. Porm nem todos tem esses programas instalados, vo buscar seus e-mails diretamente nos sites, motivo pelo qual voc deve sempre deixar visvel seu endereo de e-mail, como abaixo: Meu e-mail : fulano@provedor.com.br se preferir, Clic Aqui Ir para o topo
COMO FAZER UMA CAIXA DE TEXTO :

Cdigo:<textarea rows="5" cols="50" style="background-color: #ffffff">ESCREVA AQUI O SEU TEXTO</textarea> Fica assim:
Ir para o topo
COMO FAZER UMA NCORA :

Repare que ao clicar ir para ncora voc foi redirecionado outro ponto desta pgina. Isto chamado "NCORA". Voc pode redirecionar o usurio para qualquer ponto de sua pgina ou para outro ponto de outra pgina. O cdigo de destino, isto , o ponto de chegada ao ser clicado : Cdigo:<a name="ancora"> E o cdigo do comando "ir para" : Cdigo:<a href="#ancora">ir para ancora</a> Voc pode criar vrios pontos, como: <a name="ancora2"> e <a href="#ancora2">ir para ancora2</a> Para fazer o usurio "Ir para o topo" no necessrio uma ncora como acima, tem um cdigo especial para isto: Cdigo: <a href="#top">Ir para o topo</a> Para ir outra pgina: Cdigo: <a href="nomedapagina.html#ancora">ir para ancora</a> Utilizando uma imagem como ncora: Cdigo: <a href="#ancora"><img src="imagem.jpg"></a> Ir para o topo
OUTRAS DICAS:
Aps fazer seu site, veja Como colocar o site na Internet
Voc tambm pode ganhar dinheiro com seu site em programas de Afiliados. Como?: Quantidade a alma do negcio. Consulte Clicando Aqui
Para gerar trfego no Seu site: Funciona Mesmo Clica Aqui e depois AQUI Agora uma dica muito legal. Um provedor que funciona 100% com um painel incrvel. O famoso CPanel, l voc tem emails; redirecionamentos; banco de dados e muitas outras coisas incrveis.
Hospede al seu site em HTML, PHP ou outra linguagem.
O mais legal, o preo mais justo que j v: Super Provedor Seu site no topo das buscas, consulte: Como aparecer Se voc j fez um site ou blog ou tem Facebook, Twitter ou participa de uma rede social hora de comear a ganhar dinheiro: Veja que legal
S indico estes, porque garanto que funcionam, no conheo outros melhores. So muito bons. Faa turismo em Extrema MG - Confira Hotis em Extrema - Imobilirias em Extrema - Restaurantes em Extrema Se voc tiver alguma dvida, v no INDEX (menu acima) e entre em contato, teremos prazer em ajudar.
Agora que j dei essas dicas, entre nesse projeto que poder mudar sua vida, assim como mudou a minha, visite: Projeto do Bem

Formatando Textos Com HTML

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Formatando Textos Com HTML

Transféré par

Droits d'auteur :

Formats disponibles

Formatando textos com HTML

Outras tags para a formatao de textos:

Exemplo <b>Texto em negrito.</b> <strong>Texto em negrito.</strong> <i>Este texto est em itlico.</i>

<b>,<strong> Colocam o texto em negrito. <i> <u> <sub> <sup>

Coloca o texto em itlico.

<font color="red">Texto com fonte em cor vermelha.</font>

<center> - Centraliza o texto. Exemplo:

Leia mais em: http://www.maikbasso.com.br/2011/12/formatando-textoscom-html.html#ixzz2YcpkMlPh

Maik Basso HTML Introduo ao HTML e estrutura bsica

Estrutura bsica de uma pgina HTML:

Leia mais em: http://www.maikbasso.com.br/2011/12/introducao-ao-html-eestrutura-basica.html#ixzz2Yct6I4Y4

HTML bsico - cdigos HTML

Estrutura bsica de uma pgina HTML

Atributos da tag <body>

Verde escuro teal

Tabela 1: Nomes e cdigos hexadecimais das principais cores

Figura 2: Cabealhos alinhados

A tag <font> - definindo o tamanho e cor do texto

Figura 3: Caractersticas da fonte alteradas

Formatao adicional do texto

*<center></center>: centraliza o texto.

<b>negrito</b> <i>itlico</i> <sub>subscrito</sub> <sup>sobrescrito</sup> <b><i>negrit itlico</i></b>

O que gera o seguinte resultado, quando aberto no browser:

Figura 4: Aplicao de formataes no texto

Pargrafos e quebras de linha

Figura 5: Texto com quebras de linha no browser

src: caminho completo do arquivo de imagem (incluindo a extenso do arquivo).

alt: texto alternativo para a imagem, geralmente uma descrio da mesma.

width: largura da imagem em pixels. height: altura da imagem em pixels.

Criando links em Html

O que gera o seguinte resultado:

<li>Primeiro item</li> <li>Segundo item</li> <li>Terceiro item</li> </ol>

<ul> <li>Primeiro item</li> <li>Segundo item</li> <li>Terceiro item</li> </ul>

Figura 10: Lista de definio vista no browser

Figura 11: Tabela com duas linhas e trs colunas

Leia mais em: HTML bsico - cdigos HTMLhttp://www.devmedia.com.br/html-basico-codigoshtml/16596#ixzz2YcwcCP5s

Exemplo 7: Acima foi utilizado: </marquee><marquee scrolldelay="300"><img src="../fig/estrel01.gif"></marquee>

Exemplo 9: Acima foi utilizado: <marquee direction=up <P align="center"><center> <font

Onde obter mais informao http://www.icmc.usp.br/ensino/material/html/blink.html http://www.icmc.usp.br/ensino/material/html/marquee.html

COMO FAZER TABELAS :

lista dentro da clula

1 item 2 item 3 item

SITE COM FRAMES :

COMO INSERIR MSICA NO SITE:

COMO INSERIR FLASH NO SITE:

COMO INSERIR VDEO NO SITE:

COMO FAZER UM LINK PARA ENVIAR E-MAIL :

COMO FAZER UMA CAIXA DE TEXTO :

COMO FAZER UMA NCORA :

Vous aimerez peut-être aussi