To Be Geek, um mundo para geeks
Facebook To Be Geek Twitter To Be Geek Google Plus To Be Geek Feed To Be Geek

HTML básico parte 2 – Tabelas

Postado por Frede Mandu em 09/ago/2013 - 1 Comentário

Continuação do post:

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.

tabela html

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>

1
2
3
<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.

1
2
3
<table border="2">
  <tr><td>1ª linha, 1ª coluna</td><td>1ª linha, 2ª coluna</td></tr>
</table>
1ª linha, 1ª coluna1ª 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).

1
2
3
4
5
<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ª coluna1ª linha, 2ª coluna
2ª linha, 1ª coluna2ª 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:

1
2
3
4
5
<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ª coluna1ª 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:

1
2
3
4
5
<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ª coluna2ª linha, 2ª coluna

CSS básico parte 1

Postado por Frede Mandu em 15/jun/2013 - Sem Comentários

Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML, ou seja é uma linguagem que define os estilos a serem aplicados principalmente aos documentos HTML, resumindo da forma mais clara possível, seria uma linguagem usada para dar forma ao documento, como por exemplo na criação de Layouts, etc… Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.

 

linguagem css

Não tem como aprender CSS sem antes saber o mínimo sobre HTML ou outra linguagem de marcação, por isso recomendo a leitura do artigo:

 

Sintax

CSS é utiliza uma sintax simples, compostas por regras construídas em cima de palavras em inglês, o que torna fácil de compreender.

Cada regra consiste em: um ou mais Seletores e suas Declarações, que ficam entre {   }.

Cada declaração é dividida em: propriedade, dois pontos(:), valor ou valores e finalizando-a com ponto e virgula(;),  vejas os exemplos abaixo.

1
p { color:blue;  }

Divisão de uma regra (CSS)
css

Em CSS pode haver também mais de uma declaração ou até mesmo mais de um seletor em uma mesma regra.

No exemplo abaixo foi usado o seletor p com duas declarações, uma com a propriedade color e valor red; outra com a propriedade font-size e valor 20px.

1
2
3
4
p {
color:red;
font-size:20px;
}

 

Já nesse outro exemplo foi usado mais de um seletor (seletor b e .cont) .

1
2
3
b .cont {
color:blue;
}

Então o uso de vários seletores e declarações torna-se necessarios conforme aquilo que se propõe a fazer.

 

Seletor

Os seletores podem ser em três tipos: Classes, IDs ou Tags, e é o seletor que como o próprio nome diz, vai selecionar o item à aplicar os estilos (CSS).

 

ID

Um ID pode ser escrito da seguinte forma, # seguido do nome da ID ( #nomedaid {} ), a ID só pode ser chamado uma vez dentro de um documento HTML, por ser única, no exemplo abaixo foi criado uma regra CSS simples e o modo que pode ser chamado dentro do documento.

1
2
3
4
5
6
7
8
/* Regra CSS */
 
#caixa {
width:150px;
height:150px;
background:green;
float:left;
}

 

Tudo que estiver entre a tag

e

recebera as características do respectivas regras em CSS.(“caixa” é um valor escolhido como exemplo e pode ser qualquer um, contanto que seja idêntico o da regra que deseja aplicar.)

1
<!-- criando uma <span class="hiddenSpellError" pre="uma ">DIV</span> com a respectiva ID criada na regra -->
Conteudo da caixa

 

Class

As classes são muito parecidas com os IDs com uma pequena diferença, elas podem se repetir dentro do documento HTML quantas vezes necessárias, o seletor no formato ID pode ser escrito com ponto(.) seguido do nome que desejar ( .nomedaclasse {} ). Veja o exemplo abaixo para compreender.

1
2
3
4
5
6
.caixa {
width:150px;
height:150px;
background:green;
float:left;
}

Tudo que estiver entre a tag

e

recebera as características do respectivas regras em CSS.(“caixa” é um valor escolhido como exemplo e pode ser qualquer um, contanto que seja idêntico o da regra que deseja aplicar.)

No exemplo que segue abaixo a class=”caixa” foi chamada 3 vezes dentro do documento HTML, algo que não é indicado com IDs, por serem únicas.

1
<!-- criando uma(ou mais) <span class="hiddenSpellError" pre="mais ">DIV</span> com a respectiva CLASS criada na regra -->
Conteudo 1
Conteudo 2
Conteudo 3

 

Tag

Uma das principais características do CSS é o fato de que se pode atribuir estilo as tags em html, simplesmente usando-as como seletores, para usa-las como seletor não necessita do sinal de menor (<) e maior (>), somente o nome da tag como nos exemplos abaixo.

1
2
3
4
5
6
7
8
9
10
11
p {
font-size:15px;
}
 
h1 h2 h3 h4 h5 {
color:red;
}
 
a {
color:green;
}

 

Nos exemplos acima temos as tags <p>, <h1> até <h5> em uma mesma regra e <a>

 

Declaração

Declaração é a parte da regra que define as características da mesma, é dividida em: propriedade e valor, além de que dentro de uma regra pode haver mais de uma declaração, o que normalmente ocorre. Veja o exemplo abaixo (declaração destacada em vermelho).

1
body {bakground:red;}

Propriedade

Propriedade é a parte da declaração responsável por definir qual característica do seletor sera alterada.

 

Valor

Valor define como aquela propriedade sera alterada.

 

Lista de propriedades mais usadas

Obs.: 1º Tudo que estiver entre /* e */ em CSS é considerado um comentario, 2º O valor citado é apenas um exemplo  e deve ser substituído pelo valor adequado (citado no comentário a frente da propriedade), pois cada propriedade tem uma variação de valores diferentes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
position:relative;  /* define como sera organizada a posição do elemento, 
sendo divida em relative, absolute, fixed e */
 
width:150px;  /* define a largura do elemento, o valor pode ser em px ou % 
(em relação ao tamanho da tela) */
 
height:100px;  /* define o comprimento de um elemento, o valor pode ser do mesmo modo
 que o citado em width (px e %) */
 
margin:10px 5px 10px 5px;  /* essa propriedade faz com que se crie uma margem invisível
 entre esse elemento e o resto, o valor pode ser escrito em px ou %, além de que a 
margem pode ser criada nos quatro cantos do elemento, por isso quatro valores. 
A ordem do valores corresponde a ordem das margens, topo, direita, baixo e esquerda */
 
float:left; /* float é uma propriedade de flutuação para direita e esquerda, 
por isso os valores podem ser: right e left */
 
left:50px;  /* indica qual a distancia um elemento fica do canto esquerdo, 
os valores podem ser em px e % */
 
top:10px;  /* indica qual a distancia um elemento fica do topo, 
os valores podem ser em px e % */
 
background:url(); /* propriedade para definir o fundo, os valores são em: 
fixed, scroll, url(), valores em #exadecimal e rgb() */
 
color:#fff;  /* altera a cor da fonte, os valores podem ser escritos em inglês
(exe: red, blue), exadecimal (exe: #000, #fff) ou em rgb ( exe: rgb(0,0,0), 
rgb(255,255,255) ) */
 
font-size:valor; /* altera o tamanho da fonte, os valores podem ser esritos em: px, pt, %, em e cm */

 

Em breve criarei continuação deste post, até la!!

HTML básico parte 1

Postado por Frede Mandu em 12/abr/2013 - Sem Comentários

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.

Tutorial de HTML

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:

1
O nome <b>To Be Geek</b> 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

1
2
3
4
5
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 “>”

1
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

1
2
   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
1
 bgcolor="red">conteúdo
  • background=”valor atribui uma imagem de fundo à pagina
1
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
1
 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.
1
name="ponto1">Anchor

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

1
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)
1
align="right">Texto alinhado a direita

texto alinhado a direita

  • style=”valor”  tag usada para acrescentar CSS em linha.
1
style="background-color:yellow;"> To Be Geek

To Be Geek

 

<b></b> – Bold

a tag é usada para deixar o texto em negrito.

1
<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.

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

 texto em itálico

 

<sub></sub> – Subscrito

Subscreve o texto.

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

Veja como fica o texto subscrito

 

<sup></sup> – Sobrescrito

Sobrescreve o texto.

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

Veja como fica o texto sobrescrito

 

<u></u> – Sublinhado

Sublinha o texto.

1
<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.
1
<font size="6">To Be Geek</font>

To Be Geek

  • face=”valor responsável por selecionar o tipo de fonte do texto.
&lt;font face="arial"&gt;To Be Geek&lt;/font&gt;

To Be Geek

  • color=”valor indica a cor do texto, podendo ser, em hexadecimal ou pelo nome (exemplo: red, blue, green etc..).
&lt; font color="red" &gt; To Be Geek &lt;/font&gt;

To Be Geek

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

1
<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.

1
<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.

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

bbbbbbb

 

Continuação: