Continuação do post:

• HTML Báscio Parte 1

Como acredito que já saibam o que é HTML e quais são as principais tags usadas, então pretendo abordar o conceito tabela nesse post, sem a necessidade de explicar o que é tag, parâmetros, valores e demais conceitos básicos.  Caso ainda não entenda muito bem sobre os conceitos como: parâmetros valores e tags, recomendo que leia atentamento o post anterior (“HTML Báscio Parte 1 “).

 

O que é uma Tabela em HTML?

Segundo a Wikipédia tabela é uma representação matricial, isto é, em linhas e colunas, que tem a finalidade de demostrar informações por meio delas. Uma tabela em HTML é a criação de tabelas em um documento por meio de tags HTML, que vão representar linha x coluna.

Muitos utilizam de tabelas para formar o layout de sites inteiros, apesar dessa pratica não ser recomendada mais, o uso de tabelas em layout ainda é bem comum, hoje para formar o design de site e blogs existem linguagens de estilo como CSS, o que faz o uso de tabelas para esse proposito desnecessário.

Como Criar Tabelas Em HTML?

 

Inicio

<table></table> Essa é a principal tag, é ela que define onde começa e termina a tabela, as tags de linha e coluna devem estar entre <table></table>

<table>

</table>

Nessa tag pode-se usar parâmetros como: border=”valor numerico” para criar borda, bgcolor=”valor exadecimal ou nome da cor de fundo em inglês” para acrescentar cor de fundo.

 

Linha

<tr></tr> (Table row) cria a linha da tabela.

 

Coluna

<td></td> (table data)cria a coluna da tabela ou melhor divide a linha em partes (dados), ela é usada sempre dentro de um linha ou seja primeiro se cria a linha depois divide em colunas, veja o exemplo abaixo em que temos duas colunas dentro de uma linha.

<table border="2">
  <tr><td>1ª linha, 1ª coluna</td><td>1ª linha, 2ª coluna</td></tr>
</table>

1ª linha, 1ª coluna

1ª linha, 2ª coluna

No exemplo acima foi criado um tabela com uma linha de duas colunas usando também a parametro border=”valor” (que cria uma borda em volta da tabela).

<table border="2">
  <tr><td>1ª linha, 1ª coluna</td><td>1ª linha, 2ª coluna</td></tr>

<tr><td>2ª linha, 1ª coluna</td><td>2ª linha, 2ª coluna</td></tr>
</table>

Já essa tabela possui 2 linhas com duas colunas.

1ª linha, 1ª coluna	1ª linha, 2ª coluna
2ª linha, 1ª coluna	2ª linha, 2ª coluna

 

Mesclando Linhas e Colunas

Para mesclar linhas e colunas é usado os parâmetros rowspan e colspan  na tag table data com os valores correpondentes a quantidade de casa a serem mescladas.

 

 Mesclando Linhas

Acrescente o parâmetro rowspan dentro da tag table data para mesclar duas linhas ou mais, veja:

<table border="1">

<tr><td rowspan="2">1ª e 2ª l. mescladas, 1ª coluna</td><td>1ª linha, 2ª coluna</td></tr>
<tr><td>2ª linha, 2ª coluna</td></tr>
</table>

No parâmetro rowspan, o valor indica quantas serão as linhas mescladas.

1ª e 2ª linha mesclada, 1ª coluna	1ª linha, 2ª coluna
	2ª linha, 2ª coluna

 

Mesclando Colunas

Use o parâmetro colspan dentro da tag table data para mesclar duas ou mais colunas, veja:

<table border="1">

<tr><td colspan="2">1ª linha 1ª e 2 ª coluna mescladas</td></tr>
<tr><td>2ª linha, 1ª coluna</td><td>2ª linha, 2ª coluna</td></tr>
</table>

No parâmetro colspan o valor indica a quantidade de colunas a serem mescladas.

1ª linha 1ª e 2 ª coluna mescladas
2ª linha, 1ª coluna	2ª linha, 2ª coluna

HTML é a abreviação para HyperText Markup Language (Linguagem de Marcação de Hipertexto), e segundo a Wikipédia é a linguagem de marcação utilizada para desenvolver páginas Web. Em geral um documento HTML pode ser interpretado pelos navegadores, como: Mozilla Firefox, Opera, Chrome, Safari,  talvez Internet Explorer (brincadeira, o IE também) dentre muitos outros.

Os navegadores abrem os documentos HTML e interpretam o conteúdo formando a página, na verdade eles organizam os elementos da página e os formatam conforme os códigos (tags), por isso pode ser considerado uma linguagem não compilada, muitos não consideram HTML uma linguagem de programação e sim, apenas uma linguagem de marcação, apesar disso, esse conceito é muito controverso.

Tags HTML

Tags são são elementos que definem e criam funções dentro de um documento, cada tag tem sua finalidade e parâmetros, veja o exemplo:

To Be Geek   a tag (bold) define que o conteúdo entre elas fiquem em negrito igual abaixo

To Be Geek

Em geral as tags precisam ser abertas e fechadas ( com / ):

(abrindo tag)

(fechando a tag)

 

Parâmetros

Dentro das tags podem conter parâmetros (elementos), que por sua vez aumentam as funcionalidades e características daquela tag.

Veja abaixo:

<p align=”center“>Essa tag “p”cria um novo parágrafo e o parâmetro align=”center” diz respeito ao alinhamento, que nesse caso, sera centralizado.

 

Quando a tag é fechada, ela perde sua finalidade ou seja tudo depois de onde ela foi fechada não sofrerá seus efeitos, tanto da tag como de seus parâmetros. Veja mais um exemplo:

O nome To Be Geek ficará em negrito mas o resto da frase não.

somente o conteúdo entre <b></b> sofre seus efeitos, nada antes dela ser aberta, nada depois dela ser fechada.

Exemplo de como ficará:

O nome To Be Geek ficará em negrito mas o resto da frase não.

 

Tags HTML Essenciais em Um documento

Existem 3 tags consideradas essenciais e que devem estar presente em qualquer documento HTML, no caso são, , e

<html></html> Todo documento deve conter essa tag no começo e sendo fechada no final, pois é ela quem indica onde começa e termina um documento html.

<head></head> Tag responsável pelo cabeçalho do doc., geralmente o conteúdo entre elas não é visível aos usuários.

<body></body> Essa tag define onde começa e termina o corpo da página, todo conteúdo (visível) deve estar entre elas.

Veja o exemplo:

Estrutura básica de um documento HTML

Titulo que irá aparecer na aba do navegador. 
   
     
conteúdo da pagina, desde links, fotos, vídeos, musicas, textos, 
barra laterais, menus etc...
     

 

– HTML

Todas as demais tags e o conteúdo da página devem estar entre

 

<head></head> – Cabeçalho

A tag <head>tem a importantíssima função de criar o cabeçalho do documento, é no cabeçalho onde são colocados as principais informações sobre a página, como: título, descrição, linkagem de arquivos externos (como CSS). Geralmente as informações contidas no cabeçalho não são visíveis ao usuário final, somente para os navegadores, motores de buscas, etc…

Dentro do cabeçalho, ou seja entre<head></head> pode conter outras tags, como:

<title></title> – Título

Tudo escrito entre <title></title> ficará como título da página, aparecendo na aba do navegador.

<link /> – Link

É usado para chamar arquivos externos ao documento, geralmente utilizando algum parâmetro como complemento. essa tag pode ser fechada como no exemplo abaixo, antes do sinal de “>”

rel="stylesheet" type="text/css" href="style.css" />

Nesse caso foi usado a tag junto com o parâmetros rel=””, type=”” e href=””, cada um deles com uma função específica.

• rel=”valor“   esse parâmetro indica características da tag, que seriam atribuída pelo valores (em azul), no caso acima o valor seria stylesheet que indica que é um arquivo contendo códigos em CSS.
• type=”text/css“   indica o tipo do arquivo, nesse caso o valor esta como text/css, sendo do tipo Texto/Css
• href=”style.css“   esse parâmetro é usado para fazer referencia a um endereço de um documento, arquivo ou pagina (href significa hypertext reference, referencia de hyper texto), nesse caso, ele faz referencia a um arquivo(style.css)

 

<body></body> – Corpo

Tudo que fica depois que essa tag é aberta e antes dela ser fechada, será o conteúdo da página, a parte visível, como: textos, links, imagens, vídeos, além disso pode conter outras tags, que vão dar forma a página.

Veja o exemplo:

Tópico 1

   align="center">To be Geek um blog para Geeks
=) 
   

Dentro da tag Body pode conter também alguns parâmetros como:

• bgcolor=”valor“ atribui uma cor de fundo à pagina

 bgcolor="red">conteúdo

• background=”valor“ atribui uma imagem de fundo à pagina

background="imagen.jpg">conteúdo

 

Mais Tags

– Anchor

Anchor é uma ancora que pode levar a uma outra página, documento ou na navegação no próprio documento, em geral é usada junto com alguns parâmetros.

• href=”endereço”   usada para fazer referência à um endereço, dessa forma quando usado como parâmetro, faz a ligação com o endereço que esta entre ” “. Logo abaixo o código esta fazendo da frase To Be Geek um link para http://www.2be-geek.com

 href="http://www.2be-geek.com">To Be Geek

To Be Geek

• name=”valor“ esse parâmetro cria um ponto ao qual pode ser usado para navegar até la, suponhamos que o site tenha um conteudo muito extenso e que seja necessário uma navegação mais rápidas entre os tópicos, então pode-se marcar os tópicos e criar links em locais estratégicos que levem até o ponto marcado.

name="ponto1">Anchor

Depois de marcado o ponto só é preciso criar links em locais específicos como o de abaixo

href="#ponto1">Vá para o tópico 1

Vá para o tópico 1

 

<p></p> – Parágrafo

Tag usada para criar um parágrafo, pode-se acrescenter parâmetros para aumentar suas funcionalidades, como:

• align=”valor“ parametro responsavel pelo alinhamento, podendo ser left (esquerda), right (direito), center (centro) e justify (justificado)

align="right">Texto alinhado a direita

texto alinhado a direita

• style=”valor”  tag usada para acrescentar CSS em linha.
  

style="background-color:yellow;"> To Be Geek

To Be Geek

 

<b></b> – Bold

a tag é usada para deixar o texto em negrito.

<b>texto em negrito </b> ou <strong>texto em negrito</strong> (sendo essa ultima a mais recomendada).

 texto em negrito

 

<i></i> – Itálico

Usada para formatar o texto em itálico.

<i>texto em itálico</i>

 texto em itálico

 

 – Subscrito

Subscreve o texto.

Veja como fica o<sub> texto subscrito</sub>

Veja como fica o _{texto subscrito}

 

 – Sobrescrito

Sobrescreve o texto.

Veja como fica o <sup> texto sobrescrito </sup>

Veja como fica o ^{texto sobrescrito}

 

<u></u> – Sublinhado

Sublinha o texto.

<u>texto sublinhado</u>

Texto sublinhado

 

<font></font> – Fonte

A tag é usada junto com alguns parâmetros para estilizar textos.

• size=”valor“  responsável pelo tamanho da fonte, variando de 1 a 7.

<font size="6">To Be Geek</font>

To Be Geek

• face=”valor“ responsável por selecionar o tipo de fonte do texto.

<font face="arial">To Be Geek</font>

To Be Geek

• color=”valor“ indica a cor do texto, podendo ser, em hexadecimal ou pelo nome (exemplo: red, blue, green etc..).

< font color="red" > To Be Geek </font>

To Be Geek

Como ja citado, em uma mesma tag pode-se usar vários complementos juntos, como no exemplo abaixo.

<font size="5" face="arial" color="green">To Be Geek</font>

To Be Geek

 

<big></big> – Big

Usada para aumentar o tamanho da fonte, neste caso, foi usada varias vezes para que ocorra um aumento gradativo da fonte e foi fechada nessa mesma ordem para que ocorra a volta pro estado anterior, até o tamanho normal da fonte.

<big>a<big>a<big>a<big>a</big>a</big>a</big>a</big>a

aaaaaaa

 

<small></small> – Small

Tem um funcionalidade parecida com a tag Big, só que ao contrario, ao invés de aumentar a fonte, ela diminui.

<small>b<small>b<small>b<small>b</small>b</small>b</small>b</small>

bbbbbbb

 

Continuação:

• HTML Básico Parte 2 – Tabelas