PPSI I - Tabelas HTML

Tabelas HTML

Utilização de tabelas:

As tabelas foram uma grande conquista para os autores de documentos para a Web. Com elas é possível, por exemplo, termos estas páginas do tutorial organizadas em colunas, sendo uma delas voltada exclusivamente aos links de navegação e observações. Tabelas implementam um conceito importante de design, as "grades", segundo as quais organizamos textos e ilustrações de maneira organizada.

Como já foi possível perceber, as tabelas podem conter textos, listas, parágrafos, imagens, diversas outras formatações - inclusive outras tabelas. Novas versões de HTML e de navegadores populares vêm acrescentando diversos atributos às tabelas, e nosso objetivo aqui é saber lidar com a maioria desses recursos disponíveis.

A formatação de tabelas faz parte da versão 3.0 da linguagem HTML. Manipular tabelas em HTML dá trabalho e necessita de calma.

A tag para criação de uma tabela é <table>, e dentro dela você coloca atributos importantes para a criação correta da sua tabela. Não esqueça de fazer o fechamento da tag com </table>.

Fonte: http://www.linhadecodigo.com.br/artigo/82/html-avancado.aspx#ixzz2OW25

I. td, tr, th

A tag <td>é utilizada para demarcar o conteúdo de uma célula da tabela.

A tag <tr> é utilizada para demarcar o conteúdo de uma linha de tabela.

Ex do código utilizando as tags <td> e <th>:

<table summary="Esta tabela mostra a evolução da cotação do dólar turismo nos últimos 12 

meses, mês a mês.">

<tr>

<td>R$ 1,97</td><td>R$ 2,02</td>

</tr>

</table>

A tag <th> é utilizada para demarcar o conteúdo do cabeçalho de uma coluna.

Ex do código utilizando a tag <th>:

<table summary="Esta tabela mostra a evolução da cotação do dólar turismo nos últimos 12 meses, mês a mês."><tr>
<th id="ex31a_col_jun">Junho</th>
<th id="ex31a_col_jul">Julho</th>
</tr>
<tr>
<td headers="ex31a_col_jun">R$ 1,97</td>
<td headers="ex31a_col_jul">R$ 2,02</td>
</tr>
</table>

II. Caption

As tags <caption> e </caption> são utilizadas para definir uma legenda de uma tabela.

Ex do código usando a tag <caption>:

<table summary="Esta tabela mostra a evolução da cotação do dólar turismo nos últimos 2 meses."><caption>Cotação do dólar turismo</caption>
<tr>
<th id="ex31b_col_jun">Junho</th>
<th id="ex31b_col_jul">Julho</th>
</tr>
<tr>
<td headers="ex31b_col_jun">R$ 2,02</td>
<td headers="ex31b_col_jul">R$ 1,97</td>
</tr>
</table>

fonte:http://warau.nied.unicamp.br/warauv2/?q=node/31

III.thead, tfoot, tbody.

Utilizando as tags <thead>, <tbody> e <tfoot>, podemos dar à nossa tabela, respectivamente, um cabeçalho, definir o "corpo" dos dados e adicionar um rodapé. Observe o exemplo abaixo para entender:

<table width="300">

<thead>

<th>Mês</th>

<th>Vendas</th>

  </thead>

    <tbody>  

         <tr>
         <td>Janeiro</td>
         <td>R$ 1467</td>
</tr>
<td>Fevereiro</td>
         <td>R$ 956</td>
         </tr>
         <tr>
         <td>Março</td>
         <td>R$ 1593</td>
         </tr>
   </tbody>
   <tfoot>
       <th>Total</th>
       <th>R$ 4016</th>
   </tfoot>
</table>

Mês Vendas Janeiro R$ 1467 Fevereiro R$ 956 Março R$ 1593 Total R$ 4016

Note que junto com as tags <thead> e <tfoot> usamos <th> para criar uma célula, em vez de <td>. O texto dessas células será automaticamente centralizado e formatado com negrito.

Com algumas linhas de CSS, podemos estilizar o cabeçalho e o rodapé da nossa tabela, colocando-o em itálico:

thead { font-style: italic; } tfooter { font-style: italic; } Mês Vendas Janeiro R$ 1467 Fevereiro R$ 956 Março R$ 1593 Total R$ 4016

Você pode estar pensando "ok, mas isso eu posso fazer apenas colocando o texto das células do cabeçalho e do rodapé em itálico". Pode, mas como eu disse no começo do artigo, o objetivo dessas três tags é deixar a tabela mais semântica.

Vamos imaginar que a tabela do exemplo está no site de uma empresa que publica dados contábeis. O site tem algumas dezenas de tabelas semelhantes. Hoje todas as tabelas têm o cabeçalho e o rodapé em itálico, mas o layout do site vai ser alterado e todas as tabelas passarão a ter o cabeçalho em vermelho, o rodapé em azul - ambos alinhados à esquerda - e o corpo da tabela em cinza.

Se você deixou o cabeçalho e o rodapé de todas as tabelas em itálico utilizando a tag <i> ou a tag <em>, vai ter um bom trabalho alterando a aparência e alinhamento de cada tabela. Mesmo utilizando um editor visual, lá se vão algumas horas cuidando disso.

Mas se o seu código for semântico (ou seja, no arquivo HTML ficam os dados em tags corretas, e no arquivo CSS fica o estilo da página), basta alterar algumas linhas da sua folha de estilo para alterar todas as tabelas do site. Veja o exemplo:

thead {
text-align:left;
color: #900;
}
tbody {
color: #666
}
tfooter {
text-align: left;
color: #009;
 }

Mês	Vendas
Janeiro	R$ 1467
Fevereiro	R$ 956
Março	R$ 1593
Total	R$ 4016

fonte:  http://www.infowester.com/tagsdesconhecidas2.php

Template Layout

Olá pessoal

hoje vou escrever sobre TEMPLATES LAYOUT, onde abordaremos tópicos sobre Document Flow, Propriedade Position e Propriedade Float.

Uma vez que o assunto principal são os templates, é muito importante que seja destacada aqui a sua definição. O que é um TEMPLATE então?

De acordo com o Wikipédia (http://pt.wikipedia.org/wiki/Web_template):

“Template (ou "modelo de documento") é um documento sem conteúdo, com apenas a apresentação visual (apenas cabeçalhos por exemplo) e instruções sobre onde e qual tipo de conteúdo deve entrar a cada parcela da apresentação — por exemplo conteúdos que podem aparecer no início e conteúdos que só podem aparecer no final.”

Mas, e falando de documento web, a definição é a mesma?

De acordo com o Curso CSS3 da W3C (http://www.w3c.br/pub/Cursos/CursoCSS3/css-web.pdf), na pagina 37, fala que a parte mais fácil de desenvolver um site com CSS é o planejamento e a diagramação do layout, mas que por falta de recursos mais avançados é onde os desenvolvedores mais encontram problemas. Fala também do float, que considera a parte mais importante do CSS, pois é o float que cuida de toda a diagramação do site, desde os elementos que definirão as áreas mestres do site até os pequenos detalhes de imagens e ícones.  Fala também que o o float não é o ideal para a diagramação e organização dos elementos do layout. Ele resolve muitos problemas, mas deixa a desejar em diversos sentidos por estar completamente ligado a ordem dos elementos no HTML. Tendo em vista estes e outros problemas o W3C criou um novo módulo. O módulo em questão é chamado de Template Layout. Esse módulo consiste em uma forma de criarmos e organizarmos os elementos e informações do layout de forma menos espartana e mais flexível. Visitando a página através do link acima, podemos obter  informações com mais profundidade sobre esse  assunto, como sua sintaxe e funcionamento.

Bom, depois desse resumo creio que agora podemos seguir com a abordagem dos tópicos.
                                             

                                                   


1. DOCUMENT FLOW


                         

O fluxo de documentos podem ser modificados por CSS através das seguintes propriedades:

• flutuar
• posição

Usando estas propriedades modifica a maneira como os elementos são processados ​​por padrão. Por exemplo, se usarmos flutuante, em seguida, o fluxo do documento irá aparecer como mostrado abaixo.

                  

As setas representam o impacto de flutuar sobre os elementos que se encontram ainda em fluxo normal. Tenha em mente, no entanto, que, apesar do fato de que nós ainda podemos recuperar o fluxo normal para flutuar usando compensação, não há nenhuma maneira direta de fazer o mesmo para o posicionamento.

fonte:http://onwebdev.blogspot.com.br

2.PROPRIEDADE POSITION

De acordo com o site Tableless(http://tableless.com.br/propriedade-position-do-css/#.UUekl8dQB2M) a propriedade position não serve para a criação de estruturas de layouts, mas você a usará para coisas mais simples. Segundo o site existem 3 tipos de valores que usamos na propriedade position: relative, absolute e fixed.

Position Fixed

O position: fixed; irá fixar a posição do elemento na coordenada que você definir. A medida que a página é rolada, o elemento continua fixo na posição que você definiu e o conteúdo da página rola normalmente. Veja um exemplo de position fixed.

Position Relative

Todos os positions precisam de um ponto para iniciar o cálculo da coordenada para assim posicionar o elemento na tela. Ao contrário do que muitos acham, esse ponto não é o ponto central do elemento, o ponto base é o canto superior esquerdo do elemento. A partir deste canto, o browser irá calcular a coordenada que você definiu e irá posicionar o elemento no viewport.

O position relative posiciona o elemento em relação a si mesmo. Ou seja, o ponto zero será o canto superior esquerdo, e ele começará a contar a partir dali.

                               

Position Absolute

O Position Absolute é um tanto diferente do Relative. Enquanto o elemento com Position Relative utiliza seu próprio canto para referenciar sua posição, o elemento com Position Absolute se utiliza do ponto superior esquerdo de outros elementos. Estes elementos são os parentes dele do elemento com position absolute. Mais especificamente o pai.

3.PROPRIEDADE FLOAT

Float é uma propriedade CSS de posicionamento. Se você está familiarizado com projetos para mídia impressa, você pode pensar, de forma semelhante, numa imagem em um layout onde o texto a circunda quando necessário.

No design para web, uma imagem inserida continua a fazer parte do fluxo da página. Isto significa que, se forem feitas alterações no tamanho ou se elementos ao seu redor mudarem, a página irá automaticamente ser reajustada (“reflow“). Isso difere da página onde os elementos são posicionados de forma absoluta. Elementos posicionados de forma absoluta são removidos do fluxo da página web. Elementos posicionados absolutamente não afetarão quaisquer outros elementos da página, quer estes estejam em contato, ou não.

Além de simples exemplos, como posicionar uma imagem ao lado de um bloco de texto, floats são usados para criar layouts para web.

Floats são igualmente úteis para layouts de pequenas instâncias.

     a. Propriedade clear

Elementos que contêm elementos float não calculam sua altura como é de se esperar. De fato, se o elemento pai contém apenas elementos flutuadores, navegadores vão renderizar a altura em zero (como se fosse “height:0“).

Se você der um “clear” antes de fechar a tag do elemento pai, você conserta isso.

Vamos dizer que você tem uma série de elementos flutuantes.

Então, digamos que você quer criar uma pausa nesta grade de elementos, a fim de iniciar uma nova linha. Porque, você sabe, iss faz sentido apenas visualmente falando.

Os dois exemplos acima são exemplos genéricos de como fazer o uso de “clear” para fazer a “limpeza”, ou seja, dar clear tanto à direita, quanto à esquerda. Porque floats podem ser tanto à direita, como à esquerda, e você pode, evidentemente, dar um float somente à esquerda ou somente à direita. Isso pode ser útil quando fazer a limpeza de ambos os lados (“clear:both“) seja problemático.

Se tivesse sido dado um clear em ambos os lados (“clear:both“) no exemplo acima, a segunda imagem teria sido empurrada para baixo, onde termina o bloco de texto.

A propriedade CSS “clear” faz exatamente o que “diz na caixa”. O problema reside em onde e como aplicar um elemento à página com a propriedade clear correta.

 - Aplicar “clear:both” ao elemento imediatamente seguinte ao que você precisa que seja “limpo”. Tomemos um exemplo perto do topo de um layout de web page com o cabeçalho e rodapé de largura total, com o conteúdo principal flutuando à esquerda e uma barra lateral à direita. A fim de que o rodapé aparece no lugar certo, você deve limpar a flutuação antes dele. Neste simples exemplo, você pode aplicar aplicar clear:both na própria div do rodapé.


 - Aplicar “clear” e limpar o float em um elemento vazio. DIVs são muito boas porque, geralmente, você não tem nenhum estilo aplicado a elas (como em um elemento de parágrafo “p”, por exemplo) e elas não têm nenhuma funcionalidade especial (como um “<br />”). Onde for preciso limpar o float, apenas insira: <div style=”clear: both;”> </div>. Usar estilos in-line não é muito “atraente”, então é melhor fazer uma classe “clear” e criar uma regra que faça a limpeza do float, mas isso é apenas uma questão de gosto.


Se clicar no link http://desenvolvimentoparaweb.com/css/css-float-consideracoes-dicas-e-macetes-para-bons-layouts-na-web/  vc poderá saber mais sobre  CSS  “overflow:auto”, dar o clear com a pseudo classe ":after" e  "pushdown"


  b. Problemas com cross browser

No site Tableless http://tableless.com.br/ vc encontra um tutorial sobre como evitar as incompatibilidades entre os browsers.

Bom pessoal, por hoje é isso, espero ter ajudado. Fiquem com Deus e até o próximo post!

PPSI 1 - História da Internet

Vivemos hoje a era digital, onde praticamente o mundo todo se tornou dependente da comunicação virtual, através da maior rede de interação do planeta, a Internet.

Nesse post, teremos um breve resumo sobre a história da internet, sobre a diferença entre linguagem de programação e linguagem de marcação e por fim, sobre o HTML.



A História da Internet

Quando o assunto é Internet, temos a sensação de que se trata de novidade. Engano nosso, pois o atual meio de comunicação que possibilita a troca de informações entre milhares de pessoas em todo mundo existe há anos.

Conta a história que, na década de 60, auge da Guerra Fria, o Departamento de Defesa dos Estados Unidos queria criar uma rede de computadores que não pudesse ser destruída por bombardeios e fosse capaz de ligar pontos estratégicos, como centros de pesquisa e tecnologia. Foi quando surgiu uma rede sem um comando central, onde a sua estrutura permitia que os dados corressem em qualquer sentido. Esse projeto ficou conhecido como ARPAnet, já que o setor responsável por sua realização foi a Advanced Research Projects Agency (Agência de Projetos de Pesquisa Avançada). Em 1970, essa rede interligava quatro universidades norte-americanas. Quatro anos depois, 40 instituições acadêmicas já faziam parte da ARPAnet, com seus computadores trocando mensagens e arquivos.

Em 1974, foi criada a Telenet, primeiro serviço comercial de acesso à rede nos EUA. O nome Internet só começou a ser usado em 1982. Pouco depois, em 1983, foi estabelecido o TCP/IP (Transmission Control Protocol/Internet protocol), até hoje o protocolo de comunicação (a "linguagem" comum) usado por todos os computadores conectados à rede.

Mas o que realmente possibilitou o futuro sucesso da Internet foi o desenvolvimento, em 1991, da World Wide Web (WWW), um sistema de hipertexto que tornou mais fácil navegar pela rede mundial.

O crescimento da Internet não foi planejado por ninguém. Ela é um conjunto de redes, que não pertence a ninguém nem é controlado por um grupo. Cada rede é independente e pode ser dirigida como prefiram seus donos. Esta é a causa da grande diversidade que se pode achar na Internet, mas também da dificuldade de encontrar informações que a caracterizam.

Mas não podemos esquecer que a internet é a evolução da troca de informações entre as pessoas desde os primórdios. Desde a criação do sistema binário em 1605 pelo filósofo inglês Francis Bacon (é a partir de códigos construídos por esse sistema binário, padronizado com os numerais 0 e 1, que os computadores realizam o processamento de dados),
do telégrafo usado pela primeira vez em 1844 entre as cidades de Baltimore e Washington, nos Estados Unidos, e não podemos esquecer do primeiro computador digital eletrônico, o ENIAC (Electrical Numerical Integrator and Computer) , criado em 1946 por cientistas norte-americanos. Pois é, devemos a toda essa evolução, a Internet que usamos hoje e que nos faz interagir com o mundo!


Fontes de pesquisa:
http://www.tecmundo.com.br/infografico/9847-a-historia-da-internet-pre-decada-de-60-ate-anos-80-infografico-.htm
http://www.educared.org/educa/index.cfm?pg=internet_e_cia.historia_principal



Linguagem de Marcação X Linguagem de Programação

Quando o assunto é internet, nos perguntamos sobre qual tipo de linguagem utilizamos nela. Então vamos esclarecer que existem tipos diferentes de linguagens utilizadas no mundo digital. Existem a linguagem de marcação e a linguagem de programação, com características que diferem uma da outra.

Enquanto a linguagem de marcação é representada por um conjunto de códigos empregados a dados e a textos, a função da linguagem de programação é servir como meio de comunicação entre computadores e humanos.

A linguagem de marcação é utilizada em diferentes segmentos, em especial na indústria editorial onde a marcação e a formatação de páginas são feitas a partir desse recurso. Já as linguagens de programação estão divididas entre dois tipos: as de baixo nível e as de alto nível. Os computadores interpretam tudo como números em base binária, ou seja, só entendem zero e um. As linguagens de baixo nível são interpretadas diretamente pelo computador, tendo um resultado rápido, porém é muito difícil e incômodo se trabalhar com elas.

Então agora sabemos que utilizamos a linguagem de marcação para editar e formatar as paginas na internet, o HTML, sobre o qual falaremos adiante.

Fontes de pesquisa:
http://www.mundoeducacao.com.br/informatica/linguagem-marcacao.html
http://www.infoescola.com/informatica/o-que-sao-linguagens-de-programacao/

HTML

Uma página da web (webpage) é uma fonte de informações que é adequada à World Wide Web e que pode ser acessada por um navegador web. Isso quer dizer que ela é um documento que é feito de modo à atender requisitos da rede mundial de computadores e capaz de ser visualizada a partir de um programa específico para esse fim.

A requisição e o acesso às paginas da web é feita por meio de um protocolo chamado HTTP (Hypertext Transfer Protocol, ou Protocolo de transferência de hipertexto).

As webpages utilizam de HTML (Hypertext Markup Language) para fazer a formatação dos dados. É importante notar que HTML não é uma linguagem de programação, mas sim de formatação.


a) Caracteristicas :

Os arquivos em HTML - HyperText Markup Language - Linguagem de Formatação de Hipertexto - pode ser gerados em qualquer editor de texto. É possível transformar um arquivo.doc (formato Word) para HTML.

A linguagem HTML utiliza marcações específicas e distintas para dizer ao navegador (Internet Explorer, Firefox, Mozilla, e outros) como exibir o documento.

Os comandos HTML são chamados de TAGS, compreende as marcas padrões que são utilizadas para fazer indicações a um browser.

-> As TAGs aparecem sempre entre os sinais de “menor que” (<) e “maior que” (>);

-> Geralmente são utilizados em pares , sendo que a TAG de finalização de um comando é precedida de uma barra (/).


b)Estrutura básica de uma pagina:
Na estrutura básica de uma página HTML, são necessários no mínimo quatro tags básicas: HTML, head, title e body. Deverá ser assim:


<HTML>
<HEAD>
<TITLE>Post 1 Meus Tutoriais</TITLE>
</HEAD>
<BODY>
<H1>Este é o primeiro nível de cabeçalho.</H1><p>
Bem-vindo ao mundo do HTML. Este é o primeiro parágrafo.<p>
Este é o segundo parágrafo
</BODY>
</HTML>


c) Metadados:

       Head:

