Estrutura de layout HTML5O HTML5 teve mudancas consideraveis em sua estrutura, novas tags foram inseridas melhorando muito a semantica das paginas, facilitando a compreensao, acessibilidade e a manutencao do codigo. Esse tutorial vai tratar das mudancas estruturais da pagina, principalmente da evolucao do elemento <div> para <nav>, <section>, <article>, <aside>, <header> e <footer>.Exemplo das mudancas: XHTML<body> <div id="header">...</div> <div id="menu">...</div> <div class="post">... <div class="content">...</div> </div> <div id="sidebar">...</div> <div id="rodape">...</div> </body>HTML5<body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body>Elementos de estrutura:<header> - cabecalho da pagina ou de uma secao (nao confundir com a tag <head>);<section> - cada secao do conteudo;<article> - um item do conteudo dentro da pagina ou da secao;<footer> - o rodape da pagina ou de uma secao;<nav> - o conjunto de links que formam a navegacao, seja o menu principal do site ou links relacionados ao conteudo da pagina;<aside> - conteudo relacionado ao artigo (como arquivos e posts relacionados em um blog, por exemplo). Note que qualquer elemento pode ter seu conteudo separado por secoes com o elemento section. Os elementos podem ter tambem um header e um footer independentes do resto do layout. Como na imagem. Exemplo de paginas HTML5: index.html<!DOCTYPE HTML><html lang="pt-br"> <head> <title>HTML 5</title> <link rel="stylesheet" href="style.css" /> </head> <header> <h1>Exemplo HTML 5</h1> </header> <nav> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </nav> <div id="corpo"> <div id="box"> <header> <h2>Titulo</h2> </header> <section> <article class="bpage"> <div> <p>Lorem ipsum .......</p> <p>Lorem ipsum .......</p> </div> </article> </section> </div> <aside> <section> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </section> <section> <ul> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> </ul> </section> <section> <ul> <li><a href="#">Link 9</a></li> <li><a href="#">Link 10</a></li> <li><a href="#">Link 11</a></li> <li><a href="#">Link 12</a></li> </ul> </section> </aside> </div> <footer> <section>Empresa </section> </footer></html> style.css* { margin:0; padding:0;}body{ margin:0 auto; width:960px; font-family:Arial, Helvetica, sans-serif;}a {color:#000000; text-shadow:1px 1px 1px #cccccc;}p {text-align:justify;}header, footer, aside, section {display:block;}h1 { font-size:26px; line-height:40px; padding:18px 0;}nav { width:70%; height:40px; -moz-border-radius:10px; -webkit-border-radius:10px; background:#f3f3f3; border:1px solid #cccccc; position:absolute;}nav ul { list-style-image:none; list-style-type:none; margin:0 auto; width:940px;}nav ul li { float:left;}nav ul li a{ margin-right:20px; display:block; line-height:40px;}#corpo { display:table; margin-top:40px;}#box { display:table-cell; padding:22px; width:620px;}aside { display:table-cell; width:280px; background:#f3f3f3;}.bpage div { -webkit-column-count:2; -moz-column-count:2; -moz-column-gap:22px; -webkit-coulmn-gap:22px;}aside section { -moz-border-radius:11px; -webkit-border-radius:11px; background:#e0e0e0; margin:22px 0 0 22px; padding:11px 22px; width:70%;}footer{ background:#CCC; padding:10px; -moz-border-radius:10px; -webkit-border-radius:10px; text-align:center; color:#ffffff;} HELLO WORLD EM JAVA X ECLIPSE Nesse tutorial vou mostrar como criar um programa hello world em java utilizando a ferramenta eclipse versao 4.2 classic. Caso ainda nao tenha a ferramenta eclipse voce podera baixa-la no link abaixo:Downoad eclipsePara rodar o eclipse e necessario a instalacao do java jdk no link abaixo:Download java JDK Feito as instalacoes abra o eclipse e clique em File > New > Java Project.Em Project Name digite HellWorld e clique em finish.Agora vamos criar uma class. Clique com o botao direito no projeto HelloWord > New > class:Em Name digite o nome da classe HelloWorld e clique em finishSera criado um arquivo chamado HelloWorld.java.Edite o arquivo e insira o seguinte codigoAgora e so executar o codigo e ver o resultado.Algumas consideracoes