JavaScript :

 é uma linguagem de programação interpretada . Foi originalmente implementada como parte dos navegadores web para que scripts pudessem ser executados do lado do cliente e interagissem com o usuário sem a necessidade deste script passar pelo servidor, controlando o navegador, realizando comunicação assíncrona e alterando o conteúdo do documento exibido.

É atualmente a principal linguagem para programação client-side em navegadores web. Foi concebida para ser uma linguagem script com orientação a objetos baseada em protótipos, tipagem fraca e dinâmica e funções de primeira classe. Possui suporte à programação funcional e apresenta recursos como fechamentos e funções de alta ordem comumente indisponíveis em linguagens populares como Java e C++.

É baseada em ECMAScript padronizada pela Ecma international nas especificações ECMA-2623 e ISO/IEC 16262

JavaScript suporta os elementos de sintaxe de programação estruturada da linguagem C (por exemplo, if, while, switch). Uma exceção é a questão do escopo: o escopo em blocos ao estilo do C não é suportado, em seu lugar JavaScript utiliza escopo a nível de função. JavaScript 1.7, entretanto, suporta escopo a nível de bloco através do comando let. Como C, JavaScript faz distinção entre expressões e comandos. Uma diferença sintática do C é que a quebra de linha termina automaticamente o comando, sendo o ponto-e-vírgula opcional ao fim do comando.

O que é C S S 3?

O Cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação (aparência) em páginas da internet que adotam para o seu desenvolvimento linguagens de marcação (como XML, HTML e XHTML). O CSS define como serão exibidos os elementos contidos no código de uma página da internet e sua maior vantagem é efetuar a separação entre o formato e o conteúdo de um documento.

Por que o CSS foi criado?

Com a evolução dos recursos de programação as páginas da internet estavam adotando cada vez mais estilos e variações para deixá-las mais elegantes e atrativas para os usuários. Com isto, linguagens de marcação simples como o HTML, que era destinada para apresentar os conteúdos também precisou ser aprimorada.

Foram criadas novas tags e atributos de estilo para o HTML e em resumo ele passou a exercer tanto a função de estruturar o conteúdo quanto de apresentá-lo para o usuário final. Entretanto, isto começou a trazer um problema para os desenvolvedores, pois não havia uma forma de definir, por exemplo, um padrão para todos os cabeçalhos ou conteúdos em diversas páginas. Ou seja, as alterações teriam que ser feitas manualmente, uma a uma.

A partir destas complicações, nasceu o CSS. Primariamente, foi desenvolvido para habilitar a separação do conteúdo e formato de um documento (na linguagem de formatação utilizada) de sua apresentação, incluindo elementos como cores, formatos de fontes e layout. Esta separação proporcionou uma maior flexibilidade e controle na especificação de como as características serão exibidas, permitiu um compartilhamento de formato e reduziu a repetição no conteúdo estrutural de uma página

Com isto, as linguagens de marcação passaram novamente a exercer sua função de marcar e estruturar o conteúdo de uma página enquanto o CSS encarregou-se da aplicação dos estilos necessários para a aparência dela. Isto é feito por meio da criação de um arquivo externo que contém todas as regras aplicadas e, com isto, é possível fazer alterações de estilo em todas as páginas de um site de forma fácil e rápida.

O CSS também permite que as mesmas marcações de uma página sejam apresentadas em diferentes estilos, conforme os métodos de renderização (como em uma tela, impressão, via voz, baseadas em dispositivos táteis, etc.). A maioria dos menus em cascata, estilos de cabeçalho e rodapé de páginas da internet, por exemplo, atualmente são desenvolvidos em CSS.

Os novos elementos em HTML 5 .

NOVOS ELEMENTOS:

A função do HTML é indicar que tipo de informação a página está exibindo. Quando lemos um livro, conseguimos entender e diferenciar um título de um parágrafo. Basta percebermos a quantidade de letra, tamanho da fonte, cor etc. No código isso é diferente. Robôs de busca e outros user-agents não conseguem diferenciar tais detalhes. Por isso, cabe ao desenvolvedor marcar a informação para que elas possam ser diferenciadas por diversos dispositivos.

Com as versões anteriores do HTML nós conseguimos marcar diversos elementos do layout, estruturando a página de forma que as informações ficassem em suas áreas específicas. Conseguiámos diferenciar por exemplo, um parágrafo de um título. Mas não conseguíamos diferenciar o rodapé do cabeçalho. Essa diferenciação era apenas percebida visualmente pelo layout pronto ou pela posição dos elementos na estrutura do HTML. Entretanto, não havia maneira de detectar automaticamente estes elementos já que as tags utilizada para ambos poderiam ser iguais e não havia padrão para nomenclatura de IDs e Classes.

O HTML5 trouxe uma série de elementos que nos ajudam a definir setores principais no documento HTML. Com a ajuda destes elementos, podemos por exemplo diferenciar diretamente pelo código HTML5 áreas importantes do site como sidebar, rodapé e cabeçalho. Conseguimos seccionar a área de conteúdo indicando onde exatamente é o texto do artigo.

Estas mudanças simplificam o trabalho de sistemas como os dos buscadores. Com o HTML5 os buscadores conseguem vasculhar o código de maneira mais eficaz. Procurando e guardando informações mais exatas e levando menos tempo para estocar essa informação.

Abaixo segue uma lista dos novos elementos e atributos incluídos no HTML5:

section	A tag section define uma nova seção genérica no documento. Por exemplo, a home de um website pode ser dividida em diversas seções: introdução ou destaque, novidades, informação de contato e chamadas para conteúdo interno.
nav	O elemento nav representa uma seção da página que contém links para outras partes do website. Nem todos os grupos de links devem ser elementos nav, apenas aqueles grupos que contém links importantes. Isso pode ser aplicado naqueles blocos de links que geralmente são colocados no Rodapé e também para compor o menu principal do site.
article	O elemento article representa uma parte da página que poderá ser distribuído e reutilizável em FEEDs por exemplo. Isto pode ser um post, artigo, um bloco de comentários de usuários ou apenas um bloco de texto comum.
aside	O elemento aside representa um bloco de conteúdo que referência o conteúdo que envolta do elemento aside. O asidepode ser representado por conteúdos em sidebars em textos impressos, publicidade ou até mesmo para criar um grupo de elementos nav e outras informações separados do conteúdo principal do website.
header	O elemento header representa um grupo de introdução ou elementos de navegação. O elemento header pode ser utilizado para agrupar índices de conteúdos, campos de busca ou até mesmo logos.
footer	O elemento footer representa literalmente o rodapé da página. Seria o último elemento do último elemento antes de fechar a tag HTML. O elemento footer não precisa aparecer necessariamente no final de uma seção.
time	Este elemento serve para marcar parte do texto que exibe um horário ou uma data precisa no calendário gregoriano.

O que mudou em HTML 5 .

Afinal, o que muda com o HTML 5?

Você desenvolvedor web, antenado, com certeza vem acompanhando a evolução, as críticas, as observações, os elogios e, claro, os tutoriais para entender um pouco mais do que efetivamente significa esta versão “5” do HTML.
Já você desenvolvedor, que limita-se a saber que uma nova versão está a caminho, talvez ainda não tenha tido a chance de conhecer quais serão essas importantes mudanças e o que trarão de novo para as bases do desenvolvimento web.

Aproveitando esta lacuna de compreensão do assunto procuro explanar, abaixo, sobre algumas mudanças que vão ocorrer tanto nas estruturas técnicas do desenvolvimento de webpages quanto na postura e parâmetros que este profissional deverá apresentar na criação de um website.

Lendo um “guia de aprendizado rápido para HTML5”, em meio à tantas outras informações que recebo todos os dias a respeito (desde jogos à músicas), percebi que além das diversas sinalizações quanto à nova estrutura que os códigos html vão apresentar, vai ficar cada vez mais claro que o trabalho do Htmler ou Front-End Engineer estará diretamente ligado à arquitetura de exibição de informação, já que no HTML5 vamos agrupar as informações de acordo com a sua relevância tanto para o usuário, quanto para os mecanismos de busca.
Aproveitando, deixo a primeira dica: este processo vai exigir que seja realizado um estudo sobre a importância e a hierarquia das informações e como elas devem ser exibidas no site, por isso caro desenvolvedor, ampliar seu leque para conhecer o gigante mundo da arquitetura de informação para websites, pode ser um grande diferencial em seu currículo.
Além disso, conhecer um pouco melhor o conteúdo do site, sem limitar-se à ao “Loren Ipsun” no HTML5, auxiliará na construção da semântica do código e numa comunicação mais direta com os mecanismos de busca, como por exemplo, conseguir perceber mais claramente se numa lista usaremos os tipos UL, OL ou DL, levando em consideração principalmente a ordenação e subordinação das informações na tela e na leitura dos mecanismos.

Talvez caro leitor, você esteja pensando: “mas hoje, isso já é possível e deve ser feito” então, lhe explico o porque de ressaltar a importância de um cuidado com a semântica da informação nos websites:  infelizmente muitos desenvolvedores limitam-se a conhecer apenas o uso de DIV’s em substituição às tabelas, afim de resolver “problemas” de diagramação de imagens e textos quando feito o cross-browsers, bem como ignoram qualquer estrutura hierárquica que a informação exibida possa ter no site, e com o HTML5,  isso não poderá mais ser ignorado assim
como as incompatibilidades entre browers, também devem diminuir.

Em termos técnicos no html5, teremos a tag <header> que poderá ser utilizada para toda informação introdutória ou elementos de auxílio a navegação como H1, H2, etc;  a tag <nav> para utilizar em estruturas que representem a navegação do site, como os menus; as tags <section> para as secções da página;  as tags <article> que vão representar uma parte do conteúdo como notícias ou novos posts de um blog;  as tags<aside> que vão representar um grupo de conteúdo com pouca relação ao conteúdo principal, mas de considerável relevância para estar presente na página – neste caso, o exemplo que podemos citar são os sidebar’s com banners ou informações de atendimento à clientes ao lado do conteúdo principal e por fim e não menos importante, as tags <footer> que utilizaremos para informações de rodapé do site – assinaturas, endereços, copyright, etc.

Percebe? Teremos que nos familiarizar muito mais com a estratégia comunicacional do site, através das informações textuais e visuais, do que costumamos fazer nos projetos de hoje para que a construção dos nossos códigos, dentro da nova versão, tragam ainda mais benefícios de usabilidade e acessibilidade ao site. Sem contar claro, com o fato de poder alterar a posição do seu site nos resultados de busca orgânica, através da clareza na exposição das informações e na linearidade de comunicação entre seu código e o robô de resultados.

Enfim, teremos muito a aprender e muito a compartilhar com os designers de interfaces e arquitetos de informação, mas acima de tudo, vejo como uma situação positiva aos htmler’s, afinal estaremos participando ainda mais da concepção dos projetos como um todo e tendo a chance de desenvolver um trabalho muito mais direcionado e minucioso, valorizando a posição e a existência de profissionais Front-End nas empresas e agências de soluções web.

As Tags em Html :

TAGS BÁSICOS
<html></html>	Inicia/termina um documento em HTML.
<head></head>	Define a àrea de cabeçalho, com elementos não visualisáveis na página.
<body></body>	Define a área visível do documento.
CABEÇALHO
<title></title>	Coloca o nome da página na barra de título da janela.
ATRIBUTOS DO CORPO
<body bgcolor=?>	Cor de fundo.
<body text=?>	Cor de texto.
<body link=?>	Cor das links.
<body vlink=?>	Cor das links previamente visitadas.
<body alink=?>	Cor da link activa.
TEXTO
<b></b>	Texto carregado.
<i></i>	Texto em itálico.
<tt></tt>	Texto estilo máquina de escrever, monoespaçamento.
<font size=?></font>	Tamanho das letras.
<font color=?></font>	Cor das letras.
<font face=?></font>	Define a fonte utilizada.
LINKS
<a href="URL"></a>	Cria uma hiperligação.
<a href="mailto:EMAIL"></a>	Cria uma link para o envio de correio.
<a name="NOME"></a>	Cria um 'alvo' dentro de uma página.
<a href="#NAME"></a>	Faz a ligação a um 'alvo' presente dentro da mesma página.
FORMATAÇÃO
<p></p>	Define a área de um parágrafo.
<p align=?>	Alinhamento de um parágrafo.
<br>	Insere uma quebra de linha.
<div align=?>	'Tag' genérico utilizado para formatar blocos de texto.
GRAFISMO
<img src="FICHEIRO">	Insere uma imagem.
<img src="FICHEIRO" align=?>	Alinha uma imagem em relação ao resto do texto.
<img src="FICHEIRO" border=?>	Define a borda da imagem.
<hr>	Insere uma linha horizontal.
TABELAS
<table></table>	Cria uma tabela.
<tr></tr>	Linha de uma tabela
<td></td>	Célula individual numa linha.
ATRIBUTOS DAS TABELAS
<table border=#>	Borda à volta de cada célula.
<table cellspacing=#>	Espaço entre as células.
<table cellpadding=#>	Margem interior das células.
<table width=# or %>	Largura da tabela - em pixels ou percentagem.
<tr align=?> or <td align=?>	Alinhamento horizontal do conteúdo das células.quot;left", "center" ou "right")
<tr valign=?> or <td valign=?>	Alinhamento vertical do conteúdo das células.("top", "middle" ou "bottom")
<td colspan=#>	Numero de colunas 'percorridas' por uma célula.
<td rowspan=#>	Numero de linhas 'percorridas' por uma célula.
FRAMES
<frameset></frameset>	Define o conjunto de frames. Surge antes de <body> num documento com frames.
<frameset rows="valor,valor">	Define as linhas num conjunto de frames. Valor pode ser em pixels, percentagem ou * (o resto / proporção).
<frameset cols="valor,valor">	Define as colunas num conjunto de frames. Valor pode ser em pixels, percentagem ou * (o resto / proporção).
<frame>	Define uma unica frame. Surge dentro de <frameset>.
<noframes></noframes>	Área onde é inserido o conteúdo visivel em browsers que não suportam o uso de frames.

O que e html

Entenda o HTML básico, saiba o que significa tags do HTML e entenda como fazer :

HTML é uma das linguagens que utilizamos para desenvolver websites. O acrônimo HTML vem do inglês e significa Hypertext Markup Language ou em português Linguagem de Marcação de Hipertexto.

O HTML é a liguagem base da internet. Foi criada para ser de fácil entendimento por seres humanos e também por máquinas, como por exemplo o Google ou outros sistemas que percorrem a internet capturando informação.

Quem criou o HTML?

Tim Berners-Lee. Esse é o nome do homem que criou o HTML. Ele criou o HTML para a comunicação e disseminação de pesquisas entre ele e seu grupo de colegas. O HTML ficou bastante conhecido quando começou a ser utilizada para formar a rede pública daquela época, o que se tornaria mais tarde a internet que conhecemos hoje.

O que são as tags do HTML? 

O HTML é uma linguagem baseada em marcação. Nós marcamos os elementos para mostrar quais informações a página exibe. Por exemplo, um título importante. Aquele título do artigo, da manchete do site, nós marcamos com uma tag/elemento chamado H1. Veja um exemplo:

<h1>Aqui vai o texto do título</h1>

Perceba que o texto está entre duas marcações. Essas marcações são chamadas de TAGS. As tags são abertas e depois fechadas. No exemplo acima abrimos a tag com<h1> e fechamos com </h1>. O que está dentro é o conteúdo mostrado para o usuário.

O parágrafos são marcados com a tag P. Assim:

<p>Aqui vai o texto do parágrafo. 
Geralmente parágrafos tem muitas palavras, 
letras menores que as do título</p>

Utilizando as tags, nós dizemos para o navegador o que é cada informação. O que é um título, o que é um parágrafo, o que é um botão, um formulário etc. Dizemos também o que é cada coisa para os sistemas de busca, como o Google. O Google, nesse caso, para exibir os resultados de busca, ele precisa saber o que é um parágrafo e o que é um título. Ele sabe disso através das tags.

A estrutura básica:

Todo HTML começa do mesmo jeito. Não há segredos aqui. Você pode simplesmente copiar em algum lugar para usar esse código toda vez iniciar um novo HTML.

<!DOCTYPE html>
 
<html lang="pt-br">
<head>
 <meta charset="utf-8">
 <title>Título da página</title>
</head>
<body>
 ... aqui vai todo o codigo HTML que faz seu site...
</body>
</html>

A primeira linha se chamada DOCTYPE. O Doctype avisa aos browsers, robôs de busca, leitores de tela e outras coisas que tipo de documento e aquele que eles estao prestes a carregar. Existem outros códigos que podemos carregar, por exemplo XML. Por isso o Doctype avisa o browser para que ele saiba como se comportar ao ler o código.

Depois começamos com a Tag HTML. Isso quer dizer que todo o que estiver entre as tags <html></html> é escrito em HTML. Ao lado da palavra HTML tem um atributo (explico o que são atributos mais pra frente) chamado lang, onde indicamos qual o idioma do texto que escreveremos.

Logo após a tag html temos a tag <head>. Na tag Head nós indicamos o título do documento e indicamos a tabela de caractéres que o browser deve usar para renderizar seu texto. Também não se preocupe com isso agora.
A tag &lttitle> é muito importante. É com ela que você indica o título do documento. O Google e outros sistemas de busca utilizam essa tag para indicar em suas buscas o título da págin. Isso é muito importante para que você apareça bem nas buscas.

Logo depois da tag de fechamento </head> começamos a tag <body>. Dentro deste elemento é que vamos escrever todo o código HTML do resto do site.

<!DOCTYPE html>
 
<html lang="pt-br">
<head>
 <meta charset="utf-8">
 <title>Título da página</title>
</head>
<body>
   <h1>Aqui vai o texto do título</h1>
   <p>Aqui vai o texto do parágrafo. 
   Geralmente parágrafos tem muitas palavras, letras menores que as do título</p>
</body>
</html>

Criando seu primeiro HTML:


Para criar seu HTML é muito simples. Primeiro, abra e crie um arquivo vazio, sem texto, com o nome index.html. Utilize o Notepad (se estiver no windows) ou o TextEdit (se estiver no Mac).
Perceba que a extensão do seu arquivo é .html e não .txt


Feito isso, copie o código utilizado no exemplo acima e cole neste documento. Salve e abra no seu navegador. Voilá! Você fez seu primeiro arquivo HTML

Um pouco avançado: Desenvolvimento em Camadas :


Um dos principais problemas no desenvolvimento para internet é a mistura dos diversos códigos. Nós não usamos apenas o HTML para fazer sites. Além do HTML, utilizamos ainda o CSS, que é uma linguagem para configurarmos o visual das páginas e o Javascript, que vai cuidar do comportamento da página, por exemplo, o que acontece quando o usuário clica em um botão.
Há também as linguagens chamadas Linguagens Server-Side, que são linguagens como PHP, Python, Ruby, ASP e etc. Essas linguagens fazem tudo funcionar. Elas fazem os cálculos nos servidores e dão a resposta para o navegador do usuário.


Para que os códigos não se misturem, nós os separamos em diversas camadas. Para ficar mais fácil de entender, imagine que o HTML é sempre o esqueleto do site. É com ele que vamos fazer toda a estrutura de código, onde iremos dizer o que é um título, o que é um parágrafo, uma imagem e etc. O CSS será a parte externa do corpo. É o que deixará o esqueleto bonito. É com o CSS que iremos dar cor para o título, configurar o tamanho do texto, largura das colunas e etc.


Dessa forma nós não misturamos o código HTML e o código CSS. Utilizamos a mesma ideia para separar os outros códigos citados acima.

HTML5