O texto contido ente as TAG <HEAD> e <HEAD> define o cabeçalho do documento. Estas informações são importantes pois indicam ao navegador a forma que a página deve ser apresentada graficamente.

Os cabeçalhos normalmente são usados para títulos e sub-títulos de uma texto da página. A linguagem HTML possui seis níveis de cabeçalhos, numerados de 1 a 6; quanto menor o nível, maior será o destaque.

COMANDO:


<Hy> Texto do Cabeçalho </Hy>


Onde o y é um número que poderá ser especificado entre 1 a 6, definindo o nível do cabeçalho.


COMANDO:


<H1> Cabeçalho nível 1 </H1>
<H2> Cabeçalho nível 2 </H2>
<H3> Cabeçalho nível 3 </H3>
<H4> Cabeçalho nível 4 </H4>
<H5> Cabeçalho nível 5 </H5>
<H6> Cabeçalho nível 5 </H6>

    Title:

Todo documento em HTML deve possuir um título. O título é exibido em local separado da página, e é utilizado para identificar o documento em outros contextos, de modo que o título deve indicar claramente o conteúdo do documento.

As tag utilizadas para títulos são: <TITLE> e <TITLE>.


<html>
<title>Este é o título</title>
<body>
Aqui entra o texto do documento ...
</body>
</html>


      Link:

O principal poder do HTML, está na capacidade de ligar partes de textos e imagens a outros documentos. A interligação entre documentos é feito utilizando a tag <a>, e não se restringe apenas a outras páginas. Os links podem apontar para qualquer recurso disponível na WEB, podendo ser uma página em HTML, uma imagem, um arquivo de som, um filme.

       Style:

Define a formatação em CSS.



d) Sessões:

Body: Elemento que contém o corpo da pagina.

Article: elemento que representa uma composição independente no documento.

Section: elemento que define as seções do documento.

Nav: elemento de menu de navegação.

Aside: elemento que agrupa informações relacionadas ao conteúdo principal.

h1,h2,h3,h4,h5,h6: elementos que definem o tamanho que o cabeçalho vai aparecer na página, escritos sempre entre<>.

Hgroup: elemento que agrupa dois ou mais elementos h1 até h6, organizando-os.

Header: elemento que agrega conteúdo do cabeçalho de um documento ou de uma seção.

Footer: elemento que indica o rodapé do documento.

Address: define um elemento de endereço.


e) Comentário HTML:
Os comentários são utilizados para explicar o código fonte para que mais tarde seja possível compreender o que foi feito.

COMANDO:


<!-- Comentário da página -->


f) Elementos de agrupamento:
<p>, define um parágrafo em uma página, acrescenta uma margem entre o texto que está em <p> e os demais textos.

<hr>, mostra uma quebra temática no texto da página, geralmente mostra uma linha horizontal usada para separar os textos.

<blockquote>, deve ser usado toda vez que você usar um texto que venha de outra fonte, como um site. Ele deixa esse conteúdo separado do resto do texto com espaço entre eles.

<ol>, define uma lista ordenada, nela pode-se usar números ou letras.

<ul> É usado como <ol>, porém esta será uma lista não ordenada, ou seja, em vez de números ou letras, aparecerão bolinhas, quadradinhos e etc. Para separar os elementos.

<li> Define cada elemento dentro de uma lista (<ol> ou <ul>).

<dl>, <dt> e <dd> definem uma lista de definições onde; <dl></dl> define onde começa e onde acaba essa lista, <dt></dt> define um elemento na lista e <dd></dd> mostra a definição do elemento

<div> define uma divisão em uma seção de uma página, para que seja estilizada por CSS. Essa tag é muito útil para separar e dispor qualquer elemento nas páginas HTML.


g) Elementos de texto semânticos:

<a>, define um hiperlink

<abbr>, define uma abreviatura e colocando se title="", definindo o significado da abreviatura entre as aspas, quem usa sintetizadores de voz conseguirão saber o que a sigla significa.

<span> fornece uma maneira de adicionar um gancho para uma parte de um texto ou de uma parte de um documento. Essa tag não fornece um efeito visual, para isso deve-se utilizar CSS.

<strong> dá destaque aoúdo texto e o define como importante, geralmente o texto entre <strong> fica em negrito.

<em> dá ênfase a um texto, geralmente o texto fica em itálico.

<br> pula a linha.


h) Conteúdo embutido IMG:

O navegador interpreta as imagens a partir da leitura da tag "<img />".

<img src="imagem.jpg" />.




Para conhecer mais sobre esse assunto vc pode acessar o Site http://www.primecursos.com.br , cursos de HTML básico e Webdesigner